@progress/kendo-angular-pager

/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { EventEmitter, OnChanges, SimpleChanges, OnInit, OnDestroy, ElementRef, Renderer2, NgZone, AfterViewInit, QueryList, ChangeDetectorRef } from '@angular/core'; import { PageChangeEvent } from './change-event-args.interface'; import { PagerTemplateDirective } from "./pager-template.directive"; import { PagerContextService } from "./pager-context.service"; import { PageSizeChangeEvent } from './pagesizechange-event'; import { PageSizeItem } from './pagesize-item.interface'; import { AdaptiveMode } from '../util'; import { PagerType } from './common/pager-type'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { PagerNavigationService } from './navigation.service'; import { PagerSize } from './common/pager-size'; import { PagerPageSizesComponent } from './pager-page-sizes.component'; import { PagerInputComponent } from './pager-input.component'; import * as i0 from "@angular/core"; /** * Represents the Kendo UI Pager component for Angular. * Enables you to split a set of data into pages, providing a flexible and intuitive UI. * * @example * ```ts * @Component({ * selector: 'my-app', * template: ` * <kendo-pager * [total]="total" * [skip]="skip" * [pageSize]="pageSize" * (pageChange)="onPageChange($event)"> * </kendo-pager> * ` * }) * export class AppComponent { * public total = 200; * public skip = 0; * public pageSize = 10; * * public onPageChange(event: PageChangeEvent) { * this.skip = event.skip; * } * } * ``` * * @remarks * Supported children components are: * {@link PagerNumericButtonsComponent}, * {@link PagerInputComponent}, * {@link PagerPageSizesComponent}, * {@link PagerSpacerComponent}, * {@link PagerPrevButtonsComponent}, * {@link PagerNextButtonsComponent}, * {@link PagerInfoComponent}, * {@link CustomMessagesComponent} */ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit, OnDestroy { private pagerContext; private element; private localization; private renderer; private ngZone; private cdr; private navigationService; /** * Represents the collection of pager template directives. */ template: QueryList<PagerTemplateDirective>; set numericButtons(buttons: ElementRef); set pagerInput(input: ElementRef); pagerInputComponent: PagerInputComponent; set pageSizes(sizes: ElementRef); pageSizesComponent: PagerPageSizesComponent; /** * @hidden */ externalTemplate: any; /** * Specifies the total number of data items in the collection. * * @default 0 */ total: number; /** * Specifies the number of data items to skip. * * @default 0 */ skip: number; /** * Specifies the number of data items per page. */ pageSize: number; /** * Specifies the maximum number of numeric buttons before the buttons are collapsed. * * @default 10 */ buttonCount: number; /** * Determines whether to display information about the current page and the total number of records. * * @default true */ info: boolean; /** * Specifies the type of the Pager. * * @default 'numeric' */ type: PagerType; /** * Displays a dropdown for selecting the page size. * When set to `true`, the dropdown contains the default list of options - 5, 10, 20. * To customize the list of options, set `pageSizeValues` to an array of the desired values. * The array can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects. */ set pageSizeValues(value: boolean | number[] | PageSizeItem[]); get pageSizeValues(): boolean | number[] | PageSizeItem[]; /** * Determines whether to display the **Previous** and **Next** buttons. * * @default true */ previousNext: boolean; /** * Determines whether users can use dedicated shortcuts to interact with the Pager ([see example]({% slug keyboard_navigation_pager %})). * By default, navigation is enabled. To disable it and make the Pager content accessible in the normal tab sequence, set the property to `false`. * @default true */ set navigable(value: boolean); get navigable(): boolean; /** * Specifies the padding of all Pager elements. * * @default 'medium' */ set size(size: PagerSize); get size(): PagerSize; /** * Determines whether the Pager responsive functionality is enabled ([see example](slug:responsive_pager)). * * @default true */ responsive: boolean; /** * Determines whether the Pager adaptiveness functionality is enabled ([see example](slug:adaptive_mode_pager)). * * @default 'auto' */ adaptiveMode: AdaptiveMode; /** * Fires when the current page of the Pager changes ([see example](slug:overview_pager)). * You have to handle the event and page the data. */ pageChange: EventEmitter<PageChangeEvent>; /** * Fires when the page size of the Pager changes. * You have to handle the event and page the data. * If the event is prevented, the page size remains unchanged ([see example]({% slug pager_events %})). */ pageSizeChange: EventEmitter<PageSizeChangeEvent>; /** * @hidden */ pagerInputVisibilityChange: EventEmitter<boolean>; /** * @hidden */ pageTextVisibilityChange: EventEmitter<boolean>; /** * @hidden */ itemsTextVisibilityChange: EventEmitter<boolean>; pagerClass: boolean; get responsiveClass(): boolean; widgetRole: string; roleDescription: string; keyShortcuts: string; get hostTabindex(): string; get dir(): string; /** * @hidden */ focusHandler(ev: any): void; get totalPages(): number; get currentPage(): number; get templateContext(): any; /** * @hidden */ get showPageText(): boolean; set showPageText(value: boolean); /** * @hidden */ get showItemsText(): boolean; set showItemsText(value: boolean); /** * @hidden */ get showInput(): boolean; set showInput(value: boolean); /** * @hidden */ initialized: boolean; private subscriptions; private _templateContext; _pageSizeValues: number[] | PageSizeItem[]; private direction; private isInnerNavigationEnabled; private _navigable; private _size; private _showInput; private _showPageText; private _showItemsText; /** * Stores the measurements of various Pager elements. * These dimensions are used for responsive layout calculations. * @hidden */ private pagerDimensions; constructor(pagerContext: PagerContextService, element: ElementRef, localization: LocalizationService, renderer: Renderer2, ngZone: NgZone, cdr: ChangeDetectorRef, navigationService: PagerNavigationService); ngOnInit(): void; /** * Gets the maximum number of items displayed on the current page. */ get maxItems(): number; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** * @hidden */ changePage(event: PageChangeEvent): void; /** * @hidden */ changePageSize(event: PageSizeChangeEvent): void; /** * @hidden */ onPageSizeChange(event: PageSizeChangeEvent): void; /** * @hidden */ resizeHandler: (compareWidth?: boolean) => void; private get ariaLabel(); private keyDownHandler; private innerNavigationChange; private handleClasses; private showElementsInOrder; private hideElementsInOrder; private isElementVisible; private hideElement; private showElement; private measureAllTextWidths; private showNumericButtonsResponsive; private get showPageSizes(); static ɵfac: i0.ɵɵFactoryDeclaration<PagerComponent, [{ optional: true; skipSelf: true; }, null, null, null, null, null, { optional: true; skipSelf: true; }]>; static ɵcmp: i0.ɵɵComponentDeclaration<PagerComponent, "kendo-datapager, kendo-pager", ["kendoDataPager", "kendoPager"], { "externalTemplate": { "alias": "externalTemplate"; "required": false; }; "total": { "alias": "total"; "required": false; }; "skip": { "alias": "skip"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "buttonCount": { "alias": "buttonCount"; "required": false; }; "info": { "alias": "info"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pageSizeValues": { "alias": "pageSizeValues"; "required": false; }; "previousNext": { "alias": "previousNext"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "pagerInputVisibilityChange": "pagerInputVisibilityChange"; "pageTextVisibilityChange": "pageTextVisibilityChange"; "itemsTextVisibilityChange": "itemsTextVisibilityChange"; }, ["template"], never, true, never>; }