@m1z23r/ngx-ui 1.1.38 → 1.1.40

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -1415,6 +1415,8 @@ class SelectComponent {
     asyncSearch = input(null, ...(ngDevMode ? [{ debugName: "asyncSearch" }] : []));
     debounceTime = input(300, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
     minSearchLength = input(0, ...(ngDevMode ? [{ debugName: "minSearchLength" }] : []));
+    initialLoad = input(false, ...(ngDevMode ? [{ debugName: "initialLoad" }] : []));
+    initialOptions = input([], ...(ngDevMode ? [{ debugName: "initialOptions" }] : []));
     // Two-way binding
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     // Outputs
@@ -1485,6 +1487,19 @@ class SelectComponent {
             this.options(); // track changes
             this.setupOptionHandlers();
         });
+        // Initial options for async search
+        effect(() => {
+            const opts = this.initialOptions();
+            if (opts.length > 0) {
+                this.asyncOptions.set(opts);
+            }
+        });
+        // Initial load for async search
+        effect(() => {
+            if (this.initialLoad() && this.asyncSearch()) {
+                this.executeAsyncSearch('');
+            }
+        });
     }
     ngAfterContentInit() {
         // Initial setup handled by effect
@@ -2087,12 +2102,12 @@ class SelectComponent {
         this.positionCleanup = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, creatable: { classPropertyName: "creatable", publicName: "creatable", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, asyncSearch: { classPropertyName: "asyncSearch", publicName: "asyncSearch", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed", created: "created", deleted: "deleted" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: OptionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"ui-select-wrapper\"\n  [class.ui-select-wrapper--error]=\"error()\"\n  [class.ui-select-wrapper--disabled]=\"disabled()\"\n  [class.ui-select-wrapper--open]=\"isOpen()\"\n>\n  @if (label()) {\n    <label class=\"ui-select__label\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    #triggerRef\n    class=\"ui-select__trigger\"\n    [class]=\"triggerClasses()\"\n    [attr.role]=\"'combobox'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.tabindex]=\"searchable() ? -1 : (disabled() ? -1 : 0)\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    @if (searchable()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"ui-select__input\"\n        [placeholder]=\"inputPlaceholder()\"\n        [value]=\"isOpen() ? searchQuery() : (selectable() ? displayValue() : '')\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($any($event.target).value)\"\n        (keydown)=\"handleSearchInputKeydown($event)\"\n        (focus)=\"toggle()\"\n        autocomplete=\"off\"\n      />\n    } @else {\n      <span class=\"ui-select__value\">\n        @if (displayValue()) {\n          {{ displayValue() }}\n        } @else {\n          <span class=\"ui-select__placeholder\">{{ placeholder() }}</span>\n        }\n      </span>\n    }\n\n    <div class=\"ui-select__icons\">\n      @if (clearable() && hasValue() && !disabled()) {\n        <button\n          type=\"button\"\n          class=\"ui-select__clear\"\n          (click)=\"clear($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"ui-select__arrow\"\n        [class.ui-select__arrow--open]=\"isOpen()\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </div>\n  </div>\n\n  <div\n    #dropdownRef\n    class=\"ui-select__dropdown\"\n    [class.ui-select__dropdown--open]=\"isOpen()\"\n    [attr.role]=\"'listbox'\"\n    [attr.aria-multiselectable]=\"multiple()\"\n  >\n    <div class=\"ui-select__options\">\n      @if (isAsyncMode()) {\n        <!-- Async mode: render options from asyncSearch results -->\n        @if (asyncLoading()) {\n          <div class=\"ui-select__loading\">\n            <svg class=\"ui-select__spinner\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-opacity=\"0.25\"></circle>\n              <path d=\"M12 2a10 10 0 0 1 10 10\" stroke-linecap=\"round\"></path>\n            </svg>\n            <span>Searching...</span>\n          </div>\n        } @else if (asyncError()) {\n          <div class=\"ui-select__error-message\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n            </svg>\n            <span>{{ asyncError() }}</span>\n          </div>\n        } @else {\n          @for (option of visibleAsyncOptions(); track option.value; let i = $index) {\n            <div\n              class=\"ui-async-option\"\n              [class.ui-async-option--selected]=\"isAsyncOptionSelected(option)\"\n              [class.ui-async-option--disabled]=\"option.disabled\"\n              [class.ui-async-option--focused]=\"focusedIndex() === i\"\n              [attr.role]=\"'option'\"\n              [attr.aria-selected]=\"isAsyncOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled\"\n              (click)=\"selectAsyncOption(option, $event)\"\n            >\n              @if (multiple() && isAsyncOptionSelected(option)) {\n                <svg class=\"ui-async-option__check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <polyline points=\"20 6 9 17 4 12\"></polyline>\n                </svg>\n              }\n              <span class=\"ui-async-option__content\">\n                @if (optionTemplate(); as tpl) {\n                  <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: option.value, option: option.value, selected: isAsyncOptionSelected(option), disabled: !!option.disabled }\"></ng-container>\n                } @else {\n                  {{ option.label }}\n                }\n              </span>\n            </div>\n          }\n          @if (visibleAsyncOptions().length === 0 && searchQuery().trim().length >= minSearchLength()) {\n            <div class=\"ui-select__empty\">No results found</div>\n          }\n          @if (searchQuery().trim().length < minSearchLength() && minSearchLength() > 0) {\n            <div class=\"ui-select__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n          }\n        }\n      } @else {\n        <!-- Static mode: render content children -->\n        <ng-content />\n        @if (visibleOptions().length === 0 && !(creatable() && searchQuery().trim())) {\n          <div class=\"ui-select__empty\">No options found</div>\n        }\n      }\n    </div>\n    @if (creatable() && searchQuery().trim() && !exactMatchExists()) {\n      <div\n        class=\"ui-select__create\"\n        (click)=\"handleCreate()\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n        </svg>\n        Create \"{{ searchQuery().trim() }}\"\n      </div>\n    }\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-select__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-select__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.ui-select-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-select__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-spacing-sm);width:100%;background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:pointer;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-select__trigger:hover:not([aria-disabled=true]){border-color:var(--ui-border-hover)}.ui-select__trigger:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-select__trigger[aria-disabled=true]{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-select__trigger--sm{padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-size:var(--ui-font-sm)}.ui-select__trigger--md{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-md)}.ui-select__trigger--lg{padding:var(--ui-spacing-md) var(--ui-spacing-lg);font-size:var(--ui-font-lg)}.ui-select__trigger--outlined{background-color:transparent}.ui-select__trigger--filled{background-color:var(--ui-bg-secondary);border-color:transparent}.ui-select__trigger--filled:hover:not([aria-disabled=true]){background-color:var(--ui-bg-tertiary)}.ui-select__trigger--filled:focus{border-color:var(--ui-border-focus)}.ui-select__value{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__placeholder{color:var(--ui-text-muted)}.ui-select__icons{display:flex;align-items:center;gap:var(--ui-spacing-xs);flex-shrink:0}.ui-select__clear{display:flex;align-items:center;justify-content:center;padding:2px;background:none;border:none;cursor:pointer;color:var(--ui-text-muted);border-radius:var(--ui-radius-sm);transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-select__clear:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-select__arrow{color:var(--ui-text-muted);transition:transform var(--ui-transition-fast)}.ui-select__arrow--open{transform:rotate(180deg)}.ui-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--ui-spacing-xs);background-color:var(--ui-dropdown-bg, var(--ui-bg));border:1px solid var(--ui-dropdown-border, var(--ui-border));border-radius:var(--ui-dropdown-radius, var(--ui-radius-md));box-shadow:var(--ui-dropdown-shadow, var(--ui-shadow-lg));overflow:hidden;display:none;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast);box-sizing:border-box}.ui-select__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-select__input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;color:inherit;padding:0;text-align:left;text-overflow:ellipsis;cursor:pointer}.ui-select__input::placeholder{color:var(--ui-text-muted)}.ui-select__input:focus{cursor:text}.ui-select__input:disabled{cursor:not-allowed}.ui-select__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-sm);color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-select__create:hover{background-color:var(--ui-bg-hover)}.ui-select__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-select__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select-wrapper--error .ui-select__trigger{border-color:var(--ui-danger)}.ui-select-wrapper--error .ui-select__trigger:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-select__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-select__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-async-option{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-async-option:hover:not(.ui-async-option--disabled){background-color:var(--ui-bg-hover)}.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent)}.ui-async-option--selected:hover:not(.ui-async-option--disabled){background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--focused{background-color:var(--ui-bg-hover);outline:none}.ui-async-option--focused.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--disabled{opacity:.5;cursor:not-allowed}.ui-async-option__check{flex-shrink:0;color:var(--ui-primary)}.ui-async-option__content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__loading{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-lg) var(--ui-spacing-md);color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select__spinner{animation:ui-select-spin 1s linear infinite}@keyframes ui-select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-select__error-message{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);color:var(--ui-danger);font-size:var(--ui-font-sm)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, creatable: { classPropertyName: "creatable", publicName: "creatable", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, asyncSearch: { classPropertyName: "asyncSearch", publicName: "asyncSearch", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, initialLoad: { classPropertyName: "initialLoad", publicName: "initialLoad", isSignal: true, isRequired: false, transformFunction: null }, initialOptions: { classPropertyName: "initialOptions", publicName: "initialOptions", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed", created: "created", deleted: "deleted" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: OptionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"ui-select-wrapper\"\n  [class.ui-select-wrapper--error]=\"error()\"\n  [class.ui-select-wrapper--disabled]=\"disabled()\"\n  [class.ui-select-wrapper--open]=\"isOpen()\"\n>\n  @if (label()) {\n    <label class=\"ui-select__label\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    #triggerRef\n    class=\"ui-select__trigger\"\n    [class]=\"triggerClasses()\"\n    [attr.role]=\"'combobox'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.tabindex]=\"searchable() ? -1 : (disabled() ? -1 : 0)\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    @if (searchable()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"ui-select__input\"\n        [placeholder]=\"inputPlaceholder()\"\n        [value]=\"isOpen() ? searchQuery() : (selectable() ? displayValue() : '')\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($any($event.target).value)\"\n        (keydown)=\"handleSearchInputKeydown($event)\"\n        (focus)=\"toggle()\"\n        autocomplete=\"off\"\n      />\n    } @else {\n      <span class=\"ui-select__value\">\n        @if (displayValue()) {\n          {{ displayValue() }}\n        } @else {\n          <span class=\"ui-select__placeholder\">{{ placeholder() }}</span>\n        }\n      </span>\n    }\n\n    <div class=\"ui-select__icons\">\n      @if (clearable() && hasValue() && !disabled()) {\n        <button\n          type=\"button\"\n          class=\"ui-select__clear\"\n          (click)=\"clear($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"ui-select__arrow\"\n        [class.ui-select__arrow--open]=\"isOpen()\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </div>\n  </div>\n\n  <div\n    #dropdownRef\n    class=\"ui-select__dropdown\"\n    [class.ui-select__dropdown--open]=\"isOpen()\"\n    [attr.role]=\"'listbox'\"\n    [attr.aria-multiselectable]=\"multiple()\"\n  >\n    <div class=\"ui-select__options\">\n      @if (isAsyncMode()) {\n        <!-- Async mode: render options from asyncSearch results -->\n        @if (asyncLoading()) {\n          <div class=\"ui-select__loading\">\n            <svg class=\"ui-select__spinner\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-opacity=\"0.25\"></circle>\n              <path d=\"M12 2a10 10 0 0 1 10 10\" stroke-linecap=\"round\"></path>\n            </svg>\n            <span>Searching...</span>\n          </div>\n        } @else if (asyncError()) {\n          <div class=\"ui-select__error-message\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n            </svg>\n            <span>{{ asyncError() }}</span>\n          </div>\n        } @else {\n          @for (option of visibleAsyncOptions(); track option.value; let i = $index) {\n            <div\n              class=\"ui-async-option\"\n              [class.ui-async-option--selected]=\"isAsyncOptionSelected(option)\"\n              [class.ui-async-option--disabled]=\"option.disabled\"\n              [class.ui-async-option--focused]=\"focusedIndex() === i\"\n              [attr.role]=\"'option'\"\n              [attr.aria-selected]=\"isAsyncOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled\"\n              (click)=\"selectAsyncOption(option, $event)\"\n            >\n              @if (multiple() && isAsyncOptionSelected(option)) {\n                <svg class=\"ui-async-option__check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <polyline points=\"20 6 9 17 4 12\"></polyline>\n                </svg>\n              }\n              <span class=\"ui-async-option__content\">\n                @if (optionTemplate(); as tpl) {\n                  <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: option.value, option: option.value, selected: isAsyncOptionSelected(option), disabled: !!option.disabled }\"></ng-container>\n                } @else {\n                  {{ option.label }}\n                }\n              </span>\n            </div>\n          }\n          @if (visibleAsyncOptions().length === 0 && searchQuery().trim().length >= minSearchLength()) {\n            <div class=\"ui-select__empty\">No results found</div>\n          }\n          @if (searchQuery().trim().length < minSearchLength() && minSearchLength() > 0) {\n            <div class=\"ui-select__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n          }\n        }\n      } @else {\n        <!-- Static mode: render content children -->\n        <ng-content />\n        @if (visibleOptions().length === 0 && !(creatable() && searchQuery().trim())) {\n          <div class=\"ui-select__empty\">No options found</div>\n        }\n      }\n    </div>\n    @if (creatable() && searchQuery().trim() && !exactMatchExists()) {\n      <div\n        class=\"ui-select__create\"\n        (click)=\"handleCreate()\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n        </svg>\n        Create \"{{ searchQuery().trim() }}\"\n      </div>\n    }\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-select__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-select__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.ui-select-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-select__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-spacing-sm);width:100%;background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:pointer;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-select__trigger:hover:not([aria-disabled=true]){border-color:var(--ui-border-hover)}.ui-select__trigger:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-select__trigger[aria-disabled=true]{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-select__trigger--sm{padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-size:var(--ui-font-sm)}.ui-select__trigger--md{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-md)}.ui-select__trigger--lg{padding:var(--ui-spacing-md) var(--ui-spacing-lg);font-size:var(--ui-font-lg)}.ui-select__trigger--outlined{background-color:transparent}.ui-select__trigger--filled{background-color:var(--ui-bg-secondary);border-color:transparent}.ui-select__trigger--filled:hover:not([aria-disabled=true]){background-color:var(--ui-bg-tertiary)}.ui-select__trigger--filled:focus{border-color:var(--ui-border-focus)}.ui-select__value{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__placeholder{color:var(--ui-text-muted)}.ui-select__icons{display:flex;align-items:center;gap:var(--ui-spacing-xs);flex-shrink:0}.ui-select__clear{display:flex;align-items:center;justify-content:center;padding:2px;background:none;border:none;cursor:pointer;color:var(--ui-text-muted);border-radius:var(--ui-radius-sm);transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-select__clear:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-select__arrow{color:var(--ui-text-muted);transition:transform var(--ui-transition-fast)}.ui-select__arrow--open{transform:rotate(180deg)}.ui-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--ui-spacing-xs);background-color:var(--ui-dropdown-bg, var(--ui-bg));border:1px solid var(--ui-dropdown-border, var(--ui-border));border-radius:var(--ui-dropdown-radius, var(--ui-radius-md));box-shadow:var(--ui-dropdown-shadow, var(--ui-shadow-lg));overflow:hidden;display:none;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast);box-sizing:border-box}.ui-select__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-select__input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;color:inherit;padding:0;text-align:left;text-overflow:ellipsis;cursor:pointer}.ui-select__input::placeholder{color:var(--ui-text-muted)}.ui-select__input:focus{cursor:text}.ui-select__input:disabled{cursor:not-allowed}.ui-select__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-sm);color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-select__create:hover{background-color:var(--ui-bg-hover)}.ui-select__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-select__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select-wrapper--error .ui-select__trigger{border-color:var(--ui-danger)}.ui-select-wrapper--error .ui-select__trigger:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-select__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-select__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-async-option{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-async-option:hover:not(.ui-async-option--disabled){background-color:var(--ui-bg-hover)}.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent)}.ui-async-option--selected:hover:not(.ui-async-option--disabled){background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--focused{background-color:var(--ui-bg-hover);outline:none}.ui-async-option--focused.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--disabled{opacity:.5;cursor:not-allowed}.ui-async-option__check{flex-shrink:0;color:var(--ui-primary)}.ui-async-option__content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__loading{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-lg) var(--ui-spacing-md);color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select__spinner{animation:ui-select-spin 1s linear infinite}@keyframes ui-select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-select__error-message{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);color:var(--ui-danger);font-size:var(--ui-font-sm)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-select', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-select-wrapper\"\n  [class.ui-select-wrapper--error]=\"error()\"\n  [class.ui-select-wrapper--disabled]=\"disabled()\"\n  [class.ui-select-wrapper--open]=\"isOpen()\"\n>\n  @if (label()) {\n    <label class=\"ui-select__label\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    #triggerRef\n    class=\"ui-select__trigger\"\n    [class]=\"triggerClasses()\"\n    [attr.role]=\"'combobox'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.tabindex]=\"searchable() ? -1 : (disabled() ? -1 : 0)\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    @if (searchable()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"ui-select__input\"\n        [placeholder]=\"inputPlaceholder()\"\n        [value]=\"isOpen() ? searchQuery() : (selectable() ? displayValue() : '')\"\n        [disabled]=\"disabled()\"\n        (input)=\"onSearchInput($any($event.target).value)\"\n        (keydown)=\"handleSearchInputKeydown($event)\"\n        (focus)=\"toggle()\"\n        autocomplete=\"off\"\n      />\n    } @else {\n      <span class=\"ui-select__value\">\n        @if (displayValue()) {\n          {{ displayValue() }}\n        } @else {\n          <span class=\"ui-select__placeholder\">{{ placeholder() }}</span>\n        }\n      </span>\n    }\n\n    <div class=\"ui-select__icons\">\n      @if (clearable() && hasValue() && !disabled()) {\n        <button\n          type=\"button\"\n          class=\"ui-select__clear\"\n          (click)=\"clear($event)\"\n          aria-label=\"Clear selection\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"ui-select__arrow\"\n        [class.ui-select__arrow--open]=\"isOpen()\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </div>\n  </div>\n\n  <div\n    #dropdownRef\n    class=\"ui-select__dropdown\"\n    [class.ui-select__dropdown--open]=\"isOpen()\"\n    [attr.role]=\"'listbox'\"\n    [attr.aria-multiselectable]=\"multiple()\"\n  >\n    <div class=\"ui-select__options\">\n      @if (isAsyncMode()) {\n        <!-- Async mode: render options from asyncSearch results -->\n        @if (asyncLoading()) {\n          <div class=\"ui-select__loading\">\n            <svg class=\"ui-select__spinner\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-opacity=\"0.25\"></circle>\n              <path d=\"M12 2a10 10 0 0 1 10 10\" stroke-linecap=\"round\"></path>\n            </svg>\n            <span>Searching...</span>\n          </div>\n        } @else if (asyncError()) {\n          <div class=\"ui-select__error-message\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n            </svg>\n            <span>{{ asyncError() }}</span>\n          </div>\n        } @else {\n          @for (option of visibleAsyncOptions(); track option.value; let i = $index) {\n            <div\n              class=\"ui-async-option\"\n              [class.ui-async-option--selected]=\"isAsyncOptionSelected(option)\"\n              [class.ui-async-option--disabled]=\"option.disabled\"\n              [class.ui-async-option--focused]=\"focusedIndex() === i\"\n              [attr.role]=\"'option'\"\n              [attr.aria-selected]=\"isAsyncOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled\"\n              (click)=\"selectAsyncOption(option, $event)\"\n            >\n              @if (multiple() && isAsyncOptionSelected(option)) {\n                <svg class=\"ui-async-option__check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <polyline points=\"20 6 9 17 4 12\"></polyline>\n                </svg>\n              }\n              <span class=\"ui-async-option__content\">\n                @if (optionTemplate(); as tpl) {\n                  <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: option.value, option: option.value, selected: isAsyncOptionSelected(option), disabled: !!option.disabled }\"></ng-container>\n                } @else {\n                  {{ option.label }}\n                }\n              </span>\n            </div>\n          }\n          @if (visibleAsyncOptions().length === 0 && searchQuery().trim().length >= minSearchLength()) {\n            <div class=\"ui-select__empty\">No results found</div>\n          }\n          @if (searchQuery().trim().length < minSearchLength() && minSearchLength() > 0) {\n            <div class=\"ui-select__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n          }\n        }\n      } @else {\n        <!-- Static mode: render content children -->\n        <ng-content />\n        @if (visibleOptions().length === 0 && !(creatable() && searchQuery().trim())) {\n          <div class=\"ui-select__empty\">No options found</div>\n        }\n      }\n    </div>\n    @if (creatable() && searchQuery().trim() && !exactMatchExists()) {\n      <div\n        class=\"ui-select__create\"\n        (click)=\"handleCreate()\"\n      >\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n        </svg>\n        Create \"{{ searchQuery().trim() }}\"\n      </div>\n    }\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-select__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-select__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.ui-select-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-select__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-spacing-sm);width:100%;background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:pointer;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-select__trigger:hover:not([aria-disabled=true]){border-color:var(--ui-border-hover)}.ui-select__trigger:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-select__trigger[aria-disabled=true]{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-select__trigger--sm{padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-size:var(--ui-font-sm)}.ui-select__trigger--md{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-md)}.ui-select__trigger--lg{padding:var(--ui-spacing-md) var(--ui-spacing-lg);font-size:var(--ui-font-lg)}.ui-select__trigger--outlined{background-color:transparent}.ui-select__trigger--filled{background-color:var(--ui-bg-secondary);border-color:transparent}.ui-select__trigger--filled:hover:not([aria-disabled=true]){background-color:var(--ui-bg-tertiary)}.ui-select__trigger--filled:focus{border-color:var(--ui-border-focus)}.ui-select__value{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__placeholder{color:var(--ui-text-muted)}.ui-select__icons{display:flex;align-items:center;gap:var(--ui-spacing-xs);flex-shrink:0}.ui-select__clear{display:flex;align-items:center;justify-content:center;padding:2px;background:none;border:none;cursor:pointer;color:var(--ui-text-muted);border-radius:var(--ui-radius-sm);transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-select__clear:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-select__arrow{color:var(--ui-text-muted);transition:transform var(--ui-transition-fast)}.ui-select__arrow--open{transform:rotate(180deg)}.ui-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--ui-spacing-xs);background-color:var(--ui-dropdown-bg, var(--ui-bg));border:1px solid var(--ui-dropdown-border, var(--ui-border));border-radius:var(--ui-dropdown-radius, var(--ui-radius-md));box-shadow:var(--ui-dropdown-shadow, var(--ui-shadow-lg));overflow:hidden;display:none;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast);box-sizing:border-box}.ui-select__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-select__input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;color:inherit;padding:0;text-align:left;text-overflow:ellipsis;cursor:pointer}.ui-select__input::placeholder{color:var(--ui-text-muted)}.ui-select__input:focus{cursor:text}.ui-select__input:disabled{cursor:not-allowed}.ui-select__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-sm);color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-select__create:hover{background-color:var(--ui-bg-hover)}.ui-select__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-select__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select-wrapper--error .ui-select__trigger{border-color:var(--ui-danger)}.ui-select-wrapper--error .ui-select__trigger:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-select__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-select__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-async-option{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-async-option:hover:not(.ui-async-option--disabled){background-color:var(--ui-bg-hover)}.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent)}.ui-async-option--selected:hover:not(.ui-async-option--disabled){background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--focused{background-color:var(--ui-bg-hover);outline:none}.ui-async-option--focused.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--disabled{opacity:.5;cursor:not-allowed}.ui-async-option__check{flex-shrink:0;color:var(--ui-primary)}.ui-async-option__content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__loading{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-lg) var(--ui-spacing-md);color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select__spinner{animation:ui-select-spin 1s linear infinite}@keyframes ui-select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-select__error-message{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);color:var(--ui-danger);font-size:var(--ui-font-sm)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], creatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "creatable", required: false }] }], deletable: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], asyncSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncSearch", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], created: [{ type: i0.Output, args: ["created"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OptionTemplateDirective), { isSignal: true }] }], triggerRef: [{
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], creatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "creatable", required: false }] }], deletable: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], asyncSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncSearch", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], initialLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialLoad", required: false }] }], initialOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialOptions", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], created: [{ type: i0.Output, args: ["created"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OptionTemplateDirective), { isSignal: true }] }], triggerRef: [{
                 type: ViewChild,
                 args: ['triggerRef', { static: true }]
             }], dropdownRef: [{