Skip to main content
cngx-src documentation

CngxPaginatorPages

ComponentOnPushNo encapsulationv0.1.0WCAG AA

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).

https://cngxjs.github.io/cngx/examples/#/ui/paginator/paginator-parts/pages/number-row

Metadata#

Dependencies#

CNGX_PAGINATOR_HOSTinject()host

Relationships

Index#

Inputs#

boundaryCount#number
input()

Pages pinned at each end. Defaults to the v1 window.

default 1
siblingCount#number
input()

Pages flanking the current page on each side. Defaults to the v1 window.

default 1

Instance Properties#

config#unknown
ProtectedReadonly
injectPaginatorConfig()
glyphs#unknown
ProtectedReadonly
CNGX_PAGINATOR_GLYPHS

Methods#

goto#void
Protected
goto(index: number)
@paramindexnumber
isCurrent#boolean
Protected
isCurrent(index: number)
@paramindexnumber
onOverflowToggle#void
Protected
onOverflowToggle(event: Event, trigger: HTMLElement)

Restore focus to the ellipsis trigger when the panel closes (Escape / outside click), so a keyboard user is not dropped to the page body. If a selection re-rendered the window away, the trigger is gone and the guard skips it.

@parameventEvent
@paramtriggerHTMLElement
onSelectOverflow#void
Protected
onSelectOverflow(value: number | null | undefined)
@paramvaluenumber | null | undefined
openOverflow#void
Protected
openOverflow(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.

@parampopoverliteral type
@parampanelHTMLElement