quang 21.1.2 → 21.2.0

package/fesm2022/quang-components-autocomplete.mjs

@@ -39,21 +39,21 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
         /**
          * The list of options to display in the autocomplete dropdown.
          */
-        this.selectOptions = input.required(...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
+        this.selectOptions = input.required(...(ngDevMode ? [{ debugName: "selectOptions" }] : /* istanbul ignore next */ []));
         /**
          * When true, allows any text input as a valid form value, not just option values.
          * The form value will sync with whatever text the user types.
          * When false (default), the form value must match one of the option values.
          * @default false
          */
-        this.allowFreeText = input(false, ...(ngDevMode ? [{ debugName: "allowFreeText" }] : []));
+        this.allowFreeText = input(false, ...(ngDevMode ? [{ debugName: "allowFreeText" }] : /* istanbul ignore next */ []));
         /**
          * When true and allowFreeText is false, automatically selects an option if the user's
          * input text matches an option's label exactly (case-insensitive, trimmed).
          * This provides a better UX by auto-selecting when users type a complete option label.
          * @default true
          */
-        this.autoSelectOnExactMatch = input(true, ...(ngDevMode ? [{ debugName: "autoSelectOnExactMatch" }] : []));
+        this.autoSelectOnExactMatch = input(true, ...(ngDevMode ? [{ debugName: "autoSelectOnExactMatch" }] : /* istanbul ignore next */ []));
         /**
          * When true, updates the form value as the user types (after debounce).
          * When false (default), the form value is only updated when:
@@ -61,7 +61,7 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
          * - User stops typing and the input loses focus (blur)
          * @default false
          */
-        this.updateValueOnType = input(false, ...(ngDevMode ? [{ debugName: "updateValueOnType" }] : []));
+        this.updateValueOnType = input(false, ...(ngDevMode ? [{ debugName: "updateValueOnType" }] : /* istanbul ignore next */ []));
         /**
          * Whether the form value can be any text or must match one of the options.
          * When true, the form value syncs with the input text.
@@ -69,61 +69,61 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
          * @default false
          * @deprecated Use `allowFreeText` instead. This input will be removed in a future version.
          */
-        this.syncFormWithText = input(false, ...(ngDevMode ? [{ debugName: "syncFormWithText" }] : []));
+        this.syncFormWithText = input(false, ...(ngDevMode ? [{ debugName: "syncFormWithText" }] : /* istanbul ignore next */ []));
         /**
          * Maximum height of the option list before scrolling.
          * @default '200px'
          */
-        this.optionListMaxHeight = input('200px', ...(ngDevMode ? [{ debugName: "optionListMaxHeight" }] : []));
+        this.optionListMaxHeight = input('200px', ...(ngDevMode ? [{ debugName: "optionListMaxHeight" }] : /* istanbul ignore next */ []));
         /**
          * Whether to translate option labels.
          * @default true
          */
-        this.translateValue = input(true, ...(ngDevMode ? [{ debugName: "translateValue" }] : []));
+        this.translateValue = input(true, ...(ngDevMode ? [{ debugName: "translateValue" }] : /* istanbul ignore next */ []));
         /**
          * Scroll behavior when the option list opens.
          * @default 'smooth'
          */
-        this.scrollBehaviorOnOpen = input('smooth', ...(ngDevMode ? [{ debugName: "scrollBehaviorOnOpen" }] : []));
+        this.scrollBehaviorOnOpen = input('smooth', ...(ngDevMode ? [{ debugName: "scrollBehaviorOnOpen" }] : /* istanbul ignore next */ []));
         /**
          * When true, only emits the value without saving it to ngControl.
          * @default false
          */
-        this.emitOnly = input(false, ...(ngDevMode ? [{ debugName: "emitOnly" }] : []));
+        this.emitOnly = input(false, ...(ngDevMode ? [{ debugName: "emitOnly" }] : /* istanbul ignore next */ []));
         /**
          * Enable multiple selection mode with chips.
          * @default false
          */
-        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
         /**
          * Maximum length in characters for chip display text.
          * When set, chips will be truncated and show a tooltip with full text.
          * @default 0 (no limit)
          */
-        this.chipMaxLength = input(0, ...(ngDevMode ? [{ debugName: "chipMaxLength" }] : []));
+        this.chipMaxLength = input(0, ...(ngDevMode ? [{ debugName: "chipMaxLength" }] : /* istanbul ignore next */ []));
         /**
          * Layout direction for chips in multiple selection mode.
          * @default 'vertical'
          */
-        this.multiSelectDisplayMode = input('vertical', ...(ngDevMode ? [{ debugName: "multiSelectDisplayMode" }] : []));
+        this.multiSelectDisplayMode = input('vertical', ...(ngDevMode ? [{ debugName: "multiSelectDisplayMode" }] : /* istanbul ignore next */ []));
         /**
          * Position of chips relative to the input in multiple selection mode.
          * - 'top': Chips are displayed above the input (default)
          * - 'bottom': Chips are displayed below the input
          * @default 'top'
          */
-        this.chipsPosition = input('top', ...(ngDevMode ? [{ debugName: "chipsPosition" }] : []));
+        this.chipsPosition = input('top', ...(ngDevMode ? [{ debugName: "chipsPosition" }] : /* istanbul ignore next */ []));
         /**
          * Debounce time in milliseconds for search text changes.
          * @default 300
          */
-        this.searchTextDebounce = input(300, ...(ngDevMode ? [{ debugName: "searchTextDebounce" }] : []));
+        this.searchTextDebounce = input(300, ...(ngDevMode ? [{ debugName: "searchTextDebounce" }] : /* istanbul ignore next */ []));
         /**
          * Whether to filter options internally based on input text.
          * When false, filtering should be handled externally via searchTextChange event.
          * @default true
          */
-        this.internalFilterOptions = input(true, ...(ngDevMode ? [{ debugName: "internalFilterOptions" }] : []));
+        this.internalFilterOptions = input(true, ...(ngDevMode ? [{ debugName: "internalFilterOptions" }] : /* istanbul ignore next */ []));
         // ============================================
         // OUTPUTS - Event emitters
         // ============================================
@@ -141,20 +141,20 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
         // VIEW CHILDREN - Template references
         // ============================================
         /** Reference to the option list component */
-        this.optionList = viewChild('optionList', ...(ngDevMode ? [{ debugName: "optionList" }] : []));
+        this.optionList = viewChild('optionList', ...(ngDevMode ? [{ debugName: "optionList" }] : /* istanbul ignore next */ []));
         /** Reference to the input element */
-        this.selectInput = viewChild('selectInput', ...(ngDevMode ? [{ debugName: "selectInput" }] : []));
+        this.selectInput = viewChild('selectInput', ...(ngDevMode ? [{ debugName: "selectInput" }] : /* istanbul ignore next */ []));
         /** Reference to the chip container element */
-        this.chipContainer = viewChild('chipContainer', ...(ngDevMode ? [{ debugName: "chipContainer" }] : []));
+        this.chipContainer = viewChild('chipContainer', ...(ngDevMode ? [{ debugName: "chipContainer" }] : /* istanbul ignore next */ []));
         /** Reference to the main autocomplete container */
-        this.autocompleteContainer = viewChild('autocompleteContainer', ...(ngDevMode ? [{ debugName: "autocompleteContainer" }] : []));
+        this.autocompleteContainer = viewChild('autocompleteContainer', ...(ngDevMode ? [{ debugName: "autocompleteContainer" }] : /* istanbul ignore next */ []));
         // ============================================
         // PUBLIC STATE - Used in template
         // ============================================
         /** Constant for option list parent type */
         this.ParentType = OptionListParentType.AUTOCOMPLETE;
         /** Height of the input element (used for positioning) */
-        this.inputHeight = signal(0, ...(ngDevMode ? [{ debugName: "inputHeight" }] : []));
+        this.inputHeight = signal(0, ...(ngDevMode ? [{ debugName: "inputHeight" }] : /* istanbul ignore next */ []));
         /**
          * The display text for the input field.
          * - When searching: shows what the user typed
@@ -177,21 +177,21 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
                 return String(value);
             }
             return option?.label ?? '';
-        }, ...(ngDevMode ? [{ debugName: "_inputValue" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_inputValue" }] : /* istanbul ignore next */ []));
         /** Whether the option list is currently visible */
