@ng-prime-extensions/px-table/fesm2022/ng-prime-extensions-px-table.mjs

PrimeNG table extension

import * as i0 from '@angular/core';
import { InjectionToken, Pipe, EventEmitter, Injector, Output, Input, ViewChildren, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i2 from 'primeng/table';
import { TableModule } from 'primeng/table';
import { NgClass, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
import { FormGroup } from '@angular/forms';
import { Button } from 'primeng/button';
import { Menu } from 'primeng/menu';
import { ContextMenu } from 'primeng/contextmenu';
import { ProgressSpinner } from 'primeng/progressspinner';
import * as i1 from 'primeng/config';
import * as i3 from 'primeng/api';

const PX_TABLE_RENDER_COMPONENT_DATA = new InjectionToken('PX_TABLE_RENDER_COMPONENT_DATA');

class PxTableRenderPipePipe {
    constructor(injector) {
        this.injector = injector;
    }
    transform(value, pipeToken, args) {
        let pipeArgs;
        if (!Array.isArray(args)) {
            pipeArgs = [args];
        }
        else {
            pipeArgs = args;
        }
        return this.injector.get(pipeToken).transform(value, ...pipeArgs);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PxTableRenderPipePipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: PxTableRenderPipePipe, isStandalone: true, name: "pxTableRenderPipe" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PxTableRenderPipePipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'pxTableRenderPipe',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.Injector }] });

