import { EventEmitter } from '../../stencil-public-runtime'; 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`). * @default 'Anterior' */ prevLabel: string; /** * Visible label for the Next button (desktop only — hidden on `sm`). * @default 'Următor' */ nextLabel: string; /** * Accessible name for the navigation landmark when no `aria-label` is set on * the host. Defaults to "Navigare pagini". Setting `aria-label` directly on * the host also works — the consumer-supplied attribute wins and is captured * on connect into `resolvedAriaLabel`, then stripped from the host to avoid * Stencil's attribute-observer / render-loop antipattern (same pattern as * mud-radio / mud-switch / mud-tooltip / mud-accordion / mud-breadcrumb / * mud-date-picker / mud-modal). */ label?: string; /** * Accessible label template for the Previous button. The `{page}` token is * replaced with the target page number. * @default 'Pagina anterioară, mergi la pagina {page}' */ prevAriaLabel: string; /** * Accessible label template for the Next button. The `{page}` token is * replaced with the target page number. * @default 'Pagina următoare, mergi la pagina {page}' */ nextAriaLabel: string; /** * Accessible label template for an individual page button. Tokens `{page}` * and `{total}` are substituted with the page number and total page count. * @default 'Pagina {page} din {total}' */ 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. * @default 'Arată paginile de la {from} la {to}' */ overflowAriaLabel: string; private hasPrevIcon; private hasNextIcon; private resolvedAriaLabel; private openOverflow; private focusedOverflowIndex; 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; protected syncLabel(next?: string): void; 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; componentWillLoad(): void; componentDidUpdate(): void; private captureAriaLabel; private clampPage; private goToPage; private onPageClick; private onPrevClick; private onNextClick; private onPrevIconSlotChange; private onNextIconSlotChange; private slotHasContent; private closeOverflow; 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 formatLabel; private renderPageItem; private renderOverflow; private renderPrev; private renderNext; render(): any; }