@haloduck/ui 2.0.39 → 2.0.40

package/fesm2022/haloduck-ui.mjs

@@ -678,6 +678,7 @@ class SelectComponent {
     // Manual input support for inline mode
     manualInputValues = {};
     activeManualKey = null;
+    isComposing = false; // IME 조합 중 여부
     onClick(event) {
         if (this.disabled || this.showAllItems) {
             return;
@@ -1137,6 +1138,10 @@ class SelectComponent {
         }
     }
     onManualInputChange(option, value) {
+        // IME 조합 중이면 업데이트하지 않음
+        if (this.isComposing) {
+            return;
+        }
         const key = this.getManualKey(option);
         this.manualInputValues[key] = value;
         const prefix = option.manualPrefix || '';
@@ -1184,6 +1189,15 @@ class SelectComponent {
         }
         this.cdr.markForCheck();
     }
+    onCompositionStart() {
+        this.isComposing = true;
+    }
+    onCompositionEnd(option, event) {
+        this.isComposing = false;
+        // 조합이 끝나면 최종 값으로 업데이트
+        const target = event.target;
+        this.onManualInputChange(option, target.value);
+    }
     onManualInputBlur(option) {
         const key = this.getManualKey(option);
         const raw = (this.manualInputValues[key] || '').trim();
@@ -1222,7 +1236,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=\"w-5 h-5 rounded border-2 border-light-inactive dark:border-dark-inactive accent-light-primary dark:accent-dark-primary cursor-pointer disabled:cursor-not-allowed\"\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=\"w-5 h-5 border-2 border-light-inactive dark:border-dark-inactive accent-light-primary dark:accent-dark-primary cursor-pointer disabled:cursor-not-allowed\"\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                  (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            >\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -1233,7 +1247,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=\"w-5 h-5 rounded border-2 border-light-inactive dark:border-dark-inactive accent-light-primary dark:accent-dark-primary cursor-pointer disabled:cursor-not-allowed\"\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=\"w-5 h-5 border-2 border-light-inactive dark:border-dark-inactive accent-light-primary dark:accent-dark-primary cursor-pointer disabled:cursor-not-allowed\"\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                  (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            >\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" }]
         }], ctorParameters: () => [], propDecorators: { selectedChange: [{
                 type: Output
             }], disabled: [{