@raintonic/formaui 0.2.0

package/fesm2022/raintonic-formaui-components-autocomplete.mjs

@@ -0,0 +1,726 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, output, signal, inject, computed, contentChildren, ElementRef, NgZone, effect, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgForm, FormGroupDirective, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DOCUMENT } from '@angular/common';
+import { Subject, Subscription, fromEvent } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+import { FuiButtonDirective } from '@raintonic/formaui/components/button';
+import { DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
+import { FuiOptionComponent } from '@raintonic/formaui/components/select';
+import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
+
+/**
+ * Injection token used to provide the parent autocomplete to options
+ */
+const FUI_AUTOCOMPLETE = new InjectionToken('FUI_AUTOCOMPLETE');
+/**
+ * # fui-autocomplete Component
+ *
+ * An autocomplete component designed to work seamlessly with fui-form-field.
+ * Similar to Angular Material's mat-autocomplete integration with mat-form-field.
+ * Provides full Reactive Forms support with validation, filtering, and optional
+ * add/refresh actions.
+ *
+ * ## Features
+ * - Works inside fui-form-field like mat-autocomplete
+ * - Full Reactive Forms integration (ControlValueAccessor)
+ * - Options via projected content (fui-option)
+ * - Built-in search/filter input in the panel
+ * - Optional "Add New" and "Refresh" action buttons
+ * - Disabled and readonly states
+ * - Full accessibility support
+ * - Full keyboard navigation (Arrow keys, Enter, Escape, Home, End, PageUp, PageDown)
+ * - Uses overlay service for proper positioning
+ *
+ * ## Usage
+ *
+ * ### Basic Autocomplete with Form Field
+ * ```html
+ * <fui-form-field>
+ *   <label>Country</label>
+ *   <fui-autocomplete placeholder="Search countries...">
+ *     <fui-option value="us">United States</fui-option>
+ *     <fui-option value="ca">Canada</fui-option>
+ *     <fui-option value="mx">Mexico</fui-option>
+ *   </fui-autocomplete>
+ * </fui-form-field>
+ * ```
+ *
+ * ### With Reactive Forms and Validation
+ * ```html
+ * <form [formGroup]="form">
+ *   <fui-form-field>
+ *     <label>Country</label>
+ *     <fui-autocomplete formControlName="country" placeholder="Select a country">
+ *       <fui-option value="us">United States</fui-option>
+ *       <fui-option value="ca">Canada</fui-option>
+ *     </fui-autocomplete>
+ *     <fui-error *ngIf="form.get('country')?.hasError('required')">
+ *       Country is required
+ *     </fui-error>
+ *   </fui-form-field>
+ * </form>
+ * ```
+ *
+ * ### With Add/Refresh Buttons
+ * ```html
+ * <fui-form-field>
+ *   <label>Category</label>
+ *   <fui-autocomplete
+ *     placeholder="Search categories..."
+ *     [showAddButton]="true"
+ *     [showRefreshButton]="true"
+ *     (addNew)="openAddCategoryDialog()"
+ *     (refresh)="refreshCategories()">
+ *     @for (category of categories; track category.id) {
+ *       <fui-option [value]="category.id">{{ category.name }}</fui-option>
+ *     }
+ *   </fui-autocomplete>
+ * </fui-form-field>
+ * ```
+ */
+class FuiAutocompleteComponent {
+    // Static properties
+    static nextId = 0;
+    controlType = 'fui-autocomplete';
+    // Inputs using signal-based API
+    placeholderInput = input('', { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    showAddButton = input(false, ...(ngDevMode ? [{ debugName: "showAddButton" }] : /* istanbul ignore next */ []));
+    showRefreshButton = input(false, ...(ngDevMode ? [{ debugName: "showRefreshButton" }] : /* istanbul ignore next */ []));
+    addButtonLabel = input('Add New', ...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
+    refreshButtonLabel = input('Refresh', ...(ngDevMode ? [{ debugName: "refreshButtonLabel" }] : /* istanbul ignore next */ []));
+    noOptionsText = input('No options found', ...(ngDevMode ? [{ debugName: "noOptionsText" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to compare option values using object identity or deep equality
+     */
+    compareWith = input((o1, o2) => o1 === o2, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    // Outputs
+    valueChange = output();
+    selectionChange = output();
+    openedChange = output();
+    addNew = output();
+    refresh = output();
+    searchChange = output();
+    // Internal state signals
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _readOnly = signal(false, ...(ngDevMode ? [{ debugName: "_readOnly" }] : /* istanbul ignore next */ []));
+    // FuiFormFieldControl implementation
+    stateChanges = new Subject();
+    _uid = `fui-autocomplete-${FuiAutocompleteComponent.nextId++}`;
+    _ariaDescribedby = null;
+    // Error state
+    _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
+    errorState = this._errorState;
+    // Form control references
+    _parentForm = inject(NgForm, { optional: true });
+    _parentFormGroup = inject(FormGroupDirective, { optional: true });
+    _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);
+    _ngControlRef = injectNgControl();
+    get ngControl() {
+        return this._ngControlRef.ngControl;
+    }
+    // Interface implementation
+    placeholder = computed(() => this.placeholderInput(), ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    _required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : /* istanbul ignore next */ []));
+    required = this._required;
+    value = this._value;
+    focused = this._focused;
+    _ngControlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_ngControlDisabled" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this._disabled() || this.disabledInput() || this._ngControlDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    empty = computed(() => {
+        const val = this._value();
+        return val === null || val === undefined;
+    }, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    id = this._uid;
+    // ViewChild for trigger and panel
+    trigger;
+    panel;
+    searchInput;
+    // ContentChildren for options
+    options = contentChildren(FuiOptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
+    // Panel open/close state
+    panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+    // Search term for filtering
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    // Active option index for keyboard navigation
+    activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []));
+    // Live announcement for screen readers
+    _liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "_liveAnnouncement" }] : /* istanbul ignore next */ []));
+    _announce(message) {
+        this._liveAnnouncement.set('');
+        setTimeout(() => {
+            this._liveAnnouncement.set(message);
+        }, 50);
+    }
+    // Overlay reference
+    _overlayRef = null;
+    _overlaySubscriptions = new Subscription();
+    // Services
+    _overlayService = inject(FuiOverlayService);
+    _elementRef = inject(ElementRef);
+    _document = inject(DOCUMENT);
+    _ngZone = inject(NgZone);
+    _outsideClickSub;
+    // ControlValueAccessor callbacks
+    _onChange = () => {
+        // Intentionally empty: will be replaced by Angular forms
+    };
+    _onTouched = () => {
+        // Intentionally empty: will be replaced by Angular forms
+    };
+    // Computed properties
+    displayValue = computed(() => {
+        const currentValue = this.value();
+        const opts = this.options();
+        if (currentValue === null || currentValue === undefined) {
+            return '';
+        }
+        const selectedOption = opts.find((opt) => this.compareWith()(opt.value(), currentValue));
+        return selectedOption ? selectedOption.getLabel() : String(currentValue);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    // Filtered options based on search term
+    filteredOptions = computed(() => {
+        const opts = this.options();
+        const term = this.searchTerm().toLowerCase().trim();
+        if (!term) {
+            return opts.filter((opt) => !opt.disabled());
+        }
+        return opts.filter((opt) => !opt.disabled() && opt.getLabel().toLowerCase().includes(term));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    hasFilteredOptions = computed(() => {
+        return this.filteredOptions().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasFilteredOptions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Set valueAccessor after NgControl is resolved
+        void Promise.resolve().then(() => {
+            if (this._ngControlRef.ngControl) {
+                this._ngControlRef.ngControl.valueAccessor = this;
+            }
+        });
+        // Effect to emit state changes
+        effect(() => {
+            // Track all reactive inputs and internal signals
+            this.placeholderInput();
+            this.readonly();
+            this.disabledInput();
+            this.errorStateMatcher();
+            this._focused();
+            this._disabled();
+            this._value();
+            this._ngControlDisabled();
+            this._required();
+            this._errorState();
+            // Emit state change
+            this.stateChanges.next();
+        });
+        // Effect to update options selected state when value changes
+        effect(() => {
+            const currentValue = this._value();
+            const opts = this.options();
+            const compareFn = this.compareWith();
+            opts.forEach((option) => {
+                const optValue = option.value();
+                const isSelected = compareFn(currentValue, optValue);
+                if (isSelected) {
+                    option.select();
+                }
+                else {
+                    option.deselect();
+                }
+            });
+            // Notify form-field that state may have changed
+            this.stateChanges.next();
+        });
+    }
+    ngDoCheck() {
+        if (this.ngControl) {
+            updateErrorState(this.ngControl, this._errorState, this.errorStateMatcher(), this._defaultErrorStateMatcher, this._parentForm, this._parentFormGroup, this.stateChanges);
+            syncRequiredState(this.ngControl, this._required, this.stateChanges);
+            syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._outsideClickSub?.unsubscribe();
+        this._disposeOverlay();
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this._value.set(value ?? null);
+        this.stateChanges.next();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+        this.stateChanges.next();
+    }
+    // FuiFormFieldControl implementation
+    onContainerClick(_event) {
+        if (!this.disabled()) {
+            this.toggle();
+        }
+    }
+    setDescribedByIds(ids) {
+        this._ariaDescribedby = ids.length ? ids.join(' ') : null;
+    }
+    setReadOnly(readOnly) {
+        this._readOnly.set(readOnly);
+    }
+    // Public methods
+    clear(event) {
+        event.stopPropagation();
+        this._value.set(null);
+        this._onChange(null);
+        this.valueChange.emit(null);
+        this.selectionChange.emit({ source: this, value: null });
+        this.stateChanges.next();
+    }
+    focus() {
+        this.trigger?.nativeElement.focus();
+    }
+    blur() {
+        this.trigger?.nativeElement.blur();
+    }
+    // Toggle panel open/close
+    toggle() {
+        if (this.disabled())
+            return;
+        if (this.panelOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    // Open the dropdown panel
+    open() {
+        if (this.disabled() || this.readonly() || this.panelOpen())
+            return;
+        this.panelOpen.set(true);
+        this._focused.set(true);
+        this.searchTerm.set('');
+        this.openedChange.emit(true);
+        // Set active option to currently selected or first option
+        this._setInitialActiveOption();
+        // Create overlay after the view updates
+        setTimeout(() => {
+            this._createOverlay();
+            this._scrollToActiveOption();
+            this._listenForOutsideClicks();
+            // Focus the search input
+            this.searchInput?.nativeElement.focus();
+        }, 0);
+    }
+    // Close the dropdown panel
+    close() {
+        if (!this.panelOpen())
+            return;
+        this._outsideClickSub?.unsubscribe();
+        this.panelOpen.set(false);
+        this._focused.set(false);
+        this.activeOptionIndex.set(-1);
+        this.searchTerm.set('');
+        this._disposeOverlay();
+        this.openedChange.emit(false);
+        this._onTouched();
+        // Clear active state on all options
+        this.options().forEach((opt) => {
+            opt.setInactive();
+        });
+        // Return focus to trigger
+        setTimeout(() => {
+            this.trigger?.nativeElement.focus();
+        }, 0);
+    }
+    // Handle option selection (called by FuiOptionComponent or internally)
+    _onOptionSelected(option) {
+        const newValue = option.value();
+        // Deselect previous option
+        const opts = this.options();
+        opts.forEach((opt) => {
+            if (opt !== option) {
+                opt.deselect();
+            }
+        });
+        option.select();
+        this._value.set(newValue);
+        this._onChange(newValue);
+        this.valueChange.emit(newValue);
+        this.selectionChange.emit({ source: this, value: newValue });
+        this._announce(`${option.getLabel()} selected`);
+        this.close();
+        this.stateChanges.next();
+    }
+    // Handle search input
+    onSearchInput(event) {
+        const target = event.target;
+        const term = target.value;
+        this.searchTerm.set(term);
+        this.searchChange.emit(term);
+        // Reset active index when search changes
+        const filtered = this.filteredOptions();
+        if (filtered.length > 0) {
+            this._setActiveOptionIndex(0);
+        }
+        else {
+            this.activeOptionIndex.set(-1);
+        }
+    }
+    // Handle add new action
+    onAddNew() {
+        this.close();
+        this.addNew.emit();
+    }
+    // Handle refresh action
+    onRefresh() {
+        this.refresh.emit();
+        // Keep panel open and clear search
+        this.searchTerm.set('');
+    }
+    // Get display value for trigger
+    _getDisplayValue() {
+        return this.displayValue();
+    }
+    // Handle keyboard navigation
+    _handleKeydown(event) {
+        if (this.disabled())
+            return;
+        const isOpen = this.panelOpen();
+        if (!isOpen) {
+            this._handleClosedKeydown(event);
+        }
+        else {
+            this._handleOpenKeydown(event);
+        }
+    }
+    // Handle keydown when panel is closed
+    _handleClosedKeydown(event) {
+        const key = event.key;
+        switch (key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.open();
+                break;
+        }
+    }
+    // Handle keydown when panel is open (for search input)
+    _handlePanelKeydown(event) {
+        if (this.disabled())
+            return;
+        const key = event.key;
+        const opts = this.filteredOptions();
+        const activeIndex = this.activeOptionIndex();
+        switch (key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this._setNextActiveOption(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._setNextActiveOption(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (opts.length > 0) {
+                    this._setActiveOptionIndex(0);
+                }
+                break;
+            case 'End':
+                event.preventDefault();
+                if (opts.length > 0) {
+                    this._setActiveOptionIndex(opts.length - 1);
+                }
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                if (opts.length > 0) {
+                    const pageSize = Math.min(10, opts.length);
+                    const newIndex = Math.min(activeIndex + pageSize, opts.length - 1);
+                    this._setActiveOptionIndex(newIndex);
+                }
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                if (opts.length > 0) {
+                    const pageSize = Math.min(10, opts.length);
+                    const newIndex = Math.max(activeIndex - pageSize, 0);
+                    this._setActiveOptionIndex(newIndex);
+                }
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (activeIndex >= 0 && activeIndex < opts.length) {
+                    this._onOptionSelected(opts[activeIndex]);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+            case 'Tab':
+                // Allow tab to close and move to next element
+                this.close();
+                break;
+        }
+    }
+    // Handle keydown when panel is open (for trigger)
+    _handleOpenKeydown(event) {
+        // Delegate to panel keydown handler
+        this._handlePanelKeydown(event);
+    }
+    // Set the next active option based on delta
+    _setNextActiveOption(delta) {
+        const opts = this.filteredOptions();
+        if (opts.length === 0)
+            return;
+        let currentIndex = this.activeOptionIndex();
+        if (currentIndex < 0) {
+            currentIndex = delta > 0 ? -1 : opts.length;
+        }
+        let newIndex = currentIndex + delta;
+        // Wrap around
+        if (newIndex < 0) {
+            newIndex = opts.length - 1;
+        }
+        else if (newIndex >= opts.length) {
+            newIndex = 0;
+        }
+        this._setActiveOptionIndex(newIndex);
+    }
+    // Set the active option index
+    _setActiveOptionIndex(index) {
+        const opts = this.filteredOptions();
+        if (index < 0 || index >= opts.length)
+            return;
+        // Update active state on options
+        const allOpts = this.options();
+        allOpts.forEach((opt) => {
+            opt.setInactive();
+        });
+        const activeOption = opts[index];
+        activeOption.setActive();
+        this.activeOptionIndex.set(index);
+        this._scrollToActiveOption();
+        this._announce(`${activeOption.getLabel()}, ${index + 1} of ${opts.length}`);
+    }
+    // Set initial active option when opening
+    _setInitialActiveOption() {
+        const opts = this.filteredOptions();
+        if (opts.length === 0) {
+            this.activeOptionIndex.set(-1);
+            return;
+        }
+        const currentValue = this._value();
+        const compareFn = this.compareWith();
+        // Find the selected option
+        let selectedIndex = -1;
+        if (currentValue !== null && currentValue !== undefined) {
+            selectedIndex = opts.findIndex((opt) => compareFn(opt.value(), currentValue));
+        }
+        const initialIndex = selectedIndex >= 0 ? selectedIndex : 0;
+        this._setActiveOptionIndex(initialIndex);
+    }
+    // Scroll to active option
+    _scrollToActiveOption() {
+        const opts = this.filteredOptions();
+        const activeIndex = this.activeOptionIndex();
+        if (activeIndex < 0 || activeIndex >= opts.length)
+            return;
+        const activeOption = opts[activeIndex];
+        const element = activeOption._getHostElement();
+        const panelElement = this.panel?.nativeElement;
+        if (element && panelElement) {
+            const optionsContainer = panelElement.querySelector('.fui-autocomplete__options');
+            if (optionsContainer) {
+                const optionTop = element.offsetTop - optionsContainer.offsetTop;
+                const optionBottom = optionTop + element.offsetHeight;
+                const containerTop = optionsContainer.scrollTop;
+                const containerBottom = containerTop + optionsContainer.clientHeight;
+                if (optionTop < containerTop) {
+                    optionsContainer.scrollTop = optionTop;
+                }
+                else if (optionBottom > containerBottom) {
+                    optionsContainer.scrollTop = optionBottom - optionsContainer.clientHeight;
+                }
+            }
+        }
+    }
+    // Start listening for outside clicks when panel opens
+    _listenForOutsideClicks() {
+        this._outsideClickSub?.unsubscribe();
+        this._ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                this._outsideClickSub = fromEvent(this._document, 'click')
+                    .pipe(filter(() => this.panelOpen()), filter((event) => {
+                    const target = event.target;
+                    const triggerElement = this.trigger?.nativeElement;
+                    const panelElement = this.panel?.nativeElement;
+                    const overlayElement = this._overlayRef?.overlayElement;
+                    return (!triggerElement?.contains(target) &&
+                        !panelElement?.contains(target) &&
+                        !overlayElement?.contains(target));
+                }))
+                    .subscribe(() => {
+                    this._ngZone.run(() => {
+                        this.close();
+                    });
+                });
+            });
+        });
+    }
+    // Create overlay for panel
+    _createOverlay() {
+        if (this._overlayRef || !this.panel || !this.trigger)
+            return;
+        const triggerElement = this.trigger.nativeElement;
+        const triggerWidth = triggerElement.getBoundingClientRect().width;
+        const positions = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 4,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -4,
+            },
+        ];
+        const positionStrategy = this._overlayService
+            .position()
+            .connectedTo(triggerElement, positions)
+            .withPush(true)
+            .withViewportMargin(8);
+        this._overlayRef = this._overlayService.create({
+            positionStrategy,
+            scrollStrategy: this._overlayService.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'fui-autocomplete-backdrop',
+            backdropClickBehavior: 'close',
+            panelClass: ['fui-autocomplete-overlay-panel'],
+            minWidth: triggerWidth,
+        });
+        // Track overlay subscriptions for proper cleanup
+        this._overlaySubscriptions.unsubscribe();
+        this._overlaySubscriptions = new Subscription();
+        this._overlaySubscriptions.add(this._overlayRef.backdropClick.subscribe(() => {
+            this.close();
+        }));
+        this._overlaySubscriptions.add(this._overlayRef.keydownEvents.subscribe((event) => {
+            if (event.key === 'Escape') {
+                this.close();
+            }
+        }));
+        // Attach panel to overlay
+        const panelElement = this.panel.nativeElement;
+        this._overlayRef.attach(panelElement);
+    }
+    // Dispose overlay
+    _disposeOverlay() {
+        this._overlaySubscriptions.unsubscribe();
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+    }
+    // Get the active option's id for aria-activedescendant
+    _getActiveDescendant() {
+        const opts = this.filteredOptions();
+        const activeIndex = this.activeOptionIndex();
+        if (activeIndex >= 0 && activeIndex < opts.length) {
+            return opts[activeIndex].id;
+        }
+        return null;
+    }
+    // Set active option by index (for template use)
+    setActiveOption(index, option) {
+        const allOpts = this.options();
+        allOpts.forEach((opt) => {
+            opt.setInactive();
+        });
+        option.setActive();
+        this.activeOptionIndex.set(index);
+    }
+    // Mat-autocomplete compatibility methods
+    get selected() {
+        return this.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiAutocompleteComponent, isStandalone: true, selector: "fui-autocomplete", inputs: { placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, refreshButtonLabel: { classPropertyName: "refreshButtonLabel", publicName: "refreshButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, noOptionsText: { classPropertyName: "noOptionsText", publicName: "noOptionsText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", openedChange: "openedChange", addNew: "addNew", refresh: "refresh", searchChange: "searchChange" }, host: { properties: { "attr.id": "id", "class.fui-autocomplete--open": "panelOpen()", "class.fui-autocomplete--disabled": "disabled()", "class.fui-autocomplete--focused": "focused()", "class.fui-autocomplete--error": "errorState()", "class.fui-autocomplete--readonly": "_readOnly()" }, classAttribute: "fui-autocomplete" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: FuiAutocompleteComponent,
+                multi: true,
+            },
+            {
+                provide: FUI_FORM_FIELD_CONTROL,
+                useExisting: FuiAutocompleteComponent,
+            },
+            {
+                provide: FUI_AUTOCOMPLETE,
+                useExisting: FuiAutocompleteComponent,
+            },
+        ], queries: [{ propertyName: "options", predicate: FuiOptionComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<!-- Autocomplete Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  [attr.role]=\"'combobox'\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ _getDisplayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!_readOnly()) {\r\n    <!-- Clear button \u2014 visible only when a value is selected and not disabled -->\r\n    @if (!empty() && !disabled()) {\r\n      <span class=\"fui-autocomplete__clear\" role=\"button\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </span>\r\n    }\r\n\r\n    <!-- Dropdown arrow icon -->\r\n    <svg\r\n      class=\"fui-autocomplete__arrow\"\r\n      [class.fui-autocomplete__arrow--open]=\"panelOpen()\"\r\n      viewBox=\"0 0 16 16\"\r\n      fill=\"currentColor\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M8 11L3 6l.7-.7L8 9.6l4.3-4.3L13 6z\" />\r\n    </svg>\r\n  }\r\n</div>\r\n\r\n<!-- Hidden container for projected options (used for data binding) -->\r\n<div class=\"fui-autocomplete__options-source\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Dropdown Panel -->\r\n@if (panelOpen()) {\r\n  <div #panel [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\" [attr.aria-label]=\"placeholder()\">\r\n    <!-- Search Input -->\r\n    <div class=\"fui-autocomplete__search\">\r\n      <fui-icon name=\"magnifying-glass\" size=\"sm\" class=\"fui-autocomplete__search-icon\"> </fui-icon>\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"fui-autocomplete__search-input\"\r\n        [placeholder]=\"searchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        [attr.aria-label]=\"searchPlaceholder()\"\r\n        [attr.aria-controls]=\"id + '-panel-listbox'\"\r\n        [attr.aria-activedescendant]=\"_getActiveDescendant()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </div>\r\n    <!-- Live region for announcing result count to screen readers -->\r\n    <div class=\"fui-visually-hidden\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n      @if (_liveAnnouncement()) {\r\n        {{ _liveAnnouncement() }}\r\n      } @else if (hasFilteredOptions()) {\r\n        {{ filteredOptions().length }} results available.\r\n      } @else {\r\n        No results available.\r\n      }\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    @if (showAddButton() || showRefreshButton()) {\r\n      <div class=\"fui-autocomplete__actions\">\r\n        @if (showAddButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onAddNew()\"\r\n          >\r\n            <fui-icon name=\"plus\" size=\"sm\"></fui-icon>\r\n            {{ addButtonLabel() }}\r\n          </button>\r\n        }\r\n        @if (showRefreshButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onRefresh()\"\r\n          >\r\n            <fui-icon name=\"refresh-cw\" size=\"sm\"></fui-icon>\r\n            {{ refreshButtonLabel() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Options List -->\r\n    <div\r\n      class=\"fui-autocomplete__options\"\r\n      [id]=\"id + '-panel-listbox'\"\r\n      role=\"listbox\"\r\n      [attr.aria-label]=\"placeholder()\"\r\n    >\r\n      @if (hasFilteredOptions()) {\r\n        @for (option of filteredOptions(); track option.id; let i = $index) {\r\n          <div\r\n            class=\"fui-autocomplete__option\"\r\n            [class.fui-autocomplete__option--active]=\"activeOptionIndex() === i\"\r\n            [class.fui-autocomplete__option--selected]=\"option._selected()\"\r\n            role=\"option\"\r\n            [attr.id]=\"option.id\"\r\n            [attr.aria-selected]=\"option._selected()\"\r\n            (click)=\"_onOptionSelected(option)\"\r\n            (mouseenter)=\"setActiveOption(i, option)\"\r\n            (mouseleave)=\"option.setInactive()\"\r\n          >\r\n            <span class=\"fui-autocomplete__option-text\">{{ option.getLabel() }}</span>\r\n            @if (option._selected()) {\r\n              <fui-icon name=\"check\" size=\"sm\" class=\"fui-autocomplete__option-check\"></fui-icon>\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"fui-autocomplete__no-options\">\r\n          {{ noOptionsText() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-autocomplete{--fui-autocomplete-font-size: var(--fui-font-size-02);--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-border-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-03);--fui-autocomplete-panel-bg: var(--fui-surface-00);--fui-autocomplete-option-padding: .5rem .75rem;--fui-autocomplete-search-padding: .75rem;position:relative;display:inline-block;width:100%}.fui-autocomplete__options-source{display:none}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard);gap:.25rem}.fui-autocomplete__trigger:hover:not([aria-disabled=true]){background-color:var(--fui-field-background-hover)}.fui-autocomplete__trigger[aria-disabled=true]{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-icon-secondary);flex-shrink:0;border-radius:50%;transition:color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-background-hover)}.fui-autocomplete__arrow{width:1rem;height:1rem;flex-shrink:0;color:var(--fui-icon-primary);pointer-events:none;transition:transform var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__arrow--open{transform:rotate(180deg)}.fui-autocomplete__panel{position:absolute;width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column}.fui-autocomplete__search{position:relative;padding:.75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__search-icon{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);color:var(--fui-icon-secondary);pointer-events:none}.fui-autocomplete__search-input{width:100%;padding:.5rem .75rem .5rem 2.5rem;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-background-primary);color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),outline var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__search-input:focus{outline:2px solid var(--fui-primary);outline-offset:-2px;border-color:var(--fui-primary)}.fui-autocomplete__search-input::placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__actions{display:flex;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__action-button{display:flex;align-items:center;gap:.25rem;font-size:var(--fui-font-size-01)}.fui-autocomplete__action-button fui-icon{flex-shrink:0}.fui-autocomplete__options{max-height:16rem;overflow-y:auto;padding:.25rem 0;background-color:var(--fui-surface-01);scrollbar-width:thin;scrollbar-color:var(--fui-border-color) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-color);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__option{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;cursor:pointer;color:var(--fui-text-primary);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__option:hover:not(.fui-autocomplete__option--disabled){background-color:var(--fui-background-hover)}.fui-autocomplete__option--active{background-color:var(--fui-surface-05)}.fui-autocomplete__option--selected{background-color:var(--fui-surface-05);font-weight:600}.fui-autocomplete__option--disabled{color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-autocomplete__option-check{color:var(--fui-icon-primary);flex-shrink:0;margin-left:.5rem}.fui-autocomplete__no-options{padding:1rem .75rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);font-style:italic}.fui-autocomplete--disabled .fui-autocomplete__trigger{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-primary-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete--readonly .fui-autocomplete__trigger[aria-disabled=true]{background-color:transparent;color:var(--fui-text-primary);cursor:default}.fui-autocomplete--readonly .fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete--error .fui-autocomplete__trigger{border-bottom-color:var(--fui-error)}.fui-autocomplete--error .fui-autocomplete__trigger:focus{outline-color:var(--fui-error)}.fui-autocomplete-overlay-panel .fui-autocomplete__panel{border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);box-shadow:var(--fui-shadow-03)}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger,.fui-autocomplete__panel{border-width:2px}.fui-autocomplete__trigger:focus,.fui-autocomplete__search-input:focus{outline-width:3px}.fui-autocomplete__option--active,.fui-autocomplete__option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow,.fui-autocomplete__option,.fui-autocomplete__search-input{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-autocomplete', standalone: true, imports: [FuiIconComponent, ReactiveFormsModule, FuiButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-autocomplete',
+                        '[attr.id]': 'id',
+                        '[class.fui-autocomplete--open]': 'panelOpen()',
+                        '[class.fui-autocomplete--disabled]': 'disabled()',
+                        '[class.fui-autocomplete--focused]': 'focused()',
+                        '[class.fui-autocomplete--error]': 'errorState()',
+                        '[class.fui-autocomplete--readonly]': '_readOnly()',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: FuiAutocompleteComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: FUI_FORM_FIELD_CONTROL,
+                            useExisting: FuiAutocompleteComponent,
+                        },
+                        {
+                            provide: FUI_AUTOCOMPLETE,
+                            useExisting: FuiAutocompleteComponent,
+                        },
+                    ], template: "<!-- Autocomplete Trigger -->\r\n<div\r\n  #trigger\r\n  [id]=\"id\"\r\n  class=\"fui-autocomplete__trigger\"\r\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n  [attr.role]=\"'combobox'\"\r\n  [attr.aria-haspopup]=\"'listbox'\"\r\n  [attr.aria-expanded]=\"panelOpen()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.aria-invalid]=\"errorState()\"\r\n  [attr.aria-describedby]=\"_ariaDescribedby\"\r\n  [attr.aria-required]=\"required()\"\r\n  aria-autocomplete=\"list\"\r\n  [attr.aria-activedescendant]=\"panelOpen() ? _getActiveDescendant() : null\"\r\n  [attr.aria-controls]=\"panelOpen() ? id + '-panel' : null\"\r\n  (keydown)=\"_handleKeydown($event)\"\r\n>\r\n  <span class=\"fui-autocomplete__value\">\r\n    @if (empty()) {\r\n      <span class=\"fui-autocomplete__placeholder\">{{ placeholder() }}</span>\r\n    } @else {\r\n      <span class=\"fui-autocomplete__value-text\">{{ _getDisplayValue() }}</span>\r\n    }\r\n  </span>\r\n\r\n  @if (!_readOnly()) {\r\n    <!-- Clear button \u2014 visible only when a value is selected and not disabled -->\r\n    @if (!empty() && !disabled()) {\r\n      <span class=\"fui-autocomplete__clear\" role=\"button\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\r\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\r\n          <path\r\n            d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\r\n          />\r\n        </svg>\r\n      </span>\r\n    }\r\n\r\n    <!-- Dropdown arrow icon -->\r\n    <svg\r\n      class=\"fui-autocomplete__arrow\"\r\n      [class.fui-autocomplete__arrow--open]=\"panelOpen()\"\r\n      viewBox=\"0 0 16 16\"\r\n      fill=\"currentColor\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M8 11L3 6l.7-.7L8 9.6l4.3-4.3L13 6z\" />\r\n    </svg>\r\n  }\r\n</div>\r\n\r\n<!-- Hidden container for projected options (used for data binding) -->\r\n<div class=\"fui-autocomplete__options-source\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Dropdown Panel -->\r\n@if (panelOpen()) {\r\n  <div #panel [id]=\"id + '-panel'\" class=\"fui-autocomplete__panel\" [attr.aria-label]=\"placeholder()\">\r\n    <!-- Search Input -->\r\n    <div class=\"fui-autocomplete__search\">\r\n      <fui-icon name=\"magnifying-glass\" size=\"sm\" class=\"fui-autocomplete__search-icon\"> </fui-icon>\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        class=\"fui-autocomplete__search-input\"\r\n        [placeholder]=\"searchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        autocomplete=\"off\"\r\n        role=\"searchbox\"\r\n        [attr.aria-label]=\"searchPlaceholder()\"\r\n        [attr.aria-controls]=\"id + '-panel-listbox'\"\r\n        [attr.aria-activedescendant]=\"_getActiveDescendant()\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (keydown)=\"_handlePanelKeydown($event)\"\r\n      />\r\n    </div>\r\n    <!-- Live region for announcing result count to screen readers -->\r\n    <div class=\"fui-visually-hidden\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n      @if (_liveAnnouncement()) {\r\n        {{ _liveAnnouncement() }}\r\n      } @else if (hasFilteredOptions()) {\r\n        {{ filteredOptions().length }} results available.\r\n      } @else {\r\n        No results available.\r\n      }\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    @if (showAddButton() || showRefreshButton()) {\r\n      <div class=\"fui-autocomplete__actions\">\r\n        @if (showAddButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onAddNew()\"\r\n          >\r\n            <fui-icon name=\"plus\" size=\"sm\"></fui-icon>\r\n            {{ addButtonLabel() }}\r\n          </button>\r\n        }\r\n        @if (showRefreshButton()) {\r\n          <button\r\n            type=\"button\"\r\n            fuiButton\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            class=\"fui-autocomplete__action-button\"\r\n            (click)=\"onRefresh()\"\r\n          >\r\n            <fui-icon name=\"refresh-cw\" size=\"sm\"></fui-icon>\r\n            {{ refreshButtonLabel() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Options List -->\r\n    <div\r\n      class=\"fui-autocomplete__options\"\r\n      [id]=\"id + '-panel-listbox'\"\r\n      role=\"listbox\"\r\n      [attr.aria-label]=\"placeholder()\"\r\n    >\r\n      @if (hasFilteredOptions()) {\r\n        @for (option of filteredOptions(); track option.id; let i = $index) {\r\n          <div\r\n            class=\"fui-autocomplete__option\"\r\n            [class.fui-autocomplete__option--active]=\"activeOptionIndex() === i\"\r\n            [class.fui-autocomplete__option--selected]=\"option._selected()\"\r\n            role=\"option\"\r\n            [attr.id]=\"option.id\"\r\n            [attr.aria-selected]=\"option._selected()\"\r\n            (click)=\"_onOptionSelected(option)\"\r\n            (mouseenter)=\"setActiveOption(i, option)\"\r\n            (mouseleave)=\"option.setInactive()\"\r\n          >\r\n            <span class=\"fui-autocomplete__option-text\">{{ option.getLabel() }}</span>\r\n            @if (option._selected()) {\r\n              <fui-icon name=\"check\" size=\"sm\" class=\"fui-autocomplete__option-check\"></fui-icon>\r\n            }\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"fui-autocomplete__no-options\">\r\n          {{ noOptionsText() }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-autocomplete{--fui-autocomplete-font-size: var(--fui-font-size-02);--fui-autocomplete-panel-max-height: 24rem;--fui-autocomplete-panel-border-radius: var(--fui-border-radius-sm);--fui-autocomplete-panel-shadow: var(--fui-shadow-03);--fui-autocomplete-panel-bg: var(--fui-surface-00);--fui-autocomplete-option-padding: .5rem .75rem;--fui-autocomplete-search-padding: .75rem;position:relative;display:inline-block;width:100%}.fui-autocomplete__options-source{display:none}.fui-autocomplete__trigger{display:flex;align-items:center;width:100%;border:none;color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;cursor:pointer;outline:none;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard);gap:.25rem}.fui-autocomplete__trigger:hover:not([aria-disabled=true]){background-color:var(--fui-field-background-hover)}.fui-autocomplete__trigger[aria-disabled=true]{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.fui-autocomplete__placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;cursor:pointer;color:var(--fui-icon-secondary);flex-shrink:0;border-radius:50%;transition:color var(--fui-duration-fast-01) var(--fui-ease-standard),background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__clear svg{width:.75rem;height:.75rem}.fui-autocomplete__clear:hover{color:var(--fui-text-primary);background-color:var(--fui-background-hover)}.fui-autocomplete__arrow{width:1rem;height:1rem;flex-shrink:0;color:var(--fui-icon-primary);pointer-events:none;transition:transform var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__arrow--open{transform:rotate(180deg)}.fui-autocomplete__panel{position:absolute;width:100%;background-color:var(--fui-autocomplete-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-autocomplete-panel-border-radius);box-shadow:var(--fui-autocomplete-panel-shadow);max-height:var(--fui-autocomplete-panel-max-height);overflow:hidden;display:flex;flex-direction:column}.fui-autocomplete__search{position:relative;padding:.75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__search-icon{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);color:var(--fui-icon-secondary);pointer-events:none}.fui-autocomplete__search-input{width:100%;padding:.5rem .75rem .5rem 2.5rem;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-background-primary);color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:border-color var(--fui-duration-fast-01) var(--fui-ease-standard),outline var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__search-input:focus{outline:2px solid var(--fui-primary);outline-offset:-2px;border-color:var(--fui-primary)}.fui-autocomplete__search-input::placeholder{color:var(--fui-text-secondary)}.fui-autocomplete__actions{display:flex;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--fui-border-color);background-color:var(--fui-field-background)}.fui-autocomplete__action-button{display:flex;align-items:center;gap:.25rem;font-size:var(--fui-font-size-01)}.fui-autocomplete__action-button fui-icon{flex-shrink:0}.fui-autocomplete__options{max-height:16rem;overflow-y:auto;padding:.25rem 0;background-color:var(--fui-surface-01);scrollbar-width:thin;scrollbar-color:var(--fui-border-color) transparent}.fui-autocomplete__options::-webkit-scrollbar{width:6px}.fui-autocomplete__options::-webkit-scrollbar-track{background:transparent}.fui-autocomplete__options::-webkit-scrollbar-thumb{background-color:var(--fui-border-color);border-radius:3px}.fui-autocomplete__options::-webkit-scrollbar-thumb:hover{background-color:var(--fui-text-secondary)}.fui-autocomplete__option{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;cursor:pointer;color:var(--fui-text-primary);font-size:var(--fui-font-size-02);line-height:1.29;letter-spacing:.16px;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard)}.fui-autocomplete__option:hover:not(.fui-autocomplete__option--disabled){background-color:var(--fui-background-hover)}.fui-autocomplete__option--active{background-color:var(--fui-surface-05)}.fui-autocomplete__option--selected{background-color:var(--fui-surface-05);font-weight:600}.fui-autocomplete__option--disabled{color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete__option-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-autocomplete__option-check{color:var(--fui-icon-primary);flex-shrink:0;margin-left:.5rem}.fui-autocomplete__no-options{padding:1rem .75rem;text-align:center;color:var(--fui-text-secondary);font-size:var(--fui-font-size-02);font-style:italic}.fui-autocomplete--disabled .fui-autocomplete__trigger{background-color:var(--fui-field-background-disabled);color:var(--fui-text-primary-disabled);cursor:not-allowed}.fui-autocomplete--disabled .fui-autocomplete__arrow{color:var(--fui-text-primary-disabled)}.fui-autocomplete--readonly .fui-autocomplete__trigger{background-color:transparent;min-height:unset;cursor:default;color:var(--fui-text-primary)}.fui-autocomplete--readonly .fui-autocomplete__trigger[aria-disabled=true]{background-color:transparent;color:var(--fui-text-primary);cursor:default}.fui-autocomplete--readonly .fui-autocomplete__value-text{color:var(--fui-text-primary)}.fui-autocomplete--error .fui-autocomplete__trigger{border-bottom-color:var(--fui-error)}.fui-autocomplete--error .fui-autocomplete__trigger:focus{outline-color:var(--fui-error)}.fui-autocomplete-overlay-panel .fui-autocomplete__panel{border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);box-shadow:var(--fui-shadow-03)}.fui-autocomplete-backdrop{background:transparent}@media(prefers-contrast:high){.fui-autocomplete__trigger,.fui-autocomplete__panel{border-width:2px}.fui-autocomplete__trigger:focus,.fui-autocomplete__search-input:focus{outline-width:3px}.fui-autocomplete__option--active,.fui-autocomplete__option--selected{outline:2px solid var(--fui-primary);outline-offset:-2px}}@media(prefers-reduced-motion:reduce){.fui-autocomplete__trigger,.fui-autocomplete__arrow,.fui-autocomplete__option,.fui-autocomplete__search-input{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], refreshButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshButtonLabel", required: false }] }], noOptionsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], addNew: [{ type: i0.Output, args: ["addNew"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], trigger: [{
+                type: ViewChild,
+                args: ['trigger', { static: false }]
+            }], panel: [{
+                type: ViewChild,
+                args: ['panel', { static: false }]
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput', { static: false }]
+            }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiOptionComponent), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FUI_AUTOCOMPLETE, FuiAutocompleteComponent };
+//# sourceMappingURL=raintonic-formaui-components-autocomplete.mjs.map