-        this._showOptions = signal(null, ...(ngDevMode ? [{ debugName: "_showOptions" }] : []));
+        this._showOptions = signal(null, ...(ngDevMode ? [{ debugName: "_showOptions" }] : /* istanbul ignore next */ []));
         /** List of selected chip values (for multiple mode) */
-        this._chipList = signal([], ...(ngDevMode ? [{ debugName: "_chipList" }] : []));
+        this._chipList = signal([], ...(ngDevMode ? [{ debugName: "_chipList" }] : /* istanbul ignore next */ []));
         /** List of selected option objects (for multiple mode) */
-        this._selectedOptions = signal([], ...(ngDevMode ? [{ debugName: "_selectedOptions" }] : []));
+        this._selectedOptions = signal([], ...(ngDevMode ? [{ debugName: "_selectedOptions" }] : /* istanbul ignore next */ []));
         /** Filtered options based on search text and chip selection */
         this._filteredOptions = computed(() => {
             const searchText = this._isSearching() ? this._userSearchText() : '';
             if (this.multiple()) {
-                return this.filterOptions(searchText).filter((x) => !this._chipList().some((chip) => chip === x.value));
+                return this.filterOptions(searchText).filter((x) => !this._chipList().some((chip) => chip?.toString() === x.value?.toString()));
             }
             return searchText?.length ? this.filterOptions(searchText) : this.selectOptions();
-        }, ...(ngDevMode ? [{ debugName: "_filteredOptions" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_filteredOptions" }] : /* istanbul ignore next */ []));
         /**
          * The value to use for highlighting in the option list.
          * When searching: shows the matched option (if any) based on exact label match
@@ -216,21 +216,21 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
             }
             // When not searching, use the current value
             return this._value();
-        }, ...(ngDevMode ? [{ debugName: "_highlightedValue" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_highlightedValue" }] : /* istanbul ignore next */ []));
         // ============================================
         // PROTECTED STATE - Internal but accessible to subclasses
         // ============================================
         /** Whether the user is actively typing/searching */
-        this._isSearching = signal(false, ...(ngDevMode ? [{ debugName: "_isSearching" }] : []));
+        this._isSearching = signal(false, ...(ngDevMode ? [{ debugName: "_isSearching" }] : /* istanbul ignore next */ []));
         /** The text the user is currently typing while searching */
-        this._userSearchText = signal('', ...(ngDevMode ? [{ debugName: "_userSearchText" }] : []));
+        this._userSearchText = signal('', ...(ngDevMode ? [{ debugName: "_userSearchText" }] : /* istanbul ignore next */ []));
         /**
          * Internal computed that returns true if free text input is allowed.
          * Combines both `allowFreeText` and deprecated `syncFormWithText` inputs.
          */
         this._allowFreeTextInternal = computed(() => {
             return this.allowFreeText() || this.syncFormWithText();
-        }, ...(ngDevMode ? [{ debugName: "_allowFreeTextInternal" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_allowFreeTextInternal" }] : /* istanbul ignore next */ []));
         // ============================================
         // PRIVATE STATE - Internal implementation details
         // ============================================
@@ -254,7 +254,7 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
             selectInput.nativeElement.addEventListener('keydown', (e) => {
                 this.handleInputKeydown(e, selectInput.nativeElement);
             });
-        }, ...(ngDevMode ? [{ debugName: "onChangeSelectInputEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "onChangeSelectInputEffect" }] : /* istanbul ignore next */ []));
         /** Subscription to options changes */
         this.selectOptionsChangeSubscription = toObservable(this.selectOptions)
             .pipe(takeUntilDestroyed())
@@ -372,6 +372,22 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
      * @param hideOptions Whether to hide the dropdown after selection
      */
     onValueChange(value, hideOptions = true) {
+        if (this.multiple()) {
+            const valueToHandle = this.resolveValueForMultipleMode(value);
+            if (!valueToHandle?.toString().trim()) {
+                return;
+            }
+            this.handleSelectValue(valueToHandle);
+            this.onChangedHandler(this._chipList());
+            if (hideOptions) {
+                this.hideOptionVisibility();
+                this.focusInput();
+            }
+            this._userSearchText.set('');
+            this._isSearching.set(false);
+            this.selectedOption.emit(valueToHandle);
+            return;
+        }
         // 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()) {
@@ -386,15 +402,6 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
                 return;
             }
         }
-        if (this.multiple()) {
-            this.handleSelectValue(value);
-            this.onChangedHandler(this._chipList());
-            if (this._chipList().some((x) => x === value)) {
-                this._userSearchText.set('');
-                this._isSearching.set(false);
-            }
-            return;
-        }
         // 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);
@@ -437,12 +444,22 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
                 }
                 break;
             case 'Enter':
-                // When allowFreeText is true and dropdown is open, handle Enter specially
+                // In multiple+freeText mode, Enter should add either an exact matching option
+                // or the typed custom text as a chip.
+                if (this._showOptions() && this._allowFreeTextInternal() && this.multiple()) {
+                    const searchText = this._userSearchText()?.trim();
+                    if (!searchText) {
+                        break;
+                    }
+                    event.preventDefault();
+                    const matchingOption = this.findMatchingOption(searchText);
+                    this.onValueChange(matchingOption?.value ?? null);
+                    break;
+                }
+                // When allowFreeText is true and dropdown is open, handle Enter specially in single mode
                 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,
@@ -451,7 +468,6 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
                         });
                         this.hideOptionVisibility();
                     }
-                    // If there are filtered options, let option-list handle the selection
                 }
                 break;
         }
@@ -514,7 +530,7 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
      */
     getDescription(chipValue) {
         const option = this.selectOptions().find((x) => x.value?.toString() === chipValue?.toString());
-        return option?.label?.toString() ?? '';
+        return option?.label?.toString() ?? chipValue?.toString() ?? '';
     }
     getOptionByValue(value) {
         return this.selectOptions().find((x) => x.value?.toString() === value?.toString());
@@ -679,11 +695,36 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
      * Handles selecting a value (adding to chip list in multiple mode).
      */
     handleSelectValue(value) {
+        const stringValue = value?.toString();
+        if (!stringValue) {
+            return;
+        }
+        if (this._chipList().some((x) => x.toString() === stringValue)) {
+            return;
+        }
         const option = this.selectOptions().find((x) => x.value === value);
-        if (option && !this._chipList().some((x) => x === option.value)) {
+        if (option) {
             this._chipList.update((list) => [...list, option.value]);
             this._selectedOptions.update((list) => [...list, option]);
+            return;
+        }
+        if (this._allowFreeTextInternal()) {
+            this._chipList.update((list) => [...list, stringValue]);
+        }
+    }
+    /**
+     * Resolves the value to add in multiple mode.
+     * If no option value is provided and free text is enabled, use the currently typed text.
+     */
+    resolveValueForMultipleMode(value) {
+        if (value !== null && value !== undefined) {
+            return value;
+        }
+        if (!this._allowFreeTextInternal()) {
+            return null;
         }
+        const typedText = this._userSearchText()?.trim();
+        return typedText || null;
     }
     /**
      * Emits search text change after debounce.
@@ -724,8 +765,8 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
             this.onChange(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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),
@@ -735,9 +776,9 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
                 provide: QuangOptionListComponent,
                 multi: false,
             },
-        ], viewQueries: [{ propertyName: "optionList", first: true, predicate: ["optionList"], descendants: true, isSignal: true }, { propertyName: "selectInput", first: true, predicate: ["selectInput"], descendants: true, isSignal: true }, { propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true, isSignal: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"{\n      horizontal: multiSelectDisplayMode() === 'horizontal',\n      'form-control': multiSelectDisplayMode() === 'horizontal',\n      'chips-bottom': chipsPosition() === 'bottom',\n    }\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'top') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n\n    <input\n      [attr.aria-activedescendant]=\"_showOptions() ? optionList()?.getActiveDescendantId() : null\"\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      type=\"text\"\n    />\n\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'bottom') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_highlightedValue()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      (escapePressed)=\"onEscapePressed()\"\n      (tabPressed)=\"onTabPressed($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div\n    [class.d-block]=\"_showSuccess()\"\n    class=\"valid-feedback\"\n  >\n    {{ successMessage() | transloco }}\n  </div>\n  <div\n    [class.d-block]=\"_showErrors()\"\n    class=\"invalid-feedback\"\n  >\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n\n<!-- Chips template for reuse in top/bottom positions -->\n<ng-template #chipsTemplate>\n  <div class=\"chips-container\">\n    @for (chip of _chipList(); track chip) {\n      @if (getDescription(chip)) {\n        <div\n          [ngClass]=\"{ 'chip-truncate': chipMaxLength() }\"\n          [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n          class=\"chip chip-hover\"\n        >\n          <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n            @if (getOptionByValue(chip); as opt) {\n              @if (opt.renderer) {\n                <ng-container\n                  [ngTemplateOutlet]=\"opt.renderer\"\n                  [ngTemplateOutletContext]=\"{ $implicit: opt, selected: true, index: getOptionIndex(opt) }\"\n                ></ng-container>\n              } @else {\n                {{ getDescription(chip) }}\n              }\n            } @else {\n              {{ getDescription(chip) }}\n            }\n          </p>\n          @if (!isReadonly() && !_isDisabled()) {\n            <button\n              [tabIndex]=\"$index + 1\"\n              (click)=\"deleteChip(chip)\"\n              class=\"btn btn-chip\"\n              type=\"button\"\n            >\n              <svg\n                class=\"ionicon\"\n                fill=\"currentColor\"\n                height=\"24\"\n                viewBox=\"0 0 512 512\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M368 368L144 144M368 144L144 368\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap,.container-wrap .chips-container{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.chips-bottom{flex-direction:column}.container-wrap.chips-bottom input{order:-1}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);min-height:2rem;max-width:100%}.chip p{margin:0;max-width:var(--chip-max-length);overflow:hidden;overflow-wrap:break-word;word-break:break-word}.chip.chip-truncate p{white-space:nowrap;text-overflow:ellipsis}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler", "escapePressed", "tabPressed"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "optionList", first: true, predicate: ["optionList"], descendants: true, isSignal: true }, { propertyName: "selectInput", first: true, predicate: ["selectInput"], descendants: true, isSignal: true }, { propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true, isSignal: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div\n          [overlayPosition]=\"helpTooltipPosition()\"\n          [quangTooltip]=\"helpMessage() | transloco\"\n          [showMethod]=\"showHelpTooltipMethod()\"\n          class=\"pointer\"\n        >\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"{\n      horizontal: multiSelectDisplayMode() === 'horizontal',\n      'form-control': multiSelectDisplayMode() === 'horizontal',\n      'chips-bottom': chipsPosition() === 'bottom',\n    }\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'top') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n\n    <input\n      [attr.aria-activedescendant]=\"_showOptions() ? optionList()?.getActiveDescendantId() : null\"\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      type=\"text\"\n    />\n\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'bottom') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_highlightedValue()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      (escapePressed)=\"onEscapePressed()\"\n      (tabPressed)=\"onTabPressed($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div\n    [class.d-block]=\"_showSuccess()\"\n    class=\"valid-feedback\"\n  >\n    {{ successMessage() | transloco }}\n  </div>\n  <div\n    [class.d-block]=\"_showErrors()\"\n    class=\"invalid-feedback\"\n  >\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n\n<!-- Chips template for reuse in top/bottom positions -->\n<ng-template #chipsTemplate>\n  <div class=\"chips-container\">\n    @for (chip of _chipList(); track chip) {\n      @if (getDescription(chip)) {\n        <div\n          [ngClass]=\"{ 'chip-truncate': chipMaxLength() }\"\n          [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n          class=\"chip chip-hover\"\n        >\n          <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n            @if (getOptionByValue(chip); as opt) {\n              @if (opt.renderer) {\n                <ng-container\n                  [ngTemplateOutlet]=\"opt.renderer\"\n                  [ngTemplateOutletContext]=\"{ $implicit: opt, selected: true, index: getOptionIndex(opt) }\"\n                ></ng-container>\n              } @else {\n                {{ getDescription(chip) }}\n              }\n            } @else {\n              {{ getDescription(chip) }}\n            }\n          </p>\n          @if (!isReadonly() && !_isDisabled()) {\n            <button\n              [tabIndex]=\"$index + 1\"\n              (click)=\"deleteChip(chip)\"\n              class=\"btn btn-chip\"\n              type=\"button\"\n            >\n              <svg\n                class=\"ionicon\"\n                fill=\"currentColor\"\n                height=\"24\"\n                viewBox=\"0 0 512 512\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M368 368L144 144M368 144L144 368\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;--chip-max-length: none}.pointer{cursor:pointer}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap,.container-wrap .chips-container{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.chips-bottom{flex-direction:column}.container-wrap.chips-bottom input{order:-1}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);min-height:2rem;max-width:100%}.chip p{margin:0;max-width:var(--chip-max-length);overflow:hidden;overflow-wrap:break-word;word-break:break-word}.chip.chip-truncate p{white-space:nowrap;text-overflow:ellipsis}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler", "escapePressed", "tabPressed"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-autocomplete', imports: [TranslocoPipe, NgClass, NgTemplateOutlet, QuangOptionListComponent, NgStyle, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -749,7 +790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             provide: QuangOptionListComponent,
                             multi: false,
                         },
-                    ], template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"{\n      horizontal: multiSelectDisplayMode() === 'horizontal',\n      'form-control': multiSelectDisplayMode() === 'horizontal',\n      'chips-bottom': chipsPosition() === 'bottom',\n    }\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'top') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n\n    <input\n      [attr.aria-activedescendant]=\"_showOptions() ? optionList()?.getActiveDescendantId() : null\"\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      type=\"text\"\n    />\n\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'bottom') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_highlightedValue()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      (escapePressed)=\"onEscapePressed()\"\n      (tabPressed)=\"onTabPressed($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div\n    [class.d-block]=\"_showSuccess()\"\n    class=\"valid-feedback\"\n  >\n    {{ successMessage() | transloco }}\n  </div>\n  <div\n    [class.d-block]=\"_showErrors()\"\n    class=\"invalid-feedback\"\n  >\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n\n<!-- Chips template for reuse in top/bottom positions -->\n<ng-template #chipsTemplate>\n  <div class=\"chips-container\">\n    @for (chip of _chipList(); track chip) {\n      @if (getDescription(chip)) {\n        <div\n          [ngClass]=\"{ 'chip-truncate': chipMaxLength() }\"\n          [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n          class=\"chip chip-hover\"\n        >\n          <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n            @if (getOptionByValue(chip); as opt) {\n              @if (opt.renderer) {\n                <ng-container\n                  [ngTemplateOutlet]=\"opt.renderer\"\n                  [ngTemplateOutletContext]=\"{ $implicit: opt, selected: true, index: getOptionIndex(opt) }\"\n                ></ng-container>\n              } @else {\n                {{ getDescription(chip) }}\n              }\n            } @else {\n              {{ getDescription(chip) }}\n            }\n          </p>\n          @if (!isReadonly() && !_isDisabled()) {\n            <button\n              [tabIndex]=\"$index + 1\"\n              (click)=\"deleteChip(chip)\"\n              class=\"btn btn-chip\"\n              type=\"button\"\n            >\n              <svg\n                class=\"ionicon\"\n                fill=\"currentColor\"\n                height=\"24\"\n                viewBox=\"0 0 512 512\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M368 368L144 144M368 144L144 368\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap,.container-wrap .chips-container{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.chips-bottom{flex-direction:column}.container-wrap.chips-bottom input{order:-1}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);min-height:2rem;max-width:100%}.chip p{margin:0;max-width:var(--chip-max-length);overflow:hidden;overflow-wrap:break-word;word-break:break-word}.chip.chip-truncate p{white-space:nowrap;text-overflow:ellipsis}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"] }]
+                    ], template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div\n          [overlayPosition]=\"helpTooltipPosition()\"\n          [quangTooltip]=\"helpMessage() | transloco\"\n          [showMethod]=\"showHelpTooltipMethod()\"\n          class=\"pointer\"\n        >\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"{\n      horizontal: multiSelectDisplayMode() === 'horizontal',\n      'form-control': multiSelectDisplayMode() === 'horizontal',\n      'chips-bottom': chipsPosition() === 'bottom',\n    }\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'top') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n\n    <input\n      [attr.aria-activedescendant]=\"_showOptions() ? optionList()?.getActiveDescendantId() : null\"\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      type=\"text\"\n    />\n\n    @if (multiple() && _chipList().length > 0 && chipsPosition() === 'bottom') {\n      <ng-container *ngTemplateOutlet=\"chipsTemplate\" />\n    }\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_highlightedValue()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      (escapePressed)=\"onEscapePressed()\"\n      (tabPressed)=\"onTabPressed($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div\n    [class.d-block]=\"_showSuccess()\"\n    class=\"valid-feedback\"\n  >\n    {{ successMessage() | transloco }}\n  </div>\n  <div\n    [class.d-block]=\"_showErrors()\"\n    class=\"invalid-feedback\"\n  >\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n\n<!-- Chips template for reuse in top/bottom positions -->\n<ng-template #chipsTemplate>\n  <div class=\"chips-container\">\n    @for (chip of _chipList(); track chip) {\n      @if (getDescription(chip)) {\n        <div\n          [ngClass]=\"{ 'chip-truncate': chipMaxLength() }\"\n          [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n          class=\"chip chip-hover\"\n        >\n          <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n            @if (getOptionByValue(chip); as opt) {\n              @if (opt.renderer) {\n                <ng-container\n                  [ngTemplateOutlet]=\"opt.renderer\"\n                  [ngTemplateOutletContext]=\"{ $implicit: opt, selected: true, index: getOptionIndex(opt) }\"\n                ></ng-container>\n              } @else {\n                {{ getDescription(chip) }}\n              }\n            } @else {\n              {{ getDescription(chip) }}\n            }\n          </p>\n          @if (!isReadonly() && !_isDisabled()) {\n            <button\n              [tabIndex]=\"$index + 1\"\n              (click)=\"deleteChip(chip)\"\n              class=\"btn btn-chip\"\n              type=\"button\"\n            >\n              <svg\n                class=\"ionicon\"\n                fill=\"currentColor\"\n                height=\"24\"\n                viewBox=\"0 0 512 512\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M368 368L144 144M368 144L144 368\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;--chip-max-length: none}.pointer{cursor:pointer}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap,.container-wrap .chips-container{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.chips-bottom{flex-direction:column}.container-wrap.chips-bottom input{order:-1}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);min-height:2rem;max-width:100%}.chip p{margin:0;max-width:var(--chip-max-length);overflow:hidden;overflow-wrap:break-word;word-break:break-word}.chip.chip-truncate p{white-space:nowrap;text-overflow:ellipsis}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOptions", required: true }] }], allowFreeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFreeText", required: false }] }], autoSelectOnExactMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelectOnExactMatch", required: false }] }], updateValueOnType: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateValueOnType", required: false }] }], syncFormWithText: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncFormWithText", required: false }] }], optionListMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionListMaxHeight", required: false }] }], translateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateValue", required: false }] }], scrollBehaviorOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehaviorOnOpen", required: false }] }], emitOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitOnly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], chipMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipMaxLength", required: false }] }], multiSelectDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectDisplayMode", required: false }] }], chipsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipsPosition", required: false }] }], searchTextDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTextDebounce", required: false }] }], internalFilterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "internalFilterOptions", required: false }] }], selectedOption: [{ type: i0.Output, args: ["selectedOption"] }], searchTextChange: [{ type: i0.Output, args: ["searchTextChange"] }], optionList: [{ type: i0.ViewChild, args: ['optionList', { isSignal: true }] }], selectInput: [{ type: i0.ViewChild, args: ['selectInput', { isSignal: true }] }], chipContainer: [{ type: i0.ViewChild, args: ['chipContainer', { isSignal: true }] }], autocompleteContainer: [{ type: i0.ViewChild, args: ['autocompleteContainer', { isSignal: true }] }] } });
 
 /**