@acorex/components 7.2.7 → 7.3.1

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

@@ -1,14 +1,16 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, Optional, Output, NgModule } from '@angular/core';
+import { Injectable, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, forwardRef, Optional, Inject, Output, NgModule } from '@angular/core';
 import * as i9 from '@acorex/components/common';
-import { AXEvent, AXPagedComponent } from '@acorex/components/common';
-import { AXInteractiveComponenetMixin, AXBaseValueComponentMixin } from '@acorex/components/mixin';
+import { AXEvent, MXInteractiveComponent, MXValueComponent, AXPagedComponent } from '@acorex/components/common';
+import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXTranslator } from '@acorex/core/translation';
-import * as i1 from '@acorex/components/number-box';
+import * as i1 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$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@acorex/components/button';
+import * as i2$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
@@ -16,7 +18,7 @@ import * as i3$1 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { isNumber } from 'lodash-es';
 
-class AXPagerPageChangedEvent extends AXEvent {
+class AXDataPagerChangedEvent extends AXEvent {
     constructor() {
         super(...arguments);
         this.range = { from: 0, to: 0 };
@@ -27,45 +29,50 @@ class AXPagerPageChangedEvent extends AXEvent {
         this.totalItems = 0;
     }
 }
-class AXPagerStateChangedEvent extends AXPagerPageChangedEvent {
+class AXDataPagerParentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerParentComponent }); }
 }
-class AXPagerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXPagerComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXPagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerParentComponent, decorators: [{
             type: Injectable
         }] });
-class AXDataPagerChild extends AXInteractiveComponenetMixin {
-    constructor(...args) {
-        super(...args);
+class AXDataPagerChild extends MXInteractiveComponent {
+    constructor() {
+        super();
+        this._parent = inject(AXDataPagerParentComponent);
+        this._unsubscriber = inject(AXUnsubscriber);
+        //
+        this._parent
+            .onChanged
+            .pipe(this._unsubscriber.takeUntilDestroy)
+            .subscribe((c) => {
+            this.applyParent();
+        });
+        //
+        this._parent
+            .onOptionChanged
+            .pipe(this._unsubscriber.takeUntilDestroy)
+            .subscribe((c) => {
+            this.applyParent();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerChild, deps: [{ token: Array }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerChild }); }
+    ngAfterViewInit() {
+        this.applyParent();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerChild, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerChild }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerChild, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerChild, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [Array]
-                }] }]; } });
+        }], ctorParameters: function () { return []; } });
 
 class AXDataPagerInfoComponent extends AXDataPagerChild {
-    constructor(elementRef, cdr, _parent) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this._parent = _parent;
+    constructor() {
+        super(...arguments);
         this.text = AXTranslator.get('datapager.info.text');
     }
-    onViewInit() {
-        this._updateText();
-        this._parent.onStateChanged.subscribe((c) => {
-            this._updateText();
-        });
-    }
-    _updateText() {
-        const info = this._parent.state;
+    applyParent() {
+        const info = this._parent.displayInfo;
         if ([info.range, info.range.from, info.totalItems].every((c) => c)) {
             this._textFormatted = this.text
                 .replace('[from]', info.range.from.toString())
@@ -78,111 +85,93 @@ class AXDataPagerInfoComponent extends AXDataPagerChild {
         else {
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerInfoComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXPagerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: { text: "text" }, host: { classAttribute: "ax-data-pager-info" }, providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent }], usesInheritance: true, ngImport: i0, template: `{{ _textFormatted }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: { text: "text" }, providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `{{ _textFormatted }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-info',
                     template: `{{ _textFormatted }}`,
-                    host: { class: 'ax-data-pager-info' },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent }],
+                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent }, AXUnsubscriber],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXPagerComponent, decorators: [{
-                    type: Inject,
-                    args: [AXPagerComponent]
-                }] }]; }, propDecorators: { text: [{
+        }], propDecorators: { text: [{
                 type: Input
             }] } });
 
 class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
