quang 20.4.3 → 20.4.4

package/fesm2022/quang-auth.mjs

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

package/fesm2022/quang-components-autocomplete.mjs

@@ -136,7 +136,6 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
         }
         if (formControl) {
             this.formValueChange$ = formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
-                console.log('form value changes', value);
                 if (this.multiple() && Array.isArray(value)) {
                     this._chipList.set([]);
                     this._selectedOptions.set([]);
@@ -274,8 +273,8 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
             this._chipList.update((list) => [...list, chip.value]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: QuangAutocompleteComponent, isStandalone: true, selector: "quang-autocomplete", inputs: { syncFormWithText: { classPropertyName: "syncFormWithText", publicName: "syncFormWithText", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, emitOnly: { classPropertyName: "emitOnly", publicName: "emitOnly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, chipMaxLength: { classPropertyName: "chipMaxLength", publicName: "chipMaxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelectDisplayMode: { classPropertyName: "multiSelectDisplayMode", publicName: "multiSelectDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null }, internalFilterOptions: { classPropertyName: "internalFilterOptions", publicName: "internalFilterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOption", searchTextChange: "searchTextChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: QuangAutocompleteComponent, isStandalone: true, selector: "quang-autocomplete", inputs: { syncFormWithText: { classPropertyName: "syncFormWithText", publicName: "syncFormWithText", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, emitOnly: { classPropertyName: "emitOnly", publicName: "emitOnly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, chipMaxLength: { classPropertyName: "chipMaxLength", publicName: "chipMaxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelectDisplayMode: { classPropertyName: "multiSelectDisplayMode", publicName: "multiSelectDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null }, internalFilterOptions: { classPropertyName: "internalFilterOptions", publicName: "internalFilterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOption", searchTextChange: "searchTextChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => QuangAutocompleteComponent),
@@ -285,9 +284,9 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
                 provide: QuangOptionListComponent,
                 multi: false,
             },
-        ], viewQueries: [{ propertyName: "optionList", first: true, predicate: ["optionList"], descendants: true, isSignal: true }, { propertyName: "selectInput", first: true, predicate: ["selectInput"], descendants: true, isSignal: true }, { propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true, isSignal: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"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: "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"] }, { 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]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track chip) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_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: "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"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-autocomplete', imports: [TranslocoPipe, NgClass, QuangOptionListComponent, NgStyle, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -299,7 +298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             provide: QuangOptionListComponent,
                             multi: false,
                         },
-                    ], template: "<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [ngClass]=\"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"] }]
+                    ], 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 chip) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_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        console.log('form value changes', value)\n        if (this.multiple() && Array.isArray(value)) {\n          this._chipList.set([])\n          this._selectedOptions.set([])\n          value.forEach((x) => {\n            this.onSelectValue(x)\n          })\n        } else if (!this.multiple() && (typeof value === 'string' || typeof value === 'number')) {\n          this.setInputValue()\n        }\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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"}
+{"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.multiple() && Array.isArray(value)) {\n          this._chipList.set([])\n          this._selectedOptions.set([])\n          value.forEach((x) => {\n            this.onSelectValue(x)\n          })\n        } else if (!this.multiple() && (typeof value === 'string' || typeof value === 'number')) {\n          this.setInputValue()\n        }\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 chip) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_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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"}

package/fesm2022/quang-components-checkbox.mjs

@@ -26,8 +26,8 @@ class QuangCheckboxComponent extends QuangBaseComponent {
         const inputElement = $event.target;
         this.onChangedHandler(inputElement.checked);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: QuangCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: QuangCheckboxComponent, isStandalone: true, selector: "quang-checkbox", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: true, transformFunction: null }, removeMargin: { classPropertyName: "removeMargin", publicName: "removeMargin", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: QuangCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: QuangCheckboxComponent, isStandalone: true, selector: "quang-checkbox", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: true, transformFunction: null }, removeMargin: { classPropertyName: "removeMargin", publicName: "removeMargin", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => QuangCheckboxComponent),
@@ -35,7 +35,7 @@ class QuangCheckboxComponent extends QuangBaseComponent {
             },
         ], usesInheritance: true, ngImport: i0, template: "<div\n  [class.form-check-reverse]=\"labelPosition() === 'left' && checkType() === 'checkbox'\"\n  [class.form-switch]=\"checkType() === 'toggle'\"\n  [class.label-bottom]=\"labelPosition() === 'bottom'\"\n  [class.label-left]=\"labelPosition() === 'left' && checkType() === 'toggle'\"\n  [class.label-right]=\"labelPosition() === 'right' && checkType() === 'toggle'\"\n  [class.label-top]=\"labelPosition() === 'top'\"\n  [class.toggle-wrapper]=\"checkType() === 'toggle'\"\n  [ngClass]=\"{ 'mb-3': !removeMargin(), 'form-check': !removeMargin() }\"\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  <input\n    [attr.required]=\"getIsRequiredControl()\"\n    [attr.role]=\"checkType() === 'checkbox' ? 'checkbox' : 'switch'\"\n    [checked]=\"_value()\"\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    [disabled]=\"_isDisabled()\"\n    [id]=\"componentId()\"\n    [ngClass]=\"componentClass()\"\n    [placeholder]=\"componentPlaceholder() | transloco\"\n    [readOnly]=\"isReadonly()\"\n    [tabIndex]=\"componentTabIndex()\"\n    [value]=\"_value()\"\n    (blur)=\"onBlurHandler()\"\n    (input)=\"onChangedEventHandler($event)\"\n    class=\"form-check-input {{ _isDisabled() ? '' : 'cursor-pointer' }}\"\n    type=\"checkbox\"\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}.label-top{display:flex;flex-direction:column}.label-top input{margin:unset;float:unset}.label-bottom{display:flex;flex-direction:column-reverse}.label-bottom input{margin:unset;float:unset}.label-right{flex-direction:row-reverse;justify-content:start}.label-right label{margin-left:.5rem;margin-bottom:0;align-self:center}.label-left{flex-direction:row}.label-left label{margin-bottom:0;align-self:center}.toggle-wrapper{display:flex;padding-left:unset}.toggle-wrapper label{display:block}.toggle-wrapper input{margin-left:unset;width:3em;height:1.5em}.direction-row{flex-direction:row}.direction-row .form-label{margin-right:.5rem}.direction-reverse-row{flex-direction:row-reverse;justify-content:start}.direction-reverse-row input{margin-right:.5rem}.direction-column{flex-direction:column}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.0", ngImport: i0, type: QuangCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: QuangCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-checkbox', providers: [
                         {

package/fesm2022/quang-components-date.mjs

@@ -382,10 +382,10 @@ class QuangDateComponent extends QuangBaseComponent {
     checkDateMatch(date) {
         return isMatch(date, this.valueFormat()) || isMatch(date, this.valueFormat().replace('yyyy', 'yy'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: QuangDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: QuangDateComponent, isStandalone: true, selector: "quang-date", inputs: { dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, activeLanguageOverride: { classPropertyName: "activeLanguageOverride", publicName: "activeLanguageOverride", isSignal: true, isRequired: false, transformFunction: null }, timepicker: { classPropertyName: "timepicker", publicName: "timepicker", isSignal: true, isRequired: false, transformFunction: null }, invalidDateMessage: { classPropertyName: "invalidDateMessage", publicName: "invalidDateMessage", isSignal: true, isRequired: false, transformFunction: null }, showOnlyTimepicker: { classPropertyName: "showOnlyTimepicker", publicName: "showOnlyTimepicker", isSignal: true, isRequired: false, transformFunction: null }, minHour: { classPropertyName: "minHour", publicName: "minHour", isSignal: true, isRequired: false, transformFunction: null }, maxHour: { classPropertyName: "maxHour", publicName: "maxHour", isSignal: true, isRequired: false, transformFunction: null }, minMinute: { classPropertyName: "minMinute", publicName: "minMinute", isSignal: true, isRequired: false, transformFunction: null }, maxMinute: { classPropertyName: "maxMinute", publicName: "maxMinute", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, showInline: { classPropertyName: "showInline", publicName: "showInline", isSignal: true, isRequired: false, transformFunction: null }, calendarClasses: { classPropertyName: "calendarClasses", publicName: "calendarClasses", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, datepickerOptions: { classPropertyName: "datepickerOptions", publicName: "datepickerOptions", isSignal: true, isRequired: false, transformFunction: null }, multipleDatesSeparator: { classPropertyName: "multipleDatesSeparator", publicName: "multipleDatesSeparator", isSignal: true, isRequired: false, transformFunction: null }, rangeSelection: { classPropertyName: "rangeSelection", publicName: "rangeSelection", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], viewQueries: [{ propertyName: "_inputForDate", first: true, predicate: ["inputForDate"], descendants: true, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["calendarButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mb-3\">\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    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-date-container\"\n  >\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [autocomplete]=\"'off'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.with-button-calendar]=\"!hasNoContent()\"\n      [disabled]=\"_isDisabled()\"\n      [hidden]=\"showInline()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"inputValueString()\"\n      (blur)=\"onBlurHandler()\"\n      (focus)=\"interceptInputInteraction($event)\"\n      (input)=\"onChangeText($event)\"\n      (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n      (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n      (search)=\"onCancel()\"\n      #inputForDate\n      class=\"form-control\"\n      type=\"search\"\n    />\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.border-danger]=\"_showErrors()\"\n      [class.border-success]=\"_showSuccess()\"\n      [hidden]=\"showInline() || hasNoContent() || _isDisabled()\"\n      [ngClass]=\"buttonClass()\"\n      (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n      #calendarButton\n      aria-label=\"calendar-button\"\n      class=\"btn btn-outline-secondary btn-outline-calendar\"\n      type=\"button\"\n    >\n      <ng-content></ng-content>\n    </button>\n  </div>\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: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}::ng-deep .air-datepicker{z-index:99999}::ng-deep .air-datepicker.-inline-{z-index:unset}::ng-deep .air-datepicker .air-datepicker--pointer{display:none}::ng-deep .air-datepicker .air-datepicker-time{display:block}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--current{display:none}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders{display:flex;justify-content:center;padding-top:.25rem;gap:1rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row{width:100%;position:relative}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row:first-child:after{content:\":\";display:inline;font-size:1rem;position:absolute;right:-.65rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row input{width:100%;text-align:center;padding:0;padding-left:1rem;border-color:var(--bs-border-color)}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row .form-control:focus{box-shadow:unset!important}::ng-deep .air-datepicker.-inline-.-only-timepicker-{border:0}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker--time{border:0}:host{display:block}:host .input-date-container{display:flex}:host input{flex:1}:host input.with-button-calendar{border-top-right-radius:0;border-bottom-right-radius:0}:host input:disabled{border-radius:var(--bs-border-radius)}:host .btn-outline-calendar{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}:host .border-danger{border-color:var(--bs-form-invalid-border-color)}:host .border-success{border-color:var(--bs-form-valid-border-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: QuangDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: QuangDateComponent, isStandalone: true, selector: "quang-date", inputs: { dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, activeLanguageOverride: { classPropertyName: "activeLanguageOverride", publicName: "activeLanguageOverride", isSignal: true, isRequired: false, transformFunction: null }, timepicker: { classPropertyName: "timepicker", publicName: "timepicker", isSignal: true, isRequired: false, transformFunction: null }, invalidDateMessage: { classPropertyName: "invalidDateMessage", publicName: "invalidDateMessage", isSignal: true, isRequired: false, transformFunction: null }, showOnlyTimepicker: { classPropertyName: "showOnlyTimepicker", publicName: "showOnlyTimepicker", isSignal: true, isRequired: false, transformFunction: null }, minHour: { classPropertyName: "minHour", publicName: "minHour", isSignal: true, isRequired: false, transformFunction: null }, maxHour: { classPropertyName: "maxHour", publicName: "maxHour", isSignal: true, isRequired: false, transformFunction: null }, minMinute: { classPropertyName: "minMinute", publicName: "minMinute", isSignal: true, isRequired: false, transformFunction: null }, maxMinute: { classPropertyName: "maxMinute", publicName: "maxMinute", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, showInline: { classPropertyName: "showInline", publicName: "showInline", isSignal: true, isRequired: false, transformFunction: null }, calendarClasses: { classPropertyName: "calendarClasses", publicName: "calendarClasses", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, datepickerOptions: { classPropertyName: "datepickerOptions", publicName: "datepickerOptions", isSignal: true, isRequired: false, transformFunction: null }, multipleDatesSeparator: { classPropertyName: "multipleDatesSeparator", publicName: "multipleDatesSeparator", isSignal: true, isRequired: false, transformFunction: null }, rangeSelection: { classPropertyName: "rangeSelection", publicName: "rangeSelection", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], viewQueries: [{ propertyName: "_inputForDate", first: true, predicate: ["inputForDate"], descendants: true, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["calendarButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mb-3\">\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    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-date-container\"\n  >\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [autocomplete]=\"'off'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.with-button-calendar]=\"!hasNoContent()\"\n      [disabled]=\"_isDisabled()\"\n      [hidden]=\"showInline()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"inputValueString()\"\n      (blur)=\"onBlurHandler()\"\n      (focus)=\"interceptInputInteraction($event)\"\n      (input)=\"onChangeText($event)\"\n      (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n      (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n      (search)=\"onCancel()\"\n      #inputForDate\n      class=\"form-control\"\n      type=\"search\"\n    />\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.border-danger]=\"_showErrors()\"\n      [class.border-success]=\"_showSuccess()\"\n      [hidden]=\"showInline() || hasNoContent() || _isDisabled()\"\n      [ngClass]=\"buttonClass()\"\n      (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n      #calendarButton\n      aria-label=\"calendar-button\"\n      class=\"btn btn-outline-secondary btn-outline-calendar\"\n      type=\"button\"\n    >\n      <ng-content></ng-content>\n    </button>\n  </div>\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: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}::ng-deep .air-datepicker{z-index:99999}::ng-deep .air-datepicker.-inline-{z-index:unset}::ng-deep .air-datepicker .air-datepicker--pointer{display:none}::ng-deep .air-datepicker .air-datepicker-time{display:block}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--current{display:none}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders{display:flex;justify-content:center;padding-top:.25rem;gap:1rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row{width:100%;position:relative}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row:first-child:after{content:\":\";display:inline;font-size:1rem;position:absolute;right:-.65rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row input{width:100%;text-align:center;padding:0;padding-left:1rem;border-color:var(--bs-border-color)}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row .form-control:focus{box-shadow:unset!important}::ng-deep .air-datepicker.-inline-.-only-timepicker-{border:0}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker--time{border:0}:host{display:block}:host .input-date-container{display:flex}:host input{flex:1}:host input.with-button-calendar{border-top-right-radius:0;border-bottom-right-radius:0}:host input:disabled{border-radius:var(--bs-border-radius)}:host .btn-outline-calendar{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}:host .border-danger{border-color:var(--bs-form-invalid-border-color)}:host .border-success{border-color:var(--bs-form-valid-border-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.0", ngImport: i0, type: QuangDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: QuangDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-date', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], imports: [TranslocoPipe, NgClass, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-3\">\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    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-date-container\"\n  >\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [autocomplete]=\"'off'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.with-button-calendar]=\"!hasNoContent()\"\n      [disabled]=\"_isDisabled()\"\n      [hidden]=\"showInline()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"inputValueString()\"\n      (blur)=\"onBlurHandler()\"\n      (focus)=\"interceptInputInteraction($event)\"\n      (input)=\"onChangeText($event)\"\n      (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n      (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n      (search)=\"onCancel()\"\n      #inputForDate\n      class=\"form-control\"\n      type=\"search\"\n    />\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.border-danger]=\"_showErrors()\"\n      [class.border-success]=\"_showSuccess()\"\n      [hidden]=\"showInline() || hasNoContent() || _isDisabled()\"\n      [ngClass]=\"buttonClass()\"\n      (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n      #calendarButton\n      aria-label=\"calendar-button\"\n      class=\"btn btn-outline-secondary btn-outline-calendar\"\n      type=\"button\"\n    >\n      <ng-content></ng-content>\n    </button>\n  </div>\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: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}::ng-deep .air-datepicker{z-index:99999}::ng-deep .air-datepicker.-inline-{z-index:unset}::ng-deep .air-datepicker .air-datepicker--pointer{display:none}::ng-deep .air-datepicker .air-datepicker-time{display:block}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--current{display:none}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders{display:flex;justify-content:center;padding-top:.25rem;gap:1rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row{width:100%;position:relative}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row:first-child:after{content:\":\";display:inline;font-size:1rem;position:absolute;right:-.65rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row input{width:100%;text-align:center;padding:0;padding-left:1rem;border-color:var(--bs-border-color)}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row .form-control:focus{box-shadow:unset!important}::ng-deep .air-datepicker.-inline-.-only-timepicker-{border:0}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker--time{border:0}:host{display:block}:host .input-date-container{display:flex}:host input{flex:1}:host input.with-button-calendar{border-top-right-radius:0;border-bottom-right-radius:0}:host input:disabled{border-radius:var(--bs-border-radius)}:host .btn-outline-calendar{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}:host .border-danger{border-color:var(--bs-form-invalid-border-color)}:host .border-success{border-color:var(--bs-form-valid-border-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _quangTranslationService: [{

package/fesm2022/quang-components-input.mjs

@@ -34,8 +34,8 @@ class QuangInputComponent extends QuangBaseComponent {
     onTogglePasswordVisibility() {
         this.showPassword.update((current) => !current);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: QuangInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: QuangInputComponent, isStandalone: true, selector: "quang-input", inputs: { componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: true, transformFunction: null }, maxLengthText: { classPropertyName: "maxLengthText", publicName: "maxLengthText", isSignal: true, isRequired: false, transformFunction: null }, minLengthText: { classPropertyName: "minLengthText", publicName: "minLengthText", isSignal: true, isRequired: false, transformFunction: null }, minNumber: { classPropertyName: "minNumber", publicName: "minNumber", isSignal: true, isRequired: false, transformFunction: null }, maxNumber: { classPropertyName: "maxNumber", publicName: "maxNumber", isSignal: true, isRequired: false, transformFunction: null }, componentStep: { classPropertyName: "componentStep", publicName: "componentStep", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, showHidePasswordButton: { classPropertyName: "showHidePasswordButton", publicName: "showHidePasswordButton", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: QuangInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: QuangInputComponent, isStandalone: true, selector: "quang-input", inputs: { componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: true, transformFunction: null }, maxLengthText: { classPropertyName: "maxLengthText", publicName: "maxLengthText", isSignal: true, isRequired: false, transformFunction: null }, minLengthText: { classPropertyName: "minLengthText", publicName: "minLengthText", isSignal: true, isRequired: false, transformFunction: null }, minNumber: { classPropertyName: "minNumber", publicName: "minNumber", isSignal: true, isRequired: false, transformFunction: null }, maxNumber: { classPropertyName: "maxNumber", publicName: "maxNumber", isSignal: true, isRequired: false, transformFunction: null }, componentStep: { classPropertyName: "componentStep", publicName: "componentStep", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, showHidePasswordButton: { classPropertyName: "showHidePasswordButton", publicName: "showHidePasswordButton", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => QuangInputComponent),
@@ -43,7 +43,7 @@ class QuangInputComponent extends QuangBaseComponent {
             },
         ], usesInheritance: true, ngImport: i0, template: "@if (componentType()) {\n  <div class=\"mb-3\">\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    @if (componentType() !== 'textarea') {\n      <div\n        [class.is-invalid]=\"_showErrors()\"\n        class=\"input-container\"\n      >\n        <input\n          [attr.maxLength]=\"maxLengthText()\"\n          [attr.minLength]=\"minLengthText()\"\n          [attr.required]=\"getIsRequiredControl()\"\n          [class.is-invalid]=\"_showErrors()\"\n          [class.is-valid]=\"_showSuccess()\"\n          [class.with-button-password]=\"showHidePasswordButton()\"\n          [disabled]=\"_isDisabled()\"\n          [id]=\"componentId()\"\n          [max]=\"maxNumber()\"\n          [min]=\"minNumber()\"\n          [ngClass]=\"componentClass()\"\n          [placeholder]=\"componentPlaceholder() | transloco\"\n          [readOnly]=\"isReadonly()\"\n          [step]=\"componentStep()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [type]=\"componentInputType()\"\n          [value]=\"_value()\"\n          (blur)=\"onBlurHandler()\"\n          (input)=\"onChangedEventHandler($event)\"\n          autocomplete=\"off\"\n          class=\"form-control\"\n        />\n        @if (componentType() === 'password' && showHidePasswordButton()) {\n          <button\n            [class.border-danger]=\"_showErrors()\"\n            [class.border-success]=\"_showSuccess()\"\n            [ngClass]=\"buttonClass()\"\n            (click)=\"_ngControl()?.disabled ? null : onTogglePasswordVisibility()\"\n            #calendarButton\n            aria-label=\"calendar-button\"\n            class=\"btn btn-outline-secondary btn-outline-password\"\n            type=\"button\"\n          >\n            @if (showPassword()) {\n              <ng-content select=\"[hide-password]\" />\n            } @else {\n              <ng-content select=\"[show-password]\" />\n            }\n          </button>\n        }\n      </div>\n    }\n    @if (componentType() === 'textarea') {\n      <textarea\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [class.no-resize]=\"!resizable()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        class=\"form-control\"\n      ></textarea>\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", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}:host{display:block}.no-resize{resize:none}.btn-outline-password{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}.input-container{display:flex}input{flex:1}input.with-button-password{border-top-right-radius:0;border-bottom-right-radius:0}input:disabled{border-radius:var(--bs-border-radius)}.border-danger{border-color:var(--bs-form-invalid-border-color)}.border-success{border-color:var(--bs-form-valid-border-color)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.0", ngImport: i0, type: QuangInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: QuangInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-input', providers: [
                         {