primeng 19.1.3 → 20.0.0-beta.1

package/fesm2022/primeng-paginator.mjs

@@ -1,160 +1,57 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, booleanAttribute, numberAttribute, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, input, EventEmitter, inject, computed, booleanAttribute, numberAttribute, HostBinding, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3 from 'primeng/api';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
+import { Select } from 'primeng/select';
 import { AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleLeftIcon, AngleRightIcon } from 'primeng/icons';
 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 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()
-        }
-    ],
+    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.$attrs.disabled
+            'p-disabled': instance.isFirstPage() || instance.empty()
         }
     ],
     firstIcon: 'p-paginator-first-icon',
     prev: ({ instance }) => [
         'p-paginator-prev',
         {
-            'p-disabled': instance.$attrs.disabled
+            'p-disabled': instance.isFirstPage() || instance.empty()
         }
     ],
     prevIcon: 'p-paginator-prev-icon',
     next: ({ instance }) => [
         'p-paginator-next',
         {
-            'p-disabled': instance.$attrs.disabled
+            'p-disabled': instance.isLastPage() || instance.empty()
         }
     ],
     nextIcon: 'p-paginator-next-icon',
     last: ({ instance }) => [
         'p-paginator-last',
         {
-            'p-disabled': instance.$attrs.disabled
+            'p-disabled': instance.isLastPage() || instance.empty()
         }
     ],
     lastIcon: 'p-paginator-last-icon',
     pages: 'p-paginator-pages',
