primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
766 lines (761 loc) • 45.7 kB
JavaScript
export * from 'primeng/types/dataview';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, booleanAttribute, model, numberAttribute, output, contentChild, signal, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { resolveFieldData } from '@primeuix/utils';
import { Header, Footer, TranslationKeys, FilterService } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { Spinner } from '@primeicons/angular/spinner';
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 }) => {
const layout = instance.layout();
return [
'p-dataview p-component',
{
'p-dataview-list': layout === 'list',
'p-dataview-grid': 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';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DataViewStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DataViewStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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 = {}));
const DATAVIEW_INSTANCE = new InjectionToken('DATAVIEW_INSTANCE');
/**
* DataView displays data in grid or list layout with pagination and sorting features.
* @group Components
*/
class DataView extends BaseComponent {
componentName = 'DataView';
bindDirectiveInstance = inject(Bind, { self: true });
$pcDataView = inject(DATAVIEW_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
}
/**
* When specified as true, enables the pagination.
* @group Props
*/
paginator = input(false, { ...(ngDevMode ? { debugName: "paginator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Number of rows to display per page.
* @group Props
*/
rows = model(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "rows" }] : /* istanbul ignore next */ []));
/**
* Number of total records, defaults to length of value when not defined.
* @group Props
*/
totalRecords = model(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "totalRecords" }] : /* istanbul ignore next */ []));
/**
* Number of page links to display in paginator.
* @group Props
*/
pageLinks = input(5, { ...(ngDevMode ? { debugName: "pageLinks" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* Array of integer/object values to display inside rows per page dropdown of paginator
* @group Props
*/
rowsPerPageOptions = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "rowsPerPageOptions" }] : /* istanbul ignore next */ []));
/**
* Position of the paginator.
* @group Props
*/
paginatorPosition = input('bottom', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "paginatorPosition" }] : /* istanbul ignore next */ []));
/**
* Custom style class for paginator
* @group Props
*/
paginatorStyleClass = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "paginatorStyleClass" }] : /* istanbul ignore next */ []));
/**
* Whether to show it even there is only one page.
* @group Props
*/
alwaysShowPaginator = input(true, { ...(ngDevMode ? { debugName: "alwaysShowPaginator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* 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 = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "paginatorDropdownAppendTo" }] : /* istanbul ignore next */ []));
/**
* Paginator dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
* @group Props
*/
paginatorDropdownScrollHeight = input('200px', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "paginatorDropdownScrollHeight" }] : /* istanbul ignore next */ []));
/**
* Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
* @group Props
*/
currentPageReportTemplate = input('{currentPage} of {totalPages}', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "currentPageReportTemplate" }] : /* istanbul ignore next */ []));
/**
* Whether to display current page report.
* @group Props
*/
showCurrentPageReport = input(false, { ...(ngDevMode ? { debugName: "showCurrentPageReport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Whether to display a dropdown to navigate to any page.
* @group Props
*/
showJumpToPageDropdown = input(false, { ...(ngDevMode ? { debugName: "showJumpToPageDropdown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* When enabled, icons are displayed on paginator to go first and last page.
* @group Props
*/
showFirstLastIcon = input(true, { ...(ngDevMode ? { debugName: "showFirstLastIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Whether to show page links.
* @group Props
*/
showPageLinks = input(true, { ...(ngDevMode ? { debugName: "showPageLinks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Defines if data is loaded and interacted with in lazy manner.
* @group Props
*/
lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Whether to call lazy loading on initialization.
* @group Props
*/
lazyLoadOnInit = input(true, { ...(ngDevMode ? { debugName: "lazyLoadOnInit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Text to display when there is no data. Defaults to global value in i18n translation configuration.
* @group Props
*/
emptyMessage = input('', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
/**
* Style class of the grid.
* @group Props
*/
gridStyleClass = input('', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "gridStyleClass" }] : /* istanbul ignore next */ []));
/**
* Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
* @group Props
*/
trackBy = input((_index, item) => item, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
/**
* Comma separated list of fields in the object graph to search against.
* @group Props
*/
filterBy = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "filterBy" }] : /* istanbul ignore next */ []));
/**
* Locale to use in filtering. The default locale is the host environment's current locale.
* @group Props
*/
filterLocale = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "filterLocale" }] : /* istanbul ignore next */ []));
/**
* Displays a loader to indicate data load is in progress.
* @group Props
*/
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* The icon to show while indicating data load is in progress.
* @group Props
*/
loadingIcon = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "loadingIcon" }] : /* istanbul ignore next */ []));
/**
* Index of the first row to be displayed.
* @group Props
*/
first = model(0, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
/**
* Property name of data to use in sorting by default.
* @group Props
*/
sortField = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "sortField" }] : /* istanbul ignore next */ []));
/**
* Order to sort the data by default.
* @group Props
*/
sortOrder = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "sortOrder" }] : /* istanbul ignore next */ []));
/**
* An array of objects to display.
* @group Props
*/
value = model(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
/**
* Defines the layout mode.
* @group Props
*/
layout = input('list', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
/**
* Callback to invoke when paging, sorting or filtering happens in lazy mode.
* @param {DataViewLazyLoadEvent} event - Custom lazy load event.
* @group Emits
*/
onLazyLoad = output();
/**
* Callback to invoke when pagination occurs.
* @param {DataViewPageEvent} event - Custom page event.
* @group Emits
*/
onPage = output();
/**
* Callback to invoke when sorting occurs.
* @param {DataViewSortEvent} event - Custom sort event.
* @group Emits
*/
onSort = output();
/**
* Callback to invoke when changing layout.
* @param {DataViewLayoutChangeEvent} event - Custom layout change event.
* @group Emits
*/
onChangeLayout = output();
/**
* Template for the list layout.
* @param {DataViewListTemplateContext} context - list template context.
* @group Templates
*/
listTemplate = contentChild('list', { ...(ngDevMode ? { debugName: "listTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for grid layout.
* @param {DataViewGridTemplateContext} context - grid template context.
* @group Templates
*/
gridTemplate = contentChild('grid', { ...(ngDevMode ? { debugName: "gridTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for the header section.
* @group Templates
*/
headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for the empty message section.
* @group Templates
*/
emptymessageTemplate = contentChild('emptymessage', { ...(ngDevMode ? { debugName: "emptymessageTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for the footer section.
* @group Templates
*/
footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for the left side of paginator.
* @param {DataViewPaginatorLeftTemplateContext} context - paginator left template context.
* @group Templates
*/
paginatorleft = contentChild('paginatorleft', { ...(ngDevMode ? { debugName: "paginatorleft" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for the right side of paginator.
* @param {DataViewPaginatorRightTemplateContext} context - paginator right template context.
* @group Templates
*/
paginatorright = contentChild('paginatorright', { ...(ngDevMode ? { debugName: "paginatorright" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for items in paginator dropdown.
* @param {DataViewPaginatorDropdownItemTemplateContext} context - paginator dropdown item template context.
* @group Templates
*/
paginatordropdownitem = contentChild('paginatordropdownitem', { ...(ngDevMode ? { debugName: "paginatordropdownitem" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for loading icon.
* @group Templates
*/
loadingicon = contentChild('loadingicon', { ...(ngDevMode ? { debugName: "loadingicon" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for list icon.
* @group Templates
*/
listicon = contentChild('listicon', { ...(ngDevMode ? { debugName: "listicon" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Template for grid icon.
* @group Templates
*/
gridicon = contentChild('gridicon', { ...(ngDevMode ? { debugName: "gridicon" } : /* istanbul ignore next */ {}), descendants: false });
header = contentChild(Header, { ...(ngDevMode ? { debugName: "header" } : /* istanbul ignore next */ {}), descendants: false });
footer = contentChild(Footer, { ...(ngDevMode ? { debugName: "footer" } : /* istanbul ignore next */ {}), descendants: false });
filteredValue = signal(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "filteredValue" }] : /* istanbul ignore next */ []));
filterValue = signal(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "filterValue" }] : /* istanbul ignore next */ []));
initialized = false;
translation = toSignal(this.config.translationObserver, { initialValue: this.config.translation });
_componentStyle = inject(DataViewStyle);
emptyMessageLabel = computed(() => {
this.translation();
return this.emptyMessage() || this.translate(TranslationKeys.EMPTY_MESSAGE);
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "emptyMessageLabel" }] : /* istanbul ignore next */ []));
displayedItems = computed(() => {
const items = this.filteredValue() || this.value();
if (!this.paginator())
return items;
const start = this.lazy() ? 0 : this.first();
const end = start + (this.rows() ?? 0);
return items?.slice(start, end) ?? [];
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "displayedItems" }] : /* istanbul ignore next */ []));
showHeader = computed(() => !!this.header() || !!this.headerTemplate(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
showFooter = computed(() => !!this.footer() || !!this.footerTemplate(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
showTopPaginator = computed(() => this.paginator() && (this.paginatorPosition() === 'top' || this.paginatorPosition() === 'both'), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showTopPaginator" }] : /* istanbul ignore next */ []));
showBottomPaginator = computed(() => this.paginator() && (this.paginatorPosition() === 'bottom' || this.paginatorPosition() === 'both'), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showBottomPaginator" }] : /* istanbul ignore next */ []));
isListLayout = computed(() => this.layout() === 'list', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isListLayout" }] : /* istanbul ignore next */ []));
isGridLayout = computed(() => this.layout() === 'grid', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "isGridLayout" }] : /* istanbul ignore next */ []));
$isEmpty = computed(() => {
const data = this.filteredValue() || this.value();
return data == null || data.length == 0;
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "$isEmpty" }] : /* istanbul ignore next */ []));
showEmptyMessage = computed(() => this.$isEmpty() && !this.loading(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "showEmptyMessage" }] : /* istanbul ignore next */ []));
filterService = inject(FilterService);
constructor() {
super();
let layoutInit = false;
effect(() => {
const layout = this.layout();
if (layoutInit) {
untracked(() => this.onChangeLayout.emit({ layout }));
}
layoutInit = true;
});
effect(() => {
this.value();
untracked(() => {
this.updateTotalRecords();
if (!this.lazy() && this.hasFilter()) {
this.filter(this.filterValue());
}
});
});
let sortInit = false;
effect(() => {
this.sortField();
this.sortOrder();
if (sortInit) {
untracked(() => this.sort());
}
sortInit = true;
});
}
onInit() {
if (this.lazy() && this.lazyLoadOnInit()) {
this.onLazyLoad.emit(this.createLazyLoadMetadata());
}
this.initialized = true;
}
updateTotalRecords() {
if (!this.lazy()) {
this.totalRecords.set(this.value()?.length ?? 0);
}
}
paginate(event) {
this.first.set(event.first);
this.rows.set(event.rows);
if (this.lazy()) {
this.onLazyLoad.emit(this.createLazyLoadMetadata());
}
this.onPage.emit({
first: this.first(),
rows: this.rows()
});
}
sort() {
this.first.set(0);
if (this.lazy()) {
this.onLazyLoad.emit(this.createLazyLoadMetadata());
}
else if (this.value()) {
const sorted = [...this.value()].sort((data1, data2) => {
let value1 = resolveFieldData(data1, this.sortField());
let value2 = resolveFieldData(data2, this.sortField());
let result;
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;
});
this.value.set(sorted);
if (this.hasFilter()) {
this.filter(this.filterValue());
}
}
this.onSort.emit({
sortField: this.sortField(),
sortOrder: this.sortOrder()
});
}
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.set(filter);
const val = this.value();
if (val && val.length) {
let searchFields = this.filterBy().split(',');
const filtered = this.filterService.filter(val, searchFields, filter, filterMatchMode, this.filterLocale());
if (filtered.length === val.length) {
this.filteredValue.set(null);
}
else {
this.filteredValue.set(filtered);
}
if (this.paginator()) {
this.first.set(0);
this.totalRecords.set(this.filteredValue() ? this.filteredValue().length : val.length);
}
this.cd.markForCheck();
}
}
hasFilter() {
const fv = this.filterValue();
return fv && fv.trim().length > 0;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DataView, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DataView, isStandalone: true, selector: "p-dataview, p-data-view", inputs: { paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, pageLinks: { classPropertyName: "pageLinks", publicName: "pageLinks", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, paginatorStyleClass: { classPropertyName: "paginatorStyleClass", publicName: "paginatorStyleClass", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowPaginator: { classPropertyName: "alwaysShowPaginator", publicName: "alwaysShowPaginator", isSignal: true, isRequired: false, transformFunction: null }, paginatorDropdownAppendTo: { classPropertyName: "paginatorDropdownAppendTo", publicName: "paginatorDropdownAppendTo", isSignal: true, isRequired: false, transformFunction: null }, paginatorDropdownScrollHeight: { classPropertyName: "paginatorDropdownScrollHeight", publicName: "paginatorDropdownScrollHeight", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, showJumpToPageDropdown: { classPropertyName: "showJumpToPageDropdown", publicName: "showJumpToPageDropdown", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastIcon: { classPropertyName: "showFirstLastIcon", publicName: "showFirstLastIcon", isSignal: true, isRequired: false, transformFunction: null }, showPageLinks: { classPropertyName: "showPageLinks", publicName: "showPageLinks", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadOnInit: { classPropertyName: "lazyLoadOnInit", publicName: "lazyLoadOnInit", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, gridStyleClass: { classPropertyName: "gridStyleClass", publicName: "gridStyleClass", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rows: "rowsChange", totalRecords: "totalRecordsChange", first: "firstChange", value: "valueChange", onLazyLoad: "onLazyLoad", onPage: "onPage", onSort: "onSort", onChangeLayout: "onChangeLayout" }, host: { properties: { "class": "cx('root')" } }, providers: [DataViewStyle, { provide: DATAVIEW_INSTANCE, useExisting: DataView }, { provide: PARENT_INSTANCE, useExisting: DataView }], queries: [{ propertyName: "listTemplate", first: true, predicate: ["list"], isSignal: true }, { propertyName: "gridTemplate", first: true, predicate: ["grid"], isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "emptymessageTemplate", first: true, predicate: ["emptymessage"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }, { propertyName: "paginatorleft", first: true, predicate: ["paginatorleft"], isSignal: true }, { propertyName: "paginatorright", first: true, predicate: ["paginatorright"], isSignal: true }, { propertyName: "paginatordropdownitem", first: true, predicate: ["paginatordropdownitem"], isSignal: true }, { propertyName: "loadingicon", first: true, predicate: ["loadingicon"], isSignal: true }, { propertyName: "listicon", first: true, predicate: ["listicon"], isSignal: true }, { propertyName: "gridicon", first: true, predicate: ["gridicon"], isSignal: true }, { propertyName: "header", first: true, predicate: Header, isSignal: true }, { propertyName: "footer", first: true, predicate: Footer, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
@if (loading()) {
<div [pBind]="ptm('loading')" [class]="cx('loading')">
<div [pBind]="ptm('loadingOverlay')" [class]="cx('loadingOverlay')">
@if (loadingIcon()) {
<i [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon())"></i>
} @else {
<ng-container>
<svg [pBind]="ptm('loadingIcon')" data-p-icon="spinner" [class]="cx('loadingIcon')" [spin]="true" />
<ng-template *ngTemplateOutlet="loadingicon()"></ng-template>
</ng-container>
}
</div>
</div>
}
@if (showHeader()) {
<div [pBind]="ptm('header')" [class]="cx('header')">
<ng-content select="p-header" />
<ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
</div>
}
@if (showTopPaginator()) {
<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()"
[class]="cn(cx('pcPaginator', { position: 'top' }), paginatorStyleClass())"
[pt]="ptm('pcPaginator')"
[unstyled]="unstyled()"
></p-paginator>
}
<div [pBind]="ptm('content')" [class]="cx('content')">
@if (isListLayout()) {
<ng-container
*ngTemplateOutlet="
listTemplate();
context: {
$implicit: displayedItems()
}
"
></ng-container>
}
@if (isGridLayout()) {
<ng-container
*ngTemplateOutlet="
gridTemplate();
context: {
$implicit: displayedItems()
}
"
></ng-container>
}
@if (showEmptyMessage()) {
<div [pBind]="ptm('emptyMessage')" [class]="cx('emptyMessage')">
@if (!emptymessageTemplate()) {
{{ emptyMessageLabel() }}
} @else {
<ng-container *ngTemplateOutlet="emptymessageTemplate()"></ng-container>
}
</div>
}
</div>
@if (showBottomPaginator()) {
<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()"
[class]="cn(cx('pcPaginator', { position: 'bottom' }), paginatorStyleClass())"
[pt]="ptm('pcPaginator')"
[unstyled]="unstyled()"
></p-paginator>
}
@if (showFooter()) {
<div [pBind]="ptm('footer')" [class]="cx('footer')">
<ng-content select="p-footer" />
<ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
</div>
}
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "alwaysShow", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "first", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "appendTo"], outputs: ["rowsChange", "firstChange", "onPageChange"] }, { kind: "component", type: Spinner, selector: "svg[data-p-icon=\"spinner\"]" }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DataView, decorators: [{
type: Component,
args: [{
selector: 'p-dataview, p-data-view',
standalone: true,
imports: [NgTemplateOutlet, PaginatorModule, Spinner, Bind],
template: `
@if (loading()) {
<div [pBind]="ptm('loading')" [class]="cx('loading')">
<div [pBind]="ptm('loadingOverlay')" [class]="cx('loadingOverlay')">
@if (loadingIcon()) {
<i [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon())"></i>
} @else {
<ng-container>
<svg [pBind]="ptm('loadingIcon')" data-p-icon="spinner" [class]="cx('loadingIcon')" [spin]="true" />
<ng-template *ngTemplateOutlet="loadingicon()"></ng-template>
</ng-container>
}
</div>
</div>
}
@if (showHeader()) {
<div [pBind]="ptm('header')" [class]="cx('header')">
<ng-content select="p-header" />
<ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
</div>
}
@if (showTopPaginator()) {
<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()"
[class]="cn(cx('pcPaginator', { position: 'top' }), paginatorStyleClass())"
[pt]="ptm('pcPaginator')"
[unstyled]="unstyled()"
></p-paginator>
}
<div [pBind]="ptm('content')" [class]="cx('content')">
@if (isListLayout()) {
<ng-container
*ngTemplateOutlet="
listTemplate();
context: {
$implicit: displayedItems()
}
"
></ng-container>
}
@if (isGridLayout()) {
<ng-container
*ngTemplateOutlet="
gridTemplate();
context: {
$implicit: displayedItems()
}
"
></ng-container>
}
@if (showEmptyMessage()) {
<div [pBind]="ptm('emptyMessage')" [class]="cx('emptyMessage')">
@if (!emptymessageTemplate()) {
{{ emptyMessageLabel() }}
} @else {
<ng-container *ngTemplateOutlet="emptymessageTemplate()"></ng-container>
}
</div>
}
</div>
@if (showBottomPaginator()) {
<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()"
[class]="cn(cx('pcPaginator', { position: 'bottom' }), paginatorStyleClass())"
[pt]="ptm('pcPaginator')"
[unstyled]="unstyled()"
></p-paginator>
}
@if (showFooter()) {
<div [pBind]="ptm('footer')" [class]="cx('footer')">
<ng-content select="p-footer" />
<ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
</div>
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [DataViewStyle, { provide: DATAVIEW_INSTANCE, useExisting: DataView }, { provide: PARENT_INSTANCE, useExisting: DataView }],
host: {
'[class]': "cx('root')"
},
hostDirectives: [Bind]
}]
}], ctorParameters: () => [], propDecorators: { paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }, { type: i0.Output, args: ["totalRecordsChange"] }], pageLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinks", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], paginatorStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorStyleClass", required: false }] }], alwaysShowPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShowPaginator", required: false }] }], paginatorDropdownAppendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorDropdownAppendTo", required: false }] }], paginatorDropdownScrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorDropdownScrollHeight", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], showJumpToPageDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "showJumpToPageDropdown", required: false }] }], showFirstLastIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastIcon", required: false }] }], showPageLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageLinks", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], lazyLoadOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoadOnInit", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], gridStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridStyleClass", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onPage: [{ type: i0.Output, args: ["onPage"] }], onSort: [{ type: i0.Output, args: ["onSort"] }], onChangeLayout: [{ type: i0.Output, args: ["onChangeLayout"] }], listTemplate: [{ type: i0.ContentChild, args: ['list', { ...{ descendants: false }, isSignal: true }] }], gridTemplate: [{ type: i0.ContentChild, args: ['grid', { ...{ descendants: false }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], emptymessageTemplate: [{ type: i0.ContentChild, args: ['emptymessage', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], paginatorleft: [{ type: i0.ContentChild, args: ['paginatorleft', { ...{ descendants: false }, isSignal: true }] }], paginatorright: [{ type: i0.ContentChild, args: ['paginatorright', { ...{ descendants: false }, isSignal: true }] }], paginatordropdownitem: [{ type: i0.ContentChild, args: ['paginatordropdownitem', { ...{ descendants: false }, isSignal: true }] }], loadingicon: [{ type: i0.ContentChild, args: ['loadingicon', { ...{ descendants: false }, isSignal: true }] }], listicon: [{ type: i0.ContentChild, args: ['listicon', { ...{ descendants: false }, isSignal: true }] }], gridicon: [{ type: i0.ContentChild, args: ['gridicon', { ...{ descendants: false }, isSignal: true }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Header), { ...{ descendants: false }, isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Footer), { ...{ descendants: false }, isSignal: true }] }] } });
class DataViewModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DataViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: DataViewModule, imports: [DataView], exports: [DataView] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DataViewModule, imports: [DataView] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DataViewModule, decorators: [{
type: NgModule,
args: [{
imports: [DataView],
exports: [DataView]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DataView, DataViewClasses, DataViewModule, DataViewStyle };
//# sourceMappingURL=primeng-dataview.mjs.map