import * as i0 from '@angular/core'; import { OnInit, OnDestroy, OnChanges, EventEmitter, SimpleChanges } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; interface EuiPaginationEvent { page: number; pageSize: number; nbPage: number; } /** * @description * The eui-paginator component is in charge of the pagination by splitting up content or data into several pages and adding visual controls for better user experience like: * - identifying the current page: clearly identify which page the user is on by displaying the current page number. * - providing context into how many pages there are in total: can help provide clarity around the data displayed. * - providing various options for navigating: previous and next chevrons or links are the most useful way for the user to move forward or backward through pages of data. * - items per page: allows selecting the amount of data displayed per page. * * Best practices & Usage * Generally, pagination is recommended to be used if there are more than 25 items displayed in one view. The default number of displayed items may vary depending on the context. * * The main benefits of using pagination: * - delivers structure and feedback over the displayed data * - supports embedded navigation (and in particular back and forward, first and last) * - pagination is accessible (see A11Y) * - pagination typically means smaller, shorter pages and as a result reduced load times * - compared to infinite scroll display, it helps to focus the user's mind and not continue to offer more and more choices. * * @usageNotes * ### Basic usage * ```html * * * ``` * * ### With page number navigation * ```html * * * ``` * * ### Basic mode (minimal UI) * ```html * * ``` * * ### Accessibility * - Navigation buttons have descriptive labels for screen readers * - Current page and total pages announced to assistive technologies * - Keyboard navigable with standard tab and enter interactions * - Page size selector is a standard accessible dropdown * * ### Notes * - Use `hasDynamicLength` when total items count changes during pagination * - Page numbers are zero-indexed internally but displayed as 1-indexed * - Hide with `isHidden` when only one page exists * - Customize page size options via `pageSizeOptions` array */ declare class EuiPaginatorComponent implements OnInit, OnDestroy, OnChanges { /** * Sets the `data-e2e` attribute for the host element. * * @default 'eui-paginator' */ e2eAttr: string; /** * Sets the `class` attribute for the host element. * * @returns A string with all CSS classes applied. */ get cssClasses(): string; /** * Sets the page size options that will be displayed in the dropdown. * * @default [5, 10, 25, 50, 100] */ pageSizeOptions: number[]; /** * Sets the number of items displayed in the page. * * @default 10 */ pageSize: number; /** * Sets the current page number. * * @default 0 */ page: number; /** * Sets the total number of items. * * @default 0 */ length: number; /** * In combination with `hasPageNumberNavigation`, sets the number of page numbers displayed in the paginator. * * @default 5 */ nbPageNumberNavigation: number; /** * Whether the paginator is hidden or not. * * @default false (visible) */ isHidden: boolean; /** * Whether the paginator is in basic mode or not. * In this mode, the paginator will only display the previous and next buttons. * * @default false */ isBasicMode: boolean; /** * Whether the page number is displayed or not. * * @default false */ hasPageNumberNavigation: boolean; /** * Whether the page number is displayed or not. * * @default false */ hasPageNumberNavigationCompact: boolean; /** * Whether the datasource length is dynamic or not. * * @default false */ hasDynamicLength: boolean; /** * Whether the page size is displayed or not. Default: true. * * @default true */ hasPageSize: boolean; /** Event emitted when the page has changed. */ pageChange: EventEmitter; /** * Observable that emits the current page number, the page size and the number of pages. */ page$: BehaviorSubject; /** * Observable that emits the length of the datasource */ length$: BehaviorSubject; /** * The range of items displayed in the paginator. */ range: string; /** * The range length of items displayed in the paginator. */ rangeLength: string; /** * The number of pages. */ nbPage: number; private nbPageNumberNav; private destroy$; private decimal; ngOnChanges(c: SimpleChanges): void; ngOnInit(): void; ngOnDestroy(): void; /** * Returns the page number navigation array. * * @returns An array of page numbers. */ get pageNumberNavigation(): number[]; /** * Changes the page size by the one provided as parameter. * * @param size New page size. */ changePageSize(size: string): void; /** * Sets the page number to the one provided as parameter. * * @param page New page * @param options * `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted */ goToPage(page: number, options?: { emitEvent: boolean; }): void; /** * Sets the page number to 0 (first page). * * @param options * `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted */ goFirstPage(options?: { emitEvent: boolean; }): void; /** * Sets the page number to current - 1. */ goPreviousPage(): void; /** * Sets the page number to current + 1. */ goNextPage(): void; /** * Sets the page number to last page. */ goLastPage(): void; /** * Gives new values to page number, page size and number of pages. */ setPage(page: EuiPaginationEvent): void; /** * Gives new value to the length of the datasource. */ setLength(length: number): void; /** * Calculates the range of items displayed in the paginator. */ getRange(): void; /** * Change the pagination to the given page number * * @param page 0-based page number to be displayed * @param options * `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted */ getPage(page: number, options?: { emitEvent: boolean; }): void; /** * Returns the current pagination state. * * @returns An object with the properties of the paginator state. */ getCurrentPagination(): EuiPaginationEvent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isHidden: unknown; static ngAcceptInputType_isBasicMode: unknown; static ngAcceptInputType_hasPageNumberNavigation: unknown; static ngAcceptInputType_hasPageNumberNavigationCompact: unknown; static ngAcceptInputType_hasDynamicLength: unknown; static ngAcceptInputType_hasPageSize: unknown; } declare const EUI_PAGINATOR: readonly [typeof EuiPaginatorComponent]; export { EUI_PAGINATOR, EuiPaginatorComponent }; export type { EuiPaginationEvent }; //# sourceMappingURL=eui-components-eui-paginator.d.ts.map