@egose/shadcn-theme-ng 0.6.0 → 0.6.1

package/pagination/fesm2022/pagination.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, Directive, ChangeDetectionStrategy, Component, booleanAttribute, computed, model, numberAttribute, untracked, NgModule } from '@angular/core';
+import { input, Directive, ChangeDetectionStrategy, Component, booleanAttribute, computed, model, numberAttribute, effect, untracked, NgModule } from '@angular/core';
 import * as i1$1 from '@egose/shadcn-theme-ng/select';
 import { HlmSelectImports } from '@egose/shadcn-theme-ng/select';
 import { classes, hlm } from '@egose/shadcn-theme-ng/utils';
@@ -207,14 +207,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                 }]
         }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], queryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParams", required: false }] }], queryParamsHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamsHandling", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
 
+/** Shared arithmetic policy; invalid totals/sizes represent a single page. */
+function pageCount(totalItems, itemsPerPage) {
+    if (!Number.isFinite(totalItems) || totalItems <= 0 || !Number.isFinite(itemsPerPage) || itemsPerPage <= 0) {
+        return 1;
+    }
+    return Math.min(Number.MAX_SAFE_INTEGER, Math.max(1, Math.ceil(totalItems / itemsPerPage)));
+}
+
 class HlmNumberedPagination {
     /**
-     * The current (active) page.
+     * The current (active) page, floored and clamped to the available range.
+     * Corrections emit currentPageChange once; empty/invalid paging uses page 1.
      */
     currentPage = model.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
     /**
-     * The number of items per paginated page.
+     * The number of items per paginated page. Non-finite/non-positive sizes
+     * disable paging (one page) without rewriting this model.
      */
     itemsPerPage = model.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : /* istanbul ignore next */ []));
