@acorex/components 22.3.16 → 22.3.17

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

@@ -58,6 +58,12 @@ class AXDataPagerChild extends MXInteractiveComponent {
     async ngAfterViewInit() {
         await this.applyParent();
     }
+    /**
+     *  @ignore
+     */
+    isRtl() {
+        return this._localeService.isRtl();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerChild, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerChild }); }
 }
@@ -206,11 +212,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * @category Components
  */
 class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
+    constructor() {
+        super(...arguments);
+        this.disabledNextSingle = false;
+        this.disabledLastDouble = false;
+    }
     /**
      *  @ignore
      */
     async applyParent() {
-        this.disabled = this._parent.displayInfo.page == this._parent.displayInfo.totalPages || this._parent.disabled;
+        const { page, totalPages } = this._parent.displayInfo;
+        const parentDisabled = this._parent.disabled;
+        this.disabledNextSingle = page === totalPages || parentDisabled;
+        this.disabledLastDouble = this.isRtl()
+            ? page === 1 || parentDisabled
+            : page === totalPages || parentDisabled;
     }
     /**
      *  @ignore
@@ -218,7 +234,12 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
     _emitOnLastPageClick(e) {
         if (this._parent.readonly || this._parent.disabled)
             return;
-        this._parent.goLastPage();
+        if (this.isRtl()) {
+            this._parent.goFirstPage();
+        }
+        else {
+            this._parent.goLastPage();
+        }
     }
     /**
      *  @ignore
@@ -235,7 +256,7 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
             { provide: AXComponent, useExisting: AXDataPagerNextButtonsComponent },
         ], usesInheritance: true, ngImport: i0, template: `
     <ax-button
-      [disabled]="disabled"
+      [disabled]="disabledNextSingle"
       look="blank"
       class="ax-sm"
       title="Go to the next page"
@@ -244,7 +265,7 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
       <i class="ax-icon text-xl ax-data-pager-nav-icon ax-icon-chevron-right" aria-hidden="true"></i>
     </ax-button>
     <ax-button
-      [disabled]="disabled"
+      [disabled]="disabledLastDouble"
       look="blank"
       class="ax-sm"
       title="Go to the last page"
@@ -264,7 +285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     },
                     template: `
     <ax-button
-      [disabled]="disabled"
+      [disabled]="disabledNextSingle"
       look="blank"
       class="ax-sm"
       title="Go to the next page"
@@ -273,7 +294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
       <i class="ax-icon text-xl ax-data-pager-nav-icon ax-icon-chevron-right" aria-hidden="true"></i>
     </ax-button>
     <ax-button
-      [disabled]="disabled"
+      [disabled]="disabledLastDouble"
       look="blank"
       class="ax-sm"
       title="Go to the last page"
@@ -349,6 +370,34 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
         }
         this.cdr.markForCheck();
     }
+    /**
+     *  @ignore
+     */
+    _isLeadingDoubleDisabled() {
+        return this.isRtl() ? this._currentPage === this._lastPage : this._currentPage === 1;
+    }
+    /**
+     *  @ignore
+     */
+    _isTrailingDoubleDisabled() {
+        return this.isRtl() ? this._currentPage === 1 : this._currentPage === this._lastPage;
+    }
+    /**
+     *  @ignore
+     */
+    _onLeadingDoubleClick() {
+        if (this._parent.readonly || this._parent.disabled)
+            return;
+        this._parent.goToPage(this.isRtl() ? this._lastPage : 1);
+    }
+    /**
+     *  @ignore
+     */
+    _onTrailingDoubleClick() {
+        if (this._parent.readonly || this._parent.disabled)
+            return;
+        this._parent.goToPage(this.isRtl() ? 1 : this._lastPage);
+    }
     /**
      *  @ignore
      */
