@egose/shadcn-theme-ng-tw 0.6.0 → 0.6.2

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-tw/select';
 import { HlmSelectImports } from '@egose/shadcn-theme-ng-tw/select';
 import { classes, hlm } from '@egose/shadcn-theme-ng-tw/utils';
@@ -265,14 +265,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 */ []));
@@ -283,7 +293,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 });
     /**
@@ -303,33 +314,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);
@@ -355,12 +362,12 @@ class HlmNumberedPagination {
             </li>
           }
 
-          @for (page of _pages(); track page) {
+          @for (page of _pages(); track $index) {
             <li hlmPaginationItem>
               @if (page === '...') {
                 <hlm-pagination-ellipsis />
               } @else {
-                <a hlmPaginationLink [isActive]="currentPage() === page" (click)="currentPage.set(page)">
+                <a hlmPaginationLink [isActive]="_currentPage() === page" (click)="currentPage.set(page)">
                   {{ page }}
                 </a>
               }
@@ -423,12 +430,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
             </li>
           }
 
-          @for (page of _pages(); track page) {
+          @for (page of _pages(); track $index) {
             <li hlmPaginationItem>
               @if (page === '...') {
                 <hlm-pagination-ellipsis />
               } @else {
-                <a hlmPaginationLink [isActive]="currentPage() === page" (click)="currentPage.set(page)">
+                <a hlmPaginationLink [isActive]="_currentPage() === page" (click)="currentPage.set(page)">
                   {{ page }}
                 </a>
               }
@@ -459,35 +466,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </div>
   `,
                 }]
-        }], 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;
@@ -538,12 +549,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 */ []));
@@ -560,7 +573,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 });
     /**
@@ -580,30 +594,24 @@ 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(() => 'tw:flex tw:items-center tw:justify-between tw:gap-2 tw:px-4 tw: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: `
@@ -620,23 +628,23 @@ class HlmNumberedPaginationQueryParams {
           <li hlmPaginationItem>
             <hlm-pagination-previous
               [link]="link()"
-              [queryParams]="{ page: currentPage() - 1 }"
+              [queryParams]="{ page: _currentPage() - 1 }"
               queryParamsHandling="merge"
             />
           </li>
         }
 
-        @for (page of _pages(); track page) {
+        @for (page of _pages(); track $index) {
           <li hlmPaginationItem>
             @if (page === '...') {
               <hlm-pagination-ellipsis />
             } @else {
               <a
                 hlmPaginationLink
-                [link]="currentPage() !== page ? link() : undefined"
+                [link]="_currentPage() !== page ? link() : undefined"
                 [queryParams]="{ page }"
                 queryParamsHandling="merge"
-                [isActive]="currentPage() === page"
+                [isActive]="_currentPage() === page"
               >
                 {{ page }}
               </a>
@@ -648,7 +656,7 @@ class HlmNumberedPaginationQueryParams {
           <li hlmPaginationItem>
             <hlm-pagination-next
               [link]="link()"
-              [queryParams]="{ page: currentPage() + 1 }"
+              [queryParams]="{ page: _currentPage() + 1 }"
               queryParamsHandling="merge"
             />
           </li>
@@ -700,23 +708,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
           <li hlmPaginationItem>
             <hlm-pagination-previous
               [link]="link()"
-              [queryParams]="{ page: currentPage() - 1 }"
+              [queryParams]="{ page: _currentPage() - 1 }"
               queryParamsHandling="merge"
             />
           </li>
         }
 
-        @for (page of _pages(); track page) {
+        @for (page of _pages(); track $index) {
           <li hlmPaginationItem>
             @if (page === '...') {
               <hlm-pagination-ellipsis />
             } @else {
               <a
                 hlmPaginationLink
-                [link]="currentPage() !== page ? link() : undefined"
+                [link]="_currentPage() !== page ? link() : undefined"
                 [queryParams]="{ page }"
                 queryParamsHandling="merge"
-                [isActive]="currentPage() === page"
+                [isActive]="_currentPage() === page"
               >
                 {{ page }}
               </a>
@@ -728,7 +736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
           <li hlmPaginationItem>
             <hlm-pagination-next
               [link]="link()"
-              [queryParams]="{ page: currentPage() + 1 }"
+              [queryParams]="{ page: _currentPage() + 1 }"
               queryParamsHandling="merge"
             />
           </li>

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;