fix(core): update

ts_web/elements/dees-form.demo.ts

@@ -28,6 +28,13 @@ export const demoFunc = () => html`
           { option: 'option 3', key: 'option3' },
         ]}
       ></dees-input-dropdown>
+      <dees-input-multiselect
+        .label=${'title'}
+        .options=${[
+          { option: 'option 1', key: 'option1' },
+          { option: 'option 2', key: 'option2' },
+          { option: 'option 3', key: 'option3' },
+        ]}></dees-input-multiselect>
       <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
       <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
       <dees-input-text

ts_web/elements/dees-input-dropdown.ts

@@ -230,14 +230,14 @@ export class DeesInputDropdown extends DeesElement {
             }
           }}"
         >
-          ${this.selectedOption?.option}
+          ${this.selectedOption?.option || 'Select...'} 
         </div>
       </div>
     `;
   }
 
   firstUpdated() {
-    this.selectedOption = this.selectedOption || this.options[0] || null;
+    this.selectedOption = this.selectedOption || null;
     this.filteredOptions = this.options; // Initialize filteredOptions
   }
 
@@ -279,7 +279,12 @@ export class DeesInputDropdown extends DeesElement {
       elevatedDropdown.style.width = this.clientWidth + 'px';
       elevatedDropdown.options = this.options;
       elevatedDropdown.selectedOption = this.selectedOption;
+      elevatedDropdown.highlightedIndex = elevatedDropdown.selectedOption ? elevatedDropdown.options.indexOf(
+        elevatedDropdown.options.find((option) => option.key === this.selectedOption.key)
+      ) : -1;
+      console.log(elevatedDropdown.options);
       console.log(elevatedDropdown.selectedOption);
+      console.log(elevatedDropdown.highlightedIndex);
       this.windowOverlay.appendChild(elevatedDropdown);
       await domtoolsInstance.convenience.smartdelay.delayFor(0);
       elevatedDropdown.toggleSelectionBox();

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

@@ -0,0 +1,5 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <dees-input-multiselect></dees-input-multiselect>
+`;

ts_web/elements/dees-input-multiselect.ts

@@ -0,0 +1,69 @@
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  state,
+  html,
+  domtools,
+  property,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+const { demoFunc } = await import('./dees-input-multiselect.demo.js');
+
+@customElement('dees-input-multiselect')
+export class DeesInputMultiselect extends DeesElement {
+  public static demo = demoFunc;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: ${cssManager.bdTheme('#333', '#fff')}
+      }
+      .label {
+        font-size: 14px;
+        margin-bottom: 4px;
+      }
+      .mainbox {
+        border-radius: 3px;
+        background: #222;
+        overflow: hidden;
+        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
+        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
+        border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')};
+        border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
+      }
+
+      .selections {
+        padding: 8px;
+      }
+
+      input {
+        background: #181818;
+        width: 100%;
+        outline: none;
+        border: none;
+        color: inherit;
+        padding: 8px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="label">MultiSelect</div>
+      <div class="mainbox">
+        <div class="selections">
+          Nothing selected...
+        </div>
+        <input type="text" placeholder="Type to select" />
+      </div>
+    `;
+  }
+}

ts_web/elements/dees-input-text.ts

@@ -121,7 +121,6 @@ export class DeesInputText extends DeesElement {
         position: relative;
         z-index: 2;
         cursor: default;
-        // see template for more
       }
 
       input:disabled {

ts_web/elements/index.ts

@@ -12,6 +12,7 @@ export * from './dees-input-checkbox.js';
 export * from './dees-input-dropdown.js';
 export * from './dees-input-fileupload.js';
 export * from './dees-input-iban.js';
+export * from './dees-input-multiselect.js';
 export * from './dees-input-phone.js';
 export * from './dees-input-quantityselector.js';
 export * from './dees-input-radio.js';