@weeehaoooz/talos-ui 0.1.0

package/fesm2022/weeehaoooz-talos-ui-form-select-input.mjs

@@ -0,0 +1,896 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, signal, Component, contentChildren, computed, effect, forwardRef, ViewChild, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+export * from '@weeehaoooz/talos-ui/form/affix';
+
+class OptionComponent {
+    elementRef = inject((ElementRef));
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    selected = output();
+    isSelected = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
+    isActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    hidden = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    displayText() {
+        const customLabel = this.label();
+        if (customLabel !== undefined && customLabel !== null && customLabel !== '') {
+            return customLabel;
+        }
+        const nativeText = this.elementRef.nativeElement.querySelector('.option-label-text')?.textContent?.trim()
+            ?? this.elementRef.nativeElement.textContent?.trim();
+        if (nativeText) {
+            return nativeText;
+        }
+        const val = this.value();
+        return val !== null && val !== undefined ? String(val) : '';
+    }
+    onClick(event) {
+        event.stopPropagation();
+        if (this.disabled() || this.hidden()) {
+            return;
+        }
+        this.selected.emit(this);
+    }
+    scrollIntoViewIfNeeded() {
+        if (typeof this.elementRef.nativeElement.scrollIntoView === 'function') {
+            this.elementRef.nativeElement.scrollIntoView({
+                block: 'nearest',
+                behavior: 'smooth'
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: OptionComponent, isStandalone: true, selector: "talos-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-selected": "isSelected()", "attr.aria-disabled": "disabled()", "attr.tabindex": "-1", "class.talos-option": "true", "class.app-option": "true", "class.is-selected": "isSelected()", "class.is-active": "isActive()", "class.is-disabled": "disabled()", "class.is-hidden": "hidden()" } }, ngImport: i0, template: "<span class=\"option-label-text\">\n  <ng-content>{{ label() }}</ng-content>\n</span>\n@if (isSelected()) {\n  <svg class=\"option-check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\">\n    <polyline points=\"20 6 9 17 4 12\"></polyline>\n  </svg>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:.375rem .625rem;font-size:.8125rem;font-weight:400;line-height:1.35;color:var(--select-option-color, var(--talos-text-color, var(--text-color, #1e293b)));background-color:var(--select-option-bg, transparent);border-radius:var(--talos-border-radius, var(--border-radius, .25rem));cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin:.0625rem 0;box-sizing:border-box}:host:hover:not(.is-disabled){background-color:var(--select-option-hover-bg, var(--talos-primary-light, #f1f5f9));color:var(--select-option-hover-color, var(--talos-text-color, #0f172a))}:host.is-active:not(.is-disabled){background-color:var(--select-option-active-bg, var(--talos-primary-light-hover, #e2e8f0));color:var(--select-option-active-color, var(--talos-text-color, #0f172a));outline:none}:host.is-selected{font-weight:600;color:var(--select-option-selected-color, var(--talos-primary-color, var(--primary-color, #2563eb)));background-color:var(--select-option-selected-bg, var(--talos-primary-light, #eff6ff))}:host.is-selected:hover:not(.is-disabled){background-color:var(--select-option-selected-hover-bg, var(--talos-primary-light-hover, #dbeafe))}:host.is-disabled{opacity:.45;cursor:not-allowed}:host.is-hidden{display:none!important}.option-label-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-check-icon{width:.875rem;height:.875rem;margin-left:.375rem;flex-shrink:0;stroke:currentColor}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-option', host: {
+                        'role': 'option',
+                        '[attr.aria-selected]': 'isSelected()',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[attr.tabindex]': '-1',
+                        '[class.talos-option]': 'true',
+                        '[class.app-option]': 'true',
+                        '[class.is-selected]': 'isSelected()',
+                        '[class.is-active]': 'isActive()',
+                        '[class.is-disabled]': 'disabled()',
+                        '[class.is-hidden]': 'hidden()',
+                        '(click)': 'onClick($event)'
+                    }, template: "<span class=\"option-label-text\">\n  <ng-content>{{ label() }}</ng-content>\n</span>\n@if (isSelected()) {\n  <svg class=\"option-check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\">\n    <polyline points=\"20 6 9 17 4 12\"></polyline>\n  </svg>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:.375rem .625rem;font-size:.8125rem;font-weight:400;line-height:1.35;color:var(--select-option-color, var(--talos-text-color, var(--text-color, #1e293b)));background-color:var(--select-option-bg, transparent);border-radius:var(--talos-border-radius, var(--border-radius, .25rem));cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin:.0625rem 0;box-sizing:border-box}:host:hover:not(.is-disabled){background-color:var(--select-option-hover-bg, var(--talos-primary-light, #f1f5f9));color:var(--select-option-hover-color, var(--talos-text-color, #0f172a))}:host.is-active:not(.is-disabled){background-color:var(--select-option-active-bg, var(--talos-primary-light-hover, #e2e8f0));color:var(--select-option-active-color, var(--talos-text-color, #0f172a));outline:none}:host.is-selected{font-weight:600;color:var(--select-option-selected-color, var(--talos-primary-color, var(--primary-color, #2563eb)));background-color:var(--select-option-selected-bg, var(--talos-primary-light, #eff6ff))}:host.is-selected:hover:not(.is-disabled){background-color:var(--select-option-selected-hover-bg, var(--talos-primary-light-hover, #dbeafe))}:host.is-disabled{opacity:.45;cursor:not-allowed}:host.is-hidden{display:none!important}.option-label-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-check-icon{width:.875rem;height:.875rem;margin-left:.375rem;flex-shrink:0;stroke:currentColor}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+
+class OptionGroupComponent {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    options = contentChildren(OptionComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: OptionGroupComponent, isStandalone: true, selector: "talos-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label()", "class.talos-option-group": "true", "class.app-option-group": "true", "class.is-disabled": "disabled()" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], ngImport: i0, template: "<div class=\"option-group-label\" aria-hidden=\"true\">\n  {{ label() }}\n</div>\n<div class=\"option-group-content\">\n  <ng-content select=\"talos-option, app-option\"></ng-content>\n</div>\n", styles: [":host{display:block;padding:.125rem 0}:host.is-disabled{opacity:.5;pointer-events:none}.option-group-label{padding:.375rem .625rem .125rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--select-group-label-color, var(--talos-text-muted, #64748b));-webkit-user-select:none;user-select:none}.option-group-content{padding-left:.125rem}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-option-group', host: {
+                        'role': 'group',
+                        '[attr.aria-label]': 'label()',
+                        '[class.talos-option-group]': 'true',
+                        '[class.app-option-group]': 'true',
+                        '[class.is-disabled]': 'disabled()'
+                    }, template: "<div class=\"option-group-label\" aria-hidden=\"true\">\n  {{ label() }}\n</div>\n<div class=\"option-group-content\">\n  <ng-content select=\"talos-option, app-option\"></ng-content>\n</div>\n", styles: [":host{display:block;padding:.125rem 0}:host.is-disabled{opacity:.5;pointer-events:none}.option-group-label{padding:.375rem .625rem .125rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--select-group-label-color, var(--talos-text-muted, #64748b));-webkit-user-select:none;user-select:none}.option-group-content{padding-left:.125rem}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }] } });
+
+let uniqueIdCounter = 0;
+class SelectInputComponent {
+    elementRef = inject((ElementRef));
+    // Signal Inputs
+    placeholder = input('Select an option', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* 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 */ []));
+    searchable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search options...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    clearable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    size = input('sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    // Signal Outputs
+    selectionChange = output();
+    opened = output();
+    closed = output();
+    searchChange = output();
+    // Content Queries
+    options = contentChildren(OptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
+    optionGroups = contentChildren(OptionGroupComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionGroups" }] : /* istanbul ignore next */ []));
+    // View Children
+    searchInputEl;
+    triggerEl;
+    // Component ID for ARIA attributes
+    componentId = `talos-select-${uniqueIdCounter++}`;
+    listboxId = `${this.componentId}-listbox`;
+    // Internal Reactive State
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    searchValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isTouched = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
+    hasPrefix = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
+    hasSuffix = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* 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.selectedOption() !== null || (this.searchable() && !!this.searchValue());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.isDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    selectedOption = computed(() => {
+        const currentVal = this.value();
+        if (currentVal === null || currentVal === undefined) {
+            return null;
+        }
+        return this.options().find((opt) => opt.value() === currentVal) ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => {
+        const selected = this.selectedOption();
+        return selected ? selected.displayText() : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    visibleOptions = computed(() => {
+        return this.options().filter((opt) => !opt.hidden() && !opt.disabled());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    // ControlValueAccessor Callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Sync options' selected state when value or options list updates
+        effect(() => {
+            const opts = this.options();
+            const currentVal = this.value();
+            for (const opt of opts) {
+                opt.isSelected.set(opt.value() === currentVal);
+            }
+        });
+        // Subscribe to option click events
+        effect((onCleanup) => {
+            const opts = this.options();
+            const subs = opts.map((opt) => opt.selected.subscribe((selectedOpt) => {
+                this.selectOption(selectedOpt);
+            }));
+            onCleanup(() => {
+                subs.forEach((sub) => sub.unsubscribe());
+            });
+        });
+        // Update active highlight when focusedIndex or options change
+        effect(() => {
+            const visibleOpts = this.visibleOptions();
+            const index = this.focusedIndex();
+            this.options().forEach((opt) => {
+                const isActive = index >= 0 && visibleOpts[index] === opt;
+                opt.isActive.set(isActive);
+                if (isActive) {
+                    opt.scrollIntoViewIfNeeded();
+                }
+            });
+        });
+    }
+    // --- ControlValueAccessor Interface ---
+    writeValue(val) {
+        this.value.set(val);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    // --- Open / Close Controls ---
+    toggleOpen() {
+        if (this.effectiveDisabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.effectiveDisabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.opened.emit();
+        // Set initial keyboard focus index to selected option or first option
+        const visibleOpts = this.visibleOptions();
+        const selected = this.selectedOption();
+        const selectedIdx = selected ? visibleOpts.indexOf(selected) : -1;
+        this.focusedIndex.set(selectedIdx >= 0 ? selectedIdx : visibleOpts.length > 0 ? 0 : -1);
+        if (this.searchable()) {
+            setTimeout(() => {
+                this.searchInputEl?.nativeElement.focus();
+            }, 50);
+        }
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.focusedIndex.set(-1);
+        this.clearSearch();
+        this.markAsTouched();
+        this.closed.emit();
+    }
+    // --- Selection Logic ---
+    selectOption(option) {
+        const newValue = option ? option.value() : null;
+        this.value.set(newValue);
+        this.onChange(newValue);
+        this.selectionChange.emit(newValue);
+        this.close();
+    }
+    onClear(event) {
+        event.stopPropagation();
+        if (this.effectiveDisabled())
+            return;
+        this.selectOption(null);
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    // --- Search / Autocomplete Logic ---
+    onSearchInput(event) {
+        const query = event.target.value;
+        this.searchValue.set(query);
+        this.searchChange.emit(query);
+        this.filterOptions(query);
+    }
+    clearSearch() {
+        if (this.searchValue()) {
+            this.searchValue.set('');
+            this.searchChange.emit('');
+            this.filterOptions('');
+        }
+    }
+    filterOptions(query) {
+        const term = query.toLowerCase().trim();
+        for (const opt of this.options()) {
+            if (!term) {
+                opt.hidden.set(false);
+            }
+            else {
+                const matches = opt.displayText().toLowerCase().includes(term);
+                opt.hidden.set(!matches);
+            }
+        }
+        const visibleOpts = this.visibleOptions();
+        this.focusedIndex.set(visibleOpts.length > 0 ? 0 : -1);
+    }
+    // --- Keyboard & Document Click Event Handlers ---
+    onKeyDown(event) {
+        if (this.effectiveDisabled())
+            return;
+        const visibleOpts = this.visibleOptions();
+        const count = visibleOpts.length;
+        const currentIdx = this.focusedIndex();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.open();
+                }
+                else if (count > 0) {
+                    const nextIdx = (currentIdx + 1) % count;
+                    this.focusedIndex.set(nextIdx);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.open();
+                }
+                else if (count > 0) {
+                    const prevIdx = (currentIdx - 1 + count) % count;
+                    this.focusedIndex.set(prevIdx);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                if (event.key === ' ' && this.searchable() && this.isOpen()) {
+                    // Allow space key inside search input
+                    return;
+                }
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.open();
+                }
+                else if (currentIdx >= 0 && currentIdx < count) {
+                    this.selectOption(visibleOpts[currentIdx]);
+                }
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                    this.triggerEl?.nativeElement.focus();
+                }
+                break;
+            case 'Home':
+                if (this.isOpen() && count > 0) {
+                    event.preventDefault();
+                    this.focusedIndex.set(0);
+                }
+                break;
+            case 'End':
+                if (this.isOpen() && count > 0) {
+                    event.preventDefault();
+                    this.focusedIndex.set(count - 1);
+                }
+                break;
+            case 'Tab':
+                if (this.isOpen()) {
+                    this.close();
+                }
+                break;
+        }
+    }
+    ngAfterContentChecked() {
+        this.checkAffixes();
+    }
+    checkAffixes() {
+        const root = this.elementRef.nativeElement;
+        const prefixEl = root.querySelector('.select-trigger > [talosPrefix], .select-trigger > [talosTextPrefix], .select-trigger > [talos-prefix], .select-trigger > [talos-text-prefix], .select-trigger > [talosLead], .select-trigger > [talosStart], .select-trigger > [prefix], .select-trigger > .talos-input-prefix');
+        this.hasPrefix.set(!!prefixEl);
+        const suffixEl = root.querySelector('.select-trigger > [talosSuffix], .select-trigger > [talosPostfix], .select-trigger > [talosTextSuffix], .select-trigger > [talosTextPostfix], .select-trigger > [talos-suffix], .select-trigger > [talos-postfix], .select-trigger > [talosTrail], .select-trigger > [talosEnd], .select-trigger > [suffix], .select-trigger > .talos-input-suffix');
+        this.hasSuffix.set(!!suffixEl);
+        if (prefixEl) {
+            const prefixWidth = prefixEl.getBoundingClientRect().width;
+            if (prefixWidth > 0) {
+                root.style.setProperty('--talos-prefix-offset', `${Math.round(prefixWidth + 16)}px`);
+            }
+        }
+        else {
+            root.style.removeProperty('--talos-prefix-offset');
+        }
+        if (suffixEl) {
+            const suffixWidth = suffixEl.getBoundingClientRect().width;
+            if (suffixWidth > 0) {
+                root.style.setProperty('--talos-suffix-offset', `${Math.round(suffixWidth + 16)}px`);
+            }
+        }
+        else {
+            root.style.removeProperty('--talos-suffix-offset');
+        }
+    }
+    onDocumentClick(event) {
+        if (this.isOpen() && !this.elementRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SelectInputComponent, isStandalone: true, selector: "talos-select-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed", searchChange: "searchChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "document:click": "onDocumentClick($event)" }, properties: { "class.is-open": "isOpen()", "class.is-disabled": "effectiveDisabled()", "class.has-label": "!!label()", "class.is-floating": "isFloatingMode()", "class.is-floated": "isFloated()", "class.has-prefix": "hasPrefix()", "class.has-suffix": "hasSuffix()", "class.select-sm": "size() === \"sm\"", "class.select-md": "size() === \"md\"", "class.select-lg": "size() === \"lg\"" }, classAttribute: "talos-select-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectInputComponent),
+                multi: true
+            }
+        ], queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: OptionGroupComponent, isSignal: true }], viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], ngImport: i0, template: "@if (label() && !isFloatingMode()) {\n  <label class=\"talos-field-label\" (click)=\"toggleOpen()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"required-star\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"select-control-container\">\n  <!-- Select Control Trigger -->\n  <div #triggerEl class=\"select-trigger\" role=\"combobox\" [attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId\" [attr.aria-disabled]=\"effectiveDisabled()\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" (click)=\"toggleOpen()\">\n    <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n    <div class=\"select-value-container\">\n      @if (selectedOption()) {\n      <span class=\"select-value-label\">{{ displayLabel() }}</span>\n      } @else if (!isFloatingMode() || isFloated()) {\n      <span class=\"select-placeholder\">{{ placeholder() }}</span>\n      }\n    </div>\n\n    <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n    <div class=\"select-actions\">\n      @if (clearable() && selectedOption() && !effectiveDisabled()) {\n      <button type=\"button\" class=\"select-clear-btn\" aria-label=\"Clear selection\" title=\"Clear selection\"\n        (click)=\"onClear($event)\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" 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      <span class=\"select-arrow\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\n        </svg>\n      </span>\n    </div>\n  </div>\n\n  @if (label() && isFloatingMode()) {\n    <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleOpen()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"required-star\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n<!-- Dropdown Panel -->\n@if (isOpen()) {\n<div class=\"select-dropdown-panel\" [id]=\"listboxId\" role=\"listbox\">\n  @if (searchable()) {\n  <div class=\"select-search-container\">\n    <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" 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    </svg>\n    <input #searchInput type=\"text\" class=\"select-search-input\" [placeholder]=\"searchPlaceholder()\"\n      [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Search options\" />\n    @if (searchValue()) {\n    <button type=\"button\" class=\"select-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n      </svg>\n    </button>\n    }\n  </div>\n  }\n\n  <div class=\"select-options-list\">\n    <ng-content></ng-content>\n    @if (visibleOptions().length === 0) {\n    <div class=\"select-no-options\">\n      No matching options\n    </div>\n    }\n  </div>\n</div>\n}\n</div>", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--select-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--select-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--select-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--select-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--select-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--select-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--select-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--select-radius: var(--talos-border-radius, .375rem);--select-height: var(--talos-control-height, 2.25rem);--select-padding-x: var(--talos-control-padding-x, .625rem);--select-font-size: var(--talos-control-font-size, .8125rem);--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);--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-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.select-sm{--select-height: 2rem;--select-padding-x: .5rem;--select-font-size: .8125rem;--select-radius: .25rem;--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.select-md{--select-height: 2.25rem;--select-padding-x: .625rem;--select-font-size: .8125rem;--select-radius: .375rem;--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.select-lg{--select-height: 2.625rem;--select-padding-x: .75rem;--select-font-size: .875rem;--select-radius: .375rem;--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 .select-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);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}.select-control-container{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label{position:absolute;left:var(--select-padding-x, .625rem);top:calc(var(--select-height) / 2);transform:translateY(-50%);font-size:var(--select-font-size, .8125rem);font-weight:500;color:var(--select-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--select-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)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.select-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--select-height);min-height:var(--select-height);padding:0 var(--select-padding-x);background-color:var(--select-bg);border:1px solid var(--select-border);border-radius:var(--select-radius);color:var(--select-color);font-size:var(--select-font-size);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.select-trigger:hover:not([aria-disabled=true]){border-color:var(--select-border-hover)}.select-trigger:focus-visible{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}:host(.is-open) .select-trigger{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}.select-value-container{flex:1;min-width:0;display:flex;align-items:center}.select-value-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.select-placeholder{color:var(--select-placeholder-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.select-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}.select-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.select-clear-btn:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.select-clear-btn svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.select-arrow{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.select-arrow.is-open{transform:rotate(180deg)}.select-arrow svg{width:.875rem;height:.875rem}.select-dropdown-panel{--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04));--select-radius: var(--talos-border-radius, var(--border-radius, .375rem));--select-color: var(--talos-text-color, var(--text-color, #0f172a));position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background-color:var(--select-dropdown-bg);border:1px solid var(--select-dropdown-border);border-radius:var(--select-radius);box-shadow:var(--select-dropdown-shadow);color:var(--select-color);padding:.25rem;max-height:16rem;display:flex;flex-direction:column;animation:selectDropdownSlideIn .12s cubic-bezier(0,0,.2,1)}@keyframes selectDropdownSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-search-container{position:relative;display:flex;align-items:center;padding:.125rem .125rem .25rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);margin-bottom:.25rem}.select-search-container .search-icon{position:absolute;left:.5rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none}.select-search-input{width:100%;height:1.875rem;padding:.25rem 1.625rem .25rem 1.75rem;font-size:.8125rem;color:var(--select-color);background-color:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.25rem;outline:none;transition:border-color .15s ease,background-color .15s ease}.select-search-input:focus{background-color:var(--talos-card-bg, #ffffff);border-color:var(--select-border-focus)}.select-search-input::placeholder{color:var(--talos-placeholder-color, #94a3b8)}.select-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer}.select-search-clear:hover{color:var(--talos-text-color, #64748b)}.select-search-clear svg{width:.75rem;height:.75rem}.select-options-list{overflow-y:auto;max-height:13rem;padding-right:.125rem}.select-options-list::-webkit-scrollbar{width:4px}.select-options-list::-webkit-scrollbar-track{background:transparent}.select-options-list::-webkit-scrollbar-thumb{background:var(--talos-border-color, #cbd5e1);border-radius:2px}.select-options-list::-webkit-scrollbar-thumb:hover{background:var(--talos-border-hover, #94a3b8)}.select-no-options{padding:.875rem .625rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8);font-style:italic}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--select-padding-x, .625rem) + 1.625rem))!important}:host(.has-prefix.select-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.select-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.625rem)!important}::ng-deep .select-trigger>[talosPrefix],::ng-deep .select-trigger>[talosTextPrefix],::ng-deep .select-trigger>[talosLead],::ng-deep .select-trigger>[talosStart],::ng-deep .select-trigger>[prefix],::ng-deep .select-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosPrefix].affix-interactive,::ng-deep .select-trigger>[talosPrefix] button,::ng-deep .select-trigger>[talosPrefix] a,::ng-deep .select-trigger>[talosTextPrefix].affix-interactive,::ng-deep .select-trigger>[talosTextPrefix] button,::ng-deep .select-trigger>[talosTextPrefix] a,::ng-deep .select-trigger>[talosLead].affix-interactive,::ng-deep .select-trigger>[talosLead] button,::ng-deep .select-trigger>[talosLead] a,::ng-deep .select-trigger>[talosStart].affix-interactive,::ng-deep .select-trigger>[talosStart] button,::ng-deep .select-trigger>[talosStart] a,::ng-deep .select-trigger>[prefix].affix-interactive,::ng-deep .select-trigger>[prefix] button,::ng-deep .select-trigger>[prefix] a,::ng-deep .select-trigger>.talos-input-prefix.affix-interactive,::ng-deep .select-trigger>.talos-input-prefix button,::ng-deep .select-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .select-trigger>[talosPrefix]:hover,::ng-deep .select-trigger>[talosPrefix]:active,::ng-deep .select-trigger>[talosPrefix]:focus,::ng-deep .select-trigger>[talosPrefix]:focus-visible,::ng-deep .select-trigger>[talosTextPrefix]:hover,::ng-deep .select-trigger>[talosTextPrefix]:active,::ng-deep .select-trigger>[talosTextPrefix]:focus,::ng-deep .select-trigger>[talosTextPrefix]:focus-visible,::ng-deep .select-trigger>[talosLead]:hover,::ng-deep .select-trigger>[talosLead]:active,::ng-deep .select-trigger>[talosLead]:focus,::ng-deep .select-trigger>[talosLead]:focus-visible,::ng-deep .select-trigger>[talosStart]:hover,::ng-deep .select-trigger>[talosStart]:active,::ng-deep .select-trigger>[talosStart]:focus,::ng-deep .select-trigger>[talosStart]:focus-visible,::ng-deep .select-trigger>[prefix]:hover,::ng-deep .select-trigger>[prefix]:active,::ng-deep .select-trigger>[prefix]:focus,::ng-deep .select-trigger>[prefix]:focus-visible,::ng-deep .select-trigger>.talos-input-prefix:hover,::ng-deep .select-trigger>.talos-input-prefix:active,::ng-deep .select-trigger>.talos-input-prefix:focus,::ng-deep .select-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>[talosSuffix],::ng-deep .select-trigger>[talosPostfix],::ng-deep .select-trigger>[talosTextSuffix],::ng-deep .select-trigger>[talosTextPostfix],::ng-deep .select-trigger>[talosTrail],::ng-deep .select-trigger>[talosEnd],::ng-deep .select-trigger>[suffix],::ng-deep .select-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosSuffix].affix-interactive,::ng-deep .select-trigger>[talosSuffix] button,::ng-deep .select-trigger>[talosSuffix] a,::ng-deep .select-trigger>[talosPostfix].affix-interactive,::ng-deep .select-trigger>[talosPostfix] button,::ng-deep .select-trigger>[talosPostfix] a,::ng-deep .select-trigger>[talosTextSuffix].affix-interactive,::ng-deep .select-trigger>[talosTextSuffix] button,::ng-deep .select-trigger>[talosTextSuffix] a,::ng-deep .select-trigger>[talosTextPostfix].affix-interactive,::ng-deep .select-trigger>[talosTextPostfix] button,::ng-deep .select-trigger>[talosTextPostfix] a,::ng-deep .select-trigger>[talosTrail].affix-interactive,::ng-deep .select-trigger>[talosTrail] button,::ng-deep .select-trigger>[talosTrail] a,::ng-deep .select-trigger>[talosEnd].affix-interactive,::ng-deep .select-trigger>[talosEnd] button,::ng-deep .select-trigger>[talosEnd] a,::ng-deep .select-trigger>[suffix].affix-interactive,::ng-deep .select-trigger>[suffix] button,::ng-deep .select-trigger>[suffix] a,::ng-deep .select-trigger>.talos-input-suffix.affix-interactive,::ng-deep .select-trigger>.talos-input-suffix button,::ng-deep .select-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .select-trigger>[talosSuffix]:hover,::ng-deep .select-trigger>[talosSuffix]:active,::ng-deep .select-trigger>[talosSuffix]:focus,::ng-deep .select-trigger>[talosSuffix]:focus-visible,::ng-deep .select-trigger>[talosPostfix]:hover,::ng-deep .select-trigger>[talosPostfix]:active,::ng-deep .select-trigger>[talosPostfix]:focus,::ng-deep .select-trigger>[talosPostfix]:focus-visible,::ng-deep .select-trigger>[talosTextSuffix]:hover,::ng-deep .select-trigger>[talosTextSuffix]:active,::ng-deep .select-trigger>[talosTextSuffix]:focus,::ng-deep .select-trigger>[talosTextSuffix]:focus-visible,::ng-deep .select-trigger>[talosTextPostfix]:hover,::ng-deep .select-trigger>[talosTextPostfix]:active,::ng-deep .select-trigger>[talosTextPostfix]:focus,::ng-deep .select-trigger>[talosTextPostfix]:focus-visible,::ng-deep .select-trigger>[talosTrail]:hover,::ng-deep .select-trigger>[talosTrail]:active,::ng-deep .select-trigger>[talosTrail]:focus,::ng-deep .select-trigger>[talosTrail]:focus-visible,::ng-deep .select-trigger>[talosEnd]:hover,::ng-deep .select-trigger>[talosEnd]:active,::ng-deep .select-trigger>[talosEnd]:focus,::ng-deep .select-trigger>[talosEnd]:focus-visible,::ng-deep .select-trigger>[suffix]:hover,::ng-deep .select-trigger>[suffix]:active,::ng-deep .select-trigger>[suffix]:focus,::ng-deep .select-trigger>[suffix]:focus-visible,::ng-deep .select-trigger>.talos-input-suffix:hover,::ng-deep .select-trigger>.talos-input-suffix:active,::ng-deep .select-trigger>.talos-input-suffix:focus,::ng-deep .select-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element,::ng-deep .select-trigger>button[talosPrefix],::ng-deep .select-trigger>button[talosSuffix],::ng-deep .select-trigger>button[talosPostfix],::ng-deep .select-trigger>button[talosLead],::ng-deep .select-trigger>button[talosTrail],::ng-deep .select-trigger>button[talosStart],::ng-deep .select-trigger>button[talosEnd],::ng-deep .select-trigger>button[talosAffixButton],::ng-deep .select-trigger>button.talos-affix-btn,::ng-deep .select-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .select-trigger>button.talos-affix-element svg,::ng-deep .select-trigger>button.talos-affix-element i,::ng-deep .select-trigger>button.talos-affix-element [lucideIcon],::ng-deep .select-trigger>button.talos-affix-element .lucide,::ng-deep .select-trigger>button[talosPrefix] svg,::ng-deep .select-trigger>button[talosPrefix] i,::ng-deep .select-trigger>button[talosPrefix] [lucideIcon],::ng-deep .select-trigger>button[talosPrefix] .lucide,::ng-deep .select-trigger>button[talosSuffix] svg,::ng-deep .select-trigger>button[talosSuffix] i,::ng-deep .select-trigger>button[talosSuffix] [lucideIcon],::ng-deep .select-trigger>button[talosSuffix] .lucide,::ng-deep .select-trigger>button[talosPostfix] svg,::ng-deep .select-trigger>button[talosPostfix] i,::ng-deep .select-trigger>button[talosPostfix] [lucideIcon],::ng-deep .select-trigger>button[talosPostfix] .lucide,::ng-deep .select-trigger>button[talosLead] svg,::ng-deep .select-trigger>button[talosLead] i,::ng-deep .select-trigger>button[talosLead] [lucideIcon],::ng-deep .select-trigger>button[talosLead] .lucide,::ng-deep .select-trigger>button[talosTrail] svg,::ng-deep .select-trigger>button[talosTrail] i,::ng-deep .select-trigger>button[talosTrail] [lucideIcon],::ng-deep .select-trigger>button[talosTrail] .lucide,::ng-deep .select-trigger>button[talosStart] svg,::ng-deep .select-trigger>button[talosStart] i,::ng-deep .select-trigger>button[talosStart] [lucideIcon],::ng-deep .select-trigger>button[talosStart] .lucide,::ng-deep .select-trigger>button[talosEnd] svg,::ng-deep .select-trigger>button[talosEnd] i,::ng-deep .select-trigger>button[talosEnd] [lucideIcon],::ng-deep .select-trigger>button[talosEnd] .lucide,::ng-deep .select-trigger>button[talosAffixButton] svg,::ng-deep .select-trigger>button[talosAffixButton] i,::ng-deep .select-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .select-trigger>button[talosAffixButton] .lucide,::ng-deep .select-trigger>button.talos-affix-btn svg,::ng-deep .select-trigger>button.talos-affix-btn i,::ng-deep .select-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .select-trigger>button.talos-affix-btn .lucide,::ng-deep .select-trigger>.affix-interactive:is(button) svg,::ng-deep .select-trigger>.affix-interactive:is(button) i,::ng-deep .select-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .select-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .select-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .select-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-select-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectInputComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        'class': 'talos-select-host',
+                        '[class.is-open]': 'isOpen()',
+                        '[class.is-disabled]': 'effectiveDisabled()',
+                        '[class.has-label]': '!!label()',
+                        '[class.is-floating]': 'isFloatingMode()',
+                        '[class.is-floated]': 'isFloated()',
+                        '[class.has-prefix]': 'hasPrefix()',
+                        '[class.has-suffix]': 'hasSuffix()',
+                        '[class.select-sm]': 'size() === "sm"',
+                        '[class.select-md]': 'size() === "md"',
+                        '[class.select-lg]': 'size() === "lg"',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(document:click)': 'onDocumentClick($event)'
+                    }, template: "@if (label() && !isFloatingMode()) {\n  <label class=\"talos-field-label\" (click)=\"toggleOpen()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"required-star\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"select-control-container\">\n  <!-- Select Control Trigger -->\n  <div #triggerEl class=\"select-trigger\" role=\"combobox\" [attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId\" [attr.aria-disabled]=\"effectiveDisabled()\"\n    [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" (click)=\"toggleOpen()\">\n    <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n    <div class=\"select-value-container\">\n      @if (selectedOption()) {\n      <span class=\"select-value-label\">{{ displayLabel() }}</span>\n      } @else if (!isFloatingMode() || isFloated()) {\n      <span class=\"select-placeholder\">{{ placeholder() }}</span>\n      }\n    </div>\n\n    <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n    <div class=\"select-actions\">\n      @if (clearable() && selectedOption() && !effectiveDisabled()) {\n      <button type=\"button\" class=\"select-clear-btn\" aria-label=\"Clear selection\" title=\"Clear selection\"\n        (click)=\"onClear($event)\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" 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      <span class=\"select-arrow\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\n        </svg>\n      </span>\n    </div>\n  </div>\n\n  @if (label() && isFloatingMode()) {\n    <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleOpen()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"required-star\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n<!-- Dropdown Panel -->\n@if (isOpen()) {\n<div class=\"select-dropdown-panel\" [id]=\"listboxId\" role=\"listbox\">\n  @if (searchable()) {\n  <div class=\"select-search-container\">\n    <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" 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    </svg>\n    <input #searchInput type=\"text\" class=\"select-search-input\" [placeholder]=\"searchPlaceholder()\"\n      [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Search options\" />\n    @if (searchValue()) {\n    <button type=\"button\" class=\"select-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n      </svg>\n    </button>\n    }\n  </div>\n  }\n\n  <div class=\"select-options-list\">\n    <ng-content></ng-content>\n    @if (visibleOptions().length === 0) {\n    <div class=\"select-no-options\">\n      No matching options\n    </div>\n    }\n  </div>\n</div>\n}\n</div>", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--select-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--select-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--select-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--select-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--select-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--select-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--select-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--select-radius: var(--talos-border-radius, .375rem);--select-height: var(--talos-control-height, 2.25rem);--select-padding-x: var(--talos-control-padding-x, .625rem);--select-font-size: var(--talos-control-font-size, .8125rem);--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);--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-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.select-sm{--select-height: 2rem;--select-padding-x: .5rem;--select-font-size: .8125rem;--select-radius: .25rem;--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.select-md{--select-height: 2.25rem;--select-padding-x: .625rem;--select-font-size: .8125rem;--select-radius: .375rem;--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.select-lg{--select-height: 2.625rem;--select-padding-x: .75rem;--select-font-size: .875rem;--select-radius: .375rem;--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 .select-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);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}.select-control-container{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label{position:absolute;left:var(--select-padding-x, .625rem);top:calc(var(--select-height) / 2);transform:translateY(-50%);font-size:var(--select-font-size, .8125rem);font-weight:500;color:var(--select-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--select-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)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.select-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--select-height);min-height:var(--select-height);padding:0 var(--select-padding-x);background-color:var(--select-bg);border:1px solid var(--select-border);border-radius:var(--select-radius);color:var(--select-color);font-size:var(--select-font-size);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.select-trigger:hover:not([aria-disabled=true]){border-color:var(--select-border-hover)}.select-trigger:focus-visible{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}:host(.is-open) .select-trigger{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}.select-value-container{flex:1;min-width:0;display:flex;align-items:center}.select-value-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.select-placeholder{color:var(--select-placeholder-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.select-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}.select-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.select-clear-btn:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.select-clear-btn svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.select-arrow{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.select-arrow.is-open{transform:rotate(180deg)}.select-arrow svg{width:.875rem;height:.875rem}.select-dropdown-panel{--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04));--select-radius: var(--talos-border-radius, var(--border-radius, .375rem));--select-color: var(--talos-text-color, var(--text-color, #0f172a));position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background-color:var(--select-dropdown-bg);border:1px solid var(--select-dropdown-border);border-radius:var(--select-radius);box-shadow:var(--select-dropdown-shadow);color:var(--select-color);padding:.25rem;max-height:16rem;display:flex;flex-direction:column;animation:selectDropdownSlideIn .12s cubic-bezier(0,0,.2,1)}@keyframes selectDropdownSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-search-container{position:relative;display:flex;align-items:center;padding:.125rem .125rem .25rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);margin-bottom:.25rem}.select-search-container .search-icon{position:absolute;left:.5rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none}.select-search-input{width:100%;height:1.875rem;padding:.25rem 1.625rem .25rem 1.75rem;font-size:.8125rem;color:var(--select-color);background-color:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.25rem;outline:none;transition:border-color .15s ease,background-color .15s ease}.select-search-input:focus{background-color:var(--talos-card-bg, #ffffff);border-color:var(--select-border-focus)}.select-search-input::placeholder{color:var(--talos-placeholder-color, #94a3b8)}.select-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer}.select-search-clear:hover{color:var(--talos-text-color, #64748b)}.select-search-clear svg{width:.75rem;height:.75rem}.select-options-list{overflow-y:auto;max-height:13rem;padding-right:.125rem}.select-options-list::-webkit-scrollbar{width:4px}.select-options-list::-webkit-scrollbar-track{background:transparent}.select-options-list::-webkit-scrollbar-thumb{background:var(--talos-border-color, #cbd5e1);border-radius:2px}.select-options-list::-webkit-scrollbar-thumb:hover{background:var(--talos-border-hover, #94a3b8)}.select-no-options{padding:.875rem .625rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8);font-style:italic}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--select-padding-x, .625rem) + 1.625rem))!important}:host(.has-prefix.select-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.select-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.625rem)!important}::ng-deep .select-trigger>[talosPrefix],::ng-deep .select-trigger>[talosTextPrefix],::ng-deep .select-trigger>[talosLead],::ng-deep .select-trigger>[talosStart],::ng-deep .select-trigger>[prefix],::ng-deep .select-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosPrefix].affix-interactive,::ng-deep .select-trigger>[talosPrefix] button,::ng-deep .select-trigger>[talosPrefix] a,::ng-deep .select-trigger>[talosTextPrefix].affix-interactive,::ng-deep .select-trigger>[talosTextPrefix] button,::ng-deep .select-trigger>[talosTextPrefix] a,::ng-deep .select-trigger>[talosLead].affix-interactive,::ng-deep .select-trigger>[talosLead] button,::ng-deep .select-trigger>[talosLead] a,::ng-deep .select-trigger>[talosStart].affix-interactive,::ng-deep .select-trigger>[talosStart] button,::ng-deep .select-trigger>[talosStart] a,::ng-deep .select-trigger>[prefix].affix-interactive,::ng-deep .select-trigger>[prefix] button,::ng-deep .select-trigger>[prefix] a,::ng-deep .select-trigger>.talos-input-prefix.affix-interactive,::ng-deep .select-trigger>.talos-input-prefix button,::ng-deep .select-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .select-trigger>[talosPrefix]:hover,::ng-deep .select-trigger>[talosPrefix]:active,::ng-deep .select-trigger>[talosPrefix]:focus,::ng-deep .select-trigger>[talosPrefix]:focus-visible,::ng-deep .select-trigger>[talosTextPrefix]:hover,::ng-deep .select-trigger>[talosTextPrefix]:active,::ng-deep .select-trigger>[talosTextPrefix]:focus,::ng-deep .select-trigger>[talosTextPrefix]:focus-visible,::ng-deep .select-trigger>[talosLead]:hover,::ng-deep .select-trigger>[talosLead]:active,::ng-deep .select-trigger>[talosLead]:focus,::ng-deep .select-trigger>[talosLead]:focus-visible,::ng-deep .select-trigger>[talosStart]:hover,::ng-deep .select-trigger>[talosStart]:active,::ng-deep .select-trigger>[talosStart]:focus,::ng-deep .select-trigger>[talosStart]:focus-visible,::ng-deep .select-trigger>[prefix]:hover,::ng-deep .select-trigger>[prefix]:active,::ng-deep .select-trigger>[prefix]:focus,::ng-deep .select-trigger>[prefix]:focus-visible,::ng-deep .select-trigger>.talos-input-prefix:hover,::ng-deep .select-trigger>.talos-input-prefix:active,::ng-deep .select-trigger>.talos-input-prefix:focus,::ng-deep .select-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>[talosSuffix],::ng-deep .select-trigger>[talosPostfix],::ng-deep .select-trigger>[talosTextSuffix],::ng-deep .select-trigger>[talosTextPostfix],::ng-deep .select-trigger>[talosTrail],::ng-deep .select-trigger>[talosEnd],::ng-deep .select-trigger>[suffix],::ng-deep .select-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosSuffix].affix-interactive,::ng-deep .select-trigger>[talosSuffix] button,::ng-deep .select-trigger>[talosSuffix] a,::ng-deep .select-trigger>[talosPostfix].affix-interactive,::ng-deep .select-trigger>[talosPostfix] button,::ng-deep .select-trigger>[talosPostfix] a,::ng-deep .select-trigger>[talosTextSuffix].affix-interactive,::ng-deep .select-trigger>[talosTextSuffix] button,::ng-deep .select-trigger>[talosTextSuffix] a,::ng-deep .select-trigger>[talosTextPostfix].affix-interactive,::ng-deep .select-trigger>[talosTextPostfix] button,::ng-deep .select-trigger>[talosTextPostfix] a,::ng-deep .select-trigger>[talosTrail].affix-interactive,::ng-deep .select-trigger>[talosTrail] button,::ng-deep .select-trigger>[talosTrail] a,::ng-deep .select-trigger>[talosEnd].affix-interactive,::ng-deep .select-trigger>[talosEnd] button,::ng-deep .select-trigger>[talosEnd] a,::ng-deep .select-trigger>[suffix].affix-interactive,::ng-deep .select-trigger>[suffix] button,::ng-deep .select-trigger>[suffix] a,::ng-deep .select-trigger>.talos-input-suffix.affix-interactive,::ng-deep .select-trigger>.talos-input-suffix button,::ng-deep .select-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .select-trigger>[talosSuffix]:hover,::ng-deep .select-trigger>[talosSuffix]:active,::ng-deep .select-trigger>[talosSuffix]:focus,::ng-deep .select-trigger>[talosSuffix]:focus-visible,::ng-deep .select-trigger>[talosPostfix]:hover,::ng-deep .select-trigger>[talosPostfix]:active,::ng-deep .select-trigger>[talosPostfix]:focus,::ng-deep .select-trigger>[talosPostfix]:focus-visible,::ng-deep .select-trigger>[talosTextSuffix]:hover,::ng-deep .select-trigger>[talosTextSuffix]:active,::ng-deep .select-trigger>[talosTextSuffix]:focus,::ng-deep .select-trigger>[talosTextSuffix]:focus-visible,::ng-deep .select-trigger>[talosTextPostfix]:hover,::ng-deep .select-trigger>[talosTextPostfix]:active,::ng-deep .select-trigger>[talosTextPostfix]:focus,::ng-deep .select-trigger>[talosTextPostfix]:focus-visible,::ng-deep .select-trigger>[talosTrail]:hover,::ng-deep .select-trigger>[talosTrail]:active,::ng-deep .select-trigger>[talosTrail]:focus,::ng-deep .select-trigger>[talosTrail]:focus-visible,::ng-deep .select-trigger>[talosEnd]:hover,::ng-deep .select-trigger>[talosEnd]:active,::ng-deep .select-trigger>[talosEnd]:focus,::ng-deep .select-trigger>[talosEnd]:focus-visible,::ng-deep .select-trigger>[suffix]:hover,::ng-deep .select-trigger>[suffix]:active,::ng-deep .select-trigger>[suffix]:focus,::ng-deep .select-trigger>[suffix]:focus-visible,::ng-deep .select-trigger>.talos-input-suffix:hover,::ng-deep .select-trigger>.talos-input-suffix:active,::ng-deep .select-trigger>.talos-input-suffix:focus,::ng-deep .select-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element,::ng-deep .select-trigger>button[talosPrefix],::ng-deep .select-trigger>button[talosSuffix],::ng-deep .select-trigger>button[talosPostfix],::ng-deep .select-trigger>button[talosLead],::ng-deep .select-trigger>button[talosTrail],::ng-deep .select-trigger>button[talosStart],::ng-deep .select-trigger>button[talosEnd],::ng-deep .select-trigger>button[talosAffixButton],::ng-deep .select-trigger>button.talos-affix-btn,::ng-deep .select-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .select-trigger>button.talos-affix-element svg,::ng-deep .select-trigger>button.talos-affix-element i,::ng-deep .select-trigger>button.talos-affix-element [lucideIcon],::ng-deep .select-trigger>button.talos-affix-element .lucide,::ng-deep .select-trigger>button[talosPrefix] svg,::ng-deep .select-trigger>button[talosPrefix] i,::ng-deep .select-trigger>button[talosPrefix] [lucideIcon],::ng-deep .select-trigger>button[talosPrefix] .lucide,::ng-deep .select-trigger>button[talosSuffix] svg,::ng-deep .select-trigger>button[talosSuffix] i,::ng-deep .select-trigger>button[talosSuffix] [lucideIcon],::ng-deep .select-trigger>button[talosSuffix] .lucide,::ng-deep .select-trigger>button[talosPostfix] svg,::ng-deep .select-trigger>button[talosPostfix] i,::ng-deep .select-trigger>button[talosPostfix] [lucideIcon],::ng-deep .select-trigger>button[talosPostfix] .lucide,::ng-deep .select-trigger>button[talosLead] svg,::ng-deep .select-trigger>button[talosLead] i,::ng-deep .select-trigger>button[talosLead] [lucideIcon],::ng-deep .select-trigger>button[talosLead] .lucide,::ng-deep .select-trigger>button[talosTrail] svg,::ng-deep .select-trigger>button[talosTrail] i,::ng-deep .select-trigger>button[talosTrail] [lucideIcon],::ng-deep .select-trigger>button[talosTrail] .lucide,::ng-deep .select-trigger>button[talosStart] svg,::ng-deep .select-trigger>button[talosStart] i,::ng-deep .select-trigger>button[talosStart] [lucideIcon],::ng-deep .select-trigger>button[talosStart] .lucide,::ng-deep .select-trigger>button[talosEnd] svg,::ng-deep .select-trigger>button[talosEnd] i,::ng-deep .select-trigger>button[talosEnd] [lucideIcon],::ng-deep .select-trigger>button[talosEnd] .lucide,::ng-deep .select-trigger>button[talosAffixButton] svg,::ng-deep .select-trigger>button[talosAffixButton] i,::ng-deep .select-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .select-trigger>button[talosAffixButton] .lucide,::ng-deep .select-trigger>button.talos-affix-btn svg,::ng-deep .select-trigger>button.talos-affix-btn i,::ng-deep .select-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .select-trigger>button.talos-affix-btn .lucide,::ng-deep .select-trigger>.affix-interactive:is(button) svg,::ng-deep .select-trigger>.affix-interactive:is(button) i,::ng-deep .select-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .select-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .select-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .select-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { ...{ descendants: true }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionGroupComponent), { isSignal: true }] }], searchInputEl: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], triggerEl: [{
+                type: ViewChild,
+                args: ['triggerEl']
+            }] } });
+
+class CascadeSelectComponent {
+    elementRef = inject((ElementRef));
+    // Signal Inputs
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select path...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* 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 */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    clearable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    searchable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search full hierarchy...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    expandTrigger = input('click', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandTrigger" }] : /* istanbul ignore next */ []));
+    valueMode = input('path', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueMode" }] : /* istanbul ignore next */ []));
+    separator = input(' / ', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    // Signal Outputs
+    pathChange = output();
+    selectionChange = output();
+    opened = output();
+    closed = output();
+    // Internal Reactive State
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    activePath = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []));
+    selectedPath = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedPath" }] : /* istanbul ignore next */ []));
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    highlightedSearchIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightedSearchIndex" }] : /* istanbul ignore next */ []));
+    hasPrefix = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
+    hasSuffix = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
+    // Form Control State
+    hasError = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    searchInputEl;
+    triggerBoxEl;
+    onChange = () => { };
+    onTouched = () => { };
+    isFloatingMode = computed(() => this.floatingLabel() || this.floating(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloatingMode" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => {
+        const sel = this.selectedPath();
+        if (!sel || sel.length === 0) {
+            return '';
+        }
+        return sel.map((opt) => opt.label).join(this.separator());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    isFloated = computed(() => {
+        return this.isOpen() || !!this.displayLabel();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
+    // Dynamic Column List for Cascade Panels
+    activeColumns = computed(() => {
+        const rootOptions = this.options();
+        const currentActive = this.activePath();
+        const columns = [];
+        // Root column
+        columns.push({
+            depth: 0,
+            options: rootOptions,
+            selectedOption: currentActive[0] || null
+        });
+        // Sub-columns following the active path
+        for (let i = 0; i < currentActive.length; i++) {
+            const activeOpt = currentActive[i];
+            if (activeOpt && activeOpt.children && activeOpt.children.length > 0) {
+                columns.push({
+                    depth: i + 1,
+                    options: activeOpt.children,
+                    selectedOption: currentActive[i + 1] || null
+                });
+            }
+        }
+        return columns;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeColumns" }] : /* istanbul ignore next */ []));
+    // Flat Search Index for Typeahead Search
+    allSearchablePaths = computed(() => {
+        const results = [];
+        const rootOptions = this.options();
+        const traverse = (opts, currentPath) => {
+            for (const opt of opts) {
+                const nextPath = [...currentPath, opt];
+                const isLeaf = !opt.children || opt.children.length === 0 || opt.leaf;
+                if (isLeaf) {
+                    results.push({
+                        option: opt,
+                        path: nextPath,
+                        labelPath: nextPath.map((p) => p.label).join(this.separator()),
+                        valuePath: nextPath.map((p) => p.value),
+                        disabled: nextPath.some((p) => p.disabled)
+                    });
+                }
+                if (opt.children && opt.children.length > 0) {
+                    traverse(opt.children, nextPath);
+                }
+            }
+        };
+        traverse(rootOptions, []);
+        return results;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSearchablePaths" }] : /* istanbul ignore next */ []));
+    filteredSearchResults = computed(() => {
+        const term = this.searchTerm().toLowerCase().trim();
+        if (!term) {
+            return [];
+        }
+        return this.allSearchablePaths().filter((match) => match.labelPath.toLowerCase().includes(term));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredSearchResults" }] : /* istanbul ignore next */ []));
+    // ControlValueAccessor Implementation
+    writeValue(value) {
+        if (value === null || value === undefined || (Array.isArray(value) && value.length === 0)) {
+            this.selectedPath.set([]);
+            this.activePath.set([]);
+            return;
+        }
+        const matchedPath = this.findPathForValue(value, this.options());
+        if (matchedPath) {
+            this.selectedPath.set(matchedPath);
+            this.activePath.set(matchedPath);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Handled via input or form state
+    }
+    toggleDropdown() {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.isOpen()) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    openDropdown() {
+        if (this.disabled()) {
+            return;
+        }
+        this.isOpen.set(true);
+        this.searchTerm.set('');
+        // Sync active path with selected path on open
+        this.activePath.set([...this.selectedPath()]);
+        this.opened.emit();
+        if (this.searchable()) {
+            setTimeout(() => {
+                this.searchInputEl?.nativeElement.focus();
+            }, 50);
+        }
+    }
+    closeDropdown() {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.isOpen.set(false);
+        this.searchTerm.set('');
+        this.onTouched();
+        this.closed.emit();
+    }
+    onDocumentClick(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.closeDropdown();
+        }
+    }
+    hasChildren(option) {
+        return !!option.children && option.children.length > 0 && !option.leaf;
+    }
+    isOptionSelected(depth, option) {
+        const sel = this.selectedPath();
+        return sel[depth]?.value === option.value;
+    }
+    isOptionActiveBranch(depth, option) {
+        const active = this.activePath();
+        return active[depth]?.value === option.value;
+    }
+    onOptionHover(depth, option) {
+        if (this.expandTrigger() !== 'hover' || option.disabled) {
+            return;
+        }
+        this.expandOption(depth, option);
+    }
+    onOptionClick(depth, option) {
+        if (option.disabled) {
+            return;
+        }
+        if (this.hasChildren(option)) {
+            this.expandOption(depth, option);
+        }
+        else {
+            // Leaf Node Selection
+            const newPath = [...this.activePath().slice(0, depth), option];
+            this.commitSelection(newPath);
+        }
+    }
+    expandOption(depth, option) {
+        const newActive = [...this.activePath().slice(0, depth), option];
+        this.activePath.set(newActive);
+    }
+    commitSelection(path) {
+        this.selectedPath.set(path);
+        this.activePath.set(path);
+        const emittedValue = this.valueMode() === 'leaf'
+            ? path[path.length - 1]?.value
+            : path.map((p) => p.value);
+        this.onChange(emittedValue);
+        this.selectionChange.emit(emittedValue);
+        this.pathChange.emit(path);
+        this.closeDropdown();
+    }
+    onClear(event) {
+        event.stopPropagation();
+        this.selectedPath.set([]);
+        this.activePath.set([]);
+        const emptyVal = this.valueMode() === 'leaf' ? null : [];
+        this.onChange(emptyVal);
+        this.selectionChange.emit(emptyVal);
+        this.pathChange.emit([]);
+    }
+    // Search Logic
+    onSearchInput(event) {
+        const input = event.target;
+        this.searchTerm.set(input.value);
+        this.highlightedSearchIndex.set(0);
+    }
+    clearSearch() {
+        this.searchTerm.set('');
+        this.searchInputEl?.nativeElement.focus();
+    }
+    selectSearchResult(match) {
+        if (match.disabled) {
+            return;
+        }
+        this.commitSelection(match.path);
+    }
+    onSearchKeyDown(event) {
+        const results = this.filteredSearchResults();
+        if (results.length === 0) {
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.highlightedSearchIndex.update((idx) => (idx + 1) % results.length);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.highlightedSearchIndex.update((idx) => (idx - 1 + results.length) % results.length);
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const current = results[this.highlightedSearchIndex()];
+            if (current) {
+                this.selectSearchResult(current);
+            }
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeDropdown();
+        }
+    }
+    onKeyDown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+            if (!this.isOpen()) {
+                event.preventDefault();
+                this.openDropdown();
+            }
+        }
+        else if (event.key === 'Escape') {
+            if (this.isOpen()) {
+                event.preventDefault();
+                this.closeDropdown();
+            }
+        }
+    }
+    findPathForValue(val, options) {
+        // If value is array of path keys: ['na', 'usa', 'sf']
+        if (Array.isArray(val)) {
+            let currentLevel = options;
+            const resolvedPath = [];
+            for (const segment of val) {
+                const match = currentLevel.find((o) => o.value === segment);
+                if (!match) {
+                    return null;
+                }
+                resolvedPath.push(match);
+                if (match.children) {
+                    currentLevel = match.children;
+                }
+            }
+            return resolvedPath.length === val.length ? resolvedPath : null;
+        }
+        // If value is single leaf key: 'sf'
+        const searchLeaf = (opts, path) => {
+            for (const opt of opts) {
+                const nextPath = [...path, opt];
+                if (opt.value === val) {
+                    return nextPath;
+                }
+                if (opt.children && opt.children.length > 0) {
+                    const res = searchLeaf(opt.children, nextPath);
+                    if (res) {
+                        return res;
+                    }
+                }
+            }
+            return null;
+        };
+        return searchLeaf(options, []);
+    }
+    ngAfterContentChecked() {
+        this.checkAffixes();
+    }
+    checkAffixes() {
+        const root = this.elementRef.nativeElement;
+        const prefixEl = root.querySelector('.cascade-trigger > [talosPrefix], .cascade-trigger > [talosTextPrefix], .cascade-trigger > [talos-prefix], .cascade-trigger > [talos-text-prefix], .cascade-trigger > [talosLead], .cascade-trigger > [talosStart], .cascade-trigger > [prefix], .cascade-trigger > .talos-input-prefix');
+        this.hasPrefix.set(!!prefixEl);
+        const suffixEl = root.querySelector('.cascade-trigger > [talosSuffix], .cascade-trigger > [talosPostfix], .cascade-trigger > [talosTextSuffix], .cascade-trigger > [talosTextPostfix], .cascade-trigger > [talos-suffix], .cascade-trigger > [talos-postfix], .cascade-trigger > [talosTrail], .cascade-trigger > [talosEnd], .cascade-trigger > [suffix], .cascade-trigger > .talos-input-suffix');
+        this.hasSuffix.set(!!suffixEl);
+        if (prefixEl) {
+            const prefixWidth = prefixEl.getBoundingClientRect().width;
+            if (prefixWidth > 0) {
+                root.style.setProperty('--talos-prefix-offset', `${Math.round(prefixWidth + 16)}px`);
+            }
+        }
+        else {
+            root.style.removeProperty('--talos-prefix-offset');
+        }
+        if (suffixEl) {
+            const suffixWidth = suffixEl.getBoundingClientRect().width;
+            if (suffixWidth > 0) {
+                root.style.setProperty('--talos-suffix-offset', `${Math.round(suffixWidth + 16)}px`);
+            }
+        }
+        else {
+            root.style.removeProperty('--talos-suffix-offset');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CascadeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: CascadeSelectComponent, isStandalone: true, selector: "talos-cascade-select", inputs: { options: { classPropertyName: "options", publicName: "options", 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 }, 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, valueMode: { classPropertyName: "valueMode", publicName: "valueMode", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pathChange: "pathChange", selectionChange: "selectionChange", opened: "opened", closed: "closed" }, host: { attributes: { "role": "combobox" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-disabled": "disabled()", "class.talos-cascade-select": "true", "class.is-open": "isOpen()", "class.is-disabled": "disabled()", "class.has-prefix": "hasPrefix()", "class.has-suffix": "hasSuffix()", "class.cascade-sm": "size() === \"sm\"", "class.cascade-md": "size() === \"md\"", "class.cascade-lg": "size() === \"lg\"" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CascadeSelectComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "triggerBoxEl", first: true, predicate: ["triggerBox"], descendants: true }], ngImport: i0, template: "@if (label() && !isFloatingMode()) {\n  <label class=\"talos-field-label\" (click)=\"toggleDropdown()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"required-star\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"cascade-select-wrapper\" [class.is-focused]=\"isOpen()\">\n  <!-- Main Select Trigger Box -->\n  <div\n    #triggerBox\n    class=\"cascade-trigger\"\n    [class.is-empty]=\"!displayLabel()\"\n    [class.is-disabled]=\"disabled()\"\n    [class.has-error]=\"hasError()\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\">\n\n    <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n    <!-- Display Value or Placeholder -->\n    <div class=\"trigger-content\">\n      @if (displayLabel()) {\n        <span class=\"display-text\">{{ displayLabel() }}</span>\n      } @else if (!isFloatingMode() || isFloated()) {\n        <span class=\"placeholder-text\">{{ placeholder() }}</span>\n      }\n    </div>\n\n    <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n    <!-- Actions (Clear & Chevron) -->\n    <div class=\"trigger-actions\">\n      @if (clearable() && displayLabel() && !disabled()) {\n        <button\n          type=\"button\"\n          class=\"clear-button\"\n          aria-label=\"Clear selection\"\n          title=\"Clear selection\"\n          (click)=\"onClear($event)\">\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      <span class=\"chevron-icon\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\n        </svg>\n      </span>\n    </div>\n  </div>\n\n  @if (label() && isFloatingMode()) {\n    <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleDropdown()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"required-star\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Cascading Dropdown Overlay -->\n  @if (isOpen()) {\n    <div class=\"cascade-dropdown-panel\" (click)=\"$event.stopPropagation()\">\n      <!-- Typeahead Search Container -->\n      @if (searchable()) {\n        <div class=\"cascade-search-container\">\n          <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" 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          </svg>\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"cascade-search-input search-input\"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchTerm()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeyDown($event)\"\n            aria-label=\"Search cascade hierarchy\" />\n\n          @if (searchTerm()) {\n            <button type=\"button\" class=\"cascade-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Search Results View -->\n      @if (searchTerm()) {\n        <div class=\"search-results-list\">\n          @if (filteredSearchResults().length === 0) {\n            <div class=\"empty-state\">No matching paths found</div>\n          } @else {\n            @for (match of filteredSearchResults(); track match.labelPath; let idx = $index) {\n              <div\n                class=\"search-result-item\"\n                [class.is-highlighted]=\"idx === highlightedSearchIndex()\"\n                [class.is-disabled]=\"match.disabled\"\n                (click)=\"selectSearchResult(match)\">\n                <span class=\"match-path\">{{ match.labelPath }}</span>\n              </div>\n            }\n          }\n        </div>\n      } @else {\n        <!-- Side-by-Side Multi-Column Cascade Drilldown -->\n        <div class=\"cascade-columns-container\">\n          @for (col of activeColumns(); track col.depth; let colIdx = $index) {\n            <div class=\"cascade-column\" [attr.data-depth]=\"colIdx\">\n              @if (col.options.length === 0) {\n                <div class=\"empty-column-state\">No options</div>\n              } @else {\n                <div class=\"column-options-list\">\n                  @for (opt of col.options; track opt.value; let rowIdx = $index) {\n                    <div\n                      class=\"cascade-option-item\"\n                      [class.is-selected]=\"isOptionSelected(colIdx, opt)\"\n                      [class.is-active-branch]=\"isOptionActiveBranch(colIdx, opt)\"\n                      [class.is-disabled]=\"opt.disabled\"\n                      (mouseenter)=\"onOptionHover(colIdx, opt)\"\n                      (click)=\"onOptionClick(colIdx, opt)\">\n                      \n                      @if (opt.icon) {\n                        <span class=\"option-icon\">{{ opt.icon }}</span>\n                      }\n                      \n                      <span class=\"option-label\">{{ opt.label }}</span>\n                      \n                      @if (hasChildren(opt)) {\n                        <span class=\"option-arrow\">\n                          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <polyline points=\"9 18 15 12 9 6\"></polyline>\n                          </svg>\n                        </span>\n                      } @else if (isOptionSelected(colIdx, opt)) {\n                        <span class=\"option-check\">\n                          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                            <polyline points=\"20 6 9 17 4 12\"></polyline>\n                          </svg>\n                        </span>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--cascade-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--cascade-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--cascade-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--cascade-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--cascade-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--cascade-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--cascade-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--cascade-radius: var(--talos-border-radius, .375rem);--cascade-height: var(--talos-control-height, 2.25rem);--cascade-padding-x: var(--talos-control-padding-x, .625rem);--cascade-font-size: var(--talos-control-font-size, .8125rem);--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);--cascade-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--cascade-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--cascade-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.cascade-sm{--cascade-height: 2rem;--cascade-padding-x: .5rem;--cascade-font-size: .8125rem;--cascade-radius: .25rem;--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.cascade-md{--cascade-height: 2.25rem;--cascade-padding-x: .625rem;--cascade-font-size: .8125rem;--cascade-radius: .375rem;--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.cascade-lg{--cascade-height: 2.625rem;--cascade-padding-x: .75rem;--cascade-font-size: .875rem;--cascade-radius: .375rem;--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 .cascade-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label,.cascade-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,.cascade-label .required-star{color:var(--talos-error-color, var(--talos-danger-color, #ef4444));margin-left:.25rem}.cascade-select-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label,.floating-label{position:absolute;left:var(--cascade-padding-x, .625rem);top:calc(var(--cascade-height, 2.25rem) / 2);transform:translateY(-50%);font-size:var(--cascade-font-size, .8125rem);font-weight:500;color:var(--cascade-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--cascade-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)}.talos-floating-label .required-star,.floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated,.floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-open) .floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.cascade-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--cascade-height, 2.25rem);min-height:var(--cascade-height, 2.25rem);padding:0 var(--cascade-padding-x, .625rem);background-color:var(--cascade-bg, #ffffff);border:1px solid var(--cascade-border, #cbd5e1);border-radius:var(--cascade-radius, .375rem);font-size:var(--cascade-font-size, .8125rem);color:var(--cascade-color, #0f172a);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.cascade-trigger:hover:not(.is-disabled){border-color:var(--cascade-border-hover, #64748b)}.cascade-trigger:focus-visible:not(.is-disabled),:host(.is-open) .cascade-trigger,.is-focused .cascade-trigger{border-color:var(--cascade-border-focus, #2563eb);box-shadow:var(--cascade-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .15))}.cascade-trigger.is-disabled{opacity:.55;background-color:var(--talos-bg-muted, #f8fafc);cursor:not-allowed}.cascade-trigger.has-error{border-color:var(--talos-danger-color, #ef4444)}.cascade-trigger.has-error:focus-visible{box-shadow:0 0 0 3px #ef444426}.trigger-content{flex:1;min-width:0;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:.5rem}.trigger-content .display-text{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-content .placeholder-text{color:var(--cascade-placeholder-color, var(--talos-text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.trigger-actions .clear-button{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}.trigger-actions .clear-button:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.trigger-actions .clear-button:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.trigger-actions .clear-button svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.trigger-actions .chevron-icon{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.trigger-actions .chevron-icon svg{width:.875rem;height:.875rem}.trigger-actions .chevron-icon.is-open{transform:rotate(180deg)}.cascade-dropdown-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:var(--talos-border-radius, .375rem);box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000000d;display:flex;flex-direction:column;min-width:100%;max-width:90vw;overflow:hidden;animation:panelFadeIn .15s ease-out}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.cascade-search-container{position:relative;display:flex;align-items:center;padding:.375rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);background-color:var(--talos-bg-subtle, #f8fafc)}.cascade-search-container .search-icon{position:absolute;left:.875rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none;z-index:2}.cascade-search-container .cascade-search-input{width:100%;height:2rem;padding:.25rem 1.875rem .25rem 2.125rem;font-size:.8125rem;font-family:inherit;color:var(--talos-text-color, #0f172a);background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .25rem);outline:none;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.cascade-search-container .cascade-search-input:focus{border-color:var(--talos-primary-color, #3b82f6);box-shadow:0 0 0 2px #3b82f626}.cascade-search-container .cascade-search-input::placeholder{color:var(--talos-placeholder-color, var(--talos-text-muted, #94a3b8))}.cascade-search-container .cascade-search-clear{position:absolute;right:.75rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;z-index:2}.cascade-search-container .cascade-search-clear:hover{color:var(--talos-text-color, #0f172a)}.cascade-search-container .cascade-search-clear svg{width:.75rem;height:.75rem}.search-results-list{max-height:16rem;overflow-y:auto;padding:.25rem}.search-results-list .empty-state{padding:1.25rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8)}.search-results-list .search-result-item{padding:.5rem .75rem;font-size:.8125rem;border-radius:.25rem;cursor:pointer;transition:background-color .12s ease,color .12s ease;color:var(--talos-text-color, #1e293b)}.search-results-list .search-result-item:hover:not(.is-disabled),.search-results-list .search-result-item.is-highlighted:not(.is-disabled){background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb)}.search-results-list .search-result-item.is-disabled{opacity:.5;cursor:not-allowed}.search-results-list .search-result-item .match-path{font-weight:500}.cascade-columns-container{display:flex;flex-direction:row;overflow-x:auto;min-height:12rem;max-height:18rem}.cascade-column{min-width:11rem;max-width:16rem;border-right:1px solid var(--talos-border-color, #f1f5f9);overflow-y:auto;padding:.25rem}.cascade-column:last-child{border-right:none}.cascade-column .empty-column-state{padding:1rem;text-align:center;font-size:.75rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item{display:flex;align-items:center;padding:.4375rem .625rem;border-radius:.25rem;font-size:.8125rem;color:var(--talos-text-color, #1e293b);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin-bottom:.125rem}.cascade-option-item:hover:not(.is-disabled){background-color:var(--talos-primary-light, #f1f5f9);color:var(--talos-text-color, #0f172a)}.cascade-option-item.is-active-branch,.cascade-option-item.is-selected{background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb);font-weight:600}.cascade-option-item.is-disabled{opacity:.45;cursor:not-allowed}.cascade-option-item .option-icon{margin-right:.375rem;font-size:.9375rem}.cascade-option-item .option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cascade-option-item .option-arrow{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item .option-arrow svg{width:.75rem;height:.75rem}.cascade-option-item .option-check{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-primary-color, #2563eb)}.cascade-option-item .option-check svg{width:.875rem;height:.875rem}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--cascade-padding-x, .75rem) + 1.625rem))!important}:host(.has-prefix.cascade-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.cascade-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.75rem)!important}::ng-deep .cascade-trigger>[talosPrefix],::ng-deep .cascade-trigger>[talosTextPrefix],::ng-deep .cascade-trigger>[talosLead],::ng-deep .cascade-trigger>[talosStart],::ng-deep .cascade-trigger>[prefix],::ng-deep .cascade-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosPrefix] button,::ng-deep .cascade-trigger>[talosPrefix] a,::ng-deep .cascade-trigger>[talosTextPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPrefix] button,::ng-deep .cascade-trigger>[talosTextPrefix] a,::ng-deep .cascade-trigger>[talosLead].affix-interactive,::ng-deep .cascade-trigger>[talosLead] button,::ng-deep .cascade-trigger>[talosLead] a,::ng-deep .cascade-trigger>[talosStart].affix-interactive,::ng-deep .cascade-trigger>[talosStart] button,::ng-deep .cascade-trigger>[talosStart] a,::ng-deep .cascade-trigger>[prefix].affix-interactive,::ng-deep .cascade-trigger>[prefix] button,::ng-deep .cascade-trigger>[prefix] a,::ng-deep .cascade-trigger>.talos-input-prefix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-prefix button,::ng-deep .cascade-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosPrefix]:hover,::ng-deep .cascade-trigger>[talosPrefix]:active,::ng-deep .cascade-trigger>[talosPrefix]:focus,::ng-deep .cascade-trigger>[talosPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPrefix]:hover,::ng-deep .cascade-trigger>[talosTextPrefix]:active,::ng-deep .cascade-trigger>[talosTextPrefix]:focus,::ng-deep .cascade-trigger>[talosTextPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosLead]:hover,::ng-deep .cascade-trigger>[talosLead]:active,::ng-deep .cascade-trigger>[talosLead]:focus,::ng-deep .cascade-trigger>[talosLead]:focus-visible,::ng-deep .cascade-trigger>[talosStart]:hover,::ng-deep .cascade-trigger>[talosStart]:active,::ng-deep .cascade-trigger>[talosStart]:focus,::ng-deep .cascade-trigger>[talosStart]:focus-visible,::ng-deep .cascade-trigger>[prefix]:hover,::ng-deep .cascade-trigger>[prefix]:active,::ng-deep .cascade-trigger>[prefix]:focus,::ng-deep .cascade-trigger>[prefix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-prefix:hover,::ng-deep .cascade-trigger>.talos-input-prefix:active,::ng-deep .cascade-trigger>.talos-input-prefix:focus,::ng-deep .cascade-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>[talosSuffix],::ng-deep .cascade-trigger>[talosPostfix],::ng-deep .cascade-trigger>[talosTextSuffix],::ng-deep .cascade-trigger>[talosTextPostfix],::ng-deep .cascade-trigger>[talosTrail],::ng-deep .cascade-trigger>[talosEnd],::ng-deep .cascade-trigger>[suffix],::ng-deep .cascade-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosSuffix] button,::ng-deep .cascade-trigger>[talosSuffix] a,::ng-deep .cascade-trigger>[talosPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosPostfix] button,::ng-deep .cascade-trigger>[talosPostfix] a,::ng-deep .cascade-trigger>[talosTextSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosTextSuffix] button,::ng-deep .cascade-trigger>[talosTextSuffix] a,::ng-deep .cascade-trigger>[talosTextPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPostfix] button,::ng-deep .cascade-trigger>[talosTextPostfix] a,::ng-deep .cascade-trigger>[talosTrail].affix-interactive,::ng-deep .cascade-trigger>[talosTrail] button,::ng-deep .cascade-trigger>[talosTrail] a,::ng-deep .cascade-trigger>[talosEnd].affix-interactive,::ng-deep .cascade-trigger>[talosEnd] button,::ng-deep .cascade-trigger>[talosEnd] a,::ng-deep .cascade-trigger>[suffix].affix-interactive,::ng-deep .cascade-trigger>[suffix] button,::ng-deep .cascade-trigger>[suffix] a,::ng-deep .cascade-trigger>.talos-input-suffix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-suffix button,::ng-deep .cascade-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosSuffix]:hover,::ng-deep .cascade-trigger>[talosSuffix]:active,::ng-deep .cascade-trigger>[talosSuffix]:focus,::ng-deep .cascade-trigger>[talosSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosPostfix]:hover,::ng-deep .cascade-trigger>[talosPostfix]:active,::ng-deep .cascade-trigger>[talosPostfix]:focus,::ng-deep .cascade-trigger>[talosPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTextSuffix]:hover,::ng-deep .cascade-trigger>[talosTextSuffix]:active,::ng-deep .cascade-trigger>[talosTextSuffix]:focus,::ng-deep .cascade-trigger>[talosTextSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPostfix]:hover,::ng-deep .cascade-trigger>[talosTextPostfix]:active,::ng-deep .cascade-trigger>[talosTextPostfix]:focus,::ng-deep .cascade-trigger>[talosTextPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTrail]:hover,::ng-deep .cascade-trigger>[talosTrail]:active,::ng-deep .cascade-trigger>[talosTrail]:focus,::ng-deep .cascade-trigger>[talosTrail]:focus-visible,::ng-deep .cascade-trigger>[talosEnd]:hover,::ng-deep .cascade-trigger>[talosEnd]:active,::ng-deep .cascade-trigger>[talosEnd]:focus,::ng-deep .cascade-trigger>[talosEnd]:focus-visible,::ng-deep .cascade-trigger>[suffix]:hover,::ng-deep .cascade-trigger>[suffix]:active,::ng-deep .cascade-trigger>[suffix]:focus,::ng-deep .cascade-trigger>[suffix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-suffix:hover,::ng-deep .cascade-trigger>.talos-input-suffix:active,::ng-deep .cascade-trigger>.talos-input-suffix:focus,::ng-deep .cascade-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element,::ng-deep .cascade-trigger>button[talosPrefix],::ng-deep .cascade-trigger>button[talosSuffix],::ng-deep .cascade-trigger>button[talosPostfix],::ng-deep .cascade-trigger>button[talosLead],::ng-deep .cascade-trigger>button[talosTrail],::ng-deep .cascade-trigger>button[talosStart],::ng-deep .cascade-trigger>button[talosEnd],::ng-deep .cascade-trigger>button[talosAffixButton],::ng-deep .cascade-trigger>button.talos-affix-btn,::ng-deep .cascade-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .cascade-trigger>button.talos-affix-element svg,::ng-deep .cascade-trigger>button.talos-affix-element i,::ng-deep .cascade-trigger>button.talos-affix-element [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-element .lucide,::ng-deep .cascade-trigger>button[talosPrefix] svg,::ng-deep .cascade-trigger>button[talosPrefix] i,::ng-deep .cascade-trigger>button[talosPrefix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPrefix] .lucide,::ng-deep .cascade-trigger>button[talosSuffix] svg,::ng-deep .cascade-trigger>button[talosSuffix] i,::ng-deep .cascade-trigger>button[talosSuffix] [lucideIcon],::ng-deep .cascade-trigger>button[talosSuffix] .lucide,::ng-deep .cascade-trigger>button[talosPostfix] svg,::ng-deep .cascade-trigger>button[talosPostfix] i,::ng-deep .cascade-trigger>button[talosPostfix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPostfix] .lucide,::ng-deep .cascade-trigger>button[talosLead] svg,::ng-deep .cascade-trigger>button[talosLead] i,::ng-deep .cascade-trigger>button[talosLead] [lucideIcon],::ng-deep .cascade-trigger>button[talosLead] .lucide,::ng-deep .cascade-trigger>button[talosTrail] svg,::ng-deep .cascade-trigger>button[talosTrail] i,::ng-deep .cascade-trigger>button[talosTrail] [lucideIcon],::ng-deep .cascade-trigger>button[talosTrail] .lucide,::ng-deep .cascade-trigger>button[talosStart] svg,::ng-deep .cascade-trigger>button[talosStart] i,::ng-deep .cascade-trigger>button[talosStart] [lucideIcon],::ng-deep .cascade-trigger>button[talosStart] .lucide,::ng-deep .cascade-trigger>button[talosEnd] svg,::ng-deep .cascade-trigger>button[talosEnd] i,::ng-deep .cascade-trigger>button[talosEnd] [lucideIcon],::ng-deep .cascade-trigger>button[talosEnd] .lucide,::ng-deep .cascade-trigger>button[talosAffixButton] svg,::ng-deep .cascade-trigger>button[talosAffixButton] i,::ng-deep .cascade-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .cascade-trigger>button[talosAffixButton] .lucide,::ng-deep .cascade-trigger>button.talos-affix-btn svg,::ng-deep .cascade-trigger>button.talos-affix-btn i,::ng-deep .cascade-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-btn .lucide,::ng-deep .cascade-trigger>.affix-interactive:is(button) svg,::ng-deep .cascade-trigger>.affix-interactive:is(button) i,::ng-deep .cascade-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .cascade-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .cascade-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .cascade-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CascadeSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-cascade-select', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CascadeSelectComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        'role': 'combobox',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[class.talos-cascade-select]': 'true',
+                        '[class.is-open]': 'isOpen()',
+                        '[class.is-disabled]': 'disabled()',
+                        '[class.has-prefix]': 'hasPrefix()',
+                        '[class.has-suffix]': 'hasSuffix()',
+                        '[class.cascade-sm]': 'size() === "sm"',
+                        '[class.cascade-md]': 'size() === "md"',
+                        '[class.cascade-lg]': 'size() === "lg"',
+                        '(document:click)': 'onDocumentClick($event)'
+                    }, template: "@if (label() && !isFloatingMode()) {\n  <label class=\"talos-field-label\" (click)=\"toggleDropdown()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"required-star\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"cascade-select-wrapper\" [class.is-focused]=\"isOpen()\">\n  <!-- Main Select Trigger Box -->\n  <div\n    #triggerBox\n    class=\"cascade-trigger\"\n    [class.is-empty]=\"!displayLabel()\"\n    [class.is-disabled]=\"disabled()\"\n    [class.has-error]=\"hasError()\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\">\n\n    <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n    <!-- Display Value or Placeholder -->\n    <div class=\"trigger-content\">\n      @if (displayLabel()) {\n        <span class=\"display-text\">{{ displayLabel() }}</span>\n      } @else if (!isFloatingMode() || isFloated()) {\n        <span class=\"placeholder-text\">{{ placeholder() }}</span>\n      }\n    </div>\n\n    <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n    <!-- Actions (Clear & Chevron) -->\n    <div class=\"trigger-actions\">\n      @if (clearable() && displayLabel() && !disabled()) {\n        <button\n          type=\"button\"\n          class=\"clear-button\"\n          aria-label=\"Clear selection\"\n          title=\"Clear selection\"\n          (click)=\"onClear($event)\">\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      <span class=\"chevron-icon\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\n        </svg>\n      </span>\n    </div>\n  </div>\n\n  @if (label() && isFloatingMode()) {\n    <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleDropdown()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"required-star\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Cascading Dropdown Overlay -->\n  @if (isOpen()) {\n    <div class=\"cascade-dropdown-panel\" (click)=\"$event.stopPropagation()\">\n      <!-- Typeahead Search Container -->\n      @if (searchable()) {\n        <div class=\"cascade-search-container\">\n          <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" 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          </svg>\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"cascade-search-input search-input\"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchTerm()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeyDown($event)\"\n            aria-label=\"Search cascade hierarchy\" />\n\n          @if (searchTerm()) {\n            <button type=\"button\" class=\"cascade-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Search Results View -->\n      @if (searchTerm()) {\n        <div class=\"search-results-list\">\n          @if (filteredSearchResults().length === 0) {\n            <div class=\"empty-state\">No matching paths found</div>\n          } @else {\n            @for (match of filteredSearchResults(); track match.labelPath; let idx = $index) {\n              <div\n                class=\"search-result-item\"\n                [class.is-highlighted]=\"idx === highlightedSearchIndex()\"\n                [class.is-disabled]=\"match.disabled\"\n                (click)=\"selectSearchResult(match)\">\n                <span class=\"match-path\">{{ match.labelPath }}</span>\n              </div>\n            }\n          }\n        </div>\n      } @else {\n        <!-- Side-by-Side Multi-Column Cascade Drilldown -->\n        <div class=\"cascade-columns-container\">\n          @for (col of activeColumns(); track col.depth; let colIdx = $index) {\n            <div class=\"cascade-column\" [attr.data-depth]=\"colIdx\">\n              @if (col.options.length === 0) {\n                <div class=\"empty-column-state\">No options</div>\n              } @else {\n                <div class=\"column-options-list\">\n                  @for (opt of col.options; track opt.value; let rowIdx = $index) {\n                    <div\n                      class=\"cascade-option-item\"\n                      [class.is-selected]=\"isOptionSelected(colIdx, opt)\"\n                      [class.is-active-branch]=\"isOptionActiveBranch(colIdx, opt)\"\n                      [class.is-disabled]=\"opt.disabled\"\n                      (mouseenter)=\"onOptionHover(colIdx, opt)\"\n                      (click)=\"onOptionClick(colIdx, opt)\">\n                      \n                      @if (opt.icon) {\n                        <span class=\"option-icon\">{{ opt.icon }}</span>\n                      }\n                      \n                      <span class=\"option-label\">{{ opt.label }}</span>\n                      \n                      @if (hasChildren(opt)) {\n                        <span class=\"option-arrow\">\n                          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <polyline points=\"9 18 15 12 9 6\"></polyline>\n                          </svg>\n                        </span>\n                      } @else if (isOptionSelected(colIdx, opt)) {\n                        <span class=\"option-check\">\n                          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                            <polyline points=\"20 6 9 17 4 12\"></polyline>\n                          </svg>\n                        </span>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--cascade-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--cascade-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--cascade-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--cascade-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--cascade-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--cascade-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--cascade-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--cascade-radius: var(--talos-border-radius, .375rem);--cascade-height: var(--talos-control-height, 2.25rem);--cascade-padding-x: var(--talos-control-padding-x, .625rem);--cascade-font-size: var(--talos-control-font-size, .8125rem);--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);--cascade-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--cascade-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--cascade-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.cascade-sm{--cascade-height: 2rem;--cascade-padding-x: .5rem;--cascade-font-size: .8125rem;--cascade-radius: .25rem;--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.cascade-md{--cascade-height: 2.25rem;--cascade-padding-x: .625rem;--cascade-font-size: .8125rem;--cascade-radius: .375rem;--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.cascade-lg{--cascade-height: 2.625rem;--cascade-padding-x: .75rem;--cascade-font-size: .875rem;--cascade-radius: .375rem;--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 .cascade-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label,.cascade-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,.cascade-label .required-star{color:var(--talos-error-color, var(--talos-danger-color, #ef4444));margin-left:.25rem}.cascade-select-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label,.floating-label{position:absolute;left:var(--cascade-padding-x, .625rem);top:calc(var(--cascade-height, 2.25rem) / 2);transform:translateY(-50%);font-size:var(--cascade-font-size, .8125rem);font-weight:500;color:var(--cascade-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--cascade-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)}.talos-floating-label .required-star,.floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated,.floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-open) .floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.cascade-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--cascade-height, 2.25rem);min-height:var(--cascade-height, 2.25rem);padding:0 var(--cascade-padding-x, .625rem);background-color:var(--cascade-bg, #ffffff);border:1px solid var(--cascade-border, #cbd5e1);border-radius:var(--cascade-radius, .375rem);font-size:var(--cascade-font-size, .8125rem);color:var(--cascade-color, #0f172a);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.cascade-trigger:hover:not(.is-disabled){border-color:var(--cascade-border-hover, #64748b)}.cascade-trigger:focus-visible:not(.is-disabled),:host(.is-open) .cascade-trigger,.is-focused .cascade-trigger{border-color:var(--cascade-border-focus, #2563eb);box-shadow:var(--cascade-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .15))}.cascade-trigger.is-disabled{opacity:.55;background-color:var(--talos-bg-muted, #f8fafc);cursor:not-allowed}.cascade-trigger.has-error{border-color:var(--talos-danger-color, #ef4444)}.cascade-trigger.has-error:focus-visible{box-shadow:0 0 0 3px #ef444426}.trigger-content{flex:1;min-width:0;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:.5rem}.trigger-content .display-text{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-content .placeholder-text{color:var(--cascade-placeholder-color, var(--talos-text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.trigger-actions .clear-button{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}.trigger-actions .clear-button:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.trigger-actions .clear-button:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.trigger-actions .clear-button svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.trigger-actions .chevron-icon{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.trigger-actions .chevron-icon svg{width:.875rem;height:.875rem}.trigger-actions .chevron-icon.is-open{transform:rotate(180deg)}.cascade-dropdown-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:var(--talos-border-radius, .375rem);box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000000d;display:flex;flex-direction:column;min-width:100%;max-width:90vw;overflow:hidden;animation:panelFadeIn .15s ease-out}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.cascade-search-container{position:relative;display:flex;align-items:center;padding:.375rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);background-color:var(--talos-bg-subtle, #f8fafc)}.cascade-search-container .search-icon{position:absolute;left:.875rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none;z-index:2}.cascade-search-container .cascade-search-input{width:100%;height:2rem;padding:.25rem 1.875rem .25rem 2.125rem;font-size:.8125rem;font-family:inherit;color:var(--talos-text-color, #0f172a);background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .25rem);outline:none;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.cascade-search-container .cascade-search-input:focus{border-color:var(--talos-primary-color, #3b82f6);box-shadow:0 0 0 2px #3b82f626}.cascade-search-container .cascade-search-input::placeholder{color:var(--talos-placeholder-color, var(--talos-text-muted, #94a3b8))}.cascade-search-container .cascade-search-clear{position:absolute;right:.75rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;z-index:2}.cascade-search-container .cascade-search-clear:hover{color:var(--talos-text-color, #0f172a)}.cascade-search-container .cascade-search-clear svg{width:.75rem;height:.75rem}.search-results-list{max-height:16rem;overflow-y:auto;padding:.25rem}.search-results-list .empty-state{padding:1.25rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8)}.search-results-list .search-result-item{padding:.5rem .75rem;font-size:.8125rem;border-radius:.25rem;cursor:pointer;transition:background-color .12s ease,color .12s ease;color:var(--talos-text-color, #1e293b)}.search-results-list .search-result-item:hover:not(.is-disabled),.search-results-list .search-result-item.is-highlighted:not(.is-disabled){background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb)}.search-results-list .search-result-item.is-disabled{opacity:.5;cursor:not-allowed}.search-results-list .search-result-item .match-path{font-weight:500}.cascade-columns-container{display:flex;flex-direction:row;overflow-x:auto;min-height:12rem;max-height:18rem}.cascade-column{min-width:11rem;max-width:16rem;border-right:1px solid var(--talos-border-color, #f1f5f9);overflow-y:auto;padding:.25rem}.cascade-column:last-child{border-right:none}.cascade-column .empty-column-state{padding:1rem;text-align:center;font-size:.75rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item{display:flex;align-items:center;padding:.4375rem .625rem;border-radius:.25rem;font-size:.8125rem;color:var(--talos-text-color, #1e293b);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin-bottom:.125rem}.cascade-option-item:hover:not(.is-disabled){background-color:var(--talos-primary-light, #f1f5f9);color:var(--talos-text-color, #0f172a)}.cascade-option-item.is-active-branch,.cascade-option-item.is-selected{background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb);font-weight:600}.cascade-option-item.is-disabled{opacity:.45;cursor:not-allowed}.cascade-option-item .option-icon{margin-right:.375rem;font-size:.9375rem}.cascade-option-item .option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cascade-option-item .option-arrow{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item .option-arrow svg{width:.75rem;height:.75rem}.cascade-option-item .option-check{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-primary-color, #2563eb)}.cascade-option-item .option-check svg{width:.875rem;height:.875rem}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--cascade-padding-x, .75rem) + 1.625rem))!important}:host(.has-prefix.cascade-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.cascade-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.75rem)!important}::ng-deep .cascade-trigger>[talosPrefix],::ng-deep .cascade-trigger>[talosTextPrefix],::ng-deep .cascade-trigger>[talosLead],::ng-deep .cascade-trigger>[talosStart],::ng-deep .cascade-trigger>[prefix],::ng-deep .cascade-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosPrefix] button,::ng-deep .cascade-trigger>[talosPrefix] a,::ng-deep .cascade-trigger>[talosTextPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPrefix] button,::ng-deep .cascade-trigger>[talosTextPrefix] a,::ng-deep .cascade-trigger>[talosLead].affix-interactive,::ng-deep .cascade-trigger>[talosLead] button,::ng-deep .cascade-trigger>[talosLead] a,::ng-deep .cascade-trigger>[talosStart].affix-interactive,::ng-deep .cascade-trigger>[talosStart] button,::ng-deep .cascade-trigger>[talosStart] a,::ng-deep .cascade-trigger>[prefix].affix-interactive,::ng-deep .cascade-trigger>[prefix] button,::ng-deep .cascade-trigger>[prefix] a,::ng-deep .cascade-trigger>.talos-input-prefix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-prefix button,::ng-deep .cascade-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosPrefix]:hover,::ng-deep .cascade-trigger>[talosPrefix]:active,::ng-deep .cascade-trigger>[talosPrefix]:focus,::ng-deep .cascade-trigger>[talosPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPrefix]:hover,::ng-deep .cascade-trigger>[talosTextPrefix]:active,::ng-deep .cascade-trigger>[talosTextPrefix]:focus,::ng-deep .cascade-trigger>[talosTextPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosLead]:hover,::ng-deep .cascade-trigger>[talosLead]:active,::ng-deep .cascade-trigger>[talosLead]:focus,::ng-deep .cascade-trigger>[talosLead]:focus-visible,::ng-deep .cascade-trigger>[talosStart]:hover,::ng-deep .cascade-trigger>[talosStart]:active,::ng-deep .cascade-trigger>[talosStart]:focus,::ng-deep .cascade-trigger>[talosStart]:focus-visible,::ng-deep .cascade-trigger>[prefix]:hover,::ng-deep .cascade-trigger>[prefix]:active,::ng-deep .cascade-trigger>[prefix]:focus,::ng-deep .cascade-trigger>[prefix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-prefix:hover,::ng-deep .cascade-trigger>.talos-input-prefix:active,::ng-deep .cascade-trigger>.talos-input-prefix:focus,::ng-deep .cascade-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>[talosSuffix],::ng-deep .cascade-trigger>[talosPostfix],::ng-deep .cascade-trigger>[talosTextSuffix],::ng-deep .cascade-trigger>[talosTextPostfix],::ng-deep .cascade-trigger>[talosTrail],::ng-deep .cascade-trigger>[talosEnd],::ng-deep .cascade-trigger>[suffix],::ng-deep .cascade-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosSuffix] button,::ng-deep .cascade-trigger>[talosSuffix] a,::ng-deep .cascade-trigger>[talosPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosPostfix] button,::ng-deep .cascade-trigger>[talosPostfix] a,::ng-deep .cascade-trigger>[talosTextSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosTextSuffix] button,::ng-deep .cascade-trigger>[talosTextSuffix] a,::ng-deep .cascade-trigger>[talosTextPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPostfix] button,::ng-deep .cascade-trigger>[talosTextPostfix] a,::ng-deep .cascade-trigger>[talosTrail].affix-interactive,::ng-deep .cascade-trigger>[talosTrail] button,::ng-deep .cascade-trigger>[talosTrail] a,::ng-deep .cascade-trigger>[talosEnd].affix-interactive,::ng-deep .cascade-trigger>[talosEnd] button,::ng-deep .cascade-trigger>[talosEnd] a,::ng-deep .cascade-trigger>[suffix].affix-interactive,::ng-deep .cascade-trigger>[suffix] button,::ng-deep .cascade-trigger>[suffix] a,::ng-deep .cascade-trigger>.talos-input-suffix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-suffix button,::ng-deep .cascade-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosSuffix]:hover,::ng-deep .cascade-trigger>[talosSuffix]:active,::ng-deep .cascade-trigger>[talosSuffix]:focus,::ng-deep .cascade-trigger>[talosSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosPostfix]:hover,::ng-deep .cascade-trigger>[talosPostfix]:active,::ng-deep .cascade-trigger>[talosPostfix]:focus,::ng-deep .cascade-trigger>[talosPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTextSuffix]:hover,::ng-deep .cascade-trigger>[talosTextSuffix]:active,::ng-deep .cascade-trigger>[talosTextSuffix]:focus,::ng-deep .cascade-trigger>[talosTextSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPostfix]:hover,::ng-deep .cascade-trigger>[talosTextPostfix]:active,::ng-deep .cascade-trigger>[talosTextPostfix]:focus,::ng-deep .cascade-trigger>[talosTextPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTrail]:hover,::ng-deep .cascade-trigger>[talosTrail]:active,::ng-deep .cascade-trigger>[talosTrail]:focus,::ng-deep .cascade-trigger>[talosTrail]:focus-visible,::ng-deep .cascade-trigger>[talosEnd]:hover,::ng-deep .cascade-trigger>[talosEnd]:active,::ng-deep .cascade-trigger>[talosEnd]:focus,::ng-deep .cascade-trigger>[talosEnd]:focus-visible,::ng-deep .cascade-trigger>[suffix]:hover,::ng-deep .cascade-trigger>[suffix]:active,::ng-deep .cascade-trigger>[suffix]:focus,::ng-deep .cascade-trigger>[suffix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-suffix:hover,::ng-deep .cascade-trigger>.talos-input-suffix:active,::ng-deep .cascade-trigger>.talos-input-suffix:focus,::ng-deep .cascade-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element,::ng-deep .cascade-trigger>button[talosPrefix],::ng-deep .cascade-trigger>button[talosSuffix],::ng-deep .cascade-trigger>button[talosPostfix],::ng-deep .cascade-trigger>button[talosLead],::ng-deep .cascade-trigger>button[talosTrail],::ng-deep .cascade-trigger>button[talosStart],::ng-deep .cascade-trigger>button[talosEnd],::ng-deep .cascade-trigger>button[talosAffixButton],::ng-deep .cascade-trigger>button.talos-affix-btn,::ng-deep .cascade-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .cascade-trigger>button.talos-affix-element svg,::ng-deep .cascade-trigger>button.talos-affix-element i,::ng-deep .cascade-trigger>button.talos-affix-element [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-element .lucide,::ng-deep .cascade-trigger>button[talosPrefix] svg,::ng-deep .cascade-trigger>button[talosPrefix] i,::ng-deep .cascade-trigger>button[talosPrefix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPrefix] .lucide,::ng-deep .cascade-trigger>button[talosSuffix] svg,::ng-deep .cascade-trigger>button[talosSuffix] i,::ng-deep .cascade-trigger>button[talosSuffix] [lucideIcon],::ng-deep .cascade-trigger>button[talosSuffix] .lucide,::ng-deep .cascade-trigger>button[talosPostfix] svg,::ng-deep .cascade-trigger>button[talosPostfix] i,::ng-deep .cascade-trigger>button[talosPostfix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPostfix] .lucide,::ng-deep .cascade-trigger>button[talosLead] svg,::ng-deep .cascade-trigger>button[talosLead] i,::ng-deep .cascade-trigger>button[talosLead] [lucideIcon],::ng-deep .cascade-trigger>button[talosLead] .lucide,::ng-deep .cascade-trigger>button[talosTrail] svg,::ng-deep .cascade-trigger>button[talosTrail] i,::ng-deep .cascade-trigger>button[talosTrail] [lucideIcon],::ng-deep .cascade-trigger>button[talosTrail] .lucide,::ng-deep .cascade-trigger>button[talosStart] svg,::ng-deep .cascade-trigger>button[talosStart] i,::ng-deep .cascade-trigger>button[talosStart] [lucideIcon],::ng-deep .cascade-trigger>button[talosStart] .lucide,::ng-deep .cascade-trigger>button[talosEnd] svg,::ng-deep .cascade-trigger>button[talosEnd] i,::ng-deep .cascade-trigger>button[talosEnd] [lucideIcon],::ng-deep .cascade-trigger>button[talosEnd] .lucide,::ng-deep .cascade-trigger>button[talosAffixButton] svg,::ng-deep .cascade-trigger>button[talosAffixButton] i,::ng-deep .cascade-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .cascade-trigger>button[talosAffixButton] .lucide,::ng-deep .cascade-trigger>button.talos-affix-btn svg,::ng-deep .cascade-trigger>button.talos-affix-btn i,::ng-deep .cascade-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-btn .lucide,::ng-deep .cascade-trigger>.affix-interactive:is(button) svg,::ng-deep .cascade-trigger>.affix-interactive:is(button) i,::ng-deep .cascade-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .cascade-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .cascade-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .cascade-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], valueMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueMode", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pathChange: [{ type: i0.Output, args: ["pathChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchInputEl: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], triggerBoxEl: [{
+                type: ViewChild,
+                args: ['triggerBox']
+            }] } });
+
+/**
+ * Convenience NgModule wrapping the standalone select input, option, and cascade select components.
+ *
+ * Allows developers who prefer `SelectInputModule` to import it into standalone components
+ * or legacy NgModule-based applications.
+ */
+class SelectInputModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule, imports: [SelectInputComponent,
+            OptionComponent,
+            OptionGroupComponent,
+            CascadeSelectComponent], exports: [SelectInputComponent,
+            OptionComponent,
+            OptionGroupComponent,
+            CascadeSelectComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SelectInputComponent,
+                        OptionComponent,
+                        OptionGroupComponent,
+                        CascadeSelectComponent
+                    ],
+                    exports: [
+                        SelectInputComponent,
+                        OptionComponent,
+                        OptionGroupComponent,
+                        CascadeSelectComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CascadeSelectComponent, OptionComponent, OptionGroupComponent, SelectInputComponent, SelectInputModule };
+//# sourceMappingURL=weeehaoooz-talos-ui-form-select-input.mjs.map