-    constructor(elementRef, _parent, cdr) {
-        super(elementRef, cdr);
-        this._parent = _parent;
-        this.cdr = cdr;
+    constructor() {
+        super(...arguments);
         this._totalPages = 1;
         this._currentPage = 1;
     }
-    onViewInit() {
-        this._currentPage = this._parent.state.page;
-        this._totalPages = this._parent.state.totalPages;
-        this._parent.onStateChanged.subscribe((c) => {
-            this._currentPage = c.page;
-            this._totalPages = c.totalPages;
-            this.cdr.markForCheck();
-        });
+    applyParent() {
+        this._currentPage = this._parent.displayInfo.page;
+        this._totalPages = this._parent.displayInfo.totalPages;
+        this.cdr.markForCheck();
     }
     _handleValueChanged(e) {
         //TODO: debounceTime
-        this._parent.goToPage(e.value);
+        if (e.isUserInteraction) {
+            this._parent.goToPage(e.value);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerInputSelectorComponent, deps: [{ token: i0.ElementRef }, { token: AXPagerComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInputSelectorComponent }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerInputSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInputSelectorComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
     <ax-number-box
-      [value]="_currentPage"
       class="ax-sm"
+      [disabled]="_parent.disabled"
+      [readonly]="_parent.readonly"
+      [ngModel]="_currentPage"
       (onValueChanged)="_handleValueChanged($event)"
       [showSpinButtons]="false"
       [minValue]="1"
       [maxValue]="_totalPages"
-      allowNull="false"
     >
     </ax-number-box>
-  `, isInline: true, dependencies: [{ kind: "component", type: i1.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "size", "value", "state", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "name", "checked", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: i2.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "thousandsSeparator", "padDecimalZeros", "step", "decimals", "decimalStep", "showSpinButtons", "minValue", "maxValue"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerInputSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerInputSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-input-selector',
                     template: `
     <ax-number-box
-      [value]="_currentPage"
       class="ax-sm"
+      [disabled]="_parent.disabled"
+      [readonly]="_parent.readonly"
+      [ngModel]="_currentPage"
       (onValueChanged)="_handleValueChanged($event)"
       [showSpinButtons]="false"
       [minValue]="1"
       [maxValue]="_totalPages"
-      allowNull="false"
     >
     </ax-number-box>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInputSelectorComponent }],
+                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerInputSelectorComponent }, AXUnsubscriber],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: AXPagerComponent, decorators: [{
-                    type: Inject,
-                    args: [AXPagerComponent]
-                }] }, { type: i0.ChangeDetectorRef }]; } });
+        }] });
 
 class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
-    constructor(elementRef, cdr, _parent) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this._parent = _parent;
-    }
-    onViewInit() {
-        this._checkDisabled();
-        //
-        this._parent.onStateChanged.subscribe((c) => {
-            this._checkDisabled();
-        });
-    }
-    _checkDisabled() {
-        this.disabled = this._parent.state.page == this._parent.state.totalPages;
+    applyParent() {
+        this.disabled = (this._parent.displayInfo.page == this._parent.displayInfo.totalPages) || this._parent.disabled;
     }
     _emitOnLastPageClick(e) {
+        if (this._parent.readonly || this._parent.disabled)
+            return;
         this._parent.goLastPage();
     }
     _emitOnNextPageClick(e) {
+        if (this._parent.readonly || this._parent.disabled)
+            return;
         this._parent.goNextPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerNextButtonsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXPagerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerNextButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
     <ax-button
       [disabled]="disabled"
       look="blank"
@@ -190,8 +179,7 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
       title="Go to the next page"
       (onClick)="_emitOnNextPageClick($event)"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-chevron-left': rtl, 'ax-icon-chevron-right': !rtl }"></ax-icon>
-      <i></i>
+      <ax-icon  class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-chevron-left': rtl, 'ax-icon-chevron-right': !rtl }"></ax-icon>
     </ax-button>
     <ax-button
       [disabled]="disabled"
@@ -200,11 +188,11 @@ class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
       title="Go to the last page"
       (onClick)="_emitOnLastPageClick($event)"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-first-page': rtl, 'ax-icon-last-page': !rtl }"></ax-icon>
+      <ax-icon  class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-first-page': rtl, 'ax-icon-last-page': !rtl }"></ax-icon>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { 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: "16.1.5", ngImport: i0, type: AXDataPagerNextButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-next-buttons',
@@ -216,8 +204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
       title="Go to the next page"
       (onClick)="_emitOnNextPageClick($event)"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-chevron-left': rtl, 'ax-icon-chevron-right': !rtl }"></ax-icon>
-      <i></i>
+      <ax-icon  class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-chevron-left': rtl, 'ax-icon-chevron-right': !rtl }"></ax-icon>
     </ax-button>
     <ax-button
       [disabled]="disabled"
@@ -226,37 +213,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
       title="Go to the last page"
       (onClick)="_emitOnLastPageClick($event)"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-first-page': rtl, 'ax-icon-last-page': !rtl }"></ax-icon>
+      <ax-icon  class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-first-page': rtl, 'ax-icon-last-page': !rtl }"></ax-icon>
     </ax-button>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }],
