quang 20.2.4 → 20.3.1

package/components/input/README.md

@@ -82,6 +82,7 @@ The component supports the following input types, each with specific behaviors a
 - `showHidePasswordButton`: `boolean` — Shows/hides the password toggle button. Default: `true`. **Only applies to**: `password`
 - `buttonClass`: `string` — Additional CSS classes for the password toggle button. **Only applies to**: `password`
 
+
 ### Universal Inputs
 
 - `isReadonly`: `boolean` — Makes the input read-only
@@ -89,10 +90,12 @@ The component supports the following input types, each with specific behaviors a
 - `componentPlaceholder`: `string` — Placeholder text (supports i18n keys)
 - `componentTabIndex`: `number` — Tab index for accessibility
 - `componentClass`: `string` — Additional CSS classes for the input element
-- `errorMap`: `Record<string, any>` — Validation error messages
+- `errorMap`: `ErrorData[]` — Validation error messages
 - `successMessage`: `string` — Success message text
-- `helpMessage`: `string` — Help text displayed below the input
+- `helpMessage`: `string` — Help text displayed as a tooltip or below the input
+- `helpMessageTooltip`: `boolean` — If true, help message is shown as a tooltip (with icon); if false, help message is shown inline below the input. Default: `false`
 - `formControl`: `FormControl` — Angular reactive form control
+- Tooltip icon projection: to display the tooltip icon, use `<ng-content select="[help-icon]" />` in the component template.
 
 ## Outputs
 
@@ -105,9 +108,37 @@ The component supports the following input types, each with specific behaviors a
 
 ```html
 <quang-input
-  [errorMap]="errors()"
+  [errorMap]="errors"
+  componentLabel="form.label.input"
+  componentType="text"
+  formControlName="testInput"
+/>
+```
+
+### Help Message as Tooltip
+
+```html
+<quang-input
+  [errorMap]="errors"
+  componentLabel="form.label.input"
+  componentType="text"
+  [helpMessage]="'form.help.input'"
+  [helpMessageTooltip]="true"
+  formControlName="testInput"
+>
+  <svg-icon src="assets/icons/svg/help.svg" help-icon />
+</quang-input>
+```
+
+### Help Message Inline
+
+```html
+<quang-input
+  [errorMap]="errors"
   componentLabel="form.label.input"
   componentType="text"
+  [helpMessage]="'form.help.input'"
+  [helpMessageTooltip]="false"
   formControlName="testInput"
 />
 ```
@@ -116,7 +147,7 @@ The component supports the following input types, each with specific behaviors a
 
 ```html
 <quang-input
-  [errorMap]="errors()"
+  [errorMap]="errors"
   [showHidePasswordButton]="true"
   (showPassword)="onToggleShowPassword($event)"
   componentLabel="form.label.password"
@@ -133,15 +164,16 @@ The component supports the following input types, each with specific behaviors a
 
 ```typescript
 export class MyComponent {
+  errors: ErrorData[] = [
+    { type: 'required', message: 'Password is required' },
+    { type: 'minlength', message: 'Password must be at least 8 characters long' }
+  ]
+  
   showPassword = signal<boolean>(false)
 
   onToggleShowPassword(isVisible: boolean): void {
     this.showPassword.set(isVisible)
   }
-
-  errors(): Record<string, any> {
-    return this.form.get('password')?.errors ?? {}
-  }
 }
 ```
 
@@ -150,7 +182,7 @@ export class MyComponent {
 ```html
 <quang-input
   [componentStep]="5"
-  [errorMap]="errors()"
+  [errorMap]="errors"
   [maxNumber]="100"
   [minNumber]="0"
   componentLabel="form.label.quantity"
