import * as i0 from '@angular/core'; import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ContentChildren, NgModule } from '@angular/core'; import * as i3 from '@angular/common'; import { CommonModule } from '@angular/common'; import { ObjectUtils } from 'primeng/utils'; import * as i1 from 'primeng/api'; import { TranslationKeys, Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api'; import * as i2 from 'primeng/paginator'; import { PaginatorModule } from 'primeng/paginator'; class DataView { constructor(el, cd, filterService, config) { this.el = el; this.cd = cd; this.filterService = filterService; this.config = config; this.pageLinks = 5; this.paginatorPosition = 'bottom'; this.alwaysShowPaginator = true; this.paginatorDropdownScrollHeight = '200px'; this.currentPageReportTemplate = '{currentPage} of {totalPages}'; this.showFirstLastIcon = true; this.showPageLinks = true; this.emptyMessage = ''; this.onLazyLoad = new EventEmitter(); this.trackBy = (index, item) => item; this.loadingIcon = 'pi pi-spinner'; this.first = 0; this.onPage = new EventEmitter(); this.onSort = new EventEmitter(); this.onChangeLayout = new EventEmitter(); this._layout = 'list'; } get layout() { return this._layout; } set layout(layout) { this._layout = layout; if (this.initialized) { this.changeLayout(layout); } } ngOnInit() { if (this.lazy) { this.onLazyLoad.emit(this.createLazyLoadMetadata()); } this.translationSubscription = this.config.translationObserver.subscribe(() => { this.cd.markForCheck(); }); this.initialized = true; } ngOnChanges(simpleChanges) { 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(); } } } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'listItem': this.listItemTemplate = item.template; break; case 'gridItem': this.gridItemTemplate = item.template; break; case 'paginatorleft': this.paginatorLeftTemplate = item.template; break; case 'paginatorright': this.paginatorRightTemplate = item.template; break; case 'paginatordropdownitem': this.paginatorDropdownItemTemplate = item.template; break; case 'empty': this.emptyMessageTemplate = item.template; break; case 'header': this.headerTemplate = item.template; break; case 'footer': this.footerTemplate = item.template; break; } }); this.updateItemTemplate(); } updateItemTemplate() { switch (this.layout) { case 'list': this.itemTemplate = this.listItemTemplate; break; case 'grid': this.itemTemplate = this.gridItemTemplate; break; } } changeLayout(layout) { this._layout = layout; this.onChangeLayout.emit({ layout: this.layout }); this.updateItemTemplate(); this.cd.markForCheck(); } 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 = ObjectUtils.resolveFieldData(data1, this.sortField); let value2 = ObjectUtils.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]; } get emptyMessageLabel() { return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE); } 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(); } } } DataView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DataView, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FilterService }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component }); DataView.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: DataView, selector: "p-dataView", inputs: { paginator: "paginator", rows: "rows", totalRecords: "totalRecords", pageLinks: "pageLinks", rowsPerPageOptions: "rowsPerPageOptions", paginatorPosition: "paginatorPosition", alwaysShowPaginator: "alwaysShowPaginator", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: "showCurrentPageReport", showJumpToPageDropdown: "showJumpToPageDropdown", showFirstLastIcon: "showFirstLastIcon", showPageLinks: "showPageLinks", lazy: "lazy", emptyMessage: "emptyMessage", style: "style", styleClass: "styleClass", trackBy: "trackBy", filterBy: "filterBy", filterLocale: "filterLocale", loading: "loading", loadingIcon: "loadingIcon", first: "first", sortField: "sortField", sortOrder: "sortOrder", value: "value", layout: "layout" }, outputs: { onLazyLoad: "onLazyLoad", onPage: "onPage", onSort: "onSort", onChangeLayout: "onChangeLayout" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "header", first: true, predicate: Header, descendants: true }, { propertyName: "footer", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesOnChanges: true, ngImport: i0, template: `
{{emptyMessageLabel}}
`, isInline: true, styles: [".p-dataview{position:relative}.p-dataview .p-dataview-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}\n"], components: [{ type: i2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "slice": i3.SlicePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DataView, decorators: [{ type: Component, args: [{ selector: 'p-dataView', template: `
{{emptyMessageLabel}}
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' }, styles: [".p-dataview{position:relative}.p-dataview .p-dataview-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}\n"] }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FilterService }, { type: i1.PrimeNGConfig }]; }, propDecorators: { paginator: [{ type: Input }], rows: [{ type: Input }], totalRecords: [{ type: Input }], pageLinks: [{ type: Input }], rowsPerPageOptions: [{ type: Input }], paginatorPosition: [{ type: Input }], alwaysShowPaginator: [{ type: Input }], paginatorDropdownAppendTo: [{ type: Input }], paginatorDropdownScrollHeight: [{ type: Input }], currentPageReportTemplate: [{ type: Input }], showCurrentPageReport: [{ type: Input }], showJumpToPageDropdown: [{ type: Input }], showFirstLastIcon: [{ type: Input }], showPageLinks: [{ type: Input }], lazy: [{ type: Input }], emptyMessage: [{ type: Input }], onLazyLoad: [{ type: Output }], style: [{ type: Input }], styleClass: [{ type: Input }], trackBy: [{ type: Input }], filterBy: [{ type: Input }], filterLocale: [{ type: Input }], loading: [{ type: Input }], loadingIcon: [{ type: Input }], first: [{ type: Input }], sortField: [{ type: Input }], sortOrder: [{ type: Input }], value: [{ type: Input }], onPage: [{ type: Output }], onSort: [{ type: Output }], onChangeLayout: [{ type: Output }], header: [{ type: ContentChild, args: [Header] }], footer: [{ type: ContentChild, args: [Footer] }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }], layout: [{ type: Input }] } }); class DataViewLayoutOptions { constructor(dv) { this.dv = dv; } changeLayout(event, layout) { this.dv.changeLayout(layout); event.preventDefault(); } } DataViewLayoutOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DataViewLayoutOptions, deps: [{ token: DataView }], target: i0.ɵɵFactoryTarget.Component }); DataViewLayoutOptions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: DataViewLayoutOptions, selector: "p-dataViewLayoutOptions", inputs: { style: "style", styleClass: "styleClass" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
`, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DataViewLayoutOptions, decorators: [{ type: Component, args: [{ selector: 'p-dataViewLayoutOptions', template: `
`, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' } }] }], ctorParameters: function () { return [{ type: DataView }]; }, propDecorators: { style: [{ type: Input }], styleClass: [{ type: Input }] } }); class DataViewModule { } DataViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DataViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); DataViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DataViewModule, declarations: [DataView, DataViewLayoutOptions], imports: [CommonModule, SharedModule, PaginatorModule], exports: [DataView, SharedModule, DataViewLayoutOptions] }); DataViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DataViewModule, imports: [[CommonModule, SharedModule, PaginatorModule], SharedModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DataViewModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, SharedModule, PaginatorModule], exports: [DataView, SharedModule, DataViewLayoutOptions], declarations: [DataView, DataViewLayoutOptions] }] }] }); /** * Generated bundle index. Do not edit. */ export { DataView, DataViewLayoutOptions, DataViewModule };