quang 19.3.4 → 19.3.5

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: "19.2.14", ngImport: i0, type: QuangAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangAuthService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangAuthService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangAuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangAuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -247,10 +247,10 @@ class QuangHasAtLeastOneRoleDirective {
             this.changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangHasAtLeastOneRoleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", 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: "19.2.15", ngImport: i0, type: QuangHasAtLeastOneRoleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", 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: "19.2.14", ngImport: i0, type: QuangHasAtLeastOneRoleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangHasAtLeastOneRoleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[quangHasAtLeastOneRole]',
@@ -292,10 +292,10 @@ class QuangHasEveryRoleDirective {
             this.changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangHasEveryRoleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", 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: "19.2.15", ngImport: i0, type: QuangHasEveryRoleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", 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: "19.2.14", ngImport: i0, type: QuangHasEveryRoleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangHasEveryRoleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[quangHasEveryRole]',
@@ -322,10 +322,10 @@ class QuangIsAuthenticatedDirective {
             this.changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangIsAuthenticatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: QuangIsAuthenticatedDirective, isStandalone: true, selector: "[quangIsAuthenticated]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangIsAuthenticatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: QuangIsAuthenticatedDirective, isStandalone: true, selector: "[quangIsAuthenticated]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangIsAuthenticatedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangIsAuthenticatedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[quangIsAuthenticated]',
@@ -351,10 +351,10 @@ class QuangIsNotAuthenticatedDirective {
             this.changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangIsNotAuthenticatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: QuangIsNotAuthenticatedDirective, isStandalone: true, selector: "[quangIsNotAuthenticated]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangIsNotAuthenticatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: QuangIsNotAuthenticatedDirective, isStandalone: true, selector: "[quangIsNotAuthenticated]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangIsNotAuthenticatedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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: "19.2.14", ngImport: i0, type: MemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MemoryStorage }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MemoryStorage }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MemoryStorage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MemoryStorage, decorators: [{
             type: Injectable
         }] });
 function withMemoryStorage() {

package/fesm2022/quang-components-autocomplete.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"quang-components-autocomplete.mjs","sources":["../../../projects/quang/components/autocomplete/autocomplete.component.ts","../../../projects/quang/components/autocomplete/autocomplete.component.html","../../../projects/quang/components/autocomplete/quang-components-autocomplete.ts"],"sourcesContent":["import { NgClass, NgStyle } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  effect,\n  forwardRef,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\nimport { Subject, Subscription, debounceTime, distinctUntilChanged } from 'rxjs'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-autocomplete',\n  imports: [TranslocoPipe, NgClass, QuangOptionListComponent, NgStyle, QuangTooltipDirective],\n  templateUrl: './autocomplete.component.html',\n  styleUrl: './autocomplete.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangAutocompleteComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n})\n/**\n * Autocomplete component for providing suggestion options {@link SelectOption} as the user types.\n *\n * @usageNotes\n * This component displays a list of filtered options based on user input.\n * It allows users to select an option from the suggestions and emits the event `selectedOption` when an option is selected.\n *\n * `searchTextDebounce` is by default set to 300ms.\n */\nexport class QuangAutocompleteComponent extends QuangBaseComponent<string | number | string[] | number[]> {\n  // the form can't be a random text but must be one of the options if this is false\n  syncFormWithText = input<boolean>(false)\n\n  optionListMaxHeight = input<string>('200px')\n\n  selectOptions = input.required<SelectOption[]>()\n\n  translateValue = input<boolean>(true)\n\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  /**\n   * Only emits the value without saving it in ngControl\n   */\n  emitOnly = input<boolean>(false)\n\n  multiple = input<boolean>(false)\n\n  /**\n   * Set the maximum length in characters of the single chip.\n   */\n  chipMaxLength = input<number>(0)\n\n  multiSelectDisplayMode = input<'vertical' | 'horizontal'>('vertical')\n\n  optionList = viewChild<QuangOptionListComponent>('optionList')\n\n  _showOptions = signal<boolean | null>(null)\n\n  _inputValue = signal<string>('')\n\n  _optionHideTimeout = signal<any | undefined>(undefined)\n\n  _chipList = signal<string[]>([])\n\n  _selectedOptions = signal<SelectOption[]>([])\n\n  inputValue$ = new Subject<string>()\n\n  selectOptionsChange = toObservable(this.selectOptions)\n    .pipe(takeUntilDestroyed())\n    .subscribe(() => {\n      const value = this._value()\n      if (!this.multiple() && !this._inputValue()) {\n        this.setInputValue()\n      } else if (this.multiple() && Array.isArray(value) && value.length > 0) {\n        for (const valueElement of value) {\n          this.onSelectValue(valueElement)\n        }\n      }\n    })\n\n  _filteredOptions = computed<SelectOption[]>(() => {\n    const text = this._inputValue()\n    if (this.multiple()) {\n      return this.filterOptions(text).filter((x) => !this._chipList().some((chip) => chip === x.value))\n    } else {\n      return text?.length ? this.filterOptions(text) : this.selectOptions()\n    }\n  })\n\n  selectedOption = output<string | number | null>()\n\n  searchTextChange = output<string>()\n\n  searchTextDebounce = input<number>(300)\n\n  internalFilterOptions = input<boolean>(true)\n\n  readonly ParentType = OptionListParentType.AUTOCOMPLETE\n\n  formValueChange$: Subscription | undefined = undefined\n\n  private readonly selectInput = viewChild<ElementRef>('selectInput')\n  private readonly chipContainer = viewChild<ElementRef>('chipContainer')\n  private readonly autocompleteContainer = viewChild<ElementRef>('autocompleteContainer')\n\n  inputHeight = signal<number>(0)\n\n  private readonly onChangeSelectInput = effect(() => {\n    const selectInput = this.selectInput()\n    if (selectInput) {\n      this.inputHeight.set(selectInput?.nativeElement?.getBoundingClientRect().height)\n      selectInput.nativeElement.addEventListener('keydown', (e: KeyboardEvent) => {\n        if (this.multiple() && this._chipList().length > 0 && !this._inputValue()?.length && e.key === 'Backspace') {\n          e.preventDefault()\n          // this.deleteChip(this._chipList()[this._chipList().length - 1])\n          const chipContainer = this.chipContainer()?.nativeElement\n          if (chipContainer) {\n            const chips = chipContainer.querySelectorAll('.chip button.btn-chip')\n            if (chips.length > 0) {\n              const focusChip = chips[chips.length - 1]\n              focusChip.focus()\n              focusChip.addEventListener('keydown', (event: KeyboardEvent) => {\n                if (event.key === 'Backspace') {\n                  event.preventDefault()\n                  this.deleteChip(this._chipList()[this._chipList().length - 1])\n                  selectInput.nativeElement.focus()\n                } else {\n                  event.preventDefault()\n                }\n              })\n            }\n          }\n        }\n      })\n    }\n  })\n\n  constructor() {\n    super()\n    this.inputValue$\n      .pipe(takeUntilDestroyed(), debounceTime(this.searchTextDebounce()), distinctUntilChanged())\n      .subscribe((value) => {\n        if (value !== this._inputValue()) {\n          this.searchTextChange.emit(value?.toString() || '')\n          if (this.syncFormWithText()) {\n            this.onValueChange(value, false)\n          }\n        }\n        this._inputValue.set(value?.toString() || '')\n        if (!this._inputValue()?.length && !this.emitOnly() && !this.multiple()) {\n          this._ngControl()?.control?.patchValue(null)\n        }\n      })\n    toObservable(this._showOptions)\n      .pipe(takeUntilDestroyed())\n      .subscribe((data) => {\n        if (!data && data !== null) {\n          this.checkInputValue()\n        }\n      })\n  }\n\n  override setupFormControl(): void {\n    super.setupFormControl()\n    const formControl = this._ngControl()?.control\n    if (this.formValueChange$) {\n      this.formValueChange$.unsubscribe()\n      this.formValueChange$ = undefined\n    }\n    if (formControl) {\n      this.formValueChange$ = formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {\n        if (!this.syncFormWithText() && !value) {\n          this._inputValue.set('')\n        }\n      })\n    }\n  }\n\n  showOptionVisibility(): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n      this._optionHideTimeout.set(null)\n    }\n    this._showOptions.set(true)\n  }\n\n  hideOptionVisibility(skipTimeout = false): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n    }\n    this._optionHideTimeout.set(\n      setTimeout(\n        () => {\n          this._showOptions.set(false)\n        },\n        skipTimeout ? 0 : 50\n      )\n    )\n  }\n\n  onChangeInput(value: any): void {\n    this.showOptionVisibility()\n    this.inputValue$.next(value.target?.value)\n  }\n\n  filterOptions(value: string): SelectOption[] {\n    const options = this.selectOptions()\n    if (this.internalFilterOptions()) {\n      return options.filter((x) => x.label.toLowerCase().includes(value.toLowerCase()))\n    }\n    return options\n  }\n\n  override onChangedHandler(value: string | number | string[] | number[]): void {\n    super.onChangedHandler(value)\n    this.setInputValue()\n  }\n\n  onValueChange(value: string | number, hideOptions = true): void {\n    if (this.multiple()) {\n      this.onSelectValue(value)\n      this.onChangedHandler(this._chipList())\n      if (this._chipList().some((x) => x === value)) {\n        this.inputValue$.next('')\n      }\n    } else {\n      this.onChangedHandler(value)\n      if (hideOptions) {\n        this.hideOptionVisibility()\n      }\n      this.selectedOption.emit(value)\n    }\n  }\n\n  checkInputValue(): void {\n    const option = this.selectOptions().find((x) => x.label.toLowerCase() === this._inputValue()?.toLowerCase())\n    if (!this.multiple()) {\n      if (option?.value === this._value()) return\n      if (option) {\n        this.onChangedHandler(option.value ?? '')\n      } else if (!this.syncFormWithText()) {\n        this.onChangedHandler('')\n      }\n    }\n  }\n\n  override writeValue(val: string | number | string[] | number[]): void {\n    super.writeValue(val)\n    this.setInputValue(true)\n    if (Array.isArray(val)) {\n      val.forEach((x) => {\n        this.onSelectValue(x)\n      })\n    }\n  }\n\n  onBlurInput(event: FocusEvent) {\n    if ((event?.relatedTarget as HTMLDivElement)?.id !== this.optionList()?.optionListContainer()?.nativeElement?.id)\n      this.onBlurHandler()\n  }\n\n  override onBlurHandler() {\n    setTimeout(() => {\n      this.hideOptionVisibility()\n      if (!this._inputValue()?.length && !this.emitOnly() && !this.multiple()) {\n        this._ngControl()?.control?.patchValue(null)\n      }\n      super.onBlurHandler()\n    }, 100)\n  }\n\n  onBlurOptionList(event: any): void {\n    if (event) this.hideOptionVisibility()\n  }\n\n  setInputValue(resetOnMiss = false) {\n    this._inputValue.set(\n      this.selectOptions().find((x) => x.value === this._value())?.label ?? (resetOnMiss ? '' : this._inputValue())\n    )\n    if (!this.syncFormWithText()) this.inputValue$.next(this._inputValue() ?? '')\n  }\n\n  getDescription(chip: any): string {\n    const valueChip = this.selectOptions().find((x) => x.value === chip)\n    return valueChip ? valueChip.label.toString() : ''\n  }\n\n  onSelectValue(value: any): void {\n    const newChip = this.selectOptions().find((x) => x.value === value)\n    if (newChip && !this._chipList().some((x) => x === newChip?.value)) {\n      this.createChipList(newChip)\n      this._selectedOptions.update((list) => [...list, newChip])\n    }\n  }\n\n  /**\n   * remove chip from chips list\n   * @param chipValue chip to delete\n   */\n  deleteChip(chipValue: any): void {\n    const stringChipValue = chipValue?.toString()\n    const i = this._chipList()?.findIndex((x) => x.toString() === stringChipValue)\n    if (i >= 0) {\n      const currentList = this._chipList()\n      if (Array.isArray(currentList) && currentList.length > 0) {\n        this._chipList.update((list) => (list as string[]).filter((_, index) => index !== i))\n        this.onChangedHandler(this._chipList())\n      }\n    }\n  }\n\n  createChipList(chip: any): void {\n    if (chip) {\n      this._chipList.update((list) => [...list, chip.value])\n    }\n  }\n}\n","<div\n  [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n  #autocompleteContainer\n  class=\"autocomplete-container\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track $index) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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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        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\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n    #chipContainer\n    class=\"container-wrap\"\n  >\n    @if (multiple() && _chipList().length > 0) {\n      @for (chip of _chipList(); track $index) {\n        @if (getDescription(chip)) {\n          <div\n            [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n            class=\"chip chip-hover\"\n          >\n            <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n              {{ getDescription(chip) }}\n            </p>\n            @if (!isReadonly() && !_isDisabled()) {\n              <button\n                [tabIndex]=\"$index + 1\"\n                (click)=\"deleteChip(chip)\"\n                class=\"btn btn-chip\"\n                type=\"button\"\n              >\n                <svg\n                  class=\"ionicon\"\n                  fill=\"currentColor\"\n                  height=\"24\"\n                  viewBox=\"0 0 512 512\"\n                  width=\"24\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M368 368L144 144M368 144L144 368\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"32\"\n                  />\n                </svg>\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled() || isReadonly()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_inputValue()\"\n      (blur)=\"onBlurInput($event)\"\n      (input)=\"onChangeInput($event)\"\n      (mousedown)=\"showOptionVisibility()\"\n      #selectInput\n      autocomplete=\"off\"\n      type=\"text\"\n    />\n  </div>\n  @if (_showOptions()) {\n    <quang-option-list\n      [_isDisabled]=\"_isDisabled()\"\n      [_value]=\"_value()\"\n      [componentClass]=\"componentClass()\"\n      [componentLabel]=\"componentLabel()\"\n      [componentTabIndex]=\"componentTabIndex()\"\n      [nullOption]=\"false\"\n      [optionListMaxHeight]=\"optionListMaxHeight()\"\n      [parentID]=\"componentId()\"\n      [parentType]=\"ParentType\"\n      [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n      [selectButtonRef]=\"autocompleteContainer\"\n      [selectOptions]=\"_filteredOptions()\"\n      [translateValue]=\"translateValue()\"\n      (blurHandler)=\"onBlurOptionList($event)\"\n      (changedHandler)=\"onValueChange($event)\"\n      #optionList\n      selectionMode=\"single\"\n    />\n  }\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-components-checkbox.mjs

@@ -25,8 +25,8 @@ class QuangCheckboxComponent extends QuangBaseComponent {
         const inputElement = $event.target;
         this.onChangedHandler(inputElement.checked);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: "19.2.15", ngImport: i0, type: QuangCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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),
@@ -34,7 +34,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      [ngClass]=\"{ 'cursor-pointer': !_isDisabled() }\"\n      class=\"form-label\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\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()) {\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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-checkbox', providers: [
                         {

package/fesm2022/quang-components-date.mjs

@@ -381,10 +381,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: "19.2.14", ngImport: i0, type: QuangDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\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()) {\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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\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()) {\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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-date', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], imports: [TranslocoPipe, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-3\">\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label\"\n    >\n      {{ componentLabel() | transloco }}\n      <span [hidden]=\"!_isRequired()\">*</span>\n    </label>\n  }\n  <div\n    [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()) {\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

@@ -33,8 +33,8 @@ class QuangInputComponent extends QuangBaseComponent {
     onTogglePasswordVisibility() {
         this.showPassword.update((current) => !current);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: "19.2.15", ngImport: i0, type: QuangInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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),
@@ -42,7 +42,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\"\n      >\n        {{ componentLabel() | transloco }}\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </label>\n    }\n    @if (componentType() !== 'textarea') {\n      <div class=\"input-container\">\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]\"></ng-content>\n            } @else {\n              <ng-content select=\"[show-password]\"></ng-content>\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()) {\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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-input', providers: [
                         {

package/fesm2022/quang-components-paginator.mjs

@@ -42,10 +42,10 @@ class QuangPaginatorLanguageService extends PaginatorIntl {
             this.changes.update((x) => x);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPaginatorLanguageService, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPaginatorLanguageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangPaginatorLanguageService, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangPaginatorLanguageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPaginatorLanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangPaginatorLanguageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -114,20 +114,20 @@ class QuangPaginatorComponent {
         this._currentPage.set(this._totalPages());
         this.changePage.emit(this._currentPage());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: QuangPaginatorComponent, isStandalone: true, selector: "quang-paginator", inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, sizeList: { classPropertyName: "sizeList", publicName: "sizeList", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, showTotalElementsCount: { classPropertyName: "showTotalElementsCount", publicName: "showTotalElementsCount", isSignal: true, isRequired: false, transformFunction: null }, totalItemsText: { classPropertyName: "totalItemsText", publicName: "totalItemsText", isSignal: true, isRequired: false, transformFunction: null }, sizeText: { classPropertyName: "sizeText", publicName: "sizeText", isSignal: true, isRequired: false, transformFunction: null }, pageRangeText: { classPropertyName: "pageRangeText", publicName: "pageRangeText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changePage: "changePage", changeSize: "changeSize" }, ngImport: i0, template: "<div\n  [id]=\"componentId()\"\n  [ngClass]=\"componentClass()\"\n  class=\"paginatorContainer\"\n>\n  @if (showTotalElementsCount()) {\n    <div class=\"me-3 pagination-label\">{{ totalItemsText() | transloco }} {{ totalItems() }}</div>\n  }\n  @if (sizeList().length > 0) {\n    <div class=\"me-3\">\n      <label\n        class=\"form-label pagination-label mb-0 text-center\"\n        for=\"pageSize\"\n      >\n        {{ sizeText() | transloco }}\n      </label>\n      <select\n        [id]=\"componentId() + '-quang-page-size'\"\n        [tabIndex]=\"componentTabIndex()\"\n        (change)=\"onChangeSize($event)\"\n        #input\n        autocomplete=\"off\"\n        class=\"form-select page-size\"\n        id=\"pageSize\"\n        name=\"pageSize\"\n      >\n        @for (pageSize of sizeList(); track pageSize) {\n          <option [selected]=\"pageSize === this._pageSize()\">\n            {{ pageSize }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n  <div class=\"pagination-label text-center\">\n    {{ pageRangeText() | transloco: { page: page(), amountPages: _totalPages() } }}\n  </div>\n  <div class=\"pagination\">\n    <ul>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToFirstPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToPreviousPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToNextPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToLastPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template\n  #nextTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M530-481 332-679l43-43 241 241-241 241-43-43 198-198Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #prevTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M561-240 320-481l241-241 43 43-198 198 198 198-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #lastTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"m272-245-43-43 192-192-192-192 43-43 235 235-235 235Zm388 5v-480h60v480h-60Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #firstTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M240-240v-480h60v480h-60Zm447-3L453-477l234-234 43 43-191 191 191 191-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n", styles: [":host{display:block}.paginatorContainer{display:flex;align-items:flex-end;flex-wrap:wrap}@media (min-width: 576px){.paginatorContainer{flex-wrap:nowrap;order:2}}.paginatorContainer .page-size{display:inline-block;margin-bottom:.5rem;order:2;min-width:80px}@media (min-width: 576px){.paginatorContainer .page-size{order:1}}.pagination{margin-bottom:.5rem}.pagination ul{padding:0;margin:0;display:flex}.pagination ul li{list-style-type:none}.pagination ul li.pagination-page{display:none}.pagination ul li .page-link{border-radius:50%;padding:.375rem;border:none;gap:1.5rem;padding:.25rem;background-color:transparent;color:var(--bs-body-color)}.pagination ul li .page-link:disabled svg path{opacity:40%}.pagination ul li .page-link:focus{box-shadow:unset;background-color:unset}.pagination ul li .page-link svg{vertical-align:bottom;width:30px;height:30px}.pagination-label{margin:0;margin-bottom:1rem;font-size:.75rem}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: QuangPaginatorComponent, isStandalone: true, selector: "quang-paginator", inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, sizeList: { classPropertyName: "sizeList", publicName: "sizeList", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, showTotalElementsCount: { classPropertyName: "showTotalElementsCount", publicName: "showTotalElementsCount", isSignal: true, isRequired: false, transformFunction: null }, totalItemsText: { classPropertyName: "totalItemsText", publicName: "totalItemsText", isSignal: true, isRequired: false, transformFunction: null }, sizeText: { classPropertyName: "sizeText", publicName: "sizeText", isSignal: true, isRequired: false, transformFunction: null }, pageRangeText: { classPropertyName: "pageRangeText", publicName: "pageRangeText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changePage: "changePage", changeSize: "changeSize" }, ngImport: i0, template: "<div\n  [id]=\"componentId()\"\n  [ngClass]=\"componentClass()\"\n  class=\"paginatorContainer\"\n>\n  @if (showTotalElementsCount()) {\n    <div class=\"me-3 pagination-label\">{{ totalItemsText() | transloco }} {{ totalItems() }}</div>\n  }\n  @if (sizeList().length > 0) {\n    <div class=\"me-3\">\n      <label\n        class=\"form-label pagination-label mb-0 text-center\"\n        for=\"pageSize\"\n      >\n        {{ sizeText() | transloco }}\n      </label>\n      <select\n        [id]=\"componentId() + '-quang-page-size'\"\n        [tabIndex]=\"componentTabIndex()\"\n        (change)=\"onChangeSize($event)\"\n        #input\n        autocomplete=\"off\"\n        class=\"form-select page-size\"\n        id=\"pageSize\"\n        name=\"pageSize\"\n      >\n        @for (pageSize of sizeList(); track pageSize) {\n          <option [selected]=\"pageSize === this._pageSize()\">\n            {{ pageSize }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n  <div class=\"pagination-label text-center\">\n    {{ pageRangeText() | transloco: { page: page(), amountPages: _totalPages() } }}\n  </div>\n  <div class=\"pagination\">\n    <ul>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToFirstPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToPreviousPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToNextPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToLastPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template\n  #nextTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M530-481 332-679l43-43 241 241-241 241-43-43 198-198Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #prevTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M561-240 320-481l241-241 43 43-198 198 198 198-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #lastTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"m272-245-43-43 192-192-192-192 43-43 235 235-235 235Zm388 5v-480h60v480h-60Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #firstTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M240-240v-480h60v480h-60Zm447-3L453-477l234-234 43 43-191 191 191 191-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n", styles: [":host{display:block}.paginatorContainer{display:flex;align-items:flex-end;flex-wrap:wrap}@media (min-width: 576px){.paginatorContainer{flex-wrap:nowrap;order:2}}.paginatorContainer .page-size{display:inline-block;margin-bottom:.5rem;order:2;min-width:80px}@media (min-width: 576px){.paginatorContainer .page-size{order:1}}.pagination{margin-bottom:.5rem}.pagination ul{padding:0;margin:0;display:flex}.pagination ul li{list-style-type:none}.pagination ul li.pagination-page{display:none}.pagination ul li .page-link{border-radius:50%;padding:.375rem;border:none;gap:1.5rem;padding:.25rem;background-color:transparent;color:var(--bs-body-color)}.pagination ul li .page-link:disabled svg path{opacity:40%}.pagination ul li .page-link:focus{box-shadow:unset;background-color:unset}.pagination ul li .page-link svg{vertical-align:bottom;width:30px;height:30px}.pagination-label{margin:0;margin-bottom:1rem;font-size:.75rem}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-paginator', imports: [TranslocoPipe, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [id]=\"componentId()\"\n  [ngClass]=\"componentClass()\"\n  class=\"paginatorContainer\"\n>\n  @if (showTotalElementsCount()) {\n    <div class=\"me-3 pagination-label\">{{ totalItemsText() | transloco }} {{ totalItems() }}</div>\n  }\n  @if (sizeList().length > 0) {\n    <div class=\"me-3\">\n      <label\n        class=\"form-label pagination-label mb-0 text-center\"\n        for=\"pageSize\"\n      >\n        {{ sizeText() | transloco }}\n      </label>\n      <select\n        [id]=\"componentId() + '-quang-page-size'\"\n        [tabIndex]=\"componentTabIndex()\"\n        (change)=\"onChangeSize($event)\"\n        #input\n        autocomplete=\"off\"\n        class=\"form-select page-size\"\n        id=\"pageSize\"\n        name=\"pageSize\"\n      >\n        @for (pageSize of sizeList(); track pageSize) {\n          <option [selected]=\"pageSize === this._pageSize()\">\n            {{ pageSize }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n  <div class=\"pagination-label text-center\">\n    {{ pageRangeText() | transloco: { page: page(), amountPages: _totalPages() } }}\n  </div>\n  <div class=\"pagination\">\n    <ul>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToFirstPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToPreviousPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToNextPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToLastPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template\n  #nextTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M530-481 332-679l43-43 241 241-241 241-43-43 198-198Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #prevTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M561-240 320-481l241-241 43 43-198 198 198 198-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #lastTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"m272-245-43-43 192-192-192-192 43-43 235 235-235 235Zm388 5v-480h60v480h-60Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #firstTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M240-240v-480h60v480h-60Zm447-3L453-477l234-234 43 43-191 191 191 191-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n", styles: [":host{display:block}.paginatorContainer{display:flex;align-items:flex-end;flex-wrap:wrap}@media (min-width: 576px){.paginatorContainer{flex-wrap:nowrap;order:2}}.paginatorContainer .page-size{display:inline-block;margin-bottom:.5rem;order:2;min-width:80px}@media (min-width: 576px){.paginatorContainer .page-size{order:1}}.pagination{margin-bottom:.5rem}.pagination ul{padding:0;margin:0;display:flex}.pagination ul li{list-style-type:none}.pagination ul li.pagination-page{display:none}.pagination ul li .page-link{border-radius:50%;padding:.375rem;border:none;gap:1.5rem;padding:.25rem;background-color:transparent;color:var(--bs-body-color)}.pagination ul li .page-link:disabled svg path{opacity:40%}.pagination ul li .page-link:focus{box-shadow:unset;background-color:unset}.pagination ul li .page-link svg{vertical-align:bottom;width:30px;height:30px}.pagination-label{margin:0;margin-bottom:1rem;font-size:.75rem}\n"] }]
         }] });
 
 class PaginatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -142,10 +142,10 @@ class QuangPaginatorService {
         const end = (pageNumber + 1) * pageSize;
         return list.slice(start, end);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPaginatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPaginatorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangPaginatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangPaginatorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuangPaginatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuangPaginatorService, decorators: [{
             type: Injectable
         }] });