@weeehaoooz/talos-ui 0.1.0

package/fesm2022/weeehaoooz-talos-ui-form-autocomplete.mjs

@@ -0,0 +1,514 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, computed, signal, effect, forwardRef, ViewChild, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgTemplateOutlet } from '@angular/common';
+
+let uniqueAutocompleteIdCounter = 0;
+class TalosAutocompleteComponent {
+    elementRef = inject((ElementRef));
+    // Signal Inputs
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    floating = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    searching = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searching" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    placeholder = input('Search...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    clearable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    size = input('sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    minChars = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minChars" }] : /* istanbul ignore next */ []));
+    displayWith = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
+    valueWith = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueWith" }] : /* istanbul ignore next */ []));
+    filterFn = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
+    highlightMatch = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightMatch" }] : /* istanbul ignore next */ []));
+    noResultsText = input('No matching results', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noResultsText" }] : /* istanbul ignore next */ []));
+    searchingText = input('Searching...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchingText" }] : /* istanbul ignore next */ []));
+    itemTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    openOnFocus = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
+    id = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    // Signal Outputs
+    searchChange = output();
+    selectionChange = output();
+    opened = output();
+    closed = output();
+    cleared = output();
+    // View Children
+    inputEl;
+    dropdownEl;
+    // Component IDs for ARIA attributes
+    autoId = `talos-autocomplete-${uniqueAutocompleteIdCounter++}`;
+    componentId = computed(() => this.id() || this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
+    inputId = computed(() => `${this.componentId()}-input`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    listboxId = computed(() => `${this.componentId()}-listbox`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    // Internal Reactive State
+    inputValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
+    selectedItem = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    isCvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCvaDisabled" }] : /* istanbul ignore next */ []));
+    isTouched = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
+    // Computed state
+    isFloatingMode = computed(() => this.floatingLabel() || this.floating(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloatingMode" }] : /* istanbul ignore next */ []));
+    isFloated = computed(() => {
+        if (!this.isFloatingMode())
+            return false;
+        return this.isOpen() || this.isFocused() || !!this.inputValue() || !!this.selectedItem();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.isCvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    effectiveSearching = computed(() => this.searching() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSearching" }] : /* istanbul ignore next */ []));
+    // Formatted and Filtered Options
+    formattedOptions = computed(() => {
+        const rawOptions = this.options() || [];
+        const query = this.inputValue().trim();
+        const minCharCount = this.minChars();
+        const customFilter = this.filterFn();
+        const isHighlight = this.highlightMatch();
+        // If query is below minChars threshold, return empty
+        if (query.length < minCharCount) {
+            return [];
+        }
+        // Filter raw items
+        let filteredList;
+        if (customFilter === null) {
+            // Bypasses internal filtering (user controls search results completely, e.g. remote API)
+            filteredList = [...rawOptions];
+        }
+        else if (typeof customFilter === 'function') {
+            filteredList = rawOptions.filter((item) => customFilter(item, query));
+        }
+        else {
+            // Default label text filtering
+            if (!query) {
+                filteredList = [...rawOptions];
+            }
+            else {
+                const lowerQuery = query.toLowerCase();
+                filteredList = rawOptions.filter((item) => {
+                    const label = this.getDisplayLabel(item);
+                    return label.toLowerCase().includes(lowerQuery);
+                });
+            }
+        }
+        // Map to formatted structure with highlight parts
+        return filteredList.map((item, index) => {
+            const label = this.getDisplayLabel(item);
+            const val = this.extractValue(item);
+            const parts = isHighlight && query ? this.computeHighlightParts(label, query) : [{ text: label, isMatch: false }];
+            return {
+                id: `${this.componentId()}-opt-${index}`,
+                label,
+                value: val,
+                raw: item,
+                highlightParts: parts
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedOptions" }] : /* istanbul ignore next */ []));
+    activeOptionId = computed(() => {
+        const index = this.focusedIndex();
+        const options = this.formattedOptions();
+        if (index >= 0 && index < options.length) {
+            return options[index].id;
+        }
+        return undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
+    // ControlValueAccessor Callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Reset focused index when formatted options change
+        effect(() => {
+            this.formattedOptions();
+            this.focusedIndex.set(-1);
+        });
+    }
+    // Label & Value Helpers
+    getDisplayLabel(item) {
+        if (item === null || item === undefined) {
+            return '';
+        }
+        if (typeof item === 'string' || typeof item === 'number') {
+            return String(item);
+        }
+        const displayWithFn = this.displayWith();
+        if (typeof displayWithFn === 'function') {
+            return displayWithFn(item);
+        }
+        if (typeof displayWithFn === 'string' && item && typeof item === 'object' && displayWithFn in item) {
+            return String(item[displayWithFn] ?? '');
+        }
+        if (item && typeof item === 'object') {
+            const record = item;
+            if ('label' in record)
+                return String(record['label'] ?? '');
+            if ('name' in record)
+                return String(record['name'] ?? '');
+            if ('title' in record)
+                return String(record['title'] ?? '');
+            if ('text' in record)
+                return String(record['text'] ?? '');
+        }
+        return String(item);
+    }
+    extractValue(item) {
+        if (item === null || item === undefined) {
+            return null;
+        }
+        const valueWithFn = this.valueWith();
+        if (typeof valueWithFn === 'function') {
+            return valueWithFn(item);
+        }
+        if (typeof valueWithFn === 'string' && item && typeof item === 'object' && valueWithFn in item) {
+            return item[valueWithFn];
+        }
+        if (item && typeof item === 'object') {
+            const record = item;
+            if ('value' in record)
+                return record['value'];
+            if ('id' in record)
+                return record['id'];
+            if ('key' in record)
+                return record['key'];
+        }
+        return item;
+    }
+    computeHighlightParts(text, query) {
+        if (!text || !query) {
+            return [{ text, isMatch: false }];
+        }
+        const parts = [];
+        const lowerText = text.toLowerCase();
+        const lowerQuery = query.toLowerCase();
+        let startIndex = 0;
+        while (startIndex < text.length) {
+            const matchIndex = lowerText.indexOf(lowerQuery, startIndex);
+            if (matchIndex === -1) {
+                parts.push({ text: text.substring(startIndex), isMatch: false });
+                break;
+            }
+            if (matchIndex > startIndex) {
+                parts.push({ text: text.substring(startIndex, matchIndex), isMatch: false });
+            }
+            const matchEnd = matchIndex + query.length;
+            parts.push({ text: text.substring(matchIndex, matchEnd), isMatch: true });
+            startIndex = matchEnd;
+        }
+        return parts;
+    }
+    // Input & Event Handlers
+    onInput(event) {
+        if (this.effectiveDisabled())
+            return;
+        const value = event.target.value;
+        this.inputValue.set(value);
+        // If typing doesn't match selected item label, clear selected reference
+        if (this.selectedItem()) {
+            const currentLabel = this.getDisplayLabel(this.selectedItem());
+            if (value !== currentLabel) {
+                this.selectedItem.set(null);
+                this.onChange(null);
+                this.selectionChange.emit(null);
+            }
+        }
+        if (!this.isOpen() && value.length >= this.minChars()) {
+            this.openDropdown();
+        }
+        this.searchChange.emit(value);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+        if (this.effectiveDisabled())
+            return;
+        if (this.openOnFocus() && this.inputValue().length >= this.minChars()) {
+            this.openDropdown();
+        }
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.markAsTouched();
+    }
+    onInputClick() {
+        if (this.effectiveDisabled())
+            return;
+        if (!this.isOpen() && this.inputValue().length >= this.minChars()) {
+            this.openDropdown();
+        }
+    }
+    onTriggerClick() {
+        if (this.effectiveDisabled())
+            return;
+        if (this.isOpen()) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+            this.inputEl?.nativeElement.focus();
+        }
+    }
+    onClear(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.effectiveDisabled())
+            return;
+        this.inputValue.set('');
+        this.selectedItem.set(null);
+        this.focusedIndex.set(-1);
+        this.onChange(null);
+        this.selectionChange.emit(null);
+        this.searchChange.emit('');
+        this.cleared.emit();
+        if (this.inputEl) {
+            this.inputEl.nativeElement.value = '';
+            this.inputEl.nativeElement.focus();
+        }
+        if (this.minChars() > 0) {
+            this.closeDropdown();
+        }
+    }
+    selectOption(opt, event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        this.selectedItem.set(opt.raw);
+        this.inputValue.set(opt.label);
+        if (this.inputEl) {
+            this.inputEl.nativeElement.value = opt.label;
+        }
+        this.onChange(opt.value);
+        this.selectionChange.emit(opt.raw);
+        this.closeDropdown();
+    }
+    onKeyDown(event) {
+        if (this.effectiveDisabled())
+            return;
+        const options = this.formattedOptions();
+        const optionCount = options.length;
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.openDropdown();
+                    this.focusedIndex.set(0);
+                }
+                else if (optionCount > 0) {
+                    const nextIndex = (this.focusedIndex() + 1) % optionCount;
+                    this.focusedIndex.set(nextIndex);
+                    this.scrollToFocusedOption(nextIndex);
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.openDropdown();
+                    this.focusedIndex.set(optionCount - 1);
+                }
+                else if (optionCount > 0) {
+                    const prevIndex = this.focusedIndex() <= 0 ? optionCount - 1 : this.focusedIndex() - 1;
+                    this.focusedIndex.set(prevIndex);
+                    this.scrollToFocusedOption(prevIndex);
+                }
+                break;
+            }
+            case 'Enter': {
+                if (this.isOpen() && this.focusedIndex() >= 0 && this.focusedIndex() < optionCount) {
+                    event.preventDefault();
+                    this.selectOption(options[this.focusedIndex()]);
+                }
+                break;
+            }
+            case 'Escape': {
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.closeDropdown();
+                }
+                break;
+            }
+            case 'Tab': {
+                if (this.isOpen()) {
+                    this.closeDropdown();
+                }
+                break;
+            }
+        }
+    }
+    scrollToFocusedOption(index) {
+        if (!this.dropdownEl)
+            return;
+        const optionEls = this.dropdownEl.nativeElement.querySelectorAll('.autocomplete-option');
+        if (optionEls[index] && typeof optionEls[index].scrollIntoView === 'function') {
+            optionEls[index].scrollIntoView({ block: 'nearest' });
+        }
+    }
+    openDropdown() {
+        if (this.effectiveDisabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.opened.emit();
+    }
+    closeDropdown() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.focusedIndex.set(-1);
+        this.closed.emit();
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        if (!this.elementRef.nativeElement.contains(target)) {
+            this.closeDropdown();
+        }
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    // ControlValueAccessor Implementation
+    writeValue(value) {
+        if (value === null || value === undefined || value === '') {
+            this.selectedItem.set(null);
+            this.inputValue.set('');
+            if (this.inputEl) {
+                this.inputEl.nativeElement.value = '';
+            }
+            return;
+        }
+        // Try matching among options
+        const rawOptions = this.options() || [];
+        const matched = rawOptions.find((opt) => {
+            const extracted = this.extractValue(opt);
+            return extracted === value || opt === value;
+        });
+        if (matched !== undefined) {
+            this.selectedItem.set(matched);
+            const label = this.getDisplayLabel(matched);
+            this.inputValue.set(label);
+            if (this.inputEl) {
+                this.inputEl.nativeElement.value = label;
+            }
+        }
+        else {
+            // If primitive string value provided directly
+            if (typeof value === 'string' || typeof value === 'number') {
+                this.selectedItem.set(value);
+                this.inputValue.set(String(value));
+                if (this.inputEl) {
+                    this.inputEl.nativeElement.value = String(value);
+                }
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isCvaDisabled.set(isDisabled);
+        if (isDisabled) {
+            this.closeDropdown();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosAutocompleteComponent, isStandalone: true, selector: "talos-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, searching: { classPropertyName: "searching", publicName: "searching", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, valueWith: { classPropertyName: "valueWith", publicName: "valueWith", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, highlightMatch: { classPropertyName: "highlightMatch", publicName: "highlightMatch", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, searchingText: { classPropertyName: "searchingText", publicName: "searchingText", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange", selectionChange: "selectionChange", opened: "opened", closed: "closed", cleared: "cleared" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class.is-open": "isOpen()", "class.is-disabled": "effectiveDisabled()", "class.is-searching": "effectiveSearching()", "class.has-label": "!!label()", "class.is-floating": "isFloatingMode()", "class.is-floated": "isFloated()", "class.autocomplete-sm": "size() === \"sm\"", "class.autocomplete-md": "size() === \"md\"", "class.autocomplete-lg": "size() === \"lg\"" }, classAttribute: "talos-autocomplete-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TalosAutocompleteComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }, { propertyName: "dropdownEl", first: true, predicate: ["dropdownEl"], descendants: true }], ngImport: i0, template: "@if (label() && !isFloatingMode()) {\n  <label class=\"talos-field-label\" [attr.for]=\"inputId()\" (click)=\"onTriggerClick()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"required-star\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"autocomplete-wrapper\" [class.has-floating-label]=\"isFloatingMode()\">\n  <!-- Autocomplete Input Container -->\n  <div class=\"autocomplete-control\" [class.is-focused]=\"isOpen()\">\n    <!-- Leading Search Icon -->\n    <span class=\"autocomplete-icon leading-icon\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n      </svg>\n    </span>\n\n    <!-- Editable Input Field -->\n    <input\n      #inputEl\n      type=\"text\"\n      class=\"autocomplete-input\"\n      [id]=\"inputId()\"\n      [placeholder]=\"isFloatingMode() && !isFloated() ? '' : placeholder()\"\n      [value]=\"inputValue()\"\n      [disabled]=\"effectiveDisabled()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeyDown($event)\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-disabled]=\"effectiveDisabled()\"\n      autocomplete=\"off\"\n      autocapitalize=\"off\"\n      spellcheck=\"false\"\n    />\n\n    @if (label() && isFloatingMode()) {\n      <label\n        class=\"talos-floating-label\"\n        [class.is-floated]=\"isFloated()\"\n        [attr.for]=\"inputId()\"\n        (click)=\"onTriggerClick()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"required-star\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n  <!-- Trailing Actions Container -->\n  <div class=\"autocomplete-actions\">\n    <!-- Searching Spinner -->\n    @if (effectiveSearching()) {\n      <span class=\"autocomplete-spinner\" aria-label=\"Searching...\" title=\"Searching...\">\n        <svg class=\"spinner-svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <circle class=\"spinner-track\" cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2.5\" opacity=\"0.25\"></circle>\n          <path class=\"spinner-head\" d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </span>\n    }\n\n    <!-- Clear Selection / Text Button -->\n    @if (clearable() && inputValue() && !effectiveDisabled() && !effectiveSearching()) {\n      <button\n        type=\"button\"\n        class=\"autocomplete-clear-btn\"\n        aria-label=\"Clear search\"\n        title=\"Clear search\"\n        (click)=\"onClear($event)\"\n      >\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\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\n    <!-- Dropdown Arrow Indicator -->\n    <button\n      type=\"button\"\n      class=\"autocomplete-arrow-btn\"\n      [class.is-open]=\"isOpen()\"\n      [disabled]=\"effectiveDisabled()\"\n      aria-label=\"Toggle options\"\n      tabindex=\"-1\"\n      (click)=\"onTriggerClick()\"\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </button>\n  </div>\n</div>\n\n<!-- Dropdown Panel -->\n@if (isOpen()) {\n  <div #dropdownEl class=\"autocomplete-dropdown-panel\" [id]=\"listboxId()\" role=\"listbox\">\n    <!-- Searching State inside Dropdown -->\n    @if (effectiveSearching()) {\n      <div class=\"autocomplete-searching-state\" aria-live=\"polite\">\n        <span class=\"dropdown-spinner\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <circle class=\"spinner-track\" cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2.5\" opacity=\"0.25\"></circle>\n            <path class=\"spinner-head\" d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"></path>\n          </svg>\n        </span>\n        <span class=\"searching-text\">{{ searchingText() }}</span>\n      </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"autocomplete-options-list\">\n      @for (opt of formattedOptions(); track opt.id; let idx = $index) {\n        <div\n          class=\"autocomplete-option\"\n          [id]=\"opt.id\"\n          role=\"option\"\n          [attr.aria-selected]=\"selectedItem() === opt.raw\"\n          [class.is-focused]=\"focusedIndex() === idx\"\n          [class.is-selected]=\"selectedItem() === opt.raw\"\n          (mousedown)=\"selectOption(opt, $event)\"\n        >\n          @if (itemTemplate()) {\n            <ng-container\n              *ngTemplateOutlet=\"itemTemplate()!; context: {\n                $implicit: opt.raw,\n                index: idx,\n                selected: selectedItem() === opt.raw,\n                active: focusedIndex() === idx,\n                highlightParts: opt.highlightParts\n              }\"\n            ></ng-container>\n          } @else {\n            <div class=\"option-default-content\">\n              @if (highlightMatch() && opt.highlightParts.length > 0) {\n                <span class=\"option-label\">\n                  @for (part of opt.highlightParts; track $index) {\n                    @if (part.isMatch) {\n                      <mark class=\"highlight-match\">{{ part.text }}</mark>\n                    } @else {\n                      <span>{{ part.text }}</span>\n                    }\n                  }\n                </span>\n              } @else {\n                <span class=\"option-label\">{{ opt.label }}</span>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      <!-- No Results State -->\n      @if (!effectiveSearching() && formattedOptions().length === 0) {\n        <div class=\"autocomplete-no-options\" role=\"status\">\n          <svg class=\"no-options-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"></line>\n          </svg>\n          <span>{{ noResultsText() }}</span>\n        </div>\n      }\n    </div>\n  </div>\n}\n</div>\n", styles: [":host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--auto-bg: var(--talos-card-bg, var(--card-bg, #ffffff));--auto-border: var(--talos-border-color, var(--border-color, #cbd5e1));--auto-border-hover: var(--talos-border-hover, var(--border-hover, #64748b));--auto-border-focus: var(--talos-border-focus, var(--border-focus, #2563eb));--auto-shadow-focus: var(--talos-focus-ring, var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, .15)));--auto-color: var(--talos-text-color, var(--text-color, #0f172a));--auto-muted: var(--talos-text-muted, var(--text-muted, #64748b));--auto-placeholder-color: #94a3b8;--auto-radius: var(--talos-border-radius, var(--border-radius, .375rem));--auto-primary: var(--talos-primary-color, var(--primary-color, #2563eb));--auto-primary-light: var(--talos-primary-light, var(--primary-light, #eff6ff));--auto-primary-light-hover: var(--talos-primary-light-hover, var(--primary-light-hover, #dbeafe));--auto-height: var(--talos-control-height, var(--control-height, 2.25rem));--auto-padding-x: var(--talos-control-padding-x, var(--control-padding-x, .625rem));--auto-font-size: var(--talos-control-font-size, var(--control-font-size, .8125rem));--auto-icon-size: 1rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem);--auto-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, var(--card-bg, #ffffff)));--auto-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--auto-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04))}:host.autocomplete-sm{--auto-height: 2rem;--auto-padding-x: .5rem;--auto-font-size: .8125rem;--auto-radius: .25rem;--auto-icon-size: .875rem;--talos-affix-btn-size: var(--talos-affix-btn-size-sm, 1.375rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-sm, .8125rem)}:host.autocomplete-md{--auto-height: 2.25rem;--auto-padding-x: .625rem;--auto-font-size: .8125rem;--auto-radius: .375rem;--auto-icon-size: 1rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem)}:host.autocomplete-lg{--auto-height: 2.625rem;--auto-padding-x: .75rem;--auto-font-size: .875rem;--auto-radius: .375rem;--auto-icon-size: 1.125rem;--talos-affix-btn-size: var(--talos-affix-btn-size-lg, 1.75rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-lg, 1rem)}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .autocomplete-control{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, var(--bg-color, #f8fafc)));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}:host.is-disabled .autocomplete-input{color:var(--talos-input-disabled-color, #94a3b8);cursor:not-allowed}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.autocomplete-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label{position:absolute;left:calc(var(--auto-padding-x, .625rem) + var(--auto-icon-size, 1rem) + .5rem);top:calc(var(--auto-height) / 2);transform:translateY(-50%);font-size:var(--auto-font-size, .8125rem);font-weight:500;color:var(--auto-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--auto-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1),left .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated{top:0;left:var(--auto-padding-x, .625rem);transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--auto-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-focused) .talos-floating-label.is-floated{color:var(--auto-primary, #2563eb)}.autocomplete-control{display:flex;align-items:center;position:relative;width:100%;height:var(--auto-height);min-height:var(--auto-height);padding:0 var(--auto-padding-x);background-color:var(--auto-bg);border:1px solid var(--auto-border);border-radius:var(--auto-radius);transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;box-sizing:border-box;gap:.375rem}.autocomplete-control:hover:not(.is-disabled){border-color:var(--auto-border-hover)}.autocomplete-control:focus-within,.autocomplete-control.is-focused{border-color:var(--auto-border-focus);box-shadow:var(--auto-shadow-focus)}:host(.is-open) .autocomplete-control{border-color:var(--auto-border-focus);box-shadow:var(--auto-shadow-focus)}.autocomplete-icon.leading-icon{display:flex;align-items:center;justify-content:center;color:var(--auto-muted);flex-shrink:0;pointer-events:none}.autocomplete-icon.leading-icon svg{width:var(--auto-icon-size);height:var(--auto-icon-size)}.autocomplete-input{flex:1;min-width:0;height:100%;border:none;background:transparent;padding:0;margin:0;font-family:inherit;font-size:var(--auto-font-size);color:var(--auto-color);line-height:1.25rem;outline:none}.autocomplete-input::placeholder{color:var(--auto-placeholder-color);opacity:1}.autocomplete-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.autocomplete-spinner{display:flex;align-items:center;justify-content:center;color:var(--auto-primary)}.autocomplete-spinner .spinner-svg{width:var(--auto-icon-size);height:var(--auto-icon-size);animation:talos-spinner-rotate .75s linear infinite}.autocomplete-spinner .spinner-track{color:var(--auto-muted)}.autocomplete-spinner .spinner-head{color:var(--auto-primary)}.autocomplete-clear-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem);height:var(--talos-affix-btn-size, 1.5rem);min-width:var(--talos-affix-btn-size, 1.5rem);padding:0;background:transparent;border:none;outline:none;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));color:var(--talos-affix-btn-color, var(--talos-text-muted, #94a3b8));cursor:pointer;flex-shrink:0;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.autocomplete-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.autocomplete-clear-btn:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.autocomplete-clear-btn svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.autocomplete-arrow-btn{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;padding:0;border:none;background:transparent;color:var(--talos-text-muted, #64748b);cursor:pointer;outline:none;transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s ease}.autocomplete-arrow-btn svg{width:.875rem;height:.875rem}.autocomplete-arrow-btn.is-open{transform:rotate(180deg);color:var(--auto-primary)}.autocomplete-arrow-btn:hover:not(:disabled){color:var(--auto-color)}.autocomplete-dropdown-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background-color:var(--auto-dropdown-bg);border:1px solid var(--auto-dropdown-border);border-radius:var(--auto-radius);box-shadow:var(--auto-dropdown-shadow);padding:.25rem 0;box-sizing:border-box;max-height:280px;overflow-y:auto;animation:talos-dropdown-fade .15s cubic-bezier(0,0,.2,1)}.autocomplete-dropdown-panel::-webkit-scrollbar{width:5px}.autocomplete-dropdown-panel::-webkit-scrollbar-track{background:transparent}.autocomplete-dropdown-panel::-webkit-scrollbar-thumb{background:var(--talos-border-color, #cbd5e1);border-radius:4px}.autocomplete-dropdown-panel::-webkit-scrollbar-thumb:hover{background:var(--talos-border-hover, #94a3b8)}.autocomplete-searching-state{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;font-size:var(--auto-font-size);color:var(--auto-muted);background-color:var(--auto-primary-light);border-bottom:1px solid var(--talos-border-color, #dbeafe);margin-bottom:.25rem}.autocomplete-searching-state .dropdown-spinner{display:flex;align-items:center;color:var(--auto-primary)}.autocomplete-searching-state .dropdown-spinner svg{width:.9375rem;height:.9375rem;animation:talos-spinner-rotate .75s linear infinite}.autocomplete-searching-state .searching-text{font-weight:500;color:var(--auto-primary)}.autocomplete-options-list{display:flex;flex-direction:column}.autocomplete-option{display:flex;align-items:center;padding:.5rem var(--auto-padding-x);font-size:var(--auto-font-size);color:var(--auto-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;line-height:1.25rem}.autocomplete-option:hover,.autocomplete-option.is-focused{background-color:var(--auto-primary-light);color:var(--auto-primary)}.autocomplete-option.is-selected{background-color:var(--auto-primary-light-hover);color:var(--auto-primary);font-weight:600}.autocomplete-option .option-default-content{display:flex;align-items:center;width:100%}.autocomplete-option .option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.autocomplete-option mark.highlight-match{background-color:#2563eb24;color:var(--auto-primary);font-weight:700;padding:0 .125rem;border-radius:.125rem}.autocomplete-no-options{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1.25rem .875rem;font-size:var(--auto-font-size);color:var(--auto-muted);text-align:center}.autocomplete-no-options .no-options-icon{width:1rem;height:1rem;opacity:.7}@keyframes talos-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes talos-dropdown-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-autocomplete', imports: [NgTemplateOutlet], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TalosAutocompleteComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        'class': 'talos-autocomplete-host',
+                        '[class.is-open]': 'isOpen()',
+                        '[class.is-disabled]': 'effectiveDisabled()',
+                        '[class.is-searching]': 'effectiveSearching()',
+                        '[class.has-label]': '!!label()',
+                        '[class.is-floating]': 'isFloatingMode()',
+                        '[class.is-floated]': 'isFloated()',
+                        '[class.autocomplete-sm]': 'size() === "sm"',
+                        '[class.autocomplete-md]': 'size() === "md"',
+                        '[class.autocomplete-lg]': 'size() === "lg"',
+                        '(document:click)': 'onDocumentClick($event)'
+                    }, template: "@if (label() && !isFloatingMode()) {\n  <label class=\"talos-field-label\" [attr.for]=\"inputId()\" (click)=\"onTriggerClick()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"required-star\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"autocomplete-wrapper\" [class.has-floating-label]=\"isFloatingMode()\">\n  <!-- Autocomplete Input Container -->\n  <div class=\"autocomplete-control\" [class.is-focused]=\"isOpen()\">\n    <!-- Leading Search Icon -->\n    <span class=\"autocomplete-icon leading-icon\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n      </svg>\n    </span>\n\n    <!-- Editable Input Field -->\n    <input\n      #inputEl\n      type=\"text\"\n      class=\"autocomplete-input\"\n      [id]=\"inputId()\"\n      [placeholder]=\"isFloatingMode() && !isFloated() ? '' : placeholder()\"\n      [value]=\"inputValue()\"\n      [disabled]=\"effectiveDisabled()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeyDown($event)\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-disabled]=\"effectiveDisabled()\"\n      autocomplete=\"off\"\n      autocapitalize=\"off\"\n      spellcheck=\"false\"\n    />\n\n    @if (label() && isFloatingMode()) {\n      <label\n        class=\"talos-floating-label\"\n        [class.is-floated]=\"isFloated()\"\n        [attr.for]=\"inputId()\"\n        (click)=\"onTriggerClick()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"required-star\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n  <!-- Trailing Actions Container -->\n  <div class=\"autocomplete-actions\">\n    <!-- Searching Spinner -->\n    @if (effectiveSearching()) {\n      <span class=\"autocomplete-spinner\" aria-label=\"Searching...\" title=\"Searching...\">\n        <svg class=\"spinner-svg\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <circle class=\"spinner-track\" cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2.5\" opacity=\"0.25\"></circle>\n          <path class=\"spinner-head\" d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </span>\n    }\n\n    <!-- Clear Selection / Text Button -->\n    @if (clearable() && inputValue() && !effectiveDisabled() && !effectiveSearching()) {\n      <button\n        type=\"button\"\n        class=\"autocomplete-clear-btn\"\n        aria-label=\"Clear search\"\n        title=\"Clear search\"\n        (click)=\"onClear($event)\"\n      >\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\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\n    <!-- Dropdown Arrow Indicator -->\n    <button\n      type=\"button\"\n      class=\"autocomplete-arrow-btn\"\n      [class.is-open]=\"isOpen()\"\n      [disabled]=\"effectiveDisabled()\"\n      aria-label=\"Toggle options\"\n      tabindex=\"-1\"\n      (click)=\"onTriggerClick()\"\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </button>\n  </div>\n</div>\n\n<!-- Dropdown Panel -->\n@if (isOpen()) {\n  <div #dropdownEl class=\"autocomplete-dropdown-panel\" [id]=\"listboxId()\" role=\"listbox\">\n    <!-- Searching State inside Dropdown -->\n    @if (effectiveSearching()) {\n      <div class=\"autocomplete-searching-state\" aria-live=\"polite\">\n        <span class=\"dropdown-spinner\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <circle class=\"spinner-track\" cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2.5\" opacity=\"0.25\"></circle>\n            <path class=\"spinner-head\" d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"></path>\n          </svg>\n        </span>\n        <span class=\"searching-text\">{{ searchingText() }}</span>\n      </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"autocomplete-options-list\">\n      @for (opt of formattedOptions(); track opt.id; let idx = $index) {\n        <div\n          class=\"autocomplete-option\"\n          [id]=\"opt.id\"\n          role=\"option\"\n          [attr.aria-selected]=\"selectedItem() === opt.raw\"\n          [class.is-focused]=\"focusedIndex() === idx\"\n          [class.is-selected]=\"selectedItem() === opt.raw\"\n          (mousedown)=\"selectOption(opt, $event)\"\n        >\n          @if (itemTemplate()) {\n            <ng-container\n              *ngTemplateOutlet=\"itemTemplate()!; context: {\n                $implicit: opt.raw,\n                index: idx,\n                selected: selectedItem() === opt.raw,\n                active: focusedIndex() === idx,\n                highlightParts: opt.highlightParts\n              }\"\n            ></ng-container>\n          } @else {\n            <div class=\"option-default-content\">\n              @if (highlightMatch() && opt.highlightParts.length > 0) {\n                <span class=\"option-label\">\n                  @for (part of opt.highlightParts; track $index) {\n                    @if (part.isMatch) {\n                      <mark class=\"highlight-match\">{{ part.text }}</mark>\n                    } @else {\n                      <span>{{ part.text }}</span>\n                    }\n                  }\n                </span>\n              } @else {\n                <span class=\"option-label\">{{ opt.label }}</span>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      <!-- No Results State -->\n      @if (!effectiveSearching() && formattedOptions().length === 0) {\n        <div class=\"autocomplete-no-options\" role=\"status\">\n          <svg class=\"no-options-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"></line>\n          </svg>\n          <span>{{ noResultsText() }}</span>\n        </div>\n      }\n    </div>\n  </div>\n}\n</div>\n", styles: [":host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--auto-bg: var(--talos-card-bg, var(--card-bg, #ffffff));--auto-border: var(--talos-border-color, var(--border-color, #cbd5e1));--auto-border-hover: var(--talos-border-hover, var(--border-hover, #64748b));--auto-border-focus: var(--talos-border-focus, var(--border-focus, #2563eb));--auto-shadow-focus: var(--talos-focus-ring, var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, .15)));--auto-color: var(--talos-text-color, var(--text-color, #0f172a));--auto-muted: var(--talos-text-muted, var(--text-muted, #64748b));--auto-placeholder-color: #94a3b8;--auto-radius: var(--talos-border-radius, var(--border-radius, .375rem));--auto-primary: var(--talos-primary-color, var(--primary-color, #2563eb));--auto-primary-light: var(--talos-primary-light, var(--primary-light, #eff6ff));--auto-primary-light-hover: var(--talos-primary-light-hover, var(--primary-light-hover, #dbeafe));--auto-height: var(--talos-control-height, var(--control-height, 2.25rem));--auto-padding-x: var(--talos-control-padding-x, var(--control-padding-x, .625rem));--auto-font-size: var(--talos-control-font-size, var(--control-font-size, .8125rem));--auto-icon-size: 1rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem);--auto-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, var(--card-bg, #ffffff)));--auto-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--auto-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04))}:host.autocomplete-sm{--auto-height: 2rem;--auto-padding-x: .5rem;--auto-font-size: .8125rem;--auto-radius: .25rem;--auto-icon-size: .875rem;--talos-affix-btn-size: var(--talos-affix-btn-size-sm, 1.375rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-sm, .8125rem)}:host.autocomplete-md{--auto-height: 2.25rem;--auto-padding-x: .625rem;--auto-font-size: .8125rem;--auto-radius: .375rem;--auto-icon-size: 1rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem)}:host.autocomplete-lg{--auto-height: 2.625rem;--auto-padding-x: .75rem;--auto-font-size: .875rem;--auto-radius: .375rem;--auto-icon-size: 1.125rem;--talos-affix-btn-size: var(--talos-affix-btn-size-lg, 1.75rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-lg, 1rem)}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .autocomplete-control{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, var(--bg-color, #f8fafc)));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}:host.is-disabled .autocomplete-input{color:var(--talos-input-disabled-color, #94a3b8);cursor:not-allowed}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.autocomplete-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label{position:absolute;left:calc(var(--auto-padding-x, .625rem) + var(--auto-icon-size, 1rem) + .5rem);top:calc(var(--auto-height) / 2);transform:translateY(-50%);font-size:var(--auto-font-size, .8125rem);font-weight:500;color:var(--auto-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--auto-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1),left .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated{top:0;left:var(--auto-padding-x, .625rem);transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--auto-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-focused) .talos-floating-label.is-floated{color:var(--auto-primary, #2563eb)}.autocomplete-control{display:flex;align-items:center;position:relative;width:100%;height:var(--auto-height);min-height:var(--auto-height);padding:0 var(--auto-padding-x);background-color:var(--auto-bg);border:1px solid var(--auto-border);border-radius:var(--auto-radius);transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;box-sizing:border-box;gap:.375rem}.autocomplete-control:hover:not(.is-disabled){border-color:var(--auto-border-hover)}.autocomplete-control:focus-within,.autocomplete-control.is-focused{border-color:var(--auto-border-focus);box-shadow:var(--auto-shadow-focus)}:host(.is-open) .autocomplete-control{border-color:var(--auto-border-focus);box-shadow:var(--auto-shadow-focus)}.autocomplete-icon.leading-icon{display:flex;align-items:center;justify-content:center;color:var(--auto-muted);flex-shrink:0;pointer-events:none}.autocomplete-icon.leading-icon svg{width:var(--auto-icon-size);height:var(--auto-icon-size)}.autocomplete-input{flex:1;min-width:0;height:100%;border:none;background:transparent;padding:0;margin:0;font-family:inherit;font-size:var(--auto-font-size);color:var(--auto-color);line-height:1.25rem;outline:none}.autocomplete-input::placeholder{color:var(--auto-placeholder-color);opacity:1}.autocomplete-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.autocomplete-spinner{display:flex;align-items:center;justify-content:center;color:var(--auto-primary)}.autocomplete-spinner .spinner-svg{width:var(--auto-icon-size);height:var(--auto-icon-size);animation:talos-spinner-rotate .75s linear infinite}.autocomplete-spinner .spinner-track{color:var(--auto-muted)}.autocomplete-spinner .spinner-head{color:var(--auto-primary)}.autocomplete-clear-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem);height:var(--talos-affix-btn-size, 1.5rem);min-width:var(--talos-affix-btn-size, 1.5rem);padding:0;background:transparent;border:none;outline:none;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));color:var(--talos-affix-btn-color, var(--talos-text-muted, #94a3b8));cursor:pointer;flex-shrink:0;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.autocomplete-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.autocomplete-clear-btn:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.autocomplete-clear-btn svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.autocomplete-arrow-btn{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;padding:0;border:none;background:transparent;color:var(--talos-text-muted, #64748b);cursor:pointer;outline:none;transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s ease}.autocomplete-arrow-btn svg{width:.875rem;height:.875rem}.autocomplete-arrow-btn.is-open{transform:rotate(180deg);color:var(--auto-primary)}.autocomplete-arrow-btn:hover:not(:disabled){color:var(--auto-color)}.autocomplete-dropdown-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background-color:var(--auto-dropdown-bg);border:1px solid var(--auto-dropdown-border);border-radius:var(--auto-radius);box-shadow:var(--auto-dropdown-shadow);padding:.25rem 0;box-sizing:border-box;max-height:280px;overflow-y:auto;animation:talos-dropdown-fade .15s cubic-bezier(0,0,.2,1)}.autocomplete-dropdown-panel::-webkit-scrollbar{width:5px}.autocomplete-dropdown-panel::-webkit-scrollbar-track{background:transparent}.autocomplete-dropdown-panel::-webkit-scrollbar-thumb{background:var(--talos-border-color, #cbd5e1);border-radius:4px}.autocomplete-dropdown-panel::-webkit-scrollbar-thumb:hover{background:var(--talos-border-hover, #94a3b8)}.autocomplete-searching-state{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;font-size:var(--auto-font-size);color:var(--auto-muted);background-color:var(--auto-primary-light);border-bottom:1px solid var(--talos-border-color, #dbeafe);margin-bottom:.25rem}.autocomplete-searching-state .dropdown-spinner{display:flex;align-items:center;color:var(--auto-primary)}.autocomplete-searching-state .dropdown-spinner svg{width:.9375rem;height:.9375rem;animation:talos-spinner-rotate .75s linear infinite}.autocomplete-searching-state .searching-text{font-weight:500;color:var(--auto-primary)}.autocomplete-options-list{display:flex;flex-direction:column}.autocomplete-option{display:flex;align-items:center;padding:.5rem var(--auto-padding-x);font-size:var(--auto-font-size);color:var(--auto-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;line-height:1.25rem}.autocomplete-option:hover,.autocomplete-option.is-focused{background-color:var(--auto-primary-light);color:var(--auto-primary)}.autocomplete-option.is-selected{background-color:var(--auto-primary-light-hover);color:var(--auto-primary);font-weight:600}.autocomplete-option .option-default-content{display:flex;align-items:center;width:100%}.autocomplete-option .option-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.autocomplete-option mark.highlight-match{background-color:#2563eb24;color:var(--auto-primary);font-weight:700;padding:0 .125rem;border-radius:.125rem}.autocomplete-no-options{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1.25rem .875rem;font-size:var(--auto-font-size);color:var(--auto-muted);text-align:center}.autocomplete-no-options .no-options-icon{width:1rem;height:1rem;opacity:.7}@keyframes talos-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes talos-dropdown-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], searching: [{ type: i0.Input, args: [{ isSignal: true, alias: "searching", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], valueWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueWith", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], highlightMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightMatch", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], searchingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchingText", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], inputEl: [{
+                type: ViewChild,
+                args: ['inputEl']
+            }], dropdownEl: [{
+                type: ViewChild,
+                args: ['dropdownEl']
+            }] } });
+
+/**
+ * Convenience NgModule wrapping the standalone TalosAutocompleteComponent.
+ */
+class TalosAutocompleteModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosAutocompleteModule, imports: [TalosAutocompleteComponent], exports: [TalosAutocompleteComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAutocompleteModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosAutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosAutocompleteComponent],
+                    exports: [TalosAutocompleteComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TalosAutocompleteComponent, TalosAutocompleteModule };
+//# sourceMappingURL=weeehaoooz-talos-ui-form-autocomplete.mjs.map