primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
839 lines (827 loc) • 35.6 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, inject, numberAttribute, booleanAttribute, 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 { 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 }) => [
'p-dataview p-component',
{
'p-dataview-list': props.layout === 'list',
'p-dataview-grid': props.layout === 'grid'
}
],
header: 'p-dataview-header',
pcPaginator: ({ position }) => 'p-dataview-paginator-' + position,
content: 'p-dataview-content',
emptyMessage: 'p-dataview-empty-message', // TODO: remove?
footer: 'p-dataview-footer'
};
class DataViewStyle extends BaseStyle {
name = 'dataview';
theme = theme;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DataViewStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DataViewStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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 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 = '';
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @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: "19.2.5", ngImport: i0, type: DataView, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", 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>
</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 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>
</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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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>
<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 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>
</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>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [DataViewStyle]
}]
}], 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
}], style: [{
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: "19.2.5", ngImport: i0, type: DataViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: DataViewModule, imports: [DataView, SharedModule], exports: [DataView, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DataViewModule, imports: [DataView, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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