cmat 0.0.87 → 0.0.88

package/fesm2022/cmat-components-pagination.mjs

@@ -1,7 +1,6 @@
-import { NgStyle, DecimalPipe } from '@angular/common';
+import { NgStyle, NgClass, DecimalPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, signal, inject, Injector, DestroyRef, afterNextRender, Output, Input, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, Pipe } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { signal, untracked, Injectable, input, output, inject, Injector, effect, afterNextRender, Directive, ElementRef, DestroyRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Pipe } from '@angular/core';
 import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/form-field';
@@ -13,90 +12,153 @@ import { MatInputModule } from '@angular/material/input';
 import * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { CmatDigitOnlyDirective } from 'cmat/directives/digit-only';
-import { CmatMediaWatcherService } from 'cmat/services/media-watcher';
-import { Subject } from 'rxjs';
 
 class CmatPaginationService {
     constructor() {
-        this._change = new Subject();
-        this._instances = {};
+        this._instances = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_instances" }] : /* istanbul ignore next */ []));
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.instances = this._instances.asReadonly();
         this._defaultPaginationId = 'DEFAULT_PAGINATION_ID';
     }
-    get change$() {
-        return this._change.asObservable();
-    }
     defaultId() { return this._defaultPaginationId; }
-    notifyChange(id) {
-        this._change.next(id);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    notifyChange(_id) {
+        // 使用 requestAnimationFrame 延迟 Signal 更新，避免在模板渲染周期中写入
+        requestAnimationFrame(() => {
+            this._instances.update(current => ({ ...current }));
+        });
     }
-    register(instance) {
+    register(instance, fromPipe = false) {
         const normalizedInstance = {
             ...structuredClone(instance),
             id: instance.id ?? this._defaultPaginationId
         };
         const id = normalizedInstance.id;
-        if (!this._instances[id]) {
-            this._instances[id] = normalizedInstance;
-            return true;
+        let changed = false;
+        const currentInstances = untracked(() => this._instances());
+        if (!currentInstances[id]) {
+            changed = true;
+        }
+        else {
+            const needsUpdate = this._needsUpdate(currentInstances[id], normalizedInstance);
+            if (needsUpdate) {
+                changed = true;
+            }
+        }
+        if (changed) {
+            if (fromPipe) {
+                requestAnimationFrame(() => {
+                    this._instances.update((current) => {
+                        if (!current[id]) {
+                            return { ...current, [id]: normalizedInstance };
+                        }
+                        else {
+                            this._updateInstance(current[id], normalizedInstance);
+                            return { ...current };
+                        }
+                    });
+                });
+            }
+            else {
+                this._instances.update((current) => {
+                    if (!current[id]) {
+                        return { ...current, [id]: normalizedInstance };
+                    }
+                    else {
+                        this._updateInstance(current[id], normalizedInstance);
+                        return { ...current };
+                    }
+                });
+            }
         }
-        return this._updateInstance(normalizedInstance);
+        return changed;
     }
     getCurrentPage(id) {
-        return this._instances[id]?.currentPage;
+        return this._instances()[id]?.currentPage;
     }
     getItemsPerPage(id) {
-        return this._instances[id]?.itemsPerPage;
+        return this._instances()[id]?.itemsPerPage;
     }
     setCurrentPage(id, page) {
-        if (this._instances[id]) {
-            const instance = this._instances[id];
-            const maxPage = Math.ceil(instance.totalItems / instance.itemsPerPage);
-            if (page <= maxPage && 1 <= page) {
-                this._instances[id].currentPage = page;
-                this.notifyChange(id);
+        this._instances.update((current) => {
+            const instance = current[id];
+            if (instance) {
+                const maxPage = Math.ceil(instance.totalItems / instance.itemsPerPage);
+                if (page <= maxPage && 1 <= page) {
+                    // 创建新引用以确保 Signal 检测到变化
+                    current[id] = { ...instance, currentPage: page };
+                    return { ...current };
+                }
             }
-        }
+            return current;
+        });
+        // 通知分页器更新显示
+        this.notifyChange(id);
     }
     setTotalItems(id, totalItems) {
-        if (this._instances[id] && 0 <= totalItems) {
-            this._instances[id].totalItems = totalItems;
-            this.notifyChange(id);
-        }
+        this._instances.update((current) => {
+            const instance = current[id];
+            if (instance && 0 <= totalItems) {
+                current[id] = { ...instance, totalItems };
+                return { ...current };
+            }
+            return current;
+        });
+        // 通知分页器更新显示
+        this.notifyChange(id);
     }
     setItemsPerPage(id, itemsPerPage) {
-        if (this._instances[id]) {
-            this._instances[id].itemsPerPage = itemsPerPage;
-            this.notifyChange(id);
-        }
+        this._instances.update((current) => {
+            const instance = current[id];
+            if (instance) {
+                current[id] = { ...instance, itemsPerPage };
+                return { ...current };
+            }
+            return current;
+        });
+        // 通知分页器更新显示
+        this.notifyChange(id);
     }
     getInstance(id = this._defaultPaginationId) {
-        if (this._instances[id]) {
-            return this._clone(this._instances[id]);
+        const instance = this._instances()[id];
+        if (instance) {
+            return this._clone(instance);
         }
         return undefined;
     }
-    _updateInstance(instance) {
+    _updateInstance(current, incoming) {
         let changed = false;
-        if (instance.id) {
-            const currentInstance = this._instances[instance.id];
-            const keys = new Set([...Object.keys(currentInstance), ...Object.keys(instance)]);
+        if (incoming.id) {
+            const keys = new Set([...Object.keys(current), ...Object.keys(incoming)]);
             for (const prop of keys) {
                 const key = prop;
-                if (instance[key] !== currentInstance[key]) {
-                    currentInstance[key] = instance[key];
+                if (incoming[key] !== current[key]) {
+                    current[key] = incoming[key];
                     changed = true;
                 }
             }
         }
         return changed;
     }
+    _needsUpdate(current, incoming) {
+        // 检查是否有任何属性发生变化
+        const keys = new Set([...Object.keys(current), ...Object.keys(incoming)]);
+        for (const prop of keys) {
+            const key = prop;
+            if (incoming[key] !== current[key]) {
+                return true;
+            }
+        }
+        return false;
+    }
     _clone(obj) {
         return structuredClone(obj);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPaginationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPaginationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPaginationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPaginationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -105,27 +167,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 
 class CmatPaginationDirective {
     constructor() {
-        this.maxSize = 7;
-        this.pageChange = new EventEmitter();
-        this.pageBoundsCorrection = new EventEmitter();
-        this.perPageCountChange = new EventEmitter();
-        this.pages$ = signal([], ...(ngDevMode ? [{ debugName: "pages$" }] : /* istanbul ignore next */ []));
+        this.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.maxSize = input(7, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+        this.pageChange = output();
+        this.pageBoundsCorrection = output();
+        this.perPageCountChange = output();
+        this.pages = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
         this.service = inject(CmatPaginationService);
         this._injector = inject(Injector);
-        this._destroyRef = inject(DestroyRef);
         this._pageLinksUpdateQueued = false;
-        this.service.change$.pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((id) => {
-            if (this.id === id) {
-                this._schedulePageLinksUpdate();
+        effect(() => {
+            const instances = this.service.instances();
+            if (this._getId() === instances[this._getId()]?.id) {
+                untracked(() => {
+                    this._schedulePageLinksUpdate();
+                });
             }
         });
-    }
-    ngOnInit() {
-        this.id ??= this.service.defaultId();
-        this._schedulePageLinksUpdate();
-    }
-    ngOnChanges() {
         this._schedulePageLinksUpdate();
     }
     previous() {
@@ -171,10 +232,10 @@ class CmatPaginationDirective {
         }
     }
     getCurrent() {
-        return this.service.getCurrentPage(this.id);
+        return this.service.getCurrentPage(this._getId());
     }
     getLastPage() {
-        const inst = this.service.getInstance(this.id);
+        const inst = this.service.getInstance(this._getId());
         if (!inst) {
             return;
         }
@@ -184,32 +245,39 @@ class CmatPaginationDirective {
         return Math.ceil(inst.totalItems / inst.itemsPerPage);
     }
     getTotalItems() {
-        return this.service.getInstance(this.id)?.totalItems;
+        return this.service.getInstance(this._getId())?.totalItems;
     }
     setItemsPerPage(count) {
-        this.service.setItemsPerPage(this.id, count);
+        const id = this._getId();
+        this.service.setItemsPerPage(id, count);
         this.perPageCountChange.emit(count);
-        const inst = this.service.getInstance(this.id);
+        const inst = this.service.getInstance(id);
         if (!inst) {
             return;
         }
         this.setCurrent(this._outOfBoundCorrection(inst));
     }
+    _getId() {
+        return this.id() ?? this.service.defaultId();
+    }
     _checkValidId() {
-        if (this.service.getInstance(this.id)?.id == null) {
-            console.warn(`PaginationControlsDirective: the specified id "${this.id}" does not match any registered PaginationInstance`);
+        const id = this._getId();
+        if (this.service.getInstance(id)?.id == null) {
+            console.warn(`PaginationControlsDirective: the specified id "${id}" does not match any registered PaginationInstance`);
         }
     }
     _updatePageLinks() {
-        const inst = this.service.getInstance(this.id);
+        const inst = this.service.getInstance(this._getId());
         if (!inst) {
-            this.pages$.set([]);
+            this.pages.set([]);
             return;
         }
         const correctedCurrentPage = this._outOfBoundCorrection(inst);
-        const pageForRender = correctedCurrentPage !== inst.currentPage ? correctedCurrentPage : inst.currentPage;
+        const pageForRender = correctedCurrentPage !== inst.currentPage
+            ? correctedCurrentPage
+            : inst.currentPage;
         this.pageBoundsCorrection.emit(correctedCurrentPage);
-        this.pages$.set(this._createPageArray(pageForRender, inst.itemsPerPage, inst.totalItems, this.maxSize));
+        this.pages.set(this._createPageArray(pageForRender, inst.itemsPerPage, inst.totalItems, this.maxSize()));
     }
     _schedulePageLinksUpdate() {
         if (this._pageLinksUpdateQueued) {
@@ -244,8 +312,8 @@ class CmatPaginationDirective {
         while (i <= totalPages && i <= paginationRange) {
             let label;
             const pageNumber = this._calculatePageNumber(i, currentPage, paginationRange, totalPages);
-            const openingEllipsesNeeded = (i === 2 && (isMiddle || isEnd));
-            const closingEllipsesNeeded = (i === paginationRange - 1 && (isMiddle || isStart));
+            const openingEllipsesNeeded = i === 2 && (isMiddle || isEnd);
+            const closingEllipsesNeeded = i === paginationRange - 1 && (isMiddle || isStart);
             if (ellipsesNeeded && (openingEllipsesNeeded || closingEllipsesNeeded)) {
                 label = '...';
             }
@@ -254,7 +322,7 @@ class CmatPaginationDirective {
             }
             pages.push({
                 label: label,
-                value: pageNumber
+                value: pageNumber,
             });
             i++;
         }
@@ -283,77 +351,93 @@ class CmatPaginationDirective {
             return i;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: CmatPaginationDirective, isStandalone: true, selector: "pagination-template,[pagination-template]", inputs: { id: "id", maxSize: "maxSize" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["paginationApi"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: CmatPaginationDirective, isStandalone: true, selector: "pagination-template,[pagination-template]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["paginationApi"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPaginationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPaginationDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'pagination-template,[pagination-template]',
-                    exportAs: 'paginationApi'
+                    exportAs: 'paginationApi',
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{
-                type: Input
-            }], maxSize: [{
-                type: Input
-            }], pageChange: [{
-                type: Output
-            }], pageBoundsCorrection: [{
-                type: Output
-            }], perPageCountChange: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageBoundsCorrection: [{ type: i0.Output, args: ["pageBoundsCorrection"] }], perPageCountChange: [{ type: i0.Output, args: ["perPageCountChange"] }] } });
 
 class CmatPaginationComponent {
     constructor() {
-        this.pageChange = new EventEmitter();
-        this.pageBoundsCorrection = new EventEmitter();
-        this.perPageCountChange = new EventEmitter();
-        this.maxSize = 7;
-        this.itemsPerPages = [10, 20, 30];
-        this.initPerPage = 10;
-        this.isScreenSmall = signal(false, ...(ngDevMode ? [{ debugName: "isScreenSmall" }] : /* istanbul ignore next */ []));
-        this._cmatMediaWatcherService = inject(CmatMediaWatcherService);
+        this.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        this.maxSize = input(7, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+        this.itemsPerPages = input([10, 20, 30], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemsPerPages" }] : /* istanbul ignore next */ []));
+        this.initPerPage = input(10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initPerPage" }] : /* istanbul ignore next */ []));
+        this.autoHide = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoHide" }] : /* istanbul ignore next */ []));
+        this.pageChange = output();
+        this.pageBoundsCorrection = output();
+        this.perPageCountChange = output();
+        this._elementRef = inject(ElementRef);
         this._destroyRef = inject(DestroyRef);
-        this._autoHide = false;
-    }
-    get autoHide() {
-        return this._autoHide;
-    }
-    set autoHide(value) {
-        this._autoHide = !!value;
-    }
-    ngOnInit() {
-        this._cmatMediaWatcherService.onMediaChange$
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(({ matchingAliases }) => {
-            this.isScreenSmall.set(!matchingAliases.includes('md'));
+        // 组件宽度信号，初始化为一个合理默认值
+        this._componentWidth = signal(1024, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_componentWidth" }] : /* istanbul ignore next */ []));
+        // 根据组件自身宽度判断是否使用移动端样式（阈值：768px）
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.isScreenSmall = computed(() => {
+            return this._componentWidth() < 768;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isScreenSmall" }] : /* istanbul ignore next */ []));
+        // 使用 ResizeObserver 监听组件自身宽度变化
+        afterNextRender(() => {
+            const element = this._elementRef.nativeElement;
+            // 确保元素是块级或行内块级，可以正确测量宽度
+            if (getComputedStyle(element).display === 'inline') {
+                element.style.display = 'inline-block';
+                element.style.width = '100%';
+            }
+            // 立即获取一次初始宽度
+            const initialWidth = element.getBoundingClientRect().width;
+            if (initialWidth > 0) {
+                this._componentWidth.set(initialWidth);
+            }
+            // 创建 ResizeObserver
+            const resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    const width = entry.contentRect.width;
+                    // 只有当宽度大于0时才更新，避免无效值
+                    if (width > 0) {
+                        this._componentWidth.set(width);
+                    }
+                }
+            });
+            // 开始观察
+            resizeObserver.observe(element);
+            // 组件销毁时清理观察者
+            this._destroyRef.onDestroy(() => {
+                resizeObserver.disconnect();
+            });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatPaginationComponent, isStandalone: true, selector: "cmat-pagination", inputs: { id: "id", maxSize: "maxSize", itemsPerPages: "itemsPerPages", initPerPage: "initPerPage", autoHide: "autoHide" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["cmatPagination"], ngImport: i0, template: "<pagination-template #p=\"paginationApi\" class=\"w-full px-4 py-2 flex\" [id]=\"id\"\r\n  [maxSize]=\"isScreenSmall()&&maxSize>5?5:maxSize\" (pageChange)=\"pageChange.emit($event)\"\r\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\r\n  <div class=\"hidden md:flex flex-auto items-center\">\r\n    <span>\u603B\u8BA1:{{p.getTotalItems()}}</span>\r\n  </div>\r\n  <nav role=\"navigation\" class=\"flex min-h-12 w-full md:w-0\">\r\n    @if (!(autoHide && p.pages$().length <= 1)) {\r\n      <ul\r\n        class=\"flex flex-row items-center justify-center md:justify-end w-full\">\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.goFirstPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"pr-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.previous()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <div class=\"flex flex-row gap-4\">\r\n          @for (page of p.pages$(); track $index) {\r\n            <li class=\"flex text-xl lg:text-2xl\">\r\n              @if (p.getCurrent() !== page.value) {\r\n                <a tabindex=\"0\" role=\"presentation\"\r\n                  class=\"cursor-pointer text-gray-400 hover:text-current\" (click)=\"p.setCurrent(page.value)\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </a>\r\n              }\r\n              @if (p.getCurrent() === page.value) {\r\n                <span class=\"text-current\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </span>\r\n              }\r\n            </li>\r\n          }\r\n        </div>        \r\n        <li class=\"pl-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.next()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.goLastPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"hidden md:block px-2\">\r\n          <mat-form-field [ngStyle]=\"{'width':((p.getLastPage()?.toString()?.length||0)*8+64)+'px'}\">\r\n            <input #current matInput type=\"text\" cmatDigitOnly class=\"text-end\"\r\n              [value]=\"p.getCurrent()\" [autocomplete]=\"'off'\" [min]=\"0\" [max]=\"p.getLastPage()||0\"\r\n              (keyup.enter)=\"p.setCurrent(current.value)\">\r\n              <span matSuffix>/<div class=\"pl-1\">{{p.getLastPage()}}</div></span>\r\n            </mat-form-field>\r\n          </li>\r\n          <li class=\"hidden md:block\">\r\n            <mat-form-field class=\"w-24\">\r\n              <mat-select #pageCount name=\"pageCount\" [value]=\"initPerPage\"\r\n                (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\r\n                @for (perPage of itemsPerPages; track perPage) {\r\n                  <mat-option [value]=\"perPage\">\r\n                    {{perPage}}\r\n                  </mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </li>\r\n        </ul>\r\n      }\r\n    </nav>\r\n  </pagination-template>\r\n", dependencies: [{ kind: "directive", type: CmatPaginationDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection", "perPageCountChange"], exportAs: ["paginationApi"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatPaginationComponent, isStandalone: true, selector: "cmat-pagination", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPages: { classPropertyName: "itemsPerPages", publicName: "itemsPerPages", isSignal: true, isRequired: false, transformFunction: null }, initPerPage: { classPropertyName: "initPerPage", publicName: "initPerPage", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["cmatPagination"], ngImport: i0, template: "<pagination-template #p=\"paginationApi\" class=\"w-full px-4 py-2 flex\" [id]=\"id()\"\r\n  [maxSize]=\"isScreenSmall() && maxSize() > 5 ? 5 : maxSize()\" (pageChange)=\"pageChange.emit($event)\"\r\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\r\n  <div class=\"flex-auto items-center\" [ngClass]=\"{'hidden':isScreenSmall(),'flex':!isScreenSmall()}\">\r\n    <span>\u603B\u8BA1:{{ p.getTotalItems() }}</span>\r\n  </div>\r\n  <nav role=\"navigation\" class=\"flex min-h-12\" [ngClass]=\"{'w-full':isScreenSmall(),'w-0':!isScreenSmall()}\">\r\n    @if (!(autoHide() && p.pages().length <= 1)) { \r\n      <ul class=\"flex flex-row items-center w-full\"\r\n      [ngClass]=\"{'justify-center':isScreenSmall(),'justify-end':!isScreenSmall()}\">\r\n      <li>\r\n        <button type=\"button\" class=\"flex items-center\" matIconButton [disabled]=\"p.getCurrent() === 1\"\r\n          (click)=\"p.goFirstPage()\">\r\n          <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\r\n        </button>\r\n      </li>\r\n      <li class=\"pr-4\">\r\n        <button type=\"button\" class=\"flex items-center\" matIconButton [disabled]=\"p.getCurrent() === 1\"\r\n          (click)=\"p.previous()\">\r\n          <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\r\n        </button>\r\n      </li>\r\n      <div class=\"flex flex-row gap-4\">\r\n        @for (page of p.pages(); track $index) {\r\n        <li class=\"flex text-xl lg:text-2xl\">\r\n          @if (p.getCurrent() !== page.value) {\r\n          <a tabindex=\"0\" role=\"presentation\" class=\"cursor-pointer text-gray-400 hover:text-current\"\r\n            (click)=\"p.setCurrent(page.value)\">\r\n            <span>{{\r\n              page.label === \"...\"\r\n              ? page.label\r\n              : (page.label | number: \"\")\r\n              }}</span>\r\n          </a>\r\n          }\r\n          @if (p.getCurrent() === page.value) {\r\n          <span class=\"text-current\">\r\n            <span>{{\r\n              page.label === \"...\"\r\n              ? page.label\r\n              : (page.label | number: \"\")\r\n              }}</span>\r\n          </span>\r\n          }\r\n        </li>\r\n        }\r\n      </div>\r\n      <li class=\"pl-4\">\r\n        <button type=\"button\" class=\"flex items-center\" matIconButton [disabled]=\"p.getCurrent() === p.getLastPage()\"\r\n          (click)=\"p.next()\">\r\n          <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\r\n        </button>\r\n      </li>\r\n      <li>\r\n        <button type=\"button\" class=\"flex items-center\" matIconButton [disabled]=\"p.getCurrent() === p.getLastPage()\"\r\n          (click)=\"p.goLastPage()\">\r\n          <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\r\n        </button>\r\n      </li>\r\n      <li class=\"px-2\" [ngClass]=\"{'hidden':isScreenSmall(),'block':!isScreenSmall()}\">\r\n        <mat-form-field appearance=\"fill\" [ngStyle]=\"{\r\n              width: (p.getLastPage()?.toString()?.length || 0) * 8 + 64 + 'px',\r\n            }\">\r\n          <input #current matInput type=\"text\" cmatDigitOnly class=\"text-end\" [value]=\"p.getCurrent()\"\r\n            [autocomplete]=\"'off'\" [min]=\"0\" [max]=\"p.getLastPage() || 0\" (keyup.enter)=\"p.setCurrent(current.value)\" />\r\n          <span matSuffix>/\r\n            <div class=\"pl-1\">{{ p.getLastPage() }}</div>\r\n          </span>\r\n        </mat-form-field>\r\n      </li>\r\n      <li [ngClass]=\"{'hidden':isScreenSmall(),'block':!isScreenSmall()}\" >\r\n        <mat-form-field class=\"w-24\" appearance=\"fill\">\r\n          <mat-select #pageCount name=\"pageCount\" [value]=\"initPerPage()\"\r\n            (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\r\n            @for (perPage of itemsPerPages(); track perPage) {\r\n            <mat-option [value]=\"perPage\">\r\n              {{ perPage }}\r\n            </mat-option>\r\n            }\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </li>\r\n      </ul>\r\n      }\r\n  </nav>\r\n</pagination-template>", dependencies: [{ kind: "directive", type: CmatPaginationDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection", "perPageCountChange"], exportAs: ["paginationApi"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-pagination', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'cmatPagination', imports: [CmatPaginationDirective, MatIconModule, NgStyle, MatFormFieldModule, MatInputModule, CmatDigitOnlyDirective, MatSelectModule, DecimalPipe, MatButtonModule], template: "<pagination-template #p=\"paginationApi\" class=\"w-full px-4 py-2 flex\" [id]=\"id\"\r\n  [maxSize]=\"isScreenSmall()&&maxSize>5?5:maxSize\" (pageChange)=\"pageChange.emit($event)\"\r\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\r\n  <div class=\"hidden md:flex flex-auto items-center\">\r\n    <span>\u603B\u8BA1:{{p.getTotalItems()}}</span>\r\n  </div>\r\n  <nav role=\"navigation\" class=\"flex min-h-12 w-full md:w-0\">\r\n    @if (!(autoHide && p.pages$().length <= 1)) {\r\n      <ul\r\n        class=\"flex flex-row items-center justify-center md:justify-end w-full\">\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.goFirstPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"pr-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.previous()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <div class=\"flex flex-row gap-4\">\r\n          @for (page of p.pages$(); track $index) {\r\n            <li class=\"flex text-xl lg:text-2xl\">\r\n              @if (p.getCurrent() !== page.value) {\r\n                <a tabindex=\"0\" role=\"presentation\"\r\n                  class=\"cursor-pointer text-gray-400 hover:text-current\" (click)=\"p.setCurrent(page.value)\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </a>\r\n              }\r\n              @if (p.getCurrent() === page.value) {\r\n                <span class=\"text-current\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </span>\r\n              }\r\n            </li>\r\n          }\r\n        </div>        \r\n        <li class=\"pl-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.next()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.goLastPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"hidden md:block px-2\">\r\n          <mat-form-field [ngStyle]=\"{'width':((p.getLastPage()?.toString()?.length||0)*8+64)+'px'}\">\r\n            <input #current matInput type=\"text\" cmatDigitOnly class=\"text-end\"\r\n              [value]=\"p.getCurrent()\" [autocomplete]=\"'off'\" [min]=\"0\" [max]=\"p.getLastPage()||0\"\r\n              (keyup.enter)=\"p.setCurrent(current.value)\">\r\n              <span matSuffix>/<div class=\"pl-1\">{{p.getLastPage()}}</div></span>\r\n            </mat-form-field>\r\n          </li>\r\n          <li class=\"hidden md:block\">\r\n            <mat-form-field class=\"w-24\">\r\n              <mat-select #pageCount name=\"pageCount\" [value]=\"initPerPage\"\r\n                (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\r\n                @for (perPage of itemsPerPages; track perPage) {\r\n                  <mat-option [value]=\"perPage\">\r\n                    {{perPage}}\r\n                  </mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </li>\r\n        </ul>\r\n      }\r\n    </nav>\r\n  </pagination-template>\r\n" }]
-        }], propDecorators: { pageChange: [{
-                type: Output
-            }], pageBoundsCorrection: [{
-                type: Output
-            }], perPageCountChange: [{
-                type: Output
-            }], id: [{
-                type: Input
-            }], maxSize: [{
-                type: Input
-            }], itemsPerPages: [{
-                type: Input
-            }], initPerPage: [{
-                type: Input
-            }], autoHide: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-pagination', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'cmatPagination', imports: [
+                        CmatPaginationDirective,
+                        MatIconModule,
+                        NgStyle,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        CmatDigitOnlyDirective,
+                        MatSelectModule,
+                        DecimalPipe,
+                        MatButtonModule,
+                        NgClass
+                    ], template: "<pagination-template #p=\"paginationApi\" class=\"w-full px-4 py-2 flex\" [id]=\"id()\"\r\n  [maxSize]=\"isScreenSmall() && maxSize() > 5 ? 5 : maxSize()\" (pageChange)=\"pageChange.emit($event)\"\r\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\r\n  <div class=\"flex-auto items-center\" [ngClass]=\"{'hidden':isScreenSmall(),'flex':!isScreenSmall()}\">\r\n    <span>\u603B\u8BA1:{{ p.getTotalItems() }}</span>\r\n  </div>\r\n  <nav role=\"navigation\" class=\"flex min-h-12\" [ngClass]=\"{'w-full':isScreenSmall(),'w-0':!isScreenSmall()}\">\r\n    @if (!(autoHide() && p.pages().length <= 1)) { \r\n      <ul class=\"flex flex-row items-center w-full\"\r\n      [ngClass]=\"{'justify-center':isScreenSmall(),'justify-end':!isScreenSmall()}\">\r\n      <li>\r\n        <button type=\"button\" class=\"flex items-center\" matIconButton [disabled]=\"p.getCurrent() === 1\"\r\n          (click)=\"p.goFirstPage()\">\r\n          <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\r\n        </button>\r\n      </li>\r\n      <li class=\"pr-4\">\r\n        <button type=\"button\" class=\"flex items-center\" matIconButton [disabled]=\"p.getCurrent() === 1\"\r\n          (click)=\"p.previous()\">\r\n          <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\r\n        </button>\r\n      </li>\r\n      <div class=\"flex flex-row gap-4\">\r\n        @for (page of p.pages(); track $index) {\r\n        <li class=\"flex text-xl lg:text-2xl\">\r\n          @if (p.getCurrent() !== page.value) {\r\n          <a tabindex=\"0\" role=\"presentation\" class=\"cursor-pointer text-gray-400 hover:text-current\"\r\n            (click)=\"p.setCurrent(page.value)\">\r\n            <span>{{\r\n              page.label === \"...\"\r\n              ? page.label\r\n              : (page.label | number: \"\")\r\n              }}</span>\r\n          </a>\r\n          }\r\n          @if (p.getCurrent() === page.value) {\r\n          <span class=\"text-current\">\r\n            <span>{{\r\n              page.label === \"...\"\r\n              ? page.label\r\n              : (page.label | number: \"\")\r\n              }}</span>\r\n          </span>\r\n          }\r\n        </li>\r\n        }\r\n      </div>\r\n      <li class=\"pl-4\">\r\n        <button type=\"button\" class=\"flex items-center\" matIconButton [disabled]=\"p.getCurrent() === p.getLastPage()\"\r\n          (click)=\"p.next()\">\r\n          <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\r\n        </button>\r\n      </li>\r\n      <li>\r\n        <button type=\"button\" class=\"flex items-center\" matIconButton [disabled]=\"p.getCurrent() === p.getLastPage()\"\r\n          (click)=\"p.goLastPage()\">\r\n          <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\r\n        </button>\r\n      </li>\r\n      <li class=\"px-2\" [ngClass]=\"{'hidden':isScreenSmall(),'block':!isScreenSmall()}\">\r\n        <mat-form-field appearance=\"fill\" [ngStyle]=\"{\r\n              width: (p.getLastPage()?.toString()?.length || 0) * 8 + 64 + 'px',\r\n            }\">\r\n          <input #current matInput type=\"text\" cmatDigitOnly class=\"text-end\" [value]=\"p.getCurrent()\"\r\n            [autocomplete]=\"'off'\" [min]=\"0\" [max]=\"p.getLastPage() || 0\" (keyup.enter)=\"p.setCurrent(current.value)\" />\r\n          <span matSuffix>/\r\n            <div class=\"pl-1\">{{ p.getLastPage() }}</div>\r\n          </span>\r\n        </mat-form-field>\r\n      </li>\r\n      <li [ngClass]=\"{'hidden':isScreenSmall(),'block':!isScreenSmall()}\" >\r\n        <mat-form-field class=\"w-24\" appearance=\"fill\">\r\n          <mat-select #pageCount name=\"pageCount\" [value]=\"initPerPage()\"\r\n            (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\r\n            @for (perPage of itemsPerPages(); track perPage) {\r\n            <mat-option [value]=\"perPage\">\r\n              {{ perPage }}\r\n            </mat-option>\r\n            }\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </li>\r\n      </ul>\r\n      }\r\n  </nav>\r\n</pagination-template>" }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], itemsPerPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPages", required: false }] }], initPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "initPerPage", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageBoundsCorrection: [{ type: i0.Output, args: ["pageBoundsCorrection"] }], perPageCountChange: [{ type: i0.Output, args: ["perPageCountChange"] }] } });
 
 const LARGE_NUMBER = Number.MAX_SAFE_INTEGER;
 class CmatPaginatePipe {
@@ -374,7 +458,7 @@ class CmatPaginatePipe {
         let start;
         let end;
         const perPage = this._toNumber(args.itemsPerPage);
-        const emitChange = this.service.register(instance);
+        const emitChange = this.service.register(instance, true);
         if (!serverSideMode) {
             const pageSize = perPage || LARGE_NUMBER;
             start = (instance.currentPage - 1) * pageSize;
@@ -433,10 +517,10 @@ class CmatPaginatePipe {
     _toNumber(value) {
         return Number(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPaginatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: CmatPaginatePipe, isStandalone: true, name: "paginate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPaginatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: CmatPaginatePipe, isStandalone: true, name: "paginate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPaginatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPaginatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'paginate',