@m1z23r/ngx-ui 1.1.46 → 1.1.47

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -3969,6 +3969,11 @@ class ChipInputComponent {
     allowDuplicates = input(false, ...(ngDevMode ? [{ debugName: "allowDuplicates" }] : []));
     /** When false, only emits the `added` event without adding to the array (useful for custom object chips) */
     autoAdd = input(true, ...(ngDevMode ? [{ debugName: "autoAdd" }] : []));
+    suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    asyncSearch = input(null, ...(ngDevMode ? [{ debugName: "asyncSearch" }] : []));
+    strict = input(false, ...(ngDevMode ? [{ debugName: "strict" }] : []));
+    minSearchLength = input(0, ...(ngDevMode ? [{ debugName: "minSearchLength" }] : []));
+    debounceTime = input(300, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
     /** The array of chip values */
     value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Emitted when a chip is added */
@@ -3977,9 +3982,24 @@ class ChipInputComponent {
     removed = output();
     /** Custom chip template */
     chipTemplate = contentChild(ChipTemplateDirective, { ...(ngDevMode ? { debugName: "chipTemplate" } : {}), read: TemplateRef });
+    optionTemplate = contentChild(OptionTemplateDirective, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
     inputRef;
+    triggerRef;
+    dropdownRef;
     inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
     isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    asyncOptions = signal([], ...(ngDevMode ? [{ debugName: "asyncOptions" }] : []));
+    asyncLoading = signal(false, ...(ngDevMode ? [{ debugName: "asyncLoading" }] : []));
+    asyncError = signal(null, ...(ngDevMode ? [{ debugName: "asyncError" }] : []));
+    labelCache = new Map();
+    elementRef = inject(ElementRef);
+    document = inject(DOCUMENT);
+    asyncSearchAbortController = null;
+    debounceTimer = null;
+    blurCloseTimer = null;
+    positionCleanup = null;
     containerClasses = computed(() => {
         const classes = [
             `ui-chip-input--${this.variant()}`,
@@ -3993,27 +4013,115 @@ class ChipInputComponent {
             classes.push('ui-chip-input--error');
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    isAsyncMode = computed(() => this.asyncSearch() !== null, ...(ngDevMode ? [{ debugName: "isAsyncMode" }] : []));
+    normalizedSuggestions = computed(() => {
+        return this.suggestions().map((s) => typeof s === 'string' ? { label: s, value: s } : s);
+    }, ...(ngDevMode ? [{ debugName: "normalizedSuggestions" }] : []));
+    visibleSuggestions = computed(() => {
+        const source = this.isAsyncMode() ? this.asyncOptions() : this.normalizedSuggestions();
+        const selected = this.value();
+        const query = this.inputValue().toLowerCase().trim();
+        const notPicked = source.filter((opt) => !selected.includes(opt.value));
+        if (this.isAsyncMode())
+            return notPicked;
+        if (!query)
+            return notPicked;
+        return notPicked.filter((opt) => opt.label.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "visibleSuggestions" }] : []));
+    exactMatchExists = computed(() => {
+        const query = this.inputValue().toLowerCase().trim();
+        if (!query)
+            return true;
+        const source = this.isAsyncMode() ? this.asyncOptions() : this.normalizedSuggestions();
+        return source.some((opt) => opt.label.toLowerCase() === query);
+    }, ...(ngDevMode ? [{ debugName: "exactMatchExists" }] : []));
+    showCreateRow = computed(() => {
+        return (!this.strict() &&
+            this.inputValue().trim().length > 0 &&
+            !this.exactMatchExists());
+    }, ...(ngDevMode ? [{ debugName: "showCreateRow" }] : []));
+    ngOnDestroy() {
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (dropdown?.parentElement === this.document.body) {
+            this.document.body.removeChild(dropdown);
+        }
+        this.removePositionListeners();
+        this.cancelAsyncSearch();
+        if (this.blurCloseTimer) {
+            clearTimeout(this.blurCloseTimer);
+            this.blurCloseTimer = null;
+        }
+    }
     onContainerClick() {
         if (!this.disabled()) {
             this.inputRef?.nativeElement?.focus();
         }
     }
     onInputKeydown(event) {
-        const value = this.inputValue().trim();
+        const trimmed = this.inputValue().trim();
         switch (event.key) {
-            case 'Enter':
+            case 'Enter': {
                 event.preventDefault();
-                if (value) {
-                    this.addChip(value);
+                const focused = this.focusedIndex();
+                const visible = this.visibleSuggestions();
+                if (focused >= 0 && focused < visible.length) {
+                    this.addSuggestion(visible[focused]);
+                }
+                else if (!this.strict() && trimmed) {
+                    this.addChip(trimmed);
+                    setTimeout(() => this.updateDropdownPosition());
                 }
                 break;
+            }
+            case 'ArrowDown': {
+                if (!this.isOpen()) {
+                    this.open();
+                    return;
+                }
+                event.preventDefault();
+                const visible = this.visibleSuggestions();
+                let next = this.focusedIndex() + 1;
+                while (next < visible.length && visible[next].disabled)
+                    next++;
+                if (next < visible.length)
+                    this.focusedIndex.set(next);
+                break;
+            }
+            case 'ArrowUp': {
+                if (!this.isOpen())
+                    return;
+                event.preventDefault();
+                const visible = this.visibleSuggestions();
+                let prev = this.focusedIndex() - 1;
+                while (prev >= 0 && visible[prev].disabled)
+                    prev--;
+                if (prev >= 0)
+                    this.focusedIndex.set(prev);
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
             case 'Backspace':
-                if (!value && this.value().length > 0) {
+                if (!trimmed && this.value().length > 0) {
                     this.removeChip(this.value()[this.value().length - 1]);
                 }
                 break;
         }
     }
+    onInputChange(value) {
+        this.inputValue.set(value);
+        this.focusedIndex.set(-1);
+        if (!this.isOpen())
+            this.open();
+        if (this.isAsyncMode()) {
+            this.triggerAsyncSearch(value);
+        }
+        else {
+            setTimeout(() => this.updateDropdownPosition());
+        }
+    }
     addChip(chipValue) {
         const current = this.value();
         // For string chips, check duplicates
@@ -4026,8 +4134,29 @@ class ChipInputComponent {
         this.inputValue.set('');
         this.added.emit(chipValue);
     }
+    addSuggestion(option) {
+        if (option.disabled)
+            return;
+        const current = this.value();
+        if (!this.allowDuplicates() && current.includes(option.value))
+            return;
+        if (option.label !== String(option.value)) {
+            this.labelCache.set(option.value, option.label);
+        }
+        if (this.autoAdd()) {
+            this.value.set([...current, option.value]);
+        }
+        this.inputValue.set('');
+        this.added.emit(option.label);
+        this.focusedIndex.set(-1);
+        setTimeout(() => {
+            this.updateDropdownPosition();
+            this.inputRef?.nativeElement?.focus();
+        });
+    }
     removeChip(chipValue) {
         this.value.set(this.value().filter((v) => v !== chipValue));
+        this.labelCache.delete(chipValue);
         this.removed.emit(chipValue);
         // Refocus input after removal
         setTimeout(() => this.inputRef?.nativeElement?.focus());
@@ -4041,23 +4170,202 @@ class ChipInputComponent {
     }
     /** Get display text for a chip (for default template) */
     getChipDisplay(chip) {
-        return String(chip);
+        return this.labelCache.get(chip) ?? String(chip);
     }
     onFocus() {
         this.isFocused.set(true);
+        if (this.blurCloseTimer) {
+            clearTimeout(this.blurCloseTimer);
+            this.blurCloseTimer = null;
+        }
+        this.open();
     }
     onBlur() {
         this.isFocused.set(false);
+        this.blurCloseTimer = setTimeout(() => {
+            this.close();
+            this.blurCloseTimer = null;
+        }, 150);
+    }
+    onDropdownMousedown(event) {
+        event.preventDefault();
+        if (this.blurCloseTimer) {
+            clearTimeout(this.blurCloseTimer);
+            this.blurCloseTimer = null;
+        }
+    }
+    open() {
+        if (this.disabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.focusedIndex.set(-1);
+        this.portalDropdown();
+        if (this.isAsyncMode()) {
+            this.triggerAsyncSearch(this.inputValue());
+        }
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.unportalDropdown();
+        this.isOpen.set(false);
+        this.focusedIndex.set(-1);
+        this.cancelAsyncSearch();
+        this.asyncLoading.set(false);
+        this.asyncError.set(null);
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        if (!this.elementRef.nativeElement.contains(target) &&
+            !this.dropdownRef?.nativeElement?.contains(target)) {
+            this.close();
+        }
+    }
+    portalDropdown() {
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (!dropdown)
+            return;
+        dropdown.style.display = 'block';
+        this.document.body.appendChild(dropdown);
+        this.updateDropdownPosition();
+        this.addPositionListeners();
+    }
+    unportalDropdown() {
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (!dropdown)
+            return;
+        if (dropdown.parentElement === this.document.body) {
+            const wrapper = this.elementRef.nativeElement.querySelector('.ui-chip-input-wrapper');
+            if (wrapper)
+                wrapper.appendChild(dropdown);
+        }
+        dropdown.style.display = '';
+        dropdown.style.position = '';
+        dropdown.style.top = '';
+        dropdown.style.left = '';
+        dropdown.style.bottom = '';
+        dropdown.style.width = '';
+        dropdown.style.zIndex = '';
+        dropdown.style.margin = '';
+        this.removePositionListeners();
+    }
+    updateDropdownPosition() {
+        const trigger = this.triggerRef?.nativeElement;
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (!trigger || !dropdown)
+            return;
+        const triggerRect = trigger.getBoundingClientRect();
+        const dropdownHeight = dropdown.scrollHeight;
+        const gap = 4;
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
+        const openAbove = spaceBelow < dropdownHeight + gap && spaceAbove > spaceBelow;
+        dropdown.style.position = 'fixed';
+        dropdown.style.width = `${triggerRect.width}px`;
+        dropdown.style.left = `${triggerRect.left}px`;
+        dropdown.style.zIndex = '99999';
+        dropdown.style.margin = '0';
+        if (openAbove) {
+            dropdown.style.top = 'auto';
+            dropdown.style.bottom = `${window.innerHeight - triggerRect.top + gap}px`;
+        }
+        else {
+            dropdown.style.top = `${triggerRect.bottom + gap}px`;
+            dropdown.style.bottom = 'auto';
+        }
+    }
+    addPositionListeners() {
+        const update = () => {
+            if (this.isOpen())
+                this.updateDropdownPosition();
+        };
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        this.positionCleanup = () => {
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+        };
+    }
+    removePositionListeners() {
+        this.positionCleanup?.();
+        this.positionCleanup = null;
+    }
+    triggerAsyncSearch(query) {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        if (this.asyncSearchAbortController) {
+            this.asyncSearchAbortController.abort();
+            this.asyncSearchAbortController = null;
+        }
+        const trimmed = query.trim();
+        if (trimmed.length < this.minSearchLength()) {
+            this.asyncOptions.set([]);
+            this.asyncLoading.set(false);
+            this.asyncError.set(null);
+            this.focusedIndex.set(-1);
+            return;
+        }
+        this.asyncLoading.set(true);
+        this.asyncError.set(null);
+        this.debounceTimer = setTimeout(() => {
+            this.executeAsyncSearch(trimmed);
+        }, 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);
+            if (signal.aborted)
+                return;
+            this.asyncOptions.set(results);
+            this.asyncLoading.set(false);
+            this.asyncError.set(null);
+            this.focusedIndex.set(-1);
+            setTimeout(() => this.updateDropdownPosition());
+        }
+        catch (error) {
+            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);
+        }
+    }
+    cancelAsyncSearch() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        if (this.asyncSearchAbortController) {
+            this.asyncSearchAbortController.abort();
+            this.asyncSearchAbortController = null;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ChipInputComponent, isStandalone: true, selector: "ui-chip-input", 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 }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, autoAdd: { classPropertyName: "autoAdd", publicName: "autoAdd", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", added: "added", removed: "removed" }, queries: [{ propertyName: "chipTemplate", first: true, predicate: ChipTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" 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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"inputValue\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}\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.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: ChipInputComponent, isStandalone: true, selector: "ui-chip-input", 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 }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, autoAdd: { classPropertyName: "autoAdd", publicName: "autoAdd", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, asyncSearch: { classPropertyName: "asyncSearch", publicName: "asyncSearch", isSignal: true, isRequired: false, transformFunction: null }, strict: { classPropertyName: "strict", publicName: "strict", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", added: "added", removed: "removed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "chipTemplate", first: true, predicate: ChipTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: OptionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    #triggerRef\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" 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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange($any($event.target).value)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      autocomplete=\"off\"\n    />\n  </div>\n\n  <div\n    #dropdownRef\n    class=\"ui-chip-input__dropdown\"\n    [class.ui-chip-input__dropdown--open]=\"isOpen()\"\n    [attr.role]=\"'listbox'\"\n    (mousedown)=\"onDropdownMousedown($event)\"\n  >\n    <div class=\"ui-chip-input__options\">\n      @if (isAsyncMode() && asyncLoading()) {\n        <div class=\"ui-chip-input__loading\">\n          <svg class=\"ui-chip-input__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 (isAsyncMode() && asyncError()) {\n        <div class=\"ui-chip-input__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 visibleSuggestions(); track option.value; let i = $index) {\n          <div\n            class=\"ui-chip-input__suggestion\"\n            [class.ui-chip-input__suggestion--focused]=\"focusedIndex() === i\"\n            [class.ui-chip-input__suggestion--disabled]=\"option.disabled\"\n            [attr.role]=\"'option'\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"addSuggestion(option)\"\n          >\n            @if (optionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.value, option: option.value, selected: false, disabled: !!option.disabled }\"\n              />\n            } @else {\n              <span class=\"ui-chip-input__suggestion-label\">{{ option.label }}</span>\n            }\n          </div>\n        }\n        @if (visibleSuggestions().length === 0 && !showCreateRow()) {\n          @if (isAsyncMode() && inputValue().trim().length < minSearchLength() && minSearchLength() > 0) {\n            <div class=\"ui-chip-input__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n          } @else {\n            <div class=\"ui-chip-input__empty\">No suggestions</div>\n          }\n        }\n      }\n    </div>\n    @if (showCreateRow()) {\n      <div\n        class=\"ui-chip-input__create\"\n        (click)=\"addChip(inputValue().trim())\"\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 \"{{ inputValue().trim() }}\"\n      </div>\n    }\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}.ui-chip-input__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-chip-input__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-chip-input__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-chip-input__suggestion{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-chip-input__suggestion:hover:not(.ui-chip-input__suggestion--disabled){background-color:var(--ui-bg-hover)}.ui-chip-input__suggestion--focused{background-color:var(--ui-bg-hover);outline:none}.ui-chip-input__suggestion--disabled{opacity:.5;cursor:not-allowed}.ui-chip-input__suggestion-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-chip-input__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:.875rem;color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-chip-input__create:hover{background-color:var(--ui-bg-hover)}.ui-chip-input__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:.875rem}.ui-chip-input__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:.875rem}.ui-chip-input__spinner{animation:ui-chip-input-spin 1s linear infinite}@keyframes ui-chip-input-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-chip-input__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:.875rem}\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: ChipInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-chip-input', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" 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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"inputValue\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}\n"] }]
-        }], 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 }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], autoAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoAdd", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], chipTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChipTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], inputRef: [{
+            args: [{ selector: 'ui-chip-input', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    #triggerRef\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" 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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange($any($event.target).value)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      autocomplete=\"off\"\n    />\n  </div>\n\n  <div\n    #dropdownRef\n    class=\"ui-chip-input__dropdown\"\n    [class.ui-chip-input__dropdown--open]=\"isOpen()\"\n    [attr.role]=\"'listbox'\"\n    (mousedown)=\"onDropdownMousedown($event)\"\n  >\n    <div class=\"ui-chip-input__options\">\n      @if (isAsyncMode() && asyncLoading()) {\n        <div class=\"ui-chip-input__loading\">\n          <svg class=\"ui-chip-input__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 (isAsyncMode() && asyncError()) {\n        <div class=\"ui-chip-input__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 visibleSuggestions(); track option.value; let i = $index) {\n          <div\n            class=\"ui-chip-input__suggestion\"\n            [class.ui-chip-input__suggestion--focused]=\"focusedIndex() === i\"\n            [class.ui-chip-input__suggestion--disabled]=\"option.disabled\"\n            [attr.role]=\"'option'\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"addSuggestion(option)\"\n          >\n            @if (optionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.value, option: option.value, selected: false, disabled: !!option.disabled }\"\n              />\n            } @else {\n              <span class=\"ui-chip-input__suggestion-label\">{{ option.label }}</span>\n            }\n          </div>\n        }\n        @if (visibleSuggestions().length === 0 && !showCreateRow()) {\n          @if (isAsyncMode() && inputValue().trim().length < minSearchLength() && minSearchLength() > 0) {\n            <div class=\"ui-chip-input__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n          } @else {\n            <div class=\"ui-chip-input__empty\">No suggestions</div>\n          }\n        }\n      }\n    </div>\n    @if (showCreateRow()) {\n      <div\n        class=\"ui-chip-input__create\"\n        (click)=\"addChip(inputValue().trim())\"\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 \"{{ inputValue().trim() }}\"\n      </div>\n    }\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}.ui-chip-input__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-chip-input__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-chip-input__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-chip-input__suggestion{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-chip-input__suggestion:hover:not(.ui-chip-input__suggestion--disabled){background-color:var(--ui-bg-hover)}.ui-chip-input__suggestion--focused{background-color:var(--ui-bg-hover);outline:none}.ui-chip-input__suggestion--disabled{opacity:.5;cursor:not-allowed}.ui-chip-input__suggestion-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-chip-input__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:.875rem;color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-chip-input__create:hover{background-color:var(--ui-bg-hover)}.ui-chip-input__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:.875rem}.ui-chip-input__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:.875rem}.ui-chip-input__spinner{animation:ui-chip-input-spin 1s linear infinite}@keyframes ui-chip-input-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-chip-input__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:.875rem}\n"] }]
+        }], 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 }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], autoAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoAdd", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], asyncSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncSearch", required: false }] }], strict: [{ type: i0.Input, args: [{ isSignal: true, alias: "strict", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], chipTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChipTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OptionTemplateDirective), { isSignal: true }] }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['triggerRef', { static: true }]
+            }], dropdownRef: [{
+                type: ViewChild,
+                args: ['dropdownRef', { static: true }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class DatepickerComponent {