@haloduck/ui 2.0.40 → 2.0.42

package/fesm2022/haloduck-ui.mjs

@@ -351,6 +351,7 @@ class SelectDropdownComponent {
     _selectedOptionIds = [];
     manualInputValues = {};
     activeManualKey = null;
+    isComposing = false;
     selectedChange = new EventEmitter();
     closeDropdown = new EventEmitter();
     useFilter = false;
@@ -467,24 +468,55 @@ class SelectDropdownComponent {
             }
         }
     }
+    onEditManualInput(option) {
+        const key = this.getManualKey(option);
+        this.activeManualKey = key;
+        // focus input on next tick
+        setTimeout(() => {
+            const selector = `input[data-manual-key="${key}"]`;
+            const el = document.querySelector(selector);
+            el?.focus();
+            el?.select();
+        });
+    }
+    getManualInputDisplayValue(option) {
+        const key = this.getManualKey(option);
+        const prefix = option.manualPrefix || '';
+        // manualInputValues에 저장된 값 확인
+        const storedValue = this.manualInputValues[key];
+        if (storedValue && storedValue.trim() !== '') {
+            return storedValue;
+        }
+        // selectedOptionIds에서 prefix가 붙은 값 찾기
+        if (prefix) {
+            const found = this._selectedOptionIds.find((id) => typeof id === 'string' && id.startsWith(prefix) && id.length > prefix.length);
+            if (found) {
+                return found.substring(prefix.length);
+            }
+        }
+        return '';
+    }
     isOptionSelected(option) {
         const id = option.id || option.value;
         if (option.shouldManualInput) {
             const key = this.getManualKey(option);
             const prefix = option.manualPrefix;
+            const sentinel = option.id || option.value;
             // Check if this manual input option is currently active
             const isActive = this.activeManualKey === key;
+            // Check if sentinel is selected (means option is selected but no manual value)
+            const hasSentinel = this._selectedOptionIds.includes(sentinel);
             if (prefix) {
-                // selected if there exists a value with more than prefix, OR if it's currently active
+                // selected if there exists a value with prefix OR sentinel is selected OR if it's currently active
                 const hasValueWithPrefix = this._selectedOptionIds.some((selectedId) => typeof selectedId === 'string' &&
                     selectedId.startsWith(prefix) &&
                     selectedId.length > prefix.length);
-                return hasValueWithPrefix || isActive;
+                return hasValueWithPrefix || hasSentinel || isActive;
             }
-            // no prefix: consider selected if any selected id equals current typed value (non-empty) OR if it's active
+            // no prefix: consider selected if any selected id equals current typed value (non-empty) OR sentinel OR if it's active
             const typed = (this.manualInputValues[key] || '').trim();
             const hasTypedValue = typed !== '' && this._selectedOptionIds.includes(typed);
-            return hasTypedValue || isActive;
+            return hasTypedValue || hasSentinel || isActive;
         }
         return this._selectedOptionIds.includes(id);
     }
