From 638e1eb739405751add5020910825497eb20251d Mon Sep 17 00:00:00 2001
From: Mitch Hijlkema <mitch@hijlkema.codes>
Date: Sat, 28 Oct 2023 16:43:43 +0200
Subject: [PATCH] Work on panels

---
 libs/_internal/styles/src/index.ts            |  2 ++
 .../_internal/styles/src/lib/variable.func.ts |  5 ++++
 .../src/lib/bottom-panel.component.stories.ts |  4 +++
 .../src/lib/bottom-panel.component.ts         |  7 ++++-
 .../bottom-panel/src/lib/styles/index.ts      | 12 +++++---
 .../bottom-panel/src/lib/styles/variables.ts  |  4 +++
 .../side-panel/src/lib/panels-side-panel.ts   | 29 +++++++++++++++++--
 7 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 libs/_internal/styles/src/lib/variable.func.ts
 create mode 100644 libs/panels/bottom-panel/src/lib/styles/variables.ts

diff --git a/libs/_internal/styles/src/index.ts b/libs/_internal/styles/src/index.ts
index b0a696b..fb83e13 100644
--- a/libs/_internal/styles/src/index.ts
+++ b/libs/_internal/styles/src/index.ts
@@ -1,3 +1,5 @@
 export * from './lib/normalize';
 
 export * from './lib/variable.helper';
+
+export * from './lib/variable.func';
diff --git a/libs/_internal/styles/src/lib/variable.func.ts b/libs/_internal/styles/src/lib/variable.func.ts
new file mode 100644
index 0000000..9a68015
--- /dev/null
+++ b/libs/_internal/styles/src/lib/variable.func.ts
@@ -0,0 +1,5 @@
+import { unsafeCSS } from 'lit';
+
+export function variable(variableName: string, defaultValue?: string) {
+  return unsafeCSS(`var(${variableName}${defaultValue ? `, ${defaultValue}` : ''})`);
+}
diff --git a/libs/panels/bottom-panel/src/lib/bottom-panel.component.stories.ts b/libs/panels/bottom-panel/src/lib/bottom-panel.component.stories.ts
index 1a19d6f..b169158 100644
--- a/libs/panels/bottom-panel/src/lib/bottom-panel.component.stories.ts
+++ b/libs/panels/bottom-panel/src/lib/bottom-panel.component.stories.ts
@@ -16,6 +16,10 @@ export default {
     </style>
 
     <z-panels.bottom ?open=${args.open}>
+      <div slot="header">
+        <h2>est excepteur ea irure elit</h2>
+      </div>
+
       <p>
         Esse laborum pariatur irure in consequat deserunt officia. Eu aliquip ad duis. Voluptate velit fugiat ex Lorem et. Ea laborum ut
         veniam est ad consequat pariatur.
diff --git a/libs/panels/bottom-panel/src/lib/bottom-panel.component.ts b/libs/panels/bottom-panel/src/lib/bottom-panel.component.ts
index 1861b93..8b2c8c8 100644
--- a/libs/panels/bottom-panel/src/lib/bottom-panel.component.ts
+++ b/libs/panels/bottom-panel/src/lib/bottom-panel.component.ts
@@ -16,6 +16,8 @@ export default class BottomPanel extends LitElement {
   /** Private variables */
   private readonly _destroyController = new DestroyController(this);
 
+  private readonly _closeEvent = new CustomEvent('close', { bubbles: false });
+
   /** Protected variables */
 
   /** Public variables */
@@ -29,7 +31,10 @@ export default class BottomPanel extends LitElement {
       .pipe(
         filter(() => this.open),
         filter((event: MouseEvent) => event.target === this),
-        tap(() => (this.open = false)),
+        tap(() => {
+          this.open = false;
+          this.dispatchEvent(this._closeEvent);
+        }),
         takeUntil(this._destroyController.destroy),
       )
       .subscribe();
diff --git a/libs/panels/bottom-panel/src/lib/styles/index.ts b/libs/panels/bottom-panel/src/lib/styles/index.ts
index aabaf0b..099967f 100644
--- a/libs/panels/bottom-panel/src/lib/styles/index.ts
+++ b/libs/panels/bottom-panel/src/lib/styles/index.ts
@@ -1,5 +1,9 @@
+import { variable } from '@hijlkema-codes/internal/z-styles';
+
 import { css } from 'lit';
 
+import { backgroundColor, borderRadius, maxHeight, padding } from './variables';
+
 export const hostStyles = css`
   :host {
     display: block;
@@ -36,13 +40,13 @@ export const hostStyles = css`
 export const panelStyles = css`
   aside {
     position: absolute;
-    background-color: #fff;
+    background-color: ${variable(backgroundColor, 'hsl(0, 100%, 100%)')};
     box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.04);
-    border-radius: 12px 12px 0 0;
-    padding: 2rem 1.5rem;
+    border-radius: ${variable(borderRadius, '.75rem .75rem 0 0')};
+    padding: ${variable(padding, '2rem 1.5rem')};
     inset-inline: 0;
     bottom: 0;
-    max-height: 60dvh;
+    max-height: ${variable(maxHeight, '60vh')};
     pointer-events: auto;
     transition: transform 0.3s ease-out;
     overflow: scroll;
diff --git a/libs/panels/bottom-panel/src/lib/styles/variables.ts b/libs/panels/bottom-panel/src/lib/styles/variables.ts
new file mode 100644
index 0000000..150f942
--- /dev/null
+++ b/libs/panels/bottom-panel/src/lib/styles/variables.ts
@@ -0,0 +1,4 @@
+export const borderRadius = '--z-panels--bottom-panel--border-radius';
+export const backgroundColor = '--z-panels--bottom-panel--background-color';
+export const padding = '--z-panels--bottom-panel--padding';
+export const maxHeight = '--z-panels--bottom-panel--max-height';
diff --git a/libs/panels/side-panel/src/lib/panels-side-panel.ts b/libs/panels/side-panel/src/lib/panels-side-panel.ts
index 70eba66..09bf6cb 100644
--- a/libs/panels/side-panel/src/lib/panels-side-panel.ts
+++ b/libs/panels/side-panel/src/lib/panels-side-panel.ts
@@ -1,3 +1,28 @@
-export function panelsSidePanel(): string {
-  return 'panels-side-panel';
+import { DestroyController } from '@z-elements/_internal/controllers';
+
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('z-panels.side')
+export default class SidePanel extends LitElement {
+  static override get styles() {
+    return [];
+  }
+
+  /** Private variables */
+  private readonly _destroyController = new DestroyController(this);
+
+  private readonly _closeEvent = new CustomEvent('close', { bubbles: false });
+
+  /** Protected variables */
+
+  /** Public variables */
+
+  /** constructor & lifecycle */
+
+  /** Public methods */
+
+  /** Protected methods */
+
+  /** Private methods */
 }