-    page: ({ props, pageLink }) => [
+    page: ({ instance, pageLink }) => [
         'p-paginator-page',
         {
-            'p-paginator-page-selected': pageLink - 1 === props.page
+            'p-paginator-page-selected': pageLink - 1 == instance.getPage()
         }
     ],
     current: 'p-paginator-current',
@@ -164,12 +61,12 @@ const classes = {
 };
 class PaginatorStyle extends BaseStyle {
     name = 'paginator';
-    theme = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PaginatorStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PaginatorStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginatorStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginatorStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PaginatorStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginatorStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -263,13 +160,9 @@ class Paginator extends BaseComponent {
      * @group Props
      */
     pageLinkSize = 5;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -280,6 +173,7 @@ class Paginator extends BaseComponent {
     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).
+     * @deprecated since v20.0.0. Use `appendTo` instead.
      * @group Props
      */
     dropdownAppendTo;
@@ -295,11 +189,6 @@ class Paginator extends BaseComponent {
      * @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
@@ -377,6 +266,12 @@ class Paginator extends BaseComponent {
     set first(val) {
         this._first = val;
     }
+    /**
+     * 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);
     /**
      * Callback to invoke when page changes, the event object contains information about the new state.
      * @param {PaginatorState} event - Paginator state.
@@ -421,6 +316,10 @@ class Paginator extends BaseComponent {
     _first = 0;
     _page = 0;
     _componentStyle = inject(PaginatorStyle);
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
+    get display() {
+        return this.alwaysShow || (this.pageLinks && this.pageLinks.length > 1) ? null : 'none';
+    }
     constructor() {
         super();
     }
@@ -616,241 +515,202 @@ class Paginator extends BaseComponent {
             .replace('{rows}', String(this.rows))
             .replace('{totalRecords}', String(this.totalRecords));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Paginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: Paginator, isStandalone: true, selector: "p-paginator", inputs: { pageLinkSize: ["pageLinkSize", "pageLinkSize", numberAttribute], style: "style", styleClass: "styleClass", alwaysShow: ["alwaysShow", "alwaysShow", booleanAttribute], dropdownAppendTo: "dropdownAppendTo", templateLeft: "templateLeft", templateRight: "templateRight", appendTo: "appendTo", dropdownScrollHeight: "dropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], totalRecords: ["totalRecords", "totalRecords", numberAttribute], rows: ["rows", "rows", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showJumpToPageInput: ["showJumpToPageInput", "showJumpToPageInput", booleanAttribute], jumpToPageItemTemplate: "jumpToPageItemTemplate", showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], locale: "locale", dropdownItemTemplate: "dropdownItemTemplate", first: "first" }, outputs: { onPageChange: "onPageChange" }, providers: [PaginatorStyle], queries: [{ propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "firstPageLinkIconTemplate", first: true, predicate: ["firstpagelinkicon"] }, { propertyName: "previousPageLinkIconTemplate", first: true, predicate: ["previouspagelinkicon"] }, { propertyName: "lastPageLinkIconTemplate", first: true, predicate: ["lastpagelinkicon"] }, { propertyName: "nextPageLinkIconTemplate", first: true, predicate: ["nextpagelinkicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Paginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: Paginator, isStandalone: true, selector: "p-paginator", inputs: { pageLinkSize: { classPropertyName: "pageLinkSize", publicName: "pageLinkSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dropdownAppendTo: { classPropertyName: "dropdownAppendTo", publicName: "dropdownAppendTo", isSignal: false, isRequired: false, transformFunction: null }, templateLeft: { classPropertyName: "templateLeft", publicName: "templateLeft", isSignal: false, isRequired: false, transformFunction: null }, templateRight: { classPropertyName: "templateRight", publicName: "templateRight", isSignal: false, isRequired: false, transformFunction: null }, dropdownScrollHeight: { classPropertyName: "dropdownScrollHeight", publicName: "dropdownScrollHeight", isSignal: false, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: false, isRequired: false, transformFunction: null }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showFirstLastIcon: { classPropertyName: "showFirstLastIcon", publicName: "showFirstLastIcon", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: false, isRequired: false, transformFunction: numberAttribute }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: numberAttribute }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: false, isRequired: false, transformFunction: null }, showJumpToPageDropdown: { classPropertyName: "showJumpToPageDropdown", publicName: "showJumpToPageDropdown", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showJumpToPageInput: { classPropertyName: "showJumpToPageInput", publicName: "showJumpToPageInput", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, jumpToPageItemTemplate: { classPropertyName: "jumpToPageItemTemplate", publicName: "jumpToPageItemTemplate", isSignal: false, isRequired: false, transformFunction: null }, showPageLinks: { classPropertyName: "showPageLinks", publicName: "showPageLinks", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: false, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPageChange: "onPageChange" }, host: { properties: { "attr.data-pc-name": "'paginator'", "attr.data-pc-section": "'root'", "class": "cn(cx('paginator'), styleClass)", "style.display": "this.display" } }, providers: [PaginatorStyle], queries: [{ propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "firstPageLinkIconTemplate", first: true, predicate: ["firstpagelinkicon"] }, { propertyName: "previousPageLinkIconTemplate", first: true, predicate: ["previouspagelinkicon"] }, { propertyName: "lastPageLinkIconTemplate", first: true, predicate: ["lastpagelinkicon"] }, { propertyName: "nextPageLinkIconTemplate", first: true, predicate: ["nextpagelinkicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <div [class]="cx('contentStart')" *ngIf="templateLeft" [attr.data-pc-section]="'start'">
+            <ng-container *ngTemplateOutlet="templateLeft; context: { $implicit: paginatorState }"></ng-container>
+        </div>
+        <span [class]="cx('current')" *ngIf="showCurrentPageReport">{{ currentPageReport }}</span>
+        <button *ngIf="showFirstLastIcon" type="button" (click)="changePageToFirst($event)" pRipple [class]="cx('first')" [attr.aria-label]="getAriaLabel('firstPageLabel')">
+            <AngleDoubleLeftIcon *ngIf="!firstPageLinkIconTemplate && !_firstPageLinkIconTemplate" [styleClass]="cx('firstIcon')" />
+            <span [class]="cx('firstIcon')" *ngIf="firstPageLinkIconTemplate || _firstPageLinkIconTemplate">
+                <ng-template *ngTemplateOutlet="firstPageLinkIconTemplate || _firstPageLinkIconTemplate"></ng-template>
             </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>
+        <button type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToPrev($event)" pRipple [class]="cx('prev')" [attr.aria-label]="getAriaLabel('prevPageLabel')">
+            <AngleLeftIcon *ngIf="!previousPageLinkIconTemplate && !_previousPageLinkIconTemplate" [styleClass]="cx('prevIcon')" />
+            <span [class]="cx('prevIcon')" *ngIf="previousPageLinkIconTemplate || _previousPageLinkIconTemplate">
+                <ng-template *ngTemplateOutlet="previousPageLinkIconTemplate || _previousPageLinkIconTemplate"></ng-template>
+            </span>
+        </button>
+        <span [class]="cx('pages')" *ngIf="showPageLinks">
             <button
-                *ngIf="showFirstLastIcon"
                 type="button"
-                [disabled]="isLastPage() || empty()"
-                (click)="changePageToLast($event)"
+                *ngFor="let pageLink of pageLinks"
+                [class]="cx('page', { pageLink })"
+                [attr.aria-label]="getPageAriaLabel(pageLink)"
+                [attr.aria-current]="pageLink - 1 == getPage() ? 'page' : undefined"
+                (click)="onPageLinkClick($event, pageLink - 1)"
                 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>
+                {{ getLocalization(pageLink) }}
             </button>
-            <p-inputnumber *ngIf="showJumpToPageInput" [ngModel]="currentPage()" class="p-paginator-jtp-input" [disabled]="empty()" (ngModelChange)="changePage($event - 1)"></p-inputnumber>
-            <p-select
-                [options]="rowsPerPageItems"
-                [(ngModel)]="rows"
-                *ngIf="rowsPerPageOptions"
-                styleClass="p-paginator-rpp-dropdown"
-                [disabled]="empty()"
-                (onChange)="onRppChange($event)"
-                [appendTo]="dropdownAppendTo"
-                [scrollHeight]="dropdownScrollHeight"
-                [ariaLabel]="getAriaLabel('rowsPerPageLabel')"
-            >
-                <ng-container *ngIf="dropdownItemTemplate">
-                    <ng-template let-item pTemplate="item">
-                        <ng-container *ngTemplateOutlet="dropdownItemTemplate; context: { $implicit: item }"></ng-container>
-                    </ng-template>
-                </ng-container>
-                <ng-template pTemplate="dropdownicon" *ngIf="dropdownIconTemplate || _dropdownIconTemplate">
-                    <ng-container *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-container>
+        </span>
+        <p-select
+            [options]="pageItems"
+            [ngModel]="getPage()"
+            *ngIf="showJumpToPageDropdown"
+            [disabled]="empty()"
+            [attr.aria-label]="getAriaLabel('jumpToPageDropdownLabel')"
+            [styleClass]="cx('pcJumpToPageDropdown')"
+            (onChange)="onPageDropdownChange($event)"
+            [appendTo]="dropdownAppendTo || $appendTo()"
+            [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]="cx('next')" [attr.aria-label]="getAriaLabel('nextPageLabel')">
+            <AngleRightIcon *ngIf="!nextPageLinkIconTemplate && !_nextPageLinkIconTemplate" [styleClass]="cx('nextIcon')" />
+            <span [class]="cx('nextIcon')" *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]="cx('last')" [attr.aria-label]="getAriaLabel('lastPageLabel')">
+            <AngleDoubleRightIcon *ngIf="!lastPageLinkIconTemplate && !_lastPageLinkIconTemplate" [styleClass]="cx('lastIcon')" />
+            <span [class]="cx('lastIcon')" *ngIf="lastPageLinkIconTemplate || _lastPageLinkIconTemplate">
+                <ng-template *ngTemplateOutlet="lastPageLinkIconTemplate || _lastPageLinkIconTemplate"></ng-template>
+            </span>
+        </button>
+        <p-inputnumber *ngIf="showJumpToPageInput" [ngModel]="currentPage()" [class]="cx('pcJumpToPageInput')" [disabled]="empty()" (ngModelChange)="changePage($event - 1)"></p-inputnumber>
+        <p-select
+            [options]="rowsPerPageItems"
+            [(ngModel)]="rows"
+            *ngIf="rowsPerPageOptions"
+            [styleClass]="cx('pcRowPerPageDropdown')"
+            [disabled]="empty()"
+            (onChange)="onRppChange($event)"
+            [appendTo]="dropdownAppendTo || $appendTo()"
+            [scrollHeight]="dropdownScrollHeight"
+            [ariaLabel]="getAriaLabel('rowsPerPageLabel')"
+        >
+            <ng-container *ngIf="dropdownItemTemplate">
+                <ng-template let-item pTemplate="item">
+                    <ng-container *ngTemplateOutlet="dropdownItemTemplate; context: { $implicit: item }"></ng-container>
                 </ng-template>
-            </p-select>
-            <div class="p-paginator-content-end" *ngIf="templateRight" [attr.data-pc-section]="'end'">
-                <ng-container *ngTemplateOutlet="templateRight; context: { $implicit: paginatorState }"></ng-container>
-            </div>
+            </ng-container>
+            <ng-template pTemplate="dropdownicon" *ngIf="dropdownIconTemplate || _dropdownIconTemplate">
+                <ng-container *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-container>
+            </ng-template>
+        </p-select>
+        <div [class]="cx('contentEnd')" *ngIf="templateRight" [attr.data-pc-section]="'end'">
+            <ng-container *ngTemplateOutlet="templateRight; context: { $implicit: paginatorState }"></ng-container>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], 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: AngleDoubleLeftIcon, selector: "AngleDoubleLeftIcon" }, { kind: "component", type: AngleDoubleRightIcon, selector: "AngleDoubleRightIcon" }, { kind: "component", type: AngleLeftIcon, selector: "AngleLeftIcon" }, { kind: "component", type: AngleRightIcon, selector: "AngleRightIcon" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "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", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "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: AngleDoubleLeftIcon, selector: "AngleDoubleLeftIcon" }, { kind: "component", type: AngleDoubleRightIcon, selector: "AngleDoubleRightIcon" }, { kind: "component", type: AngleLeftIcon, selector: "AngleLeftIcon" }, { kind: "component", type: AngleRightIcon, selector: "AngleRightIcon" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Paginator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Paginator, decorators: [{
             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>
+        <div [class]="cx('contentStart')" *ngIf="templateLeft" [attr.data-pc-section]="'start'">
+            <ng-container *ngTemplateOutlet="templateLeft; context: { $implicit: paginatorState }"></ng-container>
+        </div>
+        <span [class]="cx('current')" *ngIf="showCurrentPageReport">{{ currentPageReport }}</span>
+        <button *ngIf="showFirstLastIcon" type="button" (click)="changePageToFirst($event)" pRipple [class]="cx('first')" [attr.aria-label]="getAriaLabel('firstPageLabel')">
+            <AngleDoubleLeftIcon *ngIf="!firstPageLinkIconTemplate && !_firstPageLinkIconTemplate" [styleClass]="cx('firstIcon')" />
+            <span [class]="cx('firstIcon')" *ngIf="firstPageLinkIconTemplate || _firstPageLinkIconTemplate">
+                <ng-template *ngTemplateOutlet="firstPageLinkIconTemplate || _firstPageLinkIconTemplate"></ng-template>
             </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>
+        <button type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToPrev($event)" pRipple [class]="cx('prev')" [attr.aria-label]="getAriaLabel('prevPageLabel')">
+            <AngleLeftIcon *ngIf="!previousPageLinkIconTemplate && !_previousPageLinkIconTemplate" [styleClass]="cx('prevIcon')" />
+            <span [class]="cx('prevIcon')" *ngIf="previousPageLinkIconTemplate || _previousPageLinkIconTemplate">
+                <ng-template *ngTemplateOutlet="previousPageLinkIconTemplate || _previousPageLinkIconTemplate"></ng-template>
+            </span>
+        </button>
+        <span [class]="cx('pages')" *ngIf="showPageLinks">
             <button
-                *ngIf="showFirstLastIcon"
                 type="button"
-                [disabled]="isLastPage() || empty()"
-                (click)="changePageToLast($event)"
+                *ngFor="let pageLink of pageLinks"
+                [class]="cx('page', { pageLink })"
+                [attr.aria-label]="getPageAriaLabel(pageLink)"
+                [attr.aria-current]="pageLink - 1 == getPage() ? 'page' : undefined"
+                (click)="onPageLinkClick($event, pageLink - 1)"
                 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>
+                {{ getLocalization(pageLink) }}
             </button>
-            <p-inputnumber *ngIf="showJumpToPageInput" [ngModel]="currentPage()" class="p-paginator-jtp-input" [disabled]="empty()" (ngModelChange)="changePage($event - 1)"></p-inputnumber>
-            <p-select
-                [options]="rowsPerPageItems"
-                [(ngModel)]="rows"
-                *ngIf="rowsPerPageOptions"
-                styleClass="p-paginator-rpp-dropdown"
-                [disabled]="empty()"
-                (onChange)="onRppChange($event)"
-                [appendTo]="dropdownAppendTo"
-                [scrollHeight]="dropdownScrollHeight"
-                [ariaLabel]="getAriaLabel('rowsPerPageLabel')"
-            >
-                <ng-container *ngIf="dropdownItemTemplate">
-                    <ng-template let-item pTemplate="item">
-                        <ng-container *ngTemplateOutlet="dropdownItemTemplate; context: { $implicit: item }"></ng-container>
-                    </ng-template>
-                </ng-container>
-                <ng-template pTemplate="dropdownicon" *ngIf="dropdownIconTemplate || _dropdownIconTemplate">
-                    <ng-container *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-container>
+        </span>
+        <p-select
+            [options]="pageItems"
+            [ngModel]="getPage()"
+            *ngIf="showJumpToPageDropdown"
+            [disabled]="empty()"
+            [attr.aria-label]="getAriaLabel('jumpToPageDropdownLabel')"
+            [styleClass]="cx('pcJumpToPageDropdown')"
+            (onChange)="onPageDropdownChange($event)"
+            [appendTo]="dropdownAppendTo || $appendTo()"
+            [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]="cx('next')" [attr.aria-label]="getAriaLabel('nextPageLabel')">
+            <AngleRightIcon *ngIf="!nextPageLinkIconTemplate && !_nextPageLinkIconTemplate" [styleClass]="cx('nextIcon')" />
+            <span [class]="cx('nextIcon')" *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]="cx('last')" [attr.aria-label]="getAriaLabel('lastPageLabel')">
+            <AngleDoubleRightIcon *ngIf="!lastPageLinkIconTemplate && !_lastPageLinkIconTemplate" [styleClass]="cx('lastIcon')" />
+            <span [class]="cx('lastIcon')" *ngIf="lastPageLinkIconTemplate || _lastPageLinkIconTemplate">
+                <ng-template *ngTemplateOutlet="lastPageLinkIconTemplate || _lastPageLinkIconTemplate"></ng-template>
+            </span>
+        </button>
+        <p-inputnumber *ngIf="showJumpToPageInput" [ngModel]="currentPage()" [class]="cx('pcJumpToPageInput')" [disabled]="empty()" (ngModelChange)="changePage($event - 1)"></p-inputnumber>
+        <p-select
+            [options]="rowsPerPageItems"
+            [(ngModel)]="rows"
+            *ngIf="rowsPerPageOptions"
+            [styleClass]="cx('pcRowPerPageDropdown')"
+            [disabled]="empty()"
+            (onChange)="onRppChange($event)"
+            [appendTo]="dropdownAppendTo || $appendTo()"
+            [scrollHeight]="dropdownScrollHeight"
+            [ariaLabel]="getAriaLabel('rowsPerPageLabel')"
+        >
+            <ng-container *ngIf="dropdownItemTemplate">
+                <ng-template let-item pTemplate="item">
+                    <ng-container *ngTemplateOutlet="dropdownItemTemplate; context: { $implicit: item }"></ng-container>
                 </ng-template>
-            </p-select>
-            <div class="p-paginator-content-end" *ngIf="templateRight" [attr.data-pc-section]="'end'">
-                <ng-container *ngTemplateOutlet="templateRight; context: { $implicit: paginatorState }"></ng-container>
-            </div>
+            </ng-container>
+            <ng-template pTemplate="dropdownicon" *ngIf="dropdownIconTemplate || _dropdownIconTemplate">
+                <ng-container *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-container>
+            </ng-template>
+        </p-select>
+        <div [class]="cx('contentEnd')" *ngIf="templateRight" [attr.data-pc-section]="'end'">
+            <ng-container *ngTemplateOutlet="templateRight; context: { $implicit: paginatorState }"></ng-container>
         </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [PaginatorStyle]
+                    providers: [PaginatorStyle],
+                    host: {
+                        '[attr.data-pc-name]': "'paginator'",
+                        '[attr.data-pc-section]': "'root'",
+                        '[class]': "cn(cx('paginator'), styleClass)"
+                    }
                 }]
         }], ctorParameters: () => [], propDecorators: { pageLinkSize: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], alwaysShow: [{
@@ -862,8 +722,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], templateRight: [{
                 type: Input
-            }], appendTo: [{
-                type: Input
             }], dropdownScrollHeight: [{
                 type: Input
             }], currentPageReportTemplate: [{
@@ -919,13 +777,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
             }] } });
 class PaginatorModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: PaginatorModule, imports: [Paginator, SharedModule], exports: [Paginator, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PaginatorModule, imports: [Paginator, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: PaginatorModule, imports: [Paginator, SharedModule], exports: [Paginator, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginatorModule, imports: [Paginator, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Paginator, SharedModule],