fix(core): update

ts_web/elements/dees-input-dropdown.ts

@@ -59,6 +59,15 @@ export class DeesInputDropdown extends DeesElement {
   @state()
   public opensToTop: boolean = false;
 
+  @state()
+  private filteredOptions: { option: string; key: string; payload?: any }[] = [];
+
+  @state()
+  private highlightedIndex: number = 0;
+
+  @state()
+  public isOpened = false;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -85,7 +94,6 @@ export class DeesInputDropdown extends DeesElement {
 
       .selectedBox {
         user-select: none;
-        cursor: pointer;
         position: relative;
         max-width: 420px;
         height: 40px;
@@ -99,18 +107,17 @@ export class DeesInputDropdown extends DeesElement {
         transition: all 0.2s ease;
       }
 
-      .accentTop {
-        border-top: 1px solid #e4002b;
+      .accentBottom {
+        background: #ffffff10;
       }
 
-      .accentBottom {
-        border-bottom: 1px solid #e4002b;
+      .accentTop {
+        background: #ffffff10;
       }
 
       .selectionBox {
         will-change: transform;
         pointer-events: none;
-        cursor: pointer;
         transition: all 0.2s ease;
         opacity: 0;
         background: ${cssManager.bdTheme('#ffffff', '#222222')};
@@ -118,22 +125,31 @@ export class DeesInputDropdown extends DeesElement {
         box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
         min-height: 40px;
         border-radius: 3px;
-        padding: 4px;
-        transform: scale(0.99, 0.99);
+        padding: 4px 8px;
+        transform: scale(0.98, 0.98);
         position: absolute;
+        user-select: none;
       }
 
       .selectionBox.show {
         pointer-events: all;
         opacity: 1;
         transform: scale(1, 1);
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
       }
 
       .option {
         transition: all 0.1s;
-        line-height: 40px;
+        line-height: 32px;
         padding: 0px 4px;
         border-radius: 3px;
+        margin: 4px 0px;
+      }
+
+      .option.highlighted {
+        border-left: 2px solid #0277bd;
+        padding-left: 6px;
+        background: #ffffff20;
       }
 
       .option:hover {
@@ -169,20 +185,21 @@ export class DeesInputDropdown extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="maincontainer">
+      <div class="maincontainer" @keydown="${this.isOpened ? this.handleKeyDown : undefined}">
         ${this.label ? html`<div class="label">${this.label}</div>` : html``}
         <div class="selectionBox">
           ${this.enableSearch && !this.opensToTop
             ? html`
                 <div class="search">
-                  <input type="text" placeholder="Search" />
+                  <input type="text" placeholder="Search" @input="${this.handleSearch}" />
                 </div>
               `
             : null}
-          ${this.options.map((option) => {
+          ${this.filteredOptions.map((option, index) => {
+            const isHighlighted = this.highlightedIndex === index;
             return html`
               <div
-                class="option"
+                class="option ${isHighlighted ? 'highlighted' : ''}"
                 @click=${() => {
                   this.updateSelection(option);
                 }}
@@ -194,7 +211,7 @@ export class DeesInputDropdown extends DeesElement {
           ${this.enableSearch && this.opensToTop
             ? html`
                 <div class="search">
-                  <input type="text" placeholder="Search" />
+                  <input type="text" placeholder="Search" @input="${this.handleSearch}" />
                 </div>
               `
             : null}
@@ -217,6 +234,7 @@ export class DeesInputDropdown extends DeesElement {
 
   firstUpdated() {
     this.selectedOption = this.selectedOption || this.options[0] || null;
+    this.filteredOptions = this.options; // Initialize filteredOptions
   }
 
   public async updateSelection(selectedOption) {
@@ -237,6 +255,7 @@ export class DeesInputDropdown extends DeesElement {
   private isElevated: boolean = false;
   private windowOverlay: DeesWindowLayer;
   public async toggleSelectionBox() {
+    this.isOpened = !this.isOpened;
     const domtoolsInstance = await this.domtoolsPromise;
     const selectedBox: HTMLElement = this.shadowRoot.querySelector('.selectedBox');
     const selectionBox: HTMLElement = this.shadowRoot.querySelector('.selectionBox');
@@ -298,4 +317,32 @@ export class DeesInputDropdown extends DeesElement {
       }
     }
   }
+
+  private handleSearch(event: Event): void {
+    const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
+    this.filteredOptions = this.options.filter((option) =>
+      option.option.toLowerCase().includes(searchTerm)
+    );
+    this.highlightedIndex = 0; // Reset highlighted index
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    if (!this.isOpened) {
+      console.log('discarded key event. Check why this function is called.');
+      return;
+    }
+    const key = event.key;
+    const maxIndex = this.filteredOptions.length - 1;
+
+    if (key === 'ArrowDown') {
+      this.highlightedIndex = this.highlightedIndex + 1 > maxIndex ? 0 : this.highlightedIndex + 1;
+      event.preventDefault();
+    } else if (key === 'ArrowUp') {
+      this.highlightedIndex = this.highlightedIndex - 1 < 0 ? maxIndex : this.highlightedIndex - 1;
+      event.preventDefault();
+    } else if (key === 'Enter') {
+      this.updateSelection(this.filteredOptions[this.highlightedIndex]);
+      event.preventDefault();
+    }
+  }
 }