quang 19.3.15-3 → 19.3.15-5

package/fesm2022/quang-components-autocomplete.mjs

@@ -1,4 +1,4 @@
-import { NgClass, NgStyle } from '@angular/common';
+import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, output, viewChild, signal, computed, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -106,6 +106,13 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
          * @default 'vertical'
          */
         this.multiSelectDisplayMode = input('vertical');
+        /**
+         * 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');
         /**
          * Debounce time in milliseconds for search text changes.
          * @default 300
@@ -241,12 +248,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 +269,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 +295,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 +317,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 +343,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 +372,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 +393,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 +494,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 +523,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 +538,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 +579,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 +603,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 +620,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 +658,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 +682,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 +692,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());
     }
     /**
@@ -615,7 +719,7 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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 }, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.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),
@@ -625,11 +729,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\"\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]=\"{\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 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\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          [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  </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;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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.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),
@@ -639,7 +743,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]=\"{\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 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\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          [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  </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;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: () => [] });
 
 /**