CngxPaginatorPages
projects/ui/paginator/segments/paginator-pages.component.ts
Import#
import { CngxPaginatorPages } from '@cngx/ui/paginator'
Description#
The numbered page row. One tab stop via CngxRovingTabindex (arrows / Home /
End move the active page button); the current page carries aria-current.
A truncation run collapses into an ellipsis button that opens a CngxListbox
grid of the hidden pages (same select-and-jump model as cngx-pgn-page-of-pages,
so focus moves into the panel on open).
Metadata#
Dependencies#
CNGX_PAGINATOR_HOSTinject()hostRelationships
Index#
Derived State
Inputs#
Instance Properties#
Methods#
onOverflowToggle(event: Event, trigger: HTMLElement)Restore focus to the ellipsis trigger when the panel closes without a selection (Escape / outside click), so a keyboard user is not dropped to the page body. A selection-driven close is handled by onSelectOverflow instead - the re-render replaces the window, so the trigger is (or is about to be) gone and the now-current page button is the correct focus target.
HTMLElementonSelectOverflow(value: number | null | undefined, popover: literal type)Jump to the selected hidden page, close the gap popover, and focus the now-current page button once the window has re-rendered - the popover (where focus lives) does not survive the selection, and without an explicit restore focus drops to the page body.
number | null | undefinedliteral typeopenOverflow(popover: literal type, panel: HTMLElement)Open the overflow popover and move focus into the listbox panel, so a
keyboard user lands in the grid (the trigger is a roving page-row item, so
the listbox trigger's own focus-move does not fire). Enter/Space on the
button dispatch a native click, so this covers mouse and keyboard alike.
literal typeHTMLElement