quang 20.5.0 → 20.5.2-0

package/fesm2022/quang-components-autocomplete.mjs

@@ -1,11 +1,10 @@
-import { NgClass, NgStyle } from '@angular/common';
+import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, viewChild, signal, computed, output, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, output, viewChild, signal, computed, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslocoPipe } from '@jsverse/transloco';
 import { QuangTooltipDirective } from 'quang/overlay/tooltip';
-import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
 import { QuangBaseComponent, OptionListParentType, QuangOptionListComponent } from 'quang/components/shared';
 
 /**
@@ -18,263 +17,715 @@ import { QuangBaseComponent, OptionListParentType, QuangOptionListComponent } fr
  * `searchTextDebounce` is by default set to 300ms.
  */
 class QuangAutocompleteComponent extends QuangBaseComponent {
+    /**
+     * Finds an option whose label exactly matches the given text (case-insensitive, trimmed).
+     * @param text The text to match against option labels
+     * @returns The matching option, or undefined if no match
+     */
+    findMatchingOption(text) {
+        if (!text)
+            return undefined;
+        const searchTextLower = text.trim().toLowerCase();
+        return this.selectOptions().find((x) => x.label.trim().toLowerCase() === searchTextLower);
+    }
+    // ============================================
+    // CONSTRUCTOR
+    // ============================================
     constructor() {
         super();
-        // the form can't be a random text but must be one of the options if this is false
+        // ============================================
+        // INPUTS - Configuration properties
+        // ============================================
+        /**
+         * The list of options to display in the autocomplete dropdown.
+         */
+        this.selectOptions = input.required(...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
+        /**
+         * When true, allows any text input as a valid form value, not just option values.
+         * The form value will sync with whatever text the user types.
+         * When false (default), the form value must match one of the option values.
+         * @default false
+         */
+        this.allowFreeText = input(false, ...(ngDevMode ? [{ debugName: "allowFreeText" }] : []));
+        /**
+         * When true and allowFreeText is false, automatically selects an option if the user's
+         * input text matches an option's label exactly (case-insensitive, trimmed).
+         * This provides a better UX by auto-selecting when users type a complete option label.
+         * @default true
+         */
+        this.autoSelectOnExactMatch = input(true, ...(ngDevMode ? [{ debugName: "autoSelectOnExactMatch" }] : []));
+        /**
+         * When true, updates the form value as the user types (after debounce).
+         * When false (default), the form value is only updated when:
+         * - User selects an option from the dropdown
+         * - User stops typing and the input loses focus (blur)
+         * @default false
+         */
+        this.updateValueOnType = input(false, ...(ngDevMode ? [{ debugName: "updateValueOnType" }] : []));
+        /**
+         * Whether the form value can be any text or must match one of the options.
+         * When true, the form value syncs with the input text.
+         * When false (default), the form value must be one of the option values.
+         * @default false
+         * @deprecated Use `allowFreeText` instead. This input will be removed in a future version.
+         */
         this.syncFormWithText = input(false, ...(ngDevMode ? [{ debugName: "syncFormWithText" }] : []));
+        /**
+         * Maximum height of the option list before scrolling.
+         * @default '200px'
+         */
         this.optionListMaxHeight = input('200px', ...(ngDevMode ? [{ debugName: "optionListMaxHeight" }] : []));
-        this.selectOptions = input.required(...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
+        /**
+         * Whether to translate option labels.
+         * @default true
+         */
         this.translateValue = input(true, ...(ngDevMode ? [{ debugName: "translateValue" }] : []));
+        /**
+         * Scroll behavior when the option list opens.
+         * @default 'smooth'
+         */
         this.scrollBehaviorOnOpen = input('smooth', ...(ngDevMode ? [{ debugName: "scrollBehaviorOnOpen" }] : []));
         /**
-         * Only emits the value without saving it in ngControl
+         * When true, only emits the value without saving it to ngControl.
+         * @default false
          */
         this.emitOnly = input(false, ...(ngDevMode ? [{ debugName: "emitOnly" }] : []));
+        /**
+         * Enable multiple selection mode with chips.
+         * @default false
+         */
         this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
         /**
-         * Set the maximum length in characters of the single chip.
+         * Maximum length in characters for chip display text.
+         * When set, chips will be truncated and show a tooltip with full text.
+         * @default 0 (no limit)
          */
         this.chipMaxLength = input(0, ...(ngDevMode ? [{ debugName: "chipMaxLength" }] : []));
+        /**
+         * Layout direction for chips in multiple selection mode.
+         * @default 'vertical'
+         */
         this.multiSelectDisplayMode = input('vertical', ...(ngDevMode ? [{ debugName: "multiSelectDisplayMode" }] : []));
+        /**
+         * Position of chips relative to the input in multiple selection mode.
+         * - 'top': Chips are displayed above the input (default)
+         * - 'bottom': Chips are displayed below the input
+         * @default 'top'
+         */
+        this.chipsPosition = input('top', ...(ngDevMode ? [{ debugName: "chipsPosition" }] : []));
+        /**
+         * Debounce time in milliseconds for search text changes.
+         * @default 300
+         */
+        this.searchTextDebounce = input(300, ...(ngDevMode ? [{ debugName: "searchTextDebounce" }] : []));
+        /**
+         * Whether to filter options internally based on input text.
+         * When false, filtering should be handled externally via searchTextChange event.
+         * @default true
+         */
+        this.internalFilterOptions = input(true, ...(ngDevMode ? [{ debugName: "internalFilterOptions" }] : []));
+        // ============================================
+        // OUTPUTS - Event emitters
+        // ============================================
+        /**
+         * Emitted when an option is selected.
+         * Emits the selected option's value, or null when cleared.
+         */
+        this.selectedOption = output();
+        /**
+         * Emitted when the search text changes (after debounce).
+         * Useful for external filtering or API calls.
+         */
+        this.searchTextChange = output();
+        // ============================================
+        // VIEW CHILDREN - Template references
+        // ============================================
+        /** Reference to the option list component */
         this.optionList = viewChild('optionList', ...(ngDevMode ? [{ debugName: "optionList" }] : []));
-        this._showOptions = signal(null, ...(ngDevMode ? [{ debugName: "_showOptions" }] : []));
-        this._inputValue = signal('', ...(ngDevMode ? [{ debugName: "_inputValue" }] : []));
-        this._optionHideTimeout = signal(undefined, ...(ngDevMode ? [{ debugName: "_optionHideTimeout" }] : []));
-        this._chipList = signal([], ...(ngDevMode ? [{ debugName: "_chipList" }] : []));
-        this._selectedOptions = signal([], ...(ngDevMode ? [{ debugName: "_selectedOptions" }] : []));
-        this.inputValue$ = new Subject();
-        this.selectOptionsChange = toObservable(this.selectOptions)
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => {
+        /** Reference to the input element */
+        this.selectInput = viewChild('selectInput', ...(ngDevMode ? [{ debugName: "selectInput" }] : []));
+        /** Reference to the chip container element */
+        this.chipContainer = viewChild('chipContainer', ...(ngDevMode ? [{ debugName: "chipContainer" }] : []));
+        /** Reference to the main autocomplete container */
+        this.autocompleteContainer = viewChild('autocompleteContainer', ...(ngDevMode ? [{ debugName: "autocompleteContainer" }] : []));
+        // ============================================
+        // PUBLIC STATE - Used in template
+        // ============================================
+        /** Constant for option list parent type */
+        this.ParentType = OptionListParentType.AUTOCOMPLETE;
+        /** Height of the input element (used for positioning) */
+        this.inputHeight = signal(0, ...(ngDevMode ? [{ debugName: "inputHeight" }] : []));
+        /**
+         * The display text for the input field.
+         * - When searching: shows what the user typed
+         * - When allowFreeText/syncFormWithText is true and no matching option: shows the raw value
+         * - When not searching: shows the selected option's label (derived from _value)
+         */
+        this._inputValue = computed(() => {
+            if (this._isSearching()) {
+                return this._userSearchText();
+            }
+            // Derive display text from _value by finding the matching option
             const value = this._value();
-            if (!this.multiple() && !this._inputValue()) {
-                this.setInputValue();
+            if (value === null || value === undefined || value === '' || Array.isArray(value)) {
+                return '';
             }
-            else if (this.multiple() && Array.isArray(value) && value.length > 0) {
-                for (const valueElement of value) {
-                    this.onSelectValue(valueElement);
-                }
+            const option = this.selectOptions().find((x) => x.value === value);
+            // When free text is allowed and no matching option found, display the value itself
+            // (since the value IS the text the user typed)
+            if (!option && this._allowFreeTextInternal()) {
+                return String(value);
             }
-        });
+            return option?.label ?? '';
+        }, ...(ngDevMode ? [{ debugName: "_inputValue" }] : []));
+        /** Whether the option list is currently visible */
+        this._showOptions = signal(null, ...(ngDevMode ? [{ debugName: "_showOptions" }] : []));
+        /** List of selected chip values (for multiple mode) */
+        this._chipList = signal([], ...(ngDevMode ? [{ debugName: "_chipList" }] : []));
+        /** List of selected option objects (for multiple mode) */
+        this._selectedOptions = signal([], ...(ngDevMode ? [{ debugName: "_selectedOptions" }] : []));
+        /** Filtered options based on search text and chip selection */
         this._filteredOptions = computed(() => {
-            const text = this._inputValue();
+            const searchText = this._isSearching() ? this._userSearchText() : '';
             if (this.multiple()) {
-                return this.filterOptions(text).filter((x) => !this._chipList().some((chip) => chip === x.value));
-            }
-            else {
-                return text?.length ? this.filterOptions(text) : this.selectOptions();
+                return this.filterOptions(searchText).filter((x) => !this._chipList().some((chip) => chip === x.value));
             }
+            return searchText?.length ? this.filterOptions(searchText) : this.selectOptions();
         }, ...(ngDevMode ? [{ debugName: "_filteredOptions" }] : []));
-        this.selectedOption = output();
-        this.searchTextChange = output();
-        this.searchTextDebounce = input(300, ...(ngDevMode ? [{ debugName: "searchTextDebounce" }] : []));
-        this.internalFilterOptions = input(true, ...(ngDevMode ? [{ debugName: "internalFilterOptions" }] : []));
-        this.ParentType = OptionListParentType.AUTOCOMPLETE;
-        this.formValueChange$ = undefined;
-        this.selectInput = viewChild('selectInput', ...(ngDevMode ? [{ debugName: "selectInput" }] : []));
-        this.chipContainer = viewChild('chipContainer', ...(ngDevMode ? [{ debugName: "chipContainer" }] : []));
-        this.autocompleteContainer = viewChild('autocompleteContainer', ...(ngDevMode ? [{ debugName: "autocompleteContainer" }] : []));
-        this.inputHeight = signal(0, ...(ngDevMode ? [{ debugName: "inputHeight" }] : []));
-        this.onChangeSelectInput = effect(() => {
-            const selectInput = this.selectInput();
-            if (selectInput) {
-                this.inputHeight.set(selectInput?.nativeElement?.getBoundingClientRect().height);
-                selectInput.nativeElement.addEventListener('keydown', (e) => {
-                    if (this.multiple() && this._chipList().length > 0 && !this._inputValue()?.length && e.key === 'Backspace') {
-                        e.preventDefault();
-                        // this.deleteChip(this._chipList()[this._chipList().length - 1])
-                        const chipContainer = this.chipContainer()?.nativeElement;
-                        if (chipContainer) {
-                            const chips = chipContainer.querySelectorAll('.chip button.btn-chip');
-                            if (chips.length > 0) {
-                                const focusChip = chips[chips.length - 1];
-                                focusChip.focus();
-                                focusChip.addEventListener('keydown', (event) => {
-                                    if (event.key === 'Backspace') {
-                                        event.preventDefault();
-                                        this.deleteChip(this._chipList()[this._chipList().length - 1]);
-                                        selectInput.nativeElement.focus();
-                                    }
-                                    else {
-                                        event.preventDefault();
-                                    }
-                                });
-                            }
-                        }
-                    }
-                });
-            }
-        }, ...(ngDevMode ? [{ debugName: "onChangeSelectInput" }] : []));
-        this.inputValue$
-            .pipe(takeUntilDestroyed(), debounceTime(this.searchTextDebounce()), distinctUntilChanged())
-            .subscribe((value) => {
-            if (value !== this._inputValue()) {
-                this.searchTextChange.emit(value?.toString() || '');
-                if (this.syncFormWithText()) {
-                    this.onValueChange(value, false);
+        /**
+         * The value to use for highlighting in the option list.
+         * When searching: shows the matched option (if any) based on exact label match
+         * When not searching: shows the current form value
+         * This keeps highlighting in sync with what will be selected on blur.
+         */
+        this._highlightedValue = computed(() => {
+            if (this._isSearching() && !this.multiple()) {
+                const searchText = this._userSearchText();
+                if (!searchText?.trim()) {
+                    // If search text is empty, don't highlight anything
+                    return null;
                 }
+                // Find exact match for highlighting
+                const matchingOption = this.findMatchingOption(searchText);
+                if (matchingOption && this.autoSelectOnExactMatch()) {
+                    return matchingOption.value;
+                }
+                // If free text is allowed, don't highlight any option
+                // (the typed text itself will be the value)
+                return null;
             }
-            this._inputValue.set(value?.toString() || '');
-            if (!this._inputValue()?.length && !this.emitOnly() && !this.multiple()) {
-                this._ngControl()?.control?.patchValue(null);
-            }
+            // When not searching, use the current value
+            return this._value();
+        }, ...(ngDevMode ? [{ debugName: "_highlightedValue" }] : []));
+        // ============================================
+        // PROTECTED STATE - Internal but accessible to subclasses
+        // ============================================
+        /** Whether the user is actively typing/searching */
+        this._isSearching = signal(false, ...(ngDevMode ? [{ debugName: "_isSearching" }] : []));
+        /** The text the user is currently typing while searching */
+        this._userSearchText = signal('', ...(ngDevMode ? [{ debugName: "_userSearchText" }] : []));
+        /**
+         * Internal computed that returns true if free text input is allowed.
+         * Combines both `allowFreeText` and deprecated `syncFormWithText` inputs.
+         */
+        this._allowFreeTextInternal = computed(() => {
+            return this.allowFreeText() || this.syncFormWithText();
+        }, ...(ngDevMode ? [{ debugName: "_allowFreeTextInternal" }] : []));
+        // ============================================
+        // PRIVATE STATE - Internal implementation details
+        // ============================================
+        /** Timer for search text debounce */
+        this._searchDebounceTimer = null;
+        /** Last emitted search text (for distinctUntilChanged behavior) */
+        this._lastEmittedSearchText = null;
+        /** Whether the component has been destroyed */
+        this._isDestroyed = false;
+        /** Subscription to form value changes */
+        this.formValueChangeSubscription = undefined;
+        // ============================================
+        // EFFECTS - Reactive side effects
+        // ============================================
+        /** Effect to handle input element setup and keyboard events */
+        this.onChangeSelectInputEffect = effect(() => {
+            const selectInput = this.selectInput();
+            if (!selectInput)
+                return;
+            this.inputHeight.set(selectInput.nativeElement.getBoundingClientRect().height);
+            selectInput.nativeElement.addEventListener('keydown', (e) => {
+                this.handleInputKeydown(e, selectInput.nativeElement);
+            });
+        }, ...(ngDevMode ? [{ debugName: "onChangeSelectInputEffect" }] : []));
+        /** Subscription to options changes */
+        this.selectOptionsChangeSubscription = toObservable(this.selectOptions)
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => {
+            this.handleOptionsChange();
         });
-        toObservable(this._showOptions)
+        /** Subscription to show options changes */
+        this.showOptionsChangeSubscription = toObservable(this._showOptions)
             .pipe(takeUntilDestroyed())
             .subscribe((data) => {
-            if (!data && data !== null) {
-                this.checkInputValue();
-            }
+            // Note: Form value processing is now handled directly in onBlurHandler
+            // for immediate processing. This subscription is kept for backwards compatibility
+            // but the _isSearching check prevents double-processing since onBlurHandler
+            // already sets _isSearching to false before this subscription fires.
+            if (!(!data && data !== null && this._isSearching()))
+                return;
+            // Only process if still in search mode (which means onBlurHandler didn't run)
+            this.processTextToFormValue(this._userSearchText(), {
+                exitSearchMode: true,
+                updateOnMatch: true,
+                clearSearchText: true,
+            });
+        });
+        this.destroyRef.onDestroy(() => {
+            this._isDestroyed = true;
+            if (!this._searchDebounceTimer)
+                return;
+            clearTimeout(this._searchDebounceTimer);
         });
     }
+    // ============================================
+    // LIFECYCLE HOOKS / OVERRIDES
+    // ============================================
     setupFormControl() {
         super.setupFormControl();
         const formControl = this._ngControl()?.control;
-        if (this.formValueChange$) {
-            this.formValueChange$.unsubscribe();
-            this.formValueChange$ = undefined;
+        if (this.formValueChangeSubscription) {
+            this.formValueChangeSubscription.unsubscribe();
+            this.formValueChangeSubscription = undefined;
         }
-        if (formControl) {
-            this.formValueChange$ = formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
-                if (this.multiple() && Array.isArray(value)) {
-                    this._chipList.set([]);
-                    this._selectedOptions.set([]);
-                    value.forEach((x) => {
-                        this.onSelectValue(x);
-                    });
-                }
-                else if (!this.multiple() && (typeof value === 'string' || typeof value === 'number')) {
-                    this.setInputValue();
-                }
-                if (!this.syncFormWithText() && !value) {
-                    this._inputValue.set('');
-                }
+        if (!formControl)
+            return;
+        this.formValueChangeSubscription = formControl.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.handleFormValueChange(value);
+        });
+    }
+    writeValue(val) {
+        // Simply update the value - _inputValue is computed and will automatically
+        // show the correct display text based on _value and _isSearching state.
+        super.writeValue(val);
+        // Handle array values for multiple mode
+        if (Array.isArray(val)) {
+            val.forEach((x) => {
+                this.handleSelectValue(x);
             });
         }
     }
+    onChangedHandler(value) {
+        super.onChangedHandler(value);
+        // Exit search mode - _inputValue will now derive from _value
+        // Note: Don't clear _userSearchText here - it's needed for processTextToFormValue matching
+        this._isSearching.set(false);
+    }
+    onBlurHandler() {
+        // Process form value and exit search mode immediately to avoid visual glitches
+        this.processTextToFormValue(this._userSearchText(), {
+            exitSearchMode: true,
+            updateOnMatch: true,
+            clearSearchText: true,
+        });
+        // Hide dropdown immediately - click events on options are protected by onBlurInput
+        // which checks if focus moved to the option list before calling this handler
+        this.hideOptionVisibility();
+        super.onBlurHandler();
+    }
+    // ============================================
+    // PUBLIC METHODS - Used in template
+    // ============================================
+    /**
+     * Shows the option list dropdown.
+     */
     showOptionVisibility() {
-        if (this._optionHideTimeout()) {
-            clearTimeout(this._optionHideTimeout());
-            this._optionHideTimeout.set(null);
-        }
         this._showOptions.set(true);
+        // Initialize _userSearchText with current input value when showing options
+        // This ensures that if user focuses and blurs without typing, the value is preserved
+        // Also enter search mode to enable filtering
+        if (this._isSearching())
+            return;
+        const currentInputValue = this._inputValue();
+        this._userSearchText.set(currentInputValue || '');
+        this._isSearching.set(true);
     }
-    hideOptionVisibility(skipTimeout = false) {
-        if (this._optionHideTimeout()) {
-            clearTimeout(this._optionHideTimeout());
-        }
-        this._optionHideTimeout.set(setTimeout(() => {
-            this._showOptions.set(false);
-        }, skipTimeout ? 0 : 50));
+    /**
+     * Hides the option list dropdown.
+     */
+    hideOptionVisibility() {
+        this._showOptions.set(false);
     }
-    onChangeInput(value) {
+    /**
+     * Handles input text changes (typing).
+     * @param event The input event
+     */
+    onChangeInput(event) {
         this.showOptionVisibility();
-        this.inputValue$.next(value.target?.value);
-    }
-    filterOptions(value) {
-        const options = this.selectOptions();
-        if (this.internalFilterOptions()) {
-            return options.filter((x) => x.label.toLowerCase().includes(value.toLowerCase()));
-        }
-        return options;
-    }
-    onChangedHandler(value) {
-        super.onChangedHandler(value);
-        this.setInputValue();
+        const value = event.target?.value ?? '';
+        this._isSearching.set(true);
+        this._userSearchText.set(value);
+        this.emitDebouncedSearchText(value);
     }
+    /**
+     * Handles option selection from the dropdown.
+     * @param value The selected option's value
+     * @param hideOptions Whether to hide the dropdown after selection
+     */
     onValueChange(value, hideOptions = true) {
+        // When allowFreeText is true and a null/undefined value is received (e.g., from selecting
+        // a non-existent option in the dropdown), use the typed text as the value instead of clearing
+        if ((value === null || value === undefined) && this._allowFreeTextInternal()) {
+            const typedText = this._userSearchText()?.trim();
+            if (typedText) {
+                this.onChangedHandler(typedText);
+                if (hideOptions) {
+                    this.hideOptionVisibility();
+                    this.focusInput();
+                }
+                this.selectedOption.emit(typedText);
+                return;
+            }
+        }
         if (this.multiple()) {
-            this.onSelectValue(value);
+            this.handleSelectValue(value);
             this.onChangedHandler(this._chipList());
             if (this._chipList().some((x) => x === value)) {
-                this.inputValue$.next('');
+                this._userSearchText.set('');
+                this._isSearching.set(false);
             }
+            return;
         }
-        else {
-            this.onChangedHandler(value);
-            if (hideOptions) {
-                this.hideOptionVisibility();
-            }
-            this.selectedOption.emit(value);
+        // Update _userSearchText to the selected option's label
+        // This enables processTextToFormValue to match correctly on blur
+        const selectedOption = this.selectOptions().find((x) => x.value === value);
+        if (selectedOption) {
+            this._userSearchText.set(selectedOption.label);
         }
-    }
-    checkInputValue() {
-        const option = this.selectOptions().find((x) => x.label.toLowerCase() === this._inputValue()?.toLowerCase());
-        if (!this.multiple()) {
-            if (option?.value === this._value())
-                return;
-            if (option) {
-                this.onChangedHandler(option.value ?? '');
-            }
-            else if (!this.syncFormWithText()) {
-                this.onChangedHandler('');
-            }
+        this.onChangedHandler(value);
+        if (hideOptions) {
+            this.hideOptionVisibility();
+            // Return focus to input after selection
+            this.focusInput();
         }
+        this.selectedOption.emit(value);
     }
-    writeValue(val) {
-        super.writeValue(val);
-        this.setInputValue(true);
-        if (Array.isArray(val)) {
-            val.forEach((x) => {
-                this.onSelectValue(x);
-            });
+    /**
+     * Handles keydown events on the input element for accessibility.
+     * @param event The keyboard event
+     */
+    onInputKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                // Open dropdown if closed, or let option-list handle navigation
+                if (!this._showOptions()) {
+                    event.preventDefault();
+                    this.showOptionVisibility();
+                }
+                break;
+            case 'ArrowUp':
+                // Open dropdown if closed
+                if (!this._showOptions()) {
+                    event.preventDefault();
+                    this.showOptionVisibility();
+                }
+                break;
+            case 'Escape':
+                // Close dropdown and keep focus on input
+                if (this._showOptions()) {
+                    event.preventDefault();
+                    this.onEscapePressed();
+                }
+                break;
+            case 'Enter':
+                // When allowFreeText is true and dropdown is open, handle Enter specially
+                if (this._showOptions() && this._allowFreeTextInternal()) {
+                    // Check if there are any filtered options
+                    const filteredOptions = this._filteredOptions();
+                    if (filteredOptions.length === 0) {
+                        // No options to select - use the typed text as the value
+                        event.preventDefault();
+                        this.processTextToFormValue(this._userSearchText(), {
+                            exitSearchMode: true,
+                            updateOnMatch: true,
+                            clearSearchText: false,
+                        });
+                        this.hideOptionVisibility();
+                    }
+                    // If there are filtered options, let option-list handle the selection
+                }
+                break;
         }
     }
-    onBlurInput(event) {
-        if (event?.relatedTarget?.id !== this.optionList()?.optionListContainer()?.nativeElement?.id)
-            this.onBlurHandler();
+    /**
+     * Handles Escape key press from option list.
+     * Closes dropdown and returns focus to input.
+     */
+    onEscapePressed() {
+        this.hideOptionVisibility();
+        this.focusInput();
     }
-    onBlurHandler() {
-        setTimeout(() => {
-            this.hideOptionVisibility();
-            if (!this._inputValue()?.length && !this.emitOnly() && !this.multiple()) {
-                this._ngControl()?.control?.patchValue(null);
-            }
-            super.onBlurHandler();
-        }, 100);
+    /**
+     * Handles Tab key press from option list.
+     * Closes dropdown and allows natural tab navigation.
+     */
+    onTabPressed(_event) {
+        // Close the dropdown, tab will naturally move focus
+        this.hideOptionVisibility();
+        // Process any pending input value
+        this.processTextToFormValue(this._userSearchText(), {
+            exitSearchMode: true,
+            updateOnMatch: true,
+            clearSearchText: true,
+        });
+    }
+    /**
+     * Sets focus to the input element.
+     */
+    focusInput() {
+        const inputEl = this.selectInput()?.nativeElement;
+        if (!inputEl)
+            return;
+        inputEl.focus();
     }
+    /**
+     * Handles input blur event.
+     * @param event The focus event
+     */
+    onBlurInput(event) {
+        const relatedTarget = event.relatedTarget;
+        const optionListId = this.optionList()?.optionListContainer()?.nativeElement?.id;
+        if (relatedTarget?.id === optionListId)
+            return;
+        this.onBlurHandler();
+    }
+    /**
+     * Handles blur event on the option list.
+     * @param event The blur event (truthy if should hide)
+     */
     onBlurOptionList(event) {
-        if (event)
-            this.hideOptionVisibility();
+        if (!event)
+            return;
+        this.hideOptionVisibility();
     }
-    setInputValue(resetOnMiss = false) {
-        this._inputValue.set(this.selectOptions().find((x) => x.value === this._value())?.label ?? (resetOnMiss ? '' : this._inputValue()));
-        if (!this.syncFormWithText())
-            this.inputValue$.next(this._inputValue() ?? '');
+    /**
+     * Gets the display description for a chip value.
+     * @param chipValue The chip's value
+     * @returns The chip's display label
+     */
+    getDescription(chipValue) {
+        const option = this.selectOptions().find((x) => x.value?.toString() === chipValue?.toString());
+        return option?.label?.toString() ?? '';
     }
-    getDescription(chip) {
-        const valueChip = this.selectOptions().find((x) => x.value === chip);
-        return valueChip ? valueChip.label.toString() : '';
+    getOptionByValue(value) {
+        return this.selectOptions().find((x) => x.value?.toString() === value?.toString());
     }
-    onSelectValue(value) {
-        const newChip = this.selectOptions().find((x) => x.value === value);
-        if (newChip && !this._chipList().some((x) => x === newChip?.value)) {
-            this.createChipList(newChip);
-            this._selectedOptions.update((list) => [...list, newChip]);
-        }
+    getOptionIndex(option) {
+        return this.selectOptions().findIndex((x) => x.value === option.value);
     }
     /**
-     * remove chip from chips list
-     * @param chipValue chip to delete
+     * Removes a chip from the selection (multiple mode).
+     * @param chipValue The chip value to remove
      */
     deleteChip(chipValue) {
         const stringChipValue = chipValue?.toString();
-        const i = this._chipList()?.findIndex((x) => x.toString() === stringChipValue);
-        if (i >= 0) {
-            const currentList = this._chipList();
-            if (Array.isArray(currentList) && currentList.length > 0) {
-                this._chipList.update((list) => list.filter((_, index) => index !== i));
-                this.onChangedHandler(this._chipList());
+        const index = this._chipList().findIndex((x) => x.toString() === stringChipValue);
+        if (index < 0)
+            return;
+        this._chipList.update((list) => list.filter((_, i) => i !== index));
+        this.onChangedHandler(this._chipList());
+    }
+    // ============================================
+    // PROTECTED METHODS - Internal logic, accessible to subclasses
+    // ============================================
+    /**
+     * Filters options based on input text.
+     * @param value The search text
+     * @returns Filtered options
+     */
+    filterOptions(value) {
+        const options = this.selectOptions();
+        const trimmedValue = value?.trim();
+        return this.internalFilterOptions() && trimmedValue
+            ? options.filter((x) => x.label.toLowerCase().includes(trimmedValue.toLowerCase()))
+            : options;
+    }
+    // ============================================
+    // PRIVATE METHODS - Internal implementation
+    // ============================================
+    /**
+     * Core method that processes text input and updates form value accordingly.
+     *
+     * Matching logic:
+     * - If text matches an option label (case-insensitive, trimmed) and autoSelectOnExactMatch is true, select that option
+     * - If no match and allowFreeText is true, use the typed text as value
+     * - If no match and allowFreeText is false, clear the value
+     *
+     * @param text The text to process
+     * @param options Configuration options:
+     *   - exitSearchMode: If true, uses onChangedHandler which exits search mode. If false, stays in search mode.
+     *   - updateOnMatch: If true, updates form when match found. If false, only clears on no-match.
+     *   - clearSearchText: If true, clears _userSearchText after processing.
+     */
+    processTextToFormValue(text, options) {
+        const searchText = text?.trim();
+        // Find matching option: exact match (case-insensitive, trimmed)
+        const matchingOption = this.findMatchingOption(text);
+        if (!this.multiple()) {
+            // If the found option is already selected, nothing to do except exit search mode
+            if (matchingOption?.value === this._value()) {
+                if (options.exitSearchMode) {
+                    this._isSearching.set(false);
+                }
+                if (options.clearSearchText) {
+                    this._userSearchText.set('');
+                }
+                return;
+            }
+            // Determine what action to take based on match status and settings
+            const shouldAutoSelect = matchingOption && this.autoSelectOnExactMatch() && options.updateOnMatch;
+            const shouldUseFreeText = this._allowFreeTextInternal() && searchText && options.updateOnMatch;
+            // Clear logic differs between typing and blur:
+            // - On blur (exitSearchMode=true): clear when input is empty (regardless of allowFreeText setting)
+            // - On blur: also clear when no valid selection and free text not allowed
+            // - During typing (exitSearchMode=false): only clear when updateOnMatch is true and text doesn't match
+            const shouldClearOnBlurEmpty = options.exitSearchMode && !searchText;
+            const shouldClearOnBlurNoMatch = options.exitSearchMode && !this._allowFreeTextInternal() && (!matchingOption || !this.autoSelectOnExactMatch());
+            const shouldClearWhileTyping = !options.exitSearchMode && options.updateOnMatch && !matchingOption && !this._allowFreeTextInternal();
+            if (shouldAutoSelect) {
+                // Auto-select the matching option
+                if (options.exitSearchMode) {
+                    this.onChangedHandler(matchingOption.value ?? '');
+                }
+                else {
+                    this.onValueChange(matchingOption.value ?? '', false);
+                }
+            }
+            else if (shouldUseFreeText) {
+                // Free text allowed: use the typed text as value
+                if (options.exitSearchMode) {
+                    this.onChangedHandler(searchText);
+                }
+                else {
+                    this.onValueChange(searchText, false);
+                }
+            }
+            else if (shouldClearOnBlurEmpty || shouldClearOnBlurNoMatch) {
+                // On blur with empty input or no valid selection: clear the value to null
+                this.onChangedHandler(null);
+            }
+            else if (shouldClearWhileTyping) {
+                // While typing, text doesn't match any option: clear the value but stay in search mode
+                this.updateValueWithoutExitingSearchMode('');
             }
         }
+        if (options.clearSearchText) {
+            this._userSearchText.set('');
+        }
     }
-    createChipList(chip) {
-        if (chip) {
-            this._chipList.update((list) => [...list, chip.value]);
+    /**
+     * Handles keyboard events on the input element.
+     */
+    handleInputKeydown(e, inputElement) {
+        if (!(this.multiple() && this._chipList().length > 0 && !this._inputValue()?.length && e.key === 'Backspace')) {
+            return;
+        }
+        e.preventDefault();
+        const chipContainerEl = this.chipContainer()?.nativeElement;
+        if (chipContainerEl) {
+            const chips = chipContainerEl.querySelectorAll('.chip button.btn-chip');
+            if (chips.length > 0) {
+                const lastChip = chips[chips.length - 1];
+                lastChip.focus();
+                lastChip.addEventListener('keydown', (event) => {
+                    if (event.key === 'Backspace') {
+                        event.preventDefault();
+                        this.deleteChip(this._chipList()[this._chipList().length - 1]);
+                        inputElement.focus();
+                        return;
+                    }
+                    event.preventDefault();
+                });
+            }
+        }
+    }
+    /**
+     * Handles changes to the select options input.
+     */
+    handleOptionsChange() {
+        const value = this._value();
+        if (this.multiple() && Array.isArray(value) && value.length > 0) {
+            for (const valueElement of value) {
+                this.handleSelectValue(valueElement);
+            }
+        }
+        // For single mode: _inputValue is computed, so it automatically updates
+    }
+    /**
+     * Handles form value changes from external sources.
+     */
+    handleFormValueChange(value) {
+        if (!(this.multiple() && Array.isArray(value))) {
+            return;
+        }
+        this._chipList.set([]);
+        this._selectedOptions.set([]);
+        value.forEach((x) => {
+            this.handleSelectValue(x);
+        });
+        // Note: Don't clear _userSearchText here - it's managed by processTextToFormValue
+        // which runs when options are hidden and needs _userSearchText for matching.
+    }
+    /**
+     * Handles selecting a value (adding to chip list in multiple mode).
+     */
+    handleSelectValue(value) {
+        const option = this.selectOptions().find((x) => x.value === value);
+        if (option && !this._chipList().some((x) => x === option.value)) {
+            this._chipList.update((list) => [...list, option.value]);
+            this._selectedOptions.update((list) => [...list, option]);
+        }
+    }
+    /**
+     * Emits search text change after debounce.
+     * When `updateValueOnType` is true, also updates the form value using the same
+     * matching logic as processTextToFormValue (auto-select matching options, or use free text).
+     */
+    emitDebouncedSearchText(value) {
+        if (this._searchDebounceTimer) {
+            clearTimeout(this._searchDebounceTimer);
+        }
+        this._searchDebounceTimer = setTimeout(() => {
+            if (this._isDestroyed) {
+                return;
+            }
+            if (value === this._lastEmittedSearchText) {
+                return;
+            }
+            this._lastEmittedSearchText = value;
+            this.searchTextChange.emit(value || '');
+            // Update form value based on what the user typed
+            // - When updateValueOnType is true: update on both match and no-match
+            // - When updateValueOnType is false: only clear the value when text doesn't match
+            this.processTextToFormValue(value, {
+                exitSearchMode: false,
+                updateOnMatch: this.updateValueOnType(),
+                clearSearchText: false,
+            });
+        }, this.searchTextDebounce());
+    }
+    /**
+     * Updates the form value and internal _value signal without exiting search mode.
+     * This is used when clearing the value during typing - we want to update the form
+     * but keep the user in search mode so they can continue typing.
+     */
+    updateValueWithoutExitingSearchMode(value) {
+        this._value.set(value);
+        if (this.onChange) {
+            this.onChange(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: QuangAutocompleteComponent, isStandalone: true, selector: "quang-autocomplete", inputs: { syncFormWithText: { classPropertyName: "syncFormWithText", publicName: "syncFormWithText", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, emitOnly: { classPropertyName: "emitOnly", publicName: "emitOnly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, chipMaxLength: { classPropertyName: "chipMaxLength", publicName: "chipMaxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelectDisplayMode: { classPropertyName: "multiSelectDisplayMode", publicName: "multiSelectDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null }, internalFilterOptions: { classPropertyName: "internalFilterOptions", publicName: "internalFilterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOption", searchTextChange: "searchTextChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: QuangAutocompleteComponent, isStandalone: true, selector: "quang-autocomplete", inputs: { selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, allowFreeText: { classPropertyName: "allowFreeText", publicName: "allowFreeText", isSignal: true, isRequired: false, transformFunction: null }, autoSelectOnExactMatch: { classPropertyName: "autoSelectOnExactMatch", publicName: "autoSelectOnExactMatch", isSignal: true, isRequired: false, transformFunction: null }, updateValueOnType: { classPropertyName: "updateValueOnType", publicName: "updateValueOnType", isSignal: true, isRequired: false, transformFunction: null }, syncFormWithText: { classPropertyName: "syncFormWithText", publicName: "syncFormWithText", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, emitOnly: { classPropertyName: "emitOnly", publicName: "emitOnly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, chipMaxLength: { classPropertyName: "chipMaxLength", publicName: "chipMaxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelectDisplayMode: { classPropertyName: "multiSelectDisplayMode", publicName: "multiSelectDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, chipsPosition: { classPropertyName: "chipsPosition", publicName: "chipsPosition", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null }, internalFilterOptions: { classPropertyName: "internalFilterOptions", publicName: "internalFilterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOption", searchTextChange: "searchTextChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => QuangAutocompleteComponent),
@@ -284,11 +735,11 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
                 provide: QuangOptionListComponent,
                 multi: false,
             },
-        ], viewQueries: [{ propertyName: "optionList", first: true, predicate: ["optionList"], descendants: true, isSignal: true }, { propertyName: "selectInput", first: true, predicate: ["selectInput"], descendants: true, isSignal: true }, { propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true, isSignal: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track chip) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);height:2rem}.chip p{margin:0;max-width:var(--chip-max-length);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "optionList", first: true, predicate: ["optionList"], descendants: true, isSignal: true }, { propertyName: "selectInput", first: true, predicate: ["selectInput"], descendants: true, isSignal: true }, { propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true, isSignal: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"{\n      horizontal: multiSelectDisplayMode() === 'horizontal',\n      'form-control': multiSelectDisplayMode() === 'horizontal',\n      'chips-bottom': chipsPosition() === 'bottom',\n    }\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'top') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n\n    <input\n      [attr.aria-activedescendant]=\"_showOptions() ? optionList()?.getActiveDescendantId() : null\"\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      type=\"text\"\n    />\n\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'bottom') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_highlightedValue()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      (escapePressed)=\"onEscapePressed()\"\n      (tabPressed)=\"onTabPressed($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div\n    [class.d-block]=\"_showSuccess()\"\n    class=\"valid-feedback\"\n  >\n    {{ successMessage() | transloco }}\n  </div>\n  <div\n    [class.d-block]=\"_showErrors()\"\n    class=\"invalid-feedback\"\n  >\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n\n<!-- Chips template for reuse in top/bottom positions -->\n<ng-template #chipsTemplate>\n  <div class=\"chips-container\">\n    @for (chip of _chipList(); track chip) {\n      @if (getDescription(chip)) {\n        <div\n          [ngClass]=\"{ 'chip-truncate': chipMaxLength() }\"\n          [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n          class=\"chip chip-hover\"\n        >\n          <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n            @if (getOptionByValue(chip); as opt) {\n              @if (opt.renderer) {\n                <ng-container\n                  [ngTemplateOutlet]=\"opt.renderer\"\n                  [ngTemplateOutletContext]=\"{ $implicit: opt, selected: true, index: getOptionIndex(opt) }\"\n                ></ng-container>\n              } @else {\n                {{ getDescription(chip) }}\n              }\n            } @else {\n              {{ getDescription(chip) }}\n            }\n          </p>\n          @if (!isReadonly() && !_isDisabled()) {\n            <button\n              [tabIndex]=\"$index + 1\"\n              (click)=\"deleteChip(chip)\"\n              class=\"btn btn-chip\"\n              type=\"button\"\n            >\n              <svg\n                class=\"ionicon\"\n                fill=\"currentColor\"\n                height=\"24\"\n                viewBox=\"0 0 512 512\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M368 368L144 144M368 144L144 368\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap,.container-wrap .chips-container{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.chips-bottom{flex-direction:column}.container-wrap.chips-bottom input{order:-1}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);min-height:2rem;max-width:100%}.chip p{margin:0;max-width:var(--chip-max-length);overflow:hidden;overflow-wrap:break-word;word-break:break-word}.chip.chip-truncate p{white-space:nowrap;text-overflow:ellipsis}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler", "escapePressed", "tabPressed"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'quang-autocomplete', imports: [TranslocoPipe, NgClass, QuangOptionListComponent, NgStyle, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'quang-autocomplete', imports: [TranslocoPipe, NgClass, NgTemplateOutlet, QuangOptionListComponent, NgStyle, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => QuangAutocompleteComponent),
@@ -298,8 +749,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                             provide: QuangOptionListComponent,
                             multi: false,
                         },
-                    ], template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track chip) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);height:2rem}.chip p{margin:0;max-width:var(--chip-max-length);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { syncFormWithText: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncFormWithText", required: false }] }], optionListMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionListMaxHeight", required: false }] }], selectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOptions", required: true }] }], translateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateValue", required: false }] }], scrollBehaviorOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehaviorOnOpen", required: false }] }], emitOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitOnly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], chipMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipMaxLength", required: false }] }], multiSelectDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectDisplayMode", required: false }] }], optionList: [{ type: i0.ViewChild, args: ['optionList', { isSignal: true }] }], selectedOption: [{ type: i0.Output, args: ["selectedOption"] }], searchTextChange: [{ type: i0.Output, args: ["searchTextChange"] }], searchTextDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTextDebounce", required: false }] }], internalFilterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "internalFilterOptions", required: false }] }], selectInput: [{ type: i0.ViewChild, args: ['selectInput', { isSignal: true }] }], chipContainer: [{ type: i0.ViewChild, args: ['chipContainer', { isSignal: true }] }], autocompleteContainer: [{ type: i0.ViewChild, args: ['autocompleteContainer', { isSignal: true }] }] } });
+                    ], template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"{\n      horizontal: multiSelectDisplayMode() === 'horizontal',\n      'form-control': multiSelectDisplayMode() === 'horizontal',\n      'chips-bottom': chipsPosition() === 'bottom',\n    }\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'top') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n\n    <input\n      [attr.aria-activedescendant]=\"_showOptions() ? optionList()?.getActiveDescendantId() : null\"\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      type=\"text\"\n    />\n\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'bottom') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_highlightedValue()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      (escapePressed)=\"onEscapePressed()\"\n      (tabPressed)=\"onTabPressed($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div\n    [class.d-block]=\"_showSuccess()\"\n    class=\"valid-feedback\"\n  >\n    {{ successMessage() | transloco }}\n  </div>\n  <div\n    [class.d-block]=\"_showErrors()\"\n    class=\"invalid-feedback\"\n  >\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n\n<!-- Chips template for reuse in top/bottom positions -->\n<ng-template #chipsTemplate>\n  <div class=\"chips-container\">\n    @for (chip of _chipList(); track chip) {\n      @if (getDescription(chip)) {\n        <div\n          [ngClass]=\"{ 'chip-truncate': chipMaxLength() }\"\n          [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n          class=\"chip chip-hover\"\n        >\n          <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n            @if (getOptionByValue(chip); as opt) {\n              @if (opt.renderer) {\n                <ng-container\n                  [ngTemplateOutlet]=\"opt.renderer\"\n                  [ngTemplateOutletContext]=\"{ $implicit: opt, selected: true, index: getOptionIndex(opt) }\"\n                ></ng-container>\n              } @else {\n                {{ getDescription(chip) }}\n              }\n            } @else {\n              {{ getDescription(chip) }}\n            }\n          </p>\n          @if (!isReadonly() && !_isDisabled()) {\n            <button\n              [tabIndex]=\"$index + 1\"\n              (click)=\"deleteChip(chip)\"\n              class=\"btn btn-chip\"\n              type=\"button\"\n            >\n              <svg\n                class=\"ionicon\"\n                fill=\"currentColor\"\n                height=\"24\"\n                viewBox=\"0 0 512 512\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M368 368L144 144M368 144L144 368\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap,.container-wrap .chips-container{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.chips-bottom{flex-direction:column}.container-wrap.chips-bottom input{order:-1}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);min-height:2rem;max-width:100%}.chip p{margin:0;max-width:var(--chip-max-length);overflow:hidden;overflow-wrap:break-word;word-break:break-word}.chip.chip-truncate p{white-space:nowrap;text-overflow:ellipsis}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOptions", required: true }] }], allowFreeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFreeText", required: false }] }], autoSelectOnExactMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelectOnExactMatch", required: false }] }], updateValueOnType: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateValueOnType", required: false }] }], syncFormWithText: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncFormWithText", required: false }] }], optionListMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionListMaxHeight", required: false }] }], translateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateValue", required: false }] }], scrollBehaviorOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehaviorOnOpen", required: false }] }], emitOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitOnly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], chipMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipMaxLength", required: false }] }], multiSelectDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectDisplayMode", required: false }] }], chipsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsPosition", required: false }] }], searchTextDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTextDebounce", required: false }] }], internalFilterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "internalFilterOptions", required: false }] }], selectedOption: [{ type: i0.Output, args: ["selectedOption"] }], searchTextChange: [{ type: i0.Output, args: ["searchTextChange"] }], optionList: [{ type: i0.ViewChild, args: ['optionList', { isSignal: true }] }], selectInput: [{ type: i0.ViewChild, args: ['selectInput', { isSignal: true }] }], chipContainer: [{ type: i0.ViewChild, args: ['chipContainer', { isSignal: true }] }], autocompleteContainer: [{ type: i0.ViewChild, args: ['autocompleteContainer', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.