quang 21.2.0 → 22.0.0-0

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

@@ -1 +1 @@
-{"version":3,"file":"quang-components-input.mjs","sources":["../../../projects/quang/components/input/input.component.ts","../../../projects/quang/components/input/input.component.html","../../../projects/quang/components/input/quang-components-input.ts"],"sourcesContent":["import { NgClass } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, input, signal } 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'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type InputType = 'text' | 'textarea' | 'password' | 'email' | 'number' | 'url' | 'search' | 'tel' | 'color'\n\n@Component({\n  selector: 'quang-input',\n  templateUrl: './input.component.html',\n  styleUrl: './input.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangInputComponent),\n      multi: true,\n    },\n  ],\n  imports: [TranslocoPipe, NgClass, QuangTooltipDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Input component that handles all the types declared in {@link InputType}\n * @property {boolean} resizable just for textarea {@link InputType}\n */\nexport class QuangInputComponent extends QuangBaseComponent<string | number> {\n  componentType = input.required<InputType>()\n\n  maxLengthText = input<number | null>(null)\n\n  minLengthText = input<number | null>(null)\n\n  minNumber = input<number | undefined>(undefined)\n\n  maxNumber = input<number | undefined>(undefined)\n\n  componentStep = input<number>(1)\n\n  resizable = input(true)\n\n  buttonClass = input<string>('')\n\n  showHidePasswordButton = input(false)\n\n  showPassword = signal<boolean>(false)\n\n  componentInputType = computed<InputType>(() =>\n    this.componentType() === 'password' && this.showPassword() ? 'text' : this.componentType()\n  )\n\n  constructor() {\n    super()\n    toObservable(this.componentType)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.setupFormControl()\n      })\n  }\n\n  onTogglePasswordVisibility(): void {\n    this.showPassword.update((current) => !current)\n  }\n}\n","@if (componentType()) {\n  <div class=\"mb-3\">\n    @if (componentLabel()) {\n      <label\n        [htmlFor]=\"componentId()\"\n        class=\"form-label d-flex gap-2\"\n      >\n        <div>\n          <span>{{ componentLabel() | transloco }}</span>\n          <span [hidden]=\"!_isRequired()\">*</span>\n        </div>\n        @if (helpMessage() && helpMessageTooltip()) {\n          <div\n            [overlayPosition]=\"helpTooltipPosition()\"\n            [quangTooltip]=\"helpMessage() | transloco\"\n            [showMethod]=\"showHelpTooltipMethod()\"\n            class=\"pointer\"\n          >\n            <ng-content select=\"[help-icon]\" />\n          </div>\n        }\n      </label>\n    }\n    @if (componentType() !== 'textarea') {\n      <div\n        [class.is-invalid]=\"_showErrors()\"\n        class=\"input-container\"\n      >\n        <input\n          [attr.maxLength]=\"maxLengthText()\"\n          [attr.minLength]=\"minLengthText()\"\n          [attr.required]=\"getIsRequiredControl()\"\n          [class.is-invalid]=\"_showErrors()\"\n          [class.is-valid]=\"_showSuccess()\"\n          [class.with-button-password]=\"showHidePasswordButton()\"\n          [disabled]=\"_isDisabled()\"\n          [id]=\"componentId()\"\n          [max]=\"maxNumber()\"\n          [min]=\"minNumber()\"\n          [ngClass]=\"componentClass()\"\n          [placeholder]=\"componentPlaceholder() | transloco\"\n          [readOnly]=\"isReadonly()\"\n          [step]=\"componentStep()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [type]=\"componentInputType()\"\n          [value]=\"_value()\"\n          (blur)=\"onBlurHandler()\"\n          (input)=\"onChangedEventHandler($event)\"\n          autocomplete=\"off\"\n          class=\"form-control\"\n        />\n        @if (componentType() === 'password' && showHidePasswordButton()) {\n          <button\n            [class.border-danger]=\"_showErrors()\"\n            [class.border-success]=\"_showSuccess()\"\n            [ngClass]=\"buttonClass()\"\n            (click)=\"_ngControl()?.disabled ? null : onTogglePasswordVisibility()\"\n            #calendarButton\n            aria-label=\"calendar-button\"\n            class=\"btn btn-outline-secondary btn-outline-password\"\n            type=\"button\"\n          >\n            @if (showPassword()) {\n              <ng-content select=\"[hide-password]\" />\n            } @else {\n              <ng-content select=\"[show-password]\" />\n            }\n          </button>\n        }\n      </div>\n    }\n    @if (componentType() === 'textarea') {\n      <textarea\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [class.no-resize]=\"!resizable()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        class=\"form-control\"\n      ></textarea>\n    }\n    <div class=\"valid-feedback\">\n      {{ successMessage() | transloco }}\n    </div>\n    <div class=\"invalid-feedback\">\n      {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n    </div>\n    @if (helpMessage() && !helpMessageTooltip()) {\n      <small\n        [hidden]=\"_showSuccess() || _showErrors()\"\n        aria-live=\"assertive\"\n        class=\"form-text text-muted\"\n      >\n        {{ helpMessage() | transloco }}\n      </small>\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"quang-components-input.mjs","sources":["../../../projects/quang/components/input/input.component.ts","../../../projects/quang/components/input/input.component.html","../../../projects/quang/components/input/quang-components-input.ts"],"sourcesContent":["import { NgClass } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, computed, forwardRef, input, signal } 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'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type InputType = 'text' | 'textarea' | 'password' | 'email' | 'number' | 'url' | 'search' | 'tel' | 'color'\n\n@Component({\n  selector: 'quang-input',\n  templateUrl: './input.component.html',\n  styleUrl: './input.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangInputComponent),\n      multi: true,\n    },\n  ],\n  imports: [TranslocoPipe, NgClass, QuangTooltipDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Input component that handles all the types declared in {@link InputType}\n * @property {boolean} resizable just for textarea {@link InputType}\n */\nexport class QuangInputComponent extends QuangBaseComponent<string | number> {\n  componentType = input.required<InputType>()\n\n  maxLengthText = input<number | null>(null)\n\n  minLengthText = input<number | null>(null)\n\n  minNumber = input<number | undefined>(undefined)\n\n  maxNumber = input<number | undefined>(undefined)\n\n  componentStep = input<number>(1)\n\n  resizable = input(true)\n\n  buttonClass = input<string>('')\n\n  showHidePasswordButton = input(false)\n\n  showPassword = signal<boolean>(false)\n\n  componentInputType = computed<InputType>(() =>\n    this.componentType() === 'password' && this.showPassword() ? 'text' : this.componentType()\n  )\n\n  constructor() {\n    super()\n    toObservable(this.componentType)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.setupFormControl()\n      })\n  }\n\n  onTogglePasswordVisibility(): void {\n    this.showPassword.update((current) => !current)\n  }\n}\n","@if (componentType()) {\n  <div class=\"mb-3\">\n    @if (componentLabel()) {\n      <label\n        [htmlFor]=\"componentId()\"\n        class=\"form-label d-flex gap-2\"\n      >\n        <div>\n          <span>{{ componentLabel() | transloco }}</span>\n          <span [hidden]=\"!_isRequired()\">*</span>\n        </div>\n        @if (helpMessage() && helpMessageTooltip()) {\n          <div\n            [overlayPosition]=\"helpTooltipPosition()\"\n            [quangTooltip]=\"helpMessage() | transloco\"\n            [showMethod]=\"showHelpTooltipMethod()\"\n            class=\"pointer\"\n          >\n            <ng-content select=\"[help-icon]\" />\n          </div>\n        }\n      </label>\n    }\n    @if (componentType() !== 'textarea') {\n      <div\n        [class.is-invalid]=\"_showErrors()\"\n        class=\"input-container\"\n      >\n        <input\n          [attr.maxLength]=\"maxLengthText()\"\n          [attr.minLength]=\"minLengthText()\"\n          [attr.required]=\"getIsRequiredControl()\"\n          [class.is-invalid]=\"_showErrors()\"\n          [class.is-valid]=\"_showSuccess()\"\n          [class.with-button-password]=\"showHidePasswordButton()\"\n          [disabled]=\"_isDisabled()\"\n          [id]=\"componentId()\"\n          [max]=\"maxNumber()\"\n          [min]=\"minNumber()\"\n          [ngClass]=\"componentClass()\"\n          [placeholder]=\"componentPlaceholder() | transloco\"\n          [readOnly]=\"isReadonly()\"\n          [step]=\"componentStep()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [type]=\"componentInputType()\"\n          [value]=\"_value()\"\n          (blur)=\"onBlurHandler()\"\n          (input)=\"onChangedEventHandler($event)\"\n          autocomplete=\"off\"\n          class=\"form-control\"\n        />\n        @if (componentType() === 'password' && showHidePasswordButton()) {\n          <button\n            [class.border-danger]=\"_showErrors()\"\n            [class.border-success]=\"_showSuccess()\"\n            [ngClass]=\"buttonClass()\"\n            (click)=\"_ngControl()?.disabled ? null : onTogglePasswordVisibility()\"\n            #calendarButton\n            aria-label=\"calendar-button\"\n            class=\"btn btn-outline-secondary btn-outline-password\"\n            type=\"button\"\n          >\n            @if (showPassword()) {\n              <ng-content select=\"[hide-password]\" />\n            } @else {\n              <ng-content select=\"[show-password]\" />\n            }\n          </button>\n        }\n      </div>\n    }\n    @if (componentType() === 'textarea') {\n      <textarea\n        [attr.maxLength]=\"maxLengthText()\"\n        [attr.minLength]=\"minLengthText()\"\n        [class.is-invalid]=\"_showErrors()\"\n        [class.is-valid]=\"_showSuccess()\"\n        [class.no-resize]=\"!resizable()\"\n        [disabled]=\"_isDisabled()\"\n        [id]=\"componentId()\"\n        [ngClass]=\"componentClass()\"\n        [placeholder]=\"componentPlaceholder() | transloco\"\n        [readOnly]=\"isReadonly()\"\n        [tabIndex]=\"componentTabIndex()\"\n        [value]=\"_value()\"\n        (blur)=\"onBlurHandler()\"\n        (input)=\"onChangedEventHandler($event)\"\n        class=\"form-control\"\n      ></textarea>\n    }\n    <div class=\"valid-feedback\">\n      {{ successMessage() | transloco }}\n    </div>\n    <div class=\"invalid-feedback\">\n      {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n    </div>\n    @if (helpMessage() && !helpMessageTooltip()) {\n      <small\n        [hidden]=\"_showSuccess() || _showErrors()\"\n        aria-live=\"assertive\"\n        class=\"form-text text-muted\"\n      >\n        {{ helpMessage() | transloco }}\n      </small>\n    }\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-components-paginator.mjs

@@ -7,7 +7,8 @@ import { makeId } from 'quang/components/shared';
 
 class PaginatorIntl {
     constructor() {
-        this.changes = signal(0, ...(ngDevMode ? [{ debugName: "changes" }] : /* istanbul ignore next */ []));
+        this.changes = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "changes" }] : /* istanbul ignore next */ []));
         this.itemsPerPageLabel = '';
         this.nextPageLabel = '';
         this.previousPageLabel = '';
