quang 20.7.4 → 20.8.0

package/components/autocomplete/index.d.ts

@@ -277,6 +277,11 @@ declare class QuangAutocompleteComponent extends QuangBaseComponent<string | num
      * Handles selecting a value (adding to chip list in multiple mode).
      */
     private handleSelectValue;
+    /**
+     * Resolves the value to add in multiple mode.
+     * If no option value is provided and free text is enabled, use the currently typed text.
+     */
+    private resolveValueForMultipleMode;
     /**
      * Emits search text change after debounce.
      * When `updateValueOnType` is true, also updates the form value using the same

package/components/radio-group/index.d.ts

@@ -24,7 +24,7 @@ declare class QuangRadioGroupComponent extends QuangBaseComponent<string | numbe
     getOptionLabel(option: RadioOption): string;
     onSelectOption(option: RadioOption): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangRadioGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangRadioGroupComponent, "quang-radio-group", never, { "radioOptions": { "alias": "radioOptions"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "radioPosition": { "alias": "radioPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangRadioGroupComponent, "quang-radio-group", never, { "radioOptions": { "alias": "radioOptions"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "radioPosition": { "alias": "radioPosition"; "required": false; "isSignal": true; }; }, {}, never, ["[help-icon]"], true, never>;
 }
 
 export { QuangRadioGroupComponent };

package/components/shared/index.d.ts

@@ -18,6 +18,8 @@ declare abstract class QuangBaseComponent<T = unknown> implements ControlValueAc
     componentClass: _angular_core.InputSignal<string | string[]>;
     componentLabel: _angular_core.InputSignal<string>;
     componentPlaceholder: _angular_core.InputSignal<string>;
+    helpTooltipPosition: _angular_core.InputSignal<"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right">;
+    showHelpTooltipMethod: _angular_core.InputSignal<"click" | "hover">;
     errorMap: _angular_core.InputSignal<ErrorData[]>;
     errorMap$: Subscription;
     _errorMessagesByKey: _angular_core.Signal<Map<string, string>>;
@@ -57,7 +59,7 @@ declare abstract class QuangBaseComponent<T = unknown> implements ControlValueAc
     checkFormErrors(): void;
     ngAfterViewInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangBaseComponent<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<QuangBaseComponent<any>, never, never, { "componentId": { "alias": "componentId"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "componentTabIndex": { "alias": "componentTabIndex"; "required": false; "isSignal": true; }; "componentClass": { "alias": "componentClass"; "required": false; "isSignal": true; }; "componentLabel": { "alias": "componentLabel"; "required": false; "isSignal": true; }; "componentPlaceholder": { "alias": "componentPlaceholder"; "required": false; "isSignal": true; }; "errorMap": { "alias": "errorMap"; "required": false; "isSignal": true; }; "successMessage": { "alias": "successMessage"; "required": false; "isSignal": true; }; "helpMessage": { "alias": "helpMessage"; "required": false; "isSignal": true; }; "formControl": { "alias": "formControl"; "required": false; "isSignal": true; }; "helpMessageTooltip": { "alias": "helpMessageTooltip"; "required": false; "isSignal": true; }; }, { "componentBlur": "componentBlur"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<QuangBaseComponent<any>, never, never, { "componentId": { "alias": "componentId"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "componentTabIndex": { "alias": "componentTabIndex"; "required": false; "isSignal": true; }; "componentClass": { "alias": "componentClass"; "required": false; "isSignal": true; }; "componentLabel": { "alias": "componentLabel"; "required": false; "isSignal": true; }; "componentPlaceholder": { "alias": "componentPlaceholder"; "required": false; "isSignal": true; }; "helpTooltipPosition": { "alias": "helpTooltipPosition"; "required": false; "isSignal": true; }; "showHelpTooltipMethod": { "alias": "showHelpTooltipMethod"; "required": false; "isSignal": true; }; "errorMap": { "alias": "errorMap"; "required": false; "isSignal": true; }; "successMessage": { "alias": "successMessage"; "required": false; "isSignal": true; }; "helpMessage": { "alias": "helpMessage"; "required": false; "isSignal": true; }; "formControl": { "alias": "formControl"; "required": false; "isSignal": true; }; "helpMessageTooltip": { "alias": "helpMessageTooltip"; "required": false; "isSignal": true; }; }, { "componentBlur": "componentBlur"; }, never, never, true, never>;
 }
 
 interface QuangSelectOptionTemplateContext {

package/fesm2022/quang-auth.mjs

@@ -173,10 +173,10 @@ class QuangAuthService {
     hasAtLeastOneRole(roles) {
         return roles.some((role) => this.roles().has(role));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangAuthService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangAuthService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangAuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangAuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -247,10 +247,10 @@ class QuangHasAtLeastOneRoleDirective {
             this.changeDetectorRef.markForCheck();
         }, ...(ngDevMode ? [{ debugName: "hideViewIfNotAllowed" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangHasAtLeastOneRoleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: QuangHasAtLeastOneRoleDirective, isStandalone: true, selector: "[quangHasAtLeastOneRole]", inputs: { targetRoles: { classPropertyName: "targetRoles", publicName: "quangHasAtLeastOneRole", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangHasAtLeastOneRoleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: QuangHasAtLeastOneRoleDirective, isStandalone: true, selector: "[quangHasAtLeastOneRole]", inputs: { targetRoles: { classPropertyName: "targetRoles", publicName: "quangHasAtLeastOneRole", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangHasAtLeastOneRoleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangHasAtLeastOneRoleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[quangHasAtLeastOneRole]',
@@ -292,10 +292,10 @@ class QuangHasEveryRoleDirective {
             this.changeDetectorRef.markForCheck();
         }, ...(ngDevMode ? [{ debugName: "hideViewIfNotAllowed" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangHasEveryRoleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: QuangHasEveryRoleDirective, isStandalone: true, selector: "[quangHasEveryRole]", inputs: { targetRoles: { classPropertyName: "targetRoles", publicName: "quangHasEveryRole", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangHasEveryRoleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: QuangHasEveryRoleDirective, isStandalone: true, selector: "[quangHasEveryRole]", inputs: { targetRoles: { classPropertyName: "targetRoles", publicName: "quangHasEveryRole", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangHasEveryRoleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangHasEveryRoleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[quangHasEveryRole]',
@@ -322,10 +322,10 @@ class QuangIsAuthenticatedDirective {
             this.changeDetectorRef.markForCheck();
         }, ...(ngDevMode ? [{ debugName: "hideViewIfNotAuthenticated" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangIsAuthenticatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: QuangIsAuthenticatedDirective, isStandalone: true, selector: "[quangIsAuthenticated]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangIsAuthenticatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QuangIsAuthenticatedDirective, isStandalone: true, selector: "[quangIsAuthenticated]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangIsAuthenticatedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangIsAuthenticatedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[quangIsAuthenticated]',
@@ -351,10 +351,10 @@ class QuangIsNotAuthenticatedDirective {
             this.changeDetectorRef.markForCheck();
         }, ...(ngDevMode ? [{ debugName: "showViewIfNotAuthenticated" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangIsNotAuthenticatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: QuangIsNotAuthenticatedDirective, isStandalone: true, selector: "[quangIsNotAuthenticated]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangIsNotAuthenticatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QuangIsNotAuthenticatedDirective, isStandalone: true, selector: "[quangIsNotAuthenticated]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangIsNotAuthenticatedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangIsNotAuthenticatedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[quangIsNotAuthenticated]',
@@ -439,10 +439,10 @@ class MemoryStorage {
     setItem(key, data) {
         this.data.set(key, data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MemoryStorage }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MemoryStorage }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MemoryStorage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MemoryStorage, decorators: [{
             type: Injectable
         }] });
 function withMemoryStorage() {

package/fesm2022/quang-components-autocomplete.mjs

@@ -188,7 +188,7 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
         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" }] : []));
@@ -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: "20.3.15", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: QuangAutocompleteComponent, isStandalone: true, selector: "quang-autocomplete", inputs: { selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, allowFreeText: { classPropertyName: "allowFreeText", publicName: "allowFreeText", isSignal: true, isRequired: false, transformFunction: null }, autoSelectOnExactMatch: { classPropertyName: "autoSelectOnExactMatch", publicName: "autoSelectOnExactMatch", isSignal: true, isRequired: false, transformFunction: null }, updateValueOnType: { classPropertyName: "updateValueOnType", publicName: "updateValueOnType", isSignal: true, isRequired: false, transformFunction: null }, syncFormWithText: { classPropertyName: "syncFormWithText", publicName: "syncFormWithText", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, emitOnly: { classPropertyName: "emitOnly", publicName: "emitOnly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, chipMaxLength: { classPropertyName: "chipMaxLength", publicName: "chipMaxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelectDisplayMode: { classPropertyName: "multiSelectDisplayMode", publicName: "multiSelectDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, chipsPosition: { classPropertyName: "chipsPosition", publicName: "chipsPosition", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null }, internalFilterOptions: { classPropertyName: "internalFilterOptions", publicName: "internalFilterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOption", searchTextChange: "searchTextChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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: "20.3.15", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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: "20.3.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 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 }] }] } });
 
 /**