+                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }, AXUnsubscriber],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXPagerComponent, decorators: [{
-                    type: Inject,
-                    args: [AXPagerComponent]
-                }] }]; } });
+        }] });
 
 class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
-    constructor(_elementRef, _cdr, _parent, _zone) {
-        super(_elementRef, _cdr);
-        this._parent = _parent;
-        this._zone = _zone;
+    constructor() {
+        super(...arguments);
         this._items = [];
         this._currentPage = 1;
         this._lastPage = 1;
         this._displayCount = 5;
     }
-    onViewInit() {
-        this._generateDisplayItems();
-        this._parent.onStateChanged.subscribe((c) => {
-            this._generateDisplayItems();
-        });
-    }
-    _generateDisplayItems() {
-        this._currentPage = this._parent.state.page;
-        this._lastPage = this._parent.state.totalPages;
+    applyParent() {
+        this._currentPage = this._parent.displayInfo.page;
+        this._lastPage = this._parent.displayInfo.totalPages;
         //
         this._items = [];
         const start = Math.max(0, (Math.ceil(this._currentPage / this._displayCount) - 1) * this._displayCount + 1);
@@ -281,109 +257,102 @@ class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
                 data: end + 1,
             });
         }
-        this._cdr.detectChanges();
+        this.cdr.detectChanges();
     }
     _handleOnItemClick(e) {
+        if (this._parent.readonly || this._parent.disabled)
+            return;
         this._parent.goToPage(Number(e.data));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerNumericSelectorComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXPagerComponent }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNumericSelectorComponent }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerNumericSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNumericSelectorComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
     <ax-button
-      [disabled]="_currentPage == 1"
+      [disabled]="_currentPage == 1 || _parent.disabled"
       look="blank"
       class="ax-sm"
       (onClick)="_handleOnItemClick({ data: 1 })"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-last-page': rtl, 'ax-icon-first-page': !rtl }"></ax-icon>
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-last-page': rtl, 'ax-icon-first-page': !rtl }"></ax-icon>
     </ax-button>
-    <ax-button-group look="blank" class="ax-sm">
+    <ax-button-group look="blank" color="default" class="ax-sm">
       <ax-button
         *ngFor="let item of _items"
         look="blank"
+        [disabled]="_parent.disabled"
         [selected]="_currentPage == item.data"
         class="ax-sm"
         [text]="item.text"
         (onClick)="_handleOnItemClick(item)"
       >
-        <ax-icon [class]="item.iconClass" *ngIf="item.iconClass"> </ax-icon>
+        <ax-icon class="ax-icon ax-text-xl"  [ngClass]="item.iconClass" *ngIf="item.iconClass" ></ax-icon>
       </ax-button>
     </ax-button-group>
     <ax-button
