cax-design-system 1.0.0

package/fesm2022/cax-design-system-dataview.mjs

@@ -0,0 +1,730 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ContentChildren, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { ObjectUtils } from 'cax-design-system/utils';
+import * as i1 from 'cax-design-system/api';
+import { TranslationKeys, Header, Footer, CaxTemplate, SharedModule } from 'cax-design-system/api';
+import { PaginatorModule } from 'cax-design-system/paginator';
+import { SpinnerIcon } from 'cax-design-system/icons/spinner';
+import { ThLargeIcon } from 'cax-design-system/icons/thlarge';
+import { BarsIcon } from 'cax-design-system/icons/bars';
+
+/**
+ * DataView displays data in grid or list layout with pagination and sorting features.
+ * @group Components
+ */
+class DataView {
+    el;
+    cd;
+    filterService;
+    config;
+    /**
+     * When specified as true, enables the pagination.
+     * @group Props
+     */
+    paginator;
+    /**
+     * Number of rows to display per page.
+     * @group Props
+     */
+    rows;
+    /**
+     * Number of total records, defaults to length of value when not defined.
+     * @group Props
+     */
+    totalRecords;
+    /**
+     * Number of page links to display in paginator.
+     * @group Props
+     */
+    pageLinks = 5;
+    /**
+     * Array of integer/object values to display inside rows per page dropdown of paginator
+     * @group Props
+     */
+    rowsPerPageOptions;
+    /**
+     * Position of the paginator.
+     * @group Props
+     */
+    paginatorPosition = 'bottom';
+    /**
+     * Custom style class for paginator
+     * @group Props
+     */
+    paginatorStyleClass;
+    /**
+     * Whether to show it even there is only one page.
+     * @group Props
+     */
+    alwaysShowPaginator = true;
+    /**
+     * Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @group Props
+     */
+    paginatorDropdownAppendTo;
+    /**
+     * Paginator dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
+     * @group Props
+     */
+    paginatorDropdownScrollHeight = '200px';
+    /**
+     * Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
+     * @group Props
+     */
+    currentPageReportTemplate = '{currentPage} of {totalPages}';
+    /**
+     * Whether to display current page report.
+     * @group Props
+     */
+    showCurrentPageReport;
+    /**
+     * Whether to display a dropdown to navigate to any page.
+     * @group Props
+     */
+    showJumpToPageDropdown;
+    /**
+     * When enabled, icons are displayed on paginator to go first and last page.
+     * @group Props
+     */
+    showFirstLastIcon = true;
+    /**
+     * Whether to show page links.
+     * @group Props
+     */
+    showPageLinks = true;
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @group Props
+     */
+    lazy;
+    /**
+     * Whether to call lazy loading on initialization.
+     * @group Props
+     */
+    lazyLoadOnInit = true;
+    /**
+     * Text to display when there is no data. Defaults to global value in i18n translation configuration.
+     * @group Props
+     */
+    emptyMessage = '';
+    /**
+     * Inline style of the component.
+     * @group Props
+     */
+    style;
+    /**
+     * Style class of the component.
+     * @group Props
+     */
+    styleClass;
+    /**
+     * Style class of the grid.
+     * @group Props
+     */
+    gridStyleClass = '';
+    /**
+     * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
+     * @group Props
+     */
+    trackBy = (index, item) => item;
+    /**
+     * Comma separated list of fields in the object graph to search against.
+     * @group Props
+     */
+    filterBy;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @group Props
+     */
+    filterLocale;
+    /**
+     * Displays a loader to indicate data load is in progress.
+     * @group Props
+     */
+    loading;
+    /**
+     * The icon to show while indicating data load is in progress.
+     * @group Props
+     */
+    loadingIcon;
+    /**
+     * Index of the first row to be displayed.
+     * @group Props
+     */
+    first = 0;
+    /**
+     * Property name of data to use in sorting by default.
+     * @group Props
+     */
+    sortField;
+    /**
+     * Order to sort the data by default.
+     * @group Props
+     */
+    sortOrder;
+    /**
+     * An array of objects to display.
+     * @group Props
+     */
+    value;
+    /**
+     * Defines the layout mode.
+     * @group Props
+     */
+    get layout() {
+        return this._layout;
+    }
+    set layout(layout) {
+        this._layout = layout;
+        if (this.initialized) {
+            this.changeLayout(layout);
+        }
+    }
+    /**
+     * Callback to invoke when paging, sorting or filtering happens in lazy mode.
+     * @param {DataViewLazyLoadEvent} event - Custom lazy load event.
+     * @group Emits
+     */
+    onLazyLoad = new EventEmitter();
+    /**
+     * Callback to invoke when pagination occurs.
+     * @param {DataViewPageEvent} event - Custom page event.
+     * @group Emits
+     */
+    onPage = new EventEmitter();
+    /**
+     * Callback to invoke when sorting occurs.
+     * @param {DataViewSortEvent} event - Custom sort event.
+     * @group Emits
+     */
+    onSort = new EventEmitter();
+    /**
+     * Callback to invoke when changing layout.
+     * @param {DataViewLayoutChangeEvent} event - Custom layout change event.
+     * @group Emits
+     */
+    onChangeLayout = new EventEmitter();
+    header;
+    footer;
+    templates;
+    _value;
+    listTemplate;
+    gridTemplate;
+    itemTemplate;
+    headerTemplate;
+    emptyMessageTemplate;
+    footerTemplate;
+    paginatorLeftTemplate;
+    paginatorRightTemplate;
+    paginatorDropdownItemTemplate;
+    loadingIconTemplate;
+    listIconTemplate;
+    gridIconTemplate;
+    filteredValue;
+    filterValue;
+    initialized;
+    _layout = 'list';
+    translationSubscription;
+    get emptyMessageLabel() {
+        return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
+    }
+    constructor(el, cd, filterService, config) {
+        this.el = el;
+        this.cd = cd;
+        this.filterService = filterService;
+        this.config = config;
+    }
+    ngOnInit() {
+        if (this.lazy && this.lazyLoadOnInit) {
+            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':
+                case 'list':
+                    this.listTemplate = item.template;
+                    break;
+                case 'gridItem':
+                case 'grid':
+                    this.gridTemplate = 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;
+                case 'loadingicon':
+                    this.loadingIconTemplate = item.template;
+                    break;
+                case 'listicon':
+                    this.listIconTemplate = item.template;
+                    break;
+                case 'gridicon':
+                    this.gridIconTemplate = item.template;
+                    break;
+            }
+        });
+        this.updateItemTemplate();
+    }
+    updateItemTemplate() {
+        switch (this.layout) {
+            case 'list':
+                this.itemTemplate = this.listTemplate;
+                break;
+            case 'grid':
+                this.itemTemplate = this.gridTemplate;
+                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];
+    }
+    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();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DataView, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FilterService }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: DataView, selector: "p-dataView", inputs: { paginator: ["paginator", "paginator", booleanAttribute], rows: ["rows", "rows", numberAttribute], totalRecords: ["totalRecords", "totalRecords", numberAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], emptyMessage: "emptyMessage", style: "style", styleClass: "styleClass", gridStyleClass: "gridStyleClass", trackBy: "trackBy", filterBy: "filterBy", filterLocale: "filterLocale", loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", first: ["first", "first", numberAttribute], sortField: "sortField", sortOrder: ["sortOrder", "sortOrder", numberAttribute], value: "value", layout: "layout" }, outputs: { onLazyLoad: "onLazyLoad", onPage: "onPage", onSort: "onSort", onChangeLayout: "onChangeLayout" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "header", first: true, predicate: Header, descendants: true }, { propertyName: "footer", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], usesOnChanges: true, ngImport: i0, template: `
+        <div [ngClass]="{ 'p-dataview p-component': true, 'p-dataview-list': layout === 'list', 'p-dataview-grid': layout === 'grid' }" [ngStyle]="style" [class]="styleClass">
+            <div class="p-dataview-loading" *ngIf="loading">
+                <div class="p-dataview-loading-overlay p-component-overlay">
+                    <i *ngIf="loadingIcon" [class]="'p-dataview-loading-icon pi-spin ' + loadingIcon"></i>
+                    <ng-container *ngIf="!loadingIcon">
+                        <SpinnerIcon *ngIf="!loadingIconTemplate" [spin]="true" [styleClass]="'p-dataview-loading-icon'" />
+                        <ng-template *ngTemplateOutlet="loadingIconTemplate"></ng-template>
+                    </ng-container>
+                </div>
+            </div>
+            <div class="p-dataview-header" *ngIf="header || headerTemplate">
+                <ng-content select="cax-header"></ng-content>
+                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+            </div>
+            <p-paginator
+                [rows]="rows"
+                [first]="first"
+                [totalRecords]="totalRecords"
+                [pageLinkSize]="pageLinks"
+                [alwaysShow]="alwaysShowPaginator"
+                (onPageChange)="paginate($event)"
+                styleClass="p-paginator-top"
+                [rowsPerPageOptions]="rowsPerPageOptions"
+                *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
+                [dropdownAppendTo]="paginatorDropdownAppendTo"
+                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+                [templateLeft]="paginatorLeftTemplate"
+                [templateRight]="paginatorRightTemplate"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatorDropdownItemTemplate"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+                [styleClass]="paginatorStyleClass"
+            ></p-paginator>
+
+            <div class="p-dataview-content">
+                <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: paginator ? (filteredValue || value | slice: (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value }"></ng-container>
+
+                <div *ngIf="isEmpty() && !loading">
+                    <div class="p-dataview-emptymessage">
+                        <ng-container *ngIf="!emptyMessageTemplate; else empty">
+                            {{ emptyMessageLabel }}
+                        </ng-container>
+                        <ng-container #empty *ngTemplateOutlet="emptyMessageTemplate"></ng-container>
+                    </div>
+                </div>
+            </div>
+            <p-paginator
+                [rows]="rows"
+                [first]="first"
+                [totalRecords]="totalRecords"
+                [pageLinkSize]="pageLinks"
+                [alwaysShow]="alwaysShowPaginator"
+                (onPageChange)="paginate($event)"
+                styleClass="p-paginator-bottom"
+                [rowsPerPageOptions]="rowsPerPageOptions"
+                *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
+                [dropdownAppendTo]="paginatorDropdownAppendTo"
+                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+                [templateLeft]="paginatorLeftTemplate"
+                [templateRight]="paginatorRightTemplate"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatorDropdownItemTemplate"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+                [styleClass]="paginatorStyleClass"
+            ></p-paginator>
+            <div class="p-dataview-footer" *ngIf="footer || footerTemplate">
+                <ng-content select="cax-footer"></ng-content>
+                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+            </div>
+        </div>
+    `, isInline: true, styles: ["@layer cax{.p-dataview{position:relative}.p-dataview .p-dataview-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => SpinnerIcon), selector: "SpinnerIcon" }, { kind: "pipe", type: i0.forwardRef(() => i2.SlicePipe), name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DataView, decorators: [{
+            type: Component,
+            args: [{ selector: 'p-dataView', template: `
+        <div [ngClass]="{ 'p-dataview p-component': true, 'p-dataview-list': layout === 'list', 'p-dataview-grid': layout === 'grid' }" [ngStyle]="style" [class]="styleClass">
+            <div class="p-dataview-loading" *ngIf="loading">
+                <div class="p-dataview-loading-overlay p-component-overlay">
+                    <i *ngIf="loadingIcon" [class]="'p-dataview-loading-icon pi-spin ' + loadingIcon"></i>
+                    <ng-container *ngIf="!loadingIcon">
+                        <SpinnerIcon *ngIf="!loadingIconTemplate" [spin]="true" [styleClass]="'p-dataview-loading-icon'" />
+                        <ng-template *ngTemplateOutlet="loadingIconTemplate"></ng-template>
+                    </ng-container>
+                </div>
+            </div>
+            <div class="p-dataview-header" *ngIf="header || headerTemplate">
+                <ng-content select="cax-header"></ng-content>
+                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+            </div>
+            <p-paginator
+                [rows]="rows"
+                [first]="first"
+                [totalRecords]="totalRecords"
+                [pageLinkSize]="pageLinks"
+                [alwaysShow]="alwaysShowPaginator"
+                (onPageChange)="paginate($event)"
+                styleClass="p-paginator-top"
+                [rowsPerPageOptions]="rowsPerPageOptions"
+                *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
+                [dropdownAppendTo]="paginatorDropdownAppendTo"
+                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+                [templateLeft]="paginatorLeftTemplate"
+                [templateRight]="paginatorRightTemplate"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatorDropdownItemTemplate"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+                [styleClass]="paginatorStyleClass"
+            ></p-paginator>
+
+            <div class="p-dataview-content">
+                <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: paginator ? (filteredValue || value | slice: (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value }"></ng-container>
+
+                <div *ngIf="isEmpty() && !loading">
+                    <div class="p-dataview-emptymessage">
+                        <ng-container *ngIf="!emptyMessageTemplate; else empty">
+                            {{ emptyMessageLabel }}
+                        </ng-container>
+                        <ng-container #empty *ngTemplateOutlet="emptyMessageTemplate"></ng-container>
+                    </div>
+                </div>
+            </div>
+            <p-paginator
+                [rows]="rows"
+                [first]="first"
+                [totalRecords]="totalRecords"
+                [pageLinkSize]="pageLinks"
+                [alwaysShow]="alwaysShowPaginator"
+                (onPageChange)="paginate($event)"
+                styleClass="p-paginator-bottom"
+                [rowsPerPageOptions]="rowsPerPageOptions"
+                *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
+                [dropdownAppendTo]="paginatorDropdownAppendTo"
+                [dropdownScrollHeight]="paginatorDropdownScrollHeight"
+                [templateLeft]="paginatorLeftTemplate"
+                [templateRight]="paginatorRightTemplate"
+                [currentPageReportTemplate]="currentPageReportTemplate"
+                [showFirstLastIcon]="showFirstLastIcon"
+                [dropdownItemTemplate]="paginatorDropdownItemTemplate"
+                [showCurrentPageReport]="showCurrentPageReport"
+                [showJumpToPageDropdown]="showJumpToPageDropdown"
+                [showPageLinks]="showPageLinks"
+                [styleClass]="paginatorStyleClass"
+            ></p-paginator>
+            <div class="p-dataview-footer" *ngIf="footer || footerTemplate">
+                <ng-content select="cax-footer"></ng-content>
+                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+            </div>
+        </div>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'cax-element'
+                    }, styles: ["@layer cax{.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: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FilterService }, { type: i1.caxConfig }], propDecorators: { paginator: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], rows: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], totalRecords: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], pageLinks: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], rowsPerPageOptions: [{
+                type: Input
+            }], paginatorPosition: [{
+                type: Input
+            }], paginatorStyleClass: [{
+                type: Input
+            }], alwaysShowPaginator: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], paginatorDropdownAppendTo: [{
+                type: Input
+            }], paginatorDropdownScrollHeight: [{
+                type: Input
+            }], currentPageReportTemplate: [{
+                type: Input
+            }], showCurrentPageReport: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showJumpToPageDropdown: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showFirstLastIcon: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showPageLinks: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], lazy: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], lazyLoadOnInit: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], emptyMessage: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], gridStyleClass: [{
+                type: Input
+            }], trackBy: [{
+                type: Input
+            }], filterBy: [{
+                type: Input
+            }], filterLocale: [{
+                type: Input
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], loadingIcon: [{
+                type: Input
+            }], first: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], sortField: [{
+                type: Input
+            }], sortOrder: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], value: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], onLazyLoad: [{
+                type: Output
+            }], onPage: [{
+                type: Output
+            }], onSort: [{
+                type: Output
+            }], onChangeLayout: [{
+                type: Output
+            }], header: [{
+                type: ContentChild,
+                args: [Header]
+            }], footer: [{
+                type: ContentChild,
+                args: [Footer]
+            }], templates: [{
+                type: ContentChildren,
+                args: [CaxTemplate]
+            }] } });
+class DataViewLayoutOptions {
+    dv;
+    style;
+    styleClass;
+    constructor(dv) {
+        this.dv = dv;
+    }
+    changeLayout(event, layout) {
+        this.dv.changeLayout(layout);
+        event.preventDefault();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DataViewLayoutOptions, deps: [{ token: DataView }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: DataViewLayoutOptions, selector: "p-dataViewLayoutOptions", inputs: { style: "style", styleClass: "styleClass" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: `
+        <div [ngClass]="'p-dataview-layout-options p-selectbutton p-buttonset'" [ngStyle]="style" [class]="styleClass">
+            <button type="button" class="p-button p-button-icon-only" [ngClass]="{ 'p-highlight': dv.layout === 'list' }" (click)="changeLayout($event, 'list')" (keydown.enter)="changeLayout($event, 'list')">
+                <BarsIcon *ngIf="!dv.listIconTemplate" />
+                <ng-template *ngTemplateOutlet="dv.listIconTemplate"></ng-template></button
+            ><button type="button" class="p-button p-button-icon-only" [ngClass]="{ 'p-highlight': dv.layout === 'grid' }" (click)="changeLayout($event, 'grid')" (keydown.enter)="changeLayout($event, 'grid')">
+                <ThLargeIcon *ngIf="!dv.gridIconTemplate" />
+                <ng-template *ngTemplateOutlet="dv.gridIconTemplate"></ng-template>
+            </button>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => BarsIcon), selector: "BarsIcon" }, { kind: "component", type: i0.forwardRef(() => ThLargeIcon), selector: "ThLargeIcon" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DataViewLayoutOptions, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-dataViewLayoutOptions',
+                    template: `
+        <div [ngClass]="'p-dataview-layout-options p-selectbutton p-buttonset'" [ngStyle]="style" [class]="styleClass">
+            <button type="button" class="p-button p-button-icon-only" [ngClass]="{ 'p-highlight': dv.layout === 'list' }" (click)="changeLayout($event, 'list')" (keydown.enter)="changeLayout($event, 'list')">
+                <BarsIcon *ngIf="!dv.listIconTemplate" />
+                <ng-template *ngTemplateOutlet="dv.listIconTemplate"></ng-template></button
+            ><button type="button" class="p-button p-button-icon-only" [ngClass]="{ 'p-highlight': dv.layout === 'grid' }" (click)="changeLayout($event, 'grid')" (keydown.enter)="changeLayout($event, 'grid')">
+                <ThLargeIcon *ngIf="!dv.gridIconTemplate" />
+                <ng-template *ngTemplateOutlet="dv.gridIconTemplate"></ng-template>
+            </button>
+        </div>
+    `,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'cax-element'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: DataView }], propDecorators: { style: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }] } });
+class DataViewModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DataViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: DataViewModule, declarations: [DataView, DataViewLayoutOptions], imports: [CommonModule, SharedModule, PaginatorModule, SpinnerIcon, BarsIcon, ThLargeIcon], exports: [DataView, SharedModule, DataViewLayoutOptions] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DataViewModule, imports: [CommonModule, SharedModule, PaginatorModule, SpinnerIcon, BarsIcon, ThLargeIcon, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DataViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SharedModule, PaginatorModule, SpinnerIcon, BarsIcon, ThLargeIcon],
+                    exports: [DataView, SharedModule, DataViewLayoutOptions],
+                    declarations: [DataView, DataViewLayoutOptions]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DataView, DataViewLayoutOptions, DataViewModule };
+//# sourceMappingURL=cax-design-system-dataview.mjs.map