primeng 19.1.2 → 20.0.0-beta.1

package/fesm2022/primeng-dataview.mjs

@@ -8,81 +8,34 @@ import { BaseComponent } from 'primeng/basecomponent';
 import { SpinnerIcon } from 'primeng/icons';
 import * as i2 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
+import { style } from '@primeuix/styles/dataview';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-dataview {
-    border-color: ${dt('dataview.border.color')};
-    border-width: ${dt('dataview.border.width')};
-    border-style: solid;
-    border-radius: ${dt('dataview.border.radius')};
-    padding: ${dt('dataview.padding')};
-}
-
-.p-dataview-header {
-    background: ${dt('dataview.header.background')};
-    color: ${dt('dataview.header.color')};
-    border-color: ${dt('dataview.header.border.color')};
-    border-width: ${dt('dataview.header.border.width')};
-    border-style: solid;
-    padding: ${dt('dataview.header.padding')};
-    border-radius: ${dt('dataview.header.border.radius')};
-}
-
-.p-dataview-content {
-    background: ${dt('dataview.content.background')};
-    border-color: ${dt('dataview.content.border.color')};
-    border-width: ${dt('dataview.content.border.width')};
-    border-style: solid;
-    color: ${dt('dataview.content.color')};
-    padding: ${dt('dataview.content.padding')};
-    border-radius: ${dt('dataview.content.border.radius')};
-}
-
-.p-dataview-footer {
-    background: ${dt('dataview.footer.background')};
-    color: ${dt('dataview.footer.color')};
-    border-color: ${dt('dataview.footer.border.color')};
-    border-width: ${dt('dataview.footer.border.width')};
-    border-style: solid;
-    padding: ${dt('dataview.footer.padding')};
-    border-radius: ${dt('dataview.footer.border.radius')};
-}
-
-.p-dataview-paginator-top {
-    border-width: ${dt('dataview.paginator.top.border.width')};
-    border-color: ${dt('dataview.paginator.top.border.color')};
-    border-style: solid;
-}
-
-.p-dataview-paginator-bottom {
-    border-width: ${dt('dataview.paginator.bottom.border.width')};
-    border-color: ${dt('dataview.paginator.bottom.border.color')};
-    border-style: solid;
-}
-`;
 const classes = {
-    root: ({ props }) => [
+    root: ({ instance }) => [
         'p-dataview p-component',
         {
-            'p-dataview-list': props.layout === 'list',
-            'p-dataview-grid': props.layout === 'grid'
+            'p-dataview-list': instance.layout === 'list',
+            'p-dataview-grid': instance.layout === 'grid'
         }
     ],
     header: 'p-dataview-header',
+    loading: 'p-dataview-loading',
+    loadingOverlay: 'p-dataview-loading-overlay p-overlay-mask',
+    loadingIcon: 'p-dataview-loading-icon',
     pcPaginator: ({ position }) => 'p-dataview-paginator-' + position,
     content: 'p-dataview-content',
-    emptyMessage: 'p-dataview-empty-message', // TODO: remove?
+    emptyMessage: 'p-dataview-empty-message',
     footer: 'p-dataview-footer'
 };
 class DataViewStyle extends BaseStyle {
     name = 'dataview';
-    theme = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataViewStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataViewStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataViewStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataViewStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataViewStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataViewStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -104,6 +57,18 @@ var DataViewClasses;
      * Class name of the header element
      */
     DataViewClasses["header"] = "p-dataview-header";
+    /**
+     * Class name of the loading element
+     */
+    DataViewClasses["loading"] = "p-dataview-loading";
+    /**
+     * Class name of the loading overlay element
+     */
+    DataViewClasses["loadingOverlay"] = "p-dataview-loading-overlay";
+    /**
+     * Class name of the loading icon element
+     */
+    DataViewClasses["loadingIcon"] = "p-dataview-loading-icon";
     /**
      * Class name of the paginator element
      */
@@ -217,13 +182,9 @@ class DataView extends BaseComponent {
      * @group Props
      */
     emptyMessage = '';
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -489,209 +450,208 @@ class DataView extends BaseComponent {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataView, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: DataView, isStandalone: true, selector: "p-dataView, p-dataview, p-data-view", inputs: { paginator: ["paginator", "paginator", booleanAttribute], rows: ["rows", "rows", numberAttribute], totalRecords: ["totalRecords", "totalRecords", numberAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], emptyMessage: "emptyMessage", style: "style", styleClass: "styleClass", gridStyleClass: "gridStyleClass", trackBy: "trackBy", filterBy: "filterBy", filterLocale: "filterLocale", loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", first: ["first", "first", numberAttribute], sortField: "sortField", sortOrder: ["sortOrder", "sortOrder", numberAttribute], value: "value", layout: "layout" }, outputs: { onLazyLoad: "onLazyLoad", onPage: "onPage", onSort: "onSort", onChangeLayout: "onChangeLayout" }, providers: [DataViewStyle], queries: [{ propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true }, { propertyName: "gridTemplate", first: true, predicate: ["grid"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "emptymessageTemplate", first: true, predicate: ["emptymessage"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "paginatorleft", first: true, predicate: ["paginatorleft"], descendants: true }, { propertyName: "paginatorright", first: true, predicate: ["paginatorright"], descendants: true }, { propertyName: "paginatordropdownitem", first: true, predicate: ["paginatordropdownitem"], descendants: true }, { propertyName: "loadingicon", first: true, predicate: ["loadingicon"], descendants: true }, { propertyName: "listicon", first: true, predicate: ["listicon"], descendants: true }, { propertyName: "gridicon", first: true, predicate: ["gridicon"], descendants: true }, { propertyName: "header", first: true, predicate: Header, descendants: true }, { propertyName: "footer", first: true, predicate: Footer, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <div [ngClass]="{ 'p-dataview p-component': true, 'p-dataview-list': layout === 'list', 'p-dataview-grid': layout === 'grid' }" [ngStyle]="style" [class]="styleClass">
-            <div class="p-dataview-loading" *ngIf="loading">
-                <div class="p-dataview-loading-overlay p-overlay-mask">
-                    <i *ngIf="loadingIcon" [class]="'p-dataview-loading-icon pi-spin ' + loadingIcon"></i>
-                    <ng-container *ngIf="!loadingIcon">
-                        <SpinnerIcon *ngIf="!loadingicon" [spin]="true" [styleClass]="'p-dataview-loading-icon'" />
-                        <ng-template *ngTemplateOutlet="loadingicon"></ng-template>
-                    </ng-container>
-                </div>
-            </div>
-            <div class="p-dataview-header" *ngIf="header || headerTemplate">
-                <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataView, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DataView, isStandalone: true, selector: "p-dataView, p-dataview, p-data-view", inputs: { paginator: ["paginator", "paginator", booleanAttribute], rows: ["rows", "rows", numberAttribute], totalRecords: ["totalRecords", "totalRecords", numberAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], emptyMessage: "emptyMessage", styleClass: "styleClass", gridStyleClass: "gridStyleClass", trackBy: "trackBy", filterBy: "filterBy", filterLocale: "filterLocale", loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", first: ["first", "first", numberAttribute], sortField: "sortField", sortOrder: ["sortOrder", "sortOrder", numberAttribute], value: "value", layout: "layout" }, outputs: { onLazyLoad: "onLazyLoad", onPage: "onPage", onSort: "onSort", onChangeLayout: "onChangeLayout" }, host: { properties: { "class": "cn(cx('root'), styleClass)" } }, providers: [DataViewStyle], queries: [{ propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true }, { propertyName: "gridTemplate", first: true, predicate: ["grid"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "emptymessageTemplate", first: true, predicate: ["emptymessage"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "paginatorleft", first: true, predicate: ["paginatorleft"], descendants: true }, { propertyName: "paginatorright", first: true, predicate: ["paginatorright"], descendants: true }, { propertyName: "paginatordropdownitem", first: true, predicate: ["paginatordropdownitem"], descendants: true }, { propertyName: "loadingicon", first: true, predicate: ["loadingicon"], descendants: true }, { propertyName: "listicon", first: true, predicate: ["listicon"], descendants: true }, { propertyName: "gridicon", first: true, predicate: ["gridicon"], descendants: true }, { propertyName: "header", first: true, predicate: Header, descendants: true }, { propertyName: "footer", first: true, predicate: Footer, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <div [class]="cx('loading')" *ngIf="loading">
+            <div [class]="cx('loadingOverlay')">
+                <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
+                <ng-container *ngIf="!loadingIcon">
+                    <SpinnerIcon *ngIf="!loadingicon" [spin]="true" [styleClass]="cx('loadingIcon')" />
+                    <ng-template *ngTemplateOutlet="loadingicon"></ng-template>
+                </ng-container>
             </div>
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="paginate($event)"
-                styleClass="p-paginator-top"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
-                [templateLeft]="paginatorleft"
-                [templateRight]="paginatorright"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatordropdownitem"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="paginatorStyleClass"
-            ></p-paginator>
+        </div>
+        <div [class]="cx('header')" *ngIf="header || headerTemplate">
+            <ng-content select="p-header"></ng-content>
+            <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+        </div>
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="paginate($event)"
+            [styleClass]="cx('pcPaginator', { position: 'top' })"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
+            [appendTo]="paginatorDropdownAppendTo"
+            [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+            [templateLeft]="paginatorleft"
+            [templateRight]="paginatorright"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatordropdownitem"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showPageLinks]="showPageLinks"
+            [styleClass]="paginatorStyleClass"
+        ></p-paginator>
 
-            <div class="p-dataview-content">
-                @if (layout === 'list') {
-                    <ng-container
-                        *ngTemplateOutlet="
-                            listTemplate;
-                            context: {
-                                $implicit: paginator ? (filteredValue || value | slice: (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value
-                            }
-                        "
-                    ></ng-container>
-                }
-                @if (layout === 'grid') {
-                    <ng-container
-                        *ngTemplateOutlet="
-                            gridTemplate;
-                            context: {
-                                $implicit: paginator ? (filteredValue || value | slice: (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value
-                            }
-                        "
-                    ></ng-container>
-                }
-                <div *ngIf="isEmpty() && !loading">
-                    <div class="p-dataview-emptymessage">
-                        <ng-container *ngIf="!emptymessageTemplate; else empty">
-                            {{ emptyMessageLabel }}
-                        </ng-container>
-                        <ng-container #empty *ngTemplateOutlet="emptymessageTemplate"></ng-container>
-                    </div>
+        <div [class]="cx('content')">
+            @if (layout === 'list') {
+                <ng-container
+                    *ngTemplateOutlet="
+                        listTemplate;
+                        context: {
+                            $implicit: paginator ? (filteredValue || value | slice: (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value
+                        }
+                    "
+                ></ng-container>
+            }
+            @if (layout === 'grid') {
+                <ng-container
+                    *ngTemplateOutlet="
+                        gridTemplate;
+                        context: {
+                            $implicit: paginator ? (filteredValue || value | slice: (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value
+                        }
+                    "
+                ></ng-container>
+            }
+            <div *ngIf="isEmpty() && !loading">
+                <div [class]="cx('emptyMessage')">
+                    <ng-container *ngIf="!emptymessageTemplate; else empty">
+                        {{ emptyMessageLabel }}
+                    </ng-container>
+                    <ng-container #empty *ngTemplateOutlet="emptymessageTemplate"></ng-container>
                 </div>
             </div>
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="paginate($event)"
-                styleClass="p-paginator-bottom"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
-                [templateLeft]="paginatorleft"
-                [templateRight]="paginatorright"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatordropdownitem"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="paginatorStyleClass"
-            ></p-paginator>
-            <div class="p-dataview-footer" *ngIf="footer || footerTemplate">
-                <ng-content select="p-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
-            </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="paginate($event)"
+            [styleClass]="cx('pcPaginator', { position: 'bottom' })"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
+            [appendTo]="paginatorDropdownAppendTo"
+            [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+            [templateLeft]="paginatorleft"
+            [templateRight]="paginatorright"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatordropdownitem"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showPageLinks]="showPageLinks"
+            [styleClass]="paginatorStyleClass"
+        ></p-paginator>
+        <div [class]="cx('footer')" *ngIf="footer || footerTemplate">
+            <ng-content select="p-footer"></ng-content>
+            <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataView, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-dataView, p-dataview, p-data-view',
                     standalone: true,
                     imports: [CommonModule, PaginatorModule, SpinnerIcon, SharedModule],
                     template: `