-      [disabled]="_currentPage == _lastPage"
+      [disabled]="_currentPage == _lastPage || _parent.disabled"
       look="blank"
       class="ax-sm"
       (onClick)="_handleOnItemClick({ data: _lastPage })"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-last-page': !rtl, 'ax-icon-first-page': rtl }"></ax-icon>
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-last-page': !rtl, 'ax-icon-first-page': rtl }"></ax-icon>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "tabIndex", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "selectionChange", "onItemClick"] }, { 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i2$1.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "tabIndex", "color", "look", "selection"], outputs: ["onBlur", "onFocus", "lookChange", "colorChange", "selectionChange", "onItemClick"] }, { 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: "16.1.5", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-numeric-selector',
                     template: `
     <ax-button
-      [disabled]="_currentPage == 1"
+      [disabled]="_currentPage == 1 || _parent.disabled"
       look="blank"
       class="ax-sm"
       (onClick)="_handleOnItemClick({ data: 1 })"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-last-page': rtl, 'ax-icon-first-page': !rtl }"></ax-icon>
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-last-page': rtl, 'ax-icon-first-page': !rtl }"></ax-icon>
     </ax-button>
-    <ax-button-group look="blank" class="ax-sm">
+    <ax-button-group look="blank" color="default" class="ax-sm">
       <ax-button
         *ngFor="let item of _items"
         look="blank"
+        [disabled]="_parent.disabled"
         [selected]="_currentPage == item.data"
         class="ax-sm"
         [text]="item.text"
         (onClick)="_handleOnItemClick(item)"
       >
-        <ax-icon [class]="item.iconClass" *ngIf="item.iconClass"> </ax-icon>
+        <ax-icon class="ax-icon ax-text-xl"  [ngClass]="item.iconClass" *ngIf="item.iconClass" ></ax-icon>
       </ax-button>
     </ax-button-group>
     <ax-button
-      [disabled]="_currentPage == _lastPage"
+      [disabled]="_currentPage == _lastPage || _parent.disabled"
       look="blank"
       class="ax-sm"
       (onClick)="_handleOnItemClick({ data: _lastPage })"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-last-page': !rtl, 'ax-icon-first-page': rtl }"></ax-icon>
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-last-page': !rtl, 'ax-icon-first-page': rtl }"></ax-icon>
     </ax-button>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNumericSelectorComponent }],
+                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNumericSelectorComponent }, AXUnsubscriber],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXPagerComponent, decorators: [{
-                    type: Inject,
-                    args: [AXPagerComponent]
-                }] }, { type: i0.NgZone }]; } });
+        }] });
 
 class AXDataPagerPageSizesComponent extends AXDataPagerChild {
-    constructor(elementRef, cdr, _parent) {
-        super(elementRef, cdr);
-        this._parent = _parent;
+    constructor() {
+        super(...arguments);
         //TODO: AXButtonItems type error
         this._items = [];
     }
-    onViewInit() {
-        this._generateDisplayItems();
-        //
-        this._parent.onStateChanged.subscribe((c) => {
-            this._generateDisplayItems();
-        });
-    }
     get sizes() {
         return this._sizes || [5, 10, 20, 50, 100];
     }
     set sizes(v) {
         this._sizes = v;
-        this._generateDisplayItems();
+        this.applyParent();
     }
-    _generateDisplayItems() {
-        this._size = this._parent.state.take;
+    applyParent() {
+        this._size = this._parent.displayInfo.take;
         this._items = this.sizes.map((s) => ({
             text: s.toString(),
             selected: s == this._size,
@@ -391,14 +360,16 @@ class AXDataPagerPageSizesComponent extends AXDataPagerChild {
                 size: s,
             },
         }));
-        this._cdr.detectChanges();
+        this.cdr.detectChanges();
     }
     _emitOnItemClick(e) {
+        if (this._parent.readonly || this._parent.disabled)
+            return;
         this._size = this._parent.size = Number(e.data.size);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerPageSizesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXPagerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: { sizes: "sizes" }, providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPageSizesComponent }], usesInheritance: true, ngImport: i0, template: `
-    <ax-button [text]="_size" look="blank" class="ax-sm">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerPageSizesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXDataPagerPageSizesComponent, 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" class="ax-sm" [disabled]="_parent.disabled">
       <ax-dropdown-panel (onItemClick)="_emitOnItemClick($event)">
         <ax-button-item
           *ngFor="let item of _items"