@@ -376,33 +425,35 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
         ], usesInheritance: true, ngImport: i0, template: `
     <ax-button
       class="ax-sm"
-      [disabled]="_currentPage === 1 || _parent.disabled || _parent.isLoading"
+      [disabled]="_isLeadingDoubleDisabled() || _parent.disabled || _parent.isLoading"
       look="blank"
-      (onClick)="_handleOnItemClick({ data: 1 })"
+      (onClick)="_onLeadingDoubleClick()"
     >
       <i class="ax-icon ax-data-pager-nav-icon ax-icon-chevron-double-left" aria-hidden="true"></i>
     </ax-button>
 
-    @for (item of _items; track $index) {
-      <ax-button
-        class="ax-data-pager-num-button"
-        [disabled]="_parent.disabled || _parent.isLoading"
-        [color]="_currentPage === item.data ? 'primary' : 'default'"
-        [look]="_currentPage === item.data ? 'solid' : 'blank'"
-        [text]="item.text"
-        (onClick)="_handleOnItemClick(item)"
-      >
-        @if (item.iconClass) {
-          <i class="ax-icon ax-data-pager-nav-icon" [ngClass]="item.iconClass" aria-hidden="true"></i>
-        }
-      </ax-button>
-    }
+    <div class="ax-data-pager-pages">
+      @for (item of _items; track $index) {
+        <ax-button
+          class="ax-data-pager-num-button"
+          [disabled]="_parent.disabled || _parent.isLoading"
+          [color]="_currentPage === item.data ? 'primary' : 'default'"
+          [look]="_currentPage === item.data ? 'solid' : 'blank'"
+          [text]="item.text"
+          (onClick)="_handleOnItemClick(item)"
+        >
+          @if (item.iconClass) {
+            <i class="ax-icon ax-data-pager-nav-icon" [ngClass]="item.iconClass" aria-hidden="true"></i>
+          }
+        </ax-button>
+      }
+    </div>
 
     <ax-button
       class="ax-sm"
-      [disabled]="_currentPage === _lastPage || _parent.disabled || _parent.isLoading"
+      [disabled]="_isTrailingDoubleDisabled() || _parent.disabled || _parent.isLoading"
       look="blank"
-      (onClick)="_handleOnItemClick({ data: _lastPage })"
+      (onClick)="_onTrailingDoubleClick()"
     >
       <i class="ax-icon ax-data-pager-nav-icon ax-icon-chevron-double-right" aria-hidden="true"></i>
     </ax-button>
@@ -419,33 +470,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     template: `
     <ax-button
       class="ax-sm"
-      [disabled]="_currentPage === 1 || _parent.disabled || _parent.isLoading"
+      [disabled]="_isLeadingDoubleDisabled() || _parent.disabled || _parent.isLoading"
       look="blank"
-      (onClick)="_handleOnItemClick({ data: 1 })"
+      (onClick)="_onLeadingDoubleClick()"
     >
       <i class="ax-icon ax-data-pager-nav-icon ax-icon-chevron-double-left" aria-hidden="true"></i>
     </ax-button>
 
-    @for (item of _items; track $index) {
-      <ax-button
-        class="ax-data-pager-num-button"
-        [disabled]="_parent.disabled || _parent.isLoading"
-        [color]="_currentPage === item.data ? 'primary' : 'default'"
-        [look]="_currentPage === item.data ? 'solid' : 'blank'"
-        [text]="item.text"
-        (onClick)="_handleOnItemClick(item)"
-      >
-        @if (item.iconClass) {
-          <i class="ax-icon ax-data-pager-nav-icon" [ngClass]="item.iconClass" aria-hidden="true"></i>
-        }
-      </ax-button>
-    }
+    <div class="ax-data-pager-pages">
+      @for (item of _items; track $index) {
+        <ax-button
+          class="ax-data-pager-num-button"
+          [disabled]="_parent.disabled || _parent.isLoading"
+          [color]="_currentPage === item.data ? 'primary' : 'default'"
+          [look]="_currentPage === item.data ? 'solid' : 'blank'"
+          [text]="item.text"
+          (onClick)="_handleOnItemClick(item)"
+        >
+          @if (item.iconClass) {
+            <i class="ax-icon ax-data-pager-nav-icon" [ngClass]="item.iconClass" aria-hidden="true"></i>
+          }
+        </ax-button>
+      }
+    </div>
 
     <ax-button
       class="ax-sm"
-      [disabled]="_currentPage === _lastPage || _parent.disabled || _parent.isLoading"
+      [disabled]="_isTrailingDoubleDisabled() || _parent.disabled || _parent.isLoading"
       look="blank"
