primeng 20.2.0 → 20.3.0-rc.1

package/fesm2022/primeng-overlaybadge.mjs

@@ -1,13 +1,15 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, booleanAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, inject, booleanAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { SharedModule } from 'primeng/api';
-import * as i1 from 'primeng/badge';
+import * as i2 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i1 from 'primeng/bind';
+import { Bind } from 'primeng/bind';
 import { BaseStyle } from 'primeng/base';
 
-const theme = /*css*/ `
+const style = /*css*/ `
 .p-overlaybadge {
     position: relative;
 }
@@ -29,20 +31,23 @@ const classes = {
 };
 class OverlayBadgeStyle extends BaseStyle {
     name = 'overlaybadge';
-    theme = theme;
+    style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OverlayBadgeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OverlayBadgeStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayBadgeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayBadgeStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OverlayBadgeStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayBadgeStyle, decorators: [{
             type: Injectable
         }] });
 
+const OVERLAYBADGE_INSTANCE = new InjectionToken('OVERLAYBADGE_INSTANCE');
 /**
  * OverlayPanel is a container component positioned as connected to its target.
  * @group Components
  */
 class OverlayBadge extends BaseComponent {
+    $pcOverlayBadge = inject(OVERLAYBADGE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
     /**
      * Class of the element.
      * @group Props
@@ -86,33 +91,37 @@ class OverlayBadge extends BaseComponent {
         return this._size;
     }
     _size;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
+    }
     _componentStyle = inject(OverlayBadgeStyle);
     constructor() {
         super();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OverlayBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.2", type: OverlayBadge, isStandalone: true, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: { styleClass: "styleClass", style: "style", badgeSize: "badgeSize", severity: "severity", value: "value", badgeDisabled: ["badgeDisabled", "badgeDisabled", booleanAttribute], size: "size" }, providers: [OverlayBadgeStyle], usesInheritance: true, ngImport: i0, template: `
-        <div class="p-overlaybadge">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: OverlayBadge, isStandalone: true, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: { styleClass: "styleClass", style: "style", badgeSize: "badgeSize", severity: "severity", value: "value", badgeDisabled: ["badgeDisabled", "badgeDisabled", booleanAttribute], size: "size" }, providers: [OverlayBadgeStyle, { provide: OVERLAYBADGE_INSTANCE, useExisting: OverlayBadge }, { provide: PARENT_INSTANCE, useExisting: OverlayBadge }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <div [class]="cx('root')" [pBind]="ptm('root')">
             <ng-content></ng-content>
-            <p-badge [styleClass]="styleClass" [style]="style" [badgeSize]="badgeSize" [severity]="severity" [value]="value" [badgeDisabled]="badgeDisabled" />
+            <p-badge [pt]="ptm('pcBadge')" [styleClass]="styleClass" [style]="style" [badgeSize]="badgeSize" [severity]="severity" [value]="value" [badgeDisabled]="badgeDisabled" />
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i2.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OverlayBadge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayBadge, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-overlayBadge, p-overlay-badge, p-overlaybadge',
                     standalone: true,
-                    imports: [CommonModule, BadgeModule, SharedModule],
+                    imports: [CommonModule, BadgeModule, SharedModule, Bind],
                     template: `
-        <div class="p-overlaybadge">
+        <div [class]="cx('root')" [pBind]="ptm('root')">
             <ng-content></ng-content>
-            <p-badge [styleClass]="styleClass" [style]="style" [badgeSize]="badgeSize" [severity]="severity" [value]="value" [badgeDisabled]="badgeDisabled" />
+            <p-badge [pt]="ptm('pcBadge')" [styleClass]="styleClass" [style]="style" [badgeSize]="badgeSize" [severity]="severity" [value]="value" [badgeDisabled]="badgeDisabled" />
         </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [OverlayBadgeStyle]
+                    providers: [OverlayBadgeStyle, { provide: OVERLAYBADGE_INSTANCE, useExisting: OverlayBadge }, { provide: PARENT_INSTANCE, useExisting: OverlayBadge }],
+                    hostDirectives: [Bind]
                 }]
         }], ctorParameters: () => [], propDecorators: { styleClass: [{
                 type: Input
@@ -131,11 +140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 type: Input
             }] } });
 class OverlayBadgeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OverlayBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: OverlayBadgeModule, imports: [OverlayBadge, SharedModule], exports: [OverlayBadge, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OverlayBadgeModule, imports: [OverlayBadge, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: OverlayBadgeModule, imports: [OverlayBadge, SharedModule], exports: [OverlayBadge, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayBadgeModule, imports: [OverlayBadge, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: OverlayBadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: OverlayBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OverlayBadge, SharedModule],

package/fesm2022/primeng-overlaybadge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-overlaybadge.mjs","sources":["../../src/overlaybadge/style/overlaybadgestyle.ts","../../src/overlaybadge/overlaybadge.ts","../../src/overlaybadge/primeng-overlaybadge.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = /*css*/ `\n.p-overlaybadge {\n    position: relative;\n}\n\n.p-overlaybadge .p-badge {\n    position: absolute;\n    top: 0;\n    right: 0;\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n    margin: 0;\n    outline-width: dt('overlaybadge.outline.width');\n    outline-style: solid;\n    outline-color: dt('overlaybadge.outline.color');\n}\n`;\n\nconst classes = {\n    root: 'p-overlaybadge'\n};\n\n@Injectable()\nexport class OverlayBadgeStyle extends BaseStyle {\n    name = 'overlaybadge';\n\n    theme = theme;\n\n    classes = classes;\n}\n","import { CommonModule } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, inject, Input, NgModule, ViewEncapsulation } from '@angular/core';\nimport { SharedModule } from 'primeng/api';\nimport { BadgeModule } from 'primeng/badge';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { OverlayBadgeStyle } from './style/overlaybadgestyle';\n\n/**\n * OverlayPanel is a container component positioned as connected to its target.\n * @group Components\n */\n@Component({\n    selector: 'p-overlayBadge, p-overlay-badge, p-overlaybadge',\n    standalone: true,\n    imports: [CommonModule, BadgeModule, SharedModule],\n    template: `\n        <div class=\"p-overlaybadge\">\n            <ng-content></ng-content>\n            <p-badge [styleClass]=\"styleClass\" [style]=\"style\" [badgeSize]=\"badgeSize\" [severity]=\"severity\" [value]=\"value\" [badgeDisabled]=\"badgeDisabled\" />\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [OverlayBadgeStyle]\n})\nexport class OverlayBadge extends BaseComponent {\n    /**\n     * Class of the element.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Inline style of the element.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Size of the badge, valid options are \"large\" and \"xlarge\".\n     * @group Props\n     */\n    @Input() badgeSize: 'small' | 'large' | 'xlarge' | null | undefined;\n    /**\n     * Severity type of the badge.\n     * @group Props\n     */\n    @Input() severity: 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast' | null | undefined;\n    /**\n     * Value to display inside the badge.\n     * @group Props\n     */\n    @Input() value: string | number | null | undefined;\n    /**\n     * When specified, disables the component.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) badgeDisabled: boolean = false;\n    /**\n     * Size of the badge, valid options are \"large\" and \"xlarge\".\n     * @group Props\n     * @deprecated use badgeSize instead.\n     */\n    @Input() public set size(value: 'large' | 'xlarge' | 'small' | undefined | null) {\n        this._size = value;\n        !this.badgeSize && this.size && console.log('size property is deprecated and will removed in v18, use badgeSize instead.');\n    }\n    get size() {\n        return this._size;\n    }\n    _size: 'large' | 'xlarge' | 'small' | undefined | null;\n\n    _componentStyle = inject(OverlayBadgeStyle);\n\n    constructor() {\n        super();\n    }\n}\n\n@NgModule({\n    imports: [OverlayBadge, SharedModule],\n    exports: [OverlayBadge, SharedModule]\n})\nexport class OverlayBadgeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"primeng-overlaybadge.mjs","sources":["../../src/overlaybadge/style/overlaybadgestyle.ts","../../src/overlaybadge/overlaybadge.ts","../../src/overlaybadge/primeng-overlaybadge.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst style = /*css*/ `\n.p-overlaybadge {\n    position: relative;\n}\n\n.p-overlaybadge .p-badge {\n    position: absolute;\n    top: 0;\n    right: 0;\n    transform: translate(50%, -50%);\n    transform-origin: 100% 0;\n    margin: 0;\n    outline-width: dt('overlaybadge.outline.width');\n    outline-style: solid;\n    outline-color: dt('overlaybadge.outline.color');\n}\n`;\n\nconst classes = {\n    root: 'p-overlaybadge'\n};\n\n@Injectable()\nexport class OverlayBadgeStyle extends BaseStyle {\n    name = 'overlaybadge';\n\n    style = style;\n\n    classes = classes;\n}\n","import { CommonModule } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, inject, InjectionToken, Input, NgModule, ViewEncapsulation } from '@angular/core';\nimport { SharedModule } from 'primeng/api';\nimport { BadgeModule } from 'primeng/badge';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { OverlayBadgePassThrough } from 'primeng/types/overlaybadge';\nimport { OverlayBadgeStyle } from './style/overlaybadgestyle';\n\nconst OVERLAYBADGE_INSTANCE = new InjectionToken<OverlayBadge>('OVERLAYBADGE_INSTANCE');\n\n/**\n * OverlayPanel is a container component positioned as connected to its target.\n * @group Components\n */\n@Component({\n    selector: 'p-overlayBadge, p-overlay-badge, p-overlaybadge',\n    standalone: true,\n    imports: [CommonModule, BadgeModule, SharedModule, Bind],\n    template: `\n        <div [class]=\"cx('root')\" [pBind]=\"ptm('root')\">\n            <ng-content></ng-content>\n            <p-badge [pt]=\"ptm('pcBadge')\" [styleClass]=\"styleClass\" [style]=\"style\" [badgeSize]=\"badgeSize\" [severity]=\"severity\" [value]=\"value\" [badgeDisabled]=\"badgeDisabled\" />\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [OverlayBadgeStyle, { provide: OVERLAYBADGE_INSTANCE, useExisting: OverlayBadge }, { provide: PARENT_INSTANCE, useExisting: OverlayBadge }],\n    hostDirectives: [Bind]\n})\nexport class OverlayBadge extends BaseComponent<OverlayBadgePassThrough> {\n    $pcOverlayBadge: OverlayBadge | undefined = inject(OVERLAYBADGE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;\n\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    /**\n     * Class of the element.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Inline style of the element.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Size of the badge, valid options are \"large\" and \"xlarge\".\n     * @group Props\n     */\n    @Input() badgeSize: 'small' | 'large' | 'xlarge' | null | undefined;\n    /**\n     * Severity type of the badge.\n     * @group Props\n     */\n    @Input() severity: 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast' | null | undefined;\n    /**\n     * Value to display inside the badge.\n     * @group Props\n     */\n    @Input() value: string | number | null | undefined;\n    /**\n     * When specified, disables the component.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) badgeDisabled: boolean = false;\n    /**\n     * Size of the badge, valid options are \"large\" and \"xlarge\".\n     * @group Props\n     * @deprecated use badgeSize instead.\n     */\n    @Input() public set size(value: 'large' | 'xlarge' | 'small' | undefined | null) {\n        this._size = value;\n        !this.badgeSize && this.size && console.log('size property is deprecated and will removed in v18, use badgeSize instead.');\n    }\n    get size() {\n        return this._size;\n    }\n    _size: 'large' | 'xlarge' | 'small' | undefined | null;\n\n    onAfterViewChecked(): void {\n        this.bindDirectiveInstance.setAttrs(this.ptm('host'));\n    }\n\n    _componentStyle = inject(OverlayBadgeStyle);\n\n    constructor() {\n        super();\n    }\n}\n\n@NgModule({\n    imports: [OverlayBadge, SharedModule],\n    exports: [OverlayBadge, SharedModule]\n})\nexport class OverlayBadgeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/primeng-paginator.mjs

@@ -1,12 +1,15 @@
-import * as i1 from '@angular/common';
+export * from 'primeng/types/paginator';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 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 { Injectable, InjectionToken, inject, input, EventEmitter, computed, booleanAttribute, numberAttribute, HostBinding, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i3 from 'primeng/api';
+import * as i4 from 'primeng/api';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i1 from 'primeng/bind';
+import { Bind } from 'primeng/bind';
 import { Select } from 'primeng/select';
 import { AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleLeftIcon, AngleRightIcon } from 'primeng/icons';
 import { InputNumber } from 'primeng/inputnumber';
@@ -61,12 +64,12 @@ const classes = {
 };
 class PaginatorStyle extends BaseStyle {
     name = 'paginator';
-    theme = style;
+    style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PaginatorStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PaginatorStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaginatorStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaginatorStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PaginatorStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaginatorStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -150,11 +153,17 @@ var PaginatorClasses;
     PaginatorClasses["pcJumpToPageInput"] = "p-paginator-jtp-input";
 })(PaginatorClasses || (PaginatorClasses = {}));
 
+const PAGINATOR_INSTANCE = new InjectionToken('PAGINATOR_INSTANCE');
 /**
  * Paginator is a generic component to display content in paged format.
  * @group Components
  */
 class Paginator extends BaseComponent {
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcPaginator = inject(PAGINATOR_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
     /**
      * Number of page links to display.
      * @group Props
@@ -323,11 +332,10 @@ class Paginator extends BaseComponent {
     constructor() {
         super();
     }
-    ngOnInit() {
-        super.ngOnInit();
+    onInit() {
         this.updatePaginatorState();
     }
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this.templates.forEach((item) => {
             switch (item.getType()) {
                 case 'dropdownicon':
@@ -365,8 +373,7 @@ class Paginator extends BaseComponent {
             return index.get(digit);
         }
     }
-    ngOnChanges(simpleChange) {
-        super.ngOnChanges(simpleChange);
+    onChanges(simpleChange) {
         if (simpleChange.totalRecords) {
             this.updatePageLinks();
             this.updatePaginatorState();
@@ -515,26 +522,27 @@ class Paginator extends BaseComponent {
             .replace('{rows}', String(this.rows))
             .replace('{totalRecords}', String(this.totalRecords));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Paginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", 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'">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Paginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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: { "class": "cn(cx('paginator'), styleClass)", "style.display": "this.display" } }, providers: [PaginatorStyle, { provide: PAGINATOR_INSTANCE, useExisting: Paginator }, { provide: PARENT_INSTANCE, useExisting: Paginator }], 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, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <div [pBind]="ptm('contentStart')" [class]="cx('contentStart')" *ngIf="templateLeft">
             <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')">
-            <svg data-p-icon="angle-double-left" *ngIf="!firstPageLinkIconTemplate && !_firstPageLinkIconTemplate" [class]="cx('firstIcon')" />
+        <span [pBind]="ptm('current')" [class]="cx('current')" *ngIf="showCurrentPageReport">{{ currentPageReport }}</span>
+        <button [pBind]="ptm('first')" *ngIf="showFirstLastIcon" type="button" (click)="changePageToFirst($event)" pRipple [class]="cx('first')" [attr.aria-label]="getAriaLabel('firstPageLabel')">
+            <svg [pBind]="ptm('firstIcon')" data-p-icon="angle-double-left" *ngIf="!firstPageLinkIconTemplate && !_firstPageLinkIconTemplate" [class]="cx('firstIcon')" />
             <span [class]="cx('firstIcon')" *ngIf="firstPageLinkIconTemplate || _firstPageLinkIconTemplate">
                 <ng-template *ngTemplateOutlet="firstPageLinkIconTemplate || _firstPageLinkIconTemplate"></ng-template>
             </span>
         </button>
-        <button type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToPrev($event)" pRipple [class]="cx('prev')" [attr.aria-label]="getAriaLabel('prevPageLabel')">
-            <svg data-p-icon="angle-left" *ngIf="!previousPageLinkIconTemplate && !_previousPageLinkIconTemplate" [class]="cx('prevIcon')" />
+        <button [pBind]="ptm('prev')" type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToPrev($event)" pRipple [class]="cx('prev')" [attr.aria-label]="getAriaLabel('prevPageLabel')">
+            <svg [pBind]="ptm('prevIcon')" data-p-icon="angle-left" *ngIf="!previousPageLinkIconTemplate && !_previousPageLinkIconTemplate" [class]="cx('prevIcon')" />
             <span [class]="cx('prevIcon')" *ngIf="previousPageLinkIconTemplate || _previousPageLinkIconTemplate">
                 <ng-template *ngTemplateOutlet="previousPageLinkIconTemplate || _previousPageLinkIconTemplate"></ng-template>
             </span>
         </button>
-        <span [class]="cx('pages')" *ngIf="showPageLinks">
+        <span [pBind]="ptm('pages')" [class]="cx('pages')" *ngIf="showPageLinks">
             <button
+                [pBind]="ptm('page')"
                 type="button"
                 *ngFor="let pageLink of pageLinks"
                 [class]="cx('page', { pageLink })"
@@ -556,6 +564,7 @@ class Paginator extends BaseComponent {
             (onChange)="onPageDropdownChange($event)"
             [appendTo]="dropdownAppendTo || $appendTo()"
             [scrollHeight]="dropdownScrollHeight"
+            [pt]="ptm('pcJumpToPageDropdown')"
         >
             <ng-template pTemplate="selectedItem">{{ currentPageReport }}</ng-template>
             <ng-container *ngIf="jumpToPageItemTemplate">
@@ -567,19 +576,19 @@ class Paginator extends BaseComponent {
                 <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')">
-            <svg data-p-icon="angle-right" *ngIf="!nextPageLinkIconTemplate && !_nextPageLinkIconTemplate" [class]="cx('nextIcon')" />
+        <button [pBind]="ptm('next')" type="button" [disabled]="isLastPage() || empty()" (click)="changePageToNext($event)" pRipple [class]="cx('next')" [attr.aria-label]="getAriaLabel('nextPageLabel')">
+            <svg [pBind]="ptm('nextIcon')" data-p-icon="angle-right" *ngIf="!nextPageLinkIconTemplate && !_nextPageLinkIconTemplate" [class]="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')">
-            <svg data-p-icon="angle-double-right" *ngIf="!lastPageLinkIconTemplate && !_lastPageLinkIconTemplate" [class]="cx('lastIcon')" />
+        <button [pBind]="ptm('last')" *ngIf="showFirstLastIcon" type="button" [disabled]="isLastPage() || empty()" (click)="changePageToLast($event)" pRipple [class]="cx('last')" [attr.aria-label]="getAriaLabel('lastPageLabel')">
+            <svg [pBind]="ptm('lastIcon')" data-p-icon="angle-double-right" *ngIf="!lastPageLinkIconTemplate && !_lastPageLinkIconTemplate" [class]="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-inputnumber [pt]="ptm('pcJumpToPageInput')" *ngIf="showJumpToPageInput" [ngModel]="currentPage()" [class]="cx('pcJumpToPageInput')" [disabled]="empty()" (ngModelChange)="changePage($event - 1)"></p-inputnumber>
         <p-select
             [options]="rowsPerPageItems"
             [(ngModel)]="rows"
@@ -590,6 +599,7 @@ class Paginator extends BaseComponent {
             [appendTo]="dropdownAppendTo || $appendTo()"
             [scrollHeight]="dropdownScrollHeight"
             [ariaLabel]="getAriaLabel('rowsPerPageLabel')"
+            [pt]="ptm('pcRowPerPageDropdown')"
         >
             <ng-container *ngIf="dropdownItemTemplate">
                 <ng-template let-item pTemplate="item">
@@ -600,36 +610,37 @@ class Paginator extends BaseComponent {
                 <ng-container *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-container>
             </ng-template>
         </p-select>
-        <div [class]="cx('contentEnd')" *ngIf="templateRight" [attr.data-pc-section]="'end'">
+        <div [pBind]="ptm('contentEnd')" [class]="cx('contentEnd')" *ngIf="templateRight">
             <ng-container *ngTemplateOutlet="templateRight; context: { $implicit: paginatorState }"></ng-container>
         </div>
-    `, 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: "[data-p-icon=\"angle-double-left\"]" }, { kind: "component", type: AngleDoubleRightIcon, selector: "[data-p-icon=\"angle-double-right\"]" }, { kind: "component", type: AngleLeftIcon, selector: "[data-p-icon=\"angle-left\"]" }, { kind: "component", type: AngleRightIcon, selector: "[data-p-icon=\"angle-right\"]" }, { 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: "[data-p-icon=\"angle-double-left\"]" }, { kind: "component", type: AngleDoubleRightIcon, selector: "[data-p-icon=\"angle-double-right\"]" }, { kind: "component", type: AngleLeftIcon, selector: "[data-p-icon=\"angle-left\"]" }, { kind: "component", type: AngleRightIcon, selector: "[data-p-icon=\"angle-right\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Paginator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Paginator, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-paginator',
                     standalone: true,
-                    imports: [CommonModule, Select, InputNumber, FormsModule, Ripple, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleLeftIcon, AngleRightIcon, SharedModule],
+                    imports: [CommonModule, Select, InputNumber, FormsModule, Ripple, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleLeftIcon, AngleRightIcon, SharedModule, Bind],
                     template: `
-        <div [class]="cx('contentStart')" *ngIf="templateLeft" [attr.data-pc-section]="'start'">
+        <div [pBind]="ptm('contentStart')" [class]="cx('contentStart')" *ngIf="templateLeft">
             <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')">
-            <svg data-p-icon="angle-double-left" *ngIf="!firstPageLinkIconTemplate && !_firstPageLinkIconTemplate" [class]="cx('firstIcon')" />
+        <span [pBind]="ptm('current')" [class]="cx('current')" *ngIf="showCurrentPageReport">{{ currentPageReport }}</span>
+        <button [pBind]="ptm('first')" *ngIf="showFirstLastIcon" type="button" (click)="changePageToFirst($event)" pRipple [class]="cx('first')" [attr.aria-label]="getAriaLabel('firstPageLabel')">
+            <svg [pBind]="ptm('firstIcon')" data-p-icon="angle-double-left" *ngIf="!firstPageLinkIconTemplate && !_firstPageLinkIconTemplate" [class]="cx('firstIcon')" />
             <span [class]="cx('firstIcon')" *ngIf="firstPageLinkIconTemplate || _firstPageLinkIconTemplate">
                 <ng-template *ngTemplateOutlet="firstPageLinkIconTemplate || _firstPageLinkIconTemplate"></ng-template>
             </span>
         </button>
-        <button type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToPrev($event)" pRipple [class]="cx('prev')" [attr.aria-label]="getAriaLabel('prevPageLabel')">
-            <svg data-p-icon="angle-left" *ngIf="!previousPageLinkIconTemplate && !_previousPageLinkIconTemplate" [class]="cx('prevIcon')" />
+        <button [pBind]="ptm('prev')" type="button" [disabled]="isFirstPage() || empty()" (click)="changePageToPrev($event)" pRipple [class]="cx('prev')" [attr.aria-label]="getAriaLabel('prevPageLabel')">
+            <svg [pBind]="ptm('prevIcon')" data-p-icon="angle-left" *ngIf="!previousPageLinkIconTemplate && !_previousPageLinkIconTemplate" [class]="cx('prevIcon')" />
             <span [class]="cx('prevIcon')" *ngIf="previousPageLinkIconTemplate || _previousPageLinkIconTemplate">
                 <ng-template *ngTemplateOutlet="previousPageLinkIconTemplate || _previousPageLinkIconTemplate"></ng-template>
             </span>
         </button>
-        <span [class]="cx('pages')" *ngIf="showPageLinks">
+        <span [pBind]="ptm('pages')" [class]="cx('pages')" *ngIf="showPageLinks">
             <button
+                [pBind]="ptm('page')"
                 type="button"
                 *ngFor="let pageLink of pageLinks"
                 [class]="cx('page', { pageLink })"
@@ -651,6 +662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             (onChange)="onPageDropdownChange($event)"
             [appendTo]="dropdownAppendTo || $appendTo()"
             [scrollHeight]="dropdownScrollHeight"
+            [pt]="ptm('pcJumpToPageDropdown')"
         >
             <ng-template pTemplate="selectedItem">{{ currentPageReport }}</ng-template>
             <ng-container *ngIf="jumpToPageItemTemplate">
@@ -662,19 +674,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 <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')">
-            <svg data-p-icon="angle-right" *ngIf="!nextPageLinkIconTemplate && !_nextPageLinkIconTemplate" [class]="cx('nextIcon')" />
+        <button [pBind]="ptm('next')" type="button" [disabled]="isLastPage() || empty()" (click)="changePageToNext($event)" pRipple [class]="cx('next')" [attr.aria-label]="getAriaLabel('nextPageLabel')">
+            <svg [pBind]="ptm('nextIcon')" data-p-icon="angle-right" *ngIf="!nextPageLinkIconTemplate && !_nextPageLinkIconTemplate" [class]="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')">
-            <svg data-p-icon="angle-double-right" *ngIf="!lastPageLinkIconTemplate && !_lastPageLinkIconTemplate" [class]="cx('lastIcon')" />
+        <button [pBind]="ptm('last')" *ngIf="showFirstLastIcon" type="button" [disabled]="isLastPage() || empty()" (click)="changePageToLast($event)" pRipple [class]="cx('last')" [attr.aria-label]="getAriaLabel('lastPageLabel')">
+            <svg [pBind]="ptm('lastIcon')" data-p-icon="angle-double-right" *ngIf="!lastPageLinkIconTemplate && !_lastPageLinkIconTemplate" [class]="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-inputnumber [pt]="ptm('pcJumpToPageInput')" *ngIf="showJumpToPageInput" [ngModel]="currentPage()" [class]="cx('pcJumpToPageInput')" [disabled]="empty()" (ngModelChange)="changePage($event - 1)"></p-inputnumber>
         <p-select
             [options]="rowsPerPageItems"
             [(ngModel)]="rows"
@@ -685,6 +697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             [appendTo]="dropdownAppendTo || $appendTo()"
             [scrollHeight]="dropdownScrollHeight"
             [ariaLabel]="getAriaLabel('rowsPerPageLabel')"
+            [pt]="ptm('pcRowPerPageDropdown')"
         >
             <ng-container *ngIf="dropdownItemTemplate">
                 <ng-template let-item pTemplate="item">
@@ -695,18 +708,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 <ng-container *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-container>
             </ng-template>
         </p-select>
-        <div [class]="cx('contentEnd')" *ngIf="templateRight" [attr.data-pc-section]="'end'">
+        <div [pBind]="ptm('contentEnd')" [class]="cx('contentEnd')" *ngIf="templateRight">
             <ng-container *ngTemplateOutlet="templateRight; context: { $implicit: paginatorState }"></ng-container>
         </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [PaginatorStyle],
+                    providers: [PaginatorStyle, { provide: PAGINATOR_INSTANCE, useExisting: Paginator }, { provide: PARENT_INSTANCE, useExisting: Paginator }],
                     host: {
-                        '[attr.data-pc-name]': "'paginator'",
-                        '[attr.data-pc-section]': "'root'",
                         '[class]': "cn(cx('paginator'), styleClass)"
-                    }
+                    },
+                    hostDirectives: [Bind]
                 }]
         }], ctorParameters: () => [], propDecorators: { pageLinkSize: [{
                 type: Input,
@@ -782,11 +794,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 args: ['style.display']
             }] } });
 class PaginatorModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: PaginatorModule, imports: [Paginator, SharedModule], exports: [Paginator, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PaginatorModule, imports: [Paginator, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: PaginatorModule, imports: [Paginator, SharedModule], exports: [Paginator, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaginatorModule, imports: [Paginator, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Paginator, SharedModule],