CngxPaginatorDots
projects/ui/paginator/segments/paginator-dots.component.ts
Import#
import { CngxPaginatorDots } from '@cngx/ui/paginator'
Description#
The dots indicator: one circular <button> per page inside a clipped viewport
track. The active dot carries aria-current="page"; every dot exposes its page
name via aria-label (the circle is decorative). Click navigates through the
brain, gated while busy. For large counts the track glides (CSS transform
transition) to keep the active dot centred, iOS page-control style, instead of
reshuffling the DOM. Dot DOM + windowing live here, not in a shared atom.
Keyboard/target contract matches the page row: the track is ONE tab stop via
CngxRovingTabindex (arrows / Home / End move between dots, Enter/Space
commits), the roving cursor re-syncs to the active page on every change, and
dots clipped outside the visible window are skipped so focus never lands on
an invisible ring. Each dot's hit area is lifted onto the
--cngx-target-min floor by padding (base CSS); the painted circle stays at
--cngx-paginator-dot-size.
Metadata#
Dependencies#
CNGX_PAGINATOR_HOSTinject()host