fix(core): update

ts_web/elements/dees-input-dropdown.demo.ts

@@ -0,0 +1,11 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+<dees-input-dropdown
+  .options=${[
+    {option: 'option 1', key: 'option1'},
+    {option: 'option 2', key: 'option2'},
+    {option: 'option 3', key: 'option3'}
+  ]}
+></dees-input-dropdown>
+`

ts_web/elements/dees-input-dropdown.ts

@@ -1,5 +1,6 @@
 import { customElement, DeesElement, type TemplateResult, property, html, css, cssManager, type CSSResult, } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-input-dropdown.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -9,15 +10,7 @@ declare global {
 
 @customElement('dees-input-dropdown')
 export class DeesInputDropdown extends DeesElement {
-  public static demo = () => html`
-    <dees-input-dropdown
-      .options=${[
-        {option: 'option 1', key: 'option1'},
-        {option: 'option 2', key: 'option2'},
-        {option: 'option 3', key: 'option3'}
-      ]}
-    ></dees-input-dropdown>
-  `
+  public static demo = demoFunc
 
   // INSTANCE
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
@@ -100,12 +93,11 @@ export class DeesInputDropdown extends DeesElement {
           cursor: pointer;
           transition: all 0.2s ease;
           opacity: 0;
-          position: relative;
+          position: absolute;
           background: ${cssManager.bdTheme('#ffffff', '#222222')};
           max-width: 420px;
           box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
           min-height: 40px;
-          margin-top: -40px;
           z-index: 100;
           border-radius: 3px;
           padding: 4px;
@@ -135,12 +127,8 @@ export class DeesInputDropdown extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      ${domtools.elementBasic.styles}
-      <style>
-        
-      </style>
       <div class="maincontainer">
-        <div class="selectedBox show" @click="${event => {this.toggleSelectionBox();}}">
+        <div class="selectedBox show" @click="${event => {this.openSelectionBox();}}">
           ${this.selectedOption?.option}
         </div>
         <div class="selectionBox">
@@ -165,12 +153,16 @@ export class DeesInputDropdown extends DeesElement {
       detail: selectedOption,
       bubbles: true
     }));
-    this.toggleSelectionBox();
+    this.openSelectionBox();
     this.changeSubject.next(this);
   }
 
-  public toggleSelectionBox() {
+  public openSelectionBox() {
     this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
     this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
   }
+
+  public closeSelectionBox() {
+    
+  }
 }

ts_web/elements/dees-modal.ts

@@ -71,6 +71,7 @@ export class DeesModal extends DeesElement {
       :host {
         font-family: 'Roboto', 'Inter', sans-serif;
         color: ${cssManager.bdTheme('#333', '#fff')};
+        will-change: transform;
       }
       .modalContainer {
         display: flex;

ts_web/elements/dees-windowlayer.ts

@@ -66,14 +66,22 @@ export class DeesWindowLayer extends DeesElement {
           pointer-events: none;
           z-index: 200;
         }
+        .slotContent {
+          height: 100vh;
+          width: 100vw;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
         
         .visible {
           background: rgba(0, 0, 0, 0.2);
           backdrop-filter: brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''};
-          pointer-events: all;
         }
       </style>
-      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
+      <div class="windowOverlay ${this.visible ? 'visible' : null}">
+      </div>
+      <div @click=${this.dispatchClicked} class="slotContent">
         <slot></slot>
       </div>
     `;