@acorex/components 21.0.2-next.5 → 21.0.2-next.51

package/fesm2022/acorex-components-data-pager.mjs

@@ -1,7 +1,8 @@
 import { AXEvent, MXInteractiveComponent, AXComponent, MXValueComponent, AXPagedComponent } from '@acorex/cdk/common';
-import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
+import { AXLocaleService } from '@acorex/core/locale';
+import { AXUnsubscriber } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { Injectable, inject, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, afterNextRender, signal, EventEmitter, forwardRef, HostBinding, Output, NgModule } from '@angular/core';
+import { Injectable, inject, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, EventEmitter, forwardRef, HostBinding, Output, NgModule } from '@angular/core';
 import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXTranslationService, AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
 import { AsyncPipe, NgClass, CommonModule } from '@angular/common';
@@ -9,7 +10,6 @@ import { AXNumberBoxComponent, AXNumberBoxModule } from '@acorex/components/numb
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { AXButtonComponent, AXButtonItemListComponent, AXButtonItemComponent, AXButtonModule } from '@acorex/components/button';
-import { AXLocaleService } from '@acorex/core/locale';
 import { AXDropdownPanelComponent, AXDropdownModule } from '@acorex/components/dropdown';
 import { isNumber, isEqual, cloneDeep } from 'lodash-es';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
