quang 19.3.15-3 → 19.3.15-4

package/components/autocomplete/autocomplete.component.d.ts

@@ -9,7 +9,7 @@ import * as i0 from "@angular/core";
  *
  * `searchTextDebounce` is by default set to 300ms.
  */
-export declare class QuangAutocompleteComponent extends QuangBaseComponent<string | number | string[] | number[]> {
+export declare class QuangAutocompleteComponent extends QuangBaseComponent<string | number | string[] | number[] | null> {
     /**
      * The list of options to display in the autocomplete dropdown.
      */
@@ -166,8 +166,8 @@ export declare class QuangAutocompleteComponent extends QuangBaseComponent<strin
     private readonly showOptionsChangeSubscription;
     constructor();
     setupFormControl(): void;
-    writeValue(val: string | number | string[] | number[]): void;
-    onChangedHandler(value: string | number | string[] | number[]): void;
+    writeValue(val: string | number | string[] | number[] | null): void;
+    onChangedHandler(value: string | number | string[] | number[] | null): void;
     onBlurHandler(): void;
     /**
      * Shows the option list dropdown.
@@ -187,7 +187,28 @@ export declare class QuangAutocompleteComponent extends QuangBaseComponent<strin
      * @param value The selected option's value
      * @param hideOptions Whether to hide the dropdown after selection
      */
-    onValueChange(value: string | number, hideOptions?: boolean): void;
+    onValueChange(value: string | number | null, hideOptions?: boolean): void;
+    /**
+     * Handles keydown events on the input element for accessibility.
+     * @param event The keyboard event
+     */
+    onInputKeydown(event: KeyboardEvent): void;
+    /**
+     * Handles Escape key press from option list.
+     * Closes dropdown and returns focus to input.
+     */
+    onEscapePressed(): void;
+    /**
+     * Handles Tab key press from option list.
+     * Closes dropdown and allows natural tab navigation.
+     */
+    onTabPressed(_event: {
+        shiftKey: boolean;
+    }): void;
+    /**
+     * Sets focus to the input element.
+     */
+    focusInput(): void;
     /**
      * Handles input blur event.
      * @param event The focus event
@@ -249,7 +270,7 @@ export declare class QuangAutocompleteComponent extends QuangBaseComponent<strin
     /**
      * Emits search text change after debounce.
      * When `updateValueOnType` is true, also updates the form value using the same
-     * matching logic as checkInputValue (auto-select matching options, or use free text).
+     * matching logic as processTextToFormValue (auto-select matching options, or use free text).
      */
     private emitDebouncedSearchText;
     /**

package/components/select/select.component.d.ts

@@ -26,6 +26,27 @@ export declare class QuangSelectComponent extends QuangBaseComponent<string | nu
     onBlurHandler(): void;
     onChangedHandler(value: string | number | string[] | number[] | null): void;
     onMouseLeaveCallback(): void;
+    /**
+     * Handles keydown events on the select button for accessibility.
+     * @param event The keyboard event
+     */
+    onButtonKeydown(event: KeyboardEvent): void;
+    /**
+     * Handles Escape key press from option list.
+     * Closes dropdown and returns focus to button.
+     */
+    onEscapePressed(): void;
+    /**
+     * Handles Tab key press from option list.
+     * Closes dropdown and allows natural tab navigation.
+     */
+    onTabPressed(_event: {
+        shiftKey: boolean;
+    }): void;
+    /**
+     * Sets focus to the select button element.
+     */
+    focusButton(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<QuangSelectComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<QuangSelectComponent, "quang-select", never, { "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "selectOptions": { "alias": "selectOptions"; "required": true; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "nullOption": { "alias": "nullOption"; "required": false; "isSignal": true; }; "autoSelectSingleOption": { "alias": "autoSelectSingleOption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/components/shared/option-list/option-list.component.d.ts

@@ -14,7 +14,7 @@ export declare class QuangOptionListComponent {
     selectionMode: import("@angular/core").InputSignal<"single" | "multiple">;
     optionListMaxHeight: import("@angular/core").InputSignal<string>;
     selectOptions: import("@angular/core").InputSignal<SelectOption[]>;
-    selectButtonRef: import("@angular/core").InputSignal<HTMLInputElement | HTMLButtonElement | HTMLDivElement>;
+    selectButtonRef: import("@angular/core").InputSignal<HTMLButtonElement | HTMLInputElement | HTMLDivElement>;
     _value: import("@angular/core").InputSignal<any>;
     _isDisabled: import("@angular/core").InputSignal<boolean | undefined>;
     componentClass: import("@angular/core").InputSignal<string | string[]>;
@@ -28,6 +28,12 @@ export declare class QuangOptionListComponent {
     scrollBehaviorOnOpen: import("@angular/core").InputSignal<ScrollBehavior>;
     changedHandler: import("@angular/core").OutputEmitterRef<any>;
     blurHandler: import("@angular/core").OutputEmitterRef<any>;
+    /** Emitted when user presses Escape - parent should close dropdown and return focus to trigger */
+    escapePressed: import("@angular/core").OutputEmitterRef<void>;
+    /** Emitted when user presses Tab - parent should handle focus transition */
+    tabPressed: import("@angular/core").OutputEmitterRef<{
+        shiftKey: boolean;
+    }>;
     optionListContainer: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
     destroyRef: DestroyRef;
     parentType: import("@angular/core").InputSignal<OptionListParentType>;
@@ -38,6 +44,12 @@ export declare class QuangOptionListComponent {
     selectOptionsList: import("@angular/core").Signal<SelectOption[]>;
     onKeyDown: Subscription | null;
     selectedElementIndex: import("@angular/core").Signal<number>;
+    /** Signal to track currently focused item index for aria-activedescendant */
+    focusedItemIndex: import("@angular/core").WritableSignal<number>;
+    /**
+     * Returns the ID of the currently focused item for aria-activedescendant
+     */
+    getActiveDescendantId(): string | null;
     optionList$: import("@angular/core").EffectRef;
     handleSearch(key: string, listItems: HTMLLIElement[], currentIndex: number): number;
     changePosition(): void;
@@ -49,5 +61,5 @@ export declare class QuangOptionListComponent {
     getOptionListWidth(): void;
     getOptionListTop(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<QuangOptionListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<QuangOptionListComponent, "quang-option-list", never, { "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "selectOptions": { "alias": "selectOptions"; "required": false; "isSignal": true; }; "selectButtonRef": { "alias": "selectButtonRef"; "required": true; "isSignal": true; }; "_value": { "alias": "_value"; "required": false; "isSignal": true; }; "_isDisabled": { "alias": "_isDisabled"; "required": false; "isSignal": true; }; "componentClass": { "alias": "componentClass"; "required": false; "isSignal": true; }; "componentLabel": { "alias": "componentLabel"; "required": false; "isSignal": true; }; "componentTabIndex": { "alias": "componentTabIndex"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "nullOption": { "alias": "nullOption"; "required": false; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "parentType": { "alias": "parentType"; "required": true; "isSignal": true; }; "parentID": { "alias": "parentID"; "required": false; "isSignal": true; }; }, { "changedHandler": "changedHandler"; "blurHandler": "blurHandler"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QuangOptionListComponent, "quang-option-list", never, { "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "selectOptions": { "alias": "selectOptions"; "required": false; "isSignal": true; }; "selectButtonRef": { "alias": "selectButtonRef"; "required": true; "isSignal": true; }; "_value": { "alias": "_value"; "required": false; "isSignal": true; }; "_isDisabled": { "alias": "_isDisabled"; "required": false; "isSignal": true; }; "componentClass": { "alias": "componentClass"; "required": false; "isSignal": true; }; "componentLabel": { "alias": "componentLabel"; "required": false; "isSignal": true; }; "componentTabIndex": { "alias": "componentTabIndex"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "nullOption": { "alias": "nullOption"; "required": false; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "parentType": { "alias": "parentType"; "required": true; "isSignal": true; }; "parentID": { "alias": "parentID"; "required": false; "isSignal": true; }; }, { "changedHandler": "changedHandler"; "blurHandler": "blurHandler"; "escapePressed": "escapePressed"; "tabPressed": "tabPressed"; }, never, never, true, never>;
 }

package/fesm2022/quang-components-autocomplete.mjs

@@ -241,12 +241,12 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
         /** Effect to handle input element setup and keyboard events */
         this.onChangeSelectInputEffect = effect(() => {
             const selectInput = this.selectInput();
-            if (selectInput) {
-                this.inputHeight.set(selectInput.nativeElement.getBoundingClientRect().height);
-                selectInput.nativeElement.addEventListener('keydown', (e) => {
-                    this.handleInputKeydown(e, selectInput.nativeElement);
-                });
-            }
+            if (!selectInput)
+                return;
+            this.inputHeight.set(selectInput.nativeElement.getBoundingClientRect().height);
+            selectInput.nativeElement.addEventListener('keydown', (e) => {
+                this.handleInputKeydown(e, selectInput.nativeElement);
+            });
         });
         /** Subscription to options changes */
         this.selectOptionsChangeSubscription = toObservable(this.selectOptions)
@@ -262,20 +262,20 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
             // 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()) {
-                // Only process if still in search mode (which means onBlurHandler didn't run)
-                this.processTextToFormValue(this._userSearchText(), {
-                    exitSearchMode: true,
-                    updateOnMatch: true,
-                    clearSearchText: true,
-                });
-            }
+            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) {
-                clearTimeout(this._searchDebounceTimer);
-            }
+            if (!this._searchDebounceTimer)
+                return;
+            clearTimeout(this._searchDebounceTimer);
         });
     }
     // ============================================
@@ -288,13 +288,13 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
             this.formValueChangeSubscription.unsubscribe();
             this.formValueChangeSubscription = undefined;
         }
-        if (formControl) {
-            this.formValueChangeSubscription = formControl.valueChanges
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe((value) => {
-                this.handleFormValueChange(value);
-            });
-        }
+        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
@@ -310,7 +310,7 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
     onChangedHandler(value) {
         super.onChangedHandler(value);
         // Exit search mode - _inputValue will now derive from _value
-        // Note: Don't clear _userSearchText here - it's needed for checkInputValue matching
+        // Note: Don't clear _userSearchText here - it's needed for processTextToFormValue matching
         this._isSearching.set(false);
     }
     onBlurHandler() {
@@ -336,11 +336,11 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
         // 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()) {
-            const currentInputValue = this._inputValue();
-            this._userSearchText.set(currentInputValue || '');
-            this._isSearching.set(true);
-        }
+        if (this._isSearching())
+            return;
+        const currentInputValue = this._inputValue();
+        this._userSearchText.set(currentInputValue || '');
+        this._isSearching.set(true);
     }
     /**
      * Hides the option list dropdown.
@@ -365,6 +365,20 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
      * @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.handleSelectValue(value);
             this.onChangedHandler(this._chipList());
@@ -372,21 +386,100 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
                 this._userSearchText.set('');
                 this._isSearching.set(false);
             }
+            return;
         }
-        else {
-            // Update _userSearchText to the selected option's label
-            // This enables checkInputValue to match correctly on blur
-            const selectedOption = this.selectOptions().find((x) => x.value === value);
-            if (selectedOption) {
-                this._userSearchText.set(selectedOption.label);
-            }
-            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);
+        }
+        this.onChangedHandler(value);
+        if (hideOptions) {
+            this.hideOptionVisibility();
+            // Return focus to input after selection
+            this.focusInput();
+        }
+        this.selectedOption.emit(value);
+    }
+    /**
+     * 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;
         }
     }
+    /**
+     * Handles Escape key press from option list.
+     * Closes dropdown and returns focus to input.
+     */
+    onEscapePressed() {
+        this.hideOptionVisibility();
+        this.focusInput();
+    }
+    /**
+     * 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
@@ -394,18 +487,18 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
     onBlurInput(event) {
         const relatedTarget = event.relatedTarget;
         const optionListId = this.optionList()?.optionListContainer()?.nativeElement?.id;
-        if (relatedTarget?.id !== optionListId) {
-            this.onBlurHandler();
-        }
+        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();
     }
     /**
      * Gets the display description for a chip value.
@@ -423,10 +516,10 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
     deleteChip(chipValue) {
         const stringChipValue = chipValue?.toString();
         const index = this._chipList().findIndex((x) => x.toString() === stringChipValue);
-        if (index >= 0) {
-            this._chipList.update((list) => list.filter((_, i) => i !== index));
-            this.onChangedHandler(this._chipList());
-        }
+        if (index < 0)
+            return;
+        this._chipList.update((list) => list.filter((_, i) => i !== index));
+        this.onChangedHandler(this._chipList());
     }
     // ============================================
     // PROTECTED METHODS - Internal logic, accessible to subclasses
@@ -438,10 +531,10 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
      */
     filterOptions(value) {
         const options = this.selectOptions();
-        if (this.internalFilterOptions()) {
-            return options.filter((x) => x.label.toLowerCase().includes(value.toLowerCase()));
-        }
-        return options;
+        const trimmedValue = value?.trim();
+        return this.internalFilterOptions() && trimmedValue
+            ? options.filter((x) => x.label.toLowerCase().includes(trimmedValue.toLowerCase()))
+            : options;
     }
     // ============================================
     // PRIVATE METHODS - Internal implementation
@@ -479,9 +572,11 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
             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 no valid selection and free text not allowed
+            // - 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 shouldClearOnBlur = options.exitSearchMode && !this._allowFreeTextInternal() && (!matchingOption || !this.autoSelectOnExactMatch());
+            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
@@ -501,9 +596,9 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
                     this.onValueChange(searchText, false);
                 }
             }
-            else if (shouldClearOnBlur) {
-                // On blur, no valid selection possible: clear the value
-                this.onChangedHandler('');
+            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
@@ -518,25 +613,25 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
      * Handles keyboard events on the input element.
      */
     handleInputKeydown(e, inputElement) {
-        if (this.multiple() && this._chipList().length > 0 && !this._inputValue()?.length && e.key === 'Backspace') {
-            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();
-                        }
-                        else {
-                            event.preventDefault();
-                        }
-                    });
-                }
+        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();
+                });
             }
         }
     }
