primeng 0.0.0-watch

package/fesm2022/primeng-dataview.mjs

@@ -0,0 +1,812 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, inject, numberAttribute, booleanAttribute, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { resolveFieldData } from '@primeuix/utils';
+import { TranslationKeys, FilterService, SharedModule, Header, Footer } from 'primeng/api';
+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 classes = {
+    root: ({ instance }) => [
+        'p-dataview p-component',
+        {
+            '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',
+    footer: 'p-dataview-footer'
+};
+class DataViewStyle extends BaseStyle {
+    name = 'dataview';
+    theme = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DataViewStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DataViewStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DataViewStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * DataView displays data in grid or list layout with pagination and sorting features.
+ *
+ * [Live Demo](https://www.primeng.org/dataview/)
+ *
+ * @module dataviewstyle
+ *
+ */
+var DataViewClasses;
+(function (DataViewClasses) {
+    /**
+     * Class name of the root element
+     */
+    DataViewClasses["root"] = "p-dataview";
+    /**
+     * 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
+     */
+    DataViewClasses["pcPaginator"] = "p-dataview-paginator-[position]";
+    /**
+     * Class name of the content element
+     */
+    DataViewClasses["content"] = "p-dataview-content";
+    /**
+     * Class name of the empty message element
+     */
+    DataViewClasses["emptyMessage"] = "p-dataview-empty-message";
+    /**
+     * Class name of the footer element
+     */
+    DataViewClasses["footer"] = "p-dataview-footer";
+})(DataViewClasses || (DataViewClasses = {}));
+
+/**
+ * DataView displays data in grid or list layout with pagination and sorting features.
+ * @group Components
+ */
+class DataView extends BaseComponent {
+    /**
+     * When specified as true, enables the pagination.
+     * @group Props
+     */
+    paginator;
+    /**
+     * Number of rows to display per page.
+     * @group Props
+     */
+    rows;
+    /**
+     * Number of total records, defaults to length of value when not defined.
+     * @group Props
+     */
+    totalRecords;
+    /**
+     * Number of page links to display in paginator.
+     * @group Props
+     */
+    pageLinks = 5;
+    /**
+     * Array of integer/object values to display inside rows per page dropdown of paginator
+     * @group Props
+     */
+    rowsPerPageOptions;
+    /**
+     * Position of the paginator.
+     * @group Props
+     */
+    paginatorPosition = 'bottom';
+    /**
+     * Custom style class for paginator
+     * @group Props
+     */
+    paginatorStyleClass;
+    /**
+     * Whether to show it even there is only one page.
+     * @group Props
+     */
+    alwaysShowPaginator = true;
+    /**
+     * Target element to attach the paginator 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
+     */
+    paginatorDropdownAppendTo;
+    /**
+     * Paginator dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
+     * @group Props
+     */
+    paginatorDropdownScrollHeight = '200px';
+    /**
+     * Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
+     * @group Props
+     */
+    currentPageReportTemplate = '{currentPage} of {totalPages}';
+    /**
+     * Whether to display current page report.
+     * @group Props
+     */
+    showCurrentPageReport;
+    /**
+     * Whether to display a dropdown to navigate to any page.
+     * @group Props
+     */
+    showJumpToPageDropdown;
+    /**
+     * When enabled, icons are displayed on paginator to go first and last page.
+     * @group Props
+     */
+    showFirstLastIcon = true;
+    /**
+     * Whether to show page links.
+     * @group Props
+     */
+    showPageLinks = true;
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @group Props
+     */
+    lazy;
+    /**
+     * Whether to call lazy loading on initialization.
+     * @group Props
+     */
+    lazyLoadOnInit = true;
+    /**
+     * Text to display when there is no data. Defaults to global value in i18n translation configuration.
+     * @group Props
+     */
+    emptyMessage = '';
+    /**
+     * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
+     * @group Props
+     */
+    styleClass;
+    /**
+     * Style class of the grid.
+     * @group Props
+     */
+    gridStyleClass = '';
+    /**
+     * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
+     * @group Props
+     */
+    trackBy = (index, item) => item;
+    /**
+     * Comma separated list of fields in the object graph to search against.
+     * @group Props
+     */
+    filterBy;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @group Props
+     */
+    filterLocale;
+    /**
+     * Displays a loader to indicate data load is in progress.
+     * @group Props
+     */
+    loading;
+    /**
+     * The icon to show while indicating data load is in progress.
+     * @group Props
+     */
+    loadingIcon;
+    /**
+     * Index of the first row to be displayed.
+     * @group Props
+     */
+    first = 0;
+    /**
+     * Property name of data to use in sorting by default.
+     * @group Props
+     */
+    sortField;
+    /**
+     * Order to sort the data by default.
+     * @group Props
+     */
+    sortOrder;
+    /**
+     * An array of objects to display.
+     * @group Props
+     */
+    value;
+    /**
+     * Defines the layout mode.
+     * @group Props
+     */
+    layout = 'list';
+    /**
+     * Callback to invoke when paging, sorting or filtering happens in lazy mode.
+     * @param {DataViewLazyLoadEvent} event - Custom lazy load event.
+     * @group Emits
+     */
+    onLazyLoad = new EventEmitter();
+    /**
+     * Callback to invoke when pagination occurs.
+     * @param {DataViewPageEvent} event - Custom page event.
+     * @group Emits
+     */
+    onPage = new EventEmitter();
+    /**
+     * Callback to invoke when sorting occurs.
+     * @param {DataViewSortEvent} event - Custom sort event.
+     * @group Emits
+     */
+    onSort = new EventEmitter();
+    /**
+     * Callback to invoke when changing layout.
+     * @param {DataViewLayoutChangeEvent} event - Custom layout change event.
+     * @group Emits
+     */
+    onChangeLayout = new EventEmitter();
+    /**
+     * Template for the list layout.
+     * @group Templates
+     */
+    listTemplate;
+    /**
+     * Template for grid layout.
+     * @group Templates
+     */
+    gridTemplate;
+    /**
+     * Template for the header section.
+     * @group Templates
+     */
+    headerTemplate;
+    /**
+     * Template for the empty message section.
+     * @group Templates
+     */
+    emptymessageTemplate;
+    /**
+     * Template for the footer section.
+     * @group Templates
+     */
+    footerTemplate;
+    /**
+     * Template for the left side of paginator.
+     * @group Templates
+     */
+    paginatorleft;
+    /**r* Template for the right side of paginator.
+     * @group Templates
+     */
+    paginatorright;
+    /**
+     * Template for items in paginator dropdown.
+     * @group Templates
+     */
+    paginatordropdownitem;
+    /**
+     * Template for loading icon.
+     * @group Templates
+     */
+    loadingicon;
+    /**
+     * Template for list icon.
+     * @group Templates
+     */
+    listicon;
+    /**
+     * Template for grid icon.
+     * @group Templates
+     */
+    gridicon;
+    header;
+    footer;
+    _value;
+    filteredValue;
+    filterValue;
+    initialized;
+    _layout = 'list';
+    translationSubscription;
+    _componentStyle = inject(DataViewStyle);
+    get emptyMessageLabel() {
+        return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
+    }
+    filterService = inject(FilterService);
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.lazy && this.lazyLoadOnInit) {
+            this.onLazyLoad.emit(this.createLazyLoadMetadata());
+        }
+        this.translationSubscription = this.config.translationObserver.subscribe(() => {
+            this.cd.markForCheck();
+        });
+        this.initialized = true;
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+    }
+    ngOnChanges(simpleChanges) {
+        super.ngOnChanges(simpleChanges);
+        if (simpleChanges.layout && !simpleChanges.layout.firstChange) {
+            this.onChangeLayout.emit({ layout: simpleChanges.layout.currentValue });
+        }
+        if (simpleChanges.value) {
+            this._value = simpleChanges.value.currentValue;
+            this.updateTotalRecords();
+            if (!this.lazy && this.hasFilter()) {
+                this.filter(this.filterValue);
+            }
+        }
+        if (simpleChanges.sortField || simpleChanges.sortOrder) {
+            //avoid triggering lazy load prior to lazy initialization at onInit
+            if (!this.lazy || this.initialized) {
+                this.sort();
+            }
+        }
+    }
+    updateTotalRecords() {
+        this.totalRecords = this.lazy ? this.totalRecords : this._value ? this._value.length : 0;
+    }
+    paginate(event) {
+        this.first = event.first;
+        this.rows = event.rows;
+        if (this.lazy) {
+            this.onLazyLoad.emit(this.createLazyLoadMetadata());
+        }
+        this.onPage.emit({
+            first: this.first,
+            rows: this.rows
+        });
+    }
+    sort() {
+        this.first = 0;
+        if (this.lazy) {
+            this.onLazyLoad.emit(this.createLazyLoadMetadata());
+        }
+        else if (this.value) {
+            this.value.sort((data1, data2) => {
+                let value1 = resolveFieldData(data1, this.sortField);
+                let value2 = resolveFieldData(data2, this.sortField);
+                let result = null;
+                if (value1 == null && value2 != null)
+                    result = -1;
+                else if (value1 != null && value2 == null)
+                    result = 1;
+                else if (value1 == null && value2 == null)
+                    result = 0;
+                else if (typeof value1 === 'string' && typeof value2 === 'string')
+                    result = value1.localeCompare(value2);
+                else
+                    result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+                return this.sortOrder * result;
+            });
+            if (this.hasFilter()) {
+                this.filter(this.filterValue);
+            }
+        }
+        this.onSort.emit({
+            sortField: this.sortField,
+            sortOrder: this.sortOrder
+        });
+    }
+    isEmpty() {
+        let data = this.filteredValue || this.value;
+        return data == null || data.length == 0;
+    }
+    createLazyLoadMetadata() {
+        return {
+            first: this.first,
+            rows: this.rows,
+            sortField: this.sortField,
+            sortOrder: this.sortOrder
+        };
+    }
+    getBlockableElement() {
+        return this.el.nativeElement.children[0];
+    }
+    filter(filter, filterMatchMode = 'contains') {
+        this.filterValue = filter;
+        if (this.value && this.value.length) {
+            let searchFields = this.filterBy.split(',');
+            this.filteredValue = this.filterService.filter(this.value, searchFields, filter, filterMatchMode, this.filterLocale);
+            if (this.filteredValue.length === this.value.length) {
+                this.filteredValue = null;
+            }
+            if (this.paginator) {
+                this.first = 0;
+                this.totalRecords = this.filteredValue ? this.filteredValue.length : this.value ? this.value.length : 0;
+            }
+            this.cd.markForCheck();
+        }
+    }
+    hasFilter() {
+        return this.filterValue && this.filterValue.trim().length > 0;
+    }
+    ngOnDestroy() {
+        if (this.translationSubscription) {
+            this.translationSubscription.unsubscribe();
+        }
+        super.ngOnDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DataView, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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: `
+        @if (loading) {
+            <div [class]="cx('loading')">
+                <div [class]="cx('loadingOverlay')">
+                    @if (loadingIcon) {
+                        <i [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
+                    } @else {
+                        <ng-container>
+                            <svg data-p-icon="spinner" [spin]="true" [class]="cx('loadingIcon')" />
+                            <ng-template *ngTemplateOutlet="loadingicon"></ng-template>
+                        </ng-container>
+                    }
+                </div>
+            </div>
+        }
+        @if (header || headerTemplate) {
+            <div [class]="cx('header')">
+                <ng-content select="p-header"></ng-content>
+                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+            </div>
+        }
+        @if (paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')) {
+            <p-paginator
+                [rows]="rows"
+                [first]="first"
+                [totalRecords]="totalRecords"
+                [pageLinkSize]="pageLinks"
+                [alwaysShow]="alwaysShowPaginator"
+                (onPageChange)="paginate($event)"
+                [rowsPerPageOptions]="rowsPerPageOptions"
+                [appendTo]="paginatorDropdownAppendTo"
+                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+                [templateLeft]="paginatorleft"
+                [templateRight]="paginatorright"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatordropdownitem"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+                [styleClass]="cn(cx('pcPaginator', { position: 'top' }), paginatorStyleClass)"
+            ></p-paginator>
+        }
+        <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>
+            }
+            @if (isEmpty() && !loading) {
+                <div [class]="cx('emptyMessage')">
+                    <ng-container *ngIf="!emptymessageTemplate; else empty">
+                        {{ emptyMessageLabel }}
+                    </ng-container>
+                    <ng-container #empty *ngTemplateOutlet="emptymessageTemplate"></ng-container>
+                </div>
+            }
+        </div>
+        @if (paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')) {
+            <p-paginator
+                [rows]="rows"
+                [first]="first"
+                [totalRecords]="totalRecords"
+                [pageLinkSize]="pageLinks"
+                [alwaysShow]="alwaysShowPaginator"
+                (onPageChange)="paginate($event)"
+                [rowsPerPageOptions]="rowsPerPageOptions"
+                [appendTo]="paginatorDropdownAppendTo"
+                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+                [templateLeft]="paginatorleft"
+                [templateRight]="paginatorright"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatordropdownitem"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+                [styleClass]="cn(cx('pcPaginator', { position: 'bottom' }), paginatorStyleClass)"
+            ></p-paginator>
+        }
+        @if (footer || footerTemplate) {
+            <div [class]="cx('footer')">
+                <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: "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: "[data-p-icon=\"spinner\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DataView, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-dataView, p-dataview, p-data-view',
+                    standalone: true,
+                    imports: [CommonModule, PaginatorModule, SpinnerIcon, SharedModule],
+                    template: `
+        @if (loading) {
+            <div [class]="cx('loading')">
+                <div [class]="cx('loadingOverlay')">
+                    @if (loadingIcon) {
+                        <i [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
+                    } @else {
+                        <ng-container>
+                            <svg data-p-icon="spinner" [spin]="true" [class]="cx('loadingIcon')" />
+                            <ng-template *ngTemplateOutlet="loadingicon"></ng-template>
+                        </ng-container>
+                    }
+                </div>
+            </div>
+        }
+        @if (header || headerTemplate) {
+            <div [class]="cx('header')">
+                <ng-content select="p-header"></ng-content>
+                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+            </div>
+        }
+        @if (paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')) {
+            <p-paginator
+                [rows]="rows"
+                [first]="first"
+                [totalRecords]="totalRecords"
+                [pageLinkSize]="pageLinks"
+                [alwaysShow]="alwaysShowPaginator"
+                (onPageChange)="paginate($event)"
+                [rowsPerPageOptions]="rowsPerPageOptions"
+                [appendTo]="paginatorDropdownAppendTo"
+                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+                [templateLeft]="paginatorleft"
+                [templateRight]="paginatorright"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatordropdownitem"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+                [styleClass]="cn(cx('pcPaginator', { position: 'top' }), paginatorStyleClass)"
+            ></p-paginator>
+        }
+        <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>
+            }
+            @if (isEmpty() && !loading) {
+                <div [class]="cx('emptyMessage')">
+                    <ng-container *ngIf="!emptymessageTemplate; else empty">
+                        {{ emptyMessageLabel }}
+                    </ng-container>
+                    <ng-container #empty *ngTemplateOutlet="emptymessageTemplate"></ng-container>
+                </div>
+            }
+        </div>
+        @if (paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')) {
+            <p-paginator
+                [rows]="rows"
+                [first]="first"
+                [totalRecords]="totalRecords"
+                [pageLinkSize]="pageLinks"
+                [alwaysShow]="alwaysShowPaginator"
+                (onPageChange)="paginate($event)"
+                [rowsPerPageOptions]="rowsPerPageOptions"
+                [appendTo]="paginatorDropdownAppendTo"
+                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+                [templateLeft]="paginatorleft"
+                [templateRight]="paginatorright"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatordropdownitem"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+                [styleClass]="cn(cx('pcPaginator', { position: 'bottom' }), paginatorStyleClass)"
+            ></p-paginator>
+        }
+        @if (footer || footerTemplate) {
+            <div [class]="cx('footer')">
+                <ng-content select="p-footer"></ng-content>
+                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+            </div>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [DataViewStyle],
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)"
+                    }
+                }]
+        }], propDecorators: { paginator: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], rows: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], totalRecords: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], pageLinks: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], rowsPerPageOptions: [{
+                type: Input
+            }], paginatorPosition: [{
+                type: Input
+            }], paginatorStyleClass: [{
+                type: Input
+            }], alwaysShowPaginator: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], paginatorDropdownAppendTo: [{
+                type: Input
+            }], paginatorDropdownScrollHeight: [{
+                type: Input
+            }], currentPageReportTemplate: [{
+                type: Input
+            }], showCurrentPageReport: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showJumpToPageDropdown: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showFirstLastIcon: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showPageLinks: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], lazy: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], lazyLoadOnInit: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], emptyMessage: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], gridStyleClass: [{
+                type: Input
+            }], trackBy: [{
+                type: Input
+            }], filterBy: [{
+                type: Input
+            }], filterLocale: [{
+                type: Input
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], loadingIcon: [{
+                type: Input
+            }], first: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], sortField: [{
+                type: Input
+            }], sortOrder: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], value: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], onLazyLoad: [{
+                type: Output
+            }], onPage: [{
+                type: Output
+            }], onSort: [{
+                type: Output
+            }], onChangeLayout: [{
+                type: Output
+            }], listTemplate: [{
+                type: ContentChild,
+                args: ['list']
+            }], gridTemplate: [{
+                type: ContentChild,
+                args: ['grid']
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['header']
+            }], emptymessageTemplate: [{
+                type: ContentChild,
+                args: ['emptymessage']
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: ['footer']
+            }], paginatorleft: [{
+                type: ContentChild,
+                args: ['paginatorleft']
+            }], paginatorright: [{
+                type: ContentChild,
+                args: ['paginatorright']
+            }], paginatordropdownitem: [{
+                type: ContentChild,
+                args: ['paginatordropdownitem']
+            }], loadingicon: [{
+                type: ContentChild,
+                args: ['loadingicon']
+            }], listicon: [{
+                type: ContentChild,
+                args: ['listicon']
+            }], gridicon: [{
+                type: ContentChild,
+                args: ['gridicon']
+            }], header: [{
+                type: ContentChild,
+                args: [Header]
+            }], footer: [{
+                type: ContentChild,
+                args: [Footer]
+            }] } });
+class DataViewModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DataViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: DataViewModule, imports: [DataView, SharedModule], exports: [DataView, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DataViewModule, imports: [DataView, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DataViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DataView, SharedModule],
+                    exports: [DataView, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DataView, DataViewClasses, DataViewModule, DataViewStyle };
+//# sourceMappingURL=primeng-dataview.mjs.map