@@ -409,18 +380,18 @@ class AXDataPagerPageSizesComponent extends AXDataPagerChild {
         </ax-button-item>
       </ax-dropdown-panel>
       <ax-suffix>
-        <ax-icon icon="ax-icon-arrow-down"></ax-icon>
+        <ax-icon icon="ax-icon ax-icon-arrow-down"></ax-icon>
       </ax-suffix>
     </ax-button>
     <!-- <span >items per page</span> -->
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["text", "tooltip", "selected", "seperated", "name", "data", "color"], outputs: ["onClick"] }, { kind: "component", type: i3$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "target"], outputs: ["onOpened", "onClosed", "onItemClick"] }, { kind: "component", type: i3.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { 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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["text", "tooltip", "selected", "seperated", "name", "data", "color"], outputs: ["onClick"] }, { kind: "component", type: i3$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "target"], outputs: ["onOpened", "onClosed", "onItemClick"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-page-sizes',
                     template: `
-    <ax-button [text]="_size" look="blank" class="ax-sm">
+    <ax-button [text]="_size" color="default" look="blank" class="ax-sm" [disabled]="_parent.disabled">
       <ax-dropdown-panel (onItemClick)="_emitOnItemClick($event)">
         <ax-button-item
           *ngFor="let item of _items"
@@ -431,7 +402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
         </ax-button-item>
       </ax-dropdown-panel>
       <ax-suffix>
-        <ax-icon icon="ax-icon-arrow-down"></ax-icon>
+        <ax-icon icon="ax-icon ax-icon-arrow-down"></ax-icon>
       </ax-suffix>
     </ax-button>
     <!-- <span >items per page</span> -->
@@ -439,38 +410,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     outputs: [],
-                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPageSizesComponent }],
+                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPageSizesComponent }, AXUnsubscriber],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXPagerComponent, decorators: [{
-                    type: Inject,
-                    args: [AXPagerComponent]
-                }] }]; }, propDecorators: { sizes: [{
+        }], propDecorators: { sizes: [{
                 type: Input
             }] } });
 
 class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
-    constructor(elementRef, cdr, _parent) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this._parent = _parent;
-    }
-    onViewInit() {
-        this._checkDisabled();
-        this._parent.onStateChanged.subscribe((c) => {
-            this._checkDisabled();
-        });
-    }
-    _checkDisabled() {
-        this.disabled = this._parent.state.page == 1;
+    applyParent() {
+        this.disabled = this._parent.displayInfo.page == 1 || this._parent.disabled;
     }
     _emitOnFirstPageClick(e) {
+        if (this._parent.readonly || this._parent.disabled)
+            return;
         this._parent.goFirstPage();
     }
     _emitOnPrevPageClick(e) {
+        if (this._parent.readonly || this._parent.disabled)
+            return;
         this._parent.goPrevPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerPrevButtonsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXPagerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPrevButtonsComponent }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerPrevButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons", providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPrevButtonsComponent }, AXUnsubscriber], usesInheritance: true, ngImport: i0, template: `
     <ax-button
       [disabled]="disabled"
       look="blank"
@@ -478,7 +439,7 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
       title="Go to the last page"
       (onClick)="_emitOnFirstPageClick($event)"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-last-page': rtl, 'ax-icon-first-page': !rtl }"></ax-icon>
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-last-page': rtl, 'ax-icon-first-page': !rtl }"></ax-icon>
     </ax-button>
     <ax-button
       [disabled]="disabled"
@@ -487,11 +448,11 @@ class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
       title="Go to the next page"
       (onClick)="_emitOnPrevPageClick($event)"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-chevron-left': !rtl, 'ax-icon-chevron-right': rtl }"></ax-icon>
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-chevron-left': !rtl, 'ax-icon-chevron-right': rtl }"></ax-icon>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { 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: "16.1.5", ngImport: i0, type: AXDataPagerPrevButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-data-pager-prev-buttons',
@@ -503,7 +464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
       title="Go to the last page"
       (onClick)="_emitOnFirstPageClick($event)"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-last-page': rtl, 'ax-icon-first-page': !rtl }"></ax-icon>
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-last-page': rtl, 'ax-icon-first-page': !rtl }"></ax-icon>
     </ax-button>
     <ax-button
       [disabled]="disabled"
@@ -512,19 +473,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
       title="Go to the next page"
       (onClick)="_emitOnPrevPageClick($event)"
     >
-      <ax-icon [ngClass]="{ 'ax-icon-chevron-left': !rtl, 'ax-icon-chevron-right': rtl }"></ax-icon>
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-chevron-left': !rtl, 'ax-icon-chevron-right': rtl }"></ax-icon>
     </ax-button>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPrevButtonsComponent }],
+                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerPrevButtonsComponent }, AXUnsubscriber],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: AXPagerComponent, decorators: [{
-                    type: Inject,
-                    args: [AXPagerComponent]
-                }] }]; } });
+        }] });
 