@@ -41,10 +42,10 @@ class QuangPaginatorLanguageService extends PaginatorIntl {
             this.changes.update((x) => x + 1);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangPaginatorLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangPaginatorLanguageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: QuangPaginatorLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: QuangPaginatorLanguageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangPaginatorLanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: QuangPaginatorLanguageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -61,30 +62,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
  */
 class QuangPaginatorComponent {
     constructor() {
-        this.componentId = input(makeId(10), ...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
-        this.componentTabIndex = input(0, ...(ngDevMode ? [{ debugName: "componentTabIndex" }] : /* istanbul ignore next */ []));
-        this.componentClass = input('', ...(ngDevMode ? [{ debugName: "componentClass" }] : /* istanbul ignore next */ []));
-        this.page = input.required(...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
-        this.pageSize = input.required(...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
-        this.sizeList = input([], ...(ngDevMode ? [{ debugName: "sizeList" }] : /* istanbul ignore next */ []));
-        this.totalItems = input.required(...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
-        this.showTotalElementsCount = input(true, ...(ngDevMode ? [{ debugName: "showTotalElementsCount" }] : /* istanbul ignore next */ []));
-        this.totalItemsText = input('quangPaginator.totalItems', ...(ngDevMode ? [{ debugName: "totalItemsText" }] : /* istanbul ignore next */ []));
-        this.sizeText = input('quangPaginator.size', ...(ngDevMode ? [{ debugName: "sizeText" }] : /* istanbul ignore next */ []));
-        this.pageRangeText = input('quangPaginator.pageRange', ...(ngDevMode ? [{ debugName: "pageRangeText" }] : /* istanbul ignore next */ []));
-        this._currentPage = signal(1, ...(ngDevMode ? [{ debugName: "_currentPage" }] : /* istanbul ignore next */ []));
+        this.componentId = input(makeId(10), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
+        this.componentTabIndex = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "componentTabIndex" }] : /* istanbul ignore next */ []));
+        this.componentClass = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "componentClass" }] : /* istanbul ignore next */ []));
+        this.page = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+        this.pageSize = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+        this.sizeList = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sizeList" }] : /* istanbul ignore next */ []));
+        this.totalItems = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+        this.showTotalElementsCount = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTotalElementsCount" }] : /* istanbul ignore next */ []));
+        this.totalItemsText = input('quangPaginator.totalItems', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalItemsText" }] : /* istanbul ignore next */ []));
+        this.sizeText = input('quangPaginator.size', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sizeText" }] : /* istanbul ignore next */ []));
+        this.pageRangeText = input('quangPaginator.pageRange', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageRangeText" }] : /* istanbul ignore next */ []));
+        this._currentPage = signal(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_currentPage" }] : /* istanbul ignore next */ []));
         this.page$ = toObservable(this.page)
             .pipe(takeUntilDestroyed())
             .subscribe((page) => {
             this._currentPage.set(page);
         });
-        this._pageSize = signal(0, ...(ngDevMode ? [{ debugName: "_pageSize" }] : /* istanbul ignore next */ []));
+        this._pageSize = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_pageSize" }] : /* istanbul ignore next */ []));
         this.pageSize$ = toObservable(this.pageSize)
             .pipe(takeUntilDestroyed())
             .subscribe((pageSize) => {
             this._pageSize.set(pageSize);
         });
-        this._totalPages = computed(() => Math.ceil(this.totalItems() / this._pageSize()), ...(ngDevMode ? [{ debugName: "_totalPages" }] : /* istanbul ignore next */ []));
+        this._totalPages = computed(() => Math.ceil(this.totalItems() / this._pageSize()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_totalPages" }] : /* istanbul ignore next */ []));
         this.changePage = output();
         this.changeSize = output();
     }
@@ -117,20 +132,20 @@ class QuangPaginatorComponent {
         this._currentPage.set(this._totalPages());
         this.changePage.emit(this._currentPage());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: QuangPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", 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"] }]
         }], propDecorators: { componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: false }] }], componentTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentTabIndex", required: false }] }], componentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentClass", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: true }] }], sizeList: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeList", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], showTotalElementsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotalElementsCount", required: false }] }], totalItemsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItemsText", required: false }] }], sizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeText", required: false }] }], pageRangeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageRangeText", required: false }] }], changePage: [{ type: i0.Output, args: ["changePage"] }], changeSize: [{ type: i0.Output, args: ["changeSize"] }] } });
 
 class PaginatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -145,10 +160,10 @@ class QuangPaginatorService {
         const end = (pageNumber + 1) * pageSize;
         return list.slice(start, end);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangPaginatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangPaginatorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: QuangPaginatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: QuangPaginatorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangPaginatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: QuangPaginatorService, decorators: [{
             type: Injectable
         }] });
 

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