-        <div [ngClass]="{ 'p-dataview p-component': true, 'p-dataview-list': layout === 'list', 'p-dataview-grid': layout === 'grid' }" [ngStyle]="style" [class]="styleClass">
-            <div class="p-dataview-loading" *ngIf="loading">
-                <div class="p-dataview-loading-overlay p-overlay-mask">
-                    <i *ngIf="loadingIcon" [class]="'p-dataview-loading-icon pi-spin ' + loadingIcon"></i>
-                    <ng-container *ngIf="!loadingIcon">
-                        <SpinnerIcon *ngIf="!loadingicon" [spin]="true" [styleClass]="'p-dataview-loading-icon'" />
-                        <ng-template *ngTemplateOutlet="loadingicon"></ng-template>
-                    </ng-container>
-                </div>
-            </div>
-            <div class="p-dataview-header" *ngIf="header || headerTemplate">
-                <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+        <div [class]="cx('loading')" *ngIf="loading">
+            <div [class]="cx('loadingOverlay')">
+                <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
+                <ng-container *ngIf="!loadingIcon">
+                    <SpinnerIcon *ngIf="!loadingicon" [spin]="true" [styleClass]="cx('loadingIcon')" />
+                    <ng-template *ngTemplateOutlet="loadingicon"></ng-template>
+                </ng-container>
             </div>
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="paginate($event)"
-                styleClass="p-paginator-top"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
-                [templateLeft]="paginatorleft"
-                [templateRight]="paginatorright"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatordropdownitem"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="paginatorStyleClass"
-            ></p-paginator>
+        </div>
+        <div [class]="cx('header')" *ngIf="header || headerTemplate">
+            <ng-content select="p-header"></ng-content>
+            <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+        </div>
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="paginate($event)"
+            [styleClass]="cx('pcPaginator', { position: 'top' })"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
+            [appendTo]="paginatorDropdownAppendTo"
+            [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+            [templateLeft]="paginatorleft"
+            [templateRight]="paginatorright"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatordropdownitem"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showPageLinks]="showPageLinks"
+            [styleClass]="paginatorStyleClass"
+        ></p-paginator>
 
-            <div class="p-dataview-content">
-                @if (layout === 'list') {
-                    <ng-container
-                        *ngTemplateOutlet="
-                            listTemplate;
-                            context: {
-                                $implicit: paginator ? (filteredValue || value | slice: (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value
-                            }
-                        "
-                    ></ng-container>
-                }
-                @if (layout === 'grid') {
-                    <ng-container
-                        *ngTemplateOutlet="
-                            gridTemplate;
-                            context: {
-                                $implicit: paginator ? (filteredValue || value | slice: (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value
-                            }
-                        "
-                    ></ng-container>
-                }
-                <div *ngIf="isEmpty() && !loading">
-                    <div class="p-dataview-emptymessage">
-                        <ng-container *ngIf="!emptymessageTemplate; else empty">
-                            {{ emptyMessageLabel }}
-                        </ng-container>
-                        <ng-container #empty *ngTemplateOutlet="emptymessageTemplate"></ng-container>
-                    </div>
+        <div [class]="cx('content')">
+            @if (layout === 'list') {
+                <ng-container
+                    *ngTemplateOutlet="
+                        listTemplate;
+                        context: {
+                            $implicit: paginator ? (filteredValue || value | slice: (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value
+                        }
+                    "
+                ></ng-container>
+            }
+            @if (layout === 'grid') {
+                <ng-container
+                    *ngTemplateOutlet="
+                        gridTemplate;
+                        context: {
+                            $implicit: paginator ? (filteredValue || value | slice: (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value
+                        }
+                    "
+                ></ng-container>
+            }
+            <div *ngIf="isEmpty() && !loading">
+                <div [class]="cx('emptyMessage')">
+                    <ng-container *ngIf="!emptymessageTemplate; else empty">
+                        {{ emptyMessageLabel }}
+                    </ng-container>
+                    <ng-container #empty *ngTemplateOutlet="emptymessageTemplate"></ng-container>
                 </div>
             </div>
-            <p-paginator
-                [rows]="rows"
-                [first]="first"
-                [totalRecords]="totalRecords"
-                [pageLinkSize]="pageLinks"
-                [alwaysShow]="alwaysShowPaginator"
-                (onPageChange)="paginate($event)"
-                styleClass="p-paginator-bottom"
-                [rowsPerPageOptions]="rowsPerPageOptions"
-                *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
-                [dropdownAppendTo]="paginatorDropdownAppendTo"
-                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
-                [templateLeft]="paginatorleft"
-                [templateRight]="paginatorright"
-                [currentPageReportTemplate]="currentPageReportTemplate"
-                [showFirstLastIcon]="showFirstLastIcon"
-                [dropdownItemTemplate]="paginatordropdownitem"
-                [showCurrentPageReport]="showCurrentPageReport"
-                [showJumpToPageDropdown]="showJumpToPageDropdown"
-                [showPageLinks]="showPageLinks"
-                [styleClass]="paginatorStyleClass"
-            ></p-paginator>
-            <div class="p-dataview-footer" *ngIf="footer || footerTemplate">
-                <ng-content select="p-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
-            </div>
+        </div>
+        <p-paginator
+            [rows]="rows"
+            [first]="first"
+            [totalRecords]="totalRecords"
+            [pageLinkSize]="pageLinks"
+            [alwaysShow]="alwaysShowPaginator"
+            (onPageChange)="paginate($event)"
+            [styleClass]="cx('pcPaginator', { position: 'bottom' })"
+            [rowsPerPageOptions]="rowsPerPageOptions"
+            *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
+            [appendTo]="paginatorDropdownAppendTo"
+            [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+            [templateLeft]="paginatorleft"
+            [templateRight]="paginatorright"
+            [currentPageReportTemplate]="currentPageReportTemplate"
+            [showFirstLastIcon]="showFirstLastIcon"
+            [dropdownItemTemplate]="paginatordropdownitem"
+            [showCurrentPageReport]="showCurrentPageReport"
+            [showJumpToPageDropdown]="showJumpToPageDropdown"
+            [showPageLinks]="showPageLinks"
+            [styleClass]="paginatorStyleClass"
+        ></p-paginator>
+        <div [class]="cx('footer')" *ngIf="footer || footerTemplate">
+            <ng-content select="p-footer"></ng-content>
+            <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
         </div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [DataViewStyle]
+                    providers: [DataViewStyle],
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)"
+                    }
                 }]
         }], propDecorators: { paginator: [{
                 type: Input,
@@ -740,8 +700,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], emptyMessage: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], gridStyleClass: [{
@@ -818,11 +776,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: [Footer]
             }] } });
 class DataViewModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: DataViewModule, imports: [DataView, SharedModule], exports: [DataView, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataViewModule, imports: [DataView, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: DataViewModule, imports: [DataView, SharedModule], exports: [DataView, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataViewModule, imports: [DataView, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DataViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DataViewModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [DataView, SharedModule],