Add Settings Container Component

src/app/components/dropdown/dropdown.html

@@ -7,7 +7,7 @@
 </ng-template>
 
 <div class="dropdown-box">
-  @if (icon()) {
+  @if (icon()?.trim()?.length ?? 0 > 0) {
     <span class="material-symbols-outlined icon-24 prefix-icon" aria-hidden="true">{{ icon() }}</span>
   }
 
@@ -22,13 +22,13 @@
 
 @if (isOpen()) {
   <div class="dropdown-container" tabindex="-1">
-    <ul class="dropdown-list" role="listbox" [id]="dropdownId + '-listbox'" tabindex="-1">
+    <ul class="dropdown-list" role="listbox" [id]="dropdownID + '-listbox'" tabindex="-1">
       @for (option of filteredOptions(); track option.value; let i = $index) {
         <li
           #optionItem
           class="dropdown-item"
           role="option"
-          [id]="dropdownId + '-option-' + i"
+          [id]="dropdownID + '-option-' + i"
           [class.selected]="option.value === value()"
           [class.focused]="i === focusedIndex()"
           [attr.aria-selected]="option.value === value()"

src/app/components/dropdown/dropdown.ts

@@ -33,7 +33,7 @@ export interface DropdownOption {
     role: 'combobox',
     'aria-haspopup': 'listbox',
     '[attr.aria-expanded]': 'isOpen()',
-    '[attr.aria-controls]': "isOpen() ? dropdownId + '-listbox' : null",
+    '[attr.aria-controls]': "isOpen() ? dropdownID + '-listbox' : null",
     '[attr.aria-activedescendant]': 'ariaActiveDescendant()',
     '[attr.aria-label]': 'ariaLabel()',
     '[class.open]': 'isOpen()',
@@ -71,13 +71,13 @@ export class Dropdown implements OnInit {
 
   ariaActiveDescendant = computed(() => {
     return this.isOpen() && this.focusedIndex() >= 0
-      ? this.dropdownId + '-option-' + this.focusedIndex()
+      ? this.dropdownID + '-option-' + this.focusedIndex()
       : null;
   });
 
-  private static nextId = 0;
+  private static nextID = 0;
   private isLatestMouseDownInsideInput = false;
-  dropdownId = `dropdown-${Dropdown.nextId++}`;
+  dropdownID = `dropdown-${Dropdown.nextID++}`;
   private isLatestMouseDownInsideContainer = false;
 
   constructor(private element: ElementRef) {