@@ -556,14 +651,15 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
      * Handles form value changes from external sources.
      */
     handleFormValueChange(value) {
-        if (this.multiple() && Array.isArray(value)) {
-            this._chipList.set([]);
-            this._selectedOptions.set([]);
-            value.forEach((x) => {
-                this.handleSelectValue(x);
-            });
+        if (!(this.multiple() && Array.isArray(value))) {
+            return;
         }
-        // Note: Don't clear _userSearchText here - it's managed by checkInputValue
+        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.
     }
     /**
@@ -579,7 +675,7 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
     /**
      * Emits search text change after debounce.
      * When `updateValueOnType` is true, also updates the form value using the same
-     * matching logic as checkInputValue (auto-select matching options, or use free text).
+     * matching logic as processTextToFormValue (auto-select matching options, or use free text).
      */
     emitDebouncedSearchText(value) {
         if (this._searchDebounceTimer) {
@@ -589,18 +685,19 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
             if (this._isDestroyed) {
                 return;
             }
-            if (value !== this._lastEmittedSearchText) {
-                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,
-                });
+            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());
     }
     /**
@@ -625,7 +722,7 @@ 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\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\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]=\"_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      #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()) {\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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }], 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\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\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.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  </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 class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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", "escapePressed", "tabPressed"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
             type: Component,
@@ -639,7 +736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\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]=\"_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      #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()) {\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"] }]
+                    ], 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\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\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.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  </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 class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\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: () => [] });
 
 /**