quang 20.5.1 → 20.6.0

package/components/autocomplete/README.md

@@ -82,6 +82,40 @@ The `QuangAutocompleteComponent` is a comprehensive autocomplete input with real
 </quang-autocomplete>
 ```
 
+### Template-based options
+
+Each `SelectOption` can provide a `renderer` (similar to `quang-table` and `quang-radio-group`), which is used instead of the plain label in the suggestions list.
+
+```html
+<ng-template
+  #customOption
+  let-opt
+  let-selected="selected"
+>
+  <span class="d-flex gap-2 align-items-center">
+    <strong>{{ opt.label }}</strong>
+    <small class="text-muted">selected: {{ selected }}</small>
+  </span>
+</ng-template>
+
+<quang-autocomplete
+  [selectOptions]="templatedOptions"
+  formControlName="country"
+/>
+```
+
+```ts
+import { TemplateRef, viewChild } from '@angular/core'
+import { SelectOption, QuangSelectOptionTemplateContext } from 'quang/components/shared'
+
+customOptionTemplate = viewChild<TemplateRef<QuangSelectOptionTemplateContext>>('customOption')
+
+templatedOptions: SelectOption[] = [
+  { value: 'us', label: 'United States' },
+  { value: 'ca', label: 'Canada', renderer: this.customOptionTemplate() },
+]
+```
+
 #### TypeScript Example
 
 ```typescript

package/components/autocomplete/index.d.ts

@@ -233,6 +233,8 @@ declare class QuangAutocompleteComponent extends QuangBaseComponent<string | num
      * @returns The chip's display label
      */
     getDescription(chipValue: string | number): string;