@@ -225,7 +235,8 @@ class HlmNumberedPagination {
      */
     totalItems = input.required({ ...(ngDevMode ? { debugName: "totalItems" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
-     * The number of page links to show.
+     * Maximum window entries, including ellipses: floored and bounded to 1–100.
+     * Non-finite/non-positive values use the default of 7.
      */
     maxSize = input(7, { ...(ngDevMode ? { debugName: "maxSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
@@ -245,33 +256,29 @@ class HlmNumberedPagination {
             : [...pageSizes, this.itemsPerPage()].sort((a, b) => a - b); // otherwise, add current page size and sort the array
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_pageSizesWithCurrent" }] : /* istanbul ignore next */ []));
-    _isFirstPageActive = computed(() => this.currentPage() === 1, /* @ts-ignore */
+    _currentPage = computed(() => outOfBoundCorrection(this.totalItems(), this.itemsPerPage(), this.currentPage()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_currentPage" }] : /* istanbul ignore next */ []));
+    _isFirstPageActive = computed(() => this._currentPage() === 1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isFirstPageActive" }] : /* istanbul ignore next */ []));
-    _isLastPageActive = computed(() => this.currentPage() === this._lastPageNumber(), /* @ts-ignore */
+    _isLastPageActive = computed(() => this._currentPage() === this._lastPageNumber(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isLastPageActive" }] : /* istanbul ignore next */ []));
-    _lastPageNumber = computed(() => {
-        if (this.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(this.totalItems() / this.itemsPerPage());
-    }, /* @ts-ignore */
+    _lastPageNumber = computed(() => pageCount(this.totalItems(), this.itemsPerPage()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_lastPageNumber" }] : /* istanbul ignore next */ []));
-    _pages = computed(() => {
-        const correctedCurrentPage = outOfBoundCorrection(this.totalItems(), this.itemsPerPage(), this.currentPage());
-        if (correctedCurrentPage !== this.currentPage()) {
-            // update the current page
-            untracked(() => this.currentPage.set(correctedCurrentPage));
-        }
-        return createPageArray(correctedCurrentPage, this.itemsPerPage(), this.totalItems(), this.maxSize());
-    }, /* @ts-ignore */
+    _pages = computed(() => createPageArray(this._currentPage(), this.itemsPerPage(), this.totalItems(), this.maxSize()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_pages" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const page = this._currentPage();
+            if (page !== this.currentPage()) {
+                untracked(() => this.currentPage.set(page));
+            }
+        });
+    }
     goToPrevious() {
-        this.currentPage.set(this.currentPage() - 1);
+        this.currentPage.set(Math.max(1, this._currentPage() - 1));
     }
     goToNext() {
-        this.currentPage.set(this.currentPage() + 1);
+        this.currentPage.set(Math.min(this._lastPageNumber(), this._currentPage() + 1));
     }
     goToFirst() {
         this.currentPage.set(1);
@@ -280,7 +287,7 @@ class HlmNumberedPagination {
         this.currentPage.set(this._lastPageNumber());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNumberedPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmNumberedPagination, isStandalone: true, selector: "hlm-numbered-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, showEdges: { classPropertyName: "showEdges", publicName: "showEdges", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", itemsPerPage: "itemsPerPageChange" }, ngImport: i0, template: "\n    <div class=\"flex items-center justify-between gap-2 px-4 py-2\">\n      <div class=\"flex items-center gap-1 text-sm text-nowrap text-gray-600\">\n        <b>{{ totalItems() }}</b>\n        total items |\n        <b>{{ _lastPageNumber() }}</b>\n        pages\n      </div>\n\n      <nav hlmPagination>\n        <ul hlmPaginationContent>\n          @if (showEdges() && !_isFirstPageActive()) {\n            <li hlmPaginationItem (click)=\"goToPrevious()\">\n              <hlm-pagination-previous />\n            </li>\n          }\n\n          @for (page of _pages(); track page) {\n            <li hlmPaginationItem>\n              @if (page === '...') {\n                <hlm-pagination-ellipsis />\n              } @else {\n                <a hlmPaginationLink [isActive]=\"currentPage() === page\" (click)=\"currentPage.set(page)\">\n                  {{ page }}\n                </a>\n              }\n            </li>\n          }\n\n          @if (showEdges() && !_isLastPageActive()) {\n            <li hlmPaginationItem (click)=\"goToNext()\">\n              <hlm-pagination-next />\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <!-- Show Page Size selector -->\n      <hlm-select [(value)]=\"itemsPerPage\" class=\"ml-auto\">\n        <hlm-select-trigger class=\"w-fit\">\n          <hlm-select-value />\n        </hlm-select-trigger>\n        <hlm-select-content *hlmSelectPortal>\n          <hlm-select-group>\n            @for (pageSize of _pageSizesWithCurrent(); track pageSize) {\n              <hlm-select-item [value]=\"pageSize\">{{ pageSize }}</hlm-select-item>\n            }\n          </hlm-select-group>\n        </hlm-select-content>\n      </hlm-select>\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: HlmPagination, selector: "[hlmPagination],hlm-pagination", inputs: ["aria-label"] }, { kind: "directive", type: HlmPaginationContent, selector: "ul[hlmPaginationContent]" }, { kind: "directive", type: HlmPaginationItem, selector: "li[hlmPaginationItem]" }, { kind: "component", type: HlmPaginationPrevious, selector: "hlm-pagination-previous", inputs: ["class", "link", "queryParams", "queryParamsHandling", "aria-label", "text", "iconOnly"] }, { kind: "component", type: HlmPaginationNext, selector: "hlm-pagination-next", inputs: ["class", "link", "queryParams", "queryParamsHandling", "aria-label", "text", "iconOnly"] }, { kind: "directive", type: HlmPaginationLink, selector: "[hlmPaginationLink]", inputs: ["isActive", "size", "link"] }, { kind: "component", type: HlmPaginationEllipsis, selector: "hlm-pagination-ellipsis", inputs: ["srOnlyText"] }, { kind: "directive", type: i1$1.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i1$1.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i1$1.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i1$1.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i1$1.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i1$1.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i1$1.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmNumberedPagination, isStandalone: true, selector: "hlm-numbered-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, showEdges: { classPropertyName: "showEdges", publicName: "showEdges", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", itemsPerPage: "itemsPerPageChange" }, ngImport: i0, template: "\n    <div class=\"flex items-center justify-between gap-2 px-4 py-2\">\n      <div class=\"flex items-center gap-1 text-sm text-nowrap text-gray-600\">\n        <b>{{ totalItems() }}</b>\n        total items |\n        <b>{{ _lastPageNumber() }}</b>\n        pages\n      </div>\n\n      <nav hlmPagination>\n        <ul hlmPaginationContent>\n          @if (showEdges() && !_isFirstPageActive()) {\n            <li hlmPaginationItem (click)=\"goToPrevious()\">\n              <hlm-pagination-previous />\n            </li>\n          }\n\n          @for (page of _pages(); track $index) {\n            <li hlmPaginationItem>\n              @if (page === '...') {\n                <hlm-pagination-ellipsis />\n              } @else {\n                <a hlmPaginationLink [isActive]=\"_currentPage() === page\" (click)=\"currentPage.set(page)\">\n                  {{ page }}\n                </a>\n              }\n            </li>\n          }\n\n          @if (showEdges() && !_isLastPageActive()) {\n            <li hlmPaginationItem (click)=\"goToNext()\">\n              <hlm-pagination-next />\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <!-- Show Page Size selector -->\n      <hlm-select [(value)]=\"itemsPerPage\" class=\"ml-auto\">\n        <hlm-select-trigger class=\"w-fit\">\n          <hlm-select-value />\n        </hlm-select-trigger>\n        <hlm-select-content *hlmSelectPortal>\n          <hlm-select-group>\n            @for (pageSize of _pageSizesWithCurrent(); track pageSize) {\n              <hlm-select-item [value]=\"pageSize\">{{ pageSize }}</hlm-select-item>\n            }\n          </hlm-select-group>\n        </hlm-select-content>\n      </hlm-select>\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: HlmPagination, selector: "[hlmPagination],hlm-pagination", inputs: ["aria-label"] }, { kind: "directive", type: HlmPaginationContent, selector: "ul[hlmPaginationContent]" }, { kind: "directive", type: HlmPaginationItem, selector: "li[hlmPaginationItem]" }, { kind: "component", type: HlmPaginationPrevious, selector: "hlm-pagination-previous", inputs: ["class", "link", "queryParams", "queryParamsHandling", "aria-label", "text", "iconOnly"] }, { kind: "component", type: HlmPaginationNext, selector: "hlm-pagination-next", inputs: ["class", "link", "queryParams", "queryParamsHandling", "aria-label", "text", "iconOnly"] }, { kind: "directive", type: HlmPaginationLink, selector: "[hlmPaginationLink]", inputs: ["isActive", "size", "link"] }, { kind: "component", type: HlmPaginationEllipsis, selector: "hlm-pagination-ellipsis", inputs: ["srOnlyText"] }, { kind: "directive", type: i1$1.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i1$1.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i1$1.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i1$1.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i1$1.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i1$1.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i1$1.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNumberedPagination, decorators: [{
             type: Component,
@@ -297,37 +304,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         HlmSelectImports,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: "\n    <div class=\"flex items-center justify-between gap-2 px-4 py-2\">\n      <div class=\"flex items-center gap-1 text-sm text-nowrap text-gray-600\">\n        <b>{{ totalItems() }}</b>\n        total items |\n        <b>{{ _lastPageNumber() }}</b>\n        pages\n      </div>\n\n      <nav hlmPagination>\n        <ul hlmPaginationContent>\n          @if (showEdges() && !_isFirstPageActive()) {\n            <li hlmPaginationItem (click)=\"goToPrevious()\">\n              <hlm-pagination-previous />\n            </li>\n          }\n\n          @for (page of _pages(); track page) {\n            <li hlmPaginationItem>\n              @if (page === '...') {\n                <hlm-pagination-ellipsis />\n              } @else {\n                <a hlmPaginationLink [isActive]=\"currentPage() === page\" (click)=\"currentPage.set(page)\">\n                  {{ page }}\n                </a>\n              }\n            </li>\n          }\n\n          @if (showEdges() && !_isLastPageActive()) {\n            <li hlmPaginationItem (click)=\"goToNext()\">\n              <hlm-pagination-next />\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <!-- Show Page Size selector -->\n      <hlm-select [(value)]=\"itemsPerPage\" class=\"ml-auto\">\n        <hlm-select-trigger class=\"w-fit\">\n          <hlm-select-value />\n        </hlm-select-trigger>\n        <hlm-select-content *hlmSelectPortal>\n          <hlm-select-group>\n            @for (pageSize of _pageSizesWithCurrent(); track pageSize) {\n              <hlm-select-item [value]=\"pageSize\">{{ pageSize }}</hlm-select-item>\n            }\n          </hlm-select-group>\n        </hlm-select-content>\n      </hlm-select>\n    </div>\n  ",
+                    template: "\n    <div class=\"flex items-center justify-between gap-2 px-4 py-2\">\n      <div class=\"flex items-center gap-1 text-sm text-nowrap text-gray-600\">\n        <b>{{ totalItems() }}</b>\n        total items |\n        <b>{{ _lastPageNumber() }}</b>\n        pages\n      </div>\n\n      <nav hlmPagination>\n        <ul hlmPaginationContent>\n          @if (showEdges() && !_isFirstPageActive()) {\n            <li hlmPaginationItem (click)=\"goToPrevious()\">\n              <hlm-pagination-previous />\n            </li>\n          }\n\n          @for (page of _pages(); track $index) {\n            <li hlmPaginationItem>\n              @if (page === '...') {\n                <hlm-pagination-ellipsis />\n              } @else {\n                <a hlmPaginationLink [isActive]=\"_currentPage() === page\" (click)=\"currentPage.set(page)\">\n                  {{ page }}\n                </a>\n              }\n            </li>\n          }\n\n          @if (showEdges() && !_isLastPageActive()) {\n            <li hlmPaginationItem (click)=\"goToNext()\">\n              <hlm-pagination-next />\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <!-- Show Page Size selector -->\n      <hlm-select [(value)]=\"itemsPerPage\" class=\"ml-auto\">\n        <hlm-select-trigger class=\"w-fit\">\n          <hlm-select-value />\n        </hlm-select-trigger>\n        <hlm-select-content *hlmSelectPortal>\n          <hlm-select-group>\n            @for (pageSize of _pageSizesWithCurrent(); track pageSize) {\n              <hlm-select-item [value]=\"pageSize\">{{ pageSize }}</hlm-select-item>\n            }\n          </hlm-select-group>\n        </hlm-select-content>\n      </hlm-select>\n    </div>\n  ",
                 }]
-        }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: true }] }, { type: i0.Output, args: ["currentPageChange"] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: true }] }, { type: i0.Output, args: ["itemsPerPageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], showEdges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdges", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: true }] }, { type: i0.Output, args: ["currentPageChange"] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: true }] }, { type: i0.Output, args: ["itemsPerPageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], showEdges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdges", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }] } });
 /**
  * Checks that the instance.currentPage property is within bounds for the current page range.
  * If not, return a correct value for currentPage, or the current value if OK.
  *
- * Copied from 'ngx-pagination' package
+ * Empty/invalid totals or sizes use page 1. Finite pages are floored;
+ * non-finite pages use 1. Page counts saturate at Number.MAX_SAFE_INTEGER.
  */
 function outOfBoundCorrection(totalItems, itemsPerPage, currentPage) {
-    const totalPages = Math.ceil(totalItems / itemsPerPage);
-    if (totalPages < currentPage && 0 < totalPages) {
-        return totalPages;
-    }
-    if (currentPage < 1) {
-        return 1;
-    }
-    return currentPage;
+    const page = Number.isFinite(currentPage) ? Math.floor(currentPage) : 1;
+    return Math.max(1, Math.min(pageCount(totalItems, itemsPerPage), page));
 }
 /**
  * Returns an array of Page objects to use in the pagination controls.
  *
- * Copied from 'ngx-pagination' package
+ * Window math adapted from 'ngx-pagination'. Range is floored and bounded to
+ * 1–100 entries (including gaps); non-finite/non-positive ranges use 7.
+ * Ranges below 5 show a contiguous window containing the active page.
+ * Work and allocation are proportional to this bounded window, not total pages.
  */
 function createPageArray(currentPage, itemsPerPage, totalItems, paginationRange) {
-    // paginationRange could be a string if passed from attribute, so cast to number.
-    paginationRange = +paginationRange;
+    paginationRange =
+        Number.isFinite(paginationRange) && paginationRange > 0
+            ? Math.min(100, Math.max(1, Math.floor(paginationRange)))
+            : 7;
     const pages = [];
-    // Return 1 as default page number
-    // Make sense to show 1 instead of empty when there are no items
-    const totalPages = Math.max(Math.ceil(totalItems / itemsPerPage), 1);
+    const totalPages = pageCount(totalItems, itemsPerPage);
+    currentPage = outOfBoundCorrection(totalItems, itemsPerPage, currentPage);
+    if (paginationRange < 5) {
+        const length = Math.min(totalPages, paginationRange);
+        const start = Math.max(1, Math.min(currentPage - Math.floor(length / 2), totalPages - length + 1));
+        return Array.from({ length }, (_, index) => start + index);
+    }
     const halfWay = Math.ceil(paginationRange / 2);
     const isStart = currentPage <= halfWay;
     const isEnd = totalPages - halfWay < currentPage;
@@ -378,12 +389,14 @@ function calculatePageNumber(i, currentPage, paginationRange, totalPages) {
 
 class HlmNumberedPaginationQueryParams {
     /**
-     * The current (active) page.
+     * The current page, floored and clamped; corrections emit currentPageChange.
+     * The parent owns reading/synchronizing the URL; corrections do not navigate.
      */
     currentPage = model.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
     /**
-     * The number of items per paginated page.
+     * The number of items per paginated page. Non-finite/non-positive sizes
+     * disable paging (one page) without rewriting this model.
      */
     itemsPerPage = model.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : /* istanbul ignore next */ []));
@@ -400,7 +413,8 @@ class HlmNumberedPaginationQueryParams {
     link = input('.', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
     /**
-     * The number of page links to show.
+     * Maximum window entries, including ellipses: floored and bounded to 1–100.
+     * Non-finite/non-positive values use the default of 7.
      */
     maxSize = input(7, { ...(ngDevMode ? { debugName: "maxSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
@@ -420,33 +434,27 @@ class HlmNumberedPaginationQueryParams {
             : [...pageSizes, this.itemsPerPage()].sort((a, b) => a - b); // otherwise, add current page size and sort the array
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_pageSizesWithCurrent" }] : /* istanbul ignore next */ []));
-    _isFirstPageActive = computed(() => this.currentPage() === 1, /* @ts-ignore */
+    _currentPage = computed(() => outOfBoundCorrection(this.totalItems(), this.itemsPerPage(), this.currentPage()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_currentPage" }] : /* istanbul ignore next */ []));
+    _isFirstPageActive = computed(() => this._currentPage() === 1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isFirstPageActive" }] : /* istanbul ignore next */ []));
-    _isLastPageActive = computed(() => this.currentPage() === this._lastPageNumber(), /* @ts-ignore */
+    _isLastPageActive = computed(() => this._currentPage() === this._lastPageNumber(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isLastPageActive" }] : /* istanbul ignore next */ []));
-    _lastPageNumber = computed(() => {
-        if (this.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(this.totalItems() / this.itemsPerPage());
-    }, /* @ts-ignore */
+    _lastPageNumber = computed(() => pageCount(this.totalItems(), this.itemsPerPage()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_lastPageNumber" }] : /* istanbul ignore next */ []));
-    _pages = computed(() => {
-        const correctedCurrentPage = outOfBoundCorrection(this.totalItems(), this.itemsPerPage(), this.currentPage());
-        if (correctedCurrentPage !== this.currentPage()) {
-            // update the current page
-            untracked(() => this.currentPage.set(correctedCurrentPage));
-        }
-        return createPageArray(correctedCurrentPage, this.itemsPerPage(), this.totalItems(), this.maxSize());
-    }, /* @ts-ignore */
+    _pages = computed(() => createPageArray(this._currentPage(), this.itemsPerPage(), this.totalItems(), this.maxSize()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_pages" }] : /* istanbul ignore next */ []));
     constructor() {
         classes(() => "flex items-center justify-between gap-2 px-4 py-2");
+        effect(() => {
+            const page = this._currentPage();
+            if (page !== this.currentPage()) {
+                untracked(() => this.currentPage.set(page));
+            }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNumberedPaginationQueryParams, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmNumberedPaginationQueryParams, isStandalone: true, selector: "hlm-numbered-pagination-query-params", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, showEdges: { classPropertyName: "showEdges", publicName: "showEdges", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", itemsPerPage: "itemsPerPageChange" }, ngImport: i0, template: "\n    <div class=\"flex items-center gap-1 text-sm text-nowrap text-gray-600\">\n      <b>{{ totalItems() }}</b>\n      total items |\n      <b>{{ _lastPageNumber() }}</b>\n      pages\n    </div>\n\n    <nav hlmPagination>\n      <ul hlmPaginationContent>\n        @if (showEdges() && !_isFirstPageActive()) {\n          <li hlmPaginationItem>\n            <hlm-pagination-previous\n              [link]=\"link()\"\n              [queryParams]=\"{ page: currentPage() - 1 }\"\n              queryParamsHandling=\"merge\"\n            />\n          </li>\n        }\n\n        @for (page of _pages(); track page) {\n          <li hlmPaginationItem>\n            @if (page === '...') {\n              <hlm-pagination-ellipsis />\n            } @else {\n              <a\n                hlmPaginationLink\n                [link]=\"currentPage() !== page ? link() : undefined\"\n                [queryParams]=\"{ page }\"\n                queryParamsHandling=\"merge\"\n                [isActive]=\"currentPage() === page\"\n              >\n                {{ page }}\n              </a>\n            }\n          </li>\n        }\n\n        @if (showEdges() && !_isLastPageActive()) {\n          <li hlmPaginationItem>\n            <hlm-pagination-next\n              [link]=\"link()\"\n              [queryParams]=\"{ page: currentPage() + 1 }\"\n              queryParamsHandling=\"merge\"\n            />\n          </li>\n        }\n      </ul>\n    </nav>\n\n    <!-- Show Page Size selector -->\n    <hlm-select [(value)]=\"itemsPerPage\" class=\"ml-auto\">\n      <hlm-select-trigger class=\"w-fit\">\n        <hlm-select-value />\n      </hlm-select-trigger>\n      <hlm-select-content *hlmSelectPortal>\n        <hlm-select-group>\n          @for (pageSize of _pageSizesWithCurrent(); track pageSize) {\n            <hlm-select-item [value]=\"pageSize\">{{ pageSize }}</hlm-select-item>\n          }\n        </hlm-select-group>\n      </hlm-select-content>\n    </hlm-select>\n  ", isInline: true, dependencies: [{ kind: "directive", type: HlmPagination, selector: "[hlmPagination],hlm-pagination", inputs: ["aria-label"] }, { kind: "directive", type: HlmPaginationContent, selector: "ul[hlmPaginationContent]" }, { kind: "directive", type: HlmPaginationItem, selector: "li[hlmPaginationItem]" }, { kind: "component", type: HlmPaginationPrevious, selector: "hlm-pagination-previous", inputs: ["class", "link", "queryParams", "queryParamsHandling", "aria-label", "text", "iconOnly"] }, { kind: "component", type: HlmPaginationNext, selector: "hlm-pagination-next", inputs: ["class", "link", "queryParams", "queryParamsHandling", "aria-label", "text", "iconOnly"] }, { kind: "directive", type: HlmPaginationLink, selector: "[hlmPaginationLink]", inputs: ["isActive", "size", "link"] }, { kind: "component", type: HlmPaginationEllipsis, selector: "hlm-pagination-ellipsis", inputs: ["srOnlyText"] }, { kind: "directive", type: i1$1.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i1$1.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i1$1.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i1$1.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i1$1.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i1$1.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i1$1.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmNumberedPaginationQueryParams, isStandalone: true, selector: "hlm-numbered-pagination-query-params", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: true, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: true, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, showEdges: { classPropertyName: "showEdges", publicName: "showEdges", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", itemsPerPage: "itemsPerPageChange" }, ngImport: i0, template: "\n    <div class=\"flex items-center gap-1 text-sm text-nowrap text-gray-600\">\n      <b>{{ totalItems() }}</b>\n      total items |\n      <b>{{ _lastPageNumber() }}</b>\n      pages\n    </div>\n\n    <nav hlmPagination>\n      <ul hlmPaginationContent>\n        @if (showEdges() && !_isFirstPageActive()) {\n          <li hlmPaginationItem>\n            <hlm-pagination-previous\n              [link]=\"link()\"\n              [queryParams]=\"{ page: _currentPage() - 1 }\"\n              queryParamsHandling=\"merge\"\n            />\n          </li>\n        }\n\n        @for (page of _pages(); track $index) {\n          <li hlmPaginationItem>\n            @if (page === '...') {\n              <hlm-pagination-ellipsis />\n            } @else {\n              <a\n                hlmPaginationLink\n                [link]=\"_currentPage() !== page ? link() : undefined\"\n                [queryParams]=\"{ page }\"\n                queryParamsHandling=\"merge\"\n                [isActive]=\"_currentPage() === page\"\n              >\n                {{ page }}\n              </a>\n            }\n          </li>\n        }\n\n        @if (showEdges() && !_isLastPageActive()) {\n          <li hlmPaginationItem>\n            <hlm-pagination-next\n              [link]=\"link()\"\n              [queryParams]=\"{ page: _currentPage() + 1 }\"\n              queryParamsHandling=\"merge\"\n            />\n          </li>\n        }\n      </ul>\n    </nav>\n\n    <!-- Show Page Size selector -->\n    <hlm-select [(value)]=\"itemsPerPage\" class=\"ml-auto\">\n      <hlm-select-trigger class=\"w-fit\">\n        <hlm-select-value />\n      </hlm-select-trigger>\n      <hlm-select-content *hlmSelectPortal>\n        <hlm-select-group>\n          @for (pageSize of _pageSizesWithCurrent(); track pageSize) {\n            <hlm-select-item [value]=\"pageSize\">{{ pageSize }}</hlm-select-item>\n          }\n        </hlm-select-group>\n      </hlm-select-content>\n    </hlm-select>\n  ", isInline: true, dependencies: [{ kind: "directive", type: HlmPagination, selector: "[hlmPagination],hlm-pagination", inputs: ["aria-label"] }, { kind: "directive", type: HlmPaginationContent, selector: "ul[hlmPaginationContent]" }, { kind: "directive", type: HlmPaginationItem, selector: "li[hlmPaginationItem]" }, { kind: "component", type: HlmPaginationPrevious, selector: "hlm-pagination-previous", inputs: ["class", "link", "queryParams", "queryParamsHandling", "aria-label", "text", "iconOnly"] }, { kind: "component", type: HlmPaginationNext, selector: "hlm-pagination-next", inputs: ["class", "link", "queryParams", "queryParamsHandling", "aria-label", "text", "iconOnly"] }, { kind: "directive", type: HlmPaginationLink, selector: "[hlmPaginationLink]", inputs: ["isActive", "size", "link"] }, { kind: "component", type: HlmPaginationEllipsis, selector: "hlm-pagination-ellipsis", inputs: ["srOnlyText"] }, { kind: "directive", type: i1$1.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i1$1.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i1$1.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i1$1.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i1$1.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i1$1.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i1$1.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmNumberedPaginationQueryParams, decorators: [{
             type: Component,
@@ -463,7 +471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         HlmSelectImports,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: "\n    <div class=\"flex items-center gap-1 text-sm text-nowrap text-gray-600\">\n      <b>{{ totalItems() }}</b>\n      total items |\n      <b>{{ _lastPageNumber() }}</b>\n      pages\n    </div>\n\n    <nav hlmPagination>\n      <ul hlmPaginationContent>\n        @if (showEdges() && !_isFirstPageActive()) {\n          <li hlmPaginationItem>\n            <hlm-pagination-previous\n              [link]=\"link()\"\n              [queryParams]=\"{ page: currentPage() - 1 }\"\n              queryParamsHandling=\"merge\"\n            />\n          </li>\n        }\n\n        @for (page of _pages(); track page) {\n          <li hlmPaginationItem>\n            @if (page === '...') {\n              <hlm-pagination-ellipsis />\n            } @else {\n              <a\n                hlmPaginationLink\n                [link]=\"currentPage() !== page ? link() : undefined\"\n                [queryParams]=\"{ page }\"\n                queryParamsHandling=\"merge\"\n                [isActive]=\"currentPage() === page\"\n              >\n                {{ page }}\n              </a>\n            }\n          </li>\n        }\n\n        @if (showEdges() && !_isLastPageActive()) {\n          <li hlmPaginationItem>\n            <hlm-pagination-next\n              [link]=\"link()\"\n              [queryParams]=\"{ page: currentPage() + 1 }\"\n              queryParamsHandling=\"merge\"\n            />\n          </li>\n        }\n      </ul>\n    </nav>\n\n    <!-- Show Page Size selector -->\n    <hlm-select [(value)]=\"itemsPerPage\" class=\"ml-auto\">\n      <hlm-select-trigger class=\"w-fit\">\n        <hlm-select-value />\n      </hlm-select-trigger>\n      <hlm-select-content *hlmSelectPortal>\n        <hlm-select-group>\n          @for (pageSize of _pageSizesWithCurrent(); track pageSize) {\n            <hlm-select-item [value]=\"pageSize\">{{ pageSize }}</hlm-select-item>\n          }\n        </hlm-select-group>\n      </hlm-select-content>\n    </hlm-select>\n  ",
+                    template: "\n    <div class=\"flex items-center gap-1 text-sm text-nowrap text-gray-600\">\n      <b>{{ totalItems() }}</b>\n      total items |\n      <b>{{ _lastPageNumber() }}</b>\n      pages\n    </div>\n\n    <nav hlmPagination>\n      <ul hlmPaginationContent>\n        @if (showEdges() && !_isFirstPageActive()) {\n          <li hlmPaginationItem>\n            <hlm-pagination-previous\n              [link]=\"link()\"\n              [queryParams]=\"{ page: _currentPage() - 1 }\"\n              queryParamsHandling=\"merge\"\n            />\n          </li>\n        }\n\n        @for (page of _pages(); track $index) {\n          <li hlmPaginationItem>\n            @if (page === '...') {\n              <hlm-pagination-ellipsis />\n            } @else {\n              <a\n                hlmPaginationLink\n                [link]=\"_currentPage() !== page ? link() : undefined\"\n                [queryParams]=\"{ page }\"\n                queryParamsHandling=\"merge\"\n                [isActive]=\"_currentPage() === page\"\n              >\n                {{ page }}\n              </a>\n            }\n          </li>\n        }\n\n        @if (showEdges() && !_isLastPageActive()) {\n          <li hlmPaginationItem>\n            <hlm-pagination-next\n              [link]=\"link()\"\n              [queryParams]=\"{ page: _currentPage() + 1 }\"\n              queryParamsHandling=\"merge\"\n            />\n          </li>\n        }\n      </ul>\n    </nav>\n\n    <!-- Show Page Size selector -->\n    <hlm-select [(value)]=\"itemsPerPage\" class=\"ml-auto\">\n      <hlm-select-trigger class=\"w-fit\">\n        <hlm-select-value />\n      </hlm-select-trigger>\n      <hlm-select-content *hlmSelectPortal>\n        <hlm-select-group>\n          @for (pageSize of _pageSizesWithCurrent(); track pageSize) {\n            <hlm-select-item [value]=\"pageSize\">{{ pageSize }}</hlm-select-item>\n          }\n        </hlm-select-group>\n      </hlm-select-content>\n    </hlm-select>\n  ",
                 }]
         }], ctorParameters: () => [], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: true }] }, { type: i0.Output, args: ["currentPageChange"] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: true }] }, { type: i0.Output, args: ["itemsPerPageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], showEdges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdges", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }] } });
 

package/pagination/types/pagination.d.ts

@@ -5,11 +5,13 @@ import { ClassValue } from 'clsx';
 
 declare class HlmNumberedPagination {
     /**
-     * The current (active) page.
+     * The current (active) page, floored and clamped to the available range.
+     * Corrections emit currentPageChange once; empty/invalid paging uses page 1.
      */
     readonly currentPage: _angular_core.ModelSignal<number>;
     /**
-     * The number of items per paginated page.
+     * The number of items per paginated page. Non-finite/non-positive sizes
+     * disable paging (one page) without rewriting this model.
      */
     readonly itemsPerPage: _angular_core.ModelSignal<number>;
     /**
@@ -19,7 +21,8 @@ declare class HlmNumberedPagination {
      */
     readonly totalItems: _angular_core.InputSignalWithTransform<number, NumberInput>;
     /**
-     * The number of page links to show.
+     * Maximum window entries, including ellipses: floored and bounded to 1–100.
+     * Non-finite/non-positive values use the default of 7.
      */
     readonly maxSize: _angular_core.InputSignalWithTransform<number, NumberInput>;
     /**
@@ -32,10 +35,12 @@ declare class HlmNumberedPagination {
      */
     readonly pageSizes: _angular_core.InputSignal<number[]>;
     protected readonly _pageSizesWithCurrent: _angular_core.Signal<number[]>;
+    protected readonly _currentPage: _angular_core.Signal<number>;
     protected readonly _isFirstPageActive: _angular_core.Signal<boolean>;
     protected readonly _isLastPageActive: _angular_core.Signal<boolean>;
     protected readonly _lastPageNumber: _angular_core.Signal<number>;
     protected readonly _pages: _angular_core.Signal<Page[]>;
+    constructor();
     protected goToPrevious(): void;
     protected goToNext(): void;
     protected goToFirst(): void;
@@ -48,23 +53,29 @@ type Page = number | '...';
  * Checks that the instance.currentPage property is within bounds for the current page range.
  * If not, return a correct value for currentPage, or the current value if OK.
  *
- * Copied from 'ngx-pagination' package
+ * Empty/invalid totals or sizes use page 1. Finite pages are floored;
+ * non-finite pages use 1. Page counts saturate at Number.MAX_SAFE_INTEGER.
  */
 declare function outOfBoundCorrection(totalItems: number, itemsPerPage: number, currentPage: number): number;
 /**
  * Returns an array of Page objects to use in the pagination controls.
  *
- * Copied from 'ngx-pagination' package
+ * Window math adapted from 'ngx-pagination'. Range is floored and bounded to
+ * 1–100 entries (including gaps); non-finite/non-positive ranges use 7.
+ * Ranges below 5 show a contiguous window containing the active page.
+ * Work and allocation are proportional to this bounded window, not total pages.
  */
 declare function createPageArray(currentPage: number, itemsPerPage: number, totalItems: number, paginationRange: number): Page[];
 
 declare class HlmNumberedPaginationQueryParams {
     /**
-     * The current (active) page.
+     * The current page, floored and clamped; corrections emit currentPageChange.
+     * The parent owns reading/synchronizing the URL; corrections do not navigate.
      */
     readonly currentPage: _angular_core.ModelSignal<number>;
     /**
-     * The number of items per paginated page.
+     * The number of items per paginated page. Non-finite/non-positive sizes
+     * disable paging (one page) without rewriting this model.
      */
     readonly itemsPerPage: _angular_core.ModelSignal<number>;
     /**
@@ -79,7 +90,8 @@ declare class HlmNumberedPaginationQueryParams {
      */
     readonly link: _angular_core.InputSignal<string>;
     /**
-     * The number of page links to show.
+     * Maximum window entries, including ellipses: floored and bounded to 1–100.
+     * Non-finite/non-positive values use the default of 7.
      */
     readonly maxSize: _angular_core.InputSignalWithTransform<number, NumberInput>;
     /**
@@ -92,6 +104,7 @@ declare class HlmNumberedPaginationQueryParams {
      */
     readonly pageSizes: _angular_core.InputSignal<number[]>;
     protected readonly _pageSizesWithCurrent: _angular_core.Signal<number[]>;
+    protected readonly _currentPage: _angular_core.Signal<number>;
     protected readonly _isFirstPageActive: _angular_core.Signal<boolean>;
     protected readonly _isLastPageActive: _angular_core.Signal<boolean>;
     protected readonly _lastPageNumber: _angular_core.Signal<number>;

package/phone-input/README.md

@@ -49,6 +49,22 @@ import { HlmPhoneInput, formatNanpPhoneNumber, type PhoneNumberFormatter } from
 
 Model values may be `string | null | undefined`; non-digit characters are stripped defensively on write. An empty model renders as empty text (no dangling mask characters) and emits `null`. With `modelFormat: 'formatted'` the model holds display text instead of digits — useful when a backend expects the masked value; validators then apply to the formatted string.
 
+### Keyboard editing
+
+- With a collapsed caret, Backspace removes the preceding digit and Delete removes the following digit, skipping `)`, spaces, hyphens and other non-digit separators. Repeated deletion continues through the mask.
+- With a selection, only selected digits are removed. A punctuation-only selection collapses to its logical digit boundary without deleting an adjacent digit or emitting a model change.
+- Typing and paste replace the native selection, strip non-digits and respect `maxDigits`. The caret is restored after the preceding logical digit; clearing emits `null`. Only effective digit changes emit CVA changes, and blur marks the control touched. Programmatic writes format without emitting user changes.
+- Deletion uses the native cancelable `beforeinput` event's `inputType` and original selection. Other edits retain native editing followed by `input` normalization. Read-only and disabled controls reject edits. Custom formatters should preserve digit content/order and add only non-digit separators so logical positions map correctly.
+
+The source regression suites and real Chrome keyboard/clipboard probe can be run from the repository root:
+
+```bash
+pnpm --dir packages/angular test:library phone-input form-phone-input
+node packages/angular/test/phone-keyboard-probe.mjs
+```
+
+The probe reuses installed Puppeteer and the shared Chrome resolver (`CHROME_BIN` or the package browser cache), compiles only an opt-in Angular test fixture, and uses Home/Arrow/Shift, Backspace/Delete, typing and Ctrl+C/Ctrl+V. Its Karma port defaults to `9877` (override with `PHONE_KEYBOARD_PORT`). It checks both primitive and wrapper controls; no published artifacts are needed.
+
 ### `formatNanpPhoneNumber(digits)`
 
 North-American numbering plan formatter: `4` → `(4`, `4155` → `(415) 5`, `4155552671` → `(415) 555-2671`, truncated to 10 digits. Pass a custom `PhoneNumberFormatter` for other plans (e.g. chunk-and-join national formats) together with a matching `maxDigits`.

package/phone-input/fesm2022/phone-input.mjs

@@ -24,7 +24,8 @@ function formatNanpPhoneNumber(digits) {
 /**
  * A masked phone input. The form model holds raw digits (`"4155552671"`);
  * the visible text is formatted (`"(415) 555-2671"`). Caret position is
- * preserved across mask characters while typing or deleting.
+ * preserved across mask characters while typing or deleting. Backspace/Delete
+ * skip separators in their direction; selected ranges delete only selected digits.
  */
 class HlmPhoneInput {
     static _id = 0;
@@ -53,7 +54,7 @@ class HlmPhoneInput {
      */
     modelFormat = input('digits', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "modelFormat" }] : /* istanbul ignore next */ []));
-    /** Display formatter. Receives raw digits, returns display text. */
+    /** Display formatter. Preserve digit order/content and add only non-digit separators for caret mapping. */
     formatPhoneNumber = input(formatNanpPhoneNumber, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "formatPhoneNumber" }] : /* istanbul ignore next */ []));
     /** Extra classes merged onto the inner `<input>` (over the `HlmInput` base). */
@@ -88,11 +89,46 @@ class HlmPhoneInput {
             this._onChange?.(digits);
         }
     }
+    _handleBeforeInput(event) {
+        if (event.defaultPrevented || !event.cancelable)
+            return;
+        if (this.disabledState() || this.readonly()) {
+            event.preventDefault();
+            return;
+        }
+        if (event.inputType !== 'deleteContentBackward' && event.inputType !== 'deleteContentForward')
+            return;
+        // Input events contain the already-edited value. Only beforeinput retains
+        // both the browser's deletion intent and the original selected range.
+        const element = event.target;
+        const start = element.selectionStart;
+        const end = element.selectionEnd;
+        if (start === null || end === null)
+            return;
+        const digits = element.value.replace(/\D/g, '');
+        let from = element.value.slice(0, start).replace(/\D/g, '').length;
+        let to = element.value.slice(0, end).replace(/\D/g, '').length;
+        if (start === end) {
+            if (event.inputType === 'deleteContentBackward')
+                from = Math.max(0, from - 1);
+            else
+                to = Math.min(digits.length, to + 1);
+        }
+        event.preventDefault();
+        this._renderEdit(element, digits.slice(0, from) + digits.slice(to), from);
+    }
     _handleInput(event) {
         const element = event.target;
+        if (this.disabledState() || this.readonly()) {
+            element.value = this._display();
+            return;
+        }
         const caret = element.selectionStart ?? element.value.length;
         const digitsBeforeCaret = element.value.slice(0, caret).replace(/\D/g, '').length;
-        const digits = element.value.replace(/\D/g, '').slice(0, Math.max(0, this.maxDigits()));
+        this._renderEdit(element, element.value.replace(/\D/g, ''), digitsBeforeCaret);
+    }
+    _renderEdit(element, rawDigits, digitsBeforeCaret) {
+        const digits = rawDigits.slice(0, Math.max(0, this.maxDigits()));
         const formatted = this.formatPhoneNumber()(digits);
         const target = Math.min(digitsBeforeCaret, digits.length);
         let position = 0;
@@ -140,6 +176,7 @@ class HlmPhoneInput {
       [forceInvalid]="forceInvalid()"
       [class]="$inputClass()"
       [value]="_display()"
+      (beforeinput)="_handleBeforeInput($event)"
       (input)="_handleInput($event)"
       (blur)="_handleBlur()"
     />
@@ -172,6 +209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       [forceInvalid]="forceInvalid()"
       [class]="$inputClass()"
       [value]="_display()"
+      (beforeinput)="_handleBeforeInput($event)"
       (input)="_handleInput($event)"
       (blur)="_handleBlur()"
     />

package/phone-input/types/phone-input.d.ts

@@ -16,7 +16,8 @@ declare function formatNanpPhoneNumber(digits: string): string;
 /**
  * A masked phone input. The form model holds raw digits (`"4155552671"`);
  * the visible text is formatted (`"(415) 555-2671"`). Caret position is
- * preserved across mask characters while typing or deleting.
+ * preserved across mask characters while typing or deleting. Backspace/Delete
+ * skip separators in their direction; selected ranges delete only selected digits.
  */
 declare class HlmPhoneInput implements ControlValueAccessor {
     private static _id;
@@ -37,7 +38,7 @@ declare class HlmPhoneInput implements ControlValueAccessor {
      * (`"(415) 555-2671"`).
      */
     readonly modelFormat: _angular_core.InputSignal<"digits" | "formatted">;
-    /** Display formatter. Receives raw digits, returns display text. */
+    /** Display formatter. Preserve digit order/content and add only non-digit separators for caret mapping. */
     readonly formatPhoneNumber: _angular_core.InputSignal<PhoneNumberFormatter>;
     /** Extra classes merged onto the inner `<input>` (over the `HlmInput` base). */
     readonly userClass: _angular_core.InputSignal<ClassValue>;
@@ -52,7 +53,9 @@ declare class HlmPhoneInput implements ControlValueAccessor {
     protected _onChange?: ChangeFn<string | null>;
     protected _onTouched?: TouchFn;
     private _emitModel;
+    protected _handleBeforeInput(event: InputEvent): void;
     protected _handleInput(event: Event): void;
+    private _renderEdit;
     protected _handleBlur(): void;
     /** CONTROL VALUE ACCESSOR */
     writeValue(value: string | null | undefined): void;