primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
1,052 lines (1,039 loc) • 55.8 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, inject, numberAttribute, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ContentChildren, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i3 from 'primeng/api';
import { PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleLeftIcon, AngleRightIcon } from 'primeng/icons';
import { InputNumber } from 'primeng/inputnumber';
import { Ripple } from 'primeng/ripple';
import { Select } from 'primeng/select';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-paginator {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
background: ${dt('paginator.background')};
color: ${dt('paginator.color')};
padding: ${dt('paginator.padding')};
border-radius: ${dt('paginator.border.radius')};
gap: ${dt('paginator.gap')};
}
.p-paginator-content {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: ${dt('paginator.gap')};
}
.p-paginator-content-start {
margin-inline-end: auto;
}
.p-paginator-content-end {
margin-inline-start: auto;
}
.p-paginator-page,
.p-paginator-next,
.p-paginator-last,
.p-paginator-first,
.p-paginator-prev {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
user-select: none;
overflow: hidden;
position: relative;
background: ${dt('paginator.nav.button.background')};
border: 0 none;
color: ${dt('paginator.nav.button.color')};
min-width: ${dt('paginator.nav.button.width')};
height: ${dt('paginator.nav.button.height')};
transition: background ${dt('paginator.transition.duration')}, color ${dt('paginator.transition.duration')}, outline-color ${dt('paginator.transition.duration')}, box-shadow ${dt('paginator.transition.duration')};
border-radius: ${dt('paginator.nav.button.border.radius')};
padding: 0;
margin: 0;
}
.p-paginator-page:focus-visible,
.p-paginator-next:focus-visible,
.p-paginator-last:focus-visible,
.p-paginator-first:focus-visible,
.p-paginator-prev:focus-visible {
box-shadow: ${dt('paginator.nav.button.focus.ring.shadow')};
outline: ${dt('paginator.nav.button.focus.ring.width')} ${dt('paginator.nav.button.focus.ring.style')} ${dt('paginator.nav.button.focus.ring.color')};
outline-offset: ${dt('paginator.nav.button.focus.ring.offset')};
}
.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover,
.p-paginator-first:not(.p-disabled):hover,
.p-paginator-prev:not(.p-disabled):hover,
.p-paginator-next:not(.p-disabled):hover,
.p-paginator-last:not(.p-disabled):hover {
background: ${dt('paginator.nav.button.hover.background')};
color: ${dt('paginator.nav.button.hover.color')};
}
.p-paginator-first:dir(rtl),
.p-paginator-prev:dir(rtl),
.p-paginator-next:dir(rtl),
.p-paginator-last:dir(rtl) {
transform: rotate(180deg);
}
.p-paginator-page.p-paginator-page-selected {
background: ${dt('paginator.nav.button.selected.background')};
color: ${dt('paginator.nav.button.selected.color')};
}
.p-paginator-current {
color: ${dt('paginator.current.page.report.color')};
}
.p-paginator-pages {
display: flex;
align-items: center;
gap: ${dt('paginator.gap')};
}
.p-paginator-jtp-input .p-inputtext {
max-width: ${dt('paginator.jump.to.page.input.max.width')};
}
`;
const classes = {
paginator: ({ instance, key }) => [
'p-paginator p-component',
{
'p-paginator-default': !instance.hasBreakpoints(),
[`p-paginator-${key}`]: instance.hasBreakpoints()
}
],
content: 'p-paginator-content',
contentStart: 'p-paginator-content-start',
contentEnd: 'p-paginator-content-end',
first: ({ instance }) => [
'p-paginator-first',
{
'p-disabled': instance.$attrs.disabled
}
],
firstIcon: 'p-paginator-first-icon',
prev: ({ instance }) => [
'p-paginator-prev',
{
'p-disabled': instance.$attrs.disabled
}
],
prevIcon: 'p-paginator-prev-icon',
next: ({ instance }) => [
'p-paginator-next',
{
'p-disabled': instance.$attrs.disabled
}
],
nextIcon: 'p-paginator-next-icon',
last: ({ instance }) => [
'p-paginator-last',
{
'p-disabled': instance.$attrs.disabled
}
],
lastIcon: 'p-paginator-last-icon',
pages: 'p-paginator-pages',
page: ({ props, pageLink }) => [
'p-paginator-page',
{
'p-paginator-page-selected': pageLink - 1 === props.page
}
],
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';
theme = theme;
classes = classes;
static ɵfac = /*@__PURE__*/ (() => { let ɵPaginatorStyle_BaseFactory; return function PaginatorStyle_Factory(__ngFactoryType__) { return (ɵPaginatorStyle_BaseFactory || (ɵPaginatorStyle_BaseFactory = i0.ɵɵgetInheritedFactory(PaginatorStyle)))(__ngFactoryType__ || PaginatorStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PaginatorStyle, factory: PaginatorStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginatorStyle, [{
type: Injectable
}], null, null); })();
/**
*
* 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 _c0 = ["dropdownicon"];
const _c1 = ["firstpagelinkicon"];
const _c2 = ["previouspagelinkicon"];
const _c3 = ["lastpagelinkicon"];
const _c4 = ["nextpagelinkicon"];
const _c5 = a0 => ({ "p-disabled": a0 });
const _c6 = a0 => ({ $implicit: a0 });
const _c7 = a0 => ({ "p-paginator-page-selected": a0 });
function Paginator_div_0_div_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Paginator_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 16);
i0.ɵɵtemplate(1, Paginator_div_0_div_1_ng_container_1_Template, 1, 0, "ng-container", 17);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵattribute("data-pc-section", "start");
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.templateLeft)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c6, ctx_r1.paginatorState));
} }
function Paginator_div_0_span_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 18);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r1.currentPageReport);
} }
function Paginator_div_0_button_3_AngleDoubleLeftIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDoubleLeftIcon", 21);
} if (rf & 2) {
i0.ɵɵproperty("styleClass", "p-paginator-first-icon");
} }
function Paginator_div_0_button_3_span_2_1_ng_template_0_Template(rf, ctx) { }
function Paginator_div_0_button_3_span_2_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Paginator_div_0_button_3_span_2_1_ng_template_0_Template, 0, 0, "ng-template");
} }
function Paginator_div_0_button_3_span_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 22);
i0.ɵɵtemplate(1, Paginator_div_0_button_3_span_2_1_Template, 1, 0, null, 23);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.firstPageLinkIconTemplate || ctx_r1._firstPageLinkIconTemplate);
} }
function Paginator_div_0_button_3_Template(rf, ctx) { if (rf & 1) {
const _r3 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "button", 19);
i0.ɵɵlistener("click", function Paginator_div_0_button_3_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changePageToFirst($event)); });
i0.ɵɵtemplate(1, Paginator_div_0_button_3_AngleDoubleLeftIcon_1_Template, 1, 1, "AngleDoubleLeftIcon", 6)(2, Paginator_div_0_button_3_span_2_Template, 2, 1, "span", 20);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("disabled", ctx_r1.isFirstPage() || ctx_r1.empty())("ngClass", i0.ɵɵpureFunction1(5, _c5, ctx_r1.isFirstPage() || ctx_r1.empty()));
i0.ɵɵattribute("aria-label", ctx_r1.getAriaLabel("firstPageLabel"));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.firstPageLinkIconTemplate && !ctx_r1._firstPageLinkIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.firstPageLinkIconTemplate || ctx_r1._firstPageLinkIconTemplate);
} }
function Paginator_div_0_AngleLeftIcon_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleLeftIcon", 21);
} if (rf & 2) {
i0.ɵɵproperty("styleClass", "p-paginator-prev-icon");
} }
function Paginator_div_0_span_6_1_ng_template_0_Template(rf, ctx) { }
function Paginator_div_0_span_6_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Paginator_div_0_span_6_1_ng_template_0_Template, 0, 0, "ng-template");
} }
function Paginator_div_0_span_6_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 24);
i0.ɵɵtemplate(1, Paginator_div_0_span_6_1_Template, 1, 0, null, 23);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.previousPageLinkIconTemplate || ctx_r1._previousPageLinkIconTemplate);
} }
function Paginator_div_0_span_7_button_1_Template(rf, ctx) { if (rf & 1) {
const _r4 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "button", 27);
i0.ɵɵlistener("click", function Paginator_div_0_span_7_button_1_Template_button_click_0_listener($event) { const pageLink_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onPageLinkClick($event, pageLink_r5 - 1)); });
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const pageLink_r5 = ctx.$implicit;
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c7, pageLink_r5 - 1 == ctx_r1.getPage()));
i0.ɵɵattribute("aria-label", ctx_r1.getPageAriaLabel(pageLink_r5))("aria-current", pageLink_r5 - 1 == ctx_r1.getPage() ? "page" : undefined);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1(" ", ctx_r1.getLocalization(pageLink_r5), " ");
} }
function Paginator_div_0_span_7_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 25);
i0.ɵɵtemplate(1, Paginator_div_0_span_7_button_1_Template, 2, 6, "button", 26);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵproperty("ngForOf", ctx_r1.pageLinks);
} }
function Paginator_div_0_p_select_8_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtext(0);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵtextInterpolate(ctx_r1.currentPageReport);
} }
function Paginator_div_0_p_select_8_ng_container_2_ng_template_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Paginator_div_0_p_select_8_ng_container_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Paginator_div_0_p_select_8_ng_container_2_ng_template_1_ng_container_0_Template, 1, 0, "ng-container", 17);
} if (rf & 2) {
const item_r7 = ctx.$implicit;
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.jumpToPageItemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c6, item_r7));
} }
function Paginator_div_0_p_select_8_ng_container_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, Paginator_div_0_p_select_8_ng_container_2_ng_template_1_Template, 1, 4, "ng-template", 31);
i0.ɵɵelementContainerEnd();
} }
function Paginator_div_0_p_select_8_3_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Paginator_div_0_p_select_8_3_ng_template_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Paginator_div_0_p_select_8_3_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 23);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.dropdownIconTemplate || ctx_r1._dropdownIconTemplate);
} }
function Paginator_div_0_p_select_8_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Paginator_div_0_p_select_8_3_ng_template_0_Template, 1, 1, "ng-template", 32);
} }
function Paginator_div_0_p_select_8_Template(rf, ctx) { if (rf & 1) {
const _r6 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-select", 28);
i0.ɵɵlistener("onChange", function Paginator_div_0_p_select_8_Template_p_select_onChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onPageDropdownChange($event)); });
i0.ɵɵtemplate(1, Paginator_div_0_p_select_8_ng_template_1_Template, 1, 1, "ng-template", 29)(2, Paginator_div_0_p_select_8_ng_container_2_Template, 2, 0, "ng-container", 30)(3, Paginator_div_0_p_select_8_3_Template, 1, 0, null, 30);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("options", ctx_r1.pageItems)("ngModel", ctx_r1.getPage())("disabled", ctx_r1.empty())("appendTo", ctx_r1.dropdownAppendTo)("scrollHeight", ctx_r1.dropdownScrollHeight);
i0.ɵɵattribute("aria-label", ctx_r1.getAriaLabel("jumpToPageDropdownLabel"));
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx_r1.jumpToPageItemTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.dropdownIconTemplate || ctx_r1._dropdownIconTemplate);
} }
function Paginator_div_0_AngleRightIcon_10_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleRightIcon", 21);
} if (rf & 2) {
i0.ɵɵproperty("styleClass", "p-paginator-next-icon");
} }
function Paginator_div_0_span_11_1_ng_template_0_Template(rf, ctx) { }
function Paginator_div_0_span_11_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Paginator_div_0_span_11_1_ng_template_0_Template, 0, 0, "ng-template");
} }
function Paginator_div_0_span_11_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 33);
i0.ɵɵtemplate(1, Paginator_div_0_span_11_1_Template, 1, 0, null, 23);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.nextPageLinkIconTemplate || ctx_r1._nextPageLinkIconTemplate);
} }
function Paginator_div_0_button_12_AngleDoubleRightIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "AngleDoubleRightIcon", 21);
} if (rf & 2) {
i0.ɵɵproperty("styleClass", "p-paginator-last-icon");
} }
function Paginator_div_0_button_12_span_2_1_ng_template_0_Template(rf, ctx) { }
function Paginator_div_0_button_12_span_2_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Paginator_div_0_button_12_span_2_1_ng_template_0_Template, 0, 0, "ng-template");
} }
function Paginator_div_0_button_12_span_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 36);
i0.ɵɵtemplate(1, Paginator_div_0_button_12_span_2_1_Template, 1, 0, null, 23);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.lastPageLinkIconTemplate || ctx_r1._lastPageLinkIconTemplate);
} }
function Paginator_div_0_button_12_Template(rf, ctx) { if (rf & 1) {
const _r8 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "button", 34);
i0.ɵɵlistener("click", function Paginator_div_0_button_12_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changePageToLast($event)); });
i0.ɵɵtemplate(1, Paginator_div_0_button_12_AngleDoubleRightIcon_1_Template, 1, 1, "AngleDoubleRightIcon", 6)(2, Paginator_div_0_button_12_span_2_Template, 2, 1, "span", 35);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("disabled", ctx_r1.isLastPage() || ctx_r1.empty())("ngClass", i0.ɵɵpureFunction1(5, _c5, ctx_r1.isLastPage() || ctx_r1.empty()));
i0.ɵɵattribute("aria-label", ctx_r1.getAriaLabel("lastPageLabel"));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.lastPageLinkIconTemplate && !ctx_r1._lastPageLinkIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.lastPageLinkIconTemplate || ctx_r1._lastPageLinkIconTemplate);
} }
function Paginator_div_0_p_inputnumber_13_Template(rf, ctx) { if (rf & 1) {
const _r9 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-inputnumber", 37);
i0.ɵɵlistener("ngModelChange", function Paginator_div_0_p_inputnumber_13_Template_p_inputnumber_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changePage($event - 1)); });
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngModel", ctx_r1.currentPage())("disabled", ctx_r1.empty());
} }
function Paginator_div_0_p_select_14_ng_container_1_ng_template_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Paginator_div_0_p_select_14_ng_container_1_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Paginator_div_0_p_select_14_ng_container_1_ng_template_1_ng_container_0_Template, 1, 0, "ng-container", 17);
} if (rf & 2) {
const item_r11 = ctx.$implicit;
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.dropdownItemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c6, item_r11));
} }
function Paginator_div_0_p_select_14_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, Paginator_div_0_p_select_14_ng_container_1_ng_template_1_Template, 1, 4, "ng-template", 31);
i0.ɵɵelementContainerEnd();
} }
function Paginator_div_0_p_select_14_2_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Paginator_div_0_p_select_14_2_ng_template_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Paginator_div_0_p_select_14_2_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 23);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.dropdownIconTemplate || ctx_r1._dropdownIconTemplate);
} }
function Paginator_div_0_p_select_14_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Paginator_div_0_p_select_14_2_ng_template_0_Template, 1, 1, "ng-template", 32);
} }
function Paginator_div_0_p_select_14_Template(rf, ctx) { if (rf & 1) {
const _r10 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-select", 38);
i0.ɵɵtwoWayListener("ngModelChange", function Paginator_div_0_p_select_14_Template_p_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.rows, $event) || (ctx_r1.rows = $event); return i0.ɵɵresetView($event); });
i0.ɵɵlistener("onChange", function Paginator_div_0_p_select_14_Template_p_select_onChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRppChange($event)); });
i0.ɵɵtemplate(1, Paginator_div_0_p_select_14_ng_container_1_Template, 2, 0, "ng-container", 30)(2, Paginator_div_0_p_select_14_2_Template, 1, 0, null, 30);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("options", ctx_r1.rowsPerPageItems);
i0.ɵɵtwoWayProperty("ngModel", ctx_r1.rows);
i0.ɵɵproperty("disabled", ctx_r1.empty())("appendTo", ctx_r1.dropdownAppendTo)("scrollHeight", ctx_r1.dropdownScrollHeight)("ariaLabel", ctx_r1.getAriaLabel("rowsPerPageLabel"));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.dropdownItemTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.dropdownIconTemplate || ctx_r1._dropdownIconTemplate);
} }
function Paginator_div_0_div_15_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Paginator_div_0_div_15_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 39);
i0.ɵɵtemplate(1, Paginator_div_0_div_15_ng_container_1_Template, 1, 0, "ng-container", 17);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵattribute("data-pc-section", "end");
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.templateRight)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c6, ctx_r1.paginatorState));
} }
function Paginator_div_0_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 1);
i0.ɵɵtemplate(1, Paginator_div_0_div_1_Template, 2, 5, "div", 2)(2, Paginator_div_0_span_2_Template, 2, 1, "span", 3)(3, Paginator_div_0_button_3_Template, 3, 7, "button", 4);
i0.ɵɵelementStart(4, "button", 5);
i0.ɵɵlistener("click", function Paginator_div_0_Template_button_click_4_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changePageToPrev($event)); });
i0.ɵɵtemplate(5, Paginator_div_0_AngleLeftIcon_5_Template, 1, 1, "AngleLeftIcon", 6)(6, Paginator_div_0_span_6_Template, 2, 1, "span", 7);
i0.ɵɵelementEnd();
i0.ɵɵtemplate(7, Paginator_div_0_span_7_Template, 2, 1, "span", 8)(8, Paginator_div_0_p_select_8_Template, 4, 8, "p-select", 9);
i0.ɵɵelementStart(9, "button", 10);
i0.ɵɵlistener("click", function Paginator_div_0_Template_button_click_9_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changePageToNext($event)); });
i0.ɵɵtemplate(10, Paginator_div_0_AngleRightIcon_10_Template, 1, 1, "AngleRightIcon", 6)(11, Paginator_div_0_span_11_Template, 2, 1, "span", 11);
i0.ɵɵelementEnd();
i0.ɵɵtemplate(12, Paginator_div_0_button_12_Template, 3, 7, "button", 12)(13, Paginator_div_0_p_inputnumber_13_Template, 1, 2, "p-inputnumber", 13)(14, Paginator_div_0_p_select_14_Template, 3, 8, "p-select", 14)(15, Paginator_div_0_div_15_Template, 2, 5, "div", 15);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵclassMap(ctx_r1.styleClass);
i0.ɵɵproperty("ngStyle", ctx_r1.style)("ngClass", "p-paginator p-component");
i0.ɵɵattribute("data-pc-section", "paginator")("data-pc-section", "root");
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.templateLeft);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.showCurrentPageReport);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.showFirstLastIcon);
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx_r1.isFirstPage() || ctx_r1.empty())("ngClass", i0.ɵɵpureFunction1(25, _c5, ctx_r1.isFirstPage() || ctx_r1.empty()));
i0.ɵɵattribute("aria-label", ctx_r1.getAriaLabel("prevPageLabel"));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.previousPageLinkIconTemplate && !ctx_r1._previousPageLinkIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.previousPageLinkIconTemplate || ctx_r1._previousPageLinkIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.showPageLinks);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.showJumpToPageDropdown);
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx_r1.isLastPage() || ctx_r1.empty())("ngClass", i0.ɵɵpureFunction1(27, _c5, ctx_r1.isLastPage() || ctx_r1.empty()));
i0.ɵɵattribute("aria-label", ctx_r1.getAriaLabel("nextPageLabel"));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.nextPageLinkIconTemplate && !ctx_r1._nextPageLinkIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.nextPageLinkIconTemplate || ctx_r1._nextPageLinkIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.showFirstLastIcon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.showJumpToPageInput);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.rowsPerPageOptions);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.templateRight);
} }
/**
* Paginator is a generic component to display content in paged format.
* @group Components
*/
class Paginator extends BaseComponent {
/**
* Number of page links to display.
* @group Props
*/
pageLinkSize = 5;
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
/**
* Whether to show it even there is only one page.
* @group Props
*/
alwaysShow = true;
/**
* Target element to attach the dropdown 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).
* @group Props
*/
dropdownAppendTo;
/**
* Template instance to inject into the left side of the paginator.
* @param {PaginatorState} context - Paginator state.
* @group Props
*/
templateLeft;
/**
* Template instance to inject into the right side of the paginator.
* @param {PaginatorState} context - Paginator state.
* @group Props
*/
templateRight;
/**
* Target element to attach the dropdown 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).
* @group Props
*/
appendTo;
/**
* Dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
* @group Props
*/
dropdownScrollHeight = '200px';
/**
* Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
* @group Props
*/
currentPageReportTemplate = '{currentPage} of {totalPages}';
/**
* Whether to display current page report.
* @group Props
*/
showCurrentPageReport;
/**
* When enabled, icons are displayed on paginator to go first and last page.
* @group Props
*/
showFirstLastIcon = true;
/**
* Number of total records.
* @group Props
*/
totalRecords = 0;
/**
* Data count to display per page.
* @group Props
*/
rows = 0;
/**
* 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;
/**
* Whether to display a dropdown to navigate to any page.
* @group Props
*/
showJumpToPageDropdown;
/**
* Whether to display a input to navigate to any page.
* @group Props
*/
showJumpToPageInput;
/**
* Template instance to inject into the jump to page dropdown item inside in the paginator.
* @param {Object} context - item instance.
* @group Props
*/
jumpToPageItemTemplate;
/**
* Whether to show page links.
* @group Props
*/
showPageLinks = true;
/**
* Locale to be used in formatting.
* @group Props
*/
locale;
/**
* Template instance to inject into the rows per page dropdown item inside in the paginator.
* @param {Object} context - item instance.
* @group Props
*/
dropdownItemTemplate;
/**
* Zero-relative number of the first row to be displayed.
* @group Props
*/
get first() {
return this._first;
}
set first(val) {
this._first = val;
}
/**
* Callback to invoke when page changes, the event object contains information about the new state.
* @param {PaginatorState} event - Paginator state.
* @group Emits
*/
onPageChange = new EventEmitter();
/**
* Template for the dropdown icon.
* @group Templates
*/
dropdownIconTemplate;
/**
* Template for the first page link icon.
* @group Templates
*/
firstPageLinkIconTemplate;
/**
* Template for the previous page link icon.
* @group Templates
*/
previousPageLinkIconTemplate;
/**
* Template for the last page link icon.
* @group Templates
*/
lastPageLinkIconTemplate;
/**
* Template for the next page link icon.
* @group Templates
*/
nextPageLinkIconTemplate;
templates;
_dropdownIconTemplate;
_firstPageLinkIconTemplate;
_previousPageLinkIconTemplate;
_lastPageLinkIconTemplate;
_nextPageLinkIconTemplate;
pageLinks;
pageItems;
rowsPerPageItems;
paginatorState;
_first = 0;
_page = 0;
_componentStyle = inject(PaginatorStyle);
constructor() {
super();
}
ngOnInit() {
super.ngOnInit();
this.updatePaginatorState();
}
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'dropdownicon':
this._dropdownIconTemplate = item.template;
break;
case 'firstpagelinkicon':
this._firstPageLinkIconTemplate = item.template;
break;
case 'previouspagelinkicon':
this._previousPageLinkIconTemplate = item.template;
break;
case 'lastpagelinkicon':
this._lastPageLinkIconTemplate = item.template;
break;
case 'nextpagelinkicon':
this._nextPageLinkIconTemplate = item.template;
break;
}
});
}
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);
}
}
ngOnChanges(simpleChange) {
super.ngOnChanges(simpleChange);
if (simpleChange.totalRecords) {
this.updatePageLinks();
this.updatePaginatorState();
this.updateFirst();
this.updateRowsPerPageOptions();
}
if (simpleChange.first) {
this._first = simpleChange.first.currentValue;
this.updatePageLinks();
this.updatePaginatorState();
}
if (simpleChange.rows) {
this.updatePageLinks();
this.updatePaginatorState();
}
if (simpleChange.rowsPerPageOptions) {
this.updateRowsPerPageOptions();
}
if (simpleChange.pageLinkSize) {
this.updatePageLinks();
}
}
updateRowsPerPageOptions() {
if (this.rowsPerPageOptions) {
this.rowsPerPageItems = [];
let showAllItem = null;
for (let opt of this.rowsPerPageOptions) {
if (typeof opt == 'object' && opt['showAll']) {
showAllItem = { label: opt['showAll'], value: this.totalRecords };
}
else {
this.rowsPerPageItems.push({ label: String(this.getLocalization(opt)), value: opt });
}
}
if (showAllItem) {
this.rowsPerPageItems.push(showAllItem);
}
}
}
isFirstPage() {
return this.getPage() === 0;
}
isLastPage() {
return this.getPage() === this.getPageCount() - 1;
}
getPageCount() {
return Math.ceil(this.totalRecords / this.rows);
}
calculatePageLinkBoundaries() {
let numberOfPages = this.getPageCount(), visiblePages = Math.min(this.pageLinkSize, numberOfPages);
//calculate range, keep current in middle if necessary
let start = Math.max(0, Math.ceil(this.getPage() - visiblePages / 2)), end = Math.min(numberOfPages - 1, start + visiblePages - 1);
//check when approaching to last page
var delta = this.pageLinkSize - (end - start + 1);
start = Math.max(0, start - delta);
return [start, end];
}
updatePageLinks() {
this.pageLinks = [];
let boundaries = this.calculatePageLinkBoundaries(), start = boundaries[0], end = boundaries[1];
for (let i = start; i <= end; i++) {
this.pageLinks.push(i + 1);
}
if (this.showJumpToPageDropdown) {
this.pageItems = [];
for (let i = 0; i < this.getPageCount(); i++) {
this.pageItems.push({ label: String(i + 1), value: i });
}
}
}
changePage(p) {
var pc = this.getPageCount();
if (p >= 0 && p < pc) {
this._first = this.rows * p;
var state = {
page: p,
first: this.first,
rows: this.rows,
pageCount: pc
};
this.updatePageLinks();
this.onPageChange.emit(state);
this.updatePaginatorState();
}
}
updateFirst() {
const page = this.getPage();
if (page > 0 && this.totalRecords && this.first >= this.totalRecords) {
Promise.resolve(null).then(() => this.changePage(page - 1));
}
}
getPage() {
return Math.floor(this.first / this.rows);
}
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);
}
updatePaginatorState() {
this.paginatorState = {
page: this.getPage(),
pageCount: this.getPageCount(),
rows: this.rows,
first: this.first,
totalRecords: this.totalRecords
};
}
empty() {
return this.getPageCount() === 0;
}
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));
}
static ɵfac = function Paginator_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || Paginator)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Paginator, selectors: [["p-paginator"]], contentQueries: function Paginator_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, _c0, 4);
i0.ɵɵcontentQuery(dirIndex, _c1, 4);
i0.ɵɵcontentQuery(dirIndex, _c2, 4);
i0.ɵɵcontentQuery(dirIndex, _c3, 4);
i0.ɵɵcontentQuery(dirIndex, _c4, 4);
i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownIconTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.firstPageLinkIconTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.previousPageLinkIconTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.lastPageLinkIconTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nextPageLinkIconTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
} }, inputs: { pageLinkSize: [2, "pageLinkSize", "pageLinkSize", numberAttribute], style: "style", styleClass: "styleClass", alwaysShow: [2, "alwaysShow", "alwaysShow", booleanAttribute], dropdownAppendTo: "dropdownAppendTo", templateLeft: "templateLeft", templateRight: "templateRight", appendTo: "appendTo", dropdownScrollHeight: "dropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: [2, "showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showFirstLastIcon: [2, "showFirstLastIcon", "showFirstLastIcon", booleanAttribute], totalRecords: [2, "totalRecords", "totalRecords", numberAttribute], rows: [2, "rows", "rows", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", showJumpToPageDropdown: [2, "showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showJumpToPageInput: [2, "showJumpToPageInput", "showJumpToPageInput", booleanAttribute], jumpToPageItemTemplate: "jumpToPageItemTemplate", showPageLinks: [2, "showPageLinks", "showPageLinks", booleanAttribute], locale: "locale", dropdownItemTemplate: "dropdownItemTemplate", first: "first" }, outputs: { onPageChange: "onPageChange" }, features: [i0.ɵɵProvidersFeature([PaginatorStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[3, "class", "ngStyle", "ngClass", 4, "ngIf"], [3, "ngStyle", "ngClass"], ["class", "p-paginator-content-start", 4, "ngIf"], ["class", "p-paginator-current", 4, "ngIf"], ["type", "button", "pRipple", "", "class", "p-paginator-first", 3, "disabled", "ngClass", "click", 4, "ngIf"], ["type", "button", "pRipple", "", 1, "p-paginator-prev", 3, "click", "disabled", "ngClass"], [3, "styleClass", 4, "ngIf"], ["class", "p-paginator-prev-icon", 4, "ngIf"], ["class", "p-paginator-pages", 4, "ngIf"], ["styleClass", "p-paginator-jtp-dropdown", 3, "options", "ngModel", "disabled", "appendTo", "scrollHeight", "onChange", 4, "ngIf"], ["type", "button", "pRipple", "", 1, "p-paginator-next", 3, "click", "disabled", "ngClass"], ["class", "p-paginator-next-icon", 4, "ngIf"], ["type", "button", "pRipple", "", "class", "p-paginator-last", 3, "disabled", "ngClass", "click", 4, "ngIf"], ["class", "p-paginator-jtp-input", 3, "ngModel", "disabled", "ngModelChange", 4, "ngIf"], ["styleClass", "p-paginator-rpp-dropdown", 3, "options", "ngModel", "disabled", "appendTo", "scrollHeight", "ariaLabel", "ngModelChange", "onChange", 4, "ngIf"], ["class", "p-paginator-content-end", 4, "ngIf"], [1, "p-paginator-content-start"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-paginator-current"], ["type", "button", "pRipple", "", 1, "p-paginator-first", 3, "click", "disabled", "ngClass"], ["class", "p-paginator-first-icon", 4, "ngIf"], [3, "styleClass"], [1, "p-paginator-first-icon"], [4, "ngTemplateOutlet"], [1, "p-paginator-prev-icon"], [1, "p-paginator-pages"], ["type", "button", "class", "p-paginator-page", "pRipple", "", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], ["type", "button", "pRipple", "", 1, "p-paginator-page", 3, "click", "ngClass"], ["styleClass", "p-paginator-jtp-dropdown", 3, "onChange", "options", "ngModel", "disabled", "appendTo", "scrollHeight"], ["pTemplate", "selectedItem"], [4, "ngIf"], ["pTemplate", "item"], ["pTemplate", "dropdownicon"], [1, "p-paginator-next-icon"], ["type", "button", "pRipple", "", 1, "p-paginator-last", 3, "click", "disabled", "ngClass"], ["class", "p-paginator-last-icon", 4, "ngIf"], [1, "p-paginator-last-icon"], [1, "p-paginator-jtp-input", 3, "ngModelChange", "ngModel", "disabled"], ["styleClass", "p-paginator-rpp-dropdown", 3, "ngModelChange", "onChange", "options", "ngModel", "disabled", "appendTo", "scrollHeight", "ariaLabel"], [1, "p-paginator-content-end"]], template: function Paginator_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Paginator_div_0_Template, 16, 29, "div", 0);
} if (rf & 2) {
i0.ɵɵproperty("ngIf", ctx.alwaysShow ? true : ctx.pageLinks && ctx.pageLinks.length > 1);
} }, dependencies: [CommonModule, i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, Select, InputNumber, FormsModule, i2.NgControlStatus, i2.NgModel, Ripple, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleLeftIcon, AngleRightIcon, SharedModule, i3.PrimeTemplate], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Paginator, [{
type: Component,
args: [{
selector: 'p-paginator',
standalone: true,
imports: [CommonModule, Select, InputNumber, FormsModule, Ripple, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleLeftIcon, AngleRightIcon, SharedModule],
template: `
<div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-paginator p-component'" *ngIf="alwaysShow ? true : pageLinks && pageLinks.length > 1" [attr.data-pc-section]="'paginator'" [attr.data-pc-section]="'root'">
<div class="p-paginator-content-start" *ngIf="templateLeft" [attr.data-pc-section]="'start'">
<ng-container *ngTemplateOutlet="templateLeft; context: { $implicit: paginatorState }"></ng-container>
</div>
<span class="p-paginator-current" *ngIf="showCurrentPageReport">{{ currentPageReport }}</span>
<button
*ngIf="showFirstLastIcon"
type="button"
[disabled]="isFirstPage() || empty()"
(click)="changePageToFirst($event)"
pRipple
class="p-paginator-first"
[ngClass]="{ 'p-disabled': isFirstPage() || empty() }"
[attr.aria-label]="getAriaLabel('firstPageLabel')"
>
<AngleDoubleLeftIcon *ngIf="!firstPageLinkIconTemplate && !_firstPageLinkIconTemplate" [styleClass]="'p-paginator-first-icon'" />
<span class="p-paginator-first-icon" *ngIf="firstPageLinkIconTemplate || _firstPageLinkIconTemplate">
<ng-template *ngTemplateOutlet="firstPageLinkIconTemplate || _firstPageLinkIconTemplate"></ng-template>
</span>
</button>
<button type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToPrev($event)" pRipple class="p-paginator-prev" [ngClass]="{ 'p-disabled': isFirstPage() || empty() }" [attr.aria-label]="getAriaLabel('prevPageLabel')">
<AngleLeftIcon *ngIf="!previousPageLinkIconTemplate && !_previousPageLinkIconTemplate" [styleClass]="'p-paginator-prev-icon'" />
<span class="p-paginator-prev-icon" *ngIf="previousPageLinkIconTemplate || _previousPageLinkIconTemplate">
<ng-template *ngTemplateOutlet="previousPageLinkIconTemplate || _previousPageLinkIconTemplate"></ng-template>
</span>
</button>
<span class="p-paginator-pages" *ngIf="showPageLinks">
<button
type="button"
*ngFor="let pageLink of pageLinks"
class="p-paginator-page"
[ngClass]="{ 'p-paginator-page-selected': pageLink - 1 == getPage() }"
[attr.aria-label]="getPageAriaLabel(pageLink)"
[attr.aria-current]="pageLink - 1 == getPage() ? 'page' : undefined"
(click)="onPageLinkClick($event, pageLink - 1)"
pRipple
>
{{ getLocalization(pageLink) }}
</button>
</span>
<p-select
[options]="pageItems"
[ngModel]="getPage()"
*ngIf="showJumpToPageDropdown"
[disabled]="empty()"
[attr.aria-label]="getAriaLabel('jumpToPageDropdownLabel')"
styleClass="p-paginator-jtp-dropdown"
(onChange)="onPageDropdownChange($event)"
[appendTo]="dropdownAppendTo"
[scrollHeight]="dropdownScrollHeight"
>
<ng-template pTemplate="selectedItem">{{ currentPageReport }}</ng-template>
<ng-container *ngIf="jumpToPageItemTemplate">
<ng-template let-item pTemplate="item">
<ng-container *ngTemplateOutlet="jumpToPageItemTemplate; context: { $implicit: item }"></ng-container>
</ng-template>
</ng-container>
<ng-template pTemplate="dropdownicon" *ngIf="dropdownIconTemplate || _dropdownIconTemplate">
<ng-container *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-container>
</ng-template>
</p-select>
<button type="button" [disabled]="isLastPage() || empty()" (click)="changePageToNext($event)" pRipple class="p-paginator-next" [ngClass]="{ 'p-disabled': isLastPage() || empty() }" [attr.aria-label]="getAriaLabel('nextPageLabel')">
<AngleRightIcon *ngIf="!nextPageLinkIconTemplate && !_nextPageLinkIconTemplate" [styleClass]="'p-paginator-next-icon'" />
<span class="p-paginator-next-icon" *ngIf="nextPageLinkIconTemplate || _nextPageLinkIconTemplate">
<ng-template *ngTemplateOutlet="nextPageLinkIconTemplate || _nextPageLinkIconTemplate"></ng-template>
</span>
</button>
<button
*ngIf="showFirstLastIcon"
type="button"
[disabled]="isLastPage() || empty()"
(click)="changePageToLast($event)"
pRipple
class="p-paginator-last"
[ngClass]="{ 'p-disabled': isLastPage() || empty() }"
[attr.aria-label]="getAriaLabel('lastPageLabel')"
>
<AngleDoubleRightIcon *ngIf="!lastPageLinkIconTemplate && !_lastPageLinkIconTemplate" [styleClass]="'p-paginator-last-icon'" />
<span class="p-paginator-last-icon" *ngIf="lastPageLinkIconTemplate || _lastPageLinkIconTemplate">
<ng-template *ngTemplateOutlet="lastPageLinkIconTemplate || _lastPageLinkIconTemplate"></ng-template>
</span>
</button>
<p-inputnumber *ngIf="showJumpToPageInput" [ngModel]="currentPage()" class="p-paginator-jtp-input" [disabled]="empty()" (ngModelChange)="ch