@@ -163,7 +195,7 @@ export class MyComponent {
 
 ```html
 <quang-input
-  [errorMap]="errors()"
+  [errorMap]="errors"
   [maxLengthText]="500"
   componentLabel="form.label.description"
   componentType="textarea"

package/components/input/index.d.ts

@@ -17,7 +17,7 @@ declare class QuangInputComponent extends QuangBaseComponent<string | number> {
     constructor();
     onTogglePasswordVisibility(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangInputComponent, "quang-input", never, { "componentType": { "alias": "componentType"; "required": true; "isSignal": true; }; "maxLengthText": { "alias": "maxLengthText"; "required": false; "isSignal": true; }; "minLengthText": { "alias": "minLengthText"; "required": false; "isSignal": true; }; "minNumber": { "alias": "minNumber"; "required": false; "isSignal": true; }; "maxNumber": { "alias": "maxNumber"; "required": false; "isSignal": true; }; "componentStep": { "alias": "componentStep"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "buttonClass": { "alias": "buttonClass"; "required": false; "isSignal": true; }; "showHidePasswordButton": { "alias": "showHidePasswordButton"; "required": false; "isSignal": true; }; }, {}, never, ["[hide-password]", "[show-password]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangInputComponent, "quang-input", never, { "componentType": { "alias": "componentType"; "required": true; "isSignal": true; }; "maxLengthText": { "alias": "maxLengthText"; "required": false; "isSignal": true; }; "minLengthText": { "alias": "minLengthText"; "required": false; "isSignal": true; }; "minNumber": { "alias": "minNumber"; "required": false; "isSignal": true; }; "maxNumber": { "alias": "maxNumber"; "required": false; "isSignal": true; }; "componentStep": { "alias": "componentStep"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "buttonClass": { "alias": "buttonClass"; "required": false; "isSignal": true; }; "showHidePasswordButton": { "alias": "showHidePasswordButton"; "required": false; "isSignal": true; }; }, {}, never, ["[help-icon]", "[hide-password]", "[show-password]"], true, never>;
 }
 
 export { QuangInputComponent };

package/components/select/README.md

@@ -2,43 +2,85 @@
 
 The `QuangSelectComponent` supports single or multiple selections from a dropdown list.
 
+
 ## Input
 
-- `selectOptions`: `SelectOption[]` - Array of options to display in the dropdown (required)
-- `selectionMode`: `'single' | 'multiple'` - Selection mode (default: 'single')
+- `selectOptions`: `SelectOption[]` — Array of options to display in the dropdown (required)
+- `selectionMode`: `'single' | 'multiple'` — Selection mode (default: 'single')
 
-All standard inputs inherited from `QuangBaseComponent`: `isReadonly`, `componentLabel`, `componentPlaceholder`, `componentTabIndex`, `componentClass`, `errorMap`, `successMessage`, `helpMessage`, `formControl`
+All standard inputs inherited from `QuangBaseComponent`:
+- `isReadonly`: `boolean` — Makes the select read-only
+- `componentLabel`: `string` — Label text (supports i18n keys)
+- `componentPlaceholder`: `string` — Placeholder text (supports i18n keys)
+- `componentTabIndex`: `number` — Tab index for accessibility
+- `componentClass`: `string` — Additional CSS classes
+- `errorMap`: `ErrorData[]` — Validation error messages
+- `successMessage`: `string` — Success message text
+- `helpMessage`: `string` — Help text displayed below the select
+- `helpMessageTooltip`: `boolean` — If true, displays help message as a tooltip (with projected icon); if false, displays help message inline below the select. Default: `false`
+- `formControl`: `FormControl` — Angular reactive form control
+- Tooltip icon projection: to display the tooltip icon, use `<ng-content select="[help-icon]" />` in the component template.
 
 ## Output
 
-All standard outputs inherited from `QuangBaseComponent`: `componentBlur`
+- All standard outputs inherited from `QuangBaseComponent`:
+  - `componentBlur`: emitted when the select loses focus
+
 
 ## Usage
 
 ### Single Selection
 ```html
 <quang-select
-  [errorMap]="errors()"
+  [errorMap]="errors"
   [selectOptions]="stringList"
   componentLabel="form.label.select"
   componentPlaceholder="Select an option"
   formControlName="testInput"
-  selectionMode="single">
+  selectionMode="single"
+>
 </quang-select>
 ```
 
 ### Multiple Selection
 ```html
 <quang-select
-  [errorMap]="errors()"
+  [errorMap]="errors"
   [selectOptions]="numberList"
   componentLabel="form.label.multipleSelect"
   componentPlaceholder="Select multiple options"
   formControlName="testInputMultiple"
-  selectionMode="multiple">
+  selectionMode="multiple"
+>
+</quang-select>
+```
+
+### Inline Help Message
+```html
+<quang-select
+  [selectOptions]="stringList"
+  componentLabel="form.label.select"
+  helpMessage="form.help.select"
+  [helpMessageTooltip]="false"
+  formControlName="testInput"
+>
 </quang-select>
 ```
 
+### Tooltip Help Message
+```html
+<quang-select
+  [selectOptions]="stringList"
+  componentLabel="form.label.select"
+  helpMessage="form.help.select"
+  [helpMessageTooltip]="true"
+  formControlName="testInput"
+>
+  <span help-icon class="ms-1"><i class="fas fa-question-circle"></i></span>
+</quang-select>
+```
+
+
 ## QuangTranslationService Integration
 
 The component supports automatic translation of all labels, help messages, and error messages through `QuangTranslationService`.

package/components/select/index.d.ts

@@ -28,7 +28,7 @@ declare class QuangSelectComponent extends QuangBaseComponent<string | number |
     onChangedHandler(value: string | number | string[] | number[] | null): void;
     onMouseLeaveCallback(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangSelectComponent, "quang-select", never, { "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "selectOptions": { "alias": "selectOptions"; "required": true; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "nullOption": { "alias": "nullOption"; "required": false; "isSignal": true; }; "autoSelectSingleOption": { "alias": "autoSelectSingleOption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangSelectComponent, "quang-select", never, { "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "optionListMaxHeight": { "alias": "optionListMaxHeight"; "required": false; "isSignal": true; }; "selectOptions": { "alias": "selectOptions"; "required": true; "isSignal": true; }; "scrollBehaviorOnOpen": { "alias": "scrollBehaviorOnOpen"; "required": false; "isSignal": true; }; "translateValue": { "alias": "translateValue"; "required": false; "isSignal": true; }; "nullOption": { "alias": "nullOption"; "required": false; "isSignal": true; }; "autoSelectSingleOption": { "alias": "autoSelectSingleOption"; "required": false; "isSignal": true; }; }, {}, never, ["[help-icon]"], true, never>;
 }
 
 export { QuangSelectComponent };

package/components/shared/index.d.ts

@@ -20,10 +20,12 @@ declare abstract class QuangBaseComponent<T = any> implements ControlValueAccess
     componentLabel: _angular_core.InputSignal<string>;
     componentPlaceholder: _angular_core.InputSignal<string>;
     errorMap: _angular_core.InputSignal<ErrorData[]>;
+    errorMap$: Subscription;
     _errorMessagesByKey: _angular_core.Signal<Map<string, string>>;
     successMessage: _angular_core.InputSignal<string>;
     helpMessage: _angular_core.InputSignal<string>;
     formControl: _angular_core.InputSignal<FormControl<any> | undefined>;
+    helpMessageTooltip: _angular_core.InputSignal<boolean>;
     componentBlur: _angular_core.OutputEmitterRef<void>;
     _value: _angular_core.WritableSignal<T | null>;
     _isRequired: _angular_core.WritableSignal<boolean>;
@@ -54,7 +56,7 @@ declare abstract class QuangBaseComponent<T = any> implements ControlValueAccess
     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; }; }, { "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; }; "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 SelectOption {

package/components/wysiwyg/README.md

@@ -2,27 +2,41 @@
 
 The `QuangWysiwygComponent` is a rich text editor based on [SunEditor](https://github.com/JiHong88/SunEditor), offering a wide range of formatting options for creating and editing HTML content.
 
+
 ## Input
 
-- `wysiwygOptions`: `object` - Configuration options for the editor (required)
-- `minHeight`: `string | undefined` - Minimum height for the editor area (default: '200px')
-- `highlightColor`: `boolean` - Show/hide the highlight color button in toolbar (default: true)
-- `isReadonly`: `boolean` - If true, the editor is readonly
-- `onImageUploadError`: `(errorMessage: any, result: any, core: any) => boolean` - Callback for image upload errors
-- `onFileDrop`: `(e: any, cleanData: any, maxCharCount: any, core: any) => boolean` - Callback for file drop events
+- `wysiwygOptions`: `object` — Configuration options for the editor (required)
+- `minHeight`: `string | undefined` — Minimum height for the editor area (default: '200px')
+- `highlightColor`: `boolean` — Show/hide the highlight color button in toolbar (default: true)
+- `isReadonly`: `boolean` — If true, the editor is readonly
+- `onImageUploadError`: `(errorMessage: any, result: any, core: any) => boolean` — Callback for image upload errors
+- `onFileDrop`: `(e: any, cleanData: any, maxCharCount: any, core: any) => boolean` — Callback for file drop events
 - Toolbar button toggles (all `boolean`, default: `true`): `font`, `fontSize`, `formatBlock`, `paragraphStyle`, `blockquote`, `bold`, `underline`, `italic`, `strike`, `fontColor`, `textStyle`, `removeFormat`, `align`, `list`, `table`, `link`, `image`, `fullScreen`, `showBlocks`
 
-All standard inputs inherited from `QuangBaseComponent`: `componentLabel`, `componentPlaceholder`, `componentTabIndex`, `componentClass`, `errorMap`, `successMessage`, `helpMessage`, `formControl`
+All standard inputs inherited from `QuangBaseComponent`:
+- `componentLabel`: `string` — Label text (supports i18n keys)
+- `componentPlaceholder`: `string` — Placeholder text (supports i18n keys)
+- `componentTabIndex`: `number` — Tab index for accessibility
+- `componentClass`: `string` — Additional CSS classes
+- `errorMap`: `ErrorData[]` — Validation error messages
+- `successMessage`: `string` — Success message text
+- `helpMessage`: `string` — Help text displayed below the editor
+- `helpMessageTooltip`: `boolean` — If true, displays help message as a tooltip (with projected icon); if false, displays help message inline below the editor. Default: `false`
+- `formControl`: `FormControl` — Angular reactive form control
+- Tooltip icon projection: to display the tooltip icon, use `<ng-content select="[help-icon]" />` in the component template.
 
 ## Output
 
-All standard outputs inherited from `QuangBaseComponent`: `componentBlur`
+- All standard outputs inherited from `QuangBaseComponent`:
+  - `componentBlur`: emitted when the editor loses focus
+
 
 ## Usage
 
+### Basic Editor
 ```html
 <quang-wysiwyg
-  [errorMap]="errors()"
+  [errorMap]="errors"
   [highlightColor]="highlightColor()"
   [isReadonly]="isReadonly()"
   [minHeight]="wysiwygHeight()"
@@ -34,6 +48,30 @@ All standard outputs inherited from `QuangBaseComponent`: `componentBlur`
 />
 ```
 
+### Inline Help Message
+```html
+<quang-wysiwyg
+  [wysiwygOptions]="wysiwygOptions"
+  componentLabel="form.label.wysiwyg"
+  helpMessage="form.help.wysiwyg"
+  [helpMessageTooltip]="false"
+  formControlName="testInput"
+/>
+```
+
+### Tooltip Help Message
+```html
+<quang-wysiwyg
+  [wysiwygOptions]="wysiwygOptions"
+  componentLabel="form.label.wysiwyg"
+  helpMessage="form.help.wysiwyg"
+  [helpMessageTooltip]="true"
+  formControlName="testInput"
+>
+  <span help-icon class="ms-1"><i class="fas fa-question-circle"></i></span>
+</quang-wysiwyg>
+```
+
 ### Note
 
 Remember to import:

package/components/wysiwyg/index.d.ts

@@ -44,7 +44,7 @@ declare class QuangWysiwygComponent extends QuangBaseComponent<string> implement
     onChangedHandler(value: string): void;
     getButtonList(): string[];
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuangWysiwygComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangWysiwygComponent, "quang-wysiwyg", never, { "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "font": { "alias": "font"; "required": false; "isSignal": true; }; "fontSize": { "alias": "fontSize"; "required": false; "isSignal": true; }; "formatBlock": { "alias": "formatBlock"; "required": false; "isSignal": true; }; "paragraphStyle": { "alias": "paragraphStyle"; "required": false; "isSignal": true; }; "blockquote": { "alias": "blockquote"; "required": false; "isSignal": true; }; "bold": { "alias": "bold"; "required": false; "isSignal": true; }; "underline": { "alias": "underline"; "required": false; "isSignal": true; }; "italic": { "alias": "italic"; "required": false; "isSignal": true; }; "strike": { "alias": "strike"; "required": false; "isSignal": true; }; "fontColor": { "alias": "fontColor"; "required": false; "isSignal": true; }; "highlightColor": { "alias": "highlightColor"; "required": false; "isSignal": true; }; "textStyle": { "alias": "textStyle"; "required": false; "isSignal": true; }; "removeFormat": { "alias": "removeFormat"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "list": { "alias": "list"; "required": false; "isSignal": true; }; "table": { "alias": "table"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "fullScreen": { "alias": "fullScreen"; "required": false; "isSignal": true; }; "showBlocks": { "alias": "showBlocks"; "required": false; "isSignal": true; }; "onImageUploadError": { "alias": "onImageUploadError"; "required": false; "isSignal": true; }; "onFileDrop": { "alias": "onFileDrop"; "required": false; "isSignal": true; }; "wysiwygOptions": { "alias": "wysiwygOptions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuangWysiwygComponent, "quang-wysiwyg", never, { "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "font": { "alias": "font"; "required": false; "isSignal": true; }; "fontSize": { "alias": "fontSize"; "required": false; "isSignal": true; }; "formatBlock": { "alias": "formatBlock"; "required": false; "isSignal": true; }; "paragraphStyle": { "alias": "paragraphStyle"; "required": false; "isSignal": true; }; "blockquote": { "alias": "blockquote"; "required": false; "isSignal": true; }; "bold": { "alias": "bold"; "required": false; "isSignal": true; }; "underline": { "alias": "underline"; "required": false; "isSignal": true; }; "italic": { "alias": "italic"; "required": false; "isSignal": true; }; "strike": { "alias": "strike"; "required": false; "isSignal": true; }; "fontColor": { "alias": "fontColor"; "required": false; "isSignal": true; }; "highlightColor": { "alias": "highlightColor"; "required": false; "isSignal": true; }; "textStyle": { "alias": "textStyle"; "required": false; "isSignal": true; }; "removeFormat": { "alias": "removeFormat"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "list": { "alias": "list"; "required": false; "isSignal": true; }; "table": { "alias": "table"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "fullScreen": { "alias": "fullScreen"; "required": false; "isSignal": true; }; "showBlocks": { "alias": "showBlocks"; "required": false; "isSignal": true; }; "onImageUploadError": { "alias": "onImageUploadError"; "required": false; "isSignal": true; }; "onFileDrop": { "alias": "onFileDrop"; "required": false; "isSignal": true; }; "wysiwygOptions": { "alias": "wysiwygOptions"; "required": false; "isSignal": true; }; }, {}, never, ["[help-icon]"], true, never>;
 }
 
 export { QuangWysiwygComponent };

package/fesm2022/quang-components-autocomplete.mjs

@@ -274,7 +274,7 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
                 provide: QuangOptionListComponent,
                 multi: false,
             },
-        ], viewQueries: [{ propertyName: "optionList", first: true, predicate: ["optionList"], descendants: true, isSignal: true }, { propertyName: "selectInput", first: true, predicate: ["selectInput"], descendants: true, isSignal: true }, { propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true, isSignal: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track $index) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);height:2rem}.chip p{margin:0;max-width:var(--chip-max-length);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "optionList", first: true, predicate: ["optionList"], descendants: true, isSignal: true }, { propertyName: "selectInput", first: true, predicate: ["selectInput"], descendants: true, isSignal: true }, { propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true, isSignal: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track $index) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);height:2rem}.chip p{margin:0;max-width:var(--chip-max-length);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
             type: Component,
@@ -288,7 +288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", 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\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track $index) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);height:2rem}.chip p{margin:0;max-width:var(--chip-max-length);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"] }]
+                    ], template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track $index) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);height:2rem}.chip p{margin:0;max-width:var(--chip-max-length);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/quang-components-autocomplete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-components-autocomplete.mjs","sources":["../../../projects/quang/components/autocomplete/autocomplete.component.ts","../../../projects/quang/components/autocomplete/autocomplete.component.html","../../../projects/quang/components/autocomplete/quang-components-autocomplete.ts"],"sourcesContent":["import { NgClass, NgStyle } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  effect,\n  forwardRef,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\nimport { Subject, Subscription, debounceTime, distinctUntilChanged } from 'rxjs'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-autocomplete',\n  imports: [TranslocoPipe, NgClass, QuangOptionListComponent, NgStyle, QuangTooltipDirective],\n  templateUrl: './autocomplete.component.html',\n  styleUrl: './autocomplete.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangAutocompleteComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n})\n/**\n * Autocomplete component for providing suggestion options {@link SelectOption} as the user types.\n *\n * @usageNotes\n * This component displays a list of filtered options based on user input.\n * It allows users to select an option from the suggestions and emits the event `selectedOption` when an option is selected.\n *\n * `searchTextDebounce` is by default set to 300ms.\n */\nexport class QuangAutocompleteComponent extends QuangBaseComponent<string | number | string[] | number[]> {\n  // the form can't be a random text but must be one of the options if this is false\n  syncFormWithText = input<boolean>(false)\n\n  optionListMaxHeight = input<string>('200px')\n\n  selectOptions = input.required<SelectOption[]>()\n\n  translateValue = input<boolean>(true)\n\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  /**\n   * Only emits the value without saving it in ngControl\n   */\n  emitOnly = input<boolean>(false)\n\n  multiple = input<boolean>(false)\n\n  /**\n   * Set the maximum length in characters of the single chip.\n   */\n  chipMaxLength = input<number>(0)\n\n  multiSelectDisplayMode = input<'vertical' | 'horizontal'>('vertical')\n\n  optionList = viewChild<QuangOptionListComponent>('optionList')\n\n  _showOptions = signal<boolean | null>(null)\n\n  _inputValue = signal<string>('')\n\n  _optionHideTimeout = signal<any | undefined>(undefined)\n\n  _chipList = signal<string[]>([])\n\n  _selectedOptions = signal<SelectOption[]>([])\n\n  inputValue$ = new Subject<string>()\n\n  selectOptionsChange = toObservable(this.selectOptions)\n    .pipe(takeUntilDestroyed())\n    .subscribe(() => {\n      const value = this._value()\n      if (!this.multiple() && !this._inputValue()) {\n        this.setInputValue()\n      } else if (this.multiple() && Array.isArray(value) && value.length > 0) {\n        for (const valueElement of value) {\n          this.onSelectValue(valueElement)\n        }\n      }\n    })\n\n  _filteredOptions = computed<SelectOption[]>(() => {\n    const text = this._inputValue()\n    if (this.multiple()) {\n      return this.filterOptions(text).filter((x) => !this._chipList().some((chip) => chip === x.value))\n    } else {\n      return text?.length ? this.filterOptions(text) : this.selectOptions()\n    }\n  })\n\n  selectedOption = output<string | number | null>()\n\n  searchTextChange = output<string>()\n\n  searchTextDebounce = input<number>(300)\n\n  internalFilterOptions = input<boolean>(true)\n\n  readonly ParentType = OptionListParentType.AUTOCOMPLETE\n\n  formValueChange$: Subscription | undefined = undefined\n\n  private readonly selectInput = viewChild<ElementRef>('selectInput')\n  private readonly chipContainer = viewChild<ElementRef>('chipContainer')\n  private readonly autocompleteContainer = viewChild<ElementRef>('autocompleteContainer')\n\n  inputHeight = signal<number>(0)\n\n  private readonly onChangeSelectInput = effect(() => {\n    const selectInput = this.selectInput()\n    if (selectInput) {\n      this.inputHeight.set(selectInput?.nativeElement?.getBoundingClientRect().height)\n      selectInput.nativeElement.addEventListener('keydown', (e: KeyboardEvent) => {\n        if (this.multiple() && this._chipList().length > 0 && !this._inputValue()?.length && e.key === 'Backspace') {\n          e.preventDefault()\n          // this.deleteChip(this._chipList()[this._chipList().length - 1])\n          const chipContainer = this.chipContainer()?.nativeElement\n          if (chipContainer) {\n            const chips = chipContainer.querySelectorAll('.chip button.btn-chip')\n            if (chips.length > 0) {\n              const focusChip = chips[chips.length - 1]\n              focusChip.focus()\n              focusChip.addEventListener('keydown', (event: KeyboardEvent) => {\n                if (event.key === 'Backspace') {\n                  event.preventDefault()\n                  this.deleteChip(this._chipList()[this._chipList().length - 1])\n                  selectInput.nativeElement.focus()\n                } else {\n                  event.preventDefault()\n                }\n              })\n            }\n          }\n        }\n      })\n    }\n  })\n\n  constructor() {\n    super()\n    this.inputValue$\n      .pipe(takeUntilDestroyed(), debounceTime(this.searchTextDebounce()), distinctUntilChanged())\n      .subscribe((value) => {\n        if (value !== this._inputValue()) {\n          this.searchTextChange.emit(value?.toString() || '')\n          if (this.syncFormWithText()) {\n            this.onValueChange(value, false)\n          }\n        }\n        this._inputValue.set(value?.toString() || '')\n        if (!this._inputValue()?.length && !this.emitOnly() && !this.multiple()) {\n          this._ngControl()?.control?.patchValue(null)\n        }\n      })\n    toObservable(this._showOptions)\n      .pipe(takeUntilDestroyed())\n      .subscribe((data) => {\n        if (!data && data !== null) {\n          this.checkInputValue()\n        }\n      })\n  }\n\n  override setupFormControl(): void {\n    super.setupFormControl()\n    const formControl = this._ngControl()?.control\n    if (this.formValueChange$) {\n      this.formValueChange$.unsubscribe()\n      this.formValueChange$ = undefined\n    }\n    if (formControl) {\n      this.formValueChange$ = formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {\n        if (!this.syncFormWithText() && !value) {\n          this._inputValue.set('')\n        }\n      })\n    }\n  }\n\n  showOptionVisibility(): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n      this._optionHideTimeout.set(null)\n    }\n    this._showOptions.set(true)\n  }\n\n  hideOptionVisibility(skipTimeout = false): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n    }\n    this._optionHideTimeout.set(\n      setTimeout(\n        () => {\n          this._showOptions.set(false)\n        },\n        skipTimeout ? 0 : 50\n      )\n    )\n  }\n\n  onChangeInput(value: any): void {\n    this.showOptionVisibility()\n    this.inputValue$.next(value.target?.value)\n  }\n\n  filterOptions(value: string): SelectOption[] {\n    const options = this.selectOptions()\n    if (this.internalFilterOptions()) {\n      return options.filter((x) => x.label.toLowerCase().includes(value.toLowerCase()))\n    }\n    return options\n  }\n\n  override onChangedHandler(value: string | number | string[] | number[]): void {\n    super.onChangedHandler(value)\n    this.setInputValue()\n  }\n\n  onValueChange(value: string | number, hideOptions = true): void {\n    if (this.multiple()) {\n      this.onSelectValue(value)\n      this.onChangedHandler(this._chipList())\n      if (this._chipList().some((x) => x === value)) {\n        this.inputValue$.next('')\n      }\n    } else {\n      this.onChangedHandler(value)\n      if (hideOptions) {\n        this.hideOptionVisibility()\n      }\n      this.selectedOption.emit(value)\n    }\n  }\n\n  checkInputValue(): void {\n    const option = this.selectOptions().find((x) => x.label.toLowerCase() === this._inputValue()?.toLowerCase())\n    if (!this.multiple()) {\n      if (option?.value === this._value()) return\n      if (option) {\n        this.onChangedHandler(option.value ?? '')\n      } else if (!this.syncFormWithText()) {\n        this.onChangedHandler('')\n      }\n    }\n  }\n\n  override writeValue(val: string | number | string[] | number[]): void {\n    super.writeValue(val)\n    this.setInputValue(true)\n    if (Array.isArray(val)) {\n      val.forEach((x) => {\n        this.onSelectValue(x)\n      })\n    }\n  }\n\n  onBlurInput(event: FocusEvent) {\n    if ((event?.relatedTarget as HTMLDivElement)?.id !== this.optionList()?.optionListContainer()?.nativeElement?.id)\n      this.onBlurHandler()\n  }\n\n  override onBlurHandler() {\n    setTimeout(() => {\n      this.hideOptionVisibility()\n      if (!this._inputValue()?.length && !this.emitOnly() && !this.multiple()) {\n        this._ngControl()?.control?.patchValue(null)\n      }\n      super.onBlurHandler()\n    }, 100)\n  }\n\n  onBlurOptionList(event: any): void {\n    if (event) this.hideOptionVisibility()\n  }\n\n  setInputValue(resetOnMiss = false) {\n    this._inputValue.set(\n      this.selectOptions().find((x) => x.value === this._value())?.label ?? (resetOnMiss ? '' : this._inputValue())\n    )\n    if (!this.syncFormWithText()) this.inputValue$.next(this._inputValue() ?? '')\n  }\n\n  getDescription(chip: any): string {\n    const valueChip = this.selectOptions().find((x) => x.value === chip)\n    return valueChip ? valueChip.label.toString() : ''\n  }\n\n  onSelectValue(value: any): void {\n    const newChip = this.selectOptions().find((x) => x.value === value)\n    if (newChip && !this._chipList().some((x) => x === newChip?.value)) {\n      this.createChipList(newChip)\n      this._selectedOptions.update((list) => [...list, newChip])\n    }\n  }\n\n  /**\n   * remove chip from chips list\n   * @param chipValue chip to delete\n   */\n  deleteChip(chipValue: any): void {\n    const stringChipValue = chipValue?.toString()\n    const i = this._chipList()?.findIndex((x) => x.toString() === stringChipValue)\n    if (i >= 0) {\n      const currentList = this._chipList()\n      if (Array.isArray(currentList) && currentList.length > 0) {\n        this._chipList.update((list) => (list as string[]).filter((_, index) => index !== i))\n        this.onChangedHandler(this._chipList())\n      }\n    }\n  }\n\n  createChipList(chip: any): void {\n    if (chip) {\n      this._chipList.update((list) => [...list, chip.value])\n    }\n  }\n}\n","<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track $index) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\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 * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;AA8CA;;;;;;;;AAQG;AACG,MAAO,0BAA2B,SAAQ,kBAAyD,CAAA;AA8GvG,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;;AA7GT,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAU,KAAK,CAAC;AAExC,QAAA,IAAA,CAAA,mBAAmB,GAAG,KAAK,CAAS,OAAO,CAAC;AAE5C,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAC,QAAQ,EAAkB;AAEhD,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAU,IAAI,CAAC;AAErC,QAAA,IAAA,CAAA,oBAAoB,GAAG,KAAK,CAAiB,QAAQ,CAAC;AAEtD;;AAEG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC;AAEhC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC;AAEhC;;AAEG;AACH,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAS,CAAC,CAAC;AAEhC,QAAA,IAAA,CAAA,sBAAsB,GAAG,KAAK,CAA4B,UAAU,CAAC;AAErE,QAAA,IAAA,CAAA,UAAU,GAAG,SAAS,CAA2B,YAAY,CAAC;AAE9D,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE3C,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAS,EAAE,CAAC;AAEhC,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAkB,SAAS,CAAC;AAEvD,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAW,EAAE,CAAC;AAEhC,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAiB,EAAE,CAAC;AAE7C,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,OAAO,EAAU;AAEnC,QAAA,IAAA,CAAA,mBAAmB,GAAG,YAAY,CAAC,IAAI,CAAC,aAAa;aAClD,IAAI,CAAC,kBAAkB,EAAE;aACzB,SAAS,CAAC,MAAK;AACd,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE;AAC3B,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;gBAC3C,IAAI,CAAC,aAAa,EAAE;;AACf,iBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AACtE,gBAAA,KAAK,MAAM,YAAY,IAAI,KAAK,EAAE;AAChC,oBAAA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC;;;AAGtC,SAAC,CAAC;AAEJ,QAAA,IAAA,CAAA,gBAAgB,GAAG,QAAQ,CAAiB,MAAK;AAC/C,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;AAC/B,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,gBAAA,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;;iBAC5F;AACL,gBAAA,OAAO,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE;;AAEzE,SAAC,CAAC;QAEF,IAAc,CAAA,cAAA,GAAG,MAAM,EAA0B;QAEjD,IAAgB,CAAA,gBAAA,GAAG,MAAM,EAAU;AAEnC,QAAA,IAAA,CAAA,kBAAkB,GAAG,KAAK,CAAS,GAAG,CAAC;AAEvC,QAAA,IAAA,CAAA,qBAAqB,GAAG,KAAK,CAAU,IAAI,CAAC;AAEnC,QAAA,IAAA,CAAA,UAAU,GAAG,oBAAoB,CAAC,YAAY;QAEvD,IAAgB,CAAA,gBAAA,GAA6B,SAAS;AAErC,QAAA,IAAA,CAAA,WAAW,GAAG,SAAS,CAAa,aAAa,CAAC;AAClD,QAAA,IAAA,CAAA,aAAa,GAAG,SAAS,CAAa,eAAe,CAAC;AACtD,QAAA,IAAA,CAAA,qBAAqB,GAAG,SAAS,CAAa,uBAAuB,CAAC;AAEvF,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAS,CAAC,CAAC;AAEd,QAAA,IAAA,CAAA,mBAAmB,GAAG,MAAM,CAAC,MAAK;AACjD,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE;YACtC,IAAI,WAAW,EAAE;AACf,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,qBAAqB,EAAE,CAAC,MAAM,CAAC;gBAChF,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACzE,oBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;wBAC1G,CAAC,CAAC,cAAc,EAAE;;wBAElB,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,EAAE,aAAa;wBACzD,IAAI,aAAa,EAAE;4BACjB,MAAM,KAAK,GAAG,aAAa,CAAC,gBAAgB,CAAC,uBAAuB,CAAC;AACrE,4BAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gCACpB,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;gCACzC,SAAS,CAAC,KAAK,EAAE;gCACjB,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAoB,KAAI;AAC7D,oCAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;wCAC7B,KAAK,CAAC,cAAc,EAAE;AACtB,wCAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAC9D,wCAAA,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE;;yCAC5B;wCACL,KAAK,CAAC,cAAc,EAAE;;AAE1B,iCAAC,CAAC;;;;AAIV,iBAAC,CAAC;;AAEN,SAAC,CAAC;AAIA,QAAA,IAAI,CAAC;AACF,aAAA,IAAI,CAAC,kBAAkB,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,EAAE,oBAAoB,EAAE;AAC1F,aAAA,SAAS,CAAC,CAAC,KAAK,KAAI;AACnB,YAAA,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE,EAAE;AAChC,gBAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACnD,gBAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;AAC3B,oBAAA,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC;;;AAGpC,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YAC7C,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;gBACvE,IAAI,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC;;AAEhD,SAAC,CAAC;AACJ,QAAA,YAAY,CAAC,IAAI,CAAC,YAAY;aAC3B,IAAI,CAAC,kBAAkB,EAAE;AACzB,aAAA,SAAS,CAAC,CAAC,IAAI,KAAI;AAClB,YAAA,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,IAAI,EAAE;gBAC1B,IAAI,CAAC,eAAe,EAAE;;AAE1B,SAAC,CAAC;;IAGG,gBAAgB,GAAA;QACvB,KAAK,CAAC,gBAAgB,EAAE;QACxB,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,EAAE,OAAO;AAC9C,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE;AACnC,YAAA,IAAI,CAAC,gBAAgB,GAAG,SAAS;;QAEnC,IAAI,WAAW,EAAE;YACf,IAAI,CAAC,gBAAgB,GAAG,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,KAAI;gBAC7G,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE;AACtC,oBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;;AAE5B,aAAC,CAAC;;;IAIN,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAAE;AAC7B,YAAA,YAAY,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;AACvC,YAAA,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC;;AAEnC,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;;IAG7B,oBAAoB,CAAC,WAAW,GAAG,KAAK,EAAA;AACtC,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAAE;AAC7B,YAAA,YAAY,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;;QAEzC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CACzB,UAAU,CACR,MAAK;AACH,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC;AAC9B,SAAC,EACD,WAAW,GAAG,CAAC,GAAG,EAAE,CACrB,CACF;;AAGH,IAAA,aAAa,CAAC,KAAU,EAAA;QACtB,IAAI,CAAC,oBAAoB,EAAE;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;;AAG5C,IAAA,aAAa,CAAC,KAAa,EAAA;AACzB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE;AACpC,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE,EAAE;YAChC,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;;AAEnF,QAAA,OAAO,OAAO;;AAGP,IAAA,gBAAgB,CAAC,KAA4C,EAAA;AACpE,QAAA,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,aAAa,EAAE;;AAGtB,IAAA,aAAa,CAAC,KAAsB,EAAE,WAAW,GAAG,IAAI,EAAA;AACtD,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;AACvC,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,EAAE;AAC7C,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;;;aAEtB;AACL,YAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAC5B,IAAI,WAAW,EAAE;gBACf,IAAI,CAAC,oBAAoB,EAAE;;AAE7B,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;;;IAInC,eAAe,GAAA;AACb,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,WAAW,EAAE,EAAE,WAAW,EAAE,CAAC;AAC5G,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;AACpB,YAAA,IAAI,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,MAAM,EAAE;gBAAE;YACrC,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;;AACpC,iBAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE;AACnC,gBAAA,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC;;;;AAKtB,IAAA,UAAU,CAAC,GAA0C,EAAA;AAC5D,QAAA,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;AACrB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;AACtB,YAAA,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI;AAChB,gBAAA,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;AACvB,aAAC,CAAC;;;AAIN,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,IAAK,KAAK,EAAE,aAAgC,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,EAAE,EAAE,mBAAmB,EAAE,EAAE,aAAa,EAAE,EAAE;YAC9G,IAAI,CAAC,aAAa,EAAE;;IAGf,aAAa,GAAA;QACpB,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,oBAAoB,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;gBACvE,IAAI,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC;;YAE9C,KAAK,CAAC,aAAa,EAAE;SACtB,EAAE,GAAG,CAAC;;AAGT,IAAA,gBAAgB,CAAC,KAAU,EAAA;AACzB,QAAA,IAAI,KAAK;YAAE,IAAI,CAAC,oBAAoB,EAAE;;IAGxC,aAAa,CAAC,WAAW,GAAG,KAAK,EAAA;QAC/B,IAAI,CAAC,WAAW,CAAC,GAAG,CAClB,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,KAAK,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,CAC9G;AACD,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;AAAE,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;;AAG/E,IAAA,cAAc,CAAC,IAAS,EAAA;QACtB,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC;AACpE,QAAA,OAAO,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,EAAE;;AAGpD,IAAA,aAAa,CAAC,KAAU,EAAA;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC;QACnE,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,OAAO,EAAE,KAAK,CAAC,EAAE;AAClE,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;AAC5B,YAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,IAAI,EAAE,OAAO,CAAC,CAAC;;;AAI9D;;;AAGG;AACH,IAAA,UAAU,CAAC,SAAc,EAAA;AACvB,QAAA,MAAM,eAAe,GAAG,SAAS,EAAE,QAAQ,EAAE;QAC7C,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,KAAK,eAAe,CAAC;AAC9E,QAAA,IAAI,CAAC,IAAI,CAAC,EAAE;AACV,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE;AACpC,YAAA,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;gBACxD,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,KAAM,IAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC;gBACrF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;;;;AAK7C,IAAA,cAAc,CAAC,IAAS,EAAA;QACtB,IAAI,IAAI,EAAE;AACR,YAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;;;8GA9R/C,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,EArB1B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,mBAAA,EAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,sBAAA,EAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,qBAAA,EAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,0BAA0B,CAAC;AACzD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,wBAAwB;AACjC,gBAAA,KAAK,EAAE,KAAK;AACb,aAAA;SACF,EC5CH,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,YAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,eAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,uBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,2vHAoHA,EDvFY,MAAA,EAAA,CAAA,kyCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,aAAa,EAAE,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,OAAO,oFAAE,wBAAwB,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,qBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,sBAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,qBAAqB,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FA0B/E,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBA5BtC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,WACrB,CAAC,aAAa,EAAE,OAAO,EAAE,wBAAwB,EAAE,OAAO,EAAE,qBAAqB,CAAC,EAAA,eAAA,EAG1E,uBAAuB,CAAC,MAAM,EAEpC,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,gCAAgC,CAAC;AACzD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACD,wBAAA;AACE,4BAAA,OAAO,EAAE,wBAAwB;AACjC,4BAAA,KAAK,EAAE,KAAK;AACb,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,2vHAAA,EAAA,MAAA,EAAA,CAAA,kyCAAA,CAAA,EAAA;;;AE5CH;;AAEG;;;;"}
+{"version":3,"file":"quang-components-autocomplete.mjs","sources":["../../../projects/quang/components/autocomplete/autocomplete.component.ts","../../../projects/quang/components/autocomplete/autocomplete.component.html","../../../projects/quang/components/autocomplete/quang-components-autocomplete.ts"],"sourcesContent":["import { NgClass, NgStyle } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  effect,\n  forwardRef,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\nimport { Subject, Subscription, debounceTime, distinctUntilChanged } from 'rxjs'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-autocomplete',\n  imports: [TranslocoPipe, NgClass, QuangOptionListComponent, NgStyle, QuangTooltipDirective],\n  templateUrl: './autocomplete.component.html',\n  styleUrl: './autocomplete.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangAutocompleteComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n})\n/**\n * Autocomplete component for providing suggestion options {@link SelectOption} as the user types.\n *\n * @usageNotes\n * This component displays a list of filtered options based on user input.\n * It allows users to select an option from the suggestions and emits the event `selectedOption` when an option is selected.\n *\n * `searchTextDebounce` is by default set to 300ms.\n */\nexport class QuangAutocompleteComponent extends QuangBaseComponent<string | number | string[] | number[]> {\n  // the form can't be a random text but must be one of the options if this is false\n  syncFormWithText = input<boolean>(false)\n\n  optionListMaxHeight = input<string>('200px')\n\n  selectOptions = input.required<SelectOption[]>()\n\n  translateValue = input<boolean>(true)\n\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  /**\n   * Only emits the value without saving it in ngControl\n   */\n  emitOnly = input<boolean>(false)\n\n  multiple = input<boolean>(false)\n\n  /**\n   * Set the maximum length in characters of the single chip.\n   */\n  chipMaxLength = input<number>(0)\n\n  multiSelectDisplayMode = input<'vertical' | 'horizontal'>('vertical')\n\n  optionList = viewChild<QuangOptionListComponent>('optionList')\n\n  _showOptions = signal<boolean | null>(null)\n\n  _inputValue = signal<string>('')\n\n  _optionHideTimeout = signal<any | undefined>(undefined)\n\n  _chipList = signal<string[]>([])\n\n  _selectedOptions = signal<SelectOption[]>([])\n\n  inputValue$ = new Subject<string>()\n\n  selectOptionsChange = toObservable(this.selectOptions)\n    .pipe(takeUntilDestroyed())\n    .subscribe(() => {\n      const value = this._value()\n      if (!this.multiple() && !this._inputValue()) {\n        this.setInputValue()\n      } else if (this.multiple() && Array.isArray(value) && value.length > 0) {\n        for (const valueElement of value) {\n          this.onSelectValue(valueElement)\n        }\n      }\n    })\n\n  _filteredOptions = computed<SelectOption[]>(() => {\n    const text = this._inputValue()\n    if (this.multiple()) {\n      return this.filterOptions(text).filter((x) => !this._chipList().some((chip) => chip === x.value))\n    } else {\n      return text?.length ? this.filterOptions(text) : this.selectOptions()\n    }\n  })\n\n  selectedOption = output<string | number | null>()\n\n  searchTextChange = output<string>()\n\n  searchTextDebounce = input<number>(300)\n\n  internalFilterOptions = input<boolean>(true)\n\n  readonly ParentType = OptionListParentType.AUTOCOMPLETE\n\n  formValueChange$: Subscription | undefined = undefined\n\n  private readonly selectInput = viewChild<ElementRef>('selectInput')\n  private readonly chipContainer = viewChild<ElementRef>('chipContainer')\n  private readonly autocompleteContainer = viewChild<ElementRef>('autocompleteContainer')\n\n  inputHeight = signal<number>(0)\n\n  private readonly onChangeSelectInput = effect(() => {\n    const selectInput = this.selectInput()\n    if (selectInput) {\n      this.inputHeight.set(selectInput?.nativeElement?.getBoundingClientRect().height)\n      selectInput.nativeElement.addEventListener('keydown', (e: KeyboardEvent) => {\n        if (this.multiple() && this._chipList().length > 0 && !this._inputValue()?.length && e.key === 'Backspace') {\n          e.preventDefault()\n          // this.deleteChip(this._chipList()[this._chipList().length - 1])\n          const chipContainer = this.chipContainer()?.nativeElement\n          if (chipContainer) {\n            const chips = chipContainer.querySelectorAll('.chip button.btn-chip')\n            if (chips.length > 0) {\n              const focusChip = chips[chips.length - 1]\n              focusChip.focus()\n              focusChip.addEventListener('keydown', (event: KeyboardEvent) => {\n                if (event.key === 'Backspace') {\n                  event.preventDefault()\n                  this.deleteChip(this._chipList()[this._chipList().length - 1])\n                  selectInput.nativeElement.focus()\n                } else {\n                  event.preventDefault()\n                }\n              })\n            }\n          }\n        }\n      })\n    }\n  })\n\n  constructor() {\n    super()\n    this.inputValue$\n      .pipe(takeUntilDestroyed(), debounceTime(this.searchTextDebounce()), distinctUntilChanged())\n      .subscribe((value) => {\n        if (value !== this._inputValue()) {\n          this.searchTextChange.emit(value?.toString() || '')\n          if (this.syncFormWithText()) {\n            this.onValueChange(value, false)\n          }\n        }\n        this._inputValue.set(value?.toString() || '')\n        if (!this._inputValue()?.length && !this.emitOnly() && !this.multiple()) {\n          this._ngControl()?.control?.patchValue(null)\n        }\n      })\n    toObservable(this._showOptions)\n      .pipe(takeUntilDestroyed())\n      .subscribe((data) => {\n        if (!data && data !== null) {\n          this.checkInputValue()\n        }\n      })\n  }\n\n  override setupFormControl(): void {\n    super.setupFormControl()\n    const formControl = this._ngControl()?.control\n    if (this.formValueChange$) {\n      this.formValueChange$.unsubscribe()\n      this.formValueChange$ = undefined\n    }\n    if (formControl) {\n      this.formValueChange$ = formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {\n        if (!this.syncFormWithText() && !value) {\n          this._inputValue.set('')\n        }\n      })\n    }\n  }\n\n  showOptionVisibility(): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n      this._optionHideTimeout.set(null)\n    }\n    this._showOptions.set(true)\n  }\n\n  hideOptionVisibility(skipTimeout = false): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n    }\n    this._optionHideTimeout.set(\n      setTimeout(\n        () => {\n          this._showOptions.set(false)\n        },\n        skipTimeout ? 0 : 50\n      )\n    )\n  }\n\n  onChangeInput(value: any): void {\n    this.showOptionVisibility()\n    this.inputValue$.next(value.target?.value)\n  }\n\n  filterOptions(value: string): SelectOption[] {\n    const options = this.selectOptions()\n    if (this.internalFilterOptions()) {\n      return options.filter((x) => x.label.toLowerCase().includes(value.toLowerCase()))\n    }\n    return options\n  }\n\n  override onChangedHandler(value: string | number | string[] | number[]): void {\n    super.onChangedHandler(value)\n    this.setInputValue()\n  }\n\n  onValueChange(value: string | number, hideOptions = true): void {\n    if (this.multiple()) {\n      this.onSelectValue(value)\n      this.onChangedHandler(this._chipList())\n      if (this._chipList().some((x) => x === value)) {\n        this.inputValue$.next('')\n      }\n    } else {\n      this.onChangedHandler(value)\n      if (hideOptions) {\n        this.hideOptionVisibility()\n      }\n      this.selectedOption.emit(value)\n    }\n  }\n\n  checkInputValue(): void {\n    const option = this.selectOptions().find((x) => x.label.toLowerCase() === this._inputValue()?.toLowerCase())\n    if (!this.multiple()) {\n      if (option?.value === this._value()) return\n      if (option) {\n        this.onChangedHandler(option.value ?? '')\n      } else if (!this.syncFormWithText()) {\n        this.onChangedHandler('')\n      }\n    }\n  }\n\n  override writeValue(val: string | number | string[] | number[]): void {\n    super.writeValue(val)\n    this.setInputValue(true)\n    if (Array.isArray(val)) {\n      val.forEach((x) => {\n        this.onSelectValue(x)\n      })\n    }\n  }\n\n  onBlurInput(event: FocusEvent) {\n    if ((event?.relatedTarget as HTMLDivElement)?.id !== this.optionList()?.optionListContainer()?.nativeElement?.id)\n      this.onBlurHandler()\n  }\n\n  override onBlurHandler() {\n    setTimeout(() => {\n      this.hideOptionVisibility()\n      if (!this._inputValue()?.length && !this.emitOnly() && !this.multiple()) {\n        this._ngControl()?.control?.patchValue(null)\n      }\n      super.onBlurHandler()\n    }, 100)\n  }\n\n  onBlurOptionList(event: any): void {\n    if (event) this.hideOptionVisibility()\n  }\n\n  setInputValue(resetOnMiss = false) {\n    this._inputValue.set(\n      this.selectOptions().find((x) => x.value === this._value())?.label ?? (resetOnMiss ? '' : this._inputValue())\n    )\n    if (!this.syncFormWithText()) this.inputValue$.next(this._inputValue() ?? '')\n  }\n\n  getDescription(chip: any): string {\n    const valueChip = this.selectOptions().find((x) => x.value === chip)\n    return valueChip ? valueChip.label.toString() : ''\n  }\n\n  onSelectValue(value: any): void {\n    const newChip = this.selectOptions().find((x) => x.value === value)\n    if (newChip && !this._chipList().some((x) => x === newChip?.value)) {\n      this.createChipList(newChip)\n      this._selectedOptions.update((list) => [...list, newChip])\n    }\n  }\n\n  /**\n   * remove chip from chips list\n   * @param chipValue chip to delete\n   */\n  deleteChip(chipValue: any): void {\n    const stringChipValue = chipValue?.toString()\n    const i = this._chipList()?.findIndex((x) => x.toString() === stringChipValue)\n    if (i >= 0) {\n      const currentList = this._chipList()\n      if (Array.isArray(currentList) && currentList.length > 0) {\n        this._chipList.update((list) => (list as string[]).filter((_, index) => index !== i))\n        this.onChangedHandler(this._chipList())\n      }\n    }\n  }\n\n  createChipList(chip: any): void {\n    if (chip) {\n      this._chipList.update((list) => [...list, chip.value])\n    }\n  }\n}\n","<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track $index) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}