+    getOptionByValue(value: string | number): SelectOption | undefined;
+    getOptionIndex(option: SelectOption): number;
     /**
      * Removes a chip from the selection (multiple mode).
      * @param chipValue The chip value to remove

package/components/date/index.d.ts

@@ -10,6 +10,10 @@ interface DateRange {
 }
 type QuangDatepickerOptions = AirDatepickerOptions;
 declare class QuangDateComponent extends QuangBaseComponent<string | DateRange | null> {
+    private readonly _ngZone;
+    private readonly _cdr;
+    private readonly _appRef;
+    private _tickScheduled;
     /**
      * Format to use to show on the input field.
      * The format is based on the standard {@link https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table}
@@ -58,6 +62,7 @@ declare class QuangDateComponent extends QuangBaseComponent<string | DateRange |
     rangeSelection: _angular_core.InputSignal<boolean>;
     _activeLanguage: _angular_core.Signal<string | null | undefined>;
     _airDatepickerInstance: _angular_core.WritableSignal<AirDatepicker<HTMLInputElement> | undefined>;
+    private readonly _airDatepickerInlineMode;
     searchTextDebounce: _angular_core.InputSignal<number>;
     targetPosition: _angular_core.WritableSignal<AirDatepickerPosition>;
     _generateAirDatepickerEffect: _angular_core.EffectRef;
@@ -67,19 +72,24 @@ declare class QuangDateComponent extends QuangBaseComponent<string | DateRange |
     showTimepicker: _angular_core.Signal<boolean>;
     isMouseInsideCalendar: _angular_core.WritableSignal<boolean>;
     isMouseOutsideCalendar: _angular_core.Signal<boolean>;
+    private _shouldRefocusInputOnHide;
     setupCalendar(): void;
     onChangeText($event: Event): void;
     onBlurHandler(): void;
     setupInputStringToDate(value: string): Date;
     onChangedHandler(value: string | DateRange | null): void;
+    private propagateValueToControl;
+    private requestRender;
+    private syncValueFromDatepickerSelection;
     onHideCalendar(): void;
     formatDate(val: string | DateRange | null): string;
     openDatePicker(): void;
+    onInputKeydown(event: KeyboardEvent): void;
     interceptInputInteraction($event: Event): void;
     getLocale(): AirDatepickerLocale;
+    private unwrapLocaleModule;
     onCancel(): void;
     private dateToUtc;
-    private dateToLocal;
     private setCalendarPosition;
     private setupTimepicker;
     checkDateMatch(date: string): boolean;

package/components/radio-group/README.md

@@ -0,0 +1,75 @@
+# QuangRadioGroupComponent
+
+The `QuangRadioGroupComponent` renders a group of radio buttons with full Angular forms support (ControlValueAccessor).
+
+## Input
+
+- `radioOptions`: `RadioOption[]` - Array of options to render (required)
+- `radioPosition`: `'left' | 'right'` - Render the radio control on the left or right of the label (default: `'left'`)
+- `name`: `string` - Radio group name attribute. Defaults to `componentId`.
+
+All standard inputs inherited from `QuangBaseComponent`: `isReadonly`, `componentLabel`, `componentTabIndex`, `componentClass`, `errorMap`, `successMessage`, `helpMessage`, `formControl`
+
+## Output
+
+All standard outputs inherited from `QuangBaseComponent`: `componentBlur`
+
+## Usage
+
+### Standard options
+
+```html
+<quang-radio-group
+  [errorMap]="errors()"
+  [radioOptions]="options"
+  componentLabel="form.label.radioGroup"
+  formControlName="choice"
+/>
+```
+
+```ts
+import { RadioOption } from 'quang/components/radio-group'
+
+options: RadioOption[] = [
+  { label: 'Option A', value: 'A' },
+  { label: 'Option B', value: 'B' },
+]
+```
+
+### Template-based options
+
+Each `RadioOption` can provide a `renderer` (similar to `quang-table`), which is used instead of the plain label.
+
+```html
+<ng-template
+  #customOption
+  let-opt
+  let-selected="selected"
+>
+  <span class="d-flex gap-2 align-items-center">
+    <strong>{{ opt.value }}</strong>
+    <small class="text-muted">selected: {{ selected }}</small>
+  </span>
+</ng-template>
+
+<quang-radio-group
+  [radioOptions]="templatedOptions"
+  formControlName="choice"
+/>
+```
+
+```ts
+import { TemplateRef, viewChild } from '@angular/core'
+import { RadioOption, QuangRadioOptionTemplateContext } from 'quang/components/radio-group'
+
+templatedOptions: RadioOption[] = [
+  { value: 'A', label: 'Option A' },
+  { value: 'B', renderer: this.customOptionTemplate() },
+]
+
+customOptionTemplate = viewChild<TemplateRef<QuangRadioOptionTemplateContext>>('customOption')
+```
+
+## Notes
+
+Most components are styled based on Bootstrap v5.3 and extend `QuangBaseComponent`.

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

@@ -0,0 +1,31 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { QuangBaseComponent } from 'quang/components/shared';
+
+type RadioPosition = 'left' | 'right';
+interface QuangRadioOptionTemplateContext<T extends string | number | null = string | number | null> {
+    $implicit: RadioOption<T>;
+    selected: boolean;
+    index: number;
+}
+interface RadioOption<T extends string | number | null = string | number | null> {
+    value: T;
+    label?: string;
+    disabled?: boolean;
+    renderer?: TemplateRef<QuangRadioOptionTemplateContext<T>>;
+}
+declare class QuangRadioGroupComponent extends QuangBaseComponent<string | number | null> {
+    radioOptions: _angular_core.InputSignal<RadioOption<string | number | null>[]>;
+    name: _angular_core.InputSignal<string>;
+    radioPosition: _angular_core.InputSignal<RadioPosition>;
+    _radioName: _angular_core.Signal<string>;
+    getOptionId(index: number): string;
+    isOptionDisabled(option: RadioOption): boolean;
+    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>;
+}
+
+export { QuangRadioGroupComponent };
+export type { QuangRadioOptionTemplateContext, RadioOption, RadioPosition };

package/components/select/README.md

@@ -55,6 +55,40 @@ All standard inputs inherited from `QuangBaseComponent`:
 </quang-select>
 ```
 
+### Template-based options
+
+Each `SelectOption` can provide a `renderer` (similar to `quang-table` and `quang-radio-group`), which is used instead of the plain label.
+
+```html
+<ng-template
+  #customOption
+  let-opt
+  let-selected="selected"
+>
+  <span>
+    <strong>{{ opt.label }}</strong>
+    <small class="text-muted">selected: {{ selected }}</small>
+  </span>
+</ng-template>
+
+<quang-select
+  [selectOptions]="templatedOptions"
+  formControlName="testInput"
+/>
+```
+
+```ts
+import { TemplateRef, viewChild } from '@angular/core'
+import { SelectOption, QuangSelectOptionTemplateContext } from 'quang/components/shared'
+
+customOptionTemplate = viewChild<TemplateRef<QuangSelectOptionTemplateContext>>('customOption')
+
+templatedOptions: SelectOption[] = [
+  { value: 'IT', label: 'Italy' },
+  { value: 'FR', label: 'France', renderer: this.customOptionTemplate() },
+]
+```
+
 ### Inline Help Message
 ```html
 <quang-select
@@ -80,7 +114,6 @@ All standard inputs inherited from `QuangBaseComponent`:
 </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

@@ -48,6 +48,7 @@ declare class QuangSelectComponent extends QuangBaseComponent<string | number |
      * Sets focus to the select button element.
      */
     focusButton(): void;
