cmat 0.0.78 → 0.0.80

package/fesm2022/cmat-components-pagination.mjs

@@ -1,6 +1,7 @@
 import { NgStyle, DecimalPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, inject, ChangeDetectorRef, Output, Input, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, Pipe } 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 * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/form-field';
@@ -13,35 +14,38 @@ 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, takeUntil } from 'rxjs';
-import { isNil } from 'lodash-es';
+import { Subject } from 'rxjs';
 
 class CmatPaginationService {
     constructor() {
-        this.change = new EventEmitter();
+        this._change = new Subject();
         this._instances = {};
         this._defaultPaginationId = 'DEFAULT_PAGINATION_ID';
     }
+    get change$() {
+        return this._change.asObservable();
+    }
     defaultId() { return this._defaultPaginationId; }
+    notifyChange(id) {
+        this._change.next(id);
+    }
     register(instance) {
-        instance.id ??= this._defaultPaginationId;
-        if (!this._instances[instance.id]) {
-            this._instances[instance.id] = instance;
+        const normalizedInstance = {
+            ...structuredClone(instance),
+            id: instance.id ?? this._defaultPaginationId
+        };
+        const id = normalizedInstance.id;
+        if (!this._instances[id]) {
+            this._instances[id] = normalizedInstance;
             return true;
         }
-        else {
-            return this._updateInstance(instance);
-        }
+        return this._updateInstance(normalizedInstance);
     }
     getCurrentPage(id) {
-        if (this._instances[id]) {
-            return this._instances[id].currentPage;
-        }
+        return this._instances[id]?.currentPage;
     }
     getItemsPerPage(id) {
-        if (this._instances[id]) {
-            return this._instances[id].itemsPerPage;
-        }
+        return this._instances[id]?.itemsPerPage;
     }
     setCurrentPage(id, page) {
         if (this._instances[id]) {
@@ -49,34 +53,37 @@ class CmatPaginationService {
             const maxPage = Math.ceil(instance.totalItems / instance.itemsPerPage);
             if (page <= maxPage && 1 <= page) {
                 this._instances[id].currentPage = page;
-                this.change.emit(id);
+                this.notifyChange(id);
             }
         }
     }
     setTotalItems(id, totalItems) {
         if (this._instances[id] && 0 <= totalItems) {
             this._instances[id].totalItems = totalItems;
-            this.change.emit(id);
+            this.notifyChange(id);
         }
     }
     setItemsPerPage(id, itemsPerPage) {
         if (this._instances[id]) {
             this._instances[id].itemsPerPage = itemsPerPage;
-            this.change.emit(id);
+            this.notifyChange(id);
         }
     }
     getInstance(id = this._defaultPaginationId) {
         if (this._instances[id]) {
             return this._clone(this._instances[id]);
         }
-        return {};
+        return undefined;
     }
     _updateInstance(instance) {
         let changed = false;
         if (instance.id) {
-            for (const prop in this._instances[instance.id]) {
-                if (instance[prop] !== this._instances[instance.id][prop]) {
-                    this._instances[instance.id][prop] = instance[prop];
+            const currentInstance = this._instances[instance.id];
+            const keys = new Set([...Object.keys(currentInstance), ...Object.keys(instance)]);
+            for (const prop of keys) {
+                const key = prop;
+                if (instance[key] !== currentInstance[key]) {
+                    currentInstance[key] = instance[key];
                     changed = true;
                 }
             }
@@ -84,18 +91,12 @@ class CmatPaginationService {
         return changed;
     }
     _clone(obj) {
-        const target = {};
-        for (const i in obj) {
-            if (Object.prototype.hasOwnProperty.call(obj, i)) {
-                target[i] = obj[i];
-            }
-        }
-        return target;
+        return structuredClone(obj);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatPaginationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatPaginationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -108,28 +109,24 @@ class CmatPaginationDirective {
         this.pageChange = new EventEmitter();
         this.pageBoundsCorrection = new EventEmitter();
         this.perPageCountChange = new EventEmitter();
-        this.pages = [];
+        this.pages$ = signal([], ...(ngDevMode ? [{ debugName: "pages$" }] : /* istanbul ignore next */ []));
         this.service = inject(CmatPaginationService);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this._unsubscribeAll = new Subject();
-        this.service.change.pipe(takeUntil(this._unsubscribeAll))
+        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._updatePageLinks();
-                this.changeDetectorRef.markForCheck();
+                this._schedulePageLinksUpdate();
             }
         });
     }
     ngOnInit() {
         this.id ??= this.service.defaultId();
-        this._updatePageLinks();
+        this._schedulePageLinksUpdate();
     }
     ngOnChanges() {
-        this._updatePageLinks();
-    }
-    ngOnDestroy() {
-        this._unsubscribeAll.next(void 0);
-        this._unsubscribeAll.complete();
+        this._schedulePageLinksUpdate();
     }
     previous() {
         if (!this.isFirstPage()) {
@@ -168,46 +165,61 @@ class CmatPaginationDirective {
         return this.getLastPage() === this.getCurrent();
     }
     setCurrent(page) {
-        this.pageChange.emit(page);
+        const nextPage = Number(page);
+        if (!Number.isNaN(nextPage)) {
+            this.pageChange.emit(nextPage);
+        }
     }
     getCurrent() {
         return this.service.getCurrentPage(this.id);
     }
     getLastPage() {
         const inst = this.service.getInstance(this.id);
+        if (!inst) {
+            return;
+        }
         if (inst.totalItems < 1) {
-            // when there are 0 or fewer (an error case) items, there are no "pages" as such,
-            // but it makes sense to consider a single, empty page as the last page.
             return 1;
         }
         return Math.ceil(inst.totalItems / inst.itemsPerPage);
     }
     getTotalItems() {
-        return this.service.getInstance(this.id).totalItems;
+        return this.service.getInstance(this.id)?.totalItems;
     }
     setItemsPerPage(count) {
         this.service.setItemsPerPage(this.id, count);
         this.perPageCountChange.emit(count);
         const inst = this.service.getInstance(this.id);
+        if (!inst) {
+            return;
+        }
         this.setCurrent(this._outOfBoundCorrection(inst));
     }
     _checkValidId() {
-        if (this.service.getInstance(this.id).id == null) {
+        if (this.service.getInstance(this.id)?.id == null) {
             console.warn(`PaginationControlsDirective: the specified id "${this.id}" does not match any registered PaginationInstance`);
         }
     }
     _updatePageLinks() {
         const inst = this.service.getInstance(this.id);
-        const correctedCurrentPage = this._outOfBoundCorrection(inst);
-        if (correctedCurrentPage !== inst.currentPage) {
-            setTimeout(() => {
-                this.pageBoundsCorrection.emit(correctedCurrentPage);
-                this.pages = this._createPageArray(inst.currentPage, inst.itemsPerPage, inst.totalItems, this.maxSize);
-            });
+        if (!inst) {
+            this.pages$.set([]);
+            return;
         }
-        else {
-            this.pages = this._createPageArray(inst.currentPage, inst.itemsPerPage, inst.totalItems, this.maxSize);
+        const correctedCurrentPage = this._outOfBoundCorrection(inst);
+        const pageForRender = correctedCurrentPage !== inst.currentPage ? correctedCurrentPage : inst.currentPage;
+        this.pageBoundsCorrection.emit(correctedCurrentPage);
+        this.pages$.set(this._createPageArray(pageForRender, inst.itemsPerPage, inst.totalItems, this.maxSize));
+    }
+    _schedulePageLinksUpdate() {
+        if (this._pageLinksUpdateQueued) {
+            return;
         }
+        this._pageLinksUpdateQueued = true;
+        afterNextRender(() => {
+            this._pageLinksUpdateQueued = false;
+            this._updatePageLinks();
+        }, { injector: this._injector });
     }
     _outOfBoundCorrection(instance) {
         const totalPages = Math.ceil(instance.totalItems / instance.itemsPerPage);
@@ -271,10 +283,10 @@ class CmatPaginationDirective {
             return i;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", 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: "21.2.9", ngImport: i0, type: CmatPaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatPaginationDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -301,10 +313,10 @@ class CmatPaginationComponent {
         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._changeDetectorRef = inject(ChangeDetectorRef);
+        this._destroyRef = inject(DestroyRef);
         this._autoHide = false;
-        this._unsubscribeAll = new Subject();
     }
     get autoHide() {
         return this._autoHide;
@@ -314,18 +326,17 @@ class CmatPaginationComponent {
     }
     ngOnInit() {
         this._cmatMediaWatcherService.onMediaChange$
-            .pipe(takeUntil(this._unsubscribeAll))
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(({ matchingAliases }) => {
-            this.isScreenSmall = !matchingAliases.includes('md');
-            this._changeDetectorRef.markForCheck();
+            this.isScreenSmall.set(!matchingAliases.includes('md'));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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>", 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: "21.2.9", ngImport: i0, type: CmatPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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>" }]
+            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: [{
@@ -351,64 +362,55 @@ class CmatPaginatePipe {
         this.state = {};
     }
     transform(collection, args) {
-        if (!(collection instanceof Array)) {
+        if (!Array.isArray(collection)) {
             const _id = args.id ?? this.service.defaultId();
-            if (this.state[_id]) {
-                return this.state[_id].slice;
-            }
-            else {
-                return collection;
-            }
+            const cachedSlice = this.state[_id]?.slice;
+            return cachedSlice ?? collection;
         }
-        const serverSideMode = args.totalItems && args.totalItems !== collection.length;
-        const instance = this.createInstance(collection, args);
-        const id = instance.id;
+        const totalItems = this._toNumber(args.totalItems) || collection.length;
+        const serverSideMode = totalItems !== collection.length;
+        const instance = this.createInstance(collection, { ...args, totalItems });
+        const id = instance.id ?? this.service.defaultId();
         let start;
         let end;
-        let perPage = args.itemsPerPage;
+        const perPage = this._toNumber(args.itemsPerPage);
         const emitChange = this.service.register(instance);
-        if (!serverSideMode && collection instanceof Array) {
-            perPage = +perPage || LARGE_NUMBER;
-            start = (instance.currentPage - 1) * perPage;
-            end = start + perPage;
+        if (!serverSideMode) {
+            const pageSize = perPage || LARGE_NUMBER;
+            start = (instance.currentPage - 1) * pageSize;
+            end = start + pageSize;
             const isIdentical = this._stateIsIdentical(id, collection, start, end);
             if (isIdentical) {
                 return this.state[id].slice;
             }
-            else {
-                const slice = collection.slice(start, end);
-                this._saveState(id, collection, slice, start, end);
-                this.service.change.emit(id);
-                return slice;
-            }
+            const slice = collection.slice(start, end);
+            this._saveState(id, collection, slice, start, end);
+            this.service.notifyChange(id);
+            return slice;
         }
-        else {
-            if (emitChange) {
-                this.service.change.emit(id);
-            }
-            this._saveState(id, collection, collection, start, end);
-            return collection;
+        if (emitChange) {
+            this.service.notifyChange(id);
         }
+        this._saveState(id, collection, collection, start, end);
+        return collection;
     }
     createInstance(collection, config) {
         this.checkConfig(config);
         return {
-            id: !isNil(config.id) ? config.id : this.service.defaultId(),
-            itemsPerPage: +config.itemsPerPage || 10,
-            currentPage: +config.currentPage || 1,
-            totalItems: +config.totalItems || collection.length
+            id: config.id ?? this.service.defaultId(),
+            itemsPerPage: this._toNumber(config.itemsPerPage) || 10,
+            currentPage: this._toNumber(config.currentPage) || 1,
+            totalItems: this._toNumber(config.totalItems) || collection.length
         };
     }
     checkConfig(config) {
-        const required = ['itemsPerPage', 'currentPage'];
-        const missing = required.filter(prop => !(prop in config));
-        if (0 < missing.length) {
+        const missing = ['itemsPerPage', 'currentPage'].filter(prop => !(prop in config));
+        if (missing.length > 0) {
             throw new Error(`PaginatePipe: Argument is missing the following required properties: ${missing.join(', ')}`);
         }
     }
     _saveState(id, collection, slice, start, end) {
         this.state[id] = {
-            collection,
             size: collection.length,
             slice,
             start,
@@ -428,10 +430,13 @@ class CmatPaginatePipe {
         }
         return state.slice.every((element, index) => element === collection[start + index]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginatePipe, isStandalone: true, name: "paginate" }); }
+    _toNumber(value) {
+        return Number(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatPaginatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: CmatPaginatePipe, isStandalone: true, name: "paginate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatPaginatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatPaginatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'paginate',