@@ -27,10 +27,10 @@ class AXDataPagerChangedEvent extends AXEvent {
     }
 }
 class AXDataPagerParentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerParentComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerParentComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerParentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerParentComponent, decorators: [{
             type: Injectable
         }] });
 class AXDataPagerChild extends MXInteractiveComponent {
@@ -41,14 +41,16 @@ class AXDataPagerChild extends MXInteractiveComponent {
         super();
         this._parent = inject(AXDataPagerParentComponent);
         this._unsubscriber = inject(AXUnsubscriber);
+        this._localeService = inject(AXLocaleService);
+        const scheduleApplyParent = () => {
+            queueMicrotask(() => void this.applyParent());
+        };
         //
-        this._parent.onChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe(async (c) => {
-            await this.applyParent();
-        });
+        this._parent.onChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe(() => scheduleApplyParent());
         //
-        this._parent.onOptionChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe(async (c) => {
-            await this.applyParent();
-        });
+        this._parent.onOptionChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe(() => scheduleApplyParent());
+        //
+        this._localeService.profileChanged$.pipe(this._unsubscriber.takeUntilDestroy).subscribe(() => scheduleApplyParent());
     }
     /**
      *  @ignore
@@ -56,10 +58,10 @@ class AXDataPagerChild extends MXInteractiveComponent {
     async ngAfterViewInit() {
         await this.applyParent();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerChild, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerChild }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerChild, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerChild }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerChild, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerChild, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -88,14 +90,14 @@ class AXDataPagerInfoComponent extends AXDataPagerChild {
             this.cdr.markForCheck();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXDataPagerInfoComponent, isStandalone: true, selector: "ax-data-pager-info", inputs: { text: "text" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXDataPagerInfoComponent, isStandalone: true, selector: "ax-data-pager-info", inputs: { text: "text" }, providers: [
             { provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataPagerInfoComponent },
         ], usesInheritance: true, ngImport: i0, template: `<ax-text> {{ _textFormatted | translate | async }}</ax-text>`, isInline: true, dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-info',
@@ -147,8 +149,8 @@ class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
             this._parent.goToPage(e.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerInputSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXDataPagerInputSelectorComponent, isStandalone: true, selector: "ax-data-pager-input-selector", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerInputSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXDataPagerInputSelectorComponent, isStandalone: true, selector: "ax-data-pager-input-selector", providers: [
             {
                 provide: AXDataPagerChild,
                 useExisting: AXDataPagerInputSelectorComponent,
@@ -169,7 +171,7 @@ class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
     </ax-number-box>
   `, isInline: true, dependencies: [{ kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerInputSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerInputSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-input-selector',
@@ -206,12 +208,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * @category Components
  */
 class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
-    /**
-     *  @ignore
-     */
-    ngOnInit() {
-        super.ngOnInit;
-        this.rtl = AXHtmlUtil.isRtl(this.getHostElement());
+    constructor() {
+        super(...arguments);
+        this.localeService = inject(AXLocaleService);
+        this.isRtl = this.localeService.isRtl;
     }
     /**
      *  @ignore
@@ -235,8 +235,8 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
             return;
         this._parent.goNextPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerNextButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXDataPagerNextButtonsComponent, isStandalone: true, selector: "ax-data-pager-next-buttons", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerNextButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXDataPagerNextButtonsComponent, isStandalone: true, selector: "ax-data-pager-next-buttons", providers: [
             { provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataPagerNextButtonsComponent },
@@ -249,10 +249,10 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
       (onClick)="_emitOnNextPageClick($event)"
     >
       <ax-icon
-        class="ax-icon ax-text-xl"
+        class="ax-icon text-xl"
         [ngClass]="{
-          'ax-icon-chevron-left': rtl,
-          'ax-icon-chevron-right': !rtl,
+          'ax-icon-chevron-left': isRtl(),
+          'ax-icon-chevron-right': !isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -264,13 +264,13 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
       (onClick)="_emitOnLastPageClick($event)"
     >
       <ax-icon
-        class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-left': rtl, 'ax-icon-chevron-double-right': !rtl }"
+        class="ax-icon text-xl"
+        [ngClass]="{ 'ax-icon-chevron-double-left': isRtl(), 'ax-icon-chevron-double-right': !isRtl() }"
       ></ax-icon>
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerNextButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-next-buttons',
@@ -283,10 +283,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       (onClick)="_emitOnNextPageClick($event)"
     >
       <ax-icon
-        class="ax-icon ax-text-xl"
+        class="ax-icon text-xl"
         [ngClass]="{
-          'ax-icon-chevron-left': rtl,
-          'ax-icon-chevron-right': !rtl,
+          'ax-icon-chevron-left': isRtl(),
+          'ax-icon-chevron-right': !isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -298,8 +298,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       (onClick)="_emitOnLastPageClick($event)"
     >
       <ax-icon
-        class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-left': rtl, 'ax-icon-chevron-double-right': !rtl }"
+        class="ax-icon text-xl"
+        [ngClass]="{ 'ax-icon-chevron-double-left': isRtl(), 'ax-icon-chevron-double-right': !isRtl() }"
       ></ax-icon>
     </ax-button>
   `,
@@ -320,28 +320,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * @category Components
  */
 class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
-    /**
-     *  @ignore
-     */
     constructor() {
-        super();
+        super(...arguments);
         this._items = [];
         this._currentPage = 1;
         this._lastPage = 1;
         this._loading = false;
         this.localeService = inject(AXLocaleService);
-        this.rtlstatus = computed(() => {
-            // console.log(this.localeService.activeProfile().i18nMeta?.rtl ?? false);
-            return this.localeService.activeProfile().i18nMeta?.rtl ?? false;
-        }, ...(ngDevMode ? [{ debugName: "rtlstatus" }] : []));
+        this.isRtl = this.localeService.isRtl;
         /**
          *  @ignore
          */
         this._displayCount = 5;
-        afterNextRender(() => {
-            this.rtl = AXHtmlUtil.isRtl(this.getHostElement());
-            this.cdr.detectChanges();
-        });
     }
     /**
      *  @ignore
@@ -363,7 +353,7 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
         // Add ellipsis button for previous pages if needed
         if (start > 1) {
             this._items.push({
-                iconClass: this.rtl ? 'ax-icon-chevron-right' : 'ax-icon-chevron-left',
+                iconClass: this.isRtl() ? 'ax-icon-chevron-right' : 'ax-icon-chevron-left',
                 data: start - 1,
             });
         }
@@ -377,11 +367,11 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
         // Add ellipsis button for next pages if needed
         if (end < this._lastPage) {
             this._items.push({
-                iconClass: this.rtl ? 'ax-icon-chevron-left' : 'ax-icon-chevron-right',
+                iconClass: this.isRtl() ? 'ax-icon-chevron-left' : 'ax-icon-chevron-right',
                 data: end + 1,
             });
         }
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
     }
     /**
      *  @ignore
@@ -397,8 +387,8 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
         // } else {
         //   this._parent.goToPage(Number(e.data));
         // }
-        const nextIcon = this.rtl ? 'ax-icon-chevron-left' : 'ax-icon-chevron-right';
-        const prevIcon = this.rtl ? 'ax-icon-chevron-right' : 'ax-icon-chevron-left';
+        const nextIcon = this.isRtl() ? 'ax-icon-chevron-left' : 'ax-icon-chevron-right';
+        const prevIcon = this.isRtl() ? 'ax-icon-chevron-right' : 'ax-icon-chevron-left';
         if (e.iconClass === nextIcon) {
             this._parent.goNextPage();
         }
@@ -409,8 +399,8 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
             this._parent.goToPage(Number(e.data));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerNumericSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXDataPagerNumericSelectorComponent, isStandalone: true, selector: "ax-data-pager-numeric-selector", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerNumericSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXDataPagerNumericSelectorComponent, isStandalone: true, selector: "ax-data-pager-numeric-selector", providers: [
             {
                 provide: AXDataPagerChild,
                 useExisting: AXDataPagerNumericSelectorComponent,
@@ -427,8 +417,8 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
       <ax-icon
         class="ax-icon"
         [ngClass]="{
-          'ax-icon-chevron-double-left': !rtl,
-          'ax-icon-chevron-double-right': rtl,
+          'ax-icon-chevron-double-left': !isRtl(),
+          'ax-icon-chevron-double-right': isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -457,14 +447,14 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
       <ax-icon
         class="ax-icon"
         [ngClass]="{
-          'ax-icon-chevron-double-left': rtl,
-          'ax-icon-chevron-double-right': !rtl,
+          'ax-icon-chevron-double-left': isRtl(),
+          'ax-icon-chevron-double-right': !isRtl(),
         }"
       ></ax-icon>
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-numeric-selector',
@@ -478,8 +468,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       <ax-icon
         class="ax-icon"
         [ngClass]="{
-          'ax-icon-chevron-double-left': !rtl,
-          'ax-icon-chevron-double-right': rtl,
+          'ax-icon-chevron-double-left': !isRtl(),
+          'ax-icon-chevron-double-right': isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -508,8 +498,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       <ax-icon
         class="ax-icon"
         [ngClass]="{
-          'ax-icon-chevron-double-left': rtl,
-          'ax-icon-chevron-double-right': !rtl,
+          'ax-icon-chevron-double-left': isRtl(),
+          'ax-icon-chevron-double-right': !isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -526,7 +516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     ],
                     imports: [AXButtonComponent, AXDecoratorIconComponent, NgClass],
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * Displays a button to select page sizes for data pagination.
@@ -569,7 +559,7 @@ class AXDataPagerPageSizesComponent extends AXDataPagerChild {
                 size: s,
             },
         }));
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
     }
     /**
      *  @ignore
@@ -578,14 +568,15 @@ class AXDataPagerPageSizesComponent extends AXDataPagerChild {
         if (this._parent.readonly || this._parent.disabled)
             return;
         this._size = this._parent.size = Number(e.data.size);
+        this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerPageSizesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXDataPagerPageSizesComponent, isStandalone: true, selector: "ax-data-pager-page-sizes", inputs: { sizes: "sizes" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerPageSizesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXDataPagerPageSizesComponent, isStandalone: true, selector: "ax-data-pager-page-sizes", inputs: { sizes: "sizes" }, providers: [
             { provide: AXDataPagerChild, useExisting: AXDataPagerPageSizesComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataPagerPageSizesComponent },
         ], usesInheritance: true, ngImport: i0, template: `
-    <ax-button [text]="_size" [disabled]="_parent.disabled">
+    <ax-button [text]="_size != null ? '' + _size : ''" [disabled]="_parent.disabled">
       <ax-dropdown-panel>
         <ax-button-item-list (onItemClick)="_emitOnItemClick($event)">
           @for (item of _items; track $index) {
@@ -601,12 +592,12 @@ class AXDataPagerPageSizesComponent extends AXDataPagerChild {
     <!-- <span >items per page</span> -->
   `, isInline: true, dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-page-sizes',
                     template: `
-    <ax-button [text]="_size" [disabled]="_parent.disabled">
+    <ax-button [text]="_size != null ? '' + _size : ''" [disabled]="_parent.disabled">
       <ax-dropdown-panel>
         <ax-button-item-list (onItemClick)="_emitOnItemClick($event)">
           @for (item of _items; track $index) {
@@ -648,12 +639,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * @category Components
  */
 class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
-    /**
-     *  @ignore
-     */
-    ngOnInit() {
-        super.ngOnInit;
-        this.rtl = AXHtmlUtil.isRtl(this.getHostElement());
+    constructor() {
+        super(...arguments);
+        this.localeService = inject(AXLocaleService);
+        this.isRtl = this.localeService.isRtl;
     }
     /**
      *  @ignore
@@ -677,8 +666,8 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
             return;
         this._parent.goPrevPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerPrevButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXDataPagerPrevButtonsComponent, isStandalone: true, selector: "ax-data-pager-prev-buttons", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerPrevButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXDataPagerPrevButtonsComponent, isStandalone: true, selector: "ax-data-pager-prev-buttons", providers: [
             { provide: AXDataPagerChild, useExisting: AXDataPagerPrevButtonsComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataPagerPrevButtonsComponent },
@@ -691,8 +680,8 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
       (onClick)="_emitOnFirstPageClick($event)"
     >
       <ax-icon
-        class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-right': rtl, 'ax-icon-chevron-double-left': !rtl }"
+        class="ax-icon text-xl"
+        [ngClass]="{ 'ax-icon-chevron-double-right': isRtl(), 'ax-icon-chevron-double-left': !isRtl() }"
       ></ax-icon>
     </ax-button>
     <ax-button
@@ -703,16 +692,16 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
       (onClick)="_emitOnPrevPageClick($event)"
     >
       <ax-icon
-        class="ax-icon ax-text-xl"
+        class="ax-icon text-xl"
         [ngClass]="{
-          'ax-icon-chevron-left': !rtl,
-          'ax-icon-chevron-right': rtl,
+          'ax-icon-chevron-left': !isRtl(),
+          'ax-icon-chevron-right': isRtl(),
         }"
       ></ax-icon>
     </ax-button>
   `, isInline: true, dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerPrevButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-prev-buttons',
@@ -725,8 +714,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       (onClick)="_emitOnFirstPageClick($event)"
     >
       <ax-icon
-        class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-right': rtl, 'ax-icon-chevron-double-left': !rtl }"
+        class="ax-icon text-xl"
+        [ngClass]="{ 'ax-icon-chevron-double-right': isRtl(), 'ax-icon-chevron-double-left': !isRtl() }"
       ></ax-icon>
     </ax-button>
     <ax-button
@@ -737,10 +726,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       (onClick)="_emitOnPrevPageClick($event)"
     >
       <ax-icon
-        class="ax-icon ax-text-xl"
+        class="ax-icon text-xl"
         [ngClass]="{
-          'ax-icon-chevron-left': !rtl,
-          'ax-icon-chevron-right': rtl,
+          'ax-icon-chevron-left': !isRtl(),
+          'ax-icon-chevron-right': isRtl(),
         }"
       ></ax-icon>
     </ax-button>
@@ -862,7 +851,7 @@ class AXDataPagerComponent extends MXValueComponent {
         /**
          *  @ignore
          */
-        this._isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
+        this._isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
         /**
          *  @ignore
          */
@@ -1003,8 +992,8 @@ class AXDataPagerComponent extends MXValueComponent {
     get __hostClass() {
         return `ax-sm`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXDataPagerComponent, isStandalone: true, selector: "ax-data-pager", inputs: { value: "value", name: "name", disabled: "disabled", readonly: "readonly", isLoading: "isLoading", size: "size", total: "total", displayMode: "displayMode" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", disabledChange: "disabledChange", readonlyChange: "readonlyChange", displayModeChange: "displayModeChange", onChanged: "onChanged" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXDataPagerComponent, isStandalone: true, selector: "ax-data-pager", inputs: { value: "value", name: "name", disabled: "disabled", readonly: "readonly", isLoading: "isLoading", size: "size", total: "total", displayMode: "displayMode" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", disabledChange: "disabledChange", readonlyChange: "readonlyChange", displayModeChange: "displayModeChange", onChanged: "onChanged" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXDataPagerParentComponent, useExisting: AXDataPagerComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1012,9 +1001,9 @@ class AXDataPagerComponent extends MXValueComponent {
                 multi: true,
             },
             { provide: AXComponent, useExisting: AXDataPagerComponent },
-        ], usesInheritance: true, ngImport: i0, template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix\">\n      <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n      <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n    </ax-prefix>\n    <ax-suffix class=\"ax-full-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @case ('compact') {\n    <ax-prefix class=\"ax-compact-prefix\">\n      <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n      <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n      <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n    </ax-prefix>\n    <ax-suffix class=\"ax-compact-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @default {\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  }\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading:initial;--tw-border-style:solid}}}@layer components{html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-first-page,html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-last-page{rotate:180deg}ax-data-pager{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);flex-wrap:nowrap;display:flex;overflow-x:auto}ax-data-pager ax-button-group{gap:calc(var(--spacing,.25rem) * 4)!important;border-style:var(--tw-border-style)!important;border-width:0!important;border-radius:0!important;display:flex!important}ax-data-pager ax-button-group ax-button-item{border-style:var(--tw-border-style)!important;padding:calc(var(--spacing,.25rem) * 0)!important;border-width:0!important;border-radius:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-style:var(--tw-border-style)!important;border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:calc(var(--spacing,.25rem) * 16)!important;max-width:calc(var(--spacing,.25rem) * 40)!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{margin-inline-end:calc(var(--spacing,.25rem) * 2)}:is(ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector) ax-skeleton{width:calc(var(--spacing,.25rem) * 28);border-radius:var(--ax-sys-border-radius)}ax-data-pager ax-data-pager-next-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-prev-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-numeric-selector .ax-data-pager-num-button{margin-inline:.2px}ax-data-pager ax-data-pager-numeric-selector{flex-wrap:nowrap;display:flex}ax-data-pager .ax-full-prefix,ax-data-pager .ax-full-suffix,ax-data-pager .ax-compact-prefix{display:flex}ax-data-pager .ax-compact-prefix ax-data-pager-next-buttons,ax-data-pager .ax-compact-prefix ax-data-pager-prev-buttons{flex-wrap:nowrap;display:flex}ax-data-pager ax-data-pager-info ax-text{white-space:nowrap;color:rgba(var(--ax-sys-color-lightest-surface));margin-inline-end:.2px}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "component", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix\">\n      <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n      <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n    </ax-prefix>\n    <ax-suffix class=\"ax-full-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @case ('compact') {\n    <ax-prefix class=\"ax-compact-prefix\">\n      <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n      <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n      <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n    </ax-prefix>\n    <ax-suffix class=\"ax-compact-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @default {\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  }\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading:initial;--tw-border-style:solid}}}@layer components{html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-first-page,html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-last-page{rotate:180deg}ax-data-pager{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);flex-wrap:nowrap;display:flex;overflow-x:auto}ax-data-pager ax-button-group{gap:calc(var(--spacing,.25rem) * 4)!important;border-style:var(--tw-border-style)!important;border-width:0!important;border-radius:0!important;display:flex!important}ax-data-pager ax-button-group ax-button-item{border-style:var(--tw-border-style)!important;border-width:0!important;border-radius:0!important;padding:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-style:var(--tw-border-style)!important;border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:calc(var(--spacing,.25rem) * 16)!important;max-width:calc(var(--spacing,.25rem) * 40)!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{margin-inline-end:calc(var(--spacing,.25rem) * 2)}:is(ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector) ax-skeleton{width:calc(var(--spacing,.25rem) * 28);border-radius:var(--ax-sys-border-radius)}ax-data-pager ax-data-pager-next-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-prev-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-numeric-selector .ax-data-pager-num-button{margin-inline:.2px}ax-data-pager ax-data-pager-numeric-selector{flex-wrap:nowrap;display:flex}ax-data-pager .ax-full-prefix,ax-data-pager .ax-full-suffix,ax-data-pager .ax-compact-prefix{display:flex}ax-data-pager .ax-compact-prefix ax-data-pager-next-buttons,ax-data-pager .ax-compact-prefix ax-data-pager-prev-buttons{flex-wrap:nowrap;display:flex}ax-data-pager ax-data-pager-info ax-text{white-space:nowrap;color:rgba(var(--ax-sys-color-lightest-surface));margin-inline-end:.2px}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "component", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-data-pager', inputs: ['value', 'name', 'disabled', 'readonly'], outputs: ['valueChange', 'onValueChanged', 'disabledChange', 'readonlyChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXDataPagerParentComponent, useExisting: AXDataPagerComponent },
@@ -1032,7 +1021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXDataPagerPrevButtonsComponent,
                         AXDataPagerInputSelectorComponent,
                         AXDataPagerNextButtonsComponent,
-                    ], template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix\">\n      <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n      <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n    </ax-prefix>\n    <ax-suffix class=\"ax-full-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @case ('compact') {\n    <ax-prefix class=\"ax-compact-prefix\">\n      <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n      <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n      <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n    </ax-prefix>\n    <ax-suffix class=\"ax-compact-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @default {\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  }\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading:initial;--tw-border-style:solid}}}@layer components{html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-first-page,html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-last-page{rotate:180deg}ax-data-pager{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);flex-wrap:nowrap;display:flex;overflow-x:auto}ax-data-pager ax-button-group{gap:calc(var(--spacing,.25rem) * 4)!important;border-style:var(--tw-border-style)!important;border-width:0!important;border-radius:0!important;display:flex!important}ax-data-pager ax-button-group ax-button-item{border-style:var(--tw-border-style)!important;padding:calc(var(--spacing,.25rem) * 0)!important;border-width:0!important;border-radius:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-style:var(--tw-border-style)!important;border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:calc(var(--spacing,.25rem) * 16)!important;max-width:calc(var(--spacing,.25rem) * 40)!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{margin-inline-end:calc(var(--spacing,.25rem) * 2)}:is(ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector) ax-skeleton{width:calc(var(--spacing,.25rem) * 28);border-radius:var(--ax-sys-border-radius)}ax-data-pager ax-data-pager-next-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-prev-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-numeric-selector .ax-data-pager-num-button{margin-inline:.2px}ax-data-pager ax-data-pager-numeric-selector{flex-wrap:nowrap;display:flex}ax-data-pager .ax-full-prefix,ax-data-pager .ax-full-suffix,ax-data-pager .ax-compact-prefix{display:flex}ax-data-pager .ax-compact-prefix ax-data-pager-next-buttons,ax-data-pager .ax-compact-prefix ax-data-pager-prev-buttons{flex-wrap:nowrap;display:flex}ax-data-pager ax-data-pager-info ax-text{white-space:nowrap;color:rgba(var(--ax-sys-color-lightest-surface));margin-inline-end:.2px}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix\">\n      <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n      <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n    </ax-prefix>\n    <ax-suffix class=\"ax-full-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @case ('compact') {\n    <ax-prefix class=\"ax-compact-prefix\">\n      <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n      <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n      <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n    </ax-prefix>\n    <ax-suffix class=\"ax-compact-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @default {\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  }\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading:initial;--tw-border-style:solid}}}@layer components{html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-first-page,html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-last-page{rotate:180deg}ax-data-pager{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;padding-inline:0;padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);flex-wrap:nowrap;display:flex;overflow-x:auto}ax-data-pager ax-button-group{gap:calc(var(--spacing,.25rem) * 4)!important;border-style:var(--tw-border-style)!important;border-width:0!important;border-radius:0!important;display:flex!important}ax-data-pager ax-button-group ax-button-item{border-style:var(--tw-border-style)!important;border-width:0!important;border-radius:0!important;padding:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-style:var(--tw-border-style)!important;border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:calc(var(--spacing,.25rem) * 16)!important;max-width:calc(var(--spacing,.25rem) * 40)!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{margin-inline-end:calc(var(--spacing,.25rem) * 2)}:is(ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector) ax-skeleton{width:calc(var(--spacing,.25rem) * 28);border-radius:var(--ax-sys-border-radius)}ax-data-pager ax-data-pager-next-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-prev-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-numeric-selector .ax-data-pager-num-button{margin-inline:.2px}ax-data-pager ax-data-pager-numeric-selector{flex-wrap:nowrap;display:flex}ax-data-pager .ax-full-prefix,ax-data-pager .ax-full-suffix,ax-data-pager .ax-compact-prefix{display:flex}ax-data-pager .ax-compact-prefix ax-data-pager-next-buttons,ax-data-pager .ax-compact-prefix ax-data-pager-prev-buttons{flex-wrap:nowrap;display:flex}ax-data-pager ax-data-pager-info ax-text{white-space:nowrap;color:rgba(var(--ax-sys-color-lightest-surface));margin-inline-end:.2px}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { isLoading: [{
                 type: Input
             }], size: [{
@@ -1071,8 +1060,8 @@ const MODULES = [
     AXSkeletonModule,
 ];
 class AXDataPagerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerModule, imports: [CommonModule,
             FormsModule,
             AXButtonModule,
             AXButtonGroupModule,
@@ -1093,9 +1082,9 @@ class AXDataPagerModule {
             AXDataPagerNumericSelectorComponent,
             AXDataPagerInputSelectorComponent,
             AXDataPagerInfoComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDataPagerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],