primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
330 lines (326 loc) • 13.4 kB
TypeScript
import { PaginatorPassThrough, PaginatorTemplateContext, PaginatorDropdownItemTemplateContext, PaginatorState } from 'primeng/types/paginator';
export * from 'primeng/types/paginator';
import * as _angular_core from '@angular/core';
import { TemplateRef } from '@angular/core';
import { SelectItem } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { SelectChangeEvent } from 'primeng/select';
import { AppendTo } from 'primeng/types/shared';
import { BaseStyle } from 'primeng/base';
/**
*
* Paginator is a generic component to display content in paged format.
*
* [Live Demo](https://www.primeng.org/paginator)
*
* @module paginatorstyle
*
*/
declare enum PaginatorClasses {
/**
* Class name of the paginator element
*/
paginator = "p-paginator",
/**
* Class name of the content start element
*/
contentStart = "p-paginator-content-start",
/**
* Class name of the content end element
*/
contentEnd = "p-paginator-content-end",
/**
* Class name of the first element
*/
first = "p-paginator-first",
/**
* Class name of the first icon element
*/
firstIcon = "p-paginator-first-icon",
/**
* Class name of the prev element
*/
prev = "p-paginator-prev",
/**
* Class name of the prev icon element
*/
prevIcon = "p-paginator-prev-icon",
/**
* Class name of the next element
*/
next = "p-paginator-next",
/**
* Class name of the next icon element
*/
nextIcon = "p-paginator-next-icon",
/**
* Class name of the last element
*/
last = "p-paginator-last",
/**
* Class name of the last icon element
*/
lastIcon = "p-paginator-last-icon",
/**
* Class name of the pages element
*/
pages = "p-paginator-pages",
/**
* Class name of the page element
*/
page = "p-paginator-page",
/**
* Class name of the current element
*/
current = "p-paginator-current",
/**
* Class name of the row per page dropdown element
*/
pcRowPerPageDropdown = "p-paginator-rpp-dropdown",
/**
* Class name of the jump to page dropdown element
*/
pcJumpToPageDropdown = "p-paginator-jtp-dropdown",
/**
* Class name of the jump to page input element
*/
pcJumpToPageInput = "p-paginator-jtp-input"
}
declare class PaginatorStyle extends BaseStyle {
name: string;
style: string;
classes: {
paginator: ({ instance }: {
instance: any;
}) => string[];
content: string;
contentStart: string;
contentEnd: string;
first: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
})[];
firstIcon: string;
prev: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
})[];
prevIcon: string;
next: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
})[];
nextIcon: string;
last: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
})[];
lastIcon: string;
pages: string;
page: ({ instance, pageLink }: {
instance: any;
pageLink: any;
}) => (string | {
'p-paginator-page-selected': boolean;
})[];
current: string;
pcRowPerPageDropdown: string;
pcJumpToPageDropdown: string;
pcJumpToPageInput: string;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginatorStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<PaginatorStyle>;
}
interface PaginatorStyle extends BaseStyle {
}
/**
* Paginator is a generic component to display content in paged format.
* @group Components
*/
declare class Paginator extends BaseComponent<PaginatorPassThrough> {
componentName: string;
bindDirectiveInstance: Bind;
$pcPaginator: Paginator | undefined;
onAfterViewChecked(): void;
/**
* Number of page links to display.
* @group Props
*/
pageLinkSize: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Whether to show it even there is only one page.
* @group Props
*/
alwaysShow: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Template instance to inject into the left side of the paginator.
* @param {PaginatorTemplateContext} context - Paginator template context.
* @see {@link PaginatorTemplateContext}
* @group Props
*/
templateLeft: _angular_core.InputSignal<TemplateRef<PaginatorTemplateContext> | undefined>;
/**
* Template instance to inject into the right side of the paginator.
* @param {PaginatorTemplateContext} context - Paginator template context.
* @see {@link PaginatorTemplateContext}
* @group Props
*/
templateRight: _angular_core.InputSignal<TemplateRef<PaginatorTemplateContext> | undefined>;
/**
* Dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
* @group Props
*/
dropdownScrollHeight: _angular_core.InputSignal<string>;
/**
* Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
* @group Props
*/
currentPageReportTemplate: _angular_core.InputSignal<string>;
/**
* Whether to display current page report.
* @group Props
*/
showCurrentPageReport: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, icons are displayed on paginator to go first and last page.
* @group Props
*/
showFirstLastIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Number of total records.
* @group Props
*/
totalRecords: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Data count to display per page.
* @group Props
*/
rows: _angular_core.ModelSignal<number>;
/**
* Zero-relative number of the first row to be displayed.
* @group Props
*/
first: _angular_core.ModelSignal<number>;
/**
* Array of integer/object values to display inside rows per page dropdown. A object that have 'showAll' key can be added to it to show all data. Exp; [10,20,30,{showAll:'All'}]
* @group Props
*/
rowsPerPageOptions: _angular_core.InputSignal<any[] | undefined>;
/**
* Whether to display a dropdown to navigate to any page.
* @group Props
*/
showJumpToPageDropdown: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether to display a input to navigate to any page.
* @group Props
*/
showJumpToPageInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Template instance to inject into the jump to page dropdown item inside in the paginator.
* @param {PaginatorDropdownItemTemplateContext} context - dropdown item context.
* @see {@link PaginatorDropdownItemTemplateContext}
* @group Props
*/
jumpToPageItemTemplate: _angular_core.InputSignal<TemplateRef<PaginatorDropdownItemTemplateContext> | undefined>;
/**
* Whether to show page links.
* @group Props
*/
showPageLinks: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Locale to be used in formatting.
* @group Props
*/
locale: _angular_core.InputSignal<string | undefined>;
/**
* Template instance to inject into the rows per page dropdown item inside in the paginator.
* @param {PaginatorDropdownItemTemplateContext} context - dropdown item context.
* @see {@link PaginatorDropdownItemTemplateContext}
* @group Props
*/
dropdownItemTemplate: _angular_core.InputSignal<TemplateRef<PaginatorDropdownItemTemplateContext> | undefined>;
/**
* Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
* @defaultValue 'self'
* @group Props
*/
appendTo: _angular_core.InputSignal<AppendTo>;
/**
* Callback to invoke when page changes, the event object contains information about the new state.
* @param {PaginatorState} event - Paginator state.
* @group Emits
*/
onPageChange: _angular_core.OutputEmitterRef<PaginatorState>;
/**
* Template for the dropdown icon.
* @group Templates
*/
dropdownIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Template for the first page link icon.
* @group Templates
*/
firstPageLinkIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Template for the previous page link icon.
* @group Templates
*/
previousPageLinkIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Template for the last page link icon.
* @group Templates
*/
lastPageLinkIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Template for the next page link icon.
* @group Templates
*/
nextPageLinkIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
_componentStyle: PaginatorStyle;
$appendTo: _angular_core.Signal<AppendTo>;
pageLinks: _angular_core.Signal<number[]>;
pageItems: _angular_core.Signal<SelectItem<any>[]>;
rowsPerPageItems: _angular_core.Signal<SelectItem<any>[]>;
paginatorState: _angular_core.Signal<{
page: number;
pageCount: number;
rows: number;
first: number;
totalRecords: number;
}>;
hostDisplay: _angular_core.Signal<"none" | null>;
constructor();
getAriaLabel(labelType: string): string | undefined;
getPageAriaLabel(value: number): string | undefined;
getLocalization(digit: number): string;
isFirstPage(): boolean;
isLastPage(): boolean;
getPageCount(): number;
getPage(): number;
currentPage(): number;
get currentPageReport(): string;
changePage(p: number): void;
changePageToFirst(event: Event): void;
changePageToPrev(event: Event): void;
changePageToNext(event: Event): void;
changePageToLast(event: Event): void;
onPageLinkClick(event: Event, page: number): void;
onRppChange(_event: Event): void;
onPageDropdownChange(event: SelectChangeEvent): void;
empty(): boolean;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Paginator, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Paginator, "p-paginator", never, { "pageLinkSize": { "alias": "pageLinkSize"; "required": false; "isSignal": true; }; "alwaysShow": { "alias": "alwaysShow"; "required": false; "isSignal": true; }; "templateLeft": { "alias": "templateLeft"; "required": false; "isSignal": true; }; "templateRight": { "alias": "templateRight"; "required": false; "isSignal": true; }; "dropdownScrollHeight": { "alias": "dropdownScrollHeight"; "required": false; "isSignal": true; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; "isSignal": true; }; "showCurrentPageReport": { "alias": "showCurrentPageReport"; "required": false; "isSignal": true; }; "showFirstLastIcon": { "alias": "showFirstLastIcon"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "first": { "alias": "first"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "showJumpToPageDropdown": { "alias": "showJumpToPageDropdown"; "required": false; "isSignal": true; }; "showJumpToPageInput": { "alias": "showJumpToPageInput"; "required": false; "isSignal": true; }; "jumpToPageItemTemplate": { "alias": "jumpToPageItemTemplate"; "required": false; "isSignal": true; }; "showPageLinks": { "alias": "showPageLinks"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dropdownItemTemplate": { "alias": "dropdownItemTemplate"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; }, { "rows": "rowsChange"; "first": "firstChange"; "onPageChange": "onPageChange"; }, ["dropdownIconTemplate", "firstPageLinkIconTemplate", "previousPageLinkIconTemplate", "lastPageLinkIconTemplate", "nextPageLinkIconTemplate"], never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class PaginatorModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginatorModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<PaginatorModule, never, [typeof Paginator], [typeof Paginator]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<PaginatorModule>;
}
export { Paginator, PaginatorClasses, PaginatorModule, PaginatorStyle };