@haloduck/ui 2.0.41 → 2.0.43

package/fesm2022/haloduck-ui.mjs

@@ -689,11 +689,11 @@ class SelectDropdownComponent {
         this.emitSelectedChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectDropdownComponent, isStandalone: true, selector: "haloduck-select-dropdown", inputs: { useFilter: "useFilter", multiselect: "multiselect", atLeastOne: "atLeastOne", asButton: "asButton", options: "options", selectedOptionIds: "selectedOptionIds" }, outputs: { selectedChange: "selectedChange", closeDropdown: "closeDropdown" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<div\n  id=\"dropdown\"\n  class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\"\n>\n  @if (useFilter && _options.length >= 5) {\n    <input\n      #inputFilter\n      id=\"inputFilter\"\n      type=\"text\"\n      [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n      (input)=\"onFilterInput($event)\"\n      class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\"\n    />\n  }\n  <div class=\"overflow-y-auto\">\n    @for (option of _filteredOptions(); track option.id ? option.id : option.value) {\n      <div\n        class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n        [class.cursor-pointer]=\"!option.shouldManualInput\"\n        (click)=\"!option.shouldManualInput && onToggleOption(option)\"\n      >\n        @if (!asButton) {\n          @if (isOptionSelected(option)) {\n            <svg\n              class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2 cursor-pointer\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n              (click)=\"option.shouldManualInput && $event.stopPropagation(); option.shouldManualInput && onToggleOption(option)\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <div class=\"w-4 h-4 inline-block mr-2\"></div>\n          }\n        }\n        @if (option.shouldManualInput && activeManualKey === (option.id || option.value)) {\n          <input\n            type=\"text\"\n            [(ngModel)]=\"manualInputValues[option.id || option.value]\"\n            [attr.data-manual-key]=\"option.id || option.value\"\n            (ngModelChange)=\"onManualInputChange(option, $event)\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd(option, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            (blur)=\"onManualInputBlur(option)\"\n            (keydown)=\"onManualInputKeydown(option, $event)\"\n            class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\"\n          />\n        } @else if (option.shouldManualInput) {\n          <span\n            class=\"cursor-pointer flex-1\"\n            (click)=\"$event.stopPropagation(); onEditManualInput(option)\"\n          >\n            {{ getManualInputDisplayValue(option) || option.value }}\n          </span>\n        } @else {\n          {{ option.value }}\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectDropdownComponent, isStandalone: true, selector: "haloduck-select-dropdown", inputs: { useFilter: "useFilter", multiselect: "multiselect", atLeastOne: "atLeastOne", asButton: "asButton", options: "options", selectedOptionIds: "selectedOptionIds" }, outputs: { selectedChange: "selectedChange", closeDropdown: "closeDropdown" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<div\n  id=\"dropdown\"\n  class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\"\n>\n  @if (useFilter && _options.length >= 5) {\n    <input\n      #inputFilter\n      id=\"inputFilter\"\n      type=\"text\"\n      [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n      (input)=\"onFilterInput($event)\"\n      class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\"\n    />\n  }\n  <div class=\"overflow-y-auto\">\n    @for (option of _filteredOptions(); track option.id ? option.id : option.value) {\n      <div\n        class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n        [class.cursor-pointer]=\"!option.shouldManualInput\"\n        (click)=\"!option.shouldManualInput && onToggleOption(option)\"\n      >\n        @if (!asButton) {\n          @if (isOptionSelected(option)) {\n            <svg\n              class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2 cursor-pointer\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n              (click)=\"\n                option.shouldManualInput && $event.stopPropagation();\n                option.shouldManualInput && onToggleOption(option)\n              \"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <div class=\"w-4 h-4 inline-block mr-2\"></div>\n          }\n        }\n        @if (option.shouldManualInput && activeManualKey === (option.id || option.value)) {\n          <input\n            type=\"text\"\n            [(ngModel)]=\"manualInputValues[option.id || option.value]\"\n            [attr.data-manual-key]=\"option.id || option.value\"\n            (ngModelChange)=\"onManualInputChange(option, $event)\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd(option, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            (blur)=\"onManualInputBlur(option)\"\n            (keydown)=\"onManualInputKeydown(option, $event)\"\n            class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\"\n          />\n        } @else if (option.shouldManualInput) {\n          <span\n            class=\"cursor-pointer flex-1\"\n            (click)=\"$event.stopPropagation(); onEditManualInput(option)\"\n          >\n            {{ getManualInputDisplayValue(option) || option.value }}\n          </span>\n        } @else {\n          {{ option.value }}\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'haloduck-select-dropdown', imports: [TranslocoModule, FormsModule], providers: [provideTranslocoScope('haloduck')], template: "<div\n  id=\"dropdown\"\n  class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\"\n>\n  @if (useFilter && _options.length >= 5) {\n    <input\n      #inputFilter\n      id=\"inputFilter\"\n      type=\"text\"\n      [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n      (input)=\"onFilterInput($event)\"\n      class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\"\n    />\n  }\n  <div class=\"overflow-y-auto\">\n    @for (option of _filteredOptions(); track option.id ? option.id : option.value) {\n      <div\n        class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n        [class.cursor-pointer]=\"!option.shouldManualInput\"\n        (click)=\"!option.shouldManualInput && onToggleOption(option)\"\n      >\n        @if (!asButton) {\n          @if (isOptionSelected(option)) {\n            <svg\n              class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2 cursor-pointer\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n              (click)=\"option.shouldManualInput && $event.stopPropagation(); option.shouldManualInput && onToggleOption(option)\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <div class=\"w-4 h-4 inline-block mr-2\"></div>\n          }\n        }\n        @if (option.shouldManualInput && activeManualKey === (option.id || option.value)) {\n          <input\n            type=\"text\"\n            [(ngModel)]=\"manualInputValues[option.id || option.value]\"\n            [attr.data-manual-key]=\"option.id || option.value\"\n            (ngModelChange)=\"onManualInputChange(option, $event)\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd(option, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            (blur)=\"onManualInputBlur(option)\"\n            (keydown)=\"onManualInputKeydown(option, $event)\"\n            class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\"\n          />\n        } @else if (option.shouldManualInput) {\n          <span\n            class=\"cursor-pointer flex-1\"\n            (click)=\"$event.stopPropagation(); onEditManualInput(option)\"\n          >\n            {{ getManualInputDisplayValue(option) || option.value }}\n          </span>\n        } @else {\n          {{ option.value }}\n        }\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'haloduck-select-dropdown', imports: [TranslocoModule, FormsModule], providers: [provideTranslocoScope('haloduck')], template: "<div\n  id=\"dropdown\"\n  class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\"\n>\n  @if (useFilter && _options.length >= 5) {\n    <input\n      #inputFilter\n      id=\"inputFilter\"\n      type=\"text\"\n      [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n      (input)=\"onFilterInput($event)\"\n      class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\"\n    />\n  }\n  <div class=\"overflow-y-auto\">\n    @for (option of _filteredOptions(); track option.id ? option.id : option.value) {\n      <div\n        class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n        [class.cursor-pointer]=\"!option.shouldManualInput\"\n        (click)=\"!option.shouldManualInput && onToggleOption(option)\"\n      >\n        @if (!asButton) {\n          @if (isOptionSelected(option)) {\n            <svg\n              class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2 cursor-pointer\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n              (click)=\"\n                option.shouldManualInput && $event.stopPropagation();\n                option.shouldManualInput && onToggleOption(option)\n              \"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <div class=\"w-4 h-4 inline-block mr-2\"></div>\n          }\n        }\n        @if (option.shouldManualInput && activeManualKey === (option.id || option.value)) {\n          <input\n            type=\"text\"\n            [(ngModel)]=\"manualInputValues[option.id || option.value]\"\n            [attr.data-manual-key]=\"option.id || option.value\"\n            (ngModelChange)=\"onManualInputChange(option, $event)\"\n            (compositionstart)=\"onCompositionStart()\"\n            (compositionend)=\"onCompositionEnd(option, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            (blur)=\"onManualInputBlur(option)\"\n            (keydown)=\"onManualInputKeydown(option, $event)\"\n            class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\"\n          />\n        } @else if (option.shouldManualInput) {\n          <span\n            class=\"cursor-pointer flex-1\"\n            (click)=\"$event.stopPropagation(); onEditManualInput(option)\"\n          >\n            {{ getManualInputDisplayValue(option) || option.value }}\n          </span>\n        } @else {\n          {{ option.value }}\n        }\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { selectedChange: [{
                 type: Output
             }], closeDropdown: [{
@@ -718,6 +718,9 @@ class SelectComponent {
     viewContainerRef = inject(ViewContainerRef);
     cdr = inject(ChangeDetectorRef);
     overlayRef = null;
+    // Generate unique ID for radio button grouping
+    static instanceCounter = 0;
+    radioGroupName = `haloduck-select-radio-${++SelectComponent.instanceCounter}`;
     selectedChange = new EventEmitter();
     disabled = false;
     loading = false;
@@ -1328,7 +1331,7 @@ class SelectComponent {
                 multi: true,
             },
             provideTranslocoScope('haloduck'),
-        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"flex gap-2 items-center w-full\"\n  [ngClass]=\"{ 'flex-col items-start': layout === 'vertical' }\"\n>\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{\n      labelWidth\n    }}\"\n    [ngClass]=\"{ 'w-full': layout === 'vertical' }\"\n  >\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n\n  @if (showAllItems) {\n    <!-- Inline options display -->\n    <div class=\"w-full flex-1\">\n      @if (loading) {\n        <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n          <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">\n            &nbsp;\n          </div>\n        </div>\n      } @else {\n        <div class=\"flex flex-col gap-2\">\n          @for (option of options; track option.id || option.value) {\n            <label\n              class=\"flex items-center gap-2 text-sm/6 text-light-on-control dark:text-dark-on-control cursor-pointer\"\n              [ngClass]=\"{\n                'opacity-60 cursor-not-allowed': disabled,\n              }\"\n            >\n              @if (multiselect) {\n                <!-- Checkbox for multiselect -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  class=\"appearance-none w-5 h-5 rounded bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-0 before:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgNEw0LjUgNy41TDExIDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+')] before:bg-center before:bg-no-repeat before:opacity-0 checked:before:opacity-100\"\n                />\n              } @else {\n                <!-- Radio button for single select -->\n                <input\n                  type=\"radio\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  name=\"radio-group\"\n                  class=\"appearance-none w-5 h-5 rounded-full bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-[4px] before:rounded-full before:bg-light-on-primary before:dark:bg-dark-on-primary before:opacity-0 checked:before:opacity-100\"\n                />\n              }\n              @if (\n                option.shouldManualInput &&\n                (isOptionSelected(option) || activeManualKey === (option.id || option.value))\n              ) {\n                <input\n                  type=\"text\"\n                  [(ngModel)]=\"manualInputValues[option.id || option.value]\"\n                  [attr.data-manual-key]=\"option.id || option.value\"\n                  (ngModelChange)=\"onManualInputChange(option, $event)\"\n                  (compositionstart)=\"onCompositionStart()\"\n                  (compositionend)=\"onCompositionEnd(option, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (blur)=\"onManualInputBlur(option)\"\n                  (keydown)=\"onManualInputKeydown(option, $event)\"\n                  [disabled]=\"!!disabled\"\n                  class=\"flex-1 text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control\"\n                />\n              } @else {\n                <span (click)=\"!disabled && onToggleOption(option)\">{{ option.value }}</span>\n              }\n            </label>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Original dropdown display -->\n    <div\n      #origin\n      class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n      [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary':\n          !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary':\n          variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary':\n          variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger':\n          variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60':\n          disabled,\n      }\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (click)=\"onClick($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <div\n        class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\"\n      >\n        @if (loading) {\n          <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n            <div\n              class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\"\n            >\n              &nbsp;\n            </div>\n          </div>\n        } @else {\n          <div class=\"flex-1\">\n            @if (!asButton && displayedSelectedOptions && displayedSelectedOptions.length > 0) {\n              @if (multiselect) {\n                <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n                  @for (option of displayedSelectedOptions; track option; let i = $index) {\n                    @if (showAll || i === 0) {\n                      <span\n                        class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                        [ngClass]=\"{ 'w-full h-full px-4': !multiselect, 'px-1': multiselect }\"\n                      >\n                        {{ option.value }}\n                        @if (showAll || i === 0) {\n                          <div\n                            (click)=\"onDeselectOption($event, option)\"\n                            class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\"\n                          >\n                            <svg\n                              class=\"w-3 h-3\"\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 20 20\"\n                              fill=\"currentColor\"\n                              aria-hidden=\"true\"\n                            >\n                              <path\n                                fill-rule=\"evenodd\"\n                                d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                                clip-rule=\"evenodd\"\n                              />\n                            </svg>\n                          </div>\n                        }\n                      </span>\n                      @if (!showAll && displayedSelectedOptions.length > 1) {\n                        <span\n                          class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\"\n                        >\n                          +{{ displayedSelectedOptions.length - 1 }}\n                        </span>\n                      }\n                    }\n                  }\n                </div>\n              } @else {\n                <span\n                  class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n                  [ngClass]=\"{\n                    'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                    'text-light-on-primary dark:text-dark-on-primary':\n                      variant === 'primary' && !disabled,\n                    'text-light-on-secondary dark:text-dark-on-secondary':\n                      variant === 'secondary' && !disabled,\n                    'text-light-on-danger dark:text-dark-on-danger':\n                      variant === 'danger' && !disabled,\n                  }\"\n                  >{{ displayedSelectedOptions[0].value }}</span\n                >\n              }\n            } @else {\n              <span\n                class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n                [ngClass]=\"{\n                  'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                  'text-light-on-primary/80 dark:text-dark-on-primary/80':\n                    variant === 'primary' && !disabled,\n                  'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n                    variant === 'secondary' && !disabled,\n                  'text-light-on-danger/80 dark:text-dark-on-danger/80':\n                    variant === 'danger' && !disabled,\n                }\"\n              >\n                @if (useIcon) {\n                  <ng-content select=\"buttonIcon\"></ng-content>\n                } @else {\n                  {{ placeholder }}\n                }\n              </span>\n            }\n          </div>\n        }\n        <div\n          class=\"text-light-on-control dark:text-dark-on-control\"\n          [ngClass]=\"{\n            'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n            'text-light-on-primary/80 dark:text-dark-on-primary/80':\n              variant === 'primary' && !disabled,\n            'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n              variant === 'secondary' && !disabled,\n            'text-light-on-danger/80 dark:text-dark-on-danger/80':\n              variant === 'danger' && !disabled,\n          }\"\n        >\n          @if (isDropdownOpen()) {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"flex gap-2 items-center w-full\"\n  [ngClass]=\"{ 'flex-col items-start': layout === 'vertical' }\"\n>\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{\n      labelWidth\n    }}\"\n    [ngClass]=\"{ 'w-full': layout === 'vertical' }\"\n  >\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n\n  @if (showAllItems) {\n    <!-- Inline options display -->\n    <div class=\"w-full flex-1\">\n      @if (loading) {\n        <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n          <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">\n            &nbsp;\n          </div>\n        </div>\n      } @else {\n        <div class=\"flex flex-col gap-2\">\n          @for (option of options; track option.id || option.value) {\n            <label\n              class=\"flex items-center gap-2 text-sm/6 text-light-on-control dark:text-dark-on-control cursor-pointer\"\n              [ngClass]=\"{\n                'opacity-60 cursor-not-allowed': disabled,\n              }\"\n              (click)=\"$event.preventDefault()\"\n            >\n              @if (multiselect) {\n                <!-- Checkbox for multiselect -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  class=\"appearance-none w-5 h-5 rounded bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-0 before:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgNEw0LjUgNy41TDExIDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+')] before:bg-center before:bg-no-repeat before:opacity-0 checked:before:opacity-100\"\n                />\n              } @else {\n                <!-- Radio button for single select -->\n                <input\n                  type=\"radio\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  [name]=\"radioGroupName\"\n                  class=\"appearance-none w-5 h-5 rounded-full bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-[4px] before:rounded-full before:bg-light-on-primary before:dark:bg-dark-on-primary before:opacity-0 checked:before:opacity-100\"\n                />\n              }\n              @if (\n                option.shouldManualInput &&\n                (isOptionSelected(option) || activeManualKey === (option.id || option.value))\n              ) {\n                <input\n                  type=\"text\"\n                  [(ngModel)]=\"manualInputValues[option.id || option.value]\"\n                  [attr.data-manual-key]=\"option.id || option.value\"\n                  (ngModelChange)=\"onManualInputChange(option, $event)\"\n                  (compositionstart)=\"onCompositionStart()\"\n                  (compositionend)=\"onCompositionEnd(option, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (blur)=\"onManualInputBlur(option)\"\n                  (keydown)=\"onManualInputKeydown(option, $event)\"\n                  [disabled]=\"!!disabled\"\n                  class=\"flex-1 text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control\"\n                />\n              } @else {\n                <span (click)=\"!disabled && onToggleOption(option)\">{{ option.value }}</span>\n              }\n            </label>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Original dropdown display -->\n    <div\n      #origin\n      class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n      [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary':\n          !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary':\n          variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary':\n          variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger':\n          variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60':\n          disabled,\n      }\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (click)=\"onClick($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <div\n        class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\"\n      >\n        @if (loading) {\n          <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n            <div\n              class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\"\n            >\n              &nbsp;\n            </div>\n          </div>\n        } @else {\n          <div class=\"flex-1\">\n            @if (!asButton && displayedSelectedOptions && displayedSelectedOptions.length > 0) {\n              @if (multiselect) {\n                <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n                  @for (option of displayedSelectedOptions; track option; let i = $index) {\n                    @if (showAll || i === 0) {\n                      <span\n                        class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                        [ngClass]=\"{ 'w-full h-full px-4': !multiselect, 'px-1': multiselect }\"\n                      >\n                        {{ option.value }}\n                        @if (showAll || i === 0) {\n                          <div\n                            (click)=\"onDeselectOption($event, option)\"\n                            class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\"\n                          >\n                            <svg\n                              class=\"w-3 h-3\"\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 20 20\"\n                              fill=\"currentColor\"\n                              aria-hidden=\"true\"\n                            >\n                              <path\n                                fill-rule=\"evenodd\"\n                                d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                                clip-rule=\"evenodd\"\n                              />\n                            </svg>\n                          </div>\n                        }\n                      </span>\n                      @if (!showAll && displayedSelectedOptions.length > 1) {\n                        <span\n                          class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\"\n                        >\n                          +{{ displayedSelectedOptions.length - 1 }}\n                        </span>\n                      }\n                    }\n                  }\n                </div>\n              } @else {\n                <span\n                  class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n                  [ngClass]=\"{\n                    'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                    'text-light-on-primary dark:text-dark-on-primary':\n                      variant === 'primary' && !disabled,\n                    'text-light-on-secondary dark:text-dark-on-secondary':\n                      variant === 'secondary' && !disabled,\n                    'text-light-on-danger dark:text-dark-on-danger':\n                      variant === 'danger' && !disabled,\n                  }\"\n                  >{{ displayedSelectedOptions[0].value }}</span\n                >\n              }\n            } @else {\n              <span\n                class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n                [ngClass]=\"{\n                  'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                  'text-light-on-primary/80 dark:text-dark-on-primary/80':\n                    variant === 'primary' && !disabled,\n                  'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n                    variant === 'secondary' && !disabled,\n                  'text-light-on-danger/80 dark:text-dark-on-danger/80':\n                    variant === 'danger' && !disabled,\n                }\"\n              >\n                @if (useIcon) {\n                  <ng-content select=\"buttonIcon\"></ng-content>\n                } @else {\n                  {{ placeholder }}\n                }\n              </span>\n            }\n          </div>\n        }\n        <div\n          class=\"text-light-on-control dark:text-dark-on-control\"\n          [ngClass]=\"{\n            'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n            'text-light-on-primary/80 dark:text-dark-on-primary/80':\n              variant === 'primary' && !disabled,\n            'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n              variant === 'secondary' && !disabled,\n            'text-light-on-danger/80 dark:text-dark-on-danger/80':\n              variant === 'danger' && !disabled,\n          }\"\n        >\n          @if (isDropdownOpen()) {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -1339,7 +1342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                             multi: true,
                         },
                         provideTranslocoScope('haloduck'),
-                    ], template: "<div\n  class=\"flex gap-2 items-center w-full\"\n  [ngClass]=\"{ 'flex-col items-start': layout === 'vertical' }\"\n>\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{\n      labelWidth\n    }}\"\n    [ngClass]=\"{ 'w-full': layout === 'vertical' }\"\n  >\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n\n  @if (showAllItems) {\n    <!-- Inline options display -->\n    <div class=\"w-full flex-1\">\n      @if (loading) {\n        <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n          <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">\n            &nbsp;\n          </div>\n        </div>\n      } @else {\n        <div class=\"flex flex-col gap-2\">\n          @for (option of options; track option.id || option.value) {\n            <label\n              class=\"flex items-center gap-2 text-sm/6 text-light-on-control dark:text-dark-on-control cursor-pointer\"\n              [ngClass]=\"{\n                'opacity-60 cursor-not-allowed': disabled,\n              }\"\n            >\n              @if (multiselect) {\n                <!-- Checkbox for multiselect -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  class=\"appearance-none w-5 h-5 rounded bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-0 before:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgNEw0LjUgNy41TDExIDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+')] before:bg-center before:bg-no-repeat before:opacity-0 checked:before:opacity-100\"\n                />\n              } @else {\n                <!-- Radio button for single select -->\n                <input\n                  type=\"radio\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  name=\"radio-group\"\n                  class=\"appearance-none w-5 h-5 rounded-full bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-[4px] before:rounded-full before:bg-light-on-primary before:dark:bg-dark-on-primary before:opacity-0 checked:before:opacity-100\"\n                />\n              }\n              @if (\n                option.shouldManualInput &&\n                (isOptionSelected(option) || activeManualKey === (option.id || option.value))\n              ) {\n                <input\n                  type=\"text\"\n                  [(ngModel)]=\"manualInputValues[option.id || option.value]\"\n                  [attr.data-manual-key]=\"option.id || option.value\"\n                  (ngModelChange)=\"onManualInputChange(option, $event)\"\n                  (compositionstart)=\"onCompositionStart()\"\n                  (compositionend)=\"onCompositionEnd(option, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (blur)=\"onManualInputBlur(option)\"\n                  (keydown)=\"onManualInputKeydown(option, $event)\"\n                  [disabled]=\"!!disabled\"\n                  class=\"flex-1 text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control\"\n                />\n              } @else {\n                <span (click)=\"!disabled && onToggleOption(option)\">{{ option.value }}</span>\n              }\n            </label>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Original dropdown display -->\n    <div\n      #origin\n      class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n      [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary':\n          !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary':\n          variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary':\n          variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger':\n          variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60':\n          disabled,\n      }\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (click)=\"onClick($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <div\n        class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\"\n      >\n        @if (loading) {\n          <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n            <div\n              class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\"\n            >\n              &nbsp;\n            </div>\n          </div>\n        } @else {\n          <div class=\"flex-1\">\n            @if (!asButton && displayedSelectedOptions && displayedSelectedOptions.length > 0) {\n              @if (multiselect) {\n                <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n                  @for (option of displayedSelectedOptions; track option; let i = $index) {\n                    @if (showAll || i === 0) {\n                      <span\n                        class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                        [ngClass]=\"{ 'w-full h-full px-4': !multiselect, 'px-1': multiselect }\"\n                      >\n                        {{ option.value }}\n                        @if (showAll || i === 0) {\n                          <div\n                            (click)=\"onDeselectOption($event, option)\"\n                            class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\"\n                          >\n                            <svg\n                              class=\"w-3 h-3\"\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 20 20\"\n                              fill=\"currentColor\"\n                              aria-hidden=\"true\"\n                            >\n                              <path\n                                fill-rule=\"evenodd\"\n                                d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                                clip-rule=\"evenodd\"\n                              />\n                            </svg>\n                          </div>\n                        }\n                      </span>\n                      @if (!showAll && displayedSelectedOptions.length > 1) {\n                        <span\n                          class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\"\n                        >\n                          +{{ displayedSelectedOptions.length - 1 }}\n                        </span>\n                      }\n                    }\n                  }\n                </div>\n              } @else {\n                <span\n                  class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n                  [ngClass]=\"{\n                    'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                    'text-light-on-primary dark:text-dark-on-primary':\n                      variant === 'primary' && !disabled,\n                    'text-light-on-secondary dark:text-dark-on-secondary':\n                      variant === 'secondary' && !disabled,\n                    'text-light-on-danger dark:text-dark-on-danger':\n                      variant === 'danger' && !disabled,\n                  }\"\n                  >{{ displayedSelectedOptions[0].value }}</span\n                >\n              }\n            } @else {\n              <span\n                class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n                [ngClass]=\"{\n                  'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                  'text-light-on-primary/80 dark:text-dark-on-primary/80':\n                    variant === 'primary' && !disabled,\n                  'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n                    variant === 'secondary' && !disabled,\n                  'text-light-on-danger/80 dark:text-dark-on-danger/80':\n                    variant === 'danger' && !disabled,\n                }\"\n              >\n                @if (useIcon) {\n                  <ng-content select=\"buttonIcon\"></ng-content>\n                } @else {\n                  {{ placeholder }}\n                }\n              </span>\n            }\n          </div>\n        }\n        <div\n          class=\"text-light-on-control dark:text-dark-on-control\"\n          [ngClass]=\"{\n            'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n            'text-light-on-primary/80 dark:text-dark-on-primary/80':\n              variant === 'primary' && !disabled,\n            'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n              variant === 'secondary' && !disabled,\n            'text-light-on-danger/80 dark:text-dark-on-danger/80':\n              variant === 'danger' && !disabled,\n          }\"\n        >\n          @if (isDropdownOpen()) {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div\n  class=\"flex gap-2 items-center w-full\"\n  [ngClass]=\"{ 'flex-col items-start': layout === 'vertical' }\"\n>\n  <label\n    #label\n    class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{\n      labelWidth\n    }}\"\n    [ngClass]=\"{ 'w-full': layout === 'vertical' }\"\n  >\n    <!-- <ng-content select=\"[slot=label]\"></ng-content> -->\n    <ng-content></ng-content>\n  </label>\n\n  @if (showAllItems) {\n    <!-- Inline options display -->\n    <div class=\"w-full flex-1\">\n      @if (loading) {\n        <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n          <div class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\">\n            &nbsp;\n          </div>\n        </div>\n      } @else {\n        <div class=\"flex flex-col gap-2\">\n          @for (option of options; track option.id || option.value) {\n            <label\n              class=\"flex items-center gap-2 text-sm/6 text-light-on-control dark:text-dark-on-control cursor-pointer\"\n              [ngClass]=\"{\n                'opacity-60 cursor-not-allowed': disabled,\n              }\"\n              (click)=\"$event.preventDefault()\"\n            >\n              @if (multiselect) {\n                <!-- Checkbox for multiselect -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  class=\"appearance-none w-5 h-5 rounded bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-0 before:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgNEw0LjUgNy41TDExIDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+')] before:bg-center before:bg-no-repeat before:opacity-0 checked:before:opacity-100\"\n                />\n              } @else {\n                <!-- Radio button for single select -->\n                <input\n                  type=\"radio\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"disabled\"\n                  (click)=\"!disabled && onToggleOption(option)\"\n                  [name]=\"radioGroupName\"\n                  class=\"appearance-none w-5 h-5 rounded-full bg-light-control dark:bg-dark-control border-2 border-light-inactive dark:border-dark-inactive cursor-pointer disabled:cursor-not-allowed checked:bg-light-primary checked:dark:bg-dark-primary checked:border-light-primary checked:dark:border-dark-primary relative before:content-[''] before:absolute before:inset-[4px] before:rounded-full before:bg-light-on-primary before:dark:bg-dark-on-primary before:opacity-0 checked:before:opacity-100\"\n                />\n              }\n              @if (\n                option.shouldManualInput &&\n                (isOptionSelected(option) || activeManualKey === (option.id || option.value))\n              ) {\n                <input\n                  type=\"text\"\n                  [(ngModel)]=\"manualInputValues[option.id || option.value]\"\n                  [attr.data-manual-key]=\"option.id || option.value\"\n                  (ngModelChange)=\"onManualInputChange(option, $event)\"\n                  (compositionstart)=\"onCompositionStart()\"\n                  (compositionend)=\"onCompositionEnd(option, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (blur)=\"onManualInputBlur(option)\"\n                  (keydown)=\"onManualInputKeydown(option, $event)\"\n                  [disabled]=\"!!disabled\"\n                  class=\"flex-1 text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control\"\n                />\n              } @else {\n                <span (click)=\"!disabled && onToggleOption(option)\">{{ option.value }}</span>\n              }\n            </label>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- Original dropdown display -->\n    <div\n      #origin\n      class=\"w-full flex-1 relative overflow-visible rounded-md outline outline-light-inactive dark:outline-dark-inactive text-sm/6\"\n      [ngClass]=\"{\n        'bg-light-control dark:bg-dark-control focus:outline-2 focus:outline-offset-2 focus:outline-light-primary focus:dark:outline-dark-primary':\n          !disabled,\n        'bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary':\n          variant === 'primary' && !disabled,\n        'bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary':\n          variant === 'secondary' && !disabled,\n        'bg-light-danger dark:bg-dark-danger text-light-on-danger dark:text-dark-on-danger':\n          variant === 'danger' && !disabled,\n        'bg-light-control/60 dark:bg-dark-control/60 text-light-on-control/60 dark:text-dark-on-control/60':\n          disabled,\n      }\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (click)=\"onClick($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    >\n      <div\n        class=\"px-3 py-1.5 text-sm/6 cursor-pointer flex flex-nowrap items-center justify-between overflow-hidden\"\n      >\n        @if (loading) {\n          <div class=\"flex-1 flex items-center gap-2 w-full h-3\">\n            <div\n              class=\"animate-pulse bg-light-inactive dark:bg-dark-inactive rounded-md h-5 w-full\"\n            >\n              &nbsp;\n            </div>\n          </div>\n        } @else {\n          <div class=\"flex-1\">\n            @if (!asButton && displayedSelectedOptions && displayedSelectedOptions.length > 0) {\n              @if (multiselect) {\n                <div class=\"flex flex-wrap gap-x-2 gap-y-1 items-start\">\n                  @for (option of displayedSelectedOptions; track option; let i = $index) {\n                    @if (showAll || i === 0) {\n                      <span\n                        class=\"bg-light-secondary dark:bg-dark-secondary rounded-md flex items-center text-xs/6 text-light-on-secondary dark:text-dark-on-secondary\"\n                        [ngClass]=\"{ 'w-full h-full px-4': !multiselect, 'px-1': multiselect }\"\n                      >\n                        {{ option.value }}\n                        @if (showAll || i === 0) {\n                          <div\n                            (click)=\"onDeselectOption($event, option)\"\n                            class=\"ml-2 text-light-danger dark:text-dark-danger hover:cursor-pointer\"\n                          >\n                            <svg\n                              class=\"w-3 h-3\"\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              viewBox=\"0 0 20 20\"\n                              fill=\"currentColor\"\n                              aria-hidden=\"true\"\n                            >\n                              <path\n                                fill-rule=\"evenodd\"\n                                d=\"M10 8.586l-2.293-2.293a1 1 0 00-1.414 1.414L8.586 10l-2.293 2.293a1 1 0 001.414 1.414L10 11.414l2.293 2.293a1 1 0 001.414-1.414L11.414 10l2.293-2.293a1 1 0 00-1.414-1.414L10 8.586z\"\n                                clip-rule=\"evenodd\"\n                              />\n                            </svg>\n                          </div>\n                        }\n                      </span>\n                      @if (!showAll && displayedSelectedOptions.length > 1) {\n                        <span\n                          class=\"text-light-on-control/80 dark:text-dark-on-control/80 text-xs/6\"\n                        >\n                          +{{ displayedSelectedOptions.length - 1 }}\n                        </span>\n                      }\n                    }\n                  }\n                </div>\n              } @else {\n                <span\n                  class=\"text-light-on-control dark:text-dark-on-control overflow-hidden overflow-ellipsis\"\n                  [ngClass]=\"{\n                    'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                    'text-light-on-primary dark:text-dark-on-primary':\n                      variant === 'primary' && !disabled,\n                    'text-light-on-secondary dark:text-dark-on-secondary':\n                      variant === 'secondary' && !disabled,\n                    'text-light-on-danger dark:text-dark-on-danger':\n                      variant === 'danger' && !disabled,\n                  }\"\n                  >{{ displayedSelectedOptions[0].value }}</span\n                >\n              }\n            } @else {\n              <span\n                class=\"text-light-inactive dark:text-dark-inactive overflow-hidden overflow-ellipsis\"\n                [ngClass]=\"{\n                  'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n                  'text-light-on-primary/80 dark:text-dark-on-primary/80':\n                    variant === 'primary' && !disabled,\n                  'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n                    variant === 'secondary' && !disabled,\n                  'text-light-on-danger/80 dark:text-dark-on-danger/80':\n                    variant === 'danger' && !disabled,\n                }\"\n              >\n                @if (useIcon) {\n                  <ng-content select=\"buttonIcon\"></ng-content>\n                } @else {\n                  {{ placeholder }}\n                }\n              </span>\n            }\n          </div>\n        }\n        <div\n          class=\"text-light-on-control dark:text-dark-on-control\"\n          [ngClass]=\"{\n            'text-light-on-control/60 dark:text-dark-on-control/60': disabled,\n            'text-light-on-primary/80 dark:text-dark-on-primary/80':\n              variant === 'primary' && !disabled,\n            'text-light-on-secondary/80 dark:text-dark-on-secondary/80':\n              variant === 'secondary' && !disabled,\n            'text-light-on-danger/80 dark:text-dark-on-danger/80':\n              variant === 'danger' && !disabled,\n          }\"\n        >\n          @if (isDropdownOpen()) {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          } @else {\n            <svg\n              class=\"w-4 h-4 ml-2 inline-block\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { selectedChange: [{
                 type: Output
             }], disabled: [{