Level: molecule.
Purpose and use
Move between known pages and choose how many rows a page contains. Use a separate load-more pattern for unknown totals or cursor-only navigation.
Anatomy, behavior, and accessibility
- A page-size radio Dropdown sits opposite the visible range and first/previous/ next/last native buttons. Controls emit changes; records are not fetched or sliced.
- page is 1-based and clamped to the available count. Page size is at least 25; smaller options are removed, duplicates collapse, and the current size is included.
- Changing size emits pageSizeChange and pageChange with page=1. Unchanged page actions do not emit. First/last boundaries disable the corresponding controls; empty results display 0-0 из 0.
- A named nav contains named buttons and a polite live region for the range. Disabled disables the trigger and navigation buttons. Supply a finite total and labels meaningful for the displayed entity; number formatting is Russian.
Open Questions
Nonfinite totalItems/pageSize are not fully sanitized. Disabling after the page-size menu opens does not add a disabled guard to selectPageSize; that transition needs review if asynchronous disabling is required.
Local component contract
This is the active owned contract for component.pagination. The API below
is verified against the current local implementation, focused test and story.
The Source commit 0112cba0779a2d2a4b6c7a17243201694344d70a remains
migration provenance, not the runtime owner.
Classes and selectors
WblPaginationComponent—wbl-pagination(src/app/design-system/patterns/pagination/pagination.component.ts).
Inputs
WblPaginationComponent.page = input(1)WblPaginationComponent.pageSize = input(25)WblPaginationComponent.totalItems = input(14800)WblPaginationComponent.pageSizeOptions = input<number[]>([25, 50, 100])WblPaginationComponent.rowsPerPageLabel = input('Строк на странице')WblPaginationComponent.ariaLabel = input('Пагинация')WblPaginationComponent.disabled = input(false)
Public types and allowed values
interface WblPaginationChange {
page: number;
pageSize: number;
}
Models
- None.
Outputs
WblPaginationComponent.pageChange = output<WblPaginationChange>()WblPaginationComponent.pageSizeChange = output<number>()
Slots and projection markers
- The exact template has no Angular content-projection slot.
Local evidence
- Code:
src/app/design-system/patterns/pagination/pagination.component.ts. - Focused test:
src/app/design-system/patterns/pagination/pagination.component.spec.ts. - Public export:
export * from './patterns/pagination/pagination.component';insrc/app/design-system/index.ts. - Storybook:
storybook/stories/pagination.stories.ts(Design System/Patterns/wbl-pagination).
Figma status
This runtime contract does not infer a Figma owner. Assembly evidence, when verified, is maintained separately through the inventory-linked sidecar.
Provenance
The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.