+    getOptionIndex(option: SelectOption): number;
     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, ["[help-icon]"], true, never>;
 }

package/components/shared/index.d.ts

@@ -1,7 +1,7 @@
 import * as rxjs from 'rxjs';
 import { Subscription } from 'rxjs';
 import * as _angular_core from '@angular/core';
-import { AfterViewInit, Injector, DestroyRef, ElementRef } from '@angular/core';
+import { AfterViewInit, Injector, DestroyRef, TemplateRef, ElementRef } from '@angular/core';
 import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
 
 declare const makeId: (length: number) => string;
@@ -39,13 +39,15 @@ declare abstract class QuangBaseComponent<T = any> implements ControlValueAccess
     _ngControl: _angular_core.WritableSignal<NgControl | null>;
     _injector: _angular_core.WritableSignal<Injector>;
     _statusChange$?: Subscription;
+    _valueChange$?: Subscription;
+    _eventsChange$?: Subscription;
     getIsRequiredControl: _angular_core.Signal<boolean>;
     onChange?: (value: T) => void;
     onTouched?: () => void;
     destroyRef: DestroyRef;
     constructor();
     registerOnChange(fn: (value: T) => void): void;
-    writeValue(val: T): void;
+    writeValue(value: T): void;
     registerOnTouched(fn: () => void): void;
     onChangedEventHandler($event: Event): void;
     onChangedHandler(value: T): void;
@@ -59,9 +61,15 @@ declare abstract class QuangBaseComponent<T = any> implements ControlValueAccess
     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 QuangSelectOptionTemplateContext {
+    $implicit: SelectOption;
+    selected: boolean;
+    index: number;
+}
 interface SelectOption {
     label: string;
     value: string | number | null;
+    renderer?: TemplateRef<QuangSelectOptionTemplateContext>;
 }
 declare enum OptionListParentType {
     SELECT = "select",
@@ -123,4 +131,4 @@ declare class QuangOptionListComponent {
 }
 
 export { OptionListParentType, QuangBaseComponent, QuangOptionListComponent, makeId };
-export type { ErrorData, SelectOption };
+export type { ErrorData, QuangSelectOptionTemplateContext, SelectOption };

package/fesm2022/quang-components-autocomplete.mjs

@@ -513,9 +513,15 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
      * @returns The chip's display label
      */
     getDescription(chipValue) {
-        const option = this.selectOptions().find((x) => x.value === chipValue);
+        const option = this.selectOptions().find((x) => x.value?.toString() === chipValue?.toString());
         return option?.label?.toString() ?? '';
     }
+    getOptionByValue(value) {
+        return this.selectOptions().find((x) => x.value?.toString() === value?.toString());
+    }
+    getOptionIndex(option) {
+        return this.selectOptions().findIndex((x) => x.value === option.value);
+    }
     /**
      * Removes a chip from the selection (multiple mode).
      * @param chipValue The chip value to remove
@@ -729,7 +735,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 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 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<!-- 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            {{ getDescription(chip) }}\n          </p>\n          @if (!isReadonly() && !_isDisabled()) {\n            <button\n              [tabIndex]=\"$index + 1\"\n              (click)=\"deleteChip(chip)\"\n              class=\"btn btn-chip\"\n              type=\"button\"\n            >\n              <svg\n                class=\"ionicon\"\n                fill=\"currentColor\"\n                height=\"24\"\n                viewBox=\"0 0 512 512\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M368 368L144 144M368 144L144 368\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap,.container-wrap .chips-container{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.chips-bottom{flex-direction:column}.container-wrap.chips-bottom input{order:-1}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;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 [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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
             type: Component,
@@ -743,7 +749,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 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<!-- 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            {{ getDescription(chip) }}\n          </p>\n          @if (!isReadonly() && !_isDisabled()) {\n            <button\n              [tabIndex]=\"$index + 1\"\n              (click)=\"deleteChip(chip)\"\n              class=\"btn btn-chip\"\n              type=\"button\"\n            >\n              <svg\n                class=\"ionicon\"\n                fill=\"currentColor\"\n                height=\"24\"\n                viewBox=\"0 0 512 512\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M368 368L144 144M368 144L144 368\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap,.container-wrap .chips-container{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.chips-bottom{flex-direction:column}.container-wrap.chips-bottom input{order:-1}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;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 [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"] }]
         }], 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 }] }] } });
 
 /**