Add Dropdown Search Feature

src/app/components/dropdown/dropdown.html

@@ -2,23 +2,32 @@
   @if (icon()) {
     <span class="material-symbols-outlined icon-24 prefix-icon">{{ icon() }}</span>
   }
-  <span class="placeholder">{{ selectedLabel() }}</span>
+
+  <div #searchInput class="dropdown-input" [class.hidden]="!isOpen()"
+       contenteditable="true" role="textbox" aria-multiline="false" [aria-placeholder]="translation.common.selectOption" tabindex="-1" spellcheck="false"
+       (input)="onSearch($event)"></div>
+
+  @if (!isOpen()) {
+    <span class="placeholder">{{ selectedLabel() }}</span>
+  }
   <span class="material-symbols-outlined icon-24 chevron" [class.open]="isOpen()">keyboard_arrow_down</span>
 </div>
 
 @if (isOpen()) {
-  <ul class="dropdown-list" role="listbox" [id]="dropdownId + '-listbox'">
-    @for (option of normalizedOptions(); track option.value; let i = $index) {
-      <li
-        class="dropdown-item"
-        role="option"
-        [id]="dropdownId + '-option-' + i"
-        [class.selected]="option.value === value()"
-        [class.focused]="i === focusedIndex()"
-        [attr.aria-selected]="option.value === value()"
-        (click)="selectOption(option); $event.stopPropagation()">
-        {{ option.label }}
-      </li>
-    }
-  </ul>
+  <div class="dropdown-container">
+    <ul class="dropdown-list" role="listbox" [id]="dropdownId + '-listbox'">
+      @for (option of filteredOptions(); track option.value; let i = $index) {
+        <li
+          class="dropdown-item"
+          role="option"
+          [id]="dropdownId + '-option-' + i"
+          [class.selected]="option.value === value()"
+          [class.focused]="i === focusedIndex()"
+          [attr.aria-selected]="option.value === value()"
+          (click)="selectOption(option); $event.stopPropagation()">
+          {{ option.label }}
+        </li>
+      }
+    </ul>
+  </div>
 }