class PxTableComponent {
    constructor(primeNGConfig, injector, changeDetector) {
        this.primeNGConfig = primeNGConfig;
        this.injector = injector;
        this.changeDetector = changeDetector;
        /**
         * Whether pagination is enabled.
         */
        this.paginator = true;
        /**
         * Number of rows to display per page.
         */
        this.rowsPerPage = 10;
        /**
         * Array of integer values to display inside rows per page dropdown of paginator.
         */
        this.rowsPerPageOptions = [5, 10, 20, 30, 40, 50];
        this.stripedRows = false;
        /**
         * Whether to display the "select all" header checkbox.
         */
        this.selectAllCheckbox = false;
        /**
         * Callback to invoke on context menu selection change.
         */
        this.contextMenuSelectionChange = new EventEmitter();
        /**
         * Defines the responsive mode.
         */
        this.responsiveLayout = 'scroll';
        /**
         * The breakpoint to define the maximum width boundary when using stack responsive layout.
         */
        this.breakpoint = '960px';
        /**
         * An array of FilterMetadata objects to provide external filters.
         */
        this.filters = {};
        /**
         * Defines whether sorting works on single column or on multiple columns.
         */
        this.sortMode = 'single';
        /**
         * Order to sort when default sorting is enabled.
         * 0 - unsorted
         * 1 - Ascending
         * -1 - Descending
         */
        this.sortDirection = 0;
        /**
         * When true, resets paginator to first page after sorting. Available only when sortMode is set to single.
         */
        this.resetPageOnSort = true;
        /**
         * Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
         */
        this.columnResizeMode = 'fit';
        /**
         * Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
         */
        this.stateStorage = 'session';
        /**
         * Message shown when dynamicContextMenuItems returns an array
         */
        this.dynamicContextMenuNoItemsMessage = 'No actions available';
        /**
         * Name of the icon to be passed along to the p-button toggle.
         */
        this.rowContextMenuToggleIcon = 'pi pi-bars';
        /**
         * Callback to invoke on selection changed.
         */
        this.selectionChange = new EventEmitter();
        /**
         * Callback to invoke when a row is selected.
         */
        this.onRowSelect = new EventEmitter();
        /**
         * Callback to invoke when a row is unselected.
         */
        this.onRowUnselect = new EventEmitter();
        this.displayedColumns = [];
        this.records = [];
        this.totalRecords = 0;
        this.firstRowIndex = 0;
        this.isDataSrcStatic = true;
        this.isLoading = false;
        this.lastLazyLoadEventData = {};
        this.tableInitialized = false;
        this.columnInjectorCache = {};
    }
    ngOnInit() {
        if (this.pxFilters) {
            this.filters = {};
            delete this.globalFilterFields;
        }
        if (this.dynamicContextMenuItems) {
            this.rowContextMenuItems = [];
        }
        this.prepareDisplayedColumns();
        this.checkDataSource();
        this.tableInitialized = true;
    }
    ngOnChanges(changes) {
        if (changes['columns'] && !changes['columns'].firstChange) {
            this.prepareDisplayedColumns();
            this.changeDetector.detectChanges();
        }
        if (changes['selectAllCheckbox'] && !changes['selectAllCheckbox'].firstChange) {
            this.changeDetector.detectChanges();
        }
        if (changes['dataSource'] && !changes['dataSource'].firstChange) {
            this.checkDataSource();
        }
    }
    /**
     * Re-fetch table data.
     * @param resetPage
     */
    refresh(resetPage = true) {
        if (this.isLoading) {
            return;
        }
        if (resetPage) {
            this.firstRowIndex = 0;
        }
        this.onLazyLoad(this.lastLazyLoadEventData);
    }
    /**
     * Hides/shows or toggles the specified table column's visibility.
     * @param columnId
     * @param visible If not specified, the visibility will be toggled
     */
    changeColumnVisibility(columnId, visible) {
        const column = this.getColumn(columnId);
        if (!column) {
            return;
        }
        column.visible = typeof visible === 'undefined' ? !column.visible : visible;
        this.prepareDisplayedColumns();
        this.changeDetector.detectChanges();
    }
    /**
     * Changes the visibility of multiple columns at once.
     * @param columns The columns and their visibility. Example: [{columnId: 'myColumn1', visible: true}, {columnId: 'myOtherColumn', visible: false}] -- sets myColumn1 to visible and hides myOtherColumn
     */
    changeColumnsVisibility(columns) {
        for (let i = columns.length; i--;) {
            const colVisibilityConfig = columns[i];
            const column = this.getColumn(colVisibilityConfig.columnId);
            if (!column) {
                continue;
            }
            column.visible = typeof colVisibilityConfig.visible !== "undefined" ? colVisibilityConfig.visible : !column.visible;
        }
        this.prepareDisplayedColumns();
        this.changeDetector.detectChanges();
    }
    onLazyLoad($event) {
        const dataSource = this.dataSource;
        if (this.isDataSrcStatic) {
            this.columnInjectorCache = {};
            this.records = dataSource;
            this.totalRecords = dataSource.length;
            this.changeDetector.detectChanges();
        }
        else {
            this.isLoading = true;
            this.lastLazyLoadEventData = $event;
            const sortedColumns = [];
            if (this.sortMode === 'multiple') {
                const multiSortColumns = $event.multiSortMeta;
                if (multiSortColumns) {
                    const multiSortColumnsLen = multiSortColumns.length;
                    for (let i = 0; i < multiSortColumnsLen; ++i) {
                        const sortedCol = multiSortColumns[i];
                        sortedColumns.push({
                            columnId: sortedCol.field,
                            order: sortedCol.order
                        });
                    }
                }
            }
            else {
                sortedColumns.push({
                    columnId: $event.sortField || this.sortColumnId || '',
                    order: $event.sortOrder || this.sortDirection
                });
            }
            this.dataSrcSub?.unsubscribe();
            this.dataSrcSub = dataSource({
                firstRowIndex: $event.first || 0,
                pageLength: $event.rows || this.rowsPerPage,
                sortedColumns,
                filters: this.pxFilters ? (this.pxFilters instanceof FormGroup ? this.pxFilters.value || {} : this.filters || {}) : $event.filters
            }).subscribe(response => {
                this.columnInjectorCache = {};
                this.records = response.records;
                this.totalRecords = response.totalRecords;
                this.isLoading = false;
                this.changeDetector.detectChanges();
            });
        }
    }
    onContextMenuSelectionChange(rowData, closeOpenMenus = true) {
        this.contextMenuSelection = rowData;
        if (closeOpenMenus) {
            const contextMenuPanels = this.toggledContextMenus.toArray();
            const contextMenuPanelsLen = contextMenuPanels.length;
            for (let i = 0; i < contextMenuPanelsLen; ++i) {
                contextMenuPanels[i].hide();
            }
        }
        this.contextMenuSelectionChange.emit(rowData);
    }
    onContextMenuShown() {
        if (!(this.dynamicContextMenuItems && this.contextMenuSelection)) {
            return;
        }
        this.rowContextMenuItems = this.dynamicContextMenuItems(this.contextMenuSelection);
        if (!this.rowContextMenuItems.length) {
            this.rowContextMenuItems.push({
                label: this.dynamicContextMenuNoItemsMessage,
                disabled: true
            });
        }
    }
    createRenderComponentInjector(column, row, rowIndex) {
        const injectorCacheKey = column.id + '' + rowIndex;
        const columnInjectorCache = this.columnInjectorCache;
        if (!columnInjectorCache[injectorCacheKey]) {
            columnInjectorCache[injectorCacheKey] = Injector.create({
                providers: [{
                        provide: PX_TABLE_RENDER_COMPONENT_DATA,
                        useValue: {
                            columnId: column.id,
                            columnData: row[column.id],
                            row,
                            arguments: column.renderUsing?.arguments
                        }
                    }],
                parent: this.injector
            });
        }
        return columnInjectorCache[injectorCacheKey];
    }
    checkDataSource() {
        if (Array.isArray(this.dataSource)) {
            this.isDataSrcStatic = true;
            this.refresh(this.tableInitialized);
        }
        else {
            this.isDataSrcStatic = false;
            this.tableInitialized && this.refresh();
        }
    }
    prepareDisplayedColumns() {
        const columns = this.columns;
        const colLen = columns.length;
        const displayedColumns = [];
        for (let colIndex = 0; colIndex < colLen; ++colIndex) {
            const column = columns[colIndex];
            if (column.visible === undefined || column.visible) {
                displayedColumns.push(column);
            }
        }
        this.displayedColumns = displayedColumns;
    }
    getColumn(columnId) {
        const columns = this.columns;
        let foundColumn;
        for (let i = columns.length; i--;) {
            const col = columns[i];
            if (col.id === columnId) {
                foundColumn = col;
                break;
            }
        }
        return foundColumn;
    }
    ngOnDestroy() {
        this.dataSrcSub?.unsubscribe();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PxTableComponent, deps: [{ token: i1.PrimeNG }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PxTableComponent, isStandalone: true, selector: "px-table", inputs: { columns: "columns", dataSource: "dataSource", frozenColumns: "frozenColumns", frozenValue: "frozenValue", paginator: "paginator", rowsPerPage: "rowsPerPage", rowsPerPageOptions: "rowsPerPageOptions", stripedRows: "stripedRows", selectionMode: "selectionMode", selectAllCheckbox: "selectAllCheckbox", selectionPageOnly: "selectionPageOnly", selection: "selection", contextMenuSelection: "contextMenuSelection", responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", pxFilters: "pxFilters", filters: "filters", globalFilterFields: "globalFilterFields", sortMode: "sortMode", sortColumnId: "sortColumnId", sortDirection: "sortDirection", resetPageOnSort: "resetPageOnSort", styleClass: "styleClass", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode", scrollable: "scrollable", scrollHeight: "scrollHeight", reorderableColumns: "reorderableColumns", dataKey: "dataKey", stateStorage: "stateStorage", stateKey: "stateKey", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", rowContextMenuItems: "rowContextMenuItems", dynamicContextMenuItems: "dynamicContextMenuItems", dynamicContextMenuNoItemsMessage: "dynamicContextMenuNoItemsMessage", rowContextMenuToggleIcon: "rowContextMenuToggleIcon", rowContextMenuToggleBy: "rowContextMenuToggleBy", loadingIconTemplateRef: "loadingIconTemplateRef", rowContextMenuIsActiveFn: "rowContextMenuIsActiveFn" }, outputs: { contextMenuSelectionChange: "contextMenuSelectionChange", selectionChange: "selectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, host: { classAttribute: "px-table" }, viewQueries: [{ propertyName: "toggledContextMenus", predicate: ["toggledContextMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-contextMenu #contextMenuRef [model]=\"rowContextMenuItems\" appendTo=\"body\" (onShow)=\"onContextMenuShown()\"></p-contextMenu>\n<p-table\n    [styleClass]=\"styleClass\"\n    [columns]=\"columns\"\n    [value]=\"records\"\n    [totalRecords]=\"totalRecords\"\n    [paginator]=\"paginator\"\n    [rows]=\"rowsPerPage\"\n    [rowsPerPageOptions]=\"rowsPerPageOptions\"\n    [(first)]=\"firstRowIndex\"\n    [stripedRows]=\"stripedRows\"\n    [sortMode]=\"sortMode\"\n    [sortField]=\"sortColumnId\"\n    [sortOrder]=\"sortDirection\"\n    [resetPageOnSort]=\"resetPageOnSort\"\n    [frozenColumns]=\"frozenColumns\"\n    [frozenValue]=\"frozenValue\"\n    [responsiveLayout]=\"responsiveLayout\"\n    [breakpoint]=\"breakpoint\"\n    [lazy]=\"!isDataSrcStatic\"\n    [loading]=\"isLoading\"\n    [resizableColumns]=\"resizableColumns\"\n    [columnResizeMode]=\"columnResizeMode\"\n    [scrollable]=\"scrollable\"\n    [scrollHeight]=\"scrollHeight\"\n    [reorderableColumns]=\"reorderableColumns\"\n    [dataKey]=\"dataKey\"\n    [stateStorage]=\"stateStorage\"\n    [stateKey]=\"stateKey\"\n    [tableStyle]=\"tableStyle\"\n    [tableStyleClass]=\"tableStyleClass\"\n    [selectionPageOnly]=\"selectionPageOnly\"\n    [filters]=\"filters\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [contextMenu]=\"contextMenuRef\"\n    (contextMenuSelectionChange)=\"onContextMenuSelectionChange($event)\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [selection]=\"selection\"\n    [selectionMode]=\"selectionMode\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"onRowSelect.emit($event)\"\n    (onRowUnselect)=\"onRowUnselect.emit($event)\"\n>\n    <ng-template pTemplate=\"header\">\n        <tr>\n            @if(selectionMode)\n            {\n                <th>\n                    @if(selectAllCheckbox && selectionMode === 'multiple')\n                    {\n                        <p-tableHeaderCheckbox />\n                    }\n                </th>\n            }\n\n            @for(column of displayedColumns; track column.id)\n            {\n                <th\n                    [pSortableColumn]=\"column.sortable ? column.id : undefined\"\n                    [pSortableColumnDisabled]=\"!column.sortable\"\n                    [ngClass]=\"column.classes\"\n                >\n                    {{ column.name }}\n\n                    @if(column.sortable)\n                    {\n                        <p-sortIcon [field]=\"column.id\"></p-sortIcon>\n                    }\n                </th>\n            }\n\n            @if(rowContextMenuItems && (!rowContextMenuToggleBy || rowContextMenuToggleBy === 'button'))\n            {\n                <th>\n                    &nbsp;\n                </th>\n            }\n        </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\n        <tr [pContextMenuRow]=\"rowData\"\n            [pContextMenuRowDisabled]=\"!rowContextMenuItems || (rowContextMenuToggleBy && rowContextMenuToggleBy !== 'rightClick') || (rowContextMenuIsActiveFn && !rowContextMenuIsActiveFn(rowData))\">\n\n            @if(selectionMode)\n            {\n                <td>\n                    @if(selectionMode === 'multiple')\n                    {\n                        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n                    }\n\n                    @if(selectionMode === 'single')\n                    {\n                        <p-tableRadioButton [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n                    }\n                </td>\n            }\n\n            @for(column of displayedColumns; track column.id)\n            {\n                <td [ngClass]=\"column.classes\">\n                    @if(responsiveLayout === 'stack')\n                    {\n                        <div class=\"p-datatable-column-title\">{{ column.name }}</div>\n                    }\n\n                    @if(column.renderUsing)\n                    {\n                        @if(column.renderUsing.component)\n                        {\n                            <ng-container\n                                [ngComponentOutlet]=\"column.renderUsing.component\"\n                                [ngComponentOutletInjector]=\"createRenderComponentInjector(column, rowData, rowIndex)\"></ng-container>\n                        }\n                        @else\n                        {\n                            {{ rowData[column.id] | pxTableRenderPipe: column.renderUsing.pipe! : column.renderUsing.arguments || [] }}\n                        }\n                    }\n                    @else\n                    {\n                        {{ rowData[column.id] }}\n                    }\n                </td>\n            }\n\n            @if(rowContextMenuItems && (!rowContextMenuToggleBy || rowContextMenuToggleBy === 'button'))\n            {\n                <td class=\"px-table-context-menu-toggle-cell\">\n                    @if(responsiveLayout === 'stack')\n                    {\n                        <div class=\"p-datatable-column-title\">&nbsp;</div>\n                    }\n\n                    @if(!rowContextMenuIsActiveFn || rowContextMenuIsActiveFn(rowData))\n                    {\n                        <span>\n                            <p-button [icon]=\"rowContextMenuToggleIcon\" (click)=\"toggledContextMenu.toggle($event)\"></p-button>\n                            <p-menu #toggledContextMenu [model]=\"rowContextMenuItems\" [popup]=\"true\" appendTo=\"body\"\n                                    (onShow)=\"onContextMenuSelectionChange(rowData, false); onContextMenuShown()\"></p-menu>\n                        </span>\n                    }\n                </td>\n            }\n        </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n        <tr>\n            <td colspan=\"100\" class=\"px-table-empty-message\">{{ primeNGConfig.translation.emptyMessage }}</td>\n        </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"loadingicon\">\n        @if(loadingIconTemplateRef)\n        {\n            <ng-container [ngTemplateOutlet]=\"loadingIconTemplateRef\"></ng-container>\n        }\n        @else\n        {\n            <p-progressSpinner class=\"px-default-loading-icon\" [style]=\"{'width': '65px'}\" strokeWidth=\"3\"></p-progressSpinner>\n        }\n    </ng-template>\n</p-table>\n", styles: [".px-table .px-table-empty-message{text-align:center}.px-table .px-table-context-menu-toggle-cell{text-align:right}.px-table .p-datatable-column-title{display:none;font-weight:700}.px-table .p-datatable-loading-icon{display:flex;align-items:center;justify-content:center;height:unset;width:unset;font-size:unset}\n"], dependencies: [{ kind: "component", type: ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2.ContextMenuRow, selector: "[pContextMenuRow]", inputs: ["pContextMenuRow", "pContextMenuRowIndex", "pContextMenuRowDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: PxTableRenderPipePipe, name: "pxTableRenderPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PxTableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'px-table', imports: [
                        PxTableRenderPipePipe,
                        ContextMenu,
                        TableModule,
                        NgClass,
                        NgTemplateOutlet,
                        Button,
                        Menu,
                        NgComponentOutlet,
                        ProgressSpinner,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        class: 'px-table',
                    }, template: "<p-contextMenu #contextMenuRef [model]=\"rowContextMenuItems\" appendTo=\"body\" (onShow)=\"onContextMenuShown()\"></p-contextMenu>\n<p-table\n    [styleClass]=\"styleClass\"\n    [columns]=\"columns\"\n    [value]=\"records\"\n    [totalRecords]=\"totalRecords\"\n    [paginator]=\"paginator\"\n    [rows]=\"rowsPerPage\"\n    [rowsPerPageOptions]=\"rowsPerPageOptions\"\n    [(first)]=\"firstRowIndex\"\n    [stripedRows]=\"stripedRows\"\n    [sortMode]=\"sortMode\"\n    [sortField]=\"sortColumnId\"\n    [sortOrder]=\"sortDirection\"\n    [resetPageOnSort]=\"resetPageOnSort\"\n    [frozenColumns]=\"frozenColumns\"\n    [frozenValue]=\"frozenValue\"\n    [responsiveLayout]=\"responsiveLayout\"\n    [breakpoint]=\"breakpoint\"\n    [lazy]=\"!isDataSrcStatic\"\n    [loading]=\"isLoading\"\n    [resizableColumns]=\"resizableColumns\"\n    [columnResizeMode]=\"columnResizeMode\"\n    [scrollable]=\"scrollable\"\n    [scrollHeight]=\"scrollHeight\"\n    [reorderableColumns]=\"reorderableColumns\"\n    [dataKey]=\"dataKey\"\n    [stateStorage]=\"stateStorage\"\n    [stateKey]=\"stateKey\"\n    [tableStyle]=\"tableStyle\"\n    [tableStyleClass]=\"tableStyleClass\"\n    [selectionPageOnly]=\"selectionPageOnly\"\n    [filters]=\"filters\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [contextMenu]=\"contextMenuRef\"\n    (contextMenuSelectionChange)=\"onContextMenuSelectionChange($event)\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [selection]=\"selection\"\n    [selectionMode]=\"selectionMode\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"onRowSelect.emit($event)\"\n    (onRowUnselect)=\"onRowUnselect.emit($event)\"\n>\n    <ng-template pTemplate=\"header\">\n        <tr>\n            @if(selectionMode)\n            {\n                <th>\n                    @if(selectAllCheckbox && selectionMode === 'multiple')\n                    {\n                        <p-tableHeaderCheckbox />\n                    }\n                </th>\n            }\n\n            @for(column of displayedColumns; track column.id)\n            {\n                <th\n                    [pSortableColumn]=\"column.sortable ? column.id : undefined\"\n                    [pSortableColumnDisabled]=\"!column.sortable\"\n                    [ngClass]=\"column.classes\"\n                >\n                    {{ column.name }}\n\n                    @if(column.sortable)\n                    {\n                        <p-sortIcon [field]=\"column.id\"></p-sortIcon>\n                    }\n                </th>\n            }\n\n            @if(rowContextMenuItems && (!rowContextMenuToggleBy || rowContextMenuToggleBy === 'button'))\n            {\n                <th>\n                    &nbsp;\n                </th>\n            }\n        </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\n        <tr [pContextMenuRow]=\"rowData\"\n            [pContextMenuRowDisabled]=\"!rowContextMenuItems || (rowContextMenuToggleBy && rowContextMenuToggleBy !== 'rightClick') || (rowContextMenuIsActiveFn && !rowContextMenuIsActiveFn(rowData))\">\n\n            @if(selectionMode)\n            {\n                <td>\n                    @if(selectionMode === 'multiple')\n                    {\n                        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n                    }\n\n                    @if(selectionMode === 'single')\n                    {\n                        <p-tableRadioButton [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n                    }\n                </td>\n            }\n\n            @for(column of displayedColumns; track column.id)\n            {\n                <td [ngClass]=\"column.classes\">\n                    @if(responsiveLayout === 'stack')\n                    {\n                        <div class=\"p-datatable-column-title\">{{ column.name }}</div>\n                    }\n\n                    @if(column.renderUsing)\n                    {\n                        @if(column.renderUsing.component)\n                        {\n                            <ng-container\n                                [ngComponentOutlet]=\"column.renderUsing.component\"\n                                [ngComponentOutletInjector]=\"createRenderComponentInjector(column, rowData, rowIndex)\"></ng-container>\n                        }\n                        @else\n                        {\n                            {{ rowData[column.id] | pxTableRenderPipe: column.renderUsing.pipe! : column.renderUsing.arguments || [] }}\n                        }\n                    }\n                    @else\n                    {\n                        {{ rowData[column.id] }}\n                    }\n                </td>\n            }\n\n            @if(rowContextMenuItems && (!rowContextMenuToggleBy || rowContextMenuToggleBy === 'button'))\n            {\n                <td class=\"px-table-context-menu-toggle-cell\">\n                    @if(responsiveLayout === 'stack')\n                    {\n                        <div class=\"p-datatable-column-title\">&nbsp;</div>\n                    }\n\n                    @if(!rowContextMenuIsActiveFn || rowContextMenuIsActiveFn(rowData))\n                    {\n                        <span>\n                            <p-button [icon]=\"rowContextMenuToggleIcon\" (click)=\"toggledContextMenu.toggle($event)\"></p-button>\n                            <p-menu #toggledContextMenu [model]=\"rowContextMenuItems\" [popup]=\"true\" appendTo=\"body\"\n                                    (onShow)=\"onContextMenuSelectionChange(rowData, false); onContextMenuShown()\"></p-menu>\n                        </span>\n                    }\n                </td>\n            }\n        </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n        <tr>\n            <td colspan=\"100\" class=\"px-table-empty-message\">{{ primeNGConfig.translation.emptyMessage }}</td>\n        </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"loadingicon\">\n        @if(loadingIconTemplateRef)\n        {\n            <ng-container [ngTemplateOutlet]=\"loadingIconTemplateRef\"></ng-container>\n        }\n        @else\n        {\n            <p-progressSpinner class=\"px-default-loading-icon\" [style]=\"{'width': '65px'}\" strokeWidth=\"3\"></p-progressSpinner>\n        }\n    </ng-template>\n</p-table>\n", styles: [".px-table .px-table-empty-message{text-align:center}.px-table .px-table-context-menu-toggle-cell{text-align:right}.px-table .p-datatable-column-title{display:none;font-weight:700}.px-table .p-datatable-loading-icon{display:flex;align-items:center;justify-content:center;height:unset;width:unset;font-size:unset}\n"] }]
        }], ctorParameters: () => [{ type: i1.PrimeNG }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { toggledContextMenus: [{
                type: ViewChildren,
                args: ['toggledContextMenu']
            }], columns: [{
                type: Input,
                args: [{ required: true }]
            }], dataSource: [{
                type: Input,
                args: [{ required: true }]
            }], frozenColumns: [{
                type: Input
            }], frozenValue: [{
                type: Input
            }], paginator: [{
                type: Input
            }], rowsPerPage: [{
                type: Input
            }], rowsPerPageOptions: [{
                type: Input
            }], stripedRows: [{
                type: Input
            }], selectionMode: [{
                type: Input
            }], selectAllCheckbox: [{
                type: Input
            }], selectionPageOnly: [{
                type: Input
            }], selection: [{
                type: Input
            }], contextMenuSelection: [{
                type: Input
            }], contextMenuSelectionChange: [{
                type: Output
            }], responsiveLayout: [{
                type: Input
            }], breakpoint: [{
                type: Input
            }], pxFilters: [{
                type: Input
            }], filters: [{
                type: Input
            }], globalFilterFields: [{
                type: Input
            }], sortMode: [{
                type: Input
            }], sortColumnId: [{
                type: Input
            }], sortDirection: [{
                type: Input
            }], resetPageOnSort: [{
                type: Input
            }], styleClass: [{
                type: Input
            }], resizableColumns: [{
                type: Input
            }], columnResizeMode: [{
                type: Input
            }], scrollable: [{
                type: Input
            }], scrollHeight: [{
                type: Input
            }], reorderableColumns: [{
                type: Input
            }], dataKey: [{
                type: Input
            }], stateStorage: [{
                type: Input
            }], stateKey: [{
                type: Input
            }], tableStyle: [{
                type: Input
            }], tableStyleClass: [{
                type: Input
            }], rowContextMenuItems: [{
                type: Input
            }], dynamicContextMenuItems: [{
                type: Input
            }], dynamicContextMenuNoItemsMessage: [{
                type: Input
            }], rowContextMenuToggleIcon: [{
                type: Input
            }], rowContextMenuToggleBy: [{
                type: Input
            }], loadingIconTemplateRef: [{
                type: Input
            }], rowContextMenuIsActiveFn: [{
                type: Input
            }], selectionChange: [{
                type: Output
            }], onRowSelect: [{
                type: Output
            }], onRowUnselect: [{
                type: Output
            }] } });

/*
 * Public API Surface of px-table
 */

/**
 * Generated bundle index. Do not edit.
 */

export { PX_TABLE_RENDER_COMPONENT_DATA, PxTableComponent, PxTableRenderPipePipe };
//# sourceMappingURL=ng-prime-extensions-px-table.mjs.map