-      (onClick)="_handleOnItemClick({ data: _lastPage })"
+      (onClick)="_onTrailingDoubleClick()"
     >
       <i class="ax-icon ax-data-pager-nav-icon ax-icon-chevron-double-right" aria-hidden="true"></i>
     </ax-button>
@@ -583,11 +636,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * @category Components
  */
 class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
+    constructor() {
+        super(...arguments);
+        this.disabledFirstDouble = false;
+        this.disabledPrevSingle = false;
+    }
     /**
      *  @ignore
      */
     async applyParent() {
-        this.disabled = this._parent.displayInfo.page == 1 || this._parent.disabled;
+        const { page, totalPages } = this._parent.displayInfo;
+        const parentDisabled = this._parent.disabled;
+        this.disabledFirstDouble = this.isRtl()
+            ? page === totalPages || parentDisabled
+            : page === 1 || parentDisabled;
+        this.disabledPrevSingle = page === 1 || parentDisabled;
     }
     /**
      *  @ignore
@@ -595,7 +658,12 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
     _emitOnFirstPageClick(e) {
         if (this._parent.readonly || this._parent.disabled)
             return;
-        this._parent.goFirstPage();
+        if (this.isRtl()) {
+            this._parent.goLastPage();
+        }
+        else {
+            this._parent.goFirstPage();
+        }
     }
     /**
      *  @ignore
@@ -612,7 +680,7 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
             { provide: AXComponent, useExisting: AXDataPagerPrevButtonsComponent },
         ], usesInheritance: true, ngImport: i0, template: `
     <ax-button
-      [disabled]="disabled"
+      [disabled]="disabledFirstDouble"
       look="blank"
       class="ax-sm"
       title="Go to the first page"
@@ -621,7 +689,7 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
       <i class="ax-icon text-xl ax-data-pager-nav-icon ax-icon-chevron-double-left" aria-hidden="true"></i>
     </ax-button>
     <ax-button
-      [disabled]="disabled"
+      [disabled]="disabledPrevSingle"
       look="blank"
       class="ax-sm"
       title="Go to the previous page"
@@ -641,7 +709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     },
                     template: `
     <ax-button
-      [disabled]="disabled"
+      [disabled]="disabledFirstDouble"
       look="blank"
       class="ax-sm"
       title="Go to the first page"
@@ -650,7 +718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
       <i class="ax-icon text-xl ax-data-pager-nav-icon ax-icon-chevron-double-left" aria-hidden="true"></i>
     </ax-button>
     <ax-button
-      [disabled]="disabled"
+      [disabled]="disabledPrevSingle"
       look="blank"
       class="ax-sm"
       title="Go to the previous page"
@@ -926,7 +994,7 @@ 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 ax-data-pager-nav-ltr\" dir=\"ltr\">\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 ax-data-pager-nav-ltr\" dir=\"ltr\">\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;@layer components{ax-data-pager .ax-data-pager-nav-ltr,ax-data-pager ax-data-pager-numeric-selector,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-next-buttons{direction:ltr}ax-data-pager .ax-data-pager-nav-icon{direction:ltr;unicode-bidi:isolate;display:inline-block}html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon{transform:none}html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon:before,html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon:after{transform:none}ax-data-pager{display:flex;width:100%;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);overflow-x:auto;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)}ax-data-pager ax-button-group{display:flex!important;gap:calc(var(--spacing, .25rem) * 4)!important;border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;padding:calc(var(--spacing, .25rem) * 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:.2}ax-data-pager ax-data-pager-numeric-selector{display:flex;flex-wrap:nowrap}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{display:flex;flex-wrap:nowrap}ax-data-pager ax-data-pager-info ax-text{margin-inline-end:.2;white-space:nowrap;color:rgba(var(--ax-sys-color-lightest-surface))}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | 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" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix ax-data-pager-nav-ltr\" dir=\"ltr\">\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 ax-data-pager-nav-ltr\" dir=\"ltr\">\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;@layer components{ax-data-pager .ax-data-pager-nav-ltr,ax-data-pager ax-data-pager-numeric-selector,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-next-buttons{direction:ltr}ax-data-pager .ax-data-pager-nav-icon{direction:ltr;unicode-bidi:isolate;display:inline-block}html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon.ax-icon-chevron-left,html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon.ax-icon-chevron-right{transform:scaleX(-1)}html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon.ax-icon-chevron-double-left,html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon.ax-icon-chevron-double-right{transform:none}html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon:before,html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon:after{transform:none}html[dir=rtl] ax-data-pager .ax-data-pager-pages{flex-direction:row-reverse}ax-data-pager{display:flex;width:100%;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);overflow-x:auto;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)}ax-data-pager ax-button-group{display:flex!important;gap:calc(var(--spacing, .25rem) * 4)!important;border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;padding:calc(var(--spacing, .25rem) * 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:.2}ax-data-pager ax-data-pager-numeric-selector{display:flex;flex-wrap:nowrap}ax-data-pager ax-data-pager-numeric-selector .ax-data-pager-pages{display:flex;flex-wrap:nowrap}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{display:flex;flex-wrap:nowrap}ax-data-pager ax-data-pager-info ax-text{margin-inline-end:.2;white-space:nowrap;color:rgba(var(--ax-sys-color-lightest-surface))}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | 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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXDataPagerComponent, decorators: [{
             type: Component,
@@ -946,7 +1014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         AXDataPagerPrevButtonsComponent,
                         AXDataPagerInputSelectorComponent,
                         AXDataPagerNextButtonsComponent,
-                    ], template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix ax-data-pager-nav-ltr\" dir=\"ltr\">\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 ax-data-pager-nav-ltr\" dir=\"ltr\">\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;@layer components{ax-data-pager .ax-data-pager-nav-ltr,ax-data-pager ax-data-pager-numeric-selector,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-next-buttons{direction:ltr}ax-data-pager .ax-data-pager-nav-icon{direction:ltr;unicode-bidi:isolate;display:inline-block}html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon{transform:none}html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon:before,html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon:after{transform:none}ax-data-pager{display:flex;width:100%;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);overflow-x:auto;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)}ax-data-pager ax-button-group{display:flex!important;gap:calc(var(--spacing, .25rem) * 4)!important;border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;padding:calc(var(--spacing, .25rem) * 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:.2}ax-data-pager ax-data-pager-numeric-selector{display:flex;flex-wrap:nowrap}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{display:flex;flex-wrap:nowrap}ax-data-pager ax-data-pager-info ax-text{margin-inline-end:.2;white-space:nowrap;color:rgba(var(--ax-sys-color-lightest-surface))}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix ax-data-pager-nav-ltr\" dir=\"ltr\">\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 ax-data-pager-nav-ltr\" dir=\"ltr\">\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;@layer components{ax-data-pager .ax-data-pager-nav-ltr,ax-data-pager ax-data-pager-numeric-selector,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-next-buttons{direction:ltr}ax-data-pager .ax-data-pager-nav-icon{direction:ltr;unicode-bidi:isolate;display:inline-block}html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon.ax-icon-chevron-left,html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon.ax-icon-chevron-right{transform:scaleX(-1)}html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon.ax-icon-chevron-double-left,html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon.ax-icon-chevron-double-right{transform:none}html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon:before,html[dir=rtl] ax-data-pager .ax-data-pager-nav-icon:after{transform:none}html[dir=rtl] ax-data-pager .ax-data-pager-pages{flex-direction:row-reverse}ax-data-pager{display:flex;width:100%;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);overflow-x:auto;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)}ax-data-pager ax-button-group{display:flex!important;gap:calc(var(--spacing, .25rem) * 4)!important;border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;padding:calc(var(--spacing, .25rem) * 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:.2}ax-data-pager ax-data-pager-numeric-selector{display:flex;flex-wrap:nowrap}ax-data-pager ax-data-pager-numeric-selector .ax-data-pager-pages{display:flex;flex-wrap:nowrap}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{display:flex;flex-wrap:nowrap}ax-data-pager ax-data-pager-info ax-text{margin-inline-end:.2;white-space:nowrap;color:rgba(var(--ax-sys-color-lightest-surface))}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { isLoading: [{
                 type: Input
             }], size: [{