@ng-nest/ui 17.0.12 → 18.0.0

package/fesm2022/ng-nest-ui-pagination.mjs

@@ -1,10 +1,7 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, inject, ElementRef, Renderer2, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XProperty, XWithConfig, XInputNumber, XInputBoolean, XConfigService, XIsChange } from '@ng-nest/ui/core';
-import { Subject } from 'rxjs';
-import { XI18nService, XI18nPipe } from '@ng-nest/ui/i18n';
-import { takeUntil } from 'rxjs/operators';
+import { model, input, Component, inject, ElementRef, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule } from '@angular/core';
+import { XPropertyFunction, XToNumber, XToBoolean, XToCssPixelValue, XToDataArray } from '@ng-nest/ui/core';
+import { XI18nPipe } from '@ng-nest/ui/i18n';
 import { ENTER } from '@angular/cdk/keycodes';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -19,7 +16,7 @@ import { XOutletDirective } from '@ng-nest/ui/outlet';
  * @decorator component
  */
 const XPaginationPrefix = 'x-pagination';
-const X_CONFIG_NAME = 'pagination';
+const X_PAGINATION_CONFIG_NAME = 'pagination';
 /**
  * @zh_CN 分页选择条数
  * @en_US Sub-selection
@@ -28,282 +25,219 @@ const XPaginationSizeData = [10, 20, 50, 100];
 /**
  * Pagination Property
  */
