@m1z23r/ngx-ui 1.1.33 → 1.1.35

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, signal, Injectable, computed, InjectionToken, ApplicationRef, EnvironmentInjector, createComponent, Injector, input, output, ChangeDetectionStrategy, Component, ElementRef, HostListener, effect, Directive, model, Pipe, contentChildren, ViewChild, TemplateRef, contentChild, viewChild, afterRenderEffect, DestroyRef } from '@angular/core';
+import { inject, PLATFORM_ID, signal, Injectable, computed, InjectionToken, ApplicationRef, EnvironmentInjector, createComponent, Injector, input, output, ChangeDetectionStrategy, Component, ElementRef, HostListener, effect, Directive, model, Pipe, contentChildren, TemplateRef, contentChild, ViewChild, viewChild, afterRenderEffect, DestroyRef } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet, NgComponentOutlet, DOCUMENT, DecimalPipe } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -1366,6 +1366,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'ui-option', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-option\"\n  [class.ui-option--selected]=\"selected()\"\n  [class.ui-option--disabled]=\"disabled()\"\n  [class.ui-option--focused]=\"focused()\"\n  [class.ui-option--deletable]=\"deletable()\"\n  [attr.role]=\"'option'\"\n  [attr.aria-selected]=\"selected()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  @if (multiple() && selected()) {\n    <svg class=\"ui-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-option__content\">\n    <ng-content />\n  </span>\n  @if (deletable()) {\n    <button\n      type=\"button\"\n      class=\"ui-option__delete\"\n      (click)=\"onDelete($event)\"\n      aria-label=\"Delete option\"\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</div>\n", styles: [":host{display:block}.ui-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);-webkit-user-select:none;user-select:none}.ui-option:hover:not(.ui-option--disabled){background-color:var(--ui-option-hover-bg, var(--ui-bg-hover))}.ui-option--focused:not(.ui-option--disabled){background-color:var(--ui-option-hover-bg, var(--ui-bg-hover))}.ui-option--selected{background-color:var(--ui-option-selected-bg, color-mix(in srgb, var(--ui-primary) 10%, transparent));color:var(--ui-primary)}.ui-option--selected:hover:not(.ui-option--disabled){background-color:var(--ui-option-selected-bg, color-mix(in srgb, var(--ui-primary) 15%, transparent))}.ui-option--disabled{opacity:.5;cursor:not-allowed}.ui-option__check{flex-shrink:0;color:var(--ui-primary)}.ui-option__content{flex:1;min-width:0}.ui-option__delete{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;opacity:0;transition:opacity var(--ui-transition-fast),background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-option:hover .ui-option__delete,.ui-option--focused .ui-option__delete{opacity:1}.ui-option__delete:hover{background-color:var(--ui-danger);color:#fff}.ui-option__delete:focus{outline:none;opacity:1}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], deleteClicked: [{ type: i0.Output, args: ["deleteClicked"] }] } });
 
+class OptionTemplateDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: OptionTemplateDirective, isStandalone: true, selector: "[uiOptionTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OptionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiOptionTemplate]',
+                    standalone: true,
+                }]
+        }] });
+
 class SelectComponent {
     // Inputs
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
@@ -1381,6 +1394,10 @@ class SelectComponent {
     creatable = input(false, ...(ngDevMode ? [{ debugName: "creatable" }] : []));
     deletable = input(false, ...(ngDevMode ? [{ debugName: "deletable" }] : []));
     selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
+    // Async search inputs
+    asyncSearch = input(null, ...(ngDevMode ? [{ debugName: "asyncSearch" }] : []));
+    debounceTime = input(300, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
+    minSearchLength = input(0, ...(ngDevMode ? [{ debugName: "minSearchLength" }] : []));
     // Two-way binding
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     // Outputs
@@ -1390,6 +1407,7 @@ class SelectComponent {
     deleted = output();
     // Content children
     options = contentChildren(OptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : []));
+    optionTemplate = contentChild(OptionTemplateDirective, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
     // View children for dropdown portal
     triggerRef;
     dropdownRef;
@@ -1398,6 +1416,12 @@ class SelectComponent {
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
     focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    // Async state
+    asyncLoading = signal(false, ...(ngDevMode ? [{ debugName: "asyncLoading" }] : []));
+    asyncOptions = signal([], ...(ngDevMode ? [{ debugName: "asyncOptions" }] : []));
+    asyncError = signal(null, ...(ngDevMode ? [{ debugName: "asyncError" }] : []));
+    asyncSearchAbortController = null;
+    debounceTimer = null;
     elementRef = inject(ElementRef);
     positionCleanup = null;
     initializedOptions = new WeakSet();
@@ -1467,6 +1491,7 @@ class SelectComponent {
             document.body.removeChild(dropdown);
         }
         this.removePositionListeners();
+        this.cancelAsyncSearch();
     }
     triggerClasses = computed(() => {
         return `ui-select__trigger--${this.variant()} ui-select__trigger--${this.size()}`;
@@ -1481,10 +1506,17 @@ class SelectComponent {
     displayValue = computed(() => {
         const val = this.value();
         const opts = this.options();
+        const asyncOpts = this.asyncOptions();
+        const isAsync = this.isAsyncMode();
         if (this.multiple() && Array.isArray(val)) {
             if (val.length === 0)
                 return '';
             const labels = val.map((v) => {
+                if (isAsync) {
+                    const asyncOpt = asyncOpts.find((o) => o.value === v);
+                    if (asyncOpt)
+                        return asyncOpt.label;
+                }
                 const opt = opts.find((o) => o.value() === v);
                 return opt?.getLabel() || String(v);
             });
@@ -1492,6 +1524,11 @@ class SelectComponent {
         }
         if (val === null || val === undefined)
             return '';
+        if (isAsync) {
+            const asyncOpt = asyncOpts.find((o) => o.value === val);
+            if (asyncOpt)
+                return asyncOpt.label;
+        }
         const opt = opts.find((o) => o.value() === val);
         return opt?.getLabel() || String(val);
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
@@ -1505,7 +1542,11 @@ class SelectComponent {
         }
         return this.displayValue() || this.placeholder();
     }, ...(ngDevMode ? [{ debugName: "inputPlaceholder" }] : []));
+    isAsyncMode = computed(() => this.asyncSearch() !== null, ...(ngDevMode ? [{ debugName: "isAsyncMode" }] : []));
     visibleOptions = computed(() => {
+        // In async mode, don't filter content children - they're not used
+        if (this.isAsyncMode())
+            return [];
         const query = this.searchQuery().toLowerCase().trim();
         const opts = this.options();
         if (!query)
@@ -1515,12 +1556,26 @@ class SelectComponent {
             return label.includes(query);
         });
     }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : []));
+    visibleAsyncOptions = computed(() => {
+        if (!this.isAsyncMode())
+            return [];
+        return this.asyncOptions();
+    }, ...(ngDevMode ? [{ debugName: "visibleAsyncOptions" }] : []));
     exactMatchExists = computed(() => {
         const query = this.searchQuery().toLowerCase().trim();
         if (!query)
             return true;
+        if (this.isAsyncMode()) {
+            return this.asyncOptions().some((opt) => opt.label.toLowerCase() === query);
+        }
         return this.options().some((opt) => opt.getLabel().toLowerCase() === query);
     }, ...(ngDevMode ? [{ debugName: "exactMatchExists" }] : []));
+    totalVisibleCount = computed(() => {
+        if (this.isAsyncMode()) {
+            return this.visibleAsyncOptions().length;
+        }
+        return this.visibleOptions().length;
+    }, ...(ngDevMode ? [{ debugName: "totalVisibleCount" }] : []));
     onDocumentClick(event) {
         const target = event.target;
         if (!this.elementRef.nativeElement.contains(target) &&
@@ -1575,6 +1630,21 @@ class SelectComponent {
         this.searchQuery.set('');
         this.focusedIndex.set(-1);
         this.closed.emit();
+        // Clean up async state
+        this.cancelAsyncSearch();
+        this.asyncLoading.set(false);
+        this.asyncError.set(null);
+        // Keep asyncOptions so displayValue still works after selection
+    }
+    cancelAsyncSearch() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        if (this.asyncSearchAbortController) {
+            this.asyncSearchAbortController.abort();
+            this.asyncSearchAbortController = null;
+        }
     }
     selectOption(option, event) {
         event?.stopPropagation();
@@ -1617,6 +1687,44 @@ class SelectComponent {
             this.value.set(null);
         }
     }
+    selectAsyncOption(option, event) {
+        event?.stopPropagation();
+        if (option.disabled)
+            return;
+        if (!this.selectable())
+            return;
+        const optionValue = option.value;
+        if (this.multiple()) {
+            const currentValue = this.value() || [];
+            const index = currentValue.indexOf(optionValue);
+            let newValue;
+            if (index === -1) {
+                newValue = [...currentValue, optionValue];
+            }
+            else {
+                newValue = currentValue.filter((_, i) => i !== index);
+            }
+            this.value.set(newValue);
+            // In multiple+searchable mode, clear search and refocus input
+            if (this.searchable()) {
+                this.searchQuery.set('');
+                this.focusedIndex.set(-1);
+                this.asyncOptions.set([]);
+                setTimeout(() => this.searchInputRef?.nativeElement?.focus());
+            }
+        }
+        else {
+            this.value.set(optionValue);
+            this.close();
+        }
+    }
+    isAsyncOptionSelected(option) {
+        const val = this.value();
+        if (this.multiple() && Array.isArray(val)) {
+            return val.includes(option.value);
+        }
+        return val === option.value;
+    }
     deleteOption(optionValue) {
         // Remove from selection if selected
         if (this.multiple()) {
@@ -1636,10 +1744,7 @@ class SelectComponent {
             case ' ':
                 event.preventDefault();
                 if (this.isOpen()) {
-                    const focused = this.visibleOptions()[this.focusedIndex()];
-                    if (focused) {
-                        this.selectOption(focused);
-                    }
+                    this.selectFocusedOption();
                 }
                 else {
                     this.open();
@@ -1692,13 +1797,24 @@ class SelectComponent {
             case 'Enter':
                 event.preventDefault();
                 if (this.isOpen()) {
-                    const visible = this.visibleOptions();
-                    const focused = visible[this.focusedIndex()];
-                    if (focused) {
-                        this.selectOption(focused);
+                    const focusedIdx = this.focusedIndex();
+                    if (focusedIdx >= 0) {
+                        this.selectFocusedOption();
                     }
-                    else if (visible.length === 1) {
-                        this.selectOption(visible[0]);
+                    else if (this.totalVisibleCount() === 1) {
+                        // Auto-select single visible option
+                        if (this.isAsyncMode()) {
+                            const asyncOpts = this.visibleAsyncOptions();
+                            if (asyncOpts.length === 1) {
+                                this.selectAsyncOption(asyncOpts[0]);
+                            }
+                        }
+                        else {
+                            const visible = this.visibleOptions();
+                            if (visible.length === 1) {
+                                this.selectOption(visible[0]);
+                            }
+                        }
                     }
                     else if (this.creatable() && this.searchQuery().trim() && !this.exactMatchExists()) {
                         this.handleCreate();
@@ -1717,18 +1833,95 @@ class SelectComponent {
                 break;
         }
     }
+    selectFocusedOption() {
+        const focusedIdx = this.focusedIndex();
+        if (focusedIdx < 0)
+            return;
+        if (this.isAsyncMode()) {
+            const asyncOpts = this.visibleAsyncOptions();
+            const focused = asyncOpts[focusedIdx];
+            if (focused) {
+                this.selectAsyncOption(focused);
+            }
+        }
+        else {
+            const focused = this.visibleOptions()[focusedIdx];
+            if (focused) {
+                this.selectOption(focused);
+            }
+        }
+    }
     onSearchInput(value) {
         this.searchQuery.set(value);
-        // Auto-highlight when exactly one option is visible
-        const visible = this.visibleOptions();
-        this.focusedIndex.set(visible.length === 1 ? 0 : -1);
         if (!this.isOpen()) {
-            // Open without focus/select since user is already typing
             this.isOpen.set(true);
             this.focusedIndex.set(-1);
             this.opened.emit();
             this.portalDropdown();
         }
+        if (this.isAsyncMode()) {
+            this.triggerAsyncSearch(value);
+        }
+        else {
+            // Auto-highlight when exactly one option is visible
+            const visible = this.visibleOptions();
+            this.focusedIndex.set(visible.length === 1 ? 0 : -1);
+        }
+    }
+    triggerAsyncSearch(query) {
+        // Clear previous debounce timer
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        // Cancel previous request
+        if (this.asyncSearchAbortController) {
+            this.asyncSearchAbortController.abort();
+            this.asyncSearchAbortController = null;
+        }
+        const trimmedQuery = query.trim();
+        // Check minimum search length
+        if (trimmedQuery.length < this.minSearchLength()) {
+            this.asyncOptions.set([]);
+            this.asyncLoading.set(false);
+            this.asyncError.set(null);
+            this.focusedIndex.set(-1);
+            return;
+        }
+        // Set loading state immediately for visual feedback
+        this.asyncLoading.set(true);
+        this.asyncError.set(null);
+        // Debounce the actual search
+        this.debounceTimer = setTimeout(() => {
+            this.executeAsyncSearch(trimmedQuery);
+        }, this.debounceTime());
+    }
+    async executeAsyncSearch(query) {
+        const searchFn = this.asyncSearch();
+        if (!searchFn)
+            return;
+        this.asyncSearchAbortController = new AbortController();
+        const signal = this.asyncSearchAbortController.signal;
+        try {
+            const results = await searchFn(query);
+            // Check if request was aborted
+            if (signal.aborted)
+                return;
+            this.asyncOptions.set(results);
+            this.asyncLoading.set(false);
+            this.asyncError.set(null);
+            // Auto-highlight first option if results exist
+            this.focusedIndex.set(results.length > 0 ? 0 : -1);
+        }
+        catch (error) {
+            // Ignore abort errors
+            if (signal.aborted)
+                return;
+            this.asyncOptions.set([]);
+            this.asyncLoading.set(false);
+            this.asyncError.set(error instanceof Error ? error.message : 'Search failed');
+            this.focusedIndex.set(-1);
+        }
     }
     handleCreate() {
         const query = this.searchQuery().trim();
@@ -1739,27 +1932,53 @@ class SelectComponent {
         this.close();
     }
     focusNext() {
-        const opts = this.visibleOptions();
         const current = this.focusedIndex();
-        let next = current + 1;
-        while (next < opts.length && opts[next].disabled()) {
-            next++;
+        if (this.isAsyncMode()) {
+            const opts = this.visibleAsyncOptions();
+            let next = current + 1;
+            while (next < opts.length && opts[next].disabled) {
+                next++;
+            }
+            if (next < opts.length) {
+                this.focusedIndex.set(next);
+                this.scrollToFocusedAsync(next);
+            }
         }
-        if (next < opts.length) {
-            this.focusedIndex.set(next);
-            this.scrollToFocused();
+        else {
+            const opts = this.visibleOptions();
+            let next = current + 1;
+            while (next < opts.length && opts[next].disabled()) {
+                next++;
+            }
+            if (next < opts.length) {
+                this.focusedIndex.set(next);
+                this.scrollToFocused();
+            }
         }
     }
     focusPrevious() {
-        const opts = this.visibleOptions();
         const current = this.focusedIndex();
-        let prev = current - 1;
-        while (prev >= 0 && opts[prev].disabled()) {
-            prev--;
+        if (this.isAsyncMode()) {
+            const opts = this.visibleAsyncOptions();
+            let prev = current - 1;
+            while (prev >= 0 && opts[prev].disabled) {
+                prev--;
+            }
+            if (prev >= 0) {
+                this.focusedIndex.set(prev);
+                this.scrollToFocusedAsync(prev);
+            }
         }
-        if (prev >= 0) {
-            this.focusedIndex.set(prev);
-            this.scrollToFocused();
+        else {
+            const opts = this.visibleOptions();
+            let prev = current - 1;
+            while (prev >= 0 && opts[prev].disabled()) {
+                prev--;
+            }
+            if (prev >= 0) {
+                this.focusedIndex.set(prev);
+                this.scrollToFocused();
+            }
         }
     }
     scrollToFocused() {
@@ -1768,6 +1987,16 @@ class SelectComponent {
             focused.elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
         }
     }
+    scrollToFocusedAsync(index) {
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (!dropdown)
+            return;
+        const optionElements = dropdown.querySelectorAll('.ui-async-option');
+        const focusedElement = optionElements[index];
+        if (focusedElement) {
+            focusedElement.scrollIntoView({ block: 'nearest' });
+        }
+    }
     portalDropdown() {
         const dropdown = this.dropdownRef?.nativeElement;
         if (!dropdown)
@@ -1793,7 +2022,6 @@ class SelectComponent {
         dropdown.style.left = '';
         dropdown.style.bottom = '';
         dropdown.style.width = '';
-        dropdown.style.minWidth = '';
         dropdown.style.zIndex = '';
         dropdown.style.margin = '';
         this.removePositionListeners();
@@ -1810,7 +2038,7 @@ class SelectComponent {
         const spaceAbove = triggerRect.top;
         const openAbove = spaceBelow < dropdownHeight + gap && spaceAbove > spaceBelow;
         dropdown.style.position = 'fixed';
-        dropdown.style.minWidth = `${triggerRect.width}px`;
+        dropdown.style.width = `${triggerRect.width}px`;
         dropdown.style.left = `${triggerRect.left}px`;
         dropdown.style.zIndex = '99999';
         dropdown.style.margin = '0';
@@ -1841,12 +2069,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 }, 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 }], 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      <ng-content />\n      @if (visibleOptions().length === 0 && !(creatable() && searchQuery().trim())) {\n        <div class=\"ui-select__empty\">No options found</div>\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)}.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)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }], 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 }, 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], 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      <ng-content />\n      @if (visibleOptions().length === 0 && !(creatable() && searchQuery().trim())) {\n        <div class=\"ui-select__empty\">No options found</div>\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)}.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)}\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 }] }], 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 }] }], triggerRef: [{
+            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: [{
                 type: ViewChild,
                 args: ['triggerRef', { static: true }]
             }], dropdownRef: [{
@@ -1860,19 +2088,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
-class OptionTemplateDirective {
-    templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: OptionTemplateDirective, isStandalone: true, selector: "[uiOptionTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OptionTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uiOptionTemplate]',
-                    standalone: true,
-                }]
-        }] });
-
 class DropdownTriggerDirective {
     elementRef = inject(ElementRef);
     toggleDropdown = output();
@@ -6001,6 +6216,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                     standalone: true,
                 }]
         }] });
+/** Directive to mark suffix content (buttons, icons, etc.) */
+class TemplateInputSuffixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TemplateInputSuffixDirective, isStandalone: true, selector: "[uiTemplateInputSuffix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiTemplateInputSuffix]',
+                    standalone: true,
+                }]
+        }] });
 class TemplateInputComponent {
     renderer;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -6026,6 +6253,12 @@ class TemplateInputComponent {
     variableHover = output();
     /** Custom popover template for variables. Receives VariablePopoverContext. */
     popoverTemplate = contentChild(VariablePopoverDirective, { ...(ngDevMode ? { debugName: "popoverTemplate" } : {}), read: TemplateRef });
+    /** Detect if suffix content is projected */
+    hasSuffix = contentChildren(TemplateInputSuffixDirective, ...(ngDevMode ? [{ debugName: "hasSuffix" }] : []));
+    suffixRef = viewChild('suffixEl', ...(ngDevMode ? [{ debugName: "suffixRef" }] : []));
+    /** Computed padding-right based on suffix width */
+    suffixPadding = signal(0, ...(ngDevMode ? [{ debugName: "suffixPadding" }] : []));
+    resizeObserver = null;
     static nextId = 0;
     generatedId = `ui-template-input-${++TemplateInputComponent.nextId}`;
     inputId = computed(() => this.id() || this.generatedId, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
@@ -6059,6 +6292,29 @@ class TemplateInputComponent {
         this.renderer = renderer;
         this.injectStyles();
     }
+    ngAfterViewInit() {
+        this.observeSuffix();
+    }
+    observeSuffix() {
+        const suffixEl = this.suffixRef()?.nativeElement;
+        if (!suffixEl)
+            return;
+        this.updateSuffixPadding(suffixEl);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateSuffixPadding(suffixEl);
+        });
+        this.resizeObserver.observe(suffixEl);
+    }
+    updateSuffixPadding(el) {
+        const width = el.offsetWidth;
+        if (width > 0) {
+            // Add small gap between content and suffix
+            this.suffixPadding.set(width + 8);
+        }
+        else {
+            this.suffixPadding.set(0);
+        }
+    }
     highlightedHtml = computed(() => {
         const text = this.value();
         if (!text)
@@ -6298,14 +6554,19 @@ class TemplateInputComponent {
             this.removePositionListeners();
             this.isPortaled = false;
         }
+        // Clean up ResizeObserver
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TemplateInputComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TemplateInputComponent, isStandalone: true, selector: "ui-template-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange", variables: "variablesChange", variableHover: "variableHover" }, queries: [{ propertyName: "popoverTemplate", first: true, predicate: VariablePopoverDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "mirrorRef", first: true, predicate: ["mirror"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"ui-template-input-wrapper\"\n  [class.ui-template-input-wrapper--error]=\"error()\"\n  [class.ui-template-input-wrapper--disabled]=\"disabled()\"\n>\n  @if (label()) {\n    <label class=\"ui-template-input__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ui-template-input__required\">*</span>\n      }\n    </label>\n  }\n  <div\n    class=\"ui-template-input__container\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseleave)=\"onContainerMouseLeave()\"\n  >\n    <div\n      class=\"ui-template-input__mirror\"\n      #mirror\n      [innerHTML]=\"highlightedHtml()\"\n    ></div>\n    <input\n      class=\"ui-template-input__input\"\n      #inputEl\n      [id]=\"inputId()\"\n      type=\"text\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [(ngModel)]=\"value\"\n      (input)=\"onInput()\"\n      (scroll)=\"syncScroll()\"\n      (click)=\"syncScroll()\"\n      (keydown)=\"onKeyDown()\"\n    />\n  </div>\n  @if (error()) {\n    <span class=\"ui-template-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-template-input__hint\">{{ hint() }}</span>\n  }\n</div>\n\n<div\n  #popoverRef\n  class=\"ui-tmpl-popover\"\n  [class.ui-tmpl-popover--open]=\"popoverVisible()\"\n  [class.ui-tmpl-popover--above]=\"openAbove()\"\n  [class.ui-tmpl-popover--below]=\"!openAbove()\"\n  (mouseenter)=\"onPopoverMouseEnter()\"\n  (mouseleave)=\"onPopoverMouseLeave()\"\n>\n  @if (popoverVisible()) {\n    @if (popoverTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"popoverTemplate()!\"\n        [ngTemplateOutletContext]=\"popoverContext()\"\n      />\n    } @else {\n      <span class=\"ui-tmpl-popover__text\">{{ popoverText() }}</span>\n    }\n  }\n</div>\n", styles: [":host{display:block}.ui-template-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-template-input__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-template-input__required{color:var(--ui-danger);margin-left:2px}.ui-template-input__container{position:relative;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background-color:var(--ui-bg);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);overflow:hidden}.ui-template-input__container:hover{border-color:var(--ui-border-hover)}.ui-template-input__container:focus-within{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-template-input__mirror{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);white-space:pre;overflow:hidden;pointer-events:none}.ui-template-input__input{position:absolute;top:0;left:0;width:100%;height:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:transparent;caret-color:var(--ui-text);background:transparent;border:none;outline:none}.ui-template-input__input::placeholder{color:var(--ui-text-muted)}.ui-template-input__input:disabled{cursor:not-allowed}.ui-template-input-wrapper--disabled .ui-template-input__container{background-color:var(--ui-bg-secondary)}.ui-template-input-wrapper--disabled .ui-template-input__container:hover{border-color:var(--ui-border)}.ui-template-input-wrapper--disabled .ui-template-input__mirror{color:var(--ui-text-disabled)}.ui-template-input-wrapper--error .ui-template-input__container{border-color:var(--ui-danger)}.ui-template-input-wrapper--error .ui-template-input__container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-template-input__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-template-input__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tmpl-popover{display:none;line-height:1.5;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-lg);opacity:0;transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-tmpl-popover--open{opacity:1}.ui-tmpl-popover--above{transform:translateY(4px)}.ui-tmpl-popover--above.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover--below{transform:translateY(-4px)}.ui-tmpl-popover--below.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover__text{display:block;padding:.375rem .625rem;font-size:var(--ui-font-sm);color:var(--ui-text);white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: TemplateInputComponent, isStandalone: true, selector: "ui-template-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange", variables: "variablesChange", variableHover: "variableHover" }, queries: [{ propertyName: "popoverTemplate", first: true, predicate: VariablePopoverDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "hasSuffix", predicate: TemplateInputSuffixDirective, isSignal: true }], viewQueries: [{ propertyName: "suffixRef", first: true, predicate: ["suffixEl"], descendants: true, isSignal: true }, { propertyName: "mirrorRef", first: true, predicate: ["mirror"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"ui-template-input-wrapper\"\n  [class.ui-template-input-wrapper--error]=\"error()\"\n  [class.ui-template-input-wrapper--disabled]=\"disabled()\"\n>\n  @if (label()) {\n    <label class=\"ui-template-input__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ui-template-input__required\">*</span>\n      }\n    </label>\n  }\n  <div\n    class=\"ui-template-input__container\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseleave)=\"onContainerMouseLeave()\"\n  >\n    <div\n      class=\"ui-template-input__mirror\"\n      #mirror\n      [style.padding-right.px]=\"suffixPadding() || null\"\n      [innerHTML]=\"highlightedHtml()\"\n    ></div>\n    <input\n      class=\"ui-template-input__input\"\n      #inputEl\n      [id]=\"inputId()\"\n      type=\"text\"\n      [style.padding-right.px]=\"suffixPadding() || null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [(ngModel)]=\"value\"\n      (input)=\"onInput()\"\n      (scroll)=\"syncScroll()\"\n      (click)=\"syncScroll()\"\n      (keydown)=\"onKeyDown()\"\n    />\n    <div class=\"ui-template-input__suffix\" #suffixEl>\n      <ng-content select=\"[uiTemplateInputSuffix]\" />\n    </div>\n  </div>\n  @if (error()) {\n    <span class=\"ui-template-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-template-input__hint\">{{ hint() }}</span>\n  }\n</div>\n\n<div\n  #popoverRef\n  class=\"ui-tmpl-popover\"\n  [class.ui-tmpl-popover--open]=\"popoverVisible()\"\n  [class.ui-tmpl-popover--above]=\"openAbove()\"\n  [class.ui-tmpl-popover--below]=\"!openAbove()\"\n  (mouseenter)=\"onPopoverMouseEnter()\"\n  (mouseleave)=\"onPopoverMouseLeave()\"\n>\n  @if (popoverVisible()) {\n    @if (popoverTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"popoverTemplate()!\"\n        [ngTemplateOutletContext]=\"popoverContext()\"\n      />\n    } @else {\n      <span class=\"ui-tmpl-popover__text\">{{ popoverText() }}</span>\n    }\n  }\n</div>\n", styles: [":host{display:block}.ui-template-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-template-input__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-template-input__required{color:var(--ui-danger);margin-left:2px}.ui-template-input__container{position:relative;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background-color:var(--ui-bg);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);overflow:hidden}.ui-template-input__container:hover{border-color:var(--ui-border-hover)}.ui-template-input__container:focus-within{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-template-input__mirror{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);white-space:pre;overflow-x:auto;overflow-y:hidden;pointer-events:none;scrollbar-width:none;-ms-overflow-style:none}.ui-template-input__mirror::-webkit-scrollbar{display:none}.ui-template-input__input{position:absolute;top:0;left:0;width:100%;height:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:transparent;caret-color:var(--ui-text);background:transparent;border:none;outline:none}.ui-template-input__input::placeholder{color:var(--ui-text-muted)}.ui-template-input__input:disabled{cursor:not-allowed}.ui-template-input__suffix{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;gap:var(--ui-spacing-xs);padding-right:var(--ui-spacing-sm);pointer-events:auto}.ui-template-input__suffix:empty{display:none}.ui-template-input-wrapper--disabled .ui-template-input__container{background-color:var(--ui-bg-secondary)}.ui-template-input-wrapper--disabled .ui-template-input__container:hover{border-color:var(--ui-border)}.ui-template-input-wrapper--disabled .ui-template-input__mirror{color:var(--ui-text-disabled)}.ui-template-input-wrapper--error .ui-template-input__container{border-color:var(--ui-danger)}.ui-template-input-wrapper--error .ui-template-input__container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-template-input__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-template-input__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tmpl-popover{display:none;line-height:1.5;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-lg);opacity:0;transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-tmpl-popover--open{opacity:1}.ui-tmpl-popover--above{transform:translateY(4px)}.ui-tmpl-popover--above.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover--below{transform:translateY(-4px)}.ui-tmpl-popover--below.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover__text{display:block;padding:.375rem .625rem;font-size:var(--ui-font-sm);color:var(--ui-text);white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: TemplateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-template-input', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-template-input-wrapper\"\n  [class.ui-template-input-wrapper--error]=\"error()\"\n  [class.ui-template-input-wrapper--disabled]=\"disabled()\"\n>\n  @if (label()) {\n    <label class=\"ui-template-input__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ui-template-input__required\">*</span>\n      }\n    </label>\n  }\n  <div\n    class=\"ui-template-input__container\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseleave)=\"onContainerMouseLeave()\"\n  >\n    <div\n      class=\"ui-template-input__mirror\"\n      #mirror\n      [innerHTML]=\"highlightedHtml()\"\n    ></div>\n    <input\n      class=\"ui-template-input__input\"\n      #inputEl\n      [id]=\"inputId()\"\n      type=\"text\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [(ngModel)]=\"value\"\n      (input)=\"onInput()\"\n      (scroll)=\"syncScroll()\"\n      (click)=\"syncScroll()\"\n      (keydown)=\"onKeyDown()\"\n    />\n  </div>\n  @if (error()) {\n    <span class=\"ui-template-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-template-input__hint\">{{ hint() }}</span>\n  }\n</div>\n\n<div\n  #popoverRef\n  class=\"ui-tmpl-popover\"\n  [class.ui-tmpl-popover--open]=\"popoverVisible()\"\n  [class.ui-tmpl-popover--above]=\"openAbove()\"\n  [class.ui-tmpl-popover--below]=\"!openAbove()\"\n  (mouseenter)=\"onPopoverMouseEnter()\"\n  (mouseleave)=\"onPopoverMouseLeave()\"\n>\n  @if (popoverVisible()) {\n    @if (popoverTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"popoverTemplate()!\"\n        [ngTemplateOutletContext]=\"popoverContext()\"\n      />\n    } @else {\n      <span class=\"ui-tmpl-popover__text\">{{ popoverText() }}</span>\n    }\n  }\n</div>\n", styles: [":host{display:block}.ui-template-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-template-input__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-template-input__required{color:var(--ui-danger);margin-left:2px}.ui-template-input__container{position:relative;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background-color:var(--ui-bg);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);overflow:hidden}.ui-template-input__container:hover{border-color:var(--ui-border-hover)}.ui-template-input__container:focus-within{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-template-input__mirror{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);white-space:pre;overflow:hidden;pointer-events:none}.ui-template-input__input{position:absolute;top:0;left:0;width:100%;height:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:transparent;caret-color:var(--ui-text);background:transparent;border:none;outline:none}.ui-template-input__input::placeholder{color:var(--ui-text-muted)}.ui-template-input__input:disabled{cursor:not-allowed}.ui-template-input-wrapper--disabled .ui-template-input__container{background-color:var(--ui-bg-secondary)}.ui-template-input-wrapper--disabled .ui-template-input__container:hover{border-color:var(--ui-border)}.ui-template-input-wrapper--disabled .ui-template-input__mirror{color:var(--ui-text-disabled)}.ui-template-input-wrapper--error .ui-template-input__container{border-color:var(--ui-danger)}.ui-template-input-wrapper--error .ui-template-input__container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-template-input__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-template-input__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tmpl-popover{display:none;line-height:1.5;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-lg);opacity:0;transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-tmpl-popover--open{opacity:1}.ui-tmpl-popover--above{transform:translateY(4px)}.ui-tmpl-popover--above.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover--below{transform:translateY(-4px)}.ui-tmpl-popover--below.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover__text{display:block;padding:.375rem .625rem;font-size:var(--ui-font-sm);color:var(--ui-text);white-space:nowrap}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: true }] }, { type: i0.Output, args: ["variablesChange"] }], variableHover: [{ type: i0.Output, args: ["variableHover"] }], popoverTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => VariablePopoverDirective), { ...{ read: TemplateRef }, isSignal: true }] }], mirrorRef: [{ type: i0.ViewChild, args: ['mirror', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], popoverRef: [{
+            args: [{ selector: 'ui-template-input', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-template-input-wrapper\"\n  [class.ui-template-input-wrapper--error]=\"error()\"\n  [class.ui-template-input-wrapper--disabled]=\"disabled()\"\n>\n  @if (label()) {\n    <label class=\"ui-template-input__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ui-template-input__required\">*</span>\n      }\n    </label>\n  }\n  <div\n    class=\"ui-template-input__container\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseleave)=\"onContainerMouseLeave()\"\n  >\n    <div\n      class=\"ui-template-input__mirror\"\n      #mirror\n      [style.padding-right.px]=\"suffixPadding() || null\"\n      [innerHTML]=\"highlightedHtml()\"\n    ></div>\n    <input\n      class=\"ui-template-input__input\"\n      #inputEl\n      [id]=\"inputId()\"\n      type=\"text\"\n      [style.padding-right.px]=\"suffixPadding() || null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [(ngModel)]=\"value\"\n      (input)=\"onInput()\"\n      (scroll)=\"syncScroll()\"\n      (click)=\"syncScroll()\"\n      (keydown)=\"onKeyDown()\"\n    />\n    <div class=\"ui-template-input__suffix\" #suffixEl>\n      <ng-content select=\"[uiTemplateInputSuffix]\" />\n    </div>\n  </div>\n  @if (error()) {\n    <span class=\"ui-template-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-template-input__hint\">{{ hint() }}</span>\n  }\n</div>\n\n<div\n  #popoverRef\n  class=\"ui-tmpl-popover\"\n  [class.ui-tmpl-popover--open]=\"popoverVisible()\"\n  [class.ui-tmpl-popover--above]=\"openAbove()\"\n  [class.ui-tmpl-popover--below]=\"!openAbove()\"\n  (mouseenter)=\"onPopoverMouseEnter()\"\n  (mouseleave)=\"onPopoverMouseLeave()\"\n>\n  @if (popoverVisible()) {\n    @if (popoverTemplate()) {\n      <ng-container\n        [ngTemplateOutlet]=\"popoverTemplate()!\"\n        [ngTemplateOutletContext]=\"popoverContext()\"\n      />\n    } @else {\n      <span class=\"ui-tmpl-popover__text\">{{ popoverText() }}</span>\n    }\n  }\n</div>\n", styles: [":host{display:block}.ui-template-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-template-input__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-template-input__required{color:var(--ui-danger);margin-left:2px}.ui-template-input__container{position:relative;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background-color:var(--ui-bg);transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast);overflow:hidden}.ui-template-input__container:hover{border-color:var(--ui-border-hover)}.ui-template-input__container:focus-within{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-template-input__mirror{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:var(--ui-text);white-space:pre;overflow-x:auto;overflow-y:hidden;pointer-events:none;scrollbar-width:none;-ms-overflow-style:none}.ui-template-input__mirror::-webkit-scrollbar{display:none}.ui-template-input__input{position:absolute;top:0;left:0;width:100%;height:100%;padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-family:inherit;font-size:var(--ui-font-md);color:transparent;caret-color:var(--ui-text);background:transparent;border:none;outline:none}.ui-template-input__input::placeholder{color:var(--ui-text-muted)}.ui-template-input__input:disabled{cursor:not-allowed}.ui-template-input__suffix{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;gap:var(--ui-spacing-xs);padding-right:var(--ui-spacing-sm);pointer-events:auto}.ui-template-input__suffix:empty{display:none}.ui-template-input-wrapper--disabled .ui-template-input__container{background-color:var(--ui-bg-secondary)}.ui-template-input-wrapper--disabled .ui-template-input__container:hover{border-color:var(--ui-border)}.ui-template-input-wrapper--disabled .ui-template-input__mirror{color:var(--ui-text-disabled)}.ui-template-input-wrapper--error .ui-template-input__container{border-color:var(--ui-danger)}.ui-template-input-wrapper--error .ui-template-input__container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-template-input__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-template-input__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tmpl-popover{display:none;line-height:1.5;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-lg);opacity:0;transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-tmpl-popover--open{opacity:1}.ui-tmpl-popover--above{transform:translateY(4px)}.ui-tmpl-popover--above.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover--below{transform:translateY(-4px)}.ui-tmpl-popover--below.ui-tmpl-popover--open{transform:translateY(0)}.ui-tmpl-popover__text{display:block;padding:.375rem .625rem;font-size:var(--ui-font-sm);color:var(--ui-text);white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: true }] }, { type: i0.Output, args: ["variablesChange"] }], variableHover: [{ type: i0.Output, args: ["variableHover"] }], popoverTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => VariablePopoverDirective), { ...{ read: TemplateRef }, isSignal: true }] }], hasSuffix: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateInputSuffixDirective), { isSignal: true }] }], suffixRef: [{ type: i0.ViewChild, args: ['suffixEl', { isSignal: true }] }], mirrorRef: [{ type: i0.ViewChild, args: ['mirror', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], popoverRef: [{
                 type: ViewChild,
                 args: ['popoverRef', { static: true }]
             }] } });
@@ -6319,5 +6580,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective };
+export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective };
 //# sourceMappingURL=m1z23r-ngx-ui.mjs.map