@@ -502,7 +534,7 @@ class SelectDropdownComponent {
         return false;
     }
     getManualKey(option) {
-        return option.manualPrefix || option.id || option.value;
+        return option.id || option.value;
     }
     seedManualInputs() {
         const manualOptions = this._options.filter((o) => o.shouldManualInput);
@@ -515,16 +547,20 @@ class SelectDropdownComponent {
         }
     }
     onManualInputChange(option, value) {
+        // IME 조합 중이면 업데이트하지 않음
+        if (this.isComposing) {
+            return;
+        }
         const key = this.getManualKey(option);
         this.manualInputValues[key] = value;
-        // Dynamically reflect selection as user types
+        // 타이핑 중에는 실시간으로 선택 상태 업데이트
         const prefix = option.manualPrefix || '';
         const sentinel = option.id || option.value;
         const trimmed = (value || '').trim();
         if (this.multiselect) {
             if (option.isExclusive) {
                 if (trimmed === '') {
-                    // Keep the sentinel selected to maintain the manual input option as "active"
+                    // 빈 값일 때는 sentinel만 유지 (선택은 유지하되 값은 없음)
                     this.setSelected([sentinel]);
                 }
                 else {
@@ -533,19 +569,21 @@ class SelectDropdownComponent {
             }
             else {
                 let next = this._selectedOptionIds.filter((id) => !this.isIdExclusive(id));
-                // remove same prefix or sentinel
-                next = next.filter((id) => (prefix ? !id.startsWith(prefix) : id !== sentinel));
+                // sentinel과 prefix로 시작하는 값 모두 제거
+                next = next.filter((id) => {
+                    if (id === sentinel)
+                        return false;
+                    if (prefix && id.startsWith(prefix))
+                        return false;
+                    return true;
+                });
                 if (trimmed !== '') {
                     const toAdd = `${prefix}${trimmed}`;
-                    if (!next.includes(toAdd)) {
-                        next = [toAdd, ...next];
-                    }
+                    next = [toAdd, ...next];
                 }
                 else {
-                    // Keep the sentinel to maintain selection state when text is empty
-                    if (!next.includes(sentinel)) {
-                        next = [sentinel, ...next];
-                    }
+                    // 빈 값일 때는 sentinel만 추가
+                    next = [sentinel, ...next];
                 }
                 this.setSelected(next);
             }
@@ -553,7 +591,7 @@ class SelectDropdownComponent {
         else {
             // single select
             if (trimmed === '') {
-                // Keep the sentinel selected to maintain the manual input option as "active"
+                // 빈 값일 때는 sentinel만 유지 (선택은 유지하되 값은 없음)
                 this.setSelected([sentinel]);
             }
             else {
@@ -561,11 +599,56 @@ class SelectDropdownComponent {
             }
         }
     }
+    onCompositionStart() {
+        this.isComposing = true;
+    }
+    onCompositionEnd(option, event) {
+        this.isComposing = false;
+        const target = event.target;
+        this.onManualInputChange(option, target.value);
+    }
+    onManualInputKeydown(option, event) {
+        if (event.key === 'Enter') {
+            // IME 조합 중이면 아무것도 하지 않음
+            if (this.isComposing) {
+                return;
+            }
+            event.preventDefault();
+            // 약간의 지연을 두어 compositionend 이벤트가 먼저 처리되도록 함
+            setTimeout(() => {
+                this.onManualInputConfirm(option);
+            }, 10);
+        }
+    }
     onManualInputConfirm(option) {
         const key = this.getManualKey(option);
         const raw = (this.manualInputValues[key] || '').trim();
-        // Use same logic as onManualInputChange
-        this.onManualInputChange(option, raw);
+        // 입력값이 비어있으면 선택 해제
+        if (raw === '') {
+            this.activeManualKey = null;
+            const prefix = option.manualPrefix || '';
+            const sentinel = option.id || option.value;
+            if (this.multiselect) {
+                let next = [...this._selectedOptionIds];
+                next = next.filter((id) => {
+                    if (id === sentinel)
+                        return false;
+                    if (prefix && id.startsWith(prefix))
+                        return false;
+                    return true;
+                });
+                this.setSelected(next);
+            }
+            else {
+                this.setSelected([]);
+            }
+        }
+        else {
+            // 입력값이 있으면 정상 처리
+            this.onManualInputChange(option, raw);
+            // 입력창 닫기
+            this.activeManualKey = null;
+        }
         // Close dropdown in single select mode after confirming input
         if (!this.multiselect) {
             this.closeDropdown.emit();
@@ -574,15 +657,13 @@ class SelectDropdownComponent {
     onManualInputBlur(option) {
         const key = this.getManualKey(option);
         const raw = (this.manualInputValues[key] || '').trim();
+        // 입력값이 비어있으면 선택 해제
         if (raw === '') {
-            // hide input on blur when empty
             this.activeManualKey = null;
-            // Also deselect the manual input option completely
             const prefix = option.manualPrefix || '';
             const sentinel = option.id || option.value;
             if (this.multiselect) {
                 let next = [...this._selectedOptionIds];
-                // Remove sentinel and any values with the prefix
                 next = next.filter((id) => {
                     if (id === sentinel)
                         return false;
@@ -593,10 +674,10 @@ class SelectDropdownComponent {
                 this.setSelected(next);
             }
             else {
-                // Single select: deselect completely
                 this.setSelected([]);
             }
         }
+        // 입력값이 있으면 아무것도 하지 않음 (이미 onManualInputChange에서 처리됨)
     }
     emitSelectedChange() {
         const payload = [...this._selectedOptionIds];
@@ -604,17 +685,15 @@ class SelectDropdownComponent {
     }
     setSelected(next) {
         const sanitized = next.filter((id) => id != null);
-        setTimeout(() => {
-            this._selectedOptionIds = sanitized;
-            this.emitSelectedChange();
-        });
+        this._selectedOptionIds = sanitized;
+        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)=\"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\"\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=\"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 (\n          option.shouldManualInput &&\n          (isOptionSelected(option) ||\n            activeManualKey ===\n              (option.manualPrefix ? option.manualPrefix : option.id || option.value))\n        ) {\n          <input\n            type=\"text\"\n            [(ngModel)]=\"\n              manualInputValues[\n                option.manualPrefix ? option.manualPrefix : option.id || option.value\n              ]\n            \"\n            [attr.data-manual-key]=\"\n              option.manualPrefix ? option.manualPrefix : option.id || option.value\n            \"\n            (ngModelChange)=\"onManualInputChange(option, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            (blur)=\"onManualInputBlur(option)\"\n            (keydown.enter)=\"onManualInputConfirm(option)\"\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 {\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)=\"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\"\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=\"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 (\n          option.shouldManualInput &&\n          (isOptionSelected(option) ||\n            activeManualKey ===\n              (option.manualPrefix ? option.manualPrefix : option.id || option.value))\n        ) {\n          <input\n            type=\"text\"\n            [(ngModel)]=\"\n              manualInputValues[\n                option.manualPrefix ? option.manualPrefix : option.id || option.value\n              ]\n            \"\n            [attr.data-manual-key]=\"\n              option.manualPrefix ? option.manualPrefix : option.id || option.value\n            \"\n            (ngModelChange)=\"onManualInputChange(option, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            (blur)=\"onManualInputBlur(option)\"\n            (keydown.enter)=\"onManualInputConfirm(option)\"\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 {\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: [{
@@ -1198,6 +1277,19 @@ class SelectComponent {
         const target = event.target;
         this.onManualInputChange(option, target.value);
     }
+    onManualInputKeydown(option, event) {
+        if (event.key === 'Enter') {
+            // IME 조합 중이면 아무것도 하지 않음 (compositionend가 처리)
+            if (this.isComposing) {
+                return;
+            }
+            event.preventDefault();
+            // 약간의 지연을 두어 compositionend 이벤트가 먼저 처리되도록 함
+            setTimeout(() => {
+                this.onManualInputBlur(option);
+            }, 10);
+        }
+    }
     onManualInputBlur(option) {
         const key = this.getManualKey(option);
         const raw = (this.manualInputValues[key] || '').trim();
@@ -1236,7 +1328,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.enter)=\"$event.preventDefault(); onManualInputBlur(option)\"\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=\"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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -1247,7 +1339,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.enter)=\"$event.preventDefault(); onManualInputBlur(option)\"\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=\"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" }]
         }], ctorParameters: () => [], propDecorators: { selectedChange: [{
                 type: Output
             }], disabled: [{