import type { EventEmitter } from '../../stencil-public-runtime'; import type { LocaleProp } from '../../utils/locale'; import type { PaginationChangeDetail, PaginationSize } from './mud-pagination.types'; /** * Pagination — navigation control for paged content. * * Renders a list of page-number buttons flanked by Previous / Next controls. * The visible page list is computed from `currentPage`, `totalPages`, * `siblingCount`, and `boundaryCount`. When the total exceeds the visible * window, an interactive overflow button (`…`) collapses the skipped range * and lets users jump directly to any of those pages via a dropdown menu * (Figma "overflow-active" interaction). When the collapsed range is large * (e.g. page 1 of 40 hides ~34 pages), the dropdown caps its height and * scrolls internally instead of running off the viewport. * * The component is internally controlled but exposes a `mudChange` event so * the host can drive the active page. Updating `current-page` from outside * is also honoured (e.g. when the URL changes via routing). * * Previous / Next buttons are hidden at the boundaries (page 1 hides Prev, * the last page hides Next) instead of being rendered in a disabled state — * this matches the Figma "first-page" / "last-page" specification. * * @element mud-pagination * * @slot prev-icon - Optional icon override for the Previous button. * Defaults to a left chevron sized for the current rung. * @slot next-icon - Optional icon override for the Next button. * Defaults to a right chevron. */ export declare class MudPagination { /** * Visual size rung. Mobile breakpoints typically use `sm` (32px) and * desktop uses `md` (40px). * @default 'md' */ size: PaginationSize; /** * The active page (1-indexed). Mutable so consumers can two-way bind. * @default 1 */ currentPage: number; /** * Total number of pages. When `<= 1` the component renders nothing. * @default 1 */ totalPages: number; /** * Number of page buttons shown on each side of the active page. * @default 1 */ siblingCount: number; /** * Number of page buttons shown at the start and end of the range * (before / after the leading / trailing ellipsis). * @default 1 */ boundaryCount: number; /** * Whether to render the Previous / Next navigation buttons at all. When * `true` (default) they still hide individually at the corresponding * boundary (page 1 hides Prev, last page hides Next). * @default true */ showPrevNext: boolean; /** * Visible label for the Previous button (desktop only — hidden on `sm`). * Overrides the `locale`'s copy when set to a string; an empty string renders nothing * (the button keeps its `prev-aria-label`). * @default 'Anterior' (ro-MD) */ prevLabel?: string; /** * Visible label for the Next button (desktop only — hidden on `sm`). * Overrides the `locale`'s copy when set to a string; an empty string renders nothing * (the button keeps its `next-aria-label`). * @default 'Următor' (ro-MD) */ nextLabel?: string; /** * Accessible name for the navigation landmark when no `aria-label` is set on * the host. Overrides the `locale`'s copy when set to a non-empty string. * Setting `aria-label` directly on the host also works — the consumer-supplied * attribute wins and is captured on connect into `resolvedAriaLabel` (same * pattern as mud-radio / mud-switch / mud-tooltip / mud-accordion / * mud-breadcrumb / mud-date-picker / mud-modal). * @default 'Navigare pagini' (ro-MD) */ label?: string; /** * Language of the built-in copy. Unset, the component follows the closest ancestor `lang` * (`` included), else `ro-MD`. */ locale?: LocaleProp; /** * Accessible label template for the Previous button. The `{page}` token is * replaced with the target page number. Overrides the `locale`'s copy when set * to a non-empty string. * @default 'Pagina anterioară, mergi la pagina {page}' (ro-MD) */ prevAriaLabel?: string; /** * Accessible label template for the Next button. The `{page}` token is * replaced with the target page number. Overrides the `locale`'s copy when set * to a non-empty string. * @default 'Pagina următoare, mergi la pagina {page}' (ro-MD) */ nextAriaLabel?: string; /** * Accessible label template for an individual page button. Tokens `{page}` * and `{total}` are substituted with the page number and total page count. * Overrides the `locale`'s copy when set to a non-empty string. * @default 'Pagina {page} din {total}' (ro-MD) */ pageAriaLabel?: string; /** * Accessible label template for the overflow ("…") button. The `{from}` * and `{to}` tokens are replaced with the first and last page in the * collapsed range. Overrides the `locale`'s copy when set to a non-empty string. * @default 'Arată paginile de la {from} la {to}' (ro-MD) */ overflowAriaLabel?: string; private hasPrevIcon; private hasNextIcon; /** The consumer's own `aria-label` on the host, `undefined` while unset — see `observeAriaLabel`. */ private resolvedAriaLabel?; private openOverflow; private focusedOverflowIndex; /** True when the open overflow menu is flipped above its trigger (not enough room below). */ private overflowDropUp; host: HTMLMudPaginationElement; /** * Fires when the user activates a different page via click on a numbered * button, the Previous / Next controls, or a page in the overflow dropdown. * Carries the new and previous page numbers so consumers can drive routing * or data fetches. */ mudChange: EventEmitter; /** * Runtime cap (px) on the open overflow menu, so it never runs past the * viewport. Not `@State`: it reaches the stylesheet through a host custom * property, so a re-render would buy nothing. */ private overflowMaxBlockSize?; private stopAriaLabel?; private stopLang?; protected onCurrentPageChange(newValue: number): void; protected onTotalPagesChange(): void; /** Close the overflow dropdown when a click lands outside the component. */ handleOutsideClick(ev: MouseEvent): void; /** Keyboard support on the open overflow dropdown. */ handleKeyDown(ev: KeyboardEvent): void; connectedCallback(): void; componentWillLoad(): void; componentDidRender(): void; disconnectedCallback(): void; componentDidUpdate(): void; /** Built-in strings in the resolved locale, with the override props on top. */ private messages; private clampPage; private goToPage; private onPageClick; private onPrevClick; private onNextClick; private onPrevIconSlotChange; private onNextIconSlotChange; private slotHasContent; private closeOverflow; private stopTrackingViewport; /** * The overflow menu opens below its trigger unless the viewport has no room * for it there and more room above — then it flips up. Either way its height * is capped to the room it has, so it never runs past the edge. Scheduled * with readTask because componentDidRender calls it: writing state straight * from the render cycle makes Stencil log a change-during-render and render * twice. Same approach as mud-select's listbox. */ private positionOverflow; private measureOverflow; private toggleOverflow; private focusOverflowTrigger; private getOpenOverflowPages; /** * Compute the visible slot list. Returns up to ~7 slots including overflow * placeholders. Each overflow slot carries the contiguous list of pages it * collapses so the dropdown can offer them as jump targets. * * Mirrors the Figma "Pagination Logic" rules: * - Always show first and last page (boundary-count). * - Show `siblingCount` pages on each side of `currentPage`. * - Insert an overflow when the gap between boundaries and siblings is `>= 2`; * if the gap is exactly `1`, render the actual page number instead. */ private computeRange; private renderPageItem; private renderOverflow; private renderPrev; private renderNext; render(): any; }