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,
760 lines (755 loc) • 43.7 kB
JavaScript
export * from 'primeng/types/paginator';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, numberAttribute, booleanAttribute, model, output, contentChild, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { AngleDoubleLeft } from '@primeicons/angular/angle-double-left';
import { AngleDoubleRight } from '@primeicons/angular/angle-double-right';
import { AngleLeft } from '@primeicons/angular/angle-left';
import { AngleRight } from '@primeicons/angular/angle-right';
import { InputNumber } from 'primeng/inputnumber';
import { Ripple } from 'primeng/ripple';
import { Select } from 'primeng/select';
import { style } from '@primeuix/styles/paginator';
import { BaseStyle } from 'primeng/base';
const classes = {
paginator: ({ instance }) => ['p-paginator p-component'],
content: 'p-paginator-content',
contentStart: 'p-paginator-content-start',
contentEnd: 'p-paginator-content-end',
first: ({ instance }) => [
'p-paginator-first',
{
'p-disabled': instance.isFirstPage() || instance.empty()
}
],
firstIcon: 'p-paginator-first-icon',
prev: ({ instance }) => [
'p-paginator-prev',
{
'p-disabled': instance.isFirstPage() || instance.empty()
}
],
prevIcon: 'p-paginator-prev-icon',
next: ({ instance }) => [
'p-paginator-next',
{
'p-disabled': instance.isLastPage() || instance.empty()
}
],
nextIcon: 'p-paginator-next-icon',
last: ({ instance }) => [
'p-paginator-last',
{
'p-disabled': instance.isLastPage() || instance.empty()
}
],
lastIcon: 'p-paginator-last-icon',
pages: 'p-paginator-pages',
page: ({ instance, pageLink }) => [
'p-paginator-page',
{
'p-paginator-page-selected': pageLink - 1 == instance.getPage()
}
],
current: 'p-paginator-current',
pcRowPerPageDropdown: 'p-paginator-rpp-dropdown',
pcJumpToPageDropdown: 'p-paginator-jtp-dropdown',
pcJumpToPageInput: 'p-paginator-jtp-input'
};
class PaginatorStyle extends BaseStyle {
name = 'paginator';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PaginatorStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PaginatorStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PaginatorStyle, decorators: [{
type: Injectable
}] });
/**
*
* Paginator is a generic component to display content in paged format.
*
* [Live Demo](https://www.primeng.org/paginator)
*
* @module paginatorstyle
*
*/
var PaginatorClasses;
(function (PaginatorClasses) {
/**
* Class name of the paginator element
*/
PaginatorClasses["paginator"] = "p-paginator";
/**
* Class name of the content start element
*/
PaginatorClasses["contentStart"] = "p-paginator-content-start";
/**
* Class name of the content end element
*/
PaginatorClasses["contentEnd"] = "p-paginator-content-end";
/**
* Class name of the first element
*/
PaginatorClasses["first"] = "p-paginator-first";
/**
* Class name of the first icon element
*/
PaginatorClasses["firstIcon"] = "p-paginator-first-icon";
/**
* Class name of the prev element
*/
PaginatorClasses["prev"] = "p-paginator-prev";
/**
* Class name of the prev icon element
*/
PaginatorClasses["prevIcon"] = "p-paginator-prev-icon";
/**
* Class name of the next element
*/
PaginatorClasses["next"] = "p-paginator-next";
/**
* Class name of the next icon element
*/
PaginatorClasses["nextIcon"] = "p-paginator-next-icon";
/**
* Class name of the last element
*/
PaginatorClasses["last"] = "p-paginator-last";
/**
* Class name of the last icon element
*/
PaginatorClasses["lastIcon"] = "p-paginator-last-icon";
/**
* Class name of the pages element
*/
PaginatorClasses["pages"] = "p-paginator-pages";
/**
* Class name of the page element
*/
PaginatorClasses["page"] = "p-paginator-page";
/**
* Class name of the current element
*/
PaginatorClasses["current"] = "p-paginator-current";
/**
* Class name of the row per page dropdown element
*/
PaginatorClasses["pcRowPerPageDropdown"] = "p-paginator-rpp-dropdown";
/**
* Class name of the jump to page dropdown element
*/
PaginatorClasses["pcJumpToPageDropdown"] = "p-paginator-jtp-dropdown";
/**
* Class name of the jump to page input element
*/
PaginatorClasses["pcJumpToPageInput"] = "p-paginator-jtp-input";
})(PaginatorClasses || (PaginatorClasses = {}));
const PAGINATOR_INSTANCE = new InjectionToken('PAGINATOR_INSTANCE');
/**
* Paginator is a generic component to display content in paged format.
* @group Components
*/
class Paginator extends BaseComponent {
componentName = 'Paginator';
bindDirectiveInstance = inject(Bind, { self: true });
$pcPaginator = inject(PAGINATOR_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
}
/**
* Number of page links to display.
* @group Props
*/
pageLinkSize = input(5, { ...(ngDevMode ? { debugName: "pageLinkSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* Whether to show it even there is only one page.
* @group Props
*/
alwaysShow = input(true, { ...(ngDevMode ? { debugName: "alwaysShow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Template instance to inject into the left side of the paginator.
* @param {PaginatorTemplateContext} context - Paginator template context.
* @see {@link PaginatorTemplateContext}
* @group Props
*/
templateLeft = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "templateLeft" }] : /* istanbul ignore next */ []));
/**
* Template instance to inject into the right side of the paginator.
* @param {PaginatorTemplateContext} context - Paginator template context.
* @see {@link PaginatorTemplateContext}
* @group Props
*/
templateRight = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "templateRight" }] : /* istanbul ignore next */ []));
/**
* Dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
* @group Props
*/
dropdownScrollHeight = input('200px', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dropdownScrollHeight" }] : /* istanbul ignore next */ []));
/**
* Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
* @group Props
*/
currentPageReportTemplate = input('{currentPage} of {totalPages}', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "currentPageReportTemplate" }] : /* istanbul ignore next */ []));
/**
* Whether to display current page report.
* @group Props
*/
showCurrentPageReport = input(false, { ...(ngDevMode ? { debugName: "showCurrentPageReport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* When enabled, icons are displayed on paginator to go first and last page.
* @group Props
*/
showFirstLastIcon = input(true, { ...(ngDevMode ? { debugName: "showFirstLastIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Number of total records.
* @group Props
*/
totalRecords = input(0, { ...(ngDevMode ? { debugName: "totalRecords" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* Data count to display per page.
* @group Props
*/
rows = model(0, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
/**
* Zero-relative number of the first row to be displayed.
* @group Props
*/
first = model(0, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
/**
* 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 = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "rowsPerPageOptions" }] : /* istanbul ignore next */ []));
/**
* Whether to display a dropdown to navigate to any page.
* @group Props
*/
showJumpToPageDropdown = input(false, { ...(ngDevMode ? { debugName: "showJumpToPageDropdown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Whether to display a input to navigate to any page.
* @group Props
*/
showJumpToPageInput = input(false, { ...(ngDevMode ? { debugName: "showJumpToPageInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* 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 = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "jumpToPageItemTemplate" }] : /* istanbul ignore next */ []));
/**
* Whether to show page links.
* @group Props
*/
showPageLinks = input(true, { ...(ngDevMode ? { debugName: "showPageLinks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Locale to be used in formatting.
* @group Props
*/
locale = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
/**
* 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 = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "dropdownItemTemplate" }] : /* istanbul ignore next */ []));
/**
* 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 = input(undefined, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
/**
* Callback to invoke when page changes, the event object contains information about the new state.
* @param {PaginatorState} event - Paginator state.
* @group Emits
*/
onPageChange = output();
/**
* Template for the dropdown icon.
* @group Templates
*/
dropdownIconTemplate = contentChild('dropdownicon', { ...(ngDevMode ? { debugName: "dropdownIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for the first page link icon.
* @group Templates
*/
firstPageLinkIconTemplate = contentChild('firstpagelinkicon', { ...(ngDevMode ? { debugName: "firstPageLinkIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for the previous page link icon.
* @group Templates
*/
previousPageLinkIconTemplate = contentChild('previouspagelinkicon', { ...(ngDevMode ? { debugName: "previousPageLinkIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for the last page link icon.
* @group Templates
*/
lastPageLinkIconTemplate = contentChild('lastpagelinkicon', { ...(ngDevMode ? { debugName: "lastPageLinkIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for the next page link icon.
* @group Templates
*/
nextPageLinkIconTemplate = contentChild('nextpagelinkicon', { ...(ngDevMode ? { debugName: "nextPageLinkIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
_componentStyle = inject(PaginatorStyle);
$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
pageLinks = computed(() => {
const numberOfPages = this.getPageCount();
const visiblePages = Math.min(this.pageLinkSize(), numberOfPages);
const page = this.getPage();
let start = Math.max(0, Math.ceil(page - visiblePages / 2));
const end = Math.min(numberOfPages - 1, start + visiblePages - 1);
const delta = this.pageLinkSize() - (end - start + 1);
start = Math.max(0, start - delta);
const links = [];
for (let i = start; i <= end; i++) {
links.push(i + 1);
}
return links;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "pageLinks" }] : /* istanbul ignore next */ []));
pageItems = computed(() => {
if (!this.showJumpToPageDropdown())
return [];
const items = [];
for (let i = 0; i < this.getPageCount(); i++) {
items.push({ label: String(i + 1), value: i });
}
return items;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "pageItems" }] : /* istanbul ignore next */ []));
rowsPerPageItems = computed(() => {
const options = this.rowsPerPageOptions();
if (!options)
return [];
const items = [];
let showAllItem = null;
for (const opt of options) {
if (typeof opt === 'object' && opt['showAll']) {
showAllItem = { label: opt['showAll'], value: this.totalRecords() };
}
else {
items.push({ label: String(this.getLocalization(opt)), value: opt });
}
}
if (showAllItem)
items.push(showAllItem);
return items;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "rowsPerPageItems" }] : /* istanbul ignore next */ []));
paginatorState = computed(() => ({
page: this.getPage(),
pageCount: this.getPageCount(),
rows: this.rows(),
first: this.first(),
totalRecords: this.totalRecords()
}), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "paginatorState" }] : /* istanbul ignore next */ []));
hostDisplay = computed(() => (this.alwaysShow() || this.pageLinks().length > 1 ? null : 'none'), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "hostDisplay" }] : /* istanbul ignore next */ []));
constructor() {
super();
effect(() => {
const totalRecords = this.totalRecords();
untracked(() => {
const page = this.getPage();
if (page > 0 && totalRecords && this.first() >= totalRecords) {
Promise.resolve(null).then(() => this.changePage(page - 1));
}
});
});
}
getAriaLabel(labelType) {
return this.config.translation.aria ? this.config.translation.aria[labelType] : undefined;
}
getPageAriaLabel(value) {
return this.config.translation.aria ? this.config.translation.aria.pageLabel?.replace(/{page}/g, `${value}`) : undefined;
}
getLocalization(digit) {
const numerals = [...new Intl.NumberFormat(this.locale(), { useGrouping: false }).format(9876543210)].reverse();
const index = new Map(numerals.map((d, i) => [i, d]));
if (digit > 9) {
const numbers = String(digit).split('');
return numbers.map((number) => index.get(Number(number))).join('');
}
else {
return index.get(digit);
}
}
isFirstPage() {
return this.getPage() === 0;
}
isLastPage() {
return this.getPage() === this.getPageCount() - 1;
}
getPageCount() {
return Math.ceil(this.totalRecords() / this.rows());
}
getPage() {
return Math.floor(this.first() / this.rows());
}
currentPage() {
return this.getPageCount() > 0 ? this.getPage() + 1 : 0;
}
get currentPageReport() {
return this.currentPageReportTemplate()
.replace('{currentPage}', String(this.currentPage()))
.replace('{totalPages}', String(this.getPageCount()))
.replace('{first}', String(this.totalRecords() > 0 ? this.first() + 1 : 0))
.replace('{last}', String(Math.min(this.first() + this.rows(), this.totalRecords())))
.replace('{rows}', String(this.rows()))
.replace('{totalRecords}', String(this.totalRecords()));
}
changePage(p) {
const pc = this.getPageCount();
if (p >= 0 && p < pc) {
this.first.set(this.rows() * p);
this.onPageChange.emit({
page: p,
first: this.first(),
rows: this.rows(),
pageCount: pc
});
}
}
changePageToFirst(event) {
if (!this.isFirstPage()) {
this.changePage(0);
}
event.preventDefault();
}
changePageToPrev(event) {
this.changePage(this.getPage() - 1);
event.preventDefault();
}
changePageToNext(event) {
this.changePage(this.getPage() + 1);
event.preventDefault();
}
changePageToLast(event) {
if (!this.isLastPage()) {
this.changePage(this.getPageCount() - 1);
}
event.preventDefault();
}
onPageLinkClick(event, page) {
this.changePage(page);
event.preventDefault();
}
onRppChange(_event) {
this.changePage(this.getPage());
}
onPageDropdownChange(event) {
this.changePage(event.value);
}
empty() {
return this.getPageCount() === 0;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Paginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: Paginator, isStandalone: true, selector: "p-paginator", inputs: { pageLinkSize: { classPropertyName: "pageLinkSize", publicName: "pageLinkSize", isSignal: true, isRequired: false, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: true, isRequired: false, transformFunction: null }, templateLeft: { classPropertyName: "templateLeft", publicName: "templateLeft", isSignal: true, isRequired: false, transformFunction: null }, templateRight: { classPropertyName: "templateRight", publicName: "templateRight", isSignal: true, isRequired: false, transformFunction: null }, dropdownScrollHeight: { classPropertyName: "dropdownScrollHeight", publicName: "dropdownScrollHeight", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastIcon: { classPropertyName: "showFirstLastIcon", publicName: "showFirstLastIcon", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, showJumpToPageDropdown: { classPropertyName: "showJumpToPageDropdown", publicName: "showJumpToPageDropdown", isSignal: true, isRequired: false, transformFunction: null }, showJumpToPageInput: { classPropertyName: "showJumpToPageInput", publicName: "showJumpToPageInput", isSignal: true, isRequired: false, transformFunction: null }, jumpToPageItemTemplate: { classPropertyName: "jumpToPageItemTemplate", publicName: "jumpToPageItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, showPageLinks: { classPropertyName: "showPageLinks", publicName: "showPageLinks", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", first: "firstChange", onPageChange: "onPageChange" }, host: { properties: { "class": "cx('paginator')", "style.display": "hostDisplay()" } }, providers: [PaginatorStyle, { provide: PAGINATOR_INSTANCE, useExisting: Paginator }, { provide: PARENT_INSTANCE, useExisting: Paginator }], queries: [{ propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"], isSignal: true }, { propertyName: "firstPageLinkIconTemplate", first: true, predicate: ["firstpagelinkicon"], isSignal: true }, { propertyName: "previousPageLinkIconTemplate", first: true, predicate: ["previouspagelinkicon"], isSignal: true }, { propertyName: "lastPageLinkIconTemplate", first: true, predicate: ["lastpagelinkicon"], isSignal: true }, { propertyName: "nextPageLinkIconTemplate", first: true, predicate: ["nextpagelinkicon"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
(templateLeft()) {
<div [pBind]="ptm('contentStart')" [class]="cx('contentStart')">
<ng-container *ngTemplateOutlet="templateLeft()!; context: { $implicit: paginatorState() }"></ng-container>
</div>
}
(showCurrentPageReport()) {
<span [pBind]="ptm('current')" [class]="cx('current')">{{ currentPageReport }}</span>
}
(showFirstLastIcon()) {
<button [pBind]="ptm('first')" type="button" (click)="changePageToFirst($event)" pRipple [class]="cx('first')" [attr.aria-label]="getAriaLabel('firstPageLabel')">
(!firstPageLinkIconTemplate()) {
<svg [pBind]="ptm('firstIcon')" data-p-icon="angle-double-left" [class]="cx('firstIcon')" />
} {
<span [class]="cx('firstIcon')">
<ng-template *ngTemplateOutlet="firstPageLinkIconTemplate()!"></ng-template>
</span>
}
</button>
}
<button [pBind]="ptm('prev')" type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToPrev($event)" pRipple [class]="cx('prev')" [attr.aria-label]="getAriaLabel('prevPageLabel')">
(!previousPageLinkIconTemplate()) {
<svg [pBind]="ptm('prevIcon')" data-p-icon="angle-left" [class]="cx('prevIcon')" />
} {
<span [class]="cx('prevIcon')">
<ng-template *ngTemplateOutlet="previousPageLinkIconTemplate()!"></ng-template>
</span>
}
</button>
(showPageLinks()) {
<span [pBind]="ptm('pages')" [class]="cx('pages')">
(pageLink of pageLinks(); track $index) {
<button
[pBind]="ptm('page')"
type="button"
[class]="cx('page', { pageLink })"
[attr.aria-label]="getPageAriaLabel(pageLink)"
[attr.aria-current]="pageLink - 1 == getPage() ? 'page' : undefined"
(click)="onPageLinkClick($event, pageLink - 1)"
pRipple
>
{{ getLocalization(pageLink) }}
</button>
}
</span>
}
(showJumpToPageDropdown()) {
<p-select
[options]="pageItems()"
[ngModel]="getPage()"
[disabled]="empty()"
[attr.aria-label]="getAriaLabel('jumpToPageDropdownLabel')"
[class]="cx('pcJumpToPageDropdown')"
(onChange)="onPageDropdownChange($event)"
[appendTo]="$appendTo()"
[scrollHeight]="dropdownScrollHeight()"
[pt]="ptm('pcJumpToPageDropdown')"
[unstyled]="unstyled()"
>
<ng-template #selectedItem>{{ currentPageReport }}</ng-template>
(jumpToPageItemTemplate()) {
<ng-template #item let-item>
<ng-container *ngTemplateOutlet="jumpToPageItemTemplate()!; context: { $implicit: item }"></ng-container>
</ng-template>
}
(dropdownIconTemplate()) {
<ng-template #dropdownicon>
<ng-container *ngTemplateOutlet="dropdownIconTemplate()!"></ng-container>
</ng-template>
}
</p-select>
}
<button [pBind]="ptm('next')" type="button" [disabled]="isLastPage() || empty()" (click)="changePageToNext($event)" pRipple [class]="cx('next')" [attr.aria-label]="getAriaLabel('nextPageLabel')">
(!nextPageLinkIconTemplate()) {
<svg [pBind]="ptm('nextIcon')" data-p-icon="angle-right" [class]="cx('nextIcon')" />
} {
<span [class]="cx('nextIcon')">
<ng-template *ngTemplateOutlet="nextPageLinkIconTemplate()!"></ng-template>
</span>
}
</button>
(showFirstLastIcon()) {
<button [pBind]="ptm('last')" type="button" [disabled]="isLastPage() || empty()" (click)="changePageToLast($event)" pRipple [class]="cx('last')" [attr.aria-label]="getAriaLabel('lastPageLabel')">
(!lastPageLinkIconTemplate()) {
<svg [pBind]="ptm('lastIcon')" data-p-icon="angle-double-right" [class]="cx('lastIcon')" />
} {
<span [class]="cx('lastIcon')">
<ng-template *ngTemplateOutlet="lastPageLinkIconTemplate()!"></ng-template>
</span>
}
</button>
}
(showJumpToPageInput()) {
<p-inputnumber [pt]="ptm('pcJumpToPageInput')" [ngModel]="currentPage()" [class]="cx('pcJumpToPageInput')" [disabled]="empty()" (ngModelChange)="changePage($event - 1)" [unstyled]="unstyled()" />
}
(rowsPerPageOptions()) {
<p-select
[options]="rowsPerPageItems()"
[ngModel]="rows()"
(ngModelChange)="rows.set($event)"
[class]="cx('pcRowPerPageDropdown')"
[disabled]="empty()"
(onChange)="onRppChange($event)"
[appendTo]="$appendTo()"
[scrollHeight]="dropdownScrollHeight()"
[ariaLabel]="getAriaLabel('rowsPerPageLabel')"
[pt]="ptm('pcRowPerPageDropdown')"
[unstyled]="unstyled()"
>
(dropdownItemTemplate()) {
<ng-template #item let-item>
<ng-container *ngTemplateOutlet="dropdownItemTemplate()!; context: { $implicit: item }"></ng-container>
</ng-template>
}
(dropdownIconTemplate()) {
<ng-template #dropdownicon>
<ng-container *ngTemplateOutlet="dropdownIconTemplate()!"></ng-container>
</ng-template>
}
</p-select>
}
(templateRight()) {
<div [pBind]="ptm('contentEnd')" [class]="cx('contentEnd')">
<ng-container *ngTemplateOutlet="templateRight()!; context: { $implicit: paginatorState() }"></ng-container>
</div>
}
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "multiple", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: InputNumber, selector: "p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: AngleDoubleLeft, selector: "svg[data-p-icon=\"angle-double-left\"]" }, { kind: "component", type: AngleDoubleRight, selector: "svg[data-p-icon=\"angle-double-right\"]" }, { kind: "component", type: AngleLeft, selector: "svg[data-p-icon=\"angle-left\"]" }, { kind: "component", type: AngleRight, selector: "svg[data-p-icon=\"angle-right\"]" }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Paginator, decorators: [{
type: Component,
args: [{
selector: 'p-paginator',
standalone: true,
imports: [NgTemplateOutlet, Select, InputNumber, FormsModule, Ripple, AngleDoubleLeft, AngleDoubleRight, AngleLeft, AngleRight, Bind],
template: `
(templateLeft()) {
<div [pBind]="ptm('contentStart')" [class]="cx('contentStart')">
<ng-container *ngTemplateOutlet="templateLeft()!; context: { $implicit: paginatorState() }"></ng-container>
</div>
}
(showCurrentPageReport()) {
<span [pBind]="ptm('current')" [class]="cx('current')">{{ currentPageReport }}</span>
}
(showFirstLastIcon()) {
<button [pBind]="ptm('first')" type="button" (click)="changePageToFirst($event)" pRipple [class]="cx('first')" [attr.aria-label]="getAriaLabel('firstPageLabel')">
(!firstPageLinkIconTemplate()) {
<svg [pBind]="ptm('firstIcon')" data-p-icon="angle-double-left" [class]="cx('firstIcon')" />
} {
<span [class]="cx('firstIcon')">
<ng-template *ngTemplateOutlet="firstPageLinkIconTemplate()!"></ng-template>
</span>
}
</button>
}
<button [pBind]="ptm('prev')" type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToPrev($event)" pRipple [class]="cx('prev')" [attr.aria-label]="getAriaLabel('prevPageLabel')">
(!previousPageLinkIconTemplate()) {
<svg [pBind]="ptm('prevIcon')" data-p-icon="angle-left" [class]="cx('prevIcon')" />
} {
<span [class]="cx('prevIcon')">
<ng-template *ngTemplateOutlet="previousPageLinkIconTemplate()!"></ng-template>
</span>
}
</button>
(showPageLinks()) {
<span [pBind]="ptm('pages')" [class]="cx('pages')">
(pageLink of pageLinks(); track $index) {
<button
[pBind]="ptm('page')"
type="button"
[class]="cx('page', { pageLink })"
[attr.aria-label]="getPageAriaLabel(pageLink)"
[attr.aria-current]="pageLink - 1 == getPage() ? 'page' : undefined"
(click)="onPageLinkClick($event, pageLink - 1)"
pRipple
>
{{ getLocalization(pageLink) }}
</button>
}
</span>
}
(showJumpToPageDropdown()) {
<p-select
[options]="pageItems()"
[ngModel]="getPage()"
[disabled]="empty()"
[attr.aria-label]="getAriaLabel('jumpToPageDropdownLabel')"
[class]="cx('pcJumpToPageDropdown')"
(onChange)="onPageDropdownChange($event)"
[appendTo]="$appendTo()"
[scrollHeight]="dropdownScrollHeight()"
[pt]="ptm('pcJumpToPageDropdown')"
[unstyled]="unstyled()"
>
<ng-template #selectedItem>{{ currentPageReport }}</ng-template>
(jumpToPageItemTemplate()) {
<ng-template #item let-item>
<ng-container *ngTemplateOutlet="jumpToPageItemTemplate()!; context: { $implicit: item }"></ng-container>
</ng-template>
}
(dropdownIconTemplate()) {
<ng-template #dropdownicon>
<ng-container *ngTemplateOutlet="dropdownIconTemplate()!"></ng-container>
</ng-template>
}
</p-select>
}
<button [pBind]="ptm('next')" type="button" [disabled]="isLastPage() || empty()" (click)="changePageToNext($event)" pRipple [class]="cx('next')" [attr.aria-label]="getAriaLabel('nextPageLabel')">
(!nextPageLinkIconTemplate()) {
<svg [pBind]="ptm('nextIcon')" data-p-icon="angle-right" [class]="cx('nextIcon')" />
} {
<span [class]="cx('nextIcon')">
<ng-template *ngTemplateOutlet="nextPageLinkIconTemplate()!"></ng-template>
</span>
}
</button>
(showFirstLastIcon()) {
<button [pBind]="ptm('last')" type="button" [disabled]="isLastPage() || empty()" (click)="changePageToLast($event)" pRipple [class]="cx('last')" [attr.aria-label]="getAriaLabel('lastPageLabel')">
(!lastPageLinkIconTemplate()) {
<svg [pBind]="ptm('lastIcon')" data-p-icon="angle-double-right" [class]="cx('lastIcon')" />
} {
<span [class]="cx('lastIcon')">
<ng-template *ngTemplateOutlet="lastPageLinkIconTemplate()!"></ng-template>
</span>
}
</button>
}
(showJumpToPageInput()) {
<p-inputnumber [pt]="ptm('pcJumpToPageInput')" [ngModel]="currentPage()" [class]="cx('pcJumpToPageInput')" [disabled]="empty()" (ngModelChange)="changePage($event - 1)" [unstyled]="unstyled()" />
}
(rowsPerPageOptions()) {
<p-select
[options]="rowsPerPageItems()"
[ngModel]="rows()"
(ngModelChange)="rows.set($event)"
[class]="cx('pcRowPerPageDropdown')"
[disabled]="empty()"
(onChange)="onRppChange($event)"
[appendTo]="$appendTo()"
[scrollHeight]="dropdownScrollHeight()"
[ariaLabel]="getAriaLabel('rowsPerPageLabel')"
[pt]="ptm('pcRowPerPageDropdown')"
[unstyled]="unstyled()"
>
(dropdownItemTemplate()) {
<ng-template #item let-item>
<ng-container *ngTemplateOutlet="dropdownItemTemplate()!; context: { $implicit: item }"></ng-container>
</ng-template>
}
(dropdownIconTemplate()) {
<ng-template #dropdownicon>
<ng-container *ngTemplateOutlet="dropdownIconTemplate()!"></ng-container>
</ng-template>
}
</p-select>
}
(templateRight()) {
<div [pBind]="ptm('contentEnd')" [class]="cx('contentEnd')">
<ng-container *ngTemplateOutlet="templateRight()!; context: { $implicit: paginatorState() }"></ng-container>
</div>
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [PaginatorStyle, { provide: PAGINATOR_INSTANCE, useExisting: Paginator }, { provide: PARENT_INSTANCE, useExisting: Paginator }],
host: {
'[class]': "cx('paginator')",
'[style.display]': 'hostDisplay()'
},
hostDirectives: [Bind]
}]
}], ctorParameters: () => [], propDecorators: { pageLinkSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkSize", required: false }] }], alwaysShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShow", required: false }] }], templateLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateLeft", required: false }] }], templateRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateRight", required: false }] }], dropdownScrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownScrollHeight", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], showFirstLastIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastIcon", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], showJumpToPageDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "showJumpToPageDropdown", required: false }] }], showJumpToPageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showJumpToPageInput", required: false }] }], jumpToPageItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "jumpToPageItemTemplate", required: false }] }], showPageLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageLinks", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dropdownItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownItemTemplate", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], dropdownIconTemplate: [{ type: i0.ContentChild, args: ['dropdownicon', { ...{ descendants: false }, isSignal: true }] }], firstPageLinkIconTemplate: [{ type: i0.ContentChild, args: ['firstpagelinkicon', { ...{ descendants: false }, isSignal: true }] }], previousPageLinkIconTemplate: [{ type: i0.ContentChild, args: ['previouspagelinkicon', { ...{ descendants: false }, isSignal: true }] }], lastPageLinkIconTemplate: [{ type: i0.ContentChild, args: ['lastpagelinkicon', { ...{ descendants: false }, isSignal: true }] }], nextPageLinkIconTemplate: [{ type: i0.ContentChild, args: ['nextpagelinkicon', { ...{ descendants: false }, isSignal: true }] }] } });
class PaginatorModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: PaginatorModule, imports: [Paginator], exports: [Paginator] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PaginatorModule, imports: [Paginator] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PaginatorModule, decorators: [{
type: NgModule,
args: [{
imports: [Paginator],
exports: [Paginator]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Paginator, PaginatorClasses, PaginatorModule, PaginatorStyle };
//# sourceMappingURL=primeng-paginator.mjs.map