-class XPaginationProperty extends XProperty {
+class XPaginationProperty extends XPropertyFunction(X_PAGINATION_CONFIG_NAME) {
     constructor() {
         super(...arguments);
+        /**
+         * @zh_CN 当前页码
+         * @en_US Current page number
+         */
+        this.index = model(this.config?.index ?? 1);
+        /**
+         * @zh_CN 每页显示条数
+         * @en_US Number of items displayed per page
+         */
+        this.size = model(this.config?.size ?? 10);
         /**
          * @zh_CN 总数
          * @en_US Total
          */
-        this.total = 0;
+        this.total = input(0, { transform: XToNumber });
         /**
          * @zh_CN 查询条件
          * @en_US Query conditions
          */
-        this.query = {};
+        this.query = model({});
+        /**
+         * @zh_CN 最多显示的分页数量
+         * @en_US The largest number of pages display
+         */
+        this.pageLinkSize = input(this.config?.pageLinkSize ?? 5, { transform: XToNumber });
+        /**
+         * @zh_CN 显示首尾页跳转
+         * @en_US Display the first and last page
+         */
+        this.showEllipsis = input(this.config?.showEllipsis ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 显示总条数
+         * @en_US Display the total
+         */
+        this.showTotal = input(this.config?.showTotal ?? true, { transform: XToBoolean });
+        /**
+         * @zh_CN 按钮间距
+         * @en_US Button spacing
+         */
+        this.space = input(this.config?.space ?? '0.25rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 添加背景色
+         * @en_US Show background
+         */
+        this.showBackground = input(this.config?.showBackground ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 显示分页条数
+         * @en_US Show size
+         */
+        this.showSize = input(this.config?.showSize ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 分页条数选择框的宽度
+         * @en_US size with select
+         */
+        this.sizeWidth = input(this.config?.sizeWidth ?? '6.875rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 显示输入分页条数（不能跟下拉选项同时使用）
+         * @en_US Display the number of input page breaks (cannot exist with the drop-down options of page breaks)
+         */
+        this.showInputSize = input(this.config?.showInputSize ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 分页条数输入框的宽度
+         * @en_US size with input
+         */
+        this.inputSizeWidth = input(this.config?.sizeWidth ?? '3.125rem', {
+            transform: XToCssPixelValue
+        });
         /**
-         * @zh_CN 页码变化的事件
-         * @en_US Page number change event
+         * @zh_CN 分页选择的数据项
+         * @en_US Paging choose items of data
          */
-        this.queryChange = new EventEmitter();
+        this.sizeData = input(this.config?.sizeData ?? XPaginationSizeData);
         /**
-         * @zh_CN 页码变化的事件
-         * @en_US Page number change event
+         * @zh_CN 禁用整个分页
+         * @en_US disabled
          */
-        this.indexChange = new EventEmitter();
+        this.disabled = input(false, { transform: XToBoolean });
         /**
-         * @zh_CN 每页显示条数变化的事件
-         * @en_US Show the number of events on each page
+         * @zh_CN 显示跳转输入框
+         * @en_US Show size
          */
-        this.sizeChange = new EventEmitter();
+        this.showJump = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 跳转页的宽度
+         * @en_US size with
+         */
+        this.jumpWidth = input(this.config?.jumpWidth ?? '3.125rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 总数自定义模板
+         * @en_US Total template
+         */
+        this.totalTpl = input();
+        /**
+         * @zh_CN 简单分页
+         * @en_US Simple
+         */
+        this.simple = input(this.config?.simple ?? false, { transform: XToBoolean });
+        /**
+         * @zh_CN 简单分页输入框宽度
+         * @en_US Simple index with
+         */
+        this.simpleIndexWidth = input(this.config?.simpleIndexWidth ?? '8.125rem', {
+            transform: XToCssPixelValue
+        });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XPaginationProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XPaginationProperty, selector: "x-pagination-property", inputs: { index: "index", size: "size", total: "total", query: "query", pageLinkSize: "pageLinkSize", showEllipsis: "showEllipsis", showTotal: "showTotal", space: "space", hiddenBorder: "hiddenBorder", showSize: "showSize", sizeWidth: "sizeWidth", showInputSize: "showInputSize", inputSizeWidth: "inputSizeWidth", sizeData: "sizeData", disabled: "disabled", showJump: "showJump", jumpWidth: "jumpWidth", totalTpl: "totalTpl", simple: "simple", simpleIndexWidth: "simpleIndexWidth" }, outputs: { queryChange: "queryChange", indexChange: "indexChange", sizeChange: "sizeChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPaginationProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XPaginationProperty, selector: "x-pagination-property", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, pageLinkSize: { classPropertyName: "pageLinkSize", publicName: "pageLinkSize", isSignal: true, isRequired: false, transformFunction: null }, showEllipsis: { classPropertyName: "showEllipsis", publicName: "showEllipsis", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, showBackground: { classPropertyName: "showBackground", publicName: "showBackground", isSignal: true, isRequired: false, transformFunction: null }, showSize: { classPropertyName: "showSize", publicName: "showSize", isSignal: true, isRequired: false, transformFunction: null }, sizeWidth: { classPropertyName: "sizeWidth", publicName: "sizeWidth", isSignal: true, isRequired: false, transformFunction: null }, showInputSize: { classPropertyName: "showInputSize", publicName: "showInputSize", isSignal: true, isRequired: false, transformFunction: null }, inputSizeWidth: { classPropertyName: "inputSizeWidth", publicName: "inputSizeWidth", isSignal: true, isRequired: false, transformFunction: null }, sizeData: { classPropertyName: "sizeData", publicName: "sizeData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showJump: { classPropertyName: "showJump", publicName: "showJump", isSignal: true, isRequired: false, transformFunction: null }, jumpWidth: { classPropertyName: "jumpWidth", publicName: "jumpWidth", isSignal: true, isRequired: false, transformFunction: null }, totalTpl: { classPropertyName: "totalTpl", publicName: "totalTpl", isSignal: true, isRequired: false, transformFunction: null }, simple: { classPropertyName: "simple", publicName: "simple", isSignal: true, isRequired: false, transformFunction: null }, simpleIndexWidth: { classPropertyName: "simpleIndexWidth", publicName: "simpleIndexWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange", size: "sizeChange", query: "queryChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 1),
-    XInputNumber()
-], XPaginationProperty.prototype, "index", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 10),
-    XInputNumber()
-], XPaginationProperty.prototype, "size", void 0);
-__decorate([
-    XInputNumber()
-], XPaginationProperty.prototype, "total", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 5),
-    XInputNumber()
-], XPaginationProperty.prototype, "pageLinkSize", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, true),
-    XInputBoolean()
-], XPaginationProperty.prototype, "showEllipsis", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, true),
-    XInputBoolean()
-], XPaginationProperty.prototype, "showTotal", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 0),
-    XInputNumber()
-], XPaginationProperty.prototype, "space", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XPaginationProperty.prototype, "hiddenBorder", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XPaginationProperty.prototype, "showSize", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 110),
-    XInputNumber()
-], XPaginationProperty.prototype, "sizeWidth", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XPaginationProperty.prototype, "showInputSize", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 50),
-    XInputNumber()
-], XPaginationProperty.prototype, "inputSizeWidth", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, XPaginationSizeData)
-], XPaginationProperty.prototype, "sizeData", void 0);
-__decorate([
-    XInputBoolean()
-], XPaginationProperty.prototype, "disabled", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XPaginationProperty.prototype, "showJump", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 50),
-    XInputNumber()
-], XPaginationProperty.prototype, "jumpWidth", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, false),
-    XInputBoolean()
-], XPaginationProperty.prototype, "simple", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 130),
-    XInputNumber()
-], XPaginationProperty.prototype, "simpleIndexWidth", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XPaginationProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPaginationProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XPaginationPrefix}-property`, template: '' }]
-        }], propDecorators: { index: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], total: [{
-                type: Input
-            }], query: [{
-                type: Input
-            }], pageLinkSize: [{
-                type: Input
-            }], showEllipsis: [{
-                type: Input
-            }], showTotal: [{
-                type: Input
-            }], space: [{
-                type: Input
-            }], hiddenBorder: [{
-                type: Input
-            }], showSize: [{
-                type: Input
-            }], sizeWidth: [{
-                type: Input
-            }], showInputSize: [{
-                type: Input
-            }], inputSizeWidth: [{
-                type: Input
-            }], sizeData: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], showJump: [{
-                type: Input
-            }], jumpWidth: [{
-                type: Input
-            }], totalTpl: [{
-                type: Input
-            }], simple: [{
-                type: Input
-            }], simpleIndexWidth: [{
-                type: Input
-            }], queryChange: [{
-                type: Output
-            }], indexChange: [{
-                type: Output
-            }], sizeChange: [{
-                type: Output
-            }] } });
+        }] });
 
 class XPaginationComponent extends XPaginationProperty {
     constructor() {
         super(...arguments);
-        this.indexes = [];
-        this.indexFirst = 1;
-        this.indexLast = 1;
-        this.jumpPage = null;
-        this._unSubject = new Subject();
         this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.cdr = inject(ChangeDetectorRef);
-        this.i18n = inject(XI18nService);
-        this.configService = inject(XConfigService);
-    }
-    get leftDisabled() {
-        return Number(this.index) === 1 || Number(this.total) === 0;
-    }
-    get rightDisabled() {
-        return Number(this.index) === this.lastIndex || Number(this.total) === 0;
-    }
-    get firstActivated() {
-        return Number(this.index) === 1;
-    }
-    get lastActivated() {
-        return Number(this.index) === this.lastIndex;
+        this.className = XPaginationPrefix;
+        this.indexFirst = signal(1);
+        this.indexLast = signal(1);
+        this.jumpPage = signal('');
+        this.inputSize = signal('');
+        this.lastIndex = computed(() => Math.ceil(this.total() / this.size()) || 1);
+        this.leftDisabled = computed(() => this.index() === 1 || this.total() === 0);
+        this.rightDisabled = computed(() => this.index() === this.lastIndex() || this.total() === 0);
+        this.firstActivated = computed(() => this.index() === 1);
+        this.lastActivated = computed(() => this.index() === this.lastIndex());
+        this.indexes = computed(() => {
+            const indexes = [];
+            const current = this.index() - 1;
+            const maxSize = this.pageLinkSize();
+            const pages = Math.min(maxSize, this.lastIndex());
+            let start = Math.max(0, Math.ceil(current - pages / 2)), end = Math.min(this.lastIndex() - 1, start + pages - 1);
+            var delta = maxSize - (end - start + 1);
+            start = Math.max(0, start - delta);
+            for (let i = start; i <= end; i++) {
+                indexes.push(i + 1);
+            }
+            return indexes;
+        });
+        this.sizeDataSignal = computed(() => XToDataArray(this.sizeData()));
     }
     ngOnInit() {
-        this.renderer.addClass(this.elementRef.nativeElement, XPaginationPrefix);
-        this.i18n.localeChange.pipe(takeUntil(this._unSubject)).subscribe(() => this.cdr.markForCheck());
-        this.inputSize = Number(this.size);
-    }
-    ngOnChanges(changes) {
-        const { total, size, index } = changes;
-        XIsChange(total, size, index) && this.setIndexes();
-    }
-    ngOnDestroy() {
-        this._unSubject.next();
-        this._unSubject.unsubscribe();
+        this.inputSize.set(this.size().toString());
     }
     sizeChanged() {
-        this.setIndexes();
-        this.sizeChange.emit(this.size);
-        if (this.index !== 1) {
-            this.index = 1;
-            this.indexChange.emit(this.index);
-        }
-    }
-    setIndexes() {
-        this.lastIndex = Math.ceil(Number(this.total) / Number(this.size)) || 1;
-        const indexes = [];
-        const current = Number(this.index) - 1;
-        const maxSize = Number(this.pageLinkSize);
-        const pages = Math.min(maxSize, this.lastIndex);
-        let start = Math.max(0, Math.ceil(current - pages / 2)), end = Math.min(this.lastIndex - 1, start + pages - 1);
-        var delta = maxSize - (end - start + 1);
-        start = Math.max(0, start - delta);
-        for (let i = start; i <= end; i++) {
-            indexes.push(i + 1);
+        if (this.index() !== 1) {
+            this.index.set(1);
         }
-        this.indexes = indexes;
-        this.cdr.detectChanges();
     }
     jump(index, isDiff = false) {
-        const ix = this.validateIndex(isDiff ? Number(this.index) + index : index);
-        if (ix !== this.index) {
-            this.index = ix;
-            this.setIndexes();
-            this.indexChange.emit(this.index);
+        const ix = this.validateIndex(isDiff ? this.index() + index : index);
+        if (ix !== this.index()) {
+            this.index.set(ix);
         }
     }
     onJumpKeydown(event) {
-        if (this.jumpPage !== null && event.keyCode === ENTER) {
-            if (this.jumpPage <= this.indexFirst) {
-                this.jump(this.indexFirst);
+        const jumpPage = this.jumpPage().trim();
+        if (jumpPage !== '' && event.keyCode === ENTER) {
+            if (Number(jumpPage) <= this.indexFirst()) {
+                this.jump(this.indexFirst());
             }
-            else if (this.jumpPage >= this.lastIndex) {
-                this.jump(this.lastIndex);
+            else if (Number(jumpPage) >= this.lastIndex()) {
+                this.jump(this.lastIndex());
             }
             else {
-                this.jump(this.jumpPage);
+                this.jump(Number(jumpPage));
             }
-            this.jumpPage = null;
-            this.cdr.detectChanges();
+            this.jumpPage.set('');
         }
     }
     onSimpleKeydown(event) {
-        if (this.index !== null && event.keyCode === ENTER) {
-            if (Number(this.index) % 1 !== 0) {
-                this.index = Math.round(Number(this.index));
+        if (this.index() !== null && event.keyCode === ENTER) {
+            if (this.index() % 1 !== 0) {
+                this.index.update((x) => Math.round(x));
             }
-            if (isNaN(Number(this.index)) || this.index === 0) {
-                this.index = 1;
+            if (isNaN(this.index()) || this.index() === 0) {
+                this.index.set(1);
             }
-            if (Number(this.index) <= this.indexFirst) {
-                this.index = this.indexFirst;
+            if (this.index() <= this.indexFirst()) {
+                this.index.set(this.indexFirst());
             }
-            else if (Number(this.index) >= this.lastIndex) {
-                this.index = this.lastIndex;
+            else if (this.index() >= this.lastIndex()) {
+                this.index.set(this.lastIndex());
             }
-            this.jump(this.index);
-            this.indexChange.emit(this.index);
-            this.cdr.detectChanges();
+            this.jump(this.index());
         }
     }
     onInputSizeKeydown(event) {
-        if (this.inputSize !== null && event.keyCode === ENTER) {
-            if (this.inputSize % 1 !== 0) {
-                this.inputSize = Math.round(this.inputSize);
+        const inputSize = this.inputSize().trim();
+        if (inputSize !== '' && event.keyCode === ENTER) {
+            const inputNumber = Number(inputSize);
+            if (inputNumber % 1 !== 0) {
+                this.inputSize.set(`${Math.round(inputNumber)}`);
             }
-            if (isNaN(this.inputSize)) {
-                this.inputSize = Number(this.size);
+            if (isNaN(inputNumber)) {
+                this.inputSize.set(`${this.size()}`);
             }
-            if (this.inputSize <= 0) {
-                this.inputSize = Number(this.size);
+            if (inputNumber <= 0) {
+                this.inputSize.set(`${this.size()}`);
             }
-            else if (this.inputSize !== Number(this.size)) {
-                this.size = this.inputSize;
+            else if (inputNumber !== this.size()) {
+                this.size.set(inputNumber);
                 this.sizeChanged();
             }
         }
     }
     validateIndex(value) {
-        if (value > this.lastIndex) {
-            return this.lastIndex;
+        if (value > this.lastIndex()) {
+            return this.lastIndex();
         }
         else if (value < 1) {
             return 1;
@@ -313,12 +247,12 @@ class XPaginationComponent extends XPaginationProperty {
         }
     }
     getActivated(index) {
-        return Number(this.index) === index;
+        return this.index() === index;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XPaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XPaginationComponent, isStandalone: true, selector: "x-pagination", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (simple) {\r\n  <div class=\"x-pagination-simple\">\r\n    <x-input\r\n      [bordered]=\"!hiddenBorder\"\r\n      [before]=\"previousTpl\"\r\n      [after]=\"nextTpl\"\r\n      [style.width.px]=\"simpleIndexWidth\"\r\n      [(ngModel)]=\"index\"\r\n      (xKeydown)=\"onSimpleKeydown($event)\"\r\n    ></x-input>\r\n    <span>/</span>\r\n    <span>{{ lastIndex }}</span>\r\n  </div>\r\n} @else {\r\n  <x-buttons [space]=\"space\" [hiddenBorder]=\"hiddenBorder\">\r\n    @if (showEllipsis) {\r\n      <x-button\r\n        [icon]=\"'fto-chevrons-left'\"\r\n        [title]=\"'pagination.first' | xI18n\"\r\n        [disabled]=\"disabled || firstActivated\"\r\n        (click)=\"jump(1)\"\r\n      ></x-button>\r\n    }\r\n    <ng-container *xOutlet=\"previousTpl\"></ng-container>\r\n    @for (item of indexes; track item) {\r\n      <x-button [disabled]=\"disabled\" [activated]=\"getActivated(item)\" (click)=\"jump(item)\">{{ item }}</x-button>\r\n    }\r\n    <ng-container *xOutlet=\"nextTpl\"></ng-container>\r\n    @if (showEllipsis && !simple) {\r\n      <x-button\r\n        [icon]=\"'fto-chevrons-right'\"\r\n        [title]=\"'pagination.last' | xI18n\"\r\n        [disabled]=\"disabled || lastActivated\"\r\n        (click)=\"jump(lastIndex)\"\r\n      ></x-button>\r\n    }\r\n  </x-buttons>\r\n}\r\n@if (showSize && !showInputSize) {\r\n  <x-select\r\n    [style.width.px]=\"sizeWidth\"\r\n    class=\"x-pagination-size\"\r\n    [data]=\"sizeData\"\r\n    clearable=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [bordered]=\"!hiddenBorder\"\r\n    [nodeTpl]=\"nodeTpl\"\r\n    [(ngModel)]=\"size\"\r\n    (ngModelChange)=\"sizeChanged()\"\r\n  ></x-select>\r\n}\r\n@if (showInputSize) {\r\n  <div class=\"x-pagination-input-size\">\r\n    <x-input\r\n      [style.width.px]=\"inputSizeWidth\"\r\n      [disabled]=\"disabled\"\r\n      [bordered]=\"!hiddenBorder\"\r\n      [(ngModel)]=\"inputSize\"\r\n      (xKeydown)=\"onInputSizeKeydown($event)\"\r\n    ></x-input>\r\n    <span> {{ 'pagination.sizePage' | xI18n }} </span>\r\n  </div>\r\n}\r\n@if (showJump && !simple) {\r\n  <div class=\"x-pagination-jump\">\r\n    <span>{{ 'pagination.jump' | xI18n }}</span>\r\n    <x-input\r\n      [bordered]=\"!hiddenBorder\"\r\n      [style.width.px]=\"jumpWidth\"\r\n      [(ngModel)]=\"jumpPage\"\r\n      (xKeydown)=\"onJumpKeydown($event)\"\r\n    ></x-input>\r\n  </div>\r\n}\r\n@if (showTotal) {\r\n  <x-button [disabled]=\"disabled\" class=\"x-pagination-total\" [type]=\"hiddenBorder === true ? 'text' : 'initial'\"\r\n    ><ng-container *xOutlet=\"totalTpl; context: { $total: total }\"\r\n      >{{ 'pagination.total' | xI18n }} {{ total }} {{ 'pagination.item' | xI18n }}</ng-container\r\n    ></x-button\r\n  >\r\n}\r\n<ng-template #previousTpl>\r\n  <x-button\r\n    [type]=\"hiddenBorder ? 'text' : 'initial'\"\r\n    [icon]=\"'fto-chevron-left'\"\r\n    [title]=\"'pagination.previous' | xI18n\"\r\n    [disabled]=\"disabled || leftDisabled\"\r\n    (click)=\"jump(-1, true)\"\r\n  ></x-button>\r\n</ng-template>\r\n\r\n<ng-template #nextTpl>\r\n  <x-button\r\n    [type]=\"hiddenBorder ? 'text' : 'initial'\"\r\n    [icon]=\"'fto-chevron-right'\"\r\n    [title]=\"'pagination.next' | xI18n\"\r\n    [disabled]=\"disabled || rightDisabled\"\r\n    (click)=\"jump(1, true)\"\r\n  ></x-button>\r\n</ng-template>\r\n\r\n<ng-template #nodeTpl let-node=\"$node\">\r\n  @if (node) {\r\n    {{ node?.label }} {{ 'pagination.sizePage' | xI18n }}\r\n  }\r\n</ng-template>\r\n", styles: [".x-pagination{margin:0;padding:0;display:inline-flex}.x-pagination>.x-buttons.x-buttons-hiddenBorder>x-button>.x-button{min-width:1.75rem}.x-pagination>.x-buttons.x-buttons-hiddenBorder>x-button>.x-button-activated{background-color:#0000000d}.x-pagination-size,.x-pagination-total{margin-left:.5rem}.x-pagination-input-size{margin-left:.5rem;display:inline-flex;align-items:center}.x-pagination-input-size x-input{margin-right:.5rem}.x-pagination-jump{margin-left:.5rem;display:inline-flex;align-items:center}.x-pagination-jump x-input{margin-left:.5rem}.x-pagination-simple{margin-right:.5rem;display:inline-flex;align-items:center}.x-pagination-simple>x-input input{text-align:center}.x-pagination-simple>span{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }, { kind: "pipe", type: XI18nPipe, name: "xI18n" }, { kind: "component", type: XSelectComponent, selector: "x-select" }, { kind: "component", type: XInputComponent, selector: "x-input" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPaginationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XPaginationComponent, isStandalone: true, selector: "x-pagination", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: "@if (simple()) {\r\n  <div class=\"x-pagination-simple\">\r\n    <x-input\r\n      [bordered]=\"showBackground()\"\r\n      [before]=\"previousTpl\"\r\n      [after]=\"nextTpl\"\r\n      [style.width]=\"simpleIndexWidth()\"\r\n      [(ngModel)]=\"index\"\r\n      (xKeydown)=\"onSimpleKeydown($event)\"\r\n    ></x-input>\r\n    <span>/</span>\r\n    <span>{{ lastIndex() }}</span>\r\n  </div>\r\n} @else {\r\n  <x-buttons [space]=\"space()\" [hiddenBorder]=\"!showBackground()\" [boxShadow]=\"false\">\r\n    @if (showEllipsis()) {\r\n      <x-button\r\n        [icon]=\"'fto-chevrons-left'\"\r\n        [title]=\"'pagination.first' | xI18n\"\r\n        [disabled]=\"disabled() || firstActivated()\"\r\n        (click)=\"jump(1)\"\r\n        plain\r\n        flat\r\n      ></x-button>\r\n    }\r\n    <ng-container *xOutlet=\"previousTpl\"></ng-container>\r\n    @for (item of indexes(); track item) {\r\n      <x-button [disabled]=\"disabled()\" plain flat [activated]=\"getActivated(item)\" (click)=\"jump(item)\">{{\r\n        item\r\n      }}</x-button>\r\n    }\r\n    <ng-container *xOutlet=\"nextTpl\"></ng-container>\r\n    @if (showEllipsis() && !simple()) {\r\n      <x-button\r\n        [icon]=\"'fto-chevrons-right'\"\r\n        [title]=\"'pagination.last' | xI18n\"\r\n        [disabled]=\"disabled() || lastActivated()\"\r\n        (click)=\"jump(lastIndex())\"\r\n        plain\r\n        flat\r\n      ></x-button>\r\n    }\r\n  </x-buttons>\r\n}\r\n@if (showSize() && !showInputSize()) {\r\n  <x-select\r\n    [style.width]=\"sizeWidth()\"\r\n    class=\"x-pagination-size\"\r\n    [data]=\"sizeDataSignal()\"\r\n    [clearable]=\"false\"\r\n    [disabled]=\"disabled()\"\r\n    [bordered]=\"showBackground()\"\r\n    [nodeTpl]=\"nodeTpl\"\r\n    [(ngModel)]=\"size\"\r\n    (ngModelChange)=\"sizeChanged()\"\r\n  ></x-select>\r\n}\r\n@if (showInputSize()) {\r\n  <div class=\"x-pagination-input-size\">\r\n    <x-input\r\n      [style.width]=\"inputSizeWidth()\"\r\n      [disabled]=\"disabled()\"\r\n      [bordered]=\"showBackground()\"\r\n      [(ngModel)]=\"inputSize\"\r\n      (xKeydown)=\"onInputSizeKeydown($event)\"\r\n    ></x-input>\r\n    <span> {{ 'pagination.sizePage' | xI18n }} </span>\r\n  </div>\r\n}\r\n@if (showJump() && !simple()) {\r\n  <div class=\"x-pagination-jump\">\r\n    <span>{{ 'pagination.jump' | xI18n }}</span>\r\n    <x-input\r\n      [bordered]=\"showBackground()\"\r\n      [style.width]=\"jumpWidth()\"\r\n      [(ngModel)]=\"jumpPage\"\r\n      (xKeydown)=\"onJumpKeydown($event)\"\r\n    ></x-input>\r\n  </div>\r\n}\r\n@if (showTotal()) {\r\n  <x-button [disabled]=\"disabled()\" plain flat class=\"x-pagination-total\">\r\n    <ng-container *xOutlet=\"totalTpl(); context: { $total: total() }\">\r\n      {{ 'pagination.total' | xI18n }} {{ total() }} {{ 'pagination.item' | xI18n }}\r\n    </ng-container>\r\n  </x-button>\r\n}\r\n<ng-template #previousTpl>\r\n  <x-button\r\n    [icon]=\"'fto-chevron-left'\"\r\n    [title]=\"'pagination.previous' | xI18n\"\r\n    [disabled]=\"disabled() || leftDisabled()\"\r\n    (click)=\"jump(-1, true)\"\r\n    plain\r\n    flat\r\n  ></x-button>\r\n</ng-template>\r\n\r\n<ng-template #nextTpl>\r\n  <x-button\r\n    [icon]=\"'fto-chevron-right'\"\r\n    [title]=\"'pagination.next' | xI18n\"\r\n    [disabled]=\"disabled() || rightDisabled()\"\r\n    (click)=\"jump(1, true)\"\r\n    plain\r\n    flat\r\n  ></x-button>\r\n</ng-template>\r\n\r\n<ng-template #nodeTpl let-node=\"$node\">\r\n  @if (node) {\r\n    {{ node?.label }} {{ 'pagination.sizePage' | xI18n }}\r\n  }\r\n</ng-template>\r\n", styles: [".x-pagination{margin:0;padding:0;display:inline-flex}.x-pagination>.x-buttons.x-buttons-hiddenBorder>x-button>.x-button{min-width:1.75rem}.x-pagination>.x-buttons.x-buttons-hiddenBorder>x-button>.x-button-activated{background-color:#0000000d}.x-pagination-size,.x-pagination-total{margin-left:.5rem}.x-pagination-input-size{margin-left:.5rem;display:inline-flex;align-items:center}.x-pagination-input-size x-input{margin-right:.5rem}.x-pagination-jump{margin-left:.5rem;display:inline-flex;align-items:center}.x-pagination-jump x-input{margin-left:.5rem}.x-pagination-simple{margin-right:.5rem;display:inline-flex;align-items:center}.x-pagination-simple>x-input input{text-align:center}.x-pagination-simple>span{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XButtonsComponent, selector: "x-buttons" }, { kind: "pipe", type: XI18nPipe, name: "xI18n" }, { kind: "component", type: XSelectComponent, selector: "x-select" }, { kind: "component", type: XInputComponent, selector: "x-input" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: `${XPaginationPrefix}`, standalone: true, imports: [
                         FormsModule,
@@ -328,15 +262,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                         XSelectComponent,
                         XInputComponent,
                         XOutletDirective
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (simple) {\r\n  <div class=\"x-pagination-simple\">\r\n    <x-input\r\n      [bordered]=\"!hiddenBorder\"\r\n      [before]=\"previousTpl\"\r\n      [after]=\"nextTpl\"\r\n      [style.width.px]=\"simpleIndexWidth\"\r\n      [(ngModel)]=\"index\"\r\n      (xKeydown)=\"onSimpleKeydown($event)\"\r\n    ></x-input>\r\n    <span>/</span>\r\n    <span>{{ lastIndex }}</span>\r\n  </div>\r\n} @else {\r\n  <x-buttons [space]=\"space\" [hiddenBorder]=\"hiddenBorder\">\r\n    @if (showEllipsis) {\r\n      <x-button\r\n        [icon]=\"'fto-chevrons-left'\"\r\n        [title]=\"'pagination.first' | xI18n\"\r\n        [disabled]=\"disabled || firstActivated\"\r\n        (click)=\"jump(1)\"\r\n      ></x-button>\r\n    }\r\n    <ng-container *xOutlet=\"previousTpl\"></ng-container>\r\n    @for (item of indexes; track item) {\r\n      <x-button [disabled]=\"disabled\" [activated]=\"getActivated(item)\" (click)=\"jump(item)\">{{ item }}</x-button>\r\n    }\r\n    <ng-container *xOutlet=\"nextTpl\"></ng-container>\r\n    @if (showEllipsis && !simple) {\r\n      <x-button\r\n        [icon]=\"'fto-chevrons-right'\"\r\n        [title]=\"'pagination.last' | xI18n\"\r\n        [disabled]=\"disabled || lastActivated\"\r\n        (click)=\"jump(lastIndex)\"\r\n      ></x-button>\r\n    }\r\n  </x-buttons>\r\n}\r\n@if (showSize && !showInputSize) {\r\n  <x-select\r\n    [style.width.px]=\"sizeWidth\"\r\n    class=\"x-pagination-size\"\r\n    [data]=\"sizeData\"\r\n    clearable=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [bordered]=\"!hiddenBorder\"\r\n    [nodeTpl]=\"nodeTpl\"\r\n    [(ngModel)]=\"size\"\r\n    (ngModelChange)=\"sizeChanged()\"\r\n  ></x-select>\r\n}\r\n@if (showInputSize) {\r\n  <div class=\"x-pagination-input-size\">\r\n    <x-input\r\n      [style.width.px]=\"inputSizeWidth\"\r\n      [disabled]=\"disabled\"\r\n      [bordered]=\"!hiddenBorder\"\r\n      [(ngModel)]=\"inputSize\"\r\n      (xKeydown)=\"onInputSizeKeydown($event)\"\r\n    ></x-input>\r\n    <span> {{ 'pagination.sizePage' | xI18n }} </span>\r\n  </div>\r\n}\r\n@if (showJump && !simple) {\r\n  <div class=\"x-pagination-jump\">\r\n    <span>{{ 'pagination.jump' | xI18n }}</span>\r\n    <x-input\r\n      [bordered]=\"!hiddenBorder\"\r\n      [style.width.px]=\"jumpWidth\"\r\n      [(ngModel)]=\"jumpPage\"\r\n      (xKeydown)=\"onJumpKeydown($event)\"\r\n    ></x-input>\r\n  </div>\r\n}\r\n@if (showTotal) {\r\n  <x-button [disabled]=\"disabled\" class=\"x-pagination-total\" [type]=\"hiddenBorder === true ? 'text' : 'initial'\"\r\n    ><ng-container *xOutlet=\"totalTpl; context: { $total: total }\"\r\n      >{{ 'pagination.total' | xI18n }} {{ total }} {{ 'pagination.item' | xI18n }}</ng-container\r\n    ></x-button\r\n  >\r\n}\r\n<ng-template #previousTpl>\r\n  <x-button\r\n    [type]=\"hiddenBorder ? 'text' : 'initial'\"\r\n    [icon]=\"'fto-chevron-left'\"\r\n    [title]=\"'pagination.previous' | xI18n\"\r\n    [disabled]=\"disabled || leftDisabled\"\r\n    (click)=\"jump(-1, true)\"\r\n  ></x-button>\r\n</ng-template>\r\n\r\n<ng-template #nextTpl>\r\n  <x-button\r\n    [type]=\"hiddenBorder ? 'text' : 'initial'\"\r\n    [icon]=\"'fto-chevron-right'\"\r\n    [title]=\"'pagination.next' | xI18n\"\r\n    [disabled]=\"disabled || rightDisabled\"\r\n    (click)=\"jump(1, true)\"\r\n  ></x-button>\r\n</ng-template>\r\n\r\n<ng-template #nodeTpl let-node=\"$node\">\r\n  @if (node) {\r\n    {{ node?.label }} {{ 'pagination.sizePage' | xI18n }}\r\n  }\r\n</ng-template>\r\n", styles: [".x-pagination{margin:0;padding:0;display:inline-flex}.x-pagination>.x-buttons.x-buttons-hiddenBorder>x-button>.x-button{min-width:1.75rem}.x-pagination>.x-buttons.x-buttons-hiddenBorder>x-button>.x-button-activated{background-color:#0000000d}.x-pagination-size,.x-pagination-total{margin-left:.5rem}.x-pagination-input-size{margin-left:.5rem;display:inline-flex;align-items:center}.x-pagination-input-size x-input{margin-right:.5rem}.x-pagination-jump{margin-left:.5rem;display:inline-flex;align-items:center}.x-pagination-jump x-input{margin-left:.5rem}.x-pagination-simple{margin-right:.5rem;display:inline-flex;align-items:center}.x-pagination-simple>x-input input{text-align:center}.x-pagination-simple>span{margin-left:.5rem}\n"] }]
-        }] });
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (simple()) {\r\n  <div class=\"x-pagination-simple\">\r\n    <x-input\r\n      [bordered]=\"showBackground()\"\r\n      [before]=\"previousTpl\"\r\n      [after]=\"nextTpl\"\r\n      [style.width]=\"simpleIndexWidth()\"\r\n      [(ngModel)]=\"index\"\r\n      (xKeydown)=\"onSimpleKeydown($event)\"\r\n    ></x-input>\r\n    <span>/</span>\r\n    <span>{{ lastIndex() }}</span>\r\n  </div>\r\n} @else {\r\n  <x-buttons [space]=\"space()\" [hiddenBorder]=\"!showBackground()\" [boxShadow]=\"false\">\r\n    @if (showEllipsis()) {\r\n      <x-button\r\n        [icon]=\"'fto-chevrons-left'\"\r\n        [title]=\"'pagination.first' | xI18n\"\r\n        [disabled]=\"disabled() || firstActivated()\"\r\n        (click)=\"jump(1)\"\r\n        plain\r\n        flat\r\n      ></x-button>\r\n    }\r\n    <ng-container *xOutlet=\"previousTpl\"></ng-container>\r\n    @for (item of indexes(); track item) {\r\n      <x-button [disabled]=\"disabled()\" plain flat [activated]=\"getActivated(item)\" (click)=\"jump(item)\">{{\r\n        item\r\n      }}</x-button>\r\n    }\r\n    <ng-container *xOutlet=\"nextTpl\"></ng-container>\r\n    @if (showEllipsis() && !simple()) {\r\n      <x-button\r\n        [icon]=\"'fto-chevrons-right'\"\r\n        [title]=\"'pagination.last' | xI18n\"\r\n        [disabled]=\"disabled() || lastActivated()\"\r\n        (click)=\"jump(lastIndex())\"\r\n        plain\r\n        flat\r\n      ></x-button>\r\n    }\r\n  </x-buttons>\r\n}\r\n@if (showSize() && !showInputSize()) {\r\n  <x-select\r\n    [style.width]=\"sizeWidth()\"\r\n    class=\"x-pagination-size\"\r\n    [data]=\"sizeDataSignal()\"\r\n    [clearable]=\"false\"\r\n    [disabled]=\"disabled()\"\r\n    [bordered]=\"showBackground()\"\r\n    [nodeTpl]=\"nodeTpl\"\r\n    [(ngModel)]=\"size\"\r\n    (ngModelChange)=\"sizeChanged()\"\r\n  ></x-select>\r\n}\r\n@if (showInputSize()) {\r\n  <div class=\"x-pagination-input-size\">\r\n    <x-input\r\n      [style.width]=\"inputSizeWidth()\"\r\n      [disabled]=\"disabled()\"\r\n      [bordered]=\"showBackground()\"\r\n      [(ngModel)]=\"inputSize\"\r\n      (xKeydown)=\"onInputSizeKeydown($event)\"\r\n    ></x-input>\r\n    <span> {{ 'pagination.sizePage' | xI18n }} </span>\r\n  </div>\r\n}\r\n@if (showJump() && !simple()) {\r\n  <div class=\"x-pagination-jump\">\r\n    <span>{{ 'pagination.jump' | xI18n }}</span>\r\n    <x-input\r\n      [bordered]=\"showBackground()\"\r\n      [style.width]=\"jumpWidth()\"\r\n      [(ngModel)]=\"jumpPage\"\r\n      (xKeydown)=\"onJumpKeydown($event)\"\r\n    ></x-input>\r\n  </div>\r\n}\r\n@if (showTotal()) {\r\n  <x-button [disabled]=\"disabled()\" plain flat class=\"x-pagination-total\">\r\n    <ng-container *xOutlet=\"totalTpl(); context: { $total: total() }\">\r\n      {{ 'pagination.total' | xI18n }} {{ total() }} {{ 'pagination.item' | xI18n }}\r\n    </ng-container>\r\n  </x-button>\r\n}\r\n<ng-template #previousTpl>\r\n  <x-button\r\n    [icon]=\"'fto-chevron-left'\"\r\n    [title]=\"'pagination.previous' | xI18n\"\r\n    [disabled]=\"disabled() || leftDisabled()\"\r\n    (click)=\"jump(-1, true)\"\r\n    plain\r\n    flat\r\n  ></x-button>\r\n</ng-template>\r\n\r\n<ng-template #nextTpl>\r\n  <x-button\r\n    [icon]=\"'fto-chevron-right'\"\r\n    [title]=\"'pagination.next' | xI18n\"\r\n    [disabled]=\"disabled() || rightDisabled()\"\r\n    (click)=\"jump(1, true)\"\r\n    plain\r\n    flat\r\n  ></x-button>\r\n</ng-template>\r\n\r\n<ng-template #nodeTpl let-node=\"$node\">\r\n  @if (node) {\r\n    {{ node?.label }} {{ 'pagination.sizePage' | xI18n }}\r\n  }\r\n</ng-template>\r\n", styles: [".x-pagination{margin:0;padding:0;display:inline-flex}.x-pagination>.x-buttons.x-buttons-hiddenBorder>x-button>.x-button{min-width:1.75rem}.x-pagination>.x-buttons.x-buttons-hiddenBorder>x-button>.x-button-activated{background-color:#0000000d}.x-pagination-size,.x-pagination-total{margin-left:.5rem}.x-pagination-input-size{margin-left:.5rem;display:inline-flex;align-items:center}.x-pagination-input-size x-input{margin-right:.5rem}.x-pagination-jump{margin-left:.5rem;display:inline-flex;align-items:center}.x-pagination-jump x-input{margin-left:.5rem}.x-pagination-simple{margin-right:.5rem;display:inline-flex;align-items:center}.x-pagination-simple>x-input input{text-align:center}.x-pagination-simple>span{margin-left:.5rem}\n"] }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 class XPaginationModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XPaginationModule, imports: [XPaginationComponent], exports: [XPaginationComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XPaginationModule, imports: [XPaginationComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XPaginationModule, imports: [XPaginationComponent], exports: [XPaginationComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPaginationModule, imports: [XPaginationComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XPaginationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XPaginationModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XPaginationComponent],