@acorex/components 16.0.2 → 17.0.1

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

@@ -0,0 +1,758 @@
+import * as i8 from '@acorex/components/common';
+import { AXEvent, MXInteractiveComponent, MXValueComponent, AXPagedComponent } from '@acorex/components/common';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import * as i0 from '@angular/core';
+import { Injectable, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, forwardRef, Optional, Inject, Output, NgModule } from '@angular/core';
+import * as i2 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+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$1 from '@acorex/components/number-box';
+import { AXNumberBoxModule } from '@acorex/components/number-box';
+import * as i1$2 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i2$2 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { isNumber } from 'lodash-es';
+import { AXButtonGroupModule } from '@acorex/components/button-group';
+
+class AXDataPagerChangedEvent extends AXEvent {
+    constructor() {
+        super(...arguments);
+        this.range = { from: 0, to: 0 };
+        this.page = 0;
+        this.skip = 0;
+        this.take = 0;
+        this.totalPages = 0;
+        this.totalItems = 0;
+    }
+}
+class AXDataPagerParentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerParentComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerParentComponent, decorators: [{
+            type: Injectable
+        }] });
+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();
+        });
+    }
+    ngAfterViewInit() {
+        this.applyParent();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerChild, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerChild }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerChild, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class AXDataPagerInfoComponent extends AXDataPagerChild {
+    constructor() {
+        super(...arguments);
+        this.translateService = inject(AXTranslationService);
+    }
+    applyParent() {
+        const info = this._parent.displayInfo;
+        if ([info.range, info.range.from, info.totalItems].every((c) => c)) {
+            this._textFormatted = this.translateService
+                .translateSync(this.text ?? 'datapager.info.text')
+                .replace('[from]', info.range.from.toString())
+                .replace('[to]', info.range.to.toString())
+                .replace('[totalItems]', info.totalItems.toString())
+                .replace('[page]', info.page.toString())
+                .replace('[totalPages]', info.totalPages.toString());
+            this.cdr.markForCheck();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: { text: "text" }, providers: [
+            { provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent },
+            AXUnsubscriber,
+        ], usesInheritance: true, ngImport: i0, template: `{{ _textFormatted | translate | async }}`, isInline: true, dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerInfoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-data-pager-info',
+                    template: `{{ _textFormatted | translate | async }}`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [
+                        { provide: AXDataPagerChild, useExisting: AXDataPagerInfoComponent },
+                        AXUnsubscriber,
+                    ],
+                }]
+        }], propDecorators: { text: [{
+                type: Input
+            }] } });
+
+class AXDataPagerInputSelectorComponent extends AXDataPagerChild {
+    constructor() {
+        super(...arguments);
+        this._totalPages = 1;
+        this._currentPage = 1;
+    }
+    applyParent() {
+        this._currentPage = this._parent.displayInfo.page;
+        this._totalPages = this._parent.displayInfo.totalPages;
+        this.cdr.markForCheck();
+    }
+    _handleValueChanged(e) {
+        //TODO: debounceTime
+        if (e.isUserInteraction) {
+            this._parent.goToPage(e.value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerInputSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector", providers: [
+            {
+                provide: AXDataPagerChild,
+                useExisting: AXDataPagerInputSelectorComponent,
+            },
+            AXUnsubscriber,
+        ], usesInheritance: true, ngImport: i0, template: `
+    <ax-number-box
+      class="ax-sm"
+      [disabled]="_parent.disabled"
+      [readonly]="_parent.readonly"
+      [ngModel]="_currentPage"
+      (onValueChanged)="_handleValueChanged($event)"
+      [showSpinButtons]="false"
+      [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$1.AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerInputSelectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-data-pager-input-selector',
+                    template: `
+    <ax-number-box
+      class="ax-sm"
+      [disabled]="_parent.disabled"
+      [readonly]="_parent.readonly"
+      [ngModel]="_currentPage"
+      (onValueChanged)="_handleValueChanged($event)"
+      [showSpinButtons]="false"
+      [minValue]="1"
+      [maxValue]="_totalPages"
+    >
+    </ax-number-box>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [
+                        {
+                            provide: AXDataPagerChild,
+                            useExisting: AXDataPagerInputSelectorComponent,
+                        },
+                        AXUnsubscriber,
+                    ],
+                }]
+        }] });
+
+class AXDataPagerNextButtonsComponent extends AXDataPagerChild {
+    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: "17.3.2", ngImport: i0, type: AXDataPagerNextButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", 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" class="ax-sm" title="Go to the next page" (onClick)="_emitOnNextPageClick($event)">
+      <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" 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-first-page': rtl, 'ax-icon-last-page': !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"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { 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: "17.3.2", 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-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" 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-first-page': rtl, 'ax-icon-last-page': !rtl }"></ax-icon>
+    </ax-button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [{ provide: AXDataPagerChild, useExisting: AXDataPagerNextButtonsComponent }, AXUnsubscriber],
+                }]
+        }] });
+
+class AXDataPagerNumericSelectorComponent extends AXDataPagerChild {
+    constructor() {
+        super(...arguments);
+        this._items = [];
+        this._currentPage = 1;
+        this._lastPage = 1;
+        this._displayCount = 5;
+    }
+    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);
+        const end = Math.min(start + this._displayCount - 1, this._lastPage);
+        //
+        if (start > this._displayCount) {
+            this._items.push({
+                iconClass: 'ax-icon-more-horizontal',
+                data: start - 1,
+            });
+        }
+        //
+        for (let i = start; i <= end; i++) {
+            this._items.push({
+                text: i.toString(),
+                data: i,
+            });
+        }
+        if (end < this._lastPage) {
+            this._items.push({
+                iconClass: 'ax-icon-more-horizontal',
+                data: end + 1,
+            });
+        }
+        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: "17.3.2", ngImport: i0, type: AXDataPagerNumericSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector", providers: [
+            {
+                provide: AXDataPagerChild,
+                useExisting: AXDataPagerNumericSelectorComponent,
+            },
+            AXUnsubscriber,
+        ], usesInheritance: true, ngImport: i0, template: `
+    <ax-button [disabled]="_currentPage == 1 || _parent.disabled" look="blank" class="ax-sm" (onClick)="_handleOnItemClick({ data: 1 })">
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-last-page': rtl, 'ax-icon-first-page': !rtl }"></ax-icon>
+    </ax-button>
+    @for (item of _items; track $index) {
+      <ax-button
+        class="ax-sm"
+        [disabled]="_parent.disabled"
+        [color]="_currentPage == item.data ? 'primary' : 'solid'"
+        [look]="_currentPage == item.data ? 'solid' : 'blank'"
+        [text]="item.text"
+        (onClick)="_handleOnItemClick(item)"
+      >
+        @if (item.iconClass) {
+          <ax-icon class="ax-icon ax-text-xl" [ngClass]="item.iconClass"></ax-icon>
+        }
+      </ax-button>
+    }
+
+    <ax-button
+      [disabled]="_currentPage == _lastPage || _parent.disabled"
+      look="blank"
+      class="ax-sm"
+      (onClick)="_handleOnItemClick({ data: _lastPage })"
+    >
+      <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.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"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { 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: "17.3.2", ngImport: i0, type: AXDataPagerNumericSelectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-data-pager-numeric-selector',
+                    template: `
+    <ax-button [disabled]="_currentPage == 1 || _parent.disabled" look="blank" class="ax-sm" (onClick)="_handleOnItemClick({ data: 1 })">
+      <ax-icon class="ax-icon ax-text-xl" [ngClass]="{ 'ax-icon-last-page': rtl, 'ax-icon-first-page': !rtl }"></ax-icon>
+    </ax-button>
+    @for (item of _items; track $index) {
+      <ax-button
+        class="ax-sm"
+        [disabled]="_parent.disabled"
+        [color]="_currentPage == item.data ? 'primary' : 'solid'"
+        [look]="_currentPage == item.data ? 'solid' : 'blank'"
+        [text]="item.text"
+        (onClick)="_handleOnItemClick(item)"
+      >
+        @if (item.iconClass) {
+          <ax-icon class="ax-icon ax-text-xl" [ngClass]="item.iconClass"></ax-icon>
+        }
+      </ax-button>
+    }
+
+    <ax-button
+      [disabled]="_currentPage == _lastPage || _parent.disabled"
+      look="blank"
+      class="ax-sm"
+      (onClick)="_handleOnItemClick({ data: _lastPage })"
+    >
+      <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,
+                        },
+                        AXUnsubscriber,
+                    ],
+                }]
+        }] });
+
+class AXDataPagerPageSizesComponent extends AXDataPagerChild {
+    constructor() {
+        super(...arguments);
+        //TODO: AXButtonItems type error
+        this._items = [];
+    }
+    get sizes() {
+        return this._sizes || [5, 10, 20, 50, 100];
+    }
+    set sizes(v) {
+        this._sizes = v;
+        this.applyParent();
+    }
+    applyParent() {
+        this._size = this._parent.displayInfo.take;
+        this._items = this.sizes.map((s) => ({
+            text: s.toString(),
+            selected: s == this._size,
+            data: {
+                size: s,
+            },
+        }));
+        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: "17.3.2", ngImport: i0, type: AXDataPagerPageSizesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", 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>
+        <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-list>
+      </ax-dropdown-panel>
+      <ax-suffix>
+        <ax-icon icon="ax-icon ax-icon-solid ax-icon-arrow-down"></ax-icon>
+      </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"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { 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$2.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerPageSizesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-data-pager-page-sizes',
+                    template: `
+    <ax-button
+      [text]="_size"
+      [color]="'default'"
+      [look]="'blank'"
+      class="ax-sm"
+      [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-list>
+      </ax-dropdown-panel>
+      <ax-suffix>
+        <ax-icon icon="ax-icon ax-icon-solid ax-icon-arrow-down"></ax-icon>
+      </ax-suffix>
+    </ax-button>
+    <!-- <span >items per page</span> -->
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    outputs: [],
+                    providers: [
+                        { provide: AXDataPagerChild, useExisting: AXDataPagerPageSizesComponent },
+                        AXUnsubscriber,
+                    ],
+                }]
+        }], propDecorators: { sizes: [{
+                type: Input
+            }] } });
+
+class AXDataPagerPrevButtonsComponent extends AXDataPagerChild {
+    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: "17.3.2", ngImport: i0, type: AXDataPagerPrevButtonsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", 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"
+      class="ax-sm"
+      title="Go to the last page"
+      (onClick)="_emitOnFirstPageClick($event)"
+    >
+      <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"
+      look="blank"
+      class="ax-sm"
+      title="Go to the next page"
+      (onClick)="_emitOnPrevPageClick($event)"
+    >
+      <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.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"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { 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: "17.3.2", 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-last-page': rtl, 'ax-icon-first-page': !rtl }"
+      ></ax-icon>
+    </ax-button>
+    <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]="{
+          '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 },
+                        AXUnsubscriber,
+                    ],
+                }]
+        }] });
+
+class AXDataPagerComponent extends MXValueComponent {
+    get size() {
+        return this._size;
+    }
+    set size(v) {
+        if (v != this._size) {
+            this._size = v;
+            if (this._parent) {
+                this._parent.pageSize = v;
+            }
+            const newPage = Math.ceil(this.displayInfo.range.from / this._size) || 1;
+            this.commitValue(newPage);
+            this._emitChangedEvent();
+        }
+    }
+    get total() {
+        return this._total;
+    }
+    set total(v) {
+        const t = v && v > 0 ? v : 0;
+        if (t != this._total) {
+            this._total = t;
+            this._emitChangedEvent();
+        }
+    }
+    get totalPages() {
+        return this._totalPages;
+    }
+    set totalPages(value) {
+        this._totalPages = value;
+    }
+    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.displayModeChange = new EventEmitter();
+        this._displayMode = 'full';
+        this.onChanged = new EventEmitter();
+        //
+        if (this._parent) {
+            this._parent.onPageChanged.subscribe((c) => {
+                this.size = this._parent.pageSize;
+                this.total = this._parent.totalCount;
+                this.value = c.value;
+            });
+            this.size = this._parent.pageSize;
+            this.total = this._parent.totalCount;
+        }
+    }
+    ngAfterViewInit() {
+        this._emitChangedEvent();
+    }
+    internalValueChanged(value) {
+        this._emitChangedEvent(true);
+    }
+    internalGetValue(value) {
+        if (!isNumber(value) || !value || this.totalPages == 0)
+            return 1;
+        return value > this.totalPages ? this.totalPages : value;
+    }
+    get displayInfo() {
+        const skip = Math.max(0, (this.value - 1) * this.size);
+        const result = {
+            page: this.value,
+            totalItems: this.total,
+            totalPages: this.totalPages,
+            range: {
+                from: skip + 1,
+                to: Math.min(this.value * this.size, this.total),
+            },
+            skip,
+            take: this.size,
+        };
+        return result;
+    }
+    _emitChangedEvent(u = false) {
+        this.totalPages = Math.ceil(this._total / this.size);
+        //
+        this.onChanged.emit(Object.assign({
+            component: this,
+            isUserInteraction: u,
+            htmlElement: this.getHostElement(),
+        }, this.displayInfo));
+        if (this.totalPages > 0)
+            this._parent?.goToPage(this.value);
+        //
+        this.cdr.markForCheck();
+    }
+    goNextPage() {
+        this.goToPage(Math.min(this.value + 1, this.totalPages));
+    }
+    goLastPage() {
+        this.goToPage(this.totalPages);
+    }
+    goFirstPage() {
+        this.goToPage(1);
+    }
+    goPrevPage() {
+        this.goToPage(Math.max(this.value - 1, 1));
+    }
+    goToPage(page) {
+        if (page != this.value) {
+            this.commitValue(page, true);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerComponent, deps: [{ token: AXPagedComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", 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: "@switch(displayMode){\n@case('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}\n@case('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}\n@default{\n<ng-content select=\"ax-prefix\"></ng-content>\n<ng-content select=\"ax-suffix\"></ng-content>\n}\n}", styles: ["ax-data-pager{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem;font-size:.875rem;line-height:1.25rem}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{display:flex;gap:.5rem}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-prefix,ax-data-pager ax-suffix{display:flex}\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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-data-pager', inputs: ['value', 'name', 'disabled', 'readonly'], outputs: ['valueChange', 'onValueChanged', 'disabledChange', 'readonlyChange'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: AXDataPagerParentComponent, useExisting: AXDataPagerComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXDataPagerComponent),
+                            multi: true,
+                        },
+                    ], template: "@switch(displayMode){\n@case('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}\n@case('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}\n@default{\n<ng-content select=\"ax-prefix\"></ng-content>\n<ng-content select=\"ax-suffix\"></ng-content>\n}\n}", styles: ["ax-data-pager{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem;font-size:.875rem;line-height:1.25rem}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{display:flex;gap:.5rem}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-prefix,ax-data-pager ax-suffix{display:flex}\n"] }]
+        }], ctorParameters: () => [{ type: i8.AXPagedComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [AXPagedComponent]
+                }] }], propDecorators: { size: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], displayModeChange: [{
+                type: Output
+            }], displayMode: [{
+                type: Input
+            }], onChanged: [{
+                type: Output
+            }] } });
+
+const COMPONENT = [
+    AXDataPagerComponent,
+    AXDataPagerNextButtonsComponent,
+    AXDataPagerPrevButtonsComponent,
+    AXDataPagerPageSizesComponent,
+    AXDataPagerNumericSelectorComponent,
+    AXDataPagerInputSelectorComponent,
+    AXDataPagerInfoComponent,
+];
+const MODULES = [
+    CommonModule,
+    FormsModule,
+    AXButtonModule,
+    AXButtonGroupModule,
+    AXNumberBoxModule,
+    AXDropdownModule,
+    AXDecoratorModule,
+    AXTranslationModule,
+];
+class AXDataPagerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerModule, declarations: [AXDataPagerComponent,
+            AXDataPagerNextButtonsComponent,
+            AXDataPagerPrevButtonsComponent,
+            AXDataPagerPageSizesComponent,
+            AXDataPagerNumericSelectorComponent,
+            AXDataPagerInputSelectorComponent,
+            AXDataPagerInfoComponent], imports: [CommonModule,
+            FormsModule,
+            AXButtonModule,
+            AXButtonGroupModule,
+            AXNumberBoxModule,
+            AXDropdownModule,
+            AXDecoratorModule,
+            AXTranslationModule], exports: [AXDataPagerComponent,
+            AXDataPagerNextButtonsComponent,
+            AXDataPagerPrevButtonsComponent,
+            AXDataPagerPageSizesComponent,
+            AXDataPagerNumericSelectorComponent,
+            AXDataPagerInputSelectorComponent,
+            AXDataPagerInfoComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerModule, imports: [MODULES] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDataPagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXDataPagerChangedEvent, AXDataPagerChild, AXDataPagerComponent, AXDataPagerInfoComponent, AXDataPagerInputSelectorComponent, AXDataPagerModule, AXDataPagerNextButtonsComponent, AXDataPagerNumericSelectorComponent, AXDataPagerPageSizesComponent, AXDataPagerParentComponent, AXDataPagerPrevButtonsComponent };
+//# sourceMappingURL=acorex-components-data-pager.mjs.map