-class AXDataPagerComponent extends AXBaseValueComponentMixin {
+class AXDataPagerComponent extends MXValueComponent {
     get size() {
         return this._size;
     }
@@ -534,9 +492,9 @@ class AXDataPagerComponent extends AXBaseValueComponentMixin {
             if (this._parent) {
                 this._parent.pageSize = v;
             }
-            const newPage = Math.ceil(this.state.range.from / this._size) || 1;
-            this.value = newPage;
-            this._emitStateChangedEvent();
+            const newPage = Math.ceil(this.displayInfo.range.from / this._size) || 1;
+            this.commitValue(newPage);
+            this._emitChangedEvent();
         }
     }
     get total() {
@@ -546,7 +504,7 @@ class AXDataPagerComponent extends AXBaseValueComponentMixin {
         const t = v && v > 0 ? v : 0;
         if (t != this._total) {
             this._total = t;
-            this._emitStateChangedEvent();
+            this._emitChangedEvent();
         }
     }
     get totalPages() {
@@ -555,18 +513,28 @@ class AXDataPagerComponent extends AXBaseValueComponentMixin {
     set totalPages(value) {
         this._totalPages = value;
     }
-    constructor(_elementRef, _cdr, _parent) {
-        super(_elementRef, _cdr);
-        this._elementRef = _elementRef;
-        this._cdr = _cdr;
+    get displayMode() {
+        return this._displayMode;
+    }
+    set displayMode(v) {
+        this.setOption({
+            name: 'displayMode',
+            value: v,
+            afterCallback: () => {
+                this._emitChangedEvent();
+            },
+        });
+    }
+    constructor(_parent) {
+        super();
         this._parent = _parent;
         this._size = 10;
         this._total = 0;
         this._totalPages = 0;
-        this.displayMode = 'full';
-        this.onStateChanged = new EventEmitter();
-    }
-    onInit() {
+        this.displayModeChange = new EventEmitter();
+        this._displayMode = 'full';
+        this.onChanged = new EventEmitter();
+        //
         if (this._parent) {
             this._parent.onPageChanged.subscribe((c) => {
                 this.size = this._parent.pageSize;
@@ -576,20 +544,20 @@ class AXDataPagerComponent extends AXBaseValueComponentMixin {
             this.size = this._parent.pageSize;
             this.total = this._parent.totalCount;
         }
-        this.goFirstPage();
     }
-    onViewInit() {
-        this._emitStateChangedEvent();
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this._emitChangedEvent();
     }
-    _onValueChanged(oldValue, newValue) {
-        this._emitStateChangedEvent();
+    internalValueChanged(value) {
+        this._emitChangedEvent();
     }
-    _getValue(value) {
+    internalGetValue(value) {
         if (!isNumber(value) || !value || this.totalPages == 0)
             return 1;
         return value > this.totalPages ? this.totalPages : value;
     }
-    get state() {
+    get displayInfo() {
         const skip = Math.max(0, (this.value - 1) * this.size);
         const result = {
             page: this.value,
@@ -604,18 +572,20 @@ class AXDataPagerComponent extends AXBaseValueComponentMixin {
         };
         return result;
     }
-    _emitStateChangedEvent() {
+    _emitChangedEvent() {
         this.totalPages = Math.ceil(this._total / this.size);
         //
-        this.onStateChanged.emit(Object.assign({
+        this.onChanged.emit(Object.assign({
             component: this,
-            htmlElement: this._elementRef.nativeElement,
-        }, this.state));
+            htmlElement: this.getHostElement(),
+        }, this.displayInfo));
         if (this.totalPages > 0)
             this._parent?.goToPage(this.value);
+        //
+        this.cdr.markForCheck();
     }
     goNextPage() {
-        this.goToPage(Math.min(++this.value, this.totalPages));
+        this.goToPage(Math.min(this.value + 1, this.totalPages));
     }
     goLastPage() {
         this.goToPage(this.totalPages);
@@ -624,20 +594,34 @@ class AXDataPagerComponent extends AXBaseValueComponentMixin {
         this.goToPage(1);
     }
     goPrevPage() {
-        this.goToPage(Math.max(--this.value, 1));
+        this.goToPage(Math.max(this.value - 1, 1));
     }
     goToPage(page) {
         if (page != this.value) {
-            this.value = page;
+            this.commitValue(page);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXPagedComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXDataPagerComponent, selector: "ax-data-pager", inputs: { value: "value", name: "name", size: "size", total: "total", displayMode: "displayMode" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onStateChanged: "onStateChanged" }, providers: [{ provide: AXPagerComponent, useExisting: AXDataPagerComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"displayMode\">\n    <ng-container *ngSwitchCase=\"'full'\">\n        <ax-prefix>\n            <ax-data-pager-numeric-selector>\n            </ax-data-pager-numeric-selector>\n            <ax-data-pager-page-sizes>\n            </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-suffix>\n            <ax-data-pager-info>\n            </ax-data-pager-info>\n        </ax-suffix>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'compact'\">\n        <ax-prefix>\n            <ax-data-pager-prev-buttons>\n            </ax-data-pager-prev-buttons>\n            <ax-data-pager-input-selector>\n            </ax-data-pager-input-selector>\n            <ax-data-pager-next-buttons>\n            </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix>\n            <ax-data-pager-info>\n            </ax-data-pager-info>\n        </ax-suffix>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n        <ng-content select=\"ax-prefix\"></ng-content>\n        <ng-content select=\"ax-suffix\"></ng-content>\n    </ng-container>\n</ng-container>\n\n", styles: ["ax-data-pager{width:100%;font-size:.875rem;padding:.5rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}ax-data-pager ax-button-group{border:0!important;border-radius:var(--ax-rounded-border-default)!important;display:flex;gap:.25rem}ax-data-pager ax-button-group ax-button{border:0!important;border-radius:var(--ax-rounded-border-default)!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{display:flex;gap:.5rem}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));padding:0 .5rem}ax-data-pager ax-data-pager-page-sizes ax-button ax-icon{font-size:1rem!important}ax-data-pager ax-prefix,ax-data-pager ax-suffic{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.AXDecoratorPrefixComponent, selector: "ax-prefix" }, { kind: "component", type: i3.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerComponent, deps: [{ token: AXPagedComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AXDataPagerComponent, selector: "ax-data-pager", inputs: { value: "value", name: "name", disabled: "disabled", readonly: "readonly", size: "size", total: "total", displayMode: "displayMode" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", disabledChange: "disabledChange", readonlyChange: "readonlyChange", displayModeChange: "displayModeChange", onChanged: "onChanged" }, providers: [
+            { provide: AXDataPagerParentComponent, useExisting: AXDataPagerComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXDataPagerComponent),
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"displayMode\">\n    <ng-container *ngSwitchCase=\"'full'\">\n        <ax-prefix>\n            <ax-data-pager-numeric-selector>\n            </ax-data-pager-numeric-selector>\n            <ax-data-pager-page-sizes>\n            </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-suffix>\n            <ax-data-pager-info>\n            </ax-data-pager-info>\n        </ax-suffix>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'compact'\">\n        <ax-prefix>\n            <ax-data-pager-prev-buttons>\n            </ax-data-pager-prev-buttons>\n            <ax-data-pager-input-selector>\n            </ax-data-pager-input-selector>\n            <ax-data-pager-next-buttons>\n            </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix>\n            <ax-data-pager-info>\n            </ax-data-pager-info>\n        </ax-suffix>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n        <ng-content select=\"ax-prefix\"></ng-content>\n        <ng-content select=\"ax-suffix\"></ng-content>\n    </ng-container>\n</ng-container>\n\n", styles: ["ax-data-pager{width:100%;font-size:.875rem;padding:.5rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}ax-data-pager ax-button-group{border:0!important;border-radius:var(--ax-rounded-border-default)!important;display:flex;gap:.25rem}ax-data-pager ax-button-group ax-button{border:0!important;border-radius:var(--ax-rounded-border-default)!important}ax-data-pager ax-data-pager-input-selector .ax-input{min-width:4rem!important;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{display:flex;gap:.5rem}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));padding:0 .5rem}ax-data-pager ax-data-pager-page-sizes ax-button ax-icon{font-size:1rem!important}ax-data-pager ax-prefix,ax-data-pager ax-suffix{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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" }, { 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: "16.1.5", ngImport: i0, type: AXDataPagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-data-pager', inputs: ['value', 'name'], outputs: ['valueChange', 'onValueChanged'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXPagerComponent, useExisting: AXDataPagerComponent }], template: "<ng-container [ngSwitch]=\"displayMode\">\n    <ng-container *ngSwitchCase=\"'full'\">\n        <ax-prefix>\n            <ax-data-pager-numeric-selector>\n            </ax-data-pager-numeric-selector>\n            <ax-data-pager-page-sizes>\n            </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-suffix>\n            <ax-data-pager-info>\n            </ax-data-pager-info>\n        </ax-suffix>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'compact'\">\n        <ax-prefix>\n            <ax-data-pager-prev-buttons>\n            </ax-data-pager-prev-buttons>\n            <ax-data-pager-input-selector>\n            </ax-data-pager-input-selector>\n            <ax-data-pager-next-buttons>\n            </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix>\n            <ax-data-pager-info>\n            </ax-data-pager-info>\n        </ax-suffix>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n        <ng-content select=\"ax-prefix\"></ng-content>\n        <ng-content select=\"ax-suffix\"></ng-content>\n    </ng-container>\n</ng-container>\n\n", styles: ["ax-data-pager{width:100%;font-size:.875rem;padding:.5rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}ax-data-pager ax-button-group{border:0!important;border-radius:var(--ax-rounded-border-default)!important;display:flex;gap:.25rem}ax-data-pager ax-button-group ax-button{border:0!important;border-radius:var(--ax-rounded-border-default)!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{display:flex;gap:.5rem}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));padding:0 .5rem}ax-data-pager ax-data-pager-page-sizes ax-button ax-icon{font-size:1rem!important}ax-data-pager ax-prefix,ax-data-pager ax-suffic{display:flex}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i9.AXPagedComponent, decorators: [{
+            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 },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXDataPagerComponent),
+                            multi: true
+                        }
+                    ], template: "<ng-container [ngSwitch]=\"displayMode\">\n    <ng-container *ngSwitchCase=\"'full'\">\n        <ax-prefix>\n            <ax-data-pager-numeric-selector>\n            </ax-data-pager-numeric-selector>\n            <ax-data-pager-page-sizes>\n            </ax-data-pager-page-sizes>\n        </ax-prefix>\n        <ax-suffix>\n            <ax-data-pager-info>\n            </ax-data-pager-info>\n        </ax-suffix>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'compact'\">\n        <ax-prefix>\n            <ax-data-pager-prev-buttons>\n            </ax-data-pager-prev-buttons>\n            <ax-data-pager-input-selector>\n            </ax-data-pager-input-selector>\n            <ax-data-pager-next-buttons>\n            </ax-data-pager-next-buttons>\n        </ax-prefix>\n        <ax-suffix>\n            <ax-data-pager-info>\n            </ax-data-pager-info>\n        </ax-suffix>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n        <ng-content select=\"ax-prefix\"></ng-content>\n        <ng-content select=\"ax-suffix\"></ng-content>\n    </ng-container>\n</ng-container>\n\n", styles: ["ax-data-pager{width:100%;font-size:.875rem;padding:.5rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}ax-data-pager ax-button-group{border:0!important;border-radius:var(--ax-rounded-border-default)!important;display:flex;gap:.25rem}ax-data-pager ax-button-group ax-button{border:0!important;border-radius:var(--ax-rounded-border-default)!important}ax-data-pager ax-data-pager-input-selector .ax-input{min-width:4rem!important;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{display:flex;gap:.5rem}ax-data-pager ax-data-pager-page-sizes ax-button{border-radius:var(--ax-rounded-border-default);border:1px solid;border-color:rgba(var(--ax-color-border-default));padding:0 .5rem}ax-data-pager ax-data-pager-page-sizes ax-button ax-icon{font-size:1rem!important}ax-data-pager ax-prefix,ax-data-pager ax-suffix{display:flex}\n"] }]
+        }], ctorParameters: function () { return [{ type: i9.AXPagedComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -646,9 +630,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Input
             }], total: [{
                 type: Input
+            }], displayModeChange: [{
+                type: Output
             }], displayMode: [{
                 type: Input
-            }], onStateChanged: [{
+            }], onChanged: [{
                 type: Output
             }] } });
 
@@ -661,25 +647,25 @@ const COMPONENT = [
     AXDataPagerInputSelectorComponent,
     AXDataPagerInfoComponent
 ];
-const MODULES = [CommonModule, AXButtonModule, AXNumberBoxModule, AXDropdownModule, AXDecoratorModule];
+const MODULES = [CommonModule, FormsModule, AXButtonModule, AXNumberBoxModule, AXDropdownModule, AXDecoratorModule];
 class AXDataPagerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerModule, declarations: [AXDataPagerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerModule, declarations: [AXDataPagerComponent,
             AXDataPagerNextButtonsComponent,
             AXDataPagerPrevButtonsComponent,
             AXDataPagerPageSizesComponent,
             AXDataPagerNumericSelectorComponent,
             AXDataPagerInputSelectorComponent,
-            AXDataPagerInfoComponent], imports: [CommonModule, AXButtonModule, AXNumberBoxModule, AXDropdownModule, AXDecoratorModule], exports: [AXDataPagerComponent,
+            AXDataPagerInfoComponent], imports: [CommonModule, FormsModule, AXButtonModule, AXNumberBoxModule, AXDropdownModule, AXDecoratorModule], exports: [AXDataPagerComponent,
             AXDataPagerNextButtonsComponent,
             AXDataPagerPrevButtonsComponent,
             AXDataPagerPageSizesComponent,
             AXDataPagerNumericSelectorComponent,
             AXDataPagerInputSelectorComponent,
             AXDataPagerInfoComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerModule, imports: [MODULES] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXDataPagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AXDataPagerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],
@@ -693,5 +679,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXDataPagerChild, AXDataPagerComponent, AXDataPagerInfoComponent, AXDataPagerInputSelectorComponent, AXDataPagerModule, AXDataPagerNextButtonsComponent, AXDataPagerNumericSelectorComponent, AXDataPagerPageSizesComponent, AXDataPagerPrevButtonsComponent, AXPagerComponent, AXPagerPageChangedEvent, AXPagerStateChangedEvent };
+export { AXDataPagerChangedEvent, AXDataPagerChild, AXDataPagerComponent, AXDataPagerInfoComponent, AXDataPagerInputSelectorComponent, AXDataPagerModule, AXDataPagerNextButtonsComponent, AXDataPagerNumericSelectorComponent, AXDataPagerPageSizesComponent, AXDataPagerParentComponent, AXDataPagerPrevButtonsComponent };
 //# sourceMappingURL=acorex-components-data-pager.mjs.map