@@ -1 +1 @@
-{"version":3,"file":"quang-components-paginator.mjs","sources":["../../../projects/quang/components/paginator/paginatorIntl.ts","../../../projects/quang/components/paginator/paginator-language.service.ts","../../../projects/quang/components/paginator/paginator.component.ts","../../../projects/quang/components/paginator/paginator.component.html","../../../projects/quang/components/paginator/paginator.module.ts","../../../projects/quang/components/paginator/paginator.service.ts","../../../projects/quang/components/paginator/quang-components-paginator.ts"],"sourcesContent":["import { signal, ɵɵFactoryDeclaration, ɵɵInjectableDeclaration } from '@angular/core'\n\nexport class PaginatorIntl {\n  readonly changes = signal<number>(0)\n\n  itemsPerPageLabel = ''\n\n  nextPageLabel = ''\n\n  previousPageLabel = ''\n\n  firstPageLabel = ''\n\n  lastPageLabel = ''\n\n  static ɵfac: ɵɵFactoryDeclaration<PaginatorIntl, never>\n\n  static ɵprov: ɵɵInjectableDeclaration<PaginatorIntl>\n\n  getRangeLabel: ((page: number, pageSize: number, length: number) => string) | undefined\n}\n","import { Injectable, inject } from '@angular/core'\n\nimport { TranslocoService } from '@jsverse/transloco'\n\nimport { PaginatorIntl } from './paginatorIntl'\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class QuangPaginatorLanguageService extends PaginatorIntl {\n  private readonly transloco = inject(TranslocoService)\n\n  constructor() {\n    super()\n    this.transloco.langChanges$.subscribe(() => {\n      this.getAndInitTranslations()\n    })\n    this.getAndInitTranslations()\n  }\n\n  getAndInitTranslations(): void {\n    this.transloco\n      .selectTranslate([\n        'quangPaginator.itemsPerPage',\n        'quangPaginator.nextPage',\n        'quangPaginator.previousPage',\n        'quangPaginator.firstPage',\n        'quangPaginator.lastPage',\n      ])\n      .subscribe((t) => {\n        ;[this.itemsPerPageLabel, this.nextPageLabel, this.previousPageLabel, this.firstPageLabel, this.lastPageLabel] =\n          t\n        this.changes.update((x) => x + 1)\n      })\n  }\n}\n","import { NgClass } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, OnInit, computed, input, output, signal } from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\n\nimport { makeId } from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-paginator',\n  imports: [TranslocoPipe, NgClass],\n  templateUrl: './paginator.component.html',\n  styleUrl: './paginator.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Paginator component for handling pagination in lists and tables.\n *\n * This component provides a user interface for navigating through pages of data.\n *\n * @usageNotes\n * `showTotalElementsCount` can be used to show or hide the total number of items.\n */\nexport class QuangPaginatorComponent implements OnInit {\n  componentId = input<string>(makeId(10))\n\n  componentTabIndex = input<number>(0)\n\n  componentClass = input<string | string[]>('')\n\n  page = input.required<number>()\n\n  pageSize = input.required<number>()\n\n  sizeList = input<number[]>([])\n\n  totalItems = input.required<number>()\n\n  showTotalElementsCount = input<boolean>(true)\n\n  totalItemsText = input<string>('quangPaginator.totalItems')\n\n  sizeText = input<string>('quangPaginator.size')\n\n  pageRangeText = input<string>('quangPaginator.pageRange')\n\n  _currentPage = signal<number>(1)\n\n  page$ = toObservable(this.page)\n    .pipe(takeUntilDestroyed())\n    .subscribe((page) => {\n      this._currentPage.set(page)\n    })\n\n  _pageSize = signal<number>(0)\n\n  pageSize$ = toObservable(this.pageSize)\n    .pipe(takeUntilDestroyed())\n    .subscribe((pageSize) => {\n      this._pageSize.set(pageSize)\n    })\n\n  _totalPages = computed(() => Math.ceil(this.totalItems() / this._pageSize()))\n\n  changePage = output<number>()\n\n  changeSize = output<number>()\n\n  ngOnInit(): void {\n    this._currentPage.set(this.page())\n    this._pageSize.set(this.pageSize())\n  }\n\n  onChangeSize(event: Event): void {\n    const target = event.target\n    const value = target instanceof HTMLSelectElement ? target.value : undefined\n    if (!value) return\n    this._pageSize.set(parseInt(value))\n    this.changeSize.emit(this._pageSize())\n    this.goToFirstPage()\n  }\n\n  goToNextPage(): void {\n    this._currentPage.update((page) => page + 1)\n    this.changePage.emit(this._currentPage())\n  }\n\n  goToPreviousPage(): void {\n    this._currentPage.update((page) => page - 1)\n    this.changePage.emit(this._currentPage())\n  }\n\n  goToFirstPage(): void {\n    this._currentPage.set(1)\n    this.changePage.emit(this._currentPage())\n  }\n\n  goToLastPage(): void {\n    this._currentPage.set(this._totalPages())\n    this.changePage.emit(this._currentPage())\n  }\n}\n","<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","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\n@NgModule({\n  declarations: [],\n  imports: [CommonModule],\n})\nexport class PaginatorModule {}\n","import { Injectable } from '@angular/core'\n\n@Injectable()\nexport class QuangPaginatorService {\n  // Returns the portion of the list given the page and the number of items per page\n  getPage<T>(list: readonly T[], pageNumber: number, pageSize: number): T[] {\n    const start = pageNumber * pageSize\n    const end = (pageNumber + 1) * pageSize\n    return list.slice(start, end)\n  }\n}\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-paginator.mjs","sources":["../../../projects/quang/components/paginator/paginatorIntl.ts","../../../projects/quang/components/paginator/paginator-language.service.ts","../../../projects/quang/components/paginator/paginator.component.ts","../../../projects/quang/components/paginator/paginator.component.html","../../../projects/quang/components/paginator/paginator.module.ts","../../../projects/quang/components/paginator/paginator.service.ts","../../../projects/quang/components/paginator/quang-components-paginator.ts"],"sourcesContent":["import { signal, ɵɵFactoryDeclaration, ɵɵInjectableDeclaration } from '@angular/core'\n\nexport class PaginatorIntl {\n  readonly changes = signal<number>(0)\n\n  itemsPerPageLabel = ''\n\n  nextPageLabel = ''\n\n  previousPageLabel = ''\n\n  firstPageLabel = ''\n\n  lastPageLabel = ''\n\n  static ɵfac: ɵɵFactoryDeclaration<PaginatorIntl, never>\n\n  static ɵprov: ɵɵInjectableDeclaration<PaginatorIntl>\n\n  getRangeLabel: ((page: number, pageSize: number, length: number) => string) | undefined\n}\n","import { Injectable, inject } from '@angular/core'\n\nimport { TranslocoService } from '@jsverse/transloco'\n\nimport { PaginatorIntl } from './paginatorIntl'\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class QuangPaginatorLanguageService extends PaginatorIntl {\n  private readonly transloco = inject(TranslocoService)\n\n  constructor() {\n    super()\n    this.transloco.langChanges$.subscribe(() => {\n      this.getAndInitTranslations()\n    })\n    this.getAndInitTranslations()\n  }\n\n  getAndInitTranslations(): void {\n    this.transloco\n      .selectTranslate([\n        'quangPaginator.itemsPerPage',\n        'quangPaginator.nextPage',\n        'quangPaginator.previousPage',\n        'quangPaginator.firstPage',\n        'quangPaginator.lastPage',\n      ])\n      .subscribe((t) => {\n        ;[this.itemsPerPageLabel, this.nextPageLabel, this.previousPageLabel, this.firstPageLabel, this.lastPageLabel] =\n          t\n        this.changes.update((x) => x + 1)\n      })\n  }\n}\n","import { NgClass } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, OnInit, computed, input, output, signal } from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\n\nimport { makeId } from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-paginator',\n  imports: [TranslocoPipe, NgClass],\n  templateUrl: './paginator.component.html',\n  styleUrl: './paginator.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Paginator component for handling pagination in lists and tables.\n *\n * This component provides a user interface for navigating through pages of data.\n *\n * @usageNotes\n * `showTotalElementsCount` can be used to show or hide the total number of items.\n */\nexport class QuangPaginatorComponent implements OnInit {\n  componentId = input<string>(makeId(10))\n\n  componentTabIndex = input<number>(0)\n\n  componentClass = input<string | string[]>('')\n\n  page = input.required<number>()\n\n  pageSize = input.required<number>()\n\n  sizeList = input<number[]>([])\n\n  totalItems = input.required<number>()\n\n  showTotalElementsCount = input<boolean>(true)\n\n  totalItemsText = input<string>('quangPaginator.totalItems')\n\n  sizeText = input<string>('quangPaginator.size')\n\n  pageRangeText = input<string>('quangPaginator.pageRange')\n\n  _currentPage = signal<number>(1)\n\n  page$ = toObservable(this.page)\n    .pipe(takeUntilDestroyed())\n    .subscribe((page) => {\n      this._currentPage.set(page)\n    })\n\n  _pageSize = signal<number>(0)\n\n  pageSize$ = toObservable(this.pageSize)\n    .pipe(takeUntilDestroyed())\n    .subscribe((pageSize) => {\n      this._pageSize.set(pageSize)\n    })\n\n  _totalPages = computed(() => Math.ceil(this.totalItems() / this._pageSize()))\n\n  changePage = output<number>()\n\n  changeSize = output<number>()\n\n  ngOnInit(): void {\n    this._currentPage.set(this.page())\n    this._pageSize.set(this.pageSize())\n  }\n\n  onChangeSize(event: Event): void {\n    const target = event.target\n    const value = target instanceof HTMLSelectElement ? target.value : undefined\n    if (!value) return\n    this._pageSize.set(parseInt(value))\n    this.changeSize.emit(this._pageSize())\n    this.goToFirstPage()\n  }\n\n  goToNextPage(): void {\n    this._currentPage.update((page) => page + 1)\n    this.changePage.emit(this._currentPage())\n  }\n\n  goToPreviousPage(): void {\n    this._currentPage.update((page) => page - 1)\n    this.changePage.emit(this._currentPage())\n  }\n\n  goToFirstPage(): void {\n    this._currentPage.set(1)\n    this.changePage.emit(this._currentPage())\n  }\n\n  goToLastPage(): void {\n    this._currentPage.set(this._totalPages())\n    this.changePage.emit(this._currentPage())\n  }\n}\n","<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","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\n@NgModule({\n  declarations: [],\n  imports: [CommonModule],\n})\nexport class PaginatorModule {}\n","import { Injectable } from '@angular/core'\n\n@Injectable()\nexport class QuangPaginatorService {\n  // Returns the portion of the list given the page and the number of items per page\n  getPage<T>(list: readonly T[], pageNumber: number, pageSize: number): T[] {\n    const start = pageNumber * pageSize\n    const end = (pageNumber + 1) * pageSize\n    return list.slice(start, end)\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-components-radio-group.mjs

@@ -9,10 +9,14 @@ import { QuangBaseComponent } from 'quang/components/shared';
 class QuangRadioGroupComponent extends QuangBaseComponent {
     constructor() {
         super(...arguments);
-        this.radioOptions = input.required(...(ngDevMode ? [{ debugName: "radioOptions" }] : /* istanbul ignore next */ []));
-        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-        this.radioPosition = input('left', ...(ngDevMode ? [{ debugName: "radioPosition" }] : /* istanbul ignore next */ []));
-        this._radioName = computed(() => this.name() || this.componentId(), ...(ngDevMode ? [{ debugName: "_radioName" }] : /* istanbul ignore next */ []));
+        this.radioOptions = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "radioOptions" }] : /* istanbul ignore next */ []));
+        this.name = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.radioPosition = input('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "radioPosition" }] : /* istanbul ignore next */ []));
+        this._radioName = computed(() => this.name() || this.componentId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_radioName" }] : /* istanbul ignore next */ []));
     }
     getOptionId(index) {
         return `${this.componentId()}-option-${index}`;
@@ -32,8 +36,8 @@ class QuangRadioGroupComponent extends QuangBaseComponent {
             return;
         this.onChangedHandler(option.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: QuangRadioGroupComponent, isStandalone: true, selector: "quang-radio-group", inputs: { radioOptions: { classPropertyName: "radioOptions", publicName: "radioOptions", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, radioPosition: { classPropertyName: "radioPosition", publicName: "radioPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: QuangRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: QuangRadioGroupComponent, isStandalone: true, selector: "quang-radio-group", inputs: { radioOptions: { classPropertyName: "radioOptions", publicName: "radioOptions", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, radioPosition: { classPropertyName: "radioPosition", publicName: "radioPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => QuangRadioGroupComponent),
@@ -41,7 +45,7 @@ class QuangRadioGroupComponent extends QuangBaseComponent {
             },
         ], usesInheritance: true, ngImport: i0, template: "<fieldset class=\"mb-3\">\n  @if (componentLabel()) {\n    <legend\n      [id]=\"componentId() + '-label'\"\n      class=\"form-label w-100 d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div\n          [overlayPosition]=\"helpTooltipPosition()\"\n          [quangTooltip]=\"helpMessage() | transloco\"\n          [showMethod]=\"showHelpTooltipMethod()\"\n          class=\"pointer\"\n        >\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </legend>\n  }\n\n  <div\n    [attr.aria-labelledby]=\"componentLabel() ? componentId() + '-label' : null\"\n    [attr.role]=\"'radiogroup'\"\n  >\n    @for (option of radioOptions(); track option.value ?? $index; let index = $index) {\n      <div\n        [class.form-check-reverse]=\"radioPosition() === 'right'\"\n        class=\"form-check text-start\"\n      >\n        <input\n          [attr.name]=\"_radioName()\"\n          [attr.required]=\"getIsRequiredControl()\"\n          [checked]=\"_value() === option.value\"\n          [class.is-invalid]=\"_showErrors()\"\n          [class.is-valid]=\"_showSuccess()\"\n          [disabled]=\"isOptionDisabled(option)\"\n          [id]=\"getOptionId(index)\"\n          [ngClass]=\"componentClass()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [value]=\"option.value ?? ''\"\n          (blur)=\"onBlurHandler()\"\n          (change)=\"onSelectOption(option)\"\n          class=\"form-check-input\"\n          type=\"radio\"\n        />\n\n        <label\n          [htmlFor]=\"getOptionId(index)\"\n          [ngClass]=\"{ 'cursor-pointer': !isOptionDisabled(option) }\"\n          class=\"form-check-label\"\n        >\n          @if (!option.renderer) {\n            {{ getOptionLabel(option) | transloco }}\n          }\n          <ng-container\n            [ngTemplateOutlet]=\"option.renderer ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: option, selected: _value() === option.value, index: index }\"\n          ></ng-container>\n        </label>\n      </div>\n    }\n  </div>\n\n  <div\n    [class.d-block]=\"_showSuccess()\"\n    class=\"valid-feedback\"\n  >\n    {{ successMessage() | transloco }}\n  </div>\n  <div\n    [class.d-block]=\"_showErrors()\"\n    class=\"invalid-feedback\"\n  >\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</fieldset>\n", styles: ["legend.form-label{font-size:var(--bs-body-font-size)}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangRadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: QuangRadioGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-radio-group', providers: [
                         {

package/fesm2022/quang-components-radio-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-components-radio-group.mjs","sources":["../../../projects/quang/components/radio-group/radio-group.component.ts","../../../projects/quang/components/radio-group/radio-group.component.html","../../../projects/quang/components/radio-group/quang-components-radio-group.ts"],"sourcesContent":["import { NgClass, NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, TemplateRef, computed, forwardRef, input } from '@angular/core'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type RadioPosition = 'left' | 'right'\n\nexport interface QuangRadioOptionTemplateContext<T extends string | number | null = string | number | null> {\n  $implicit: RadioOption<T>\n  selected: boolean\n  index: number\n}\n\nexport interface RadioOption<T extends string | number | null = string | number | null> {\n  value: T\n  label?: string\n  disabled?: boolean\n  renderer?: TemplateRef<QuangRadioOptionTemplateContext<T>>\n}\n\n@Component({\n  selector: 'quang-radio-group',\n  templateUrl: './radio-group.component.html',\n  styleUrl: './radio-group.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangRadioGroupComponent),\n      multi: true,\n    },\n  ],\n  imports: [TranslocoPipe, NgClass, NgTemplateOutlet, QuangTooltipDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class QuangRadioGroupComponent extends QuangBaseComponent<string | number | null> {\n  radioOptions = input.required<RadioOption[]>()\n\n  name = input<string>('')\n\n  radioPosition = input<RadioPosition>('left')\n\n  _radioName = computed(() => this.name() || this.componentId())\n\n  getOptionId(index: number): string {\n    return `${this.componentId()}-option-${index}`\n  }\n\n  isOptionDisabled(option: RadioOption): boolean {\n    return this._isDisabled() || this.isReadonly() || !!option.disabled\n  }\n\n  getOptionLabel(option: RadioOption): string {\n    if (option.label !== undefined) return option.label\n    if (option.value === null) return ''\n    return String(option.value)\n  }\n\n  onSelectOption(option: RadioOption): void {\n    if (this.isOptionDisabled(option)) return\n    this.onChangedHandler(option.value)\n  }\n}\n","<fieldset class=\"mb-3\">\n  @if (componentLabel()) {\n    <legend\n      [id]=\"componentId() + '-label'\"\n      class=\"form-label w-100 d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div\n          [overlayPosition]=\"helpTooltipPosition()\"\n          [quangTooltip]=\"helpMessage() | transloco\"\n          [showMethod]=\"showHelpTooltipMethod()\"\n          class=\"pointer\"\n        >\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </legend>\n  }\n\n  <div\n    [attr.aria-labelledby]=\"componentLabel() ? componentId() + '-label' : null\"\n    [attr.role]=\"'radiogroup'\"\n  >\n    @for (option of radioOptions(); track option.value ?? $index; let index = $index) {\n      <div\n        [class.form-check-reverse]=\"radioPosition() === 'right'\"\n        class=\"form-check text-start\"\n      >\n        <input\n          [attr.name]=\"_radioName()\"\n          [attr.required]=\"getIsRequiredControl()\"\n          [checked]=\"_value() === option.value\"\n          [class.is-invalid]=\"_showErrors()\"\n          [class.is-valid]=\"_showSuccess()\"\n          [disabled]=\"isOptionDisabled(option)\"\n          [id]=\"getOptionId(index)\"\n          [ngClass]=\"componentClass()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [value]=\"option.value ?? ''\"\n          (blur)=\"onBlurHandler()\"\n          (change)=\"onSelectOption(option)\"\n          class=\"form-check-input\"\n          type=\"radio\"\n        />\n\n        <label\n          [htmlFor]=\"getOptionId(index)\"\n          [ngClass]=\"{ 'cursor-pointer': !isOptionDisabled(option) }\"\n          class=\"form-check-label\"\n        >\n          @if (!option.renderer) {\n            {{ getOptionLabel(option) | transloco }}\n          }\n          <ng-container\n            [ngTemplateOutlet]=\"option.renderer ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: option, selected: _value() === option.value, index: index }\"\n          ></ng-container>\n        </label>\n      </div>\n    }\n  </div>\n\n  <div\n    [class.d-block]=\"_showSuccess()\"\n    class=\"valid-feedback\"\n  >\n    {{ successMessage() | transloco }}\n  </div>\n  <div\n    [class.d-block]=\"_showErrors()\"\n    class=\"invalid-feedback\"\n  >\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</fieldset>\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-radio-group.mjs","sources":["../../../projects/quang/components/radio-group/radio-group.component.ts","../../../projects/quang/components/radio-group/radio-group.component.html","../../../projects/quang/components/radio-group/quang-components-radio-group.ts"],"sourcesContent":["import { NgClass, NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, TemplateRef, computed, forwardRef, input } from '@angular/core'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type RadioPosition = 'left' | 'right'\n\nexport interface QuangRadioOptionTemplateContext<T extends string | number | null = string | number | null> {\n  $implicit: RadioOption<T>\n  selected: boolean\n  index: number\n}\n\nexport interface RadioOption<T extends string | number | null = string | number | null> {\n  value: T\n  label?: string\n  disabled?: boolean\n  renderer?: TemplateRef<QuangRadioOptionTemplateContext<T>>\n}\n\n@Component({\n  selector: 'quang-radio-group',\n  templateUrl: './radio-group.component.html',\n  styleUrl: './radio-group.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangRadioGroupComponent),\n      multi: true,\n    },\n  ],\n  imports: [TranslocoPipe, NgClass, NgTemplateOutlet, QuangTooltipDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class QuangRadioGroupComponent extends QuangBaseComponent<string | number | null> {\n  radioOptions = input.required<RadioOption[]>()\n\n  name = input<string>('')\n\n  radioPosition = input<RadioPosition>('left')\n\n  _radioName = computed(() => this.name() || this.componentId())\n\n  getOptionId(index: number): string {\n    return `${this.componentId()}-option-${index}`\n  }\n\n  isOptionDisabled(option: RadioOption): boolean {\n    return this._isDisabled() || this.isReadonly() || !!option.disabled\n  }\n\n  getOptionLabel(option: RadioOption): string {\n    if (option.label !== undefined) return option.label\n    if (option.value === null) return ''\n    return String(option.value)\n  }\n\n  onSelectOption(option: RadioOption): void {\n    if (this.isOptionDisabled(option)) return\n    this.onChangedHandler(option.value)\n  }\n}\n","<fieldset class=\"mb-3\">\n  @if (componentLabel()) {\n    <legend\n      [id]=\"componentId() + '-label'\"\n      class=\"form-label w-100 d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div\n          [overlayPosition]=\"helpTooltipPosition()\"\n          [quangTooltip]=\"helpMessage() | transloco\"\n          [showMethod]=\"showHelpTooltipMethod()\"\n          class=\"pointer\"\n        >\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </legend>\n  }\n\n  <div\n    [attr.aria-labelledby]=\"componentLabel() ? componentId() + '-label' : null\"\n    [attr.role]=\"'radiogroup'\"\n  >\n    @for (option of radioOptions(); track option.value ?? $index; let index = $index) {\n      <div\n        [class.form-check-reverse]=\"radioPosition() === 'right'\"\n        class=\"form-check text-start\"\n      >\n        <input\n          [attr.name]=\"_radioName()\"\n          [attr.required]=\"getIsRequiredControl()\"\n          [checked]=\"_value() === option.value\"\n          [class.is-invalid]=\"_showErrors()\"\n          [class.is-valid]=\"_showSuccess()\"\n          [disabled]=\"isOptionDisabled(option)\"\n          [id]=\"getOptionId(index)\"\n          [ngClass]=\"componentClass()\"\n          [tabIndex]=\"componentTabIndex()\"\n          [value]=\"option.value ?? ''\"\n          (blur)=\"onBlurHandler()\"\n          (change)=\"onSelectOption(option)\"\n          class=\"form-check-input\"\n          type=\"radio\"\n        />\n\n        <label\n          [htmlFor]=\"getOptionId(index)\"\n          [ngClass]=\"{ 'cursor-pointer': !isOptionDisabled(option) }\"\n          class=\"form-check-label\"\n        >\n          @if (!option.renderer) {\n            {{ getOptionLabel(option) | transloco }}\n          }\n          <ng-container\n            [ngTemplateOutlet]=\"option.renderer ?? null\"\n            [ngTemplateOutletContext]=\"{ $implicit: option, selected: _value() === option.value, index: index }\"\n          ></ng-container>\n        </label>\n      </div>\n    }\n  </div>\n\n  <div\n    [class.d-block]=\"_showSuccess()\"\n    class=\"valid-feedback\"\n  >\n    {{ successMessage() | transloco }}\n  </div>\n  <div\n    [class.d-block]=\"_showErrors()\"\n    class=\"invalid-feedback\"\n  >\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</fieldset>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-components-select.mjs

@@ -18,18 +18,24 @@ import { QuangBaseComponent, OptionListParentType, QuangOptionListComponent } fr
 class QuangSelectComponent extends QuangBaseComponent {
     constructor() {
         super();
-        this.selectionMode = input('single', ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+        this.selectionMode = input('single', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
         /**
          * Set the max height of the selection list before scrolling.
          * Default: 18rem
          * @default 18rem
          */
-        this.optionListMaxHeight = input('18rem', ...(ngDevMode ? [{ debugName: "optionListMaxHeight" }] : /* istanbul ignore next */ []));
-        this.selectOptions = input.required(...(ngDevMode ? [{ debugName: "selectOptions" }] : /* istanbul ignore next */ []));
-        this.scrollBehaviorOnOpen = input('smooth', ...(ngDevMode ? [{ debugName: "scrollBehaviorOnOpen" }] : /* istanbul ignore next */ []));
-        this.selectButton = viewChild('selectButton', ...(ngDevMode ? [{ debugName: "selectButton" }] : /* istanbul ignore next */ []));
+        this.optionListMaxHeight = input('18rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionListMaxHeight" }] : /* istanbul ignore next */ []));
+        this.selectOptions = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectOptions" }] : /* istanbul ignore next */ []));
+        this.scrollBehaviorOnOpen = input('smooth', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollBehaviorOnOpen" }] : /* istanbul ignore next */ []));
+        this.selectButton = viewChild('selectButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectButton" }] : /* istanbul ignore next */ []));
         /** Whether the option list is currently visible */
-        this._showOptions = signal(false, ...(ngDevMode ? [{ debugName: "_showOptions" }] : /* istanbul ignore next */ []));
+        this._showOptions = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_showOptions" }] : /* istanbul ignore next */ []));
         this._selectedItems = computed(() => {
             if (this._value() !== null) {
                 const targetValue = this._value();
@@ -41,10 +47,14 @@ class QuangSelectComponent extends QuangBaseComponent {
                 });
             }
             return null;
-        }, ...(ngDevMode ? [{ debugName: "_selectedItems" }] : /* istanbul ignore next */ []));
-        this.translateValue = input(true, ...(ngDevMode ? [{ debugName: "translateValue" }] : /* istanbul ignore next */ []));
-        this.nullOption = input(true, ...(ngDevMode ? [{ debugName: "nullOption" }] : /* istanbul ignore next */ []));
-        this.autoSelectSingleOption = input(false, ...(ngDevMode ? [{ debugName: "autoSelectSingleOption" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_selectedItems" }] : /* istanbul ignore next */ []));
+        this.translateValue = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "translateValue" }] : /* istanbul ignore next */ []));
+        this.nullOption = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nullOption" }] : /* istanbul ignore next */ []));
+        this.autoSelectSingleOption = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoSelectSingleOption" }] : /* istanbul ignore next */ []));
         this.ParentType = OptionListParentType.SELECT;
         combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])
             .pipe(takeUntilDestroyed(this.destroyRef), filter(([autoselect, options]) => autoselect === true && options.length === 1))
@@ -147,8 +157,8 @@ class QuangSelectComponent extends QuangBaseComponent {
     getOptionIndex(option) {
         return this.selectOptions().findIndex((x) => x.value === option.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: QuangSelectComponent, isStandalone: true, selector: "quang-select", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", 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 }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: QuangSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: QuangSelectComponent, isStandalone: true, selector: "quang-select", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", 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 }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => QuangSelectComponent),
@@ -160,7 +170,7 @@ class QuangSelectComponent extends QuangBaseComponent {
             },
         ], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div\n          [overlayPosition]=\"helpTooltipPosition()\"\n          [quangTooltip]=\"helpMessage() | transloco\"\n          [showMethod]=\"showHelpTooltipMethod()\"\n          class=\"pointer\"\n        >\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      (keydown)=\"onButtonKeydown($event)\"\n      #selectButton\n      aria-haspopup=\"listbox\"\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div\n        [class.multiple]=\"selectionMode() === 'multiple'\"\n        class=\"content\"\n      >\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val; let last = $last) {\n            <span class=\"selected-item\">\n              @if (val.renderer) {\n                <ng-container\n                  [ngTemplateOutlet]=\"val.renderer\"\n                  [ngTemplateOutletContext]=\"{ $implicit: val, selected: true, index: getOptionIndex(val) }\"\n                ></ng-container>\n              } @else {\n                {{ translateValue() ? (val.label | transloco) : val.label }}\n              }\n            </span>\n            @if (!last) {\n              <span class=\"separator\">, </span>\n            }\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        (escapePressed)=\"onEscapePressed()\"\n        (tabPressed)=\"onTabPressed($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}:host .pointer{cursor:pointer}:host .option-list-container{position:relative}.form-select{height:2.375rem;overflow:hidden;display:flex;align-items:center}.form-select:disabled{background-image:unset}.content{flex:1;min-width:0;text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.content.multiple{display:block;text-overflow:unset;overflow:hidden;white-space:nowrap;max-width:100%}.selected-item{display:inline-flex;align-items:center;max-height:100%;white-space:nowrap}.separator{white-space:pre}:host ::ng-deep .content .d-flex{display:inline-flex!important}:host ::ng-deep .content *{max-height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler", "escapePressed", "tabPressed"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: QuangSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: QuangSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-select', providers: [
                         {