@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-dataview.mjs

@@ -0,0 +1,774 @@
+export * from '@wawjs/ngx-prime/types/dataview';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, input, booleanAttribute, numberAttribute, output, contentChild, effect, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { resolveFieldData } from '@wawjs/css-prime-utils';
+import { Header, Footer, TranslationKeys, FilterService, SharedModule } from '@wawjs/ngx-prime/api';
+import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import * as i1 from '@wawjs/ngx-prime/bind';
+import { Bind } from '@wawjs/ngx-prime/bind';
+import { SpinnerIcon } from '@wawjs/ngx-prime/icons';
+import * as i3 from '@wawjs/ngx-prime/paginator';
+import { PaginatorModule } from '@wawjs/ngx-prime/paginator';
+import { style } from '@wawjs/css-prime-styles/dataview';
+import { BaseStyle } from '@wawjs/ngx-prime/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';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataViewStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataViewStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataViewStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * DataView displays data in grid or list layout with pagination and sorting features.
+ *
+ * [Live Demo](https://www.ngx-prime.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 = input(undefined, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Number of total records, defaults to length of value when not defined.
+     * @group Props
+     */
+    totalRecords = input(undefined, { ...(ngDevMode ? { debugName: "totalRecords" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * 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(undefined, { ...(ngDevMode ? { debugName: "showCurrentPageReport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to display a dropdown to navigate to any page.
+     * @group Props
+     */
+    showJumpToPageDropdown = input(undefined, { ...(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 component.
+     * @deprecated since v20.0.0, use `class` instead.
+     * @group Props
+     */
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* 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(undefined, { ...(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 = input(0, { ...(ngDevMode ? { debugName: "first" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * 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(undefined, { ...(ngDevMode ? { debugName: "sortOrder" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * An array of objects to display.
+     * @group Props
+     */
+    value = input(/* @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', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Template for grid layout.
+     * @param {DataViewGridTemplateContext} context - grid template context.
+     * @group Templates
+     */
+    gridTemplate = contentChild.required('grid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Template for the header section.
+     * @group Templates
+     */
+    headerTemplate;
+    /**
+     * Template for the empty message section.
+     * @group Templates
+     */
+    emptymessageTemplate = contentChild.required('emptymessage', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptymessageTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Template for the footer section.
+     * @group Templates
+     */
+    footerTemplate;
+    /**
+     * Template for the left side of paginator.
+     * @param {DataViewPaginatorLeftTemplateContext} context - paginator left template context.
+     * @group Templates
+     */
+    paginatorleft = contentChild.required('paginatorleft', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paginatorleft" }] : /* istanbul ignore next */ []));
+    /**
+     * Template for the right side of paginator.
+     * @param {DataViewPaginatorRightTemplateContext} context - paginator right template context.
+     * @group Templates
+     */
+    paginatorright = contentChild.required('paginatorright', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paginatorright" }] : /* istanbul ignore next */ []));
+    /**
+     * Template for items in paginator dropdown.
+     * @param {DataViewPaginatorDropdownItemTemplateContext} context - paginator dropdown item template context.
+     * @group Templates
+     */
+    paginatordropdownitem = contentChild.required('paginatordropdownitem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paginatordropdownitem" }] : /* istanbul ignore next */ []));
+    /**
+     * Template for loading icon.
+     * @group Templates
+     */
+    loadingicon = contentChild.required('loadingicon', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingicon" }] : /* istanbul ignore next */ []));
+    /**
+     * Template for list icon.
+     * @group Templates
+     */
+    listicon = contentChild.required('listicon', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listicon" }] : /* istanbul ignore next */ []));
+    /**
+     * Template for grid icon.
+     * @group Templates
+     */
+    gridicon = contentChild.required('gridicon', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridicon" }] : /* istanbul ignore next */ []));
+    header = contentChild(Header, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    footer = contentChild(Footer, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
+    filteredValue;
+    filterValue;
+    initialized;
+    _layout = 'list';
+    translationSubscription;
+    _componentStyle = inject(DataViewStyle);
+    _first = 0;
+    _rows;
+    _totalRecords;
+    isFirstLayoutChange = true;
+    get emptyMessageLabel() {
+        return this.emptyMessage() || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
+    }
+    filterService = inject(FilterService);
+    constructor() {
+        super();
+        effect(() => {
+            const layout = this.layout();
+            if (!this.isFirstLayoutChange) {
+                this.onChangeLayout.emit({ layout });
+            }
+            this.isFirstLayoutChange = false;
+        });
+        effect(() => {
+            const first = this.first();
+            this._first = first;
+        });
+        effect(() => {
+            const rows = this.rows();
+            this._rows = rows;
+        });
+        effect(() => {
+            const totalRecords = this.totalRecords();
+            this._totalRecords = totalRecords;
+        });
+        effect(() => {
+            this.value();
+            this.updateTotalRecords();
+            if (!this.lazy() && this.hasFilter()) {
+                this.filter(this.filterValue);
+            }
+        });
+        effect(() => {
+            this.sortField();
+            this.sortOrder();
+            //avoid triggering lazy load prior to lazy initialization at onInit
+            if (!this.lazy() || this.initialized) {
+                this.sort();
+            }
+        });
+    }
+    onInit() {
+        if (this.lazy() && this.lazyLoadOnInit()) {
+            this.onLazyLoad.emit(this.createLazyLoadMetadata());
+        }
+        this.translationSubscription = this.config.translationObserver.subscribe(() => {
+            this.cd.markForCheck();
+        });
+        this.initialized = true;
+    }
+    onAfterViewInit() { }
+    updateTotalRecords() {
+        const value = this.value();
+        this._totalRecords = this.lazy() ? this._totalRecords : value ? value.length : 0;
+    }
+    paginate(event) {
+        this._first = event.first ?? 0;
+        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;
+        const value = this.value();
+        if (this.lazy()) {
+            this.onLazyLoad.emit(this.createLazyLoadMetadata());
+        }
+        else if (value) {
+            const sortField = this.sortField();
+            value.sort((data1, data2) => {
+                let value1 = resolveFieldData(data1, sortField);
+                let value2 = resolveFieldData(data2, 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;
+            });
+            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;
+        const value = this.value();
+        if (value && value.length) {
+            let searchFields = this.filterBy().split(',');
+            this.filteredValue = this.filterService.filter(value, searchFields, filter, filterMatchMode, this.filterLocale());
+            if (this.filteredValue.length === value.length) {
+                this.filteredValue = null;
+            }
+            if (this.paginator()) {
+                this._first = 0;
+                this._totalRecords = this.filteredValue ? this.filteredValue.length : value ? value.length : 0;
+            }
+            this.cd.markForCheck();
+        }
+    }
+    hasFilter() {
+        return this.filterValue && this.filterValue.trim().length > 0;
+    }
+    onDestroy() {
+        if (this.translationSubscription) {
+            this.translationSubscription.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DataView, isStandalone: true, selector: "p-dataView, 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 }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", 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: { onLazyLoad: "onLazyLoad", onPage: "onPage", onSort: "onSort", onChangeLayout: "onChangeLayout" }, host: { properties: { "class": "cn(cx('root'), styleClass())" } }, providers: [DataViewStyle, { provide: DATAVIEW_INSTANCE, useExisting: DataView }, { provide: PARENT_INSTANCE, useExisting: DataView }], queries: [{ propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "gridTemplate", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "emptymessageTemplate", first: true, predicate: ["emptymessage"], descendants: true, isSignal: true }, { propertyName: "paginatorleft", first: true, predicate: ["paginatorleft"], descendants: true, isSignal: true }, { propertyName: "paginatorright", first: true, predicate: ["paginatorright"], descendants: true, isSignal: true }, { propertyName: "paginatordropdownitem", first: true, predicate: ["paginatordropdownitem"], descendants: true, isSignal: true }, { propertyName: "loadingicon", first: true, predicate: ["loadingicon"], descendants: true, isSignal: true }, { propertyName: "listicon", first: true, predicate: ["listicon"], descendants: true, isSignal: true }, { propertyName: "gridicon", first: true, predicate: ["gridicon"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: Header, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: Footer, descendants: true, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: 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" [spin]="true" [class]="cx('loadingIcon')" />
+                            <ng-template *ngTemplateOutlet="loadingicon()"></ng-template>
+                        </ng-container>
+                    }
+                </div>
+            </div>
+        }
+        @if (header() || headerTemplate) {
+            <div [pBind]="ptm('header')" [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())"
+                [pt]="ptm('pcPaginator')"
+                [unstyled]="unstyled()"
+            ></p-paginator>
+        }
+        <div [pBind]="ptm('content')" [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 [pBind]="ptm('emptyMessage')" [class]="cx('emptyMessage')">
+                    @if (!emptymessageTemplate()) {
+                        {{ emptyMessageLabel }}
+                    } @else {
+                        <ng-template [ngTemplateOutlet]="empty"></ng-template>
+                    }
+                    <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())"
+                [pt]="ptm('pcPaginator')"
+                [unstyled]="unstyled()"
+            ></p-paginator>
+        }
+        @if (footer() || footerTemplate) {
+            <div [pBind]="ptm('footer')" [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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i3.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: ["rowsChange", "onPageChange"] }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataView, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-dataView, p-dataview, p-data-view',
+                    standalone: true,
+                    imports: [CommonModule, PaginatorModule, SpinnerIcon, SharedModule, 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" [spin]="true" [class]="cx('loadingIcon')" />
+                            <ng-template *ngTemplateOutlet="loadingicon()"></ng-template>
+                        </ng-container>
+                    }
+                </div>
+            </div>
+        }
+        @if (header() || headerTemplate) {
+            <div [pBind]="ptm('header')" [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())"
+                [pt]="ptm('pcPaginator')"
+                [unstyled]="unstyled()"
+            ></p-paginator>
+        }
+        <div [pBind]="ptm('content')" [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 [pBind]="ptm('emptyMessage')" [class]="cx('emptyMessage')">
+                    @if (!emptymessageTemplate()) {
+                        {{ emptyMessageLabel }}
+                    } @else {
+                        <ng-template [ngTemplateOutlet]="empty"></ng-template>
+                    }
+                    <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())"
+                [pt]="ptm('pcPaginator')"
+                [unstyled]="unstyled()"
+            ></p-paginator>
+        }
+        @if (footer() || footerTemplate) {
+            <div [pBind]="ptm('footer')" [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, { provide: DATAVIEW_INSTANCE, useExisting: DataView }, { provide: PARENT_INSTANCE, useExisting: DataView }],
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass())"
+                    },
+                    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 }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], 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 }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", 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 }] }], 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 }] }], 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', { isSignal: true }] }], gridTemplate: [{ type: i0.ContentChild, args: ['grid', { isSignal: true }] }], headerTemplate: [{
+                type: ContentChild,
+                args: ['header']
+            }], emptymessageTemplate: [{ type: i0.ContentChild, args: ['emptymessage', { isSignal: true }] }], footerTemplate: [{
+                type: ContentChild,
+                args: ['footer']
+            }], paginatorleft: [{ type: i0.ContentChild, args: ['paginatorleft', { isSignal: true }] }], paginatorright: [{ type: i0.ContentChild, args: ['paginatorright', { isSignal: true }] }], paginatordropdownitem: [{ type: i0.ContentChild, args: ['paginatordropdownitem', { isSignal: true }] }], loadingicon: [{ type: i0.ContentChild, args: ['loadingicon', { isSignal: true }] }], listicon: [{ type: i0.ContentChild, args: ['listicon', { isSignal: true }] }], gridicon: [{ type: i0.ContentChild, args: ['gridicon', { isSignal: true }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Header), { isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Footer), { isSignal: true }] }] } });
+class DataViewModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: DataViewModule, imports: [DataView, SharedModule], exports: [DataView, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DataViewModule, imports: [DataView, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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=wawjs-ngx-prime-dataview.mjs.map