@acorex/components 19.10.0-next.1 → 19.10.0-next.11

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

@@ -9,18 +9,16 @@ import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i2 from '@acorex/components/number-box';
-import { AXNumberBoxModule } from '@acorex/components/number-box';
-import * as i1$2 from '@acorex/components/button';
+import * as i1$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i4 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
-import * as i2$1 from '@acorex/components/dropdown';
+import * as i2 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { isNumber, isEqual, cloneDeep } from 'lodash-es';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
+import { AXNumberBoxModule } from '@acorex/components/number-box';
 
 class AXDataPagerChangedEvent extends AXEvent {
     constructor() {
@@ -97,17 +95,17 @@ class AXDataPagerInfoComponent extends AXDataPagerChild {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataPagerInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXDataPagerInfoComponent, isStandalone: false, selector: "ax-data-pager-info", inputs: { text: "text" }, providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: ` <ax-text> {{ _textFormatted | translate | async }}</ax-text> `, isInline: true, dependencies: [{ kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXDataPagerInfoComponent, isStandalone: false, selector: "ax-data-pager-info", inputs: { text: "text" }, providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `<ax-text> {{ _textFormatted | translate | async }}</ax-text>`, isInline: true, dependencies: [{ kind: "component", type: i3.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: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataPagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-info',
-                    template: ` <ax-text> {{ _textFormatted | translate | async }}</ax-text> `,
+                    template: `<ax-text> {{ _textFormatted | translate | async }}</ax-text>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent }, AXUnsubscriber],
-                    standalone: false
+                    standalone: false,
                 }]
         }], propDecorators: { text: [{
                 type: Input
@@ -155,7 +153,7 @@ class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
             },
             AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: `
-    <ax-number-box
+    <!-- <ax-number-box
       class="ax-sm"
       [disabled]="_parent.disabled"
       [readonly]="_parent.readonly"
@@ -165,15 +163,15 @@ class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
       [minValue]="1"
       [maxValue]="_totalPages"
     >
-    </ax-number-box>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "changeOnScroll", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue", "class"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    </ax-number-box> -->
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataPagerInputSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-input-selector',
                     template: `
-    <ax-number-box
+    <!-- <ax-number-box
       class="ax-sm"
       [disabled]="_parent.disabled"
       [readonly]="_parent.readonly"
@@ -183,7 +181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       [minValue]="1"
       [maxValue]="_totalPages"
     >
-    </ax-number-box>
+    </ax-number-box> -->
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -194,7 +192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         },
                         AXUnsubscriber,
                     ],
-                    standalone: false
+                    standalone: false,
                 }]
         }] });
 
@@ -215,8 +213,7 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
      *  @ignore
      */
     applyParent() {
-        this.disabled =
-            this._parent.displayInfo.page == this._parent.displayInfo.totalPages || this._parent.disabled;
+        this.disabled = this._parent.displayInfo.page == this._parent.displayInfo.totalPages || this._parent.disabled;
     }
     /**
      *  @ignore
@@ -236,13 +233,7 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataPagerNextButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXDataPagerNextButtonsComponent, isStandalone: false, selector: "ax-data-pager-next-buttons", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
-    <ax-button
-      [disabled]="disabled"
-      look="blank"
-      class="ax-sm"
-      title="Go to the next page"
-      (onClick)="_emitOnNextPageClick($event)"
-    >
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the next page" (onClick)="_emitOnNextPageClick($event)">
       <ax-icon
         class="ax-icon ax-text-xl"
         [ngClass]="{
@@ -251,32 +242,17 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
         }"
       ></ax-icon>
     </ax-button>
-    <ax-button
-      [disabled]="disabled"
-      look="blank"
-      class="ax-sm"
-      title="Go to the last page"
-      (onClick)="_emitOnLastPageClick($event)"
-    >
-      <ax-icon
-        class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-left': rtl, 'ax-icon-chevron-double-right': !rtl }"
-      ></ax-icon>
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the last page" (onClick)="_emitOnLastPageClick($event)">
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-chevron-double-left': rtl, 'ax-icon-chevron-double-right': !rtl }"></ax-icon>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataPagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-next-buttons',
                     template: `
-    <ax-button
-      [disabled]="disabled"
-      look="blank"
-      class="ax-sm"
-      title="Go to the next page"
-      (onClick)="_emitOnNextPageClick($event)"
-    >
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the next page" (onClick)="_emitOnNextPageClick($event)">
       <ax-icon
         class="ax-icon ax-text-xl"
         [ngClass]="{
@@ -285,17 +261,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }"
       ></ax-icon>
     </ax-button>
-    <ax-button
-      [disabled]="disabled"
-      look="blank"
-      class="ax-sm"
-      title="Go to the last page"
-      (onClick)="_emitOnLastPageClick($event)"
-    >
-      <ax-icon
-        class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-left': rtl, 'ax-icon-chevron-double-right': !rtl }"
-      ></ax-icon>
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the last page" (onClick)="_emitOnLastPageClick($event)">
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-chevron-double-left': rtl, 'ax-icon-chevron-double-right': !rtl }"></ax-icon>
     </ax-button>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -378,12 +345,7 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
             },
             AXUnsubscriber,
         ], usesInheritance: true, ngImport: i0, template: `
-    <ax-button
-      class="ax-sm"
-      [disabled]="_currentPage === 1 || _parent.disabled"
-      look="blank"
-      (onClick)="_handleOnItemClick({ data: 1 })"
-    >
+    <ax-button class="ax-sm" [disabled]="_currentPage === 1 || _parent.disabled" look="blank" (onClick)="_handleOnItemClick({ data: 1 })">
       <ax-icon
         class="ax-icon"
         [ngClass]="{
@@ -396,9 +358,9 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
     @if (!_parent.isLoading) {
       @for (item of _items; track $index) {
         <ax-button
-          class="ax-sm"
+          class="ax-data-pager-num-button"
           [disabled]="_parent.disabled"
-          [color]="_currentPage === item.data ? 'primary' : 'ghost'"
+          [color]="_currentPage === item.data ? 'primary' : 'default'"
           [look]="_currentPage === item.data ? 'solid' : 'blank'"
           [text]="item.text"
           (onClick)="_handleOnItemClick(item)"
@@ -412,12 +374,7 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
       <ax-skeleton></ax-skeleton>
     }
 
-    <ax-button
-      class="ax-sm"
-      [disabled]="_currentPage === _lastPage || _parent.disabled"
-      look="blank"
-      (onClick)="_handleOnItemClick({ data: _lastPage })"
-    >
+    <ax-button class="ax-sm" [disabled]="_currentPage === _lastPage || _parent.disabled" look="blank" (onClick)="_handleOnItemClick({ data: _lastPage })">
       <ax-icon
         class="ax-icon"
         [ngClass]="{
@@ -426,19 +383,14 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
         }"
       ></ax-icon>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-numeric-selector',
                     template: `
-    <ax-button
-      class="ax-sm"
-      [disabled]="_currentPage === 1 || _parent.disabled"
-      look="blank"
-      (onClick)="_handleOnItemClick({ data: 1 })"
-    >
+    <ax-button class="ax-sm" [disabled]="_currentPage === 1 || _parent.disabled" look="blank" (onClick)="_handleOnItemClick({ data: 1 })">
       <ax-icon
         class="ax-icon"
         [ngClass]="{
@@ -451,9 +403,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     @if (!_parent.isLoading) {
       @for (item of _items; track $index) {
         <ax-button
-          class="ax-sm"
+          class="ax-data-pager-num-button"
           [disabled]="_parent.disabled"
-          [color]="_currentPage === item.data ? 'primary' : 'ghost'"
+          [color]="_currentPage === item.data ? 'primary' : 'default'"
           [look]="_currentPage === item.data ? 'solid' : 'blank'"
           [text]="item.text"
           (onClick)="_handleOnItemClick(item)"
@@ -467,12 +419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       <ax-skeleton></ax-skeleton>
     }
 
-    <ax-button
-      class="ax-sm"
-      [disabled]="_currentPage === _lastPage || _parent.disabled"
-      look="blank"
-      (onClick)="_handleOnItemClick({ data: _lastPage })"
-    >
+    <ax-button class="ax-sm" [disabled]="_currentPage === _lastPage || _parent.disabled" look="blank" (onClick)="_handleOnItemClick({ data: _lastPage })">
       <ax-icon
         class="ax-icon"
         [ngClass]="{
@@ -548,12 +495,11 @@ class AXDataPagerPageSizesComponent extends AXDataPagerChild {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataPagerPageSizesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXDataPagerPageSizesComponent, isStandalone: false, selector: "ax-data-pager-page-sizes", inputs: { sizes: "sizes" }, providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPageSizesComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
-    <ax-button [text]="_size" color="'default'" [look]="'blank'" [disabled]="_parent.disabled">
+    <ax-button [text]="_size" [disabled]="_parent.disabled">
       <ax-dropdown-panel>
         <ax-button-item-list (onItemClick)="_emitOnItemClick($event)">
           @for (item of _items; track $index) {
-            <ax-button-item [text]="item.text" [data]="item.data" [selected]="item.selected">
-            </ax-button-item>
+            <ax-button-item color="default" [text]="item.text" [data]="item.data" [selected]="item.selected"> </ax-button-item>
           }
         </ax-button-item-list>
       </ax-dropdown-panel>
@@ -562,19 +508,18 @@ class AXDataPagerPageSizesComponent extends AXDataPagerChild {
       </ax-suffix>
     </ax-button>
     <!-- <span >items per page</span> -->
-  `, isInline: true, dependencies: [{ kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i2$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-page-sizes',
                     template: `
-    <ax-button [text]="_size" color="'default'" [look]="'blank'" [disabled]="_parent.disabled">
+    <ax-button [text]="_size" [disabled]="_parent.disabled">
       <ax-dropdown-panel>
         <ax-button-item-list (onItemClick)="_emitOnItemClick($event)">
           @for (item of _items; track $index) {
-            <ax-button-item [text]="item.text" [data]="item.data" [selected]="item.selected">
-            </ax-button-item>
+            <ax-button-item color="default" [text]="item.text" [data]="item.data" [selected]="item.selected"> </ax-button-item>
           }
         </ax-button-item-list>
       </ax-dropdown-panel>
@@ -588,7 +533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     outputs: [],
                     providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPageSizesComponent }, AXUnsubscriber],
-                    standalone: false
+                    standalone: false,
                 }]
         }], propDecorators: { sizes: [{
                 type: Input
@@ -631,25 +576,10 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataPagerPrevButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXDataPagerPrevButtonsComponent, isStandalone: false, selector: "ax-data-pager-prev-buttons", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPrevButtonsComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
-    <ax-button
-      [disabled]="disabled"
-      look="blank"
-      class="ax-sm"
-      title="Go to the last page"
-      (onClick)="_emitOnFirstPageClick($event)"
-    >
-      <ax-icon
-        class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-right': rtl, 'ax-icon-chevron-double-left': !rtl }"
-      ></ax-icon>
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the last page" (onClick)="_emitOnFirstPageClick($event)">
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-chevron-double-right': rtl, 'ax-icon-chevron-double-left': !rtl }"></ax-icon>
     </ax-button>
-    <ax-button
-      [disabled]="disabled"
-      look="blank"
-      class="ax-sm"
-      title="Go to the next page"
-      (onClick)="_emitOnPrevPageClick($event)"
-    >
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the next page" (onClick)="_emitOnPrevPageClick($event)">
       <ax-icon
         class="ax-icon ax-text-xl"
         [ngClass]="{
@@ -658,32 +588,17 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
         }"
       ></ax-icon>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataPagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-prev-buttons',
                     template: `
-    <ax-button
-      [disabled]="disabled"
-      look="blank"
-      class="ax-sm"
-      title="Go to the last page"
-      (onClick)="_emitOnFirstPageClick($event)"
-    >
-      <ax-icon
-        class="ax-icon ax-text-xl"
-        [ngClass]="{ 'ax-icon-chevron-double-right': rtl, 'ax-icon-chevron-double-left': !rtl }"
-      ></ax-icon>
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the last page" (onClick)="_emitOnFirstPageClick($event)">
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-chevron-double-right': rtl, 'ax-icon-chevron-double-left': !rtl }"></ax-icon>
     </ax-button>
-    <ax-button
-      [disabled]="disabled"
-      look="blank"
-      class="ax-sm"
-      title="Go to the next page"
-      (onClick)="_emitOnPrevPageClick($event)"
-    >
+    <ax-button [disabled]="disabled" look="blank" class="ax-sm" title="Go to the next page" (onClick)="_emitOnPrevPageClick($event)">
       <ax-icon
         class="ax-icon ax-text-xl"
         [ngClass]="{
@@ -696,7 +611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPrevButtonsComponent }, AXUnsubscriber],
-                    standalone: false
+                    standalone: false,
                 }]
         }] });
 
@@ -950,7 +865,7 @@ class AXDataPagerComponent extends MXValueComponent {
                 useExisting: forwardRef(() => AXDataPagerComponent),
                 multi: true,
             },
-        ], 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: ["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{display:flex;flex-wrap:nowrap;width:100%;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem 0;font-size:.875rem;line-height:1.25rem;overflow-x:auto}ax-data-pager ax-button-group{display:flex!important;gap:1rem!important;border-radius:0!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-width:0px!important;padding:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:4rem!important;max-width:10rem!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:.5rem}ax-data-pager ax-data-pager-next-buttons ax-skeleton,ax-data-pager ax-data-pager-prev-buttons ax-skeleton,ax-data-pager ax-data-pager-numeric-selector ax-skeleton{width:100%;min-width:14rem;border-radius:var(--ax-rounded-border-default)}ax-data-pager ax-data-pager-numeric-selector{display:flex;flex-wrap:nowrap}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-pager .ax-full-prefix,ax-data-pager .ax-full-suffix{display:flex}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{color:rgb(var(--ax-color-neutral-400));white-space:nowrap}\n"], dependencies: [{ kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }], 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: ["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{display:flex;flex-wrap:nowrap;width:100%;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem 0;font-size:.875rem;line-height:1.25rem;overflow-x:auto}ax-data-pager ax-button-group{display:flex!important;gap:1rem!important;border-radius:0!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-width:0px!important;padding:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:4rem!important;max-width:10rem!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:.5rem}ax-data-pager ax-data-pager-next-buttons ax-skeleton,ax-data-pager ax-data-pager-prev-buttons ax-skeleton,ax-data-pager ax-data-pager-numeric-selector ax-skeleton{width:7rem;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:.2rem}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{display:flex}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{color:rgb(var(--ax-sys-color-ghost-surface));white-space:nowrap;margin-inline-end:.2rem}\n"], dependencies: [{ kind: "component", type: i3.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: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }, { kind: "component", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXDataPagerComponent, decorators: [{
             type: Component,
@@ -961,7 +876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             useExisting: forwardRef(() => AXDataPagerComponent),
                             multi: true,
                         },
-                    ], standalone: false, 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: ["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{display:flex;flex-wrap:nowrap;width:100%;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem 0;font-size:.875rem;line-height:1.25rem;overflow-x:auto}ax-data-pager ax-button-group{display:flex!important;gap:1rem!important;border-radius:0!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-width:0px!important;padding:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:4rem!important;max-width:10rem!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:.5rem}ax-data-pager ax-data-pager-next-buttons ax-skeleton,ax-data-pager ax-data-pager-prev-buttons ax-skeleton,ax-data-pager ax-data-pager-numeric-selector ax-skeleton{width:100%;min-width:14rem;border-radius:var(--ax-rounded-border-default)}ax-data-pager ax-data-pager-numeric-selector{display:flex;flex-wrap:nowrap}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-data-pager .ax-full-prefix,ax-data-pager .ax-full-suffix{display:flex}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{color:rgb(var(--ax-color-neutral-400));white-space:nowrap}\n"] }]
+                    ], standalone: false, 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: ["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{display:flex;flex-wrap:nowrap;width:100%;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem 0;font-size:.875rem;line-height:1.25rem;overflow-x:auto}ax-data-pager ax-button-group{display:flex!important;gap:1rem!important;border-radius:0!important;border-width:0px!important}ax-data-pager ax-button-group ax-button-item{border-radius:0!important;border-width:0px!important;padding:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:4rem!important;max-width:10rem!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:.5rem}ax-data-pager ax-data-pager-next-buttons ax-skeleton,ax-data-pager ax-data-pager-prev-buttons ax-skeleton,ax-data-pager ax-data-pager-numeric-selector ax-skeleton{width:7rem;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:.2rem}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{display:flex}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{color:rgb(var(--ax-sys-color-ghost-surface));white-space:nowrap;margin-inline-end:.2rem}\n"] }]
         }], ctorParameters: () => [{ type: i8.AXPagedComponent, decorators: [{
                     type: Optional
                 }, {