CngxPaginatorAlpha
projects/ui/paginator/segments/paginator-alpha.component.ts
Import#
import { CngxPaginatorAlpha } from '@cngx/ui/paginator'
Description#
Alphabetical / category chips: a role="group" toggle strip over the
CngxBucketPaginate range model.
One <button> per bucket; the active
bucket carries aria-pressed, an empty bucket is disabled. The model is
injected through CNGX_BUCKET_PAGINATE_HOST, never the concrete directive
class, so the strip stays decompose-ready.
Every chip's pressed / disabled / name state is a computed() read of the
host signals - nothing is synced. An empty chip is not a silent dead control:
its accessible name comes from ariaLabels.emptyBucket(label), which states
the bucket has no items, so AT hears the reason the chip is disabled.
Keyboard navigation reuses CngxRovingTabindex / CngxRovingItem (no new
keyboard code, matching cngx-pgn-pages):
arrows move the focus cursor and
skip disabled chips, the single tab stop tracks the active bucket, and
activation commits via select().
Metadata#
Dependencies#
CNGX_BUCKET_PAGINATE_HOSTinject()hostRelationships
Index#
Instance Properties#
Methods#
chipLabel(label: string)Accessible name: the available chip uses ariaLabels.bucket; an empty chip
swaps to ariaLabels.emptyBucket so the disabled control states its reason.
Structural CSS shared by every paginator skin.
Layout-only - no colors, sizes, or borders beyond what is controlled via
--cngx-paginator-* custom properties. CngxPaginator (in @cngx/ui/paginator) references this file via
styleUrls; ng-packagr inlines it at publish time, so consumers of
@cngx/ui/paginator do not need @cngx/common/data at runtime. Selectors
are class-prefixed (.cngx-paginator__*) and apply globally under the
component's encapsulation: None.
State modifiers (driven by ARIA the organism sets)
[aria-current="page"]- the active page button[aria-disabled="true"]- dimmed,cursor: not-allowed(bound nav buttons / busy):focus-visible- focus ring via--cngx-paginator-focus-ring
Size preset - [data-paginator-size="compact" | "comfortable"] (the
private [density] input) shifts the button hit-target + font; the gap
tokens derive from the global --cngx-space-* scale, so a root
[data-density] compacts the paginator with every other component. The
default size needs no rule.
Slots
.cngx-paginator- the flex row host.cngx-paginator__segment- one projected segment wrapper.cngx-paginator__pages- the roving page-number row.cngx-paginator__button- any clickable cell (nav, page, ellipsis).cngx-paginator__page/__nav/__more- the three button kinds