primeng 11.4.4 → 12.0.1

package/bundles/primeng-table.umd.js

@@ -2,7 +2,40 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('primeng/api'), require('primeng/paginator'), require('primeng/inputtext'), require('primeng/button'), require('primeng/selectbutton'), require('primeng/tristatecheckbox'), require('primeng/calendar'), require('primeng/inputnumber'), require('primeng/dropdown'), require('primeng/dom'), require('primeng/utils'), require('rxjs'), require('@angular/cdk/scrolling'), require('@angular/animations')) :
     typeof define === 'function' && define.amd ? define('primeng/table', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'primeng/api', 'primeng/paginator', 'primeng/inputtext', 'primeng/button', 'primeng/selectbutton', 'primeng/tristatecheckbox', 'primeng/calendar', 'primeng/inputnumber', 'primeng/dropdown', 'primeng/dom', 'primeng/utils', 'rxjs', '@angular/cdk/scrolling', '@angular/animations'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.primeng = global.primeng || {}, global.primeng.table = {}), global.ng.core, global.ng.common, global.ng.forms, global.primeng.api, global.primeng.paginator, global.primeng.inputtext, global.primeng.button, global.primeng.selectbutton, global.primeng.tristatecheckbox, global.primeng.calendar, global.primeng.inputnumber, global.primeng.dropdown, global.primeng.dom, global.primeng.utils, global.rxjs, global.ng.cdk.scrolling, global.ng.animations));
-}(this, (function (exports, core, common, forms, api, paginator, inputtext, button, selectbutton, tristatecheckbox, calendar, inputnumber, dropdown, dom, utils, rxjs, scrolling, animations) { 'use strict';
+}(this, (function (exports, i0, i3, i9, i1, i2, i8, i11, selectbutton, i6, i7, i5, i10, dom, utils, rxjs, i4, animations) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () {
+                            return e[k];
+                        }
+                    });
+                }
+            });
+        }
+        n['default'] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+    var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -362,9 +395,11 @@
         };
         return TableService;
     }());
-    TableService.decorators = [
-        { type: core.Injectable }
-    ];
+    TableService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TableService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableService, decorators: [{
+                type: i0.Injectable
+            }] });
     var Table = /** @class */ (function () {
         function Table(el, zone, tableService, cd, filterService) {
             this.el = el;
@@ -382,8 +417,8 @@
             this.defaultSortOrder = 1;
             this.sortMode = 'single';
             this.resetPageOnSort = true;
-            this.selectionChange = new core.EventEmitter();
-            this.contextMenuSelectionChange = new core.EventEmitter();
+            this.selectionChange = new i0.EventEmitter();
+            this.contextMenuSelectionChange = new i0.EventEmitter();
             this.contextMenuSelectionMode = "separate";
             this.rowTrackBy = function (index, item) { return item; };
             this.lazy = false;
@@ -404,27 +439,27 @@
             this.showInitialSortBadge = true;
             this.stateStorage = 'session';
             this.editMode = 'cell';
-            this.onRowSelect = new core.EventEmitter();
-            this.onRowUnselect = new core.EventEmitter();
-            this.onPage = new core.EventEmitter();
-            this.onSort = new core.EventEmitter();
-            this.onFilter = new core.EventEmitter();
-            this.onLazyLoad = new core.EventEmitter();
-            this.onRowExpand = new core.EventEmitter();
-            this.onRowCollapse = new core.EventEmitter();
-            this.onContextMenuSelect = new core.EventEmitter();
-            this.onColResize = new core.EventEmitter();
-            this.onColReorder = new core.EventEmitter();
-            this.onRowReorder = new core.EventEmitter();
-            this.onEditInit = new core.EventEmitter();
-            this.onEditComplete = new core.EventEmitter();
-            this.onEditCancel = new core.EventEmitter();
-            this.onHeaderCheckboxToggle = new core.EventEmitter();
-            this.sortFunction = new core.EventEmitter();
-            this.firstChange = new core.EventEmitter();
-            this.rowsChange = new core.EventEmitter();
-            this.onStateSave = new core.EventEmitter();
-            this.onStateRestore = new core.EventEmitter();
+            this.onRowSelect = new i0.EventEmitter();
+            this.onRowUnselect = new i0.EventEmitter();
+            this.onPage = new i0.EventEmitter();
+            this.onSort = new i0.EventEmitter();
+            this.onFilter = new i0.EventEmitter();
+            this.onLazyLoad = new i0.EventEmitter();
+            this.onRowExpand = new i0.EventEmitter();
+            this.onRowCollapse = new i0.EventEmitter();
+            this.onContextMenuSelect = new i0.EventEmitter();
+            this.onColResize = new i0.EventEmitter();
+            this.onColReorder = new i0.EventEmitter();
+            this.onRowReorder = new i0.EventEmitter();
+            this.onEditInit = new i0.EventEmitter();
+            this.onEditComplete = new i0.EventEmitter();
+            this.onEditCancel = new i0.EventEmitter();
+            this.onHeaderCheckboxToggle = new i0.EventEmitter();
+            this.sortFunction = new i0.EventEmitter();
+            this.firstChange = new i0.EventEmitter();
+            this.rowsChange = new i0.EventEmitter();
+            this.onStateSave = new i0.EventEmitter();
+            this.onStateRestore = new i0.EventEmitter();
             this._value = [];
             this._totalRecords = 0;
             this._first = 0;
@@ -785,7 +820,7 @@
                                 result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
                             return (_this.sortOrder * result);
                         });
-                        this._value = __spread(this.value);
+                        this._value = __spreadArray([], __read(this.value));
                     }
                     if (this.hasFilter()) {
                         this._filter();
@@ -817,7 +852,7 @@
                         this.value.sort(function (data1, data2) {
                             return _this.multisortField(data1, data2, _this.multiSortMeta, 0);
                         });
-                        this._value = __spread(this.value);
+                        this._value = __spreadArray([], __read(this.value));
                     }
                     if (this.hasFilter()) {
                         this._filter();
@@ -940,7 +975,7 @@
                                     this._selection = [];
                                     this.selectionKeys = {};
                                 }
-                                this._selection = __spread(this.selection, [rowData]);
+                                this._selection = __spreadArray(__spreadArray([], __read(this.selection)), [rowData]);
                                 this.selectionChange.emit(this.selection);
                                 if (dataKeyValue) {
                                     this.selectionKeys[dataKeyValue] = 1;
@@ -978,7 +1013,7 @@
                                 }
                             }
                             else {
-                                this._selection = this.selection ? __spread(this.selection, [rowData]) : [rowData];
+                                this._selection = this.selection ? __spreadArray(__spreadArray([], __read(this.selection)), [rowData]) : [rowData];
                                 this.selectionChange.emit(this.selection);
                                 this.onRowSelect.emit({ originalEvent: event.originalEvent, data: rowData, type: 'row', index: event.rowIndex });
                                 if (dataKeyValue) {
@@ -1022,7 +1057,7 @@
                             }
                         }
                         else if (this.isMultipleSelectionMode()) {
-                            this._selection = this.selection ? __spread(this.selection, [rowData]) : [rowData];
+                            this._selection = this.selection ? __spreadArray(__spreadArray([], __read(this.selection)), [rowData]) : [rowData];
                             this.selectionChange.emit(this.selection);
                             if (dataKeyValue) {
                                 this.selectionKeys[dataKeyValue] = 1;
@@ -1058,7 +1093,7 @@
                 var rangeRowData = this.filteredValue ? this.filteredValue[i] : this.value[i];
                 if (!this.isSelected(rangeRowData)) {
                     rangeRowsData.push(rangeRowData);
-                    this._selection = __spread(this.selection, [rangeRowData]);
+                    this._selection = __spreadArray(__spreadArray([], __read(this.selection)), [rangeRowData]);
                     var dataKeyValue = this.dataKey ? String(utils.ObjectUtils.resolveFieldData(rangeRowData, this.dataKey)) : null;
                     if (dataKeyValue) {
                         this.selectionKeys[dataKeyValue] = 1;
@@ -1159,7 +1194,7 @@
                 }
             }
             else {
-                this._selection = this.selection ? __spread(this.selection, [rowData]) : [rowData];
+                this._selection = this.selection ? __spreadArray(__spreadArray([], __read(this.selection)), [rowData]) : [rowData];
                 this.selectionChange.emit(this.selection);
                 this.onRowSelect.emit({ originalEvent: event.originalEvent, index: event.rowIndex, data: rowData, type: 'checkbox' });
                 if (dataKeyValue) {
@@ -1257,7 +1292,7 @@
                                         for (var filterMeta_1 = (e_2 = void 0, __values(filterMeta)), filterMeta_1_1 = filterMeta_1.next(); !filterMeta_1_1.done; filterMeta_1_1 = filterMeta_1.next()) {
                                             var meta = filterMeta_1_1.value;
                                             localMatch = this.executeLocalFilter(filterField, this.value[i], meta);
-                                            if ((meta.operator === api.FilterOperator.OR && localMatch) || (meta.operator === api.FilterOperator.AND && !localMatch)) {
+                                            if ((meta.operator === i1.FilterOperator.OR && localMatch) || (meta.operator === i1.FilterOperator.AND && !localMatch)) {
                                                 break;
                                             }
                                         }
@@ -1324,7 +1359,7 @@
         };
         Table.prototype.executeLocalFilter = function (field, rowData, filterMeta) {
             var filterValue = filterMeta.value;
-            var filterMatchMode = filterMeta.matchMode || api.FilterMatchMode.STARTS_WITH;
+            var filterMatchMode = filterMeta.matchMode || i1.FilterMatchMode.STARTS_WITH;
             var dataFieldValue = utils.ObjectUtils.resolveFieldData(rowData, field);
             var filterConstraint = this.filterService.filters[filterMatchMode];
             return filterConstraint(dataFieldValue, filterValue, this.filterLocale);
@@ -1373,14 +1408,14 @@
             var _this = this;
             var data;
             var csv = '';
-            var columns = this.frozenColumns ? __spread(this.frozenColumns, this.columns) : this.columns;
+            var columns = this.frozenColumns ? __spreadArray(__spreadArray([], __read(this.frozenColumns)), __read(this.columns)) : this.columns;
             if (options && options.selectionOnly) {
                 data = this.selection || [];
             }
             else {
                 data = this.filteredValue || this.value;
                 if (this.frozenValue) {
-                    data = data ? __spread(this.frozenValue, data) : this.frozenValue;
+                    data = data ? __spreadArray(__spreadArray([], __read(this.frozenValue)), __read(data)) : this.frozenValue;
                 }
             }
             //headers
@@ -1636,9 +1671,10 @@
             var scrollableBodyTable = dom.DomHandler.findSingle(scrollableBody, '.p-datatable-scrollable-body table') || dom.DomHandler.findSingle(scrollableView, 'cdk-virtual-scroll-viewport table');
             var scrollableHeaderTable = dom.DomHandler.findSingle(scrollableHeader, 'table.p-datatable-scrollable-header-table');
             var scrollableFooterTable = dom.DomHandler.findSingle(scrollableFooter, 'table.p-datatable-scrollable-footer-table');
+            var frozenWidth = this.frozenWidth ? parseInt(this.frozenWidth, 10) : 0;
             var scrollableBodyTableWidth = column ? scrollableBodyTable.offsetWidth + delta : newColumnWidth;
             var scrollableHeaderTableWidth = column ? scrollableHeaderTable.offsetWidth + delta : newColumnWidth;
-            var isContainerInViewport = this.containerViewChild.nativeElement.offsetWidth >= scrollableBodyTableWidth;
+            var isContainerInViewport = this.containerViewChild.nativeElement.offsetWidth - frozenWidth >= scrollableBodyTableWidth;
             var setWidth = function (container, table, width, isContainerInViewport) {
                 if (container && table) {
                     container.style.width = isContainerInViewport ? width + dom.DomHandler.calculateScrollbarWidth(scrollableBody) + 'px' : 'auto';
@@ -2027,128 +2063,233 @@
         };
         return Table;
     }());
-    Table.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'p-table',
-                    template: "\n        <div #container [ngStyle]=\"style\" [class]=\"styleClass\" data-scrollselectors=\".p-datatable-scrollable-body, .p-datatable-unfrozen-view .p-datatable-scrollable-body\"\n            [ngClass]=\"{'p-datatable p-component': true,\n                'p-datatable-hoverable-rows': (rowHover||selectionMode),\n                'p-datatable-auto-layout': autoLayout,\n                'p-datatable-resizable': resizableColumns,\n                'p-datatable-resizable-fit': (resizableColumns && columnResizeMode === 'fit'),\n                'p-datatable-scrollable': scrollable,\n                'p-datatable-flex-scrollable': (scrollable && scrollHeight === 'flex'),\n                'p-datatable-responsive': responsive}\">\n            <div class=\"p-datatable-loading-overlay p-component-overlay\" *ngIf=\"loading && showLoader\">\n                <i [class]=\"'p-datatable-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <div *ngIf=\"captionTemplate\" class=\"p-datatable-header\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"p-paginator-top\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition =='both')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\n                [currentPageReportTemplate]=\"currentPageReportTemplate\" [showFirstLastIcon]=\"showFirstLastIcon\" [dropdownItemTemplate]=\"paginatorDropdownItemTemplate\" [showCurrentPageReport]=\"showCurrentPageReport\" [showJumpToPageDropdown]=\"showJumpToPageDropdown\" [showPageLinks]=\"showPageLinks\"></p-paginator>\n\n            <div class=\"p-datatable-wrapper\" *ngIf=\"!scrollable\">\n                <table role=\"grid\" #table [ngClass]=\"tableStyleClass\" [ngStyle]=\"tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"p-datatable-thead\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate; context: {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tbody class=\"p-datatable-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"bodyTemplate\"></tbody>\n                    <tfoot *ngIf=\"footerTemplate\" class=\"p-datatable-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                </table>\n            </div>\n\n            <div class=\"p-datatable-scrollable-wrapper\" *ngIf=\"scrollable\">\n               <div class=\"p-datatable-scrollable-view p-datatable-frozen-view\" *ngIf=\"frozenColumns||frozenBodyTemplate\" #scrollableFrozenView [pScrollableView]=\"frozenColumns\" [frozen]=\"true\" [ngStyle]=\"{width: frozenWidth}\" [scrollHeight]=\"scrollHeight\"></div>\n               <div class=\"p-datatable-scrollable-view\" #scrollableView [pScrollableView]=\"columns\" [frozen]=\"false\" [scrollHeight]=\"scrollHeight\" [ngStyle]=\"{left: frozenWidth, width: 'calc(100% - '+frozenWidth+')'}\"></div>\n            </div>\n\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"p-paginator-bottom\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\n                [currentPageReportTemplate]=\"currentPageReportTemplate\" [showFirstLastIcon]=\"showFirstLastIcon\" [dropdownItemTemplate]=\"paginatorDropdownItemTemplate\" [showCurrentPageReport]=\"showCurrentPageReport\" [showJumpToPageDropdown]=\"showJumpToPageDropdown\" [showPageLinks]=\"showPageLinks\"></p-paginator>\n\n            <div *ngIf=\"summaryTemplate\" class=\"p-datatable-footer\">\n                <ng-container *ngTemplateOutlet=\"summaryTemplate\"></ng-container>\n            </div>\n\n            <div #resizeHelper class=\"p-column-resizer-helper\" style=\"display:none\" *ngIf=\"resizableColumns\"></div>\n            <span #reorderIndicatorUp class=\"pi pi-arrow-down p-datatable-reorder-indicator-up\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n            <span #reorderIndicatorDown class=\"pi pi-arrow-up p-datatable-reorder-indicator-down\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n        </div>\n    ",
-                    providers: [TableService],
-                    changeDetection: core.ChangeDetectionStrategy.Default,
-                    encapsulation: core.ViewEncapsulation.None,
-                    styles: [".p-datatable{position:relative}.p-datatable table{border-collapse:collapse;table-layout:fixed;width:100%}.p-datatable .p-sortable-column{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;user-select:none}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-badge,.p-datatable .p-sortable-column .p-sortable-column-icon{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{align-items:center;display:inline-flex;justify-content:center}.p-datatable-auto-layout>.p-datatable-wrapper{overflow-x:auto}.p-datatable-auto-layout>.p-datatable-wrapper>table{table-layout:auto}.p-datatable-hoverable-rows .p-selectable-row{cursor:pointer}.p-datatable-scrollable-wrapper{position:relative}.p-datatable-scrollable-footer,.p-datatable-scrollable-header{overflow:hidden}.p-datatable-scrollable-body{overflow:auto;position:relative}.p-datatable-scrollable-body>table>.p-datatable-tbody>tr:first-child>td{border-top:0}.p-datatable-virtual-table{position:absolute}.p-datatable-frozen-view .p-datatable-scrollable-body{overflow:hidden}.p-datatable-frozen-view>.p-datatable-scrollable-body>table>.p-datatable-tbody>tr>td:last-child{border-right:0}.p-datatable-unfrozen-view{position:absolute;top:0}.p-datatable-flex-scrollable,.p-datatable-flex-scrollable .p-datatable-scrollable-view,.p-datatable-flex-scrollable .p-datatable-scrollable-wrapper{display:flex;flex:1;flex-direction:column;height:100%}.p-datatable-flex-scrollable .p-datatable-scrollable-body,.p-datatable-flex-scrollable .p-datatable-virtual-scrollable-body{flex:1}.p-datatable-resizable>.p-datatable-wrapper{overflow-x:auto}.p-datatable-resizable .p-datatable-tbody>tr>td,.p-datatable-resizable .p-datatable-tfoot>tr>td,.p-datatable-resizable .p-datatable-thead>tr>th{overflow:hidden;white-space:nowrap}.p-datatable-resizable .p-resizable-column{background-clip:padding-box;position:relative}.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{border:1px solid transparent;cursor:col-resize;display:block;height:100%;margin:0;padding:0;position:absolute!important;right:0;top:0;width:.5rem}.p-datatable .p-column-resizer-helper{display:none;position:absolute;width:1px;z-index:10}.p-datatable .p-row-editor-cancel,.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-toggler{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-down,.p-datatable-reorder-indicator-up{display:none;position:absolute}.p-datatable-reorderablerow-handle,[pReorderableColumn]{cursor:move}.p-datatable .p-datatable-loading-overlay{align-items:center;display:flex;justify-content:center;position:absolute;z-index:2}.p-column-filter-row{align-items:center;display:flex;width:100%}.p-column-filter-menu{display:inline-flex}.p-column-filter-row p-columnfilterformelement{flex:1 1 auto;width:1%}.p-column-filter-clear-button,.p-column-filter-menu-button{align-items:center;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;position:relative;text-decoration:none}.p-column-filter-overlay{position:absolute}.p-column-filter-row-items{list-style:none;margin:0;padding:0}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{align-items:center;display:flex;justify-content:space-between}.p-column-filter-buttonbar .p-button{width:auto}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{display:none}cdk-virtual-scroll-viewport{outline:0 none}@media screen and (max-width:40em){.p-datatable.p-datatable-responsive .p-datatable-tfoot>tr>td,.p-datatable.p-datatable-responsive .p-datatable-thead>tr>th{display:none!important}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td{border:0;clear:left;display:block;float:left;text-align:left;width:100%}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{display:inline-block;font-weight:700;margin:-.4em 1em -.4em -.4rem;min-width:30%;padding:.4rem}}"]
-                },] }
-    ];
-    Table.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.NgZone },
-        { type: TableService },
-        { type: core.ChangeDetectorRef },
-        { type: api.FilterService }
-    ]; };
-    Table.propDecorators = {
-        frozenColumns: [{ type: core.Input }],
-        frozenValue: [{ type: core.Input }],
-        style: [{ type: core.Input }],
-        styleClass: [{ type: core.Input }],
-        tableStyle: [{ type: core.Input }],
-        tableStyleClass: [{ type: core.Input }],
-        paginator: [{ type: core.Input }],
-        pageLinks: [{ type: core.Input }],
-        rowsPerPageOptions: [{ type: core.Input }],
-        alwaysShowPaginator: [{ type: core.Input }],
-        paginatorPosition: [{ type: core.Input }],
-        paginatorDropdownAppendTo: [{ type: core.Input }],
-        paginatorDropdownScrollHeight: [{ type: core.Input }],
-        currentPageReportTemplate: [{ type: core.Input }],
-        showCurrentPageReport: [{ type: core.Input }],
-        showJumpToPageDropdown: [{ type: core.Input }],
-        showFirstLastIcon: [{ type: core.Input }],
-        showPageLinks: [{ type: core.Input }],
-        defaultSortOrder: [{ type: core.Input }],
-        sortMode: [{ type: core.Input }],
-        resetPageOnSort: [{ type: core.Input }],
-        selectionMode: [{ type: core.Input }],
-        selectionChange: [{ type: core.Output }],
-        contextMenuSelection: [{ type: core.Input }],
-        contextMenuSelectionChange: [{ type: core.Output }],
-        contextMenuSelectionMode: [{ type: core.Input }],
-        dataKey: [{ type: core.Input }],
-        metaKeySelection: [{ type: core.Input }],
-        rowTrackBy: [{ type: core.Input }],
-        lazy: [{ type: core.Input }],
-        lazyLoadOnInit: [{ type: core.Input }],
-        compareSelectionBy: [{ type: core.Input }],
-        csvSeparator: [{ type: core.Input }],
-        exportFilename: [{ type: core.Input }],
-        filters: [{ type: core.Input }],
-        globalFilterFields: [{ type: core.Input }],
-        filterDelay: [{ type: core.Input }],
-        filterLocale: [{ type: core.Input }],
-        expandedRowKeys: [{ type: core.Input }],
-        editingRowKeys: [{ type: core.Input }],
-        rowExpandMode: [{ type: core.Input }],
-        scrollable: [{ type: core.Input }],
-        scrollHeight: [{ type: core.Input }],
-        virtualScroll: [{ type: core.Input }],
-        virtualScrollDelay: [{ type: core.Input }],
-        virtualRowHeight: [{ type: core.Input }],
-        frozenWidth: [{ type: core.Input }],
-        responsive: [{ type: core.Input }],
-        contextMenu: [{ type: core.Input }],
-        resizableColumns: [{ type: core.Input }],
-        columnResizeMode: [{ type: core.Input }],
-        reorderableColumns: [{ type: core.Input }],
-        loading: [{ type: core.Input }],
-        loadingIcon: [{ type: core.Input }],
-        showLoader: [{ type: core.Input }],
-        rowHover: [{ type: core.Input }],
-        customSort: [{ type: core.Input }],
-        showInitialSortBadge: [{ type: core.Input }],
-        autoLayout: [{ type: core.Input }],
-        exportFunction: [{ type: core.Input }],
-        stateKey: [{ type: core.Input }],
-        stateStorage: [{ type: core.Input }],
-        editMode: [{ type: core.Input }],
-        minBufferPx: [{ type: core.Input }],
-        maxBufferPx: [{ type: core.Input }],
-        onRowSelect: [{ type: core.Output }],
-        onRowUnselect: [{ type: core.Output }],
-        onPage: [{ type: core.Output }],
-        onSort: [{ type: core.Output }],
-        onFilter: [{ type: core.Output }],
-        onLazyLoad: [{ type: core.Output }],
-        onRowExpand: [{ type: core.Output }],
-        onRowCollapse: [{ type: core.Output }],
-        onContextMenuSelect: [{ type: core.Output }],
-        onColResize: [{ type: core.Output }],
-        onColReorder: [{ type: core.Output }],
-        onRowReorder: [{ type: core.Output }],
-        onEditInit: [{ type: core.Output }],
-        onEditComplete: [{ type: core.Output }],
-        onEditCancel: [{ type: core.Output }],
-        onHeaderCheckboxToggle: [{ type: core.Output }],
-        sortFunction: [{ type: core.Output }],
-        firstChange: [{ type: core.Output }],
-        rowsChange: [{ type: core.Output }],
-        onStateSave: [{ type: core.Output }],
-        onStateRestore: [{ type: core.Output }],
-        containerViewChild: [{ type: core.ViewChild, args: ['container',] }],
-        resizeHelperViewChild: [{ type: core.ViewChild, args: ['resizeHelper',] }],
-        reorderIndicatorUpViewChild: [{ type: core.ViewChild, args: ['reorderIndicatorUp',] }],
-        reorderIndicatorDownViewChild: [{ type: core.ViewChild, args: ['reorderIndicatorDown',] }],
-        tableViewChild: [{ type: core.ViewChild, args: ['table',] }],
-        scrollableViewChild: [{ type: core.ViewChild, args: ['scrollableView',] }],
-        scrollableFrozenViewChild: [{ type: core.ViewChild, args: ['scrollableFrozenView',] }],
-        templates: [{ type: core.ContentChildren, args: [api.PrimeTemplate,] }],
-        value: [{ type: core.Input }],
-        columns: [{ type: core.Input }],
-        first: [{ type: core.Input }],
-        rows: [{ type: core.Input }],
-        totalRecords: [{ type: core.Input }],
-        sortField: [{ type: core.Input }],
-        sortOrder: [{ type: core.Input }],
-        multiSortMeta: [{ type: core.Input }],
-        selection: [{ type: core.Input }]
-    };
+    Table.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: Table, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: TableService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.FilterService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Table.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: Table, selector: "p-table", inputs: { frozenColumns: "frozenColumns", frozenValue: "frozenValue", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: "paginator", pageLinks: "pageLinks", rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: "alwaysShowPaginator", paginatorPosition: "paginatorPosition", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: "showCurrentPageReport", showJumpToPageDropdown: "showJumpToPageDropdown", showFirstLastIcon: "showFirstLastIcon", showPageLinks: "showPageLinks", defaultSortOrder: "defaultSortOrder", sortMode: "sortMode", resetPageOnSort: "resetPageOnSort", selectionMode: "selectionMode", contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: "metaKeySelection", rowTrackBy: "rowTrackBy", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: "filterDelay", filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollDelay: "virtualScrollDelay", virtualRowHeight: "virtualRowHeight", frozenWidth: "frozenWidth", responsive: "responsive", contextMenu: "contextMenu", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode", reorderableColumns: "reorderableColumns", loading: "loading", loadingIcon: "loadingIcon", showLoader: "showLoader", rowHover: "rowHover", customSort: "customSort", showInitialSortBadge: "showInitialSortBadge", autoLayout: "autoLayout", exportFunction: "exportFunction", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection" }, outputs: { selectionChange: "selectionChange", contextMenuSelectionChange: "contextMenuSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onPage: "onPage", onSort: "onSort", onFilter: "onFilter", onLazyLoad: "onLazyLoad", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onContextMenuSelect: "onContextMenuSelect", onColResize: "onColResize", onColReorder: "onColReorder", onRowReorder: "onRowReorder", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", sortFunction: "sortFunction", firstChange: "firstChange", rowsChange: "rowsChange", onStateSave: "onStateSave", onStateRestore: "onStateRestore" }, providers: [TableService], queries: [{ propertyName: "templates", predicate: i1.PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "scrollableViewChild", first: true, predicate: ["scrollableView"], descendants: true }, { propertyName: "scrollableFrozenViewChild", first: true, predicate: ["scrollableFrozenView"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "\n        <div #container [ngStyle]=\"style\" [class]=\"styleClass\" data-scrollselectors=\".p-datatable-scrollable-body, .p-datatable-unfrozen-view .p-datatable-scrollable-body\"\n            [ngClass]=\"{'p-datatable p-component': true,\n                'p-datatable-hoverable-rows': (rowHover||selectionMode),\n                'p-datatable-auto-layout': autoLayout,\n                'p-datatable-resizable': resizableColumns,\n                'p-datatable-resizable-fit': (resizableColumns && columnResizeMode === 'fit'),\n                'p-datatable-scrollable': scrollable,\n                'p-datatable-flex-scrollable': (scrollable && scrollHeight === 'flex'),\n                'p-datatable-responsive': responsive}\">\n            <div class=\"p-datatable-loading-overlay p-component-overlay\" *ngIf=\"loading && showLoader\">\n                <i [class]=\"'p-datatable-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <div *ngIf=\"captionTemplate\" class=\"p-datatable-header\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"p-paginator-top\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition =='both')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\n                [currentPageReportTemplate]=\"currentPageReportTemplate\" [showFirstLastIcon]=\"showFirstLastIcon\" [dropdownItemTemplate]=\"paginatorDropdownItemTemplate\" [showCurrentPageReport]=\"showCurrentPageReport\" [showJumpToPageDropdown]=\"showJumpToPageDropdown\" [showPageLinks]=\"showPageLinks\"></p-paginator>\n\n            <div class=\"p-datatable-wrapper\" *ngIf=\"!scrollable\">\n                <table role=\"grid\" #table [ngClass]=\"tableStyleClass\" [ngStyle]=\"tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"p-datatable-thead\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate; context: {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tbody class=\"p-datatable-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"bodyTemplate\"></tbody>\n                    <tfoot *ngIf=\"footerTemplate\" class=\"p-datatable-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                </table>\n            </div>\n\n            <div class=\"p-datatable-scrollable-wrapper\" *ngIf=\"scrollable\">\n               <div class=\"p-datatable-scrollable-view p-datatable-frozen-view\" *ngIf=\"frozenColumns||frozenBodyTemplate\" #scrollableFrozenView [pScrollableView]=\"frozenColumns\" [frozen]=\"true\" [ngStyle]=\"{width: frozenWidth}\" [scrollHeight]=\"scrollHeight\"></div>\n               <div class=\"p-datatable-scrollable-view\" #scrollableView [pScrollableView]=\"columns\" [frozen]=\"false\" [scrollHeight]=\"scrollHeight\" [ngStyle]=\"{left: frozenWidth, width: 'calc(100% - '+frozenWidth+')'}\"></div>\n            </div>\n\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"p-paginator-bottom\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\n                [currentPageReportTemplate]=\"currentPageReportTemplate\" [showFirstLastIcon]=\"showFirstLastIcon\" [dropdownItemTemplate]=\"paginatorDropdownItemTemplate\" [showCurrentPageReport]=\"showCurrentPageReport\" [showJumpToPageDropdown]=\"showJumpToPageDropdown\" [showPageLinks]=\"showPageLinks\"></p-paginator>\n\n            <div *ngIf=\"summaryTemplate\" class=\"p-datatable-footer\">\n                <ng-container *ngTemplateOutlet=\"summaryTemplate\"></ng-container>\n            </div>\n\n            <div #resizeHelper class=\"p-column-resizer-helper\" style=\"display:none\" *ngIf=\"resizableColumns\"></div>\n            <span #reorderIndicatorUp class=\"pi pi-arrow-down p-datatable-reorder-indicator-up\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n            <span #reorderIndicatorDown class=\"pi pi-arrow-up p-datatable-reorder-indicator-down\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n        </div>\n    ", isInline: true, styles: [".p-datatable{position:relative}.p-datatable table{border-collapse:collapse;width:100%;table-layout:fixed}.p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-badge,.p-datatable .p-sortable-column .p-sortable-column-icon{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}.p-datatable-auto-layout>.p-datatable-wrapper{overflow-x:auto}.p-datatable-auto-layout>.p-datatable-wrapper>table{table-layout:auto}.p-datatable-hoverable-rows .p-selectable-row{cursor:pointer}.p-datatable-scrollable-wrapper{position:relative}.p-datatable-scrollable-footer,.p-datatable-scrollable-header{overflow:hidden}.p-datatable-scrollable-body{overflow:auto;position:relative}.p-datatable-scrollable-body>table>.p-datatable-tbody>tr:first-child>td{border-top:0}.p-datatable-virtual-table{position:absolute}.p-datatable-frozen-view .p-datatable-scrollable-body{overflow:hidden}.p-datatable-frozen-view>.p-datatable-scrollable-body>table>.p-datatable-tbody>tr>td:last-child{border-right:0}.p-datatable-unfrozen-view{position:absolute;top:0}.p-datatable-flex-scrollable,.p-datatable-flex-scrollable .p-datatable-scrollable-view,.p-datatable-flex-scrollable .p-datatable-scrollable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}.p-datatable-flex-scrollable .p-datatable-scrollable-body,.p-datatable-flex-scrollable .p-datatable-virtual-scrollable-body{flex:1}.p-datatable-resizable>.p-datatable-wrapper{overflow-x:auto}.p-datatable-resizable .p-datatable-tbody>tr>td,.p-datatable-resizable .p-datatable-tfoot>tr>td,.p-datatable-resizable .p-datatable-thead>tr>th{overflow:hidden;white-space:nowrap}.p-datatable-resizable .p-resizable-column{background-clip:padding-box;position:relative}.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5rem;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.p-datatable .p-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.p-datatable .p-row-editor-cancel,.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-toggler{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-down,.p-datatable-reorder-indicator-up{position:absolute;display:none}.p-datatable-reorderablerow-handle,[pReorderableColumn]{cursor:move}.p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2}.p-column-filter-row{display:flex;align-items:center;width:100%}.p-column-filter-menu{display:inline-flex}.p-column-filter-row p-columnfilterformelement{flex:1 1 auto;width:1%}.p-column-filter-clear-button,.p-column-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}.p-column-filter-overlay{position:absolute}.p-column-filter-row-items{margin:0;padding:0;list-style:none}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{display:flex;align-items:center;justify-content:space-between}.p-column-filter-buttonbar .p-button{width:auto}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{display:none}cdk-virtual-scroll-viewport{outline:0 none}@media screen and (max-width:40em){.p-datatable.p-datatable-responsive .p-datatable-tfoot>tr>td,.p-datatable.p-datatable-responsive .p-datatable-thead>tr>th{display:none!important}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td{text-align:left;display:block;width:100%;float:left;clear:left;border:0}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{padding:.4rem;min-width:30%;display:inline-block;margin:-.4em 1em -.4em -.4rem;font-weight:700}}"], components: [{ type: i0__namespace.forwardRef(function () { return i2__namespace.Paginator; }), selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { type: i0__namespace.forwardRef(function () { return TableBody; }), selector: "[pTableBody]", inputs: ["pTableBody", "pTableBodyTemplate", "frozen"] }, { type: i0__namespace.forwardRef(function () { return ScrollableView; }), selector: "[pScrollableView]", inputs: ["pScrollableView", "frozen", "scrollHeight"] }], directives: [{ type: i0__namespace.forwardRef(function () { return i3__namespace.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i0__namespace.forwardRef(function () { return i3__namespace.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0__namespace.forwardRef(function () { return i3__namespace.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0__namespace.forwardRef(function () { return i3__namespace.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.Default, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: Table, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'p-table',
+                        template: "\n        <div #container [ngStyle]=\"style\" [class]=\"styleClass\" data-scrollselectors=\".p-datatable-scrollable-body, .p-datatable-unfrozen-view .p-datatable-scrollable-body\"\n            [ngClass]=\"{'p-datatable p-component': true,\n                'p-datatable-hoverable-rows': (rowHover||selectionMode),\n                'p-datatable-auto-layout': autoLayout,\n                'p-datatable-resizable': resizableColumns,\n                'p-datatable-resizable-fit': (resizableColumns && columnResizeMode === 'fit'),\n                'p-datatable-scrollable': scrollable,\n                'p-datatable-flex-scrollable': (scrollable && scrollHeight === 'flex'),\n                'p-datatable-responsive': responsive}\">\n            <div class=\"p-datatable-loading-overlay p-component-overlay\" *ngIf=\"loading && showLoader\">\n                <i [class]=\"'p-datatable-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <div *ngIf=\"captionTemplate\" class=\"p-datatable-header\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"p-paginator-top\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition =='both')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\n                [currentPageReportTemplate]=\"currentPageReportTemplate\" [showFirstLastIcon]=\"showFirstLastIcon\" [dropdownItemTemplate]=\"paginatorDropdownItemTemplate\" [showCurrentPageReport]=\"showCurrentPageReport\" [showJumpToPageDropdown]=\"showJumpToPageDropdown\" [showPageLinks]=\"showPageLinks\"></p-paginator>\n\n            <div class=\"p-datatable-wrapper\" *ngIf=\"!scrollable\">\n                <table role=\"grid\" #table [ngClass]=\"tableStyleClass\" [ngStyle]=\"tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"p-datatable-thead\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate; context: {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tbody class=\"p-datatable-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"bodyTemplate\"></tbody>\n                    <tfoot *ngIf=\"footerTemplate\" class=\"p-datatable-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                </table>\n            </div>\n\n            <div class=\"p-datatable-scrollable-wrapper\" *ngIf=\"scrollable\">\n               <div class=\"p-datatable-scrollable-view p-datatable-frozen-view\" *ngIf=\"frozenColumns||frozenBodyTemplate\" #scrollableFrozenView [pScrollableView]=\"frozenColumns\" [frozen]=\"true\" [ngStyle]=\"{width: frozenWidth}\" [scrollHeight]=\"scrollHeight\"></div>\n               <div class=\"p-datatable-scrollable-view\" #scrollableView [pScrollableView]=\"columns\" [frozen]=\"false\" [scrollHeight]=\"scrollHeight\" [ngStyle]=\"{left: frozenWidth, width: 'calc(100% - '+frozenWidth+')'}\"></div>\n            </div>\n\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"p-paginator-bottom\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\" [dropdownScrollHeight]=\"paginatorDropdownScrollHeight\"\n                [currentPageReportTemplate]=\"currentPageReportTemplate\" [showFirstLastIcon]=\"showFirstLastIcon\" [dropdownItemTemplate]=\"paginatorDropdownItemTemplate\" [showCurrentPageReport]=\"showCurrentPageReport\" [showJumpToPageDropdown]=\"showJumpToPageDropdown\" [showPageLinks]=\"showPageLinks\"></p-paginator>\n\n            <div *ngIf=\"summaryTemplate\" class=\"p-datatable-footer\">\n                <ng-container *ngTemplateOutlet=\"summaryTemplate\"></ng-container>\n            </div>\n\n            <div #resizeHelper class=\"p-column-resizer-helper\" style=\"display:none\" *ngIf=\"resizableColumns\"></div>\n            <span #reorderIndicatorUp class=\"pi pi-arrow-down p-datatable-reorder-indicator-up\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n            <span #reorderIndicatorDown class=\"pi pi-arrow-up p-datatable-reorder-indicator-down\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n        </div>\n    ",
+                        providers: [TableService],
+                        changeDetection: i0.ChangeDetectionStrategy.Default,
+                        encapsulation: i0.ViewEncapsulation.None,
+                        styleUrls: ['./table.css']
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: TableService }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.FilterService }]; }, propDecorators: { frozenColumns: [{
+                    type: i0.Input
+                }], frozenValue: [{
+                    type: i0.Input
+                }], style: [{
+                    type: i0.Input
+                }], styleClass: [{
+                    type: i0.Input
+                }], tableStyle: [{
+                    type: i0.Input
+                }], tableStyleClass: [{
+                    type: i0.Input
+                }], paginator: [{
+                    type: i0.Input
+                }], pageLinks: [{
+                    type: i0.Input
+                }], rowsPerPageOptions: [{
+                    type: i0.Input
+                }], alwaysShowPaginator: [{
+                    type: i0.Input
+                }], paginatorPosition: [{
+                    type: i0.Input
+                }], paginatorDropdownAppendTo: [{
+                    type: i0.Input
+                }], paginatorDropdownScrollHeight: [{
+                    type: i0.Input
+                }], currentPageReportTemplate: [{
+                    type: i0.Input
+                }], showCurrentPageReport: [{
+                    type: i0.Input
+                }], showJumpToPageDropdown: [{
+                    type: i0.Input
+                }], showFirstLastIcon: [{
+                    type: i0.Input
+                }], showPageLinks: [{
+                    type: i0.Input
+                }], defaultSortOrder: [{
+                    type: i0.Input
+                }], sortMode: [{
+                    type: i0.Input
+                }], resetPageOnSort: [{
+                    type: i0.Input
+                }], selectionMode: [{
+                    type: i0.Input
+                }], selectionChange: [{
+                    type: i0.Output
+                }], contextMenuSelection: [{
+                    type: i0.Input
+                }], contextMenuSelectionChange: [{
+                    type: i0.Output
+                }], contextMenuSelectionMode: [{
+                    type: i0.Input
+                }], dataKey: [{
+                    type: i0.Input
+                }], metaKeySelection: [{
+                    type: i0.Input
+                }], rowTrackBy: [{
+                    type: i0.Input
+                }], lazy: [{
+                    type: i0.Input
+                }], lazyLoadOnInit: [{
+                    type: i0.Input
+                }], compareSelectionBy: [{
+                    type: i0.Input
+                }], csvSeparator: [{
+                    type: i0.Input
+                }], exportFilename: [{
+                    type: i0.Input
+                }], filters: [{
+                    type: i0.Input
+                }], globalFilterFields: [{
+                    type: i0.Input
+                }], filterDelay: [{
+                    type: i0.Input
+                }], filterLocale: [{
+                    type: i0.Input
+                }], expandedRowKeys: [{
+                    type: i0.Input
+                }], editingRowKeys: [{
+                    type: i0.Input
+                }], rowExpandMode: [{
+                    type: i0.Input
+                }], scrollable: [{
+                    type: i0.Input
+                }], scrollHeight: [{
+                    type: i0.Input
+                }], virtualScroll: [{
+                    type: i0.Input
+                }], virtualScrollDelay: [{
+                    type: i0.Input
+                }], virtualRowHeight: [{
+                    type: i0.Input
+                }], frozenWidth: [{
+                    type: i0.Input
+                }], responsive: [{
+                    type: i0.Input
+                }], contextMenu: [{
+                    type: i0.Input
+                }], resizableColumns: [{
+                    type: i0.Input
+                }], columnResizeMode: [{
+                    type: i0.Input
+                }], reorderableColumns: [{
+                    type: i0.Input
+                }], loading: [{
+                    type: i0.Input
+                }], loadingIcon: [{
+                    type: i0.Input
+                }], showLoader: [{
+                    type: i0.Input
+                }], rowHover: [{
+                    type: i0.Input
+                }], customSort: [{
+                    type: i0.Input
+                }], showInitialSortBadge: [{
+                    type: i0.Input
+                }], autoLayout: [{
+                    type: i0.Input
+                }], exportFunction: [{
+                    type: i0.Input
+                }], stateKey: [{
+                    type: i0.Input
+                }], stateStorage: [{
+                    type: i0.Input
+                }], editMode: [{
+                    type: i0.Input
+                }], minBufferPx: [{
+                    type: i0.Input
+                }], maxBufferPx: [{
+                    type: i0.Input
+                }], onRowSelect: [{
+                    type: i0.Output
+                }], onRowUnselect: [{
+                    type: i0.Output
+                }], onPage: [{
+                    type: i0.Output
+                }], onSort: [{
+                    type: i0.Output
+                }], onFilter: [{
+                    type: i0.Output
+                }], onLazyLoad: [{
+                    type: i0.Output
+                }], onRowExpand: [{
+                    type: i0.Output
+                }], onRowCollapse: [{
+                    type: i0.Output
+                }], onContextMenuSelect: [{
+                    type: i0.Output
+                }], onColResize: [{
+                    type: i0.Output
+                }], onColReorder: [{
+                    type: i0.Output
+                }], onRowReorder: [{
+                    type: i0.Output
+                }], onEditInit: [{
+                    type: i0.Output
+                }], onEditComplete: [{
+                    type: i0.Output
+                }], onEditCancel: [{
+                    type: i0.Output
+                }], onHeaderCheckboxToggle: [{
+                    type: i0.Output
+                }], sortFunction: [{
+                    type: i0.Output
+                }], firstChange: [{
+                    type: i0.Output
+                }], rowsChange: [{
+                    type: i0.Output
+                }], onStateSave: [{
+                    type: i0.Output
+                }], onStateRestore: [{
+                    type: i0.Output
+                }], containerViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['container']
+                }], resizeHelperViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['resizeHelper']
+                }], reorderIndicatorUpViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['reorderIndicatorUp']
+                }], reorderIndicatorDownViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['reorderIndicatorDown']
+                }], tableViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['table']
+                }], scrollableViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['scrollableView']
+                }], scrollableFrozenViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['scrollableFrozenView']
+                }], templates: [{
+                    type: i0.ContentChildren,
+                    args: [i1.PrimeTemplate]
+                }], value: [{
+                    type: i0.Input
+                }], columns: [{
+                    type: i0.Input
+                }], first: [{
+                    type: i0.Input
+                }], rows: [{
+                    type: i0.Input
+                }], totalRecords: [{
+                    type: i0.Input
+                }], sortField: [{
+                    type: i0.Input
+                }], sortOrder: [{
+                    type: i0.Input
+                }], multiSortMeta: [{
+                    type: i0.Input
+                }], selection: [{
+                    type: i0.Input
+                }] } });
     var TableBody = /** @class */ (function () {
         function TableBody(dt, tableService, cd) {
             var _this = this;
@@ -2168,24 +2309,25 @@
         };
         return TableBody;
     }());
-    TableBody.decorators = [
-        { type: core.Component, args: [{
-                    selector: '[pTableBody]',
-                    template: "\n        <ng-container *ngIf=\"!dt.expandedRowTemplate && !dt.virtualScroll\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!dt.expandedRowTemplate && dt.virtualScroll\">\n            <ng-template cdkVirtualFor let-rowData let-rowIndex=\"index\" [cdkVirtualForOf]=\"dt.filteredValue||dt.value\" [cdkVirtualForTrackBy]=\"dt.rowTrackBy\" [cdkVirtualForTemplateCacheSize]=\"0\">\n                <ng-container *ngTemplateOutlet=\"rowData ? template: dt.loadingBodyTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, expanded: dt.isRowExpanded(rowData), editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n                <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n                    <ng-container *ngTemplateOutlet=\"dt.expandedRowTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}\"></ng-container>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.frozenExpandedRowTemplate && frozen\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, expanded: dt.isRowExpanded(rowData), editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n                <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n                    <ng-container *ngTemplateOutlet=\"dt.frozenExpandedRowTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}\"></ng-container>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.loading\">\n            <ng-container *ngTemplateOutlet=\"dt.loadingBodyTemplate; context: {$implicit: columns, frozen: frozen}\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.isEmpty() && !dt.loading\">\n            <ng-container *ngTemplateOutlet=\"dt.emptyMessageTemplate; context: {$implicit: columns, frozen: frozen}\"></ng-container>\n        </ng-container>\n    ",
-                    changeDetection: core.ChangeDetectionStrategy.Default,
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    TableBody.ctorParameters = function () { return [
-        { type: Table },
-        { type: TableService },
-        { type: core.ChangeDetectorRef }
-    ]; };
-    TableBody.propDecorators = {
-        columns: [{ type: core.Input, args: ["pTableBody",] }],
-        template: [{ type: core.Input, args: ["pTableBodyTemplate",] }],
-        frozen: [{ type: core.Input }]
-    };
+    TableBody.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableBody, deps: [{ token: Table }, { token: TableService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TableBody.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: TableBody, selector: "[pTableBody]", inputs: { columns: ["pTableBody", "columns"], template: ["pTableBodyTemplate", "template"], frozen: "frozen" }, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"!dt.expandedRowTemplate && !dt.virtualScroll\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!dt.expandedRowTemplate && dt.virtualScroll\">\n            <ng-template cdkVirtualFor let-rowData let-rowIndex=\"index\" [cdkVirtualForOf]=\"dt.filteredValue||dt.value\" [cdkVirtualForTrackBy]=\"dt.rowTrackBy\" [cdkVirtualForTemplateCacheSize]=\"0\">\n                <ng-container *ngTemplateOutlet=\"rowData ? template: dt.loadingBodyTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, expanded: dt.isRowExpanded(rowData), editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n                <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n                    <ng-container *ngTemplateOutlet=\"dt.expandedRowTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}\"></ng-container>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.frozenExpandedRowTemplate && frozen\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, expanded: dt.isRowExpanded(rowData), editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n                <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n                    <ng-container *ngTemplateOutlet=\"dt.frozenExpandedRowTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}\"></ng-container>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.loading\">\n            <ng-container *ngTemplateOutlet=\"dt.loadingBodyTemplate; context: {$implicit: columns, frozen: frozen}\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.isEmpty() && !dt.loading\">\n            <ng-container *ngTemplateOutlet=\"dt.emptyMessageTemplate; context: {$implicit: columns, frozen: frozen}\"></ng-container>\n        </ng-container>\n    ", isInline: true, directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "slice": i3__namespace.SlicePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.Default, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableBody, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: '[pTableBody]',
+                        template: "\n        <ng-container *ngIf=\"!dt.expandedRowTemplate && !dt.virtualScroll\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!dt.expandedRowTemplate && dt.virtualScroll\">\n            <ng-template cdkVirtualFor let-rowData let-rowIndex=\"index\" [cdkVirtualForOf]=\"dt.filteredValue||dt.value\" [cdkVirtualForTrackBy]=\"dt.rowTrackBy\" [cdkVirtualForTemplateCacheSize]=\"0\">\n                <ng-container *ngTemplateOutlet=\"rowData ? template: dt.loadingBodyTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.expandedRowTemplate && !(frozen && dt.frozenExpandedRowTemplate)\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, expanded: dt.isRowExpanded(rowData), editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n                <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n                    <ng-container *ngTemplateOutlet=\"dt.expandedRowTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}\"></ng-container>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.frozenExpandedRowTemplate && frozen\">\n            <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"(dt.paginator && !dt.lazy) ? ((dt.filteredValue||dt.value) | slice:dt.first:(dt.first + dt.rows)) : (dt.filteredValue||dt.value)\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                <ng-container *ngTemplateOutlet=\"template; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns, expanded: dt.isRowExpanded(rowData), editing: (dt.editMode === 'row' && dt.isRowEditing(rowData))}\"></ng-container>\n                <ng-container *ngIf=\"dt.isRowExpanded(rowData)\">\n                    <ng-container *ngTemplateOutlet=\"dt.frozenExpandedRowTemplate; context: {$implicit: rowData, rowIndex: dt.paginator ? (dt.first + rowIndex) : rowIndex, columns: columns}\"></ng-container>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"dt.loading\">\n            <ng-container *ngTemplateOutlet=\"dt.loadingBodyTemplate; context: {$implicit: columns, frozen: frozen}\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"dt.isEmpty() && !dt.loading\">\n            <ng-container *ngTemplateOutlet=\"dt.emptyMessageTemplate; context: {$implicit: columns, frozen: frozen}\"></ng-container>\n        </ng-container>\n    ",
+                        changeDetection: i0.ChangeDetectionStrategy.Default,
+                        encapsulation: i0.ViewEncapsulation.None
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: TableService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { columns: [{
+                    type: i0.Input,
+                    args: ["pTableBody"]
+                }], template: [{
+                    type: i0.Input,
+                    args: ["pTableBodyTemplate"]
+                }], frozen: [{
+                    type: i0.Input
+                }] } });
     var ScrollableView = /** @class */ (function () {
         function ScrollableView(dt, el, zone) {
             this.dt = dt;
@@ -2353,32 +2495,48 @@
         };
         return ScrollableView;
     }());
-    ScrollableView.decorators = [
-        { type: core.Component, args: [{
-                    selector: '[pScrollableView]',
-                    template: "\n        <div #scrollHeader class=\"p-datatable-scrollable-header\">\n            <div #scrollHeaderBox class=\"p-datatable-scrollable-header-box\">\n                <table class=\"p-datatable-scrollable-header-table\" [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"p-datatable-thead\">\n                        <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenHeaderTemplate||dt.headerTemplate : dt.headerTemplate; context {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tbody class=\"p-datatable-tbody\">\n                        <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"dt.frozenValue\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                            <ng-container *ngTemplateOutlet=\"dt.frozenRowsTemplate; context: {$implicit: rowData, rowIndex: rowIndex, columns: columns}\"></ng-container>\n                        </ng-template>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n        <ng-container *ngIf=\"!dt.virtualScroll; else virtualScrollTemplate\">\n            <div #scrollBody class=\"p-datatable-scrollable-body\" [ngStyle]=\"{'max-height': dt.scrollHeight !== 'flex' ? scrollHeight : undefined, 'overflow-y': !frozen && dt.scrollHeight ? 'scroll' : undefined}\">\n                <table #scrollTable [class]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <tbody class=\"p-datatable-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"frozen ? dt.frozenBodyTemplate||dt.bodyTemplate : dt.bodyTemplate\" [frozen]=\"frozen\"></tbody>\n                </table>\n                <div #scrollableAligner style=\"background-color:transparent\" *ngIf=\"frozen\"></div>\n            </div>\n        </ng-container>\n        <ng-template #virtualScrollTemplate>\n            <cdk-virtual-scroll-viewport [itemSize]=\"dt.virtualRowHeight\" tabindex=\"0\" [style.height]=\"dt.scrollHeight !== 'flex' ? scrollHeight : undefined\"\n                    [minBufferPx]=\"dt.minBufferPx\" [maxBufferPx]=\"dt.maxBufferPx\" (scrolledIndexChange)=\"onScrollIndexChange($event)\" class=\"p-datatable-virtual-scrollable-body\">\n                <table #scrollTable [class]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <tbody class=\"p-datatable-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"frozen ? dt.frozenBodyTemplate||dt.bodyTemplate : dt.bodyTemplate\" [frozen]=\"frozen\"></tbody>\n                </table>\n                <div #scrollableAligner style=\"background-color:transparent\" *ngIf=\"frozen\"></div>\n            </cdk-virtual-scroll-viewport>\n        </ng-template>\n        <div #scrollFooter class=\"p-datatable-scrollable-footer\">\n            <div #scrollFooterBox class=\"p-datatable-scrollable-footer-box\">\n                <table class=\"p-datatable-scrollable-footer-table\" [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <tfoot class=\"p-datatable-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenFooterTemplate||dt.footerTemplate : dt.footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                </table>\n            </div>\n        </div>\n    ",
-                    changeDetection: core.ChangeDetectionStrategy.Default,
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    ScrollableView.ctorParameters = function () { return [
-        { type: Table },
-        { type: core.ElementRef },
-        { type: core.NgZone }
-    ]; };
-    ScrollableView.propDecorators = {
-        columns: [{ type: core.Input, args: ["pScrollableView",] }],
-        frozen: [{ type: core.Input }],
-        scrollHeaderViewChild: [{ type: core.ViewChild, args: ['scrollHeader',] }],
-        scrollHeaderBoxViewChild: [{ type: core.ViewChild, args: ['scrollHeaderBox',] }],
-        scrollBodyViewChild: [{ type: core.ViewChild, args: ['scrollBody',] }],
-        scrollTableViewChild: [{ type: core.ViewChild, args: ['scrollTable',] }],
-        scrollFooterViewChild: [{ type: core.ViewChild, args: ['scrollFooter',] }],
-        scrollFooterBoxViewChild: [{ type: core.ViewChild, args: ['scrollFooterBox',] }],
-        scrollableAlignerViewChild: [{ type: core.ViewChild, args: ['scrollableAligner',] }],
-        virtualScrollBody: [{ type: core.ViewChild, args: [scrolling.CdkVirtualScrollViewport,] }],
-        scrollHeight: [{ type: core.Input }]
-    };
+    ScrollableView.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ScrollableView, deps: [{ token: Table }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ScrollableView.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ScrollableView, selector: "[pScrollableView]", inputs: { columns: ["pScrollableView", "columns"], frozen: "frozen", scrollHeight: "scrollHeight" }, viewQueries: [{ propertyName: "scrollHeaderViewChild", first: true, predicate: ["scrollHeader"], descendants: true }, { propertyName: "scrollHeaderBoxViewChild", first: true, predicate: ["scrollHeaderBox"], descendants: true }, { propertyName: "scrollBodyViewChild", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "scrollTableViewChild", first: true, predicate: ["scrollTable"], descendants: true }, { propertyName: "scrollFooterViewChild", first: true, predicate: ["scrollFooter"], descendants: true }, { propertyName: "scrollFooterBoxViewChild", first: true, predicate: ["scrollFooterBox"], descendants: true }, { propertyName: "scrollableAlignerViewChild", first: true, predicate: ["scrollableAligner"], descendants: true }, { propertyName: "virtualScrollBody", first: true, predicate: i4.CdkVirtualScrollViewport, descendants: true }], ngImport: i0__namespace, template: "\n        <div #scrollHeader class=\"p-datatable-scrollable-header\">\n            <div #scrollHeaderBox class=\"p-datatable-scrollable-header-box\">\n                <table class=\"p-datatable-scrollable-header-table\" [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"p-datatable-thead\">\n                        <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenHeaderTemplate||dt.headerTemplate : dt.headerTemplate; context {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tbody class=\"p-datatable-tbody\">\n                        <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"dt.frozenValue\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                            <ng-container *ngTemplateOutlet=\"dt.frozenRowsTemplate; context: {$implicit: rowData, rowIndex: rowIndex, columns: columns}\"></ng-container>\n                        </ng-template>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n        <ng-container *ngIf=\"!dt.virtualScroll; else virtualScrollTemplate\">\n            <div #scrollBody class=\"p-datatable-scrollable-body\" [ngStyle]=\"{'max-height': dt.scrollHeight !== 'flex' ? scrollHeight : undefined, 'overflow-y': !frozen && dt.scrollHeight ? 'scroll' : undefined}\">\n                <table #scrollTable [class]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <tbody class=\"p-datatable-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"frozen ? dt.frozenBodyTemplate||dt.bodyTemplate : dt.bodyTemplate\" [frozen]=\"frozen\"></tbody>\n                </table>\n                <div #scrollableAligner style=\"background-color:transparent\" *ngIf=\"frozen\"></div>\n            </div>\n        </ng-container>\n        <ng-template #virtualScrollTemplate>\n            <cdk-virtual-scroll-viewport [itemSize]=\"dt.virtualRowHeight\" tabindex=\"0\" [style.height]=\"dt.scrollHeight !== 'flex' ? scrollHeight : undefined\"\n                    [minBufferPx]=\"dt.minBufferPx\" [maxBufferPx]=\"dt.maxBufferPx\" (scrolledIndexChange)=\"onScrollIndexChange($event)\" class=\"p-datatable-virtual-scrollable-body\">\n                <table #scrollTable [class]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <tbody class=\"p-datatable-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"frozen ? dt.frozenBodyTemplate||dt.bodyTemplate : dt.bodyTemplate\" [frozen]=\"frozen\"></tbody>\n                </table>\n                <div #scrollableAligner style=\"background-color:transparent\" *ngIf=\"frozen\"></div>\n            </cdk-virtual-scroll-viewport>\n        </ng-template>\n        <div #scrollFooter class=\"p-datatable-scrollable-footer\">\n            <div #scrollFooterBox class=\"p-datatable-scrollable-footer-box\">\n                <table class=\"p-datatable-scrollable-footer-table\" [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <tfoot class=\"p-datatable-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenFooterTemplate||dt.footerTemplate : dt.footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                </table>\n            </div>\n        </div>\n    ", isInline: true, components: [{ type: TableBody, selector: "[pTableBody]", inputs: ["pTableBody", "pTableBodyTemplate", "frozen"] }, { type: i4__namespace.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.Default, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ScrollableView, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: '[pScrollableView]',
+                        template: "\n        <div #scrollHeader class=\"p-datatable-scrollable-header\">\n            <div #scrollHeaderBox class=\"p-datatable-scrollable-header-box\">\n                <table class=\"p-datatable-scrollable-header-table\" [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"p-datatable-thead\">\n                        <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenHeaderTemplate||dt.headerTemplate : dt.headerTemplate; context {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tbody class=\"p-datatable-tbody\">\n                        <ng-template ngFor let-rowData let-rowIndex=\"index\" [ngForOf]=\"dt.frozenValue\" [ngForTrackBy]=\"dt.rowTrackBy\">\n                            <ng-container *ngTemplateOutlet=\"dt.frozenRowsTemplate; context: {$implicit: rowData, rowIndex: rowIndex, columns: columns}\"></ng-container>\n                        </ng-template>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n        <ng-container *ngIf=\"!dt.virtualScroll; else virtualScrollTemplate\">\n            <div #scrollBody class=\"p-datatable-scrollable-body\" [ngStyle]=\"{'max-height': dt.scrollHeight !== 'flex' ? scrollHeight : undefined, 'overflow-y': !frozen && dt.scrollHeight ? 'scroll' : undefined}\">\n                <table #scrollTable [class]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <tbody class=\"p-datatable-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"frozen ? dt.frozenBodyTemplate||dt.bodyTemplate : dt.bodyTemplate\" [frozen]=\"frozen\"></tbody>\n                </table>\n                <div #scrollableAligner style=\"background-color:transparent\" *ngIf=\"frozen\"></div>\n            </div>\n        </ng-container>\n        <ng-template #virtualScrollTemplate>\n            <cdk-virtual-scroll-viewport [itemSize]=\"dt.virtualRowHeight\" tabindex=\"0\" [style.height]=\"dt.scrollHeight !== 'flex' ? scrollHeight : undefined\"\n                    [minBufferPx]=\"dt.minBufferPx\" [maxBufferPx]=\"dt.maxBufferPx\" (scrolledIndexChange)=\"onScrollIndexChange($event)\" class=\"p-datatable-virtual-scrollable-body\">\n                <table #scrollTable [class]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <tbody class=\"p-datatable-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"frozen ? dt.frozenBodyTemplate||dt.bodyTemplate : dt.bodyTemplate\" [frozen]=\"frozen\"></tbody>\n                </table>\n                <div #scrollableAligner style=\"background-color:transparent\" *ngIf=\"frozen\"></div>\n            </cdk-virtual-scroll-viewport>\n        </ng-template>\n        <div #scrollFooter class=\"p-datatable-scrollable-footer\">\n            <div #scrollFooterBox class=\"p-datatable-scrollable-footer-box\">\n                <table class=\"p-datatable-scrollable-footer-table\" [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenColGroupTemplate||dt.colGroupTemplate : dt.colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <tfoot class=\"p-datatable-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"frozen ? dt.frozenFooterTemplate||dt.footerTemplate : dt.footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                </table>\n            </div>\n        </div>\n    ",
+                        changeDetection: i0.ChangeDetectionStrategy.Default,
+                        encapsulation: i0.ViewEncapsulation.None
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { columns: [{
+                    type: i0.Input,
+                    args: ["pScrollableView"]
+                }], frozen: [{
+                    type: i0.Input
+                }], scrollHeaderViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['scrollHeader']
+                }], scrollHeaderBoxViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['scrollHeaderBox']
+                }], scrollBodyViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['scrollBody']
+                }], scrollTableViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['scrollTable']
+                }], scrollFooterViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['scrollFooter']
+                }], scrollFooterBoxViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['scrollFooterBox']
+                }], scrollableAlignerViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['scrollableAligner']
+                }], virtualScrollBody: [{
+                    type: i0.ViewChild,
+                    args: [i4.CdkVirtualScrollViewport]
+                }], scrollHeight: [{
+                    type: i0.Input
+                }] } });
     var SortableColumn = /** @class */ (function () {
         function SortableColumn(dt) {
             var _this = this;
@@ -2424,27 +2582,32 @@
         };
         return SortableColumn;
     }());
-    SortableColumn.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pSortableColumn]',
-                    host: {
-                        '[class.p-sortable-column]': 'isEnabled()',
-                        '[class.p-highlight]': 'sorted',
-                        '[attr.tabindex]': 'isEnabled() ? "0" : null',
-                        '[attr.role]': '"columnheader"',
-                        '[attr.aria-sort]': 'sortOrder'
-                    }
-                },] }
-    ];
-    SortableColumn.ctorParameters = function () { return [
-        { type: Table }
-    ]; };
-    SortableColumn.propDecorators = {
-        field: [{ type: core.Input, args: ["pSortableColumn",] }],
-        pSortableColumnDisabled: [{ type: core.Input }],
-        onClick: [{ type: core.HostListener, args: ['click', ['$event'],] }],
-        onEnterKey: [{ type: core.HostListener, args: ['keydown.enter', ['$event'],] }]
-    };
+    SortableColumn.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: SortableColumn, deps: [{ token: Table }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SortableColumn.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: SortableColumn, selector: "[pSortableColumn]", inputs: { field: ["pSortableColumn", "field"], pSortableColumnDisabled: "pSortableColumnDisabled" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class.p-sortable-column": "isEnabled()", "class.p-highlight": "sorted", "attr.tabindex": "isEnabled() ? \"0\" : null", "attr.role": "\"columnheader\"", "attr.aria-sort": "sortOrder" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: SortableColumn, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pSortableColumn]',
+                        host: {
+                            '[class.p-sortable-column]': 'isEnabled()',
+                            '[class.p-highlight]': 'sorted',
+                            '[attr.tabindex]': 'isEnabled() ? "0" : null',
+                            '[attr.role]': '"columnheader"',
+                            '[attr.aria-sort]': 'sortOrder'
+                        }
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }]; }, propDecorators: { field: [{
+                    type: i0.Input,
+                    args: ["pSortableColumn"]
+                }], pSortableColumnDisabled: [{
+                    type: i0.Input
+                }], onClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }], onEnterKey: [{
+                    type: i0.HostListener,
+                    args: ['keydown.enter', ['$event']]
+                }] } });
     var SortIcon = /** @class */ (function () {
         function SortIcon(dt, cd) {
             var _this = this;
@@ -2494,21 +2657,19 @@
         };
         return SortIcon;
     }());
-    SortIcon.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'p-sortIcon',
-                    template: "\n        <i class=\"p-sortable-column-icon pi pi-fw\" [ngClass]=\"{'pi-sort-amount-up-alt': sortOrder === 1, 'pi-sort-amount-down': sortOrder === -1, 'pi-sort-alt': sortOrder === 0}\"></i>\n        <span *ngIf=\"isMultiSorted()\" class=\"p-sortable-column-badge\">{{getMultiSortMetaIndex() + 1}}</span>\n    ",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    SortIcon.ctorParameters = function () { return [
-        { type: Table },
-        { type: core.ChangeDetectorRef }
-    ]; };
-    SortIcon.propDecorators = {
-        field: [{ type: core.Input }]
-    };
+    SortIcon.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: SortIcon, deps: [{ token: Table }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SortIcon.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: SortIcon, selector: "p-sortIcon", inputs: { field: "field" }, ngImport: i0__namespace, template: "\n        <i class=\"p-sortable-column-icon pi pi-fw\" [ngClass]=\"{'pi-sort-amount-up-alt': sortOrder === 1, 'pi-sort-amount-down': sortOrder === -1, 'pi-sort-alt': sortOrder === 0}\"></i>\n        <span *ngIf=\"isMultiSorted()\" class=\"p-sortable-column-badge\">{{getMultiSortMetaIndex() + 1}}</span>\n    ", isInline: true, directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: SortIcon, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'p-sortIcon',
+                        template: "\n        <i class=\"p-sortable-column-icon pi pi-fw\" [ngClass]=\"{'pi-sort-amount-up-alt': sortOrder === 1, 'pi-sort-amount-down': sortOrder === -1, 'pi-sort-alt': sortOrder === 0}\"></i>\n        <span *ngIf=\"isMultiSorted()\" class=\"p-sortable-column-badge\">{{getMultiSortMetaIndex() + 1}}</span>\n    ",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { field: [{
+                    type: i0.Input
+                }] } });
     var SelectableRow = /** @class */ (function () {
         function SelectableRow(dt, tableService) {
             var _this = this;
@@ -2615,32 +2776,63 @@
         };
         return SelectableRow;
     }());
-    SelectableRow.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pSelectableRow]',
-                    host: {
-                        '[class.p-selectable-row]': 'isEnabled()',
-                        '[class.p-highlight]': 'selected',
-                        '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
-                    }
-                },] }
-    ];
-    SelectableRow.ctorParameters = function () { return [
-        { type: Table },
-        { type: TableService }
-    ]; };
-    SelectableRow.propDecorators = {
-        data: [{ type: core.Input, args: ["pSelectableRow",] }],
-        index: [{ type: core.Input, args: ["pSelectableRowIndex",] }],
-        pSelectableRowDisabled: [{ type: core.Input }],
-        onClick: [{ type: core.HostListener, args: ['click', ['$event'],] }],
-        onTouchEnd: [{ type: core.HostListener, args: ['touchend', ['$event'],] }],
-        onArrowDownKeyDown: [{ type: core.HostListener, args: ['keydown.arrowdown', ['$event'],] }],
-        onArrowUpKeyDown: [{ type: core.HostListener, args: ['keydown.arrowup', ['$event'],] }],
-        onEnterKeyDown: [{ type: core.HostListener, args: ['keydown.enter', ['$event'],] }, { type: core.HostListener, args: ['keydown.shift.enter', ['$event'],] }, { type: core.HostListener, args: ['keydown.meta.enter', ['$event'],] }],
-        onPageDownKeyDown: [{ type: core.HostListener, args: ['keydown.pagedown',] }, { type: core.HostListener, args: ['keydown.pageup',] }, { type: core.HostListener, args: ['keydown.home',] }, { type: core.HostListener, args: ['keydown.end',] }],
-        onSpaceKeydown: [{ type: core.HostListener, args: ['keydown.space',] }]
-    };
+    SelectableRow.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: SelectableRow, deps: [{ token: Table }, { token: TableService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SelectableRow.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: SelectableRow, selector: "[pSelectableRow]", inputs: { data: ["pSelectableRow", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: "pSelectableRowDisabled" }, host: { listeners: { "click": "onClick($event)", "touchend": "onTouchEnd($event)", "keydown.arrowdown": "onArrowDownKeyDown($event)", "keydown.arrowup": "onArrowUpKeyDown($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.shift.enter": "onEnterKeyDown($event)", "keydown.meta.enter": "onEnterKeyDown($event)", "keydown.pagedown": "onPageDownKeyDown()", "keydown.pageup": "onPageDownKeyDown()", "keydown.home": "onPageDownKeyDown()", "keydown.end": "onPageDownKeyDown()", "keydown.space": "onSpaceKeydown()" }, properties: { "class.p-selectable-row": "isEnabled()", "class.p-highlight": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: SelectableRow, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pSelectableRow]',
+                        host: {
+                            '[class.p-selectable-row]': 'isEnabled()',
+                            '[class.p-highlight]': 'selected',
+                            '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
+                        }
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: TableService }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ["pSelectableRow"]
+                }], index: [{
+                    type: i0.Input,
+                    args: ["pSelectableRowIndex"]
+                }], pSelectableRowDisabled: [{
+                    type: i0.Input
+                }], onClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }], onTouchEnd: [{
+                    type: i0.HostListener,
+                    args: ['touchend', ['$event']]
+                }], onArrowDownKeyDown: [{
+                    type: i0.HostListener,
+                    args: ['keydown.arrowdown', ['$event']]
+                }], onArrowUpKeyDown: [{
+                    type: i0.HostListener,
+                    args: ['keydown.arrowup', ['$event']]
+                }], onEnterKeyDown: [{
+                    type: i0.HostListener,
+                    args: ['keydown.enter', ['$event']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.shift.enter', ['$event']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.meta.enter', ['$event']]
+                }], onPageDownKeyDown: [{
+                    type: i0.HostListener,
+                    args: ['keydown.pagedown']
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.pageup']
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.home']
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.end']
+                }], onSpaceKeydown: [{
+                    type: i0.HostListener,
+                    args: ['keydown.space']
+                }] } });
     var SelectableRowDblClick = /** @class */ (function () {
         function SelectableRowDblClick(dt, tableService) {
             var _this = this;
@@ -2676,25 +2868,29 @@
         };
         return SelectableRowDblClick;
     }());
-    SelectableRowDblClick.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pSelectableRowDblClick]',
-                    host: {
-                        '[class.p-selectable-row]': 'isEnabled()',
-                        '[class.p-highlight]': 'selected'
-                    }
-                },] }
-    ];
-    SelectableRowDblClick.ctorParameters = function () { return [
-        { type: Table },
-        { type: TableService }
-    ]; };
-    SelectableRowDblClick.propDecorators = {
-        data: [{ type: core.Input, args: ["pSelectableRowDblClick",] }],
-        index: [{ type: core.Input, args: ["pSelectableRowIndex",] }],
-        pSelectableRowDisabled: [{ type: core.Input }],
-        onClick: [{ type: core.HostListener, args: ['dblclick', ['$event'],] }]
-    };
+    SelectableRowDblClick.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: SelectableRowDblClick, deps: [{ token: Table }, { token: TableService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SelectableRowDblClick.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: SelectableRowDblClick, selector: "[pSelectableRowDblClick]", inputs: { data: ["pSelectableRowDblClick", "data"], index: ["pSelectableRowIndex", "index"], pSelectableRowDisabled: "pSelectableRowDisabled" }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class.p-selectable-row": "isEnabled()", "class.p-highlight": "selected" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: SelectableRowDblClick, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pSelectableRowDblClick]',
+                        host: {
+                            '[class.p-selectable-row]': 'isEnabled()',
+                            '[class.p-highlight]': 'selected'
+                        }
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: TableService }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ["pSelectableRowDblClick"]
+                }], index: [{
+                    type: i0.Input,
+                    args: ["pSelectableRowIndex"]
+                }], pSelectableRowDisabled: [{
+                    type: i0.Input
+                }], onClick: [{
+                    type: i0.HostListener,
+                    args: ['dblclick', ['$event']]
+                }] } });
     var ContextMenuRow = /** @class */ (function () {
         function ContextMenuRow(dt, tableService, el) {
             var _this = this;
@@ -2728,26 +2924,29 @@
         };
         return ContextMenuRow;
     }());
-    ContextMenuRow.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pContextMenuRow]',
-                    host: {
-                        '[class.p-highlight-contextmenu]': 'selected',
-                        '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
-                    }
-                },] }
-    ];
-    ContextMenuRow.ctorParameters = function () { return [
-        { type: Table },
-        { type: TableService },
-        { type: core.ElementRef }
-    ]; };
-    ContextMenuRow.propDecorators = {
-        data: [{ type: core.Input, args: ["pContextMenuRow",] }],
-        index: [{ type: core.Input, args: ["pContextMenuRowIndex",] }],
-        pContextMenuRowDisabled: [{ type: core.Input }],
-        onContextMenu: [{ type: core.HostListener, args: ['contextmenu', ['$event'],] }]
-    };
+    ContextMenuRow.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ContextMenuRow, deps: [{ token: Table }, { token: TableService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ContextMenuRow.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: ContextMenuRow, selector: "[pContextMenuRow]", inputs: { data: ["pContextMenuRow", "data"], index: ["pContextMenuRowIndex", "index"], pContextMenuRowDisabled: "pContextMenuRowDisabled" }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class.p-highlight-contextmenu": "selected", "attr.tabindex": "isEnabled() ? 0 : undefined" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ContextMenuRow, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pContextMenuRow]',
+                        host: {
+                            '[class.p-highlight-contextmenu]': 'selected',
+                            '[attr.tabindex]': 'isEnabled() ? 0 : undefined'
+                        }
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: TableService }, { type: i0__namespace.ElementRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ["pContextMenuRow"]
+                }], index: [{
+                    type: i0.Input,
+                    args: ["pContextMenuRowIndex"]
+                }], pContextMenuRowDisabled: [{
+                    type: i0.Input
+                }], onContextMenu: [{
+                    type: i0.HostListener,
+                    args: ['contextmenu', ['$event']]
+                }] } });
     var RowToggler = /** @class */ (function () {
         function RowToggler(dt) {
             this.dt = dt;
@@ -2763,19 +2962,22 @@
         };
         return RowToggler;
     }());
-    RowToggler.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pRowToggler]'
-                },] }
-    ];
-    RowToggler.ctorParameters = function () { return [
-        { type: Table }
-    ]; };
-    RowToggler.propDecorators = {
-        data: [{ type: core.Input, args: ['pRowToggler',] }],
-        pRowTogglerDisabled: [{ type: core.Input }],
-        onClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
-    };
+    RowToggler.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: RowToggler, deps: [{ token: Table }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    RowToggler.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: RowToggler, selector: "[pRowToggler]", inputs: { data: ["pRowToggler", "data"], pRowTogglerDisabled: "pRowTogglerDisabled" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: RowToggler, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pRowToggler]'
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ['pRowToggler']
+                }], pRowTogglerDisabled: [{
+                    type: i0.Input
+                }], onClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
     var ResizableColumn = /** @class */ (function () {
         function ResizableColumn(dt, el, zone) {
             this.dt = dt;
@@ -2838,19 +3040,16 @@
         };
         return ResizableColumn;
     }());
-    ResizableColumn.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pResizableColumn]'
-                },] }
-    ];
-    ResizableColumn.ctorParameters = function () { return [
-        { type: Table },
-        { type: core.ElementRef },
-        { type: core.NgZone }
-    ]; };
-    ResizableColumn.propDecorators = {
-        pResizableColumnDisabled: [{ type: core.Input }]
-    };
+    ResizableColumn.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ResizableColumn, deps: [{ token: Table }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ResizableColumn.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: ResizableColumn, selector: "[pResizableColumn]", inputs: { pResizableColumnDisabled: "pResizableColumnDisabled" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ResizableColumn, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pResizableColumn]'
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { pResizableColumnDisabled: [{
+                    type: i0.Input
+                }] } });
     var ReorderableColumn = /** @class */ (function () {
         function ReorderableColumn(dt, el, zone) {
             this.dt = dt;
@@ -2930,20 +3129,19 @@
         };
         return ReorderableColumn;
     }());
-    ReorderableColumn.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pReorderableColumn]'
-                },] }
-    ];
-    ReorderableColumn.ctorParameters = function () { return [
-        { type: Table },
-        { type: core.ElementRef },
-        { type: core.NgZone }
-    ]; };
-    ReorderableColumn.propDecorators = {
-        pReorderableColumnDisabled: [{ type: core.Input }],
-        onDrop: [{ type: core.HostListener, args: ['drop', ['$event'],] }]
-    };
+    ReorderableColumn.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ReorderableColumn, deps: [{ token: Table }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ReorderableColumn.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: ReorderableColumn, selector: "[pReorderableColumn]", inputs: { pReorderableColumnDisabled: "pReorderableColumnDisabled" }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ReorderableColumn, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pReorderableColumn]'
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { pReorderableColumnDisabled: [{
+                    type: i0.Input
+                }], onDrop: [{
+                    type: i0.HostListener,
+                    args: ['drop', ['$event']]
+                }] } });
     var EditableColumn = /** @class */ (function () {
         function EditableColumn(dt, el, zone) {
             this.dt = dt;
@@ -3174,31 +3372,57 @@
         };
         return EditableColumn;
     }());
-    EditableColumn.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pEditableColumn]'
-                },] }
-    ];
-    EditableColumn.ctorParameters = function () { return [
-        { type: Table },
-        { type: core.ElementRef },
-        { type: core.NgZone }
-    ]; };
-    EditableColumn.propDecorators = {
-        data: [{ type: core.Input, args: ["pEditableColumn",] }],
-        field: [{ type: core.Input, args: ["pEditableColumnField",] }],
-        rowIndex: [{ type: core.Input, args: ["pEditableColumnRowIndex",] }],
-        pEditableColumnDisabled: [{ type: core.Input }],
-        pFocusCellSelector: [{ type: core.Input }],
-        onClick: [{ type: core.HostListener, args: ['click', ['$event'],] }],
-        onEnterKeyDown: [{ type: core.HostListener, args: ['keydown.enter', ['$event'],] }],
-        onEscapeKeyDown: [{ type: core.HostListener, args: ['keydown.escape', ['$event'],] }],
-        onShiftKeyDown: [{ type: core.HostListener, args: ['keydown.tab', ['$event'],] }, { type: core.HostListener, args: ['keydown.shift.tab', ['$event'],] }, { type: core.HostListener, args: ['keydown.meta.tab', ['$event'],] }],
-        onArrowDown: [{ type: core.HostListener, args: ['keydown.arrowdown', ['$event'],] }],
-        onArrowUp: [{ type: core.HostListener, args: ['keydown.arrowup', ['$event'],] }],
-        onArrowLeft: [{ type: core.HostListener, args: ['keydown.arrowleft', ['$event'],] }],
-        onArrowRight: [{ type: core.HostListener, args: ['keydown.arrowright', ['$event'],] }]
-    };
+    EditableColumn.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: EditableColumn, deps: [{ token: Table }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    EditableColumn.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: EditableColumn, selector: "[pEditableColumn]", inputs: { data: ["pEditableColumn", "data"], field: ["pEditableColumnField", "field"], rowIndex: ["pEditableColumnRowIndex", "rowIndex"], pEditableColumnDisabled: "pEditableColumnDisabled", pFocusCellSelector: "pFocusCellSelector" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKeyDown($event)", "keydown.escape": "onEscapeKeyDown($event)", "keydown.tab": "onShiftKeyDown($event)", "keydown.shift.tab": "onShiftKeyDown($event)", "keydown.meta.tab": "onShiftKeyDown($event)", "keydown.arrowdown": "onArrowDown($event)", "keydown.arrowup": "onArrowUp($event)", "keydown.arrowleft": "onArrowLeft($event)", "keydown.arrowright": "onArrowRight($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: EditableColumn, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pEditableColumn]'
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ["pEditableColumn"]
+                }], field: [{
+                    type: i0.Input,
+                    args: ["pEditableColumnField"]
+                }], rowIndex: [{
+                    type: i0.Input,
+                    args: ["pEditableColumnRowIndex"]
+                }], pEditableColumnDisabled: [{
+                    type: i0.Input
+                }], pFocusCellSelector: [{
+                    type: i0.Input
+                }], onClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }], onEnterKeyDown: [{
+                    type: i0.HostListener,
+                    args: ['keydown.enter', ['$event']]
+                }], onEscapeKeyDown: [{
+                    type: i0.HostListener,
+                    args: ['keydown.escape', ['$event']]
+                }], onShiftKeyDown: [{
+                    type: i0.HostListener,
+                    args: ['keydown.tab', ['$event']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.shift.tab', ['$event']]
+                }, {
+                    type: i0.HostListener,
+                    args: ['keydown.meta.tab', ['$event']]
+                }], onArrowDown: [{
+                    type: i0.HostListener,
+                    args: ['keydown.arrowdown', ['$event']]
+                }], onArrowUp: [{
+                    type: i0.HostListener,
+                    args: ['keydown.arrowup', ['$event']]
+                }], onArrowLeft: [{
+                    type: i0.HostListener,
+                    args: ['keydown.arrowleft', ['$event']]
+                }], onArrowRight: [{
+                    type: i0.HostListener,
+                    args: ['keydown.arrowright', ['$event']]
+                }] } });
     var EditableRow = /** @class */ (function () {
         function EditableRow(el) {
             this.el = el;
@@ -3208,18 +3432,19 @@
         };
         return EditableRow;
     }());
-    EditableRow.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pEditableRow]'
-                },] }
-    ];
-    EditableRow.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
-    EditableRow.propDecorators = {
-        data: [{ type: core.Input, args: ["pEditableRow",] }],
-        pEditableRowDisabled: [{ type: core.Input }]
-    };
+    EditableRow.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: EditableRow, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    EditableRow.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: EditableRow, selector: "[pEditableRow]", inputs: { data: ["pEditableRow", "data"], pEditableRowDisabled: "pEditableRowDisabled" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: EditableRow, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pEditableRow]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { data: [{
+                    type: i0.Input,
+                    args: ["pEditableRow"]
+                }], pEditableRowDisabled: [{
+                    type: i0.Input
+                }] } });
     var InitEditableRow = /** @class */ (function () {
         function InitEditableRow(dt, editableRow) {
             this.dt = dt;
@@ -3231,18 +3456,17 @@
         };
         return InitEditableRow;
     }());
-    InitEditableRow.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pInitEditableRow]'
-                },] }
-    ];
-    InitEditableRow.ctorParameters = function () { return [
-        { type: Table },
-        { type: EditableRow }
-    ]; };
-    InitEditableRow.propDecorators = {
-        onClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
-    };
+    InitEditableRow.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: InitEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    InitEditableRow.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: InitEditableRow, selector: "[pInitEditableRow]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: InitEditableRow, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pInitEditableRow]'
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: EditableRow }]; }, propDecorators: { onClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
     var SaveEditableRow = /** @class */ (function () {
         function SaveEditableRow(dt, editableRow) {
             this.dt = dt;
@@ -3254,18 +3478,17 @@
         };
         return SaveEditableRow;
     }());
-    SaveEditableRow.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pSaveEditableRow]'
-                },] }
-    ];
-    SaveEditableRow.ctorParameters = function () { return [
-        { type: Table },
-        { type: EditableRow }
-    ]; };
-    SaveEditableRow.propDecorators = {
-        onClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
-    };
+    SaveEditableRow.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: SaveEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SaveEditableRow.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: SaveEditableRow, selector: "[pSaveEditableRow]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: SaveEditableRow, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pSaveEditableRow]'
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: EditableRow }]; }, propDecorators: { onClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
     var CancelEditableRow = /** @class */ (function () {
         function CancelEditableRow(dt, editableRow) {
             this.dt = dt;
@@ -3277,18 +3500,17 @@
         };
         return CancelEditableRow;
     }());
-    CancelEditableRow.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pCancelEditableRow]'
-                },] }
-    ];
-    CancelEditableRow.ctorParameters = function () { return [
-        { type: Table },
-        { type: EditableRow }
-    ]; };
-    CancelEditableRow.propDecorators = {
-        onClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
-    };
+    CancelEditableRow.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: CancelEditableRow, deps: [{ token: Table }, { token: EditableRow }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    CancelEditableRow.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: CancelEditableRow, selector: "[pCancelEditableRow]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: CancelEditableRow, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pCancelEditableRow]'
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: EditableRow }]; }, propDecorators: { onClick: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }] } });
     var CellEditor = /** @class */ (function () {
         function CellEditor(dt, editableColumn, editableRow) {
             this.dt = dt;
@@ -3318,21 +3540,25 @@
         });
         return CellEditor;
     }());
-    CellEditor.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'p-cellEditor',
-                    template: "\n        <ng-container *ngIf=\"editing\">\n            <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!editing\">\n            <ng-container *ngTemplateOutlet=\"outputTemplate\"></ng-container>\n        </ng-container>\n    ",
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    CellEditor.ctorParameters = function () { return [
-        { type: Table },
-        { type: EditableColumn, decorators: [{ type: core.Optional }] },
-        { type: EditableRow, decorators: [{ type: core.Optional }] }
-    ]; };
-    CellEditor.propDecorators = {
-        templates: [{ type: core.ContentChildren, args: [api.PrimeTemplate,] }]
-    };
+    CellEditor.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: CellEditor, deps: [{ token: Table }, { token: EditableColumn, optional: true }, { token: EditableRow, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CellEditor.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: CellEditor, selector: "p-cellEditor", queries: [{ propertyName: "templates", predicate: i1.PrimeTemplate }], ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"editing\">\n            <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!editing\">\n            <ng-container *ngTemplateOutlet=\"outputTemplate\"></ng-container>\n        </ng-container>\n    ", isInline: true, directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: CellEditor, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'p-cellEditor',
+                        template: "\n        <ng-container *ngIf=\"editing\">\n            <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!editing\">\n            <ng-container *ngTemplateOutlet=\"outputTemplate\"></ng-container>\n        </ng-container>\n    ",
+                        encapsulation: i0.ViewEncapsulation.None
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: Table }, { type: EditableColumn, decorators: [{
+                            type: i0.Optional
+                        }] }, { type: EditableRow, decorators: [{
+                            type: i0.Optional
+                        }] }];
+        }, propDecorators: { templates: [{
+                    type: i0.ContentChildren,
+                    args: [i1.PrimeTemplate]
+                }] } });
     var TableRadioButton = /** @class */ (function () {
         function TableRadioButton(dt, tableService, cd) {
             var _this = this;
@@ -3369,28 +3595,32 @@
         };
         return TableRadioButton;
     }());
-    TableRadioButton.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'p-tableRadioButton',
-                    template: "\n        <div class=\"p-radiobutton p-component\" (click)=\"onClick($event)\">\n            <div class=\"p-hidden-accessible\">\n                <input type=\"radio\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\n                [disabled]=\"disabled\" [attr.aria-label]=\"ariaLabel\">\n            </div>\n            <div #box [ngClass]=\"{'p-radiobutton-box p-component':true,\n                'p-highlight':checked, 'p-disabled':disabled}\" role=\"radio\" [attr.aria-checked]=\"checked\">\n                <div class=\"p-radiobutton-icon\"></div>\n            </div>\n        </div>\n    ",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    TableRadioButton.ctorParameters = function () { return [
-        { type: Table },
-        { type: TableService },
-        { type: core.ChangeDetectorRef }
-    ]; };
-    TableRadioButton.propDecorators = {
-        disabled: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        index: [{ type: core.Input }],
-        inputId: [{ type: core.Input }],
-        name: [{ type: core.Input }],
-        ariaLabel: [{ type: core.Input }],
-        boxViewChild: [{ type: core.ViewChild, args: ['box',] }]
-    };
+    TableRadioButton.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableRadioButton, deps: [{ token: Table }, { token: TableService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TableRadioButton.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: TableRadioButton, selector: "p-tableRadioButton", inputs: { disabled: "disabled", value: "value", index: "index", inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "boxViewChild", first: true, predicate: ["box"], descendants: true }], ngImport: i0__namespace, template: "\n        <div class=\"p-radiobutton p-component\" (click)=\"onClick($event)\">\n            <div class=\"p-hidden-accessible\">\n                <input type=\"radio\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\n                [disabled]=\"disabled\" [attr.aria-label]=\"ariaLabel\">\n            </div>\n            <div #box [ngClass]=\"{'p-radiobutton-box p-component':true,\n                'p-highlight':checked, 'p-disabled':disabled}\" role=\"radio\" [attr.aria-checked]=\"checked\">\n                <div class=\"p-radiobutton-icon\"></div>\n            </div>\n        </div>\n    ", isInline: true, directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableRadioButton, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'p-tableRadioButton',
+                        template: "\n        <div class=\"p-radiobutton p-component\" (click)=\"onClick($event)\">\n            <div class=\"p-hidden-accessible\">\n                <input type=\"radio\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\n                [disabled]=\"disabled\" [attr.aria-label]=\"ariaLabel\">\n            </div>\n            <div #box [ngClass]=\"{'p-radiobutton-box p-component':true,\n                'p-highlight':checked, 'p-disabled':disabled}\" role=\"radio\" [attr.aria-checked]=\"checked\">\n                <div class=\"p-radiobutton-icon\"></div>\n            </div>\n        </div>\n    ",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: TableService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }], index: [{
+                    type: i0.Input
+                }], inputId: [{
+                    type: i0.Input
+                }], name: [{
+                    type: i0.Input
+                }], ariaLabel: [{
+                    type: i0.Input
+                }], boxViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['box']
+                }] } });
     var TableCheckbox = /** @class */ (function () {
         function TableCheckbox(dt, tableService, cd) {
             var _this = this;
@@ -3427,29 +3657,34 @@
         };
         return TableCheckbox;
     }());
-    TableCheckbox.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'p-tableCheckbox',
-                    template: "\n        <div class=\"p-checkbox p-component\" (click)=\"onClick($event)\">\n            <div class=\"p-hidden-accessible\">\n                <input type=\"checkbox\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\"\n                [attr.required]=\"required\" [attr.aria-label]=\"ariaLabel\">\n            </div>\n            <div #box [ngClass]=\"{'p-checkbox-box p-component':true,\n                'p-highlight':checked, 'p-disabled':disabled}\" role=\"checkbox\" [attr.aria-checked]=\"checked\">\n                <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check':checked}\"></span>\n            </div>\n        </div>\n    ",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    TableCheckbox.ctorParameters = function () { return [
-        { type: Table },
-        { type: TableService },
-        { type: core.ChangeDetectorRef }
-    ]; };
-    TableCheckbox.propDecorators = {
-        disabled: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        index: [{ type: core.Input }],
-        inputId: [{ type: core.Input }],
-        name: [{ type: core.Input }],
-        required: [{ type: core.Input }],
-        ariaLabel: [{ type: core.Input }],
-        boxViewChild: [{ type: core.ViewChild, args: ['box',] }]
-    };
+    TableCheckbox.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TableCheckbox.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: TableCheckbox, selector: "p-tableCheckbox", inputs: { disabled: "disabled", value: "value", index: "index", inputId: "inputId", name: "name", required: "required", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "boxViewChild", first: true, predicate: ["box"], descendants: true }], ngImport: i0__namespace, template: "\n        <div class=\"p-checkbox p-component\" (click)=\"onClick($event)\">\n            <div class=\"p-hidden-accessible\">\n                <input type=\"checkbox\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\"\n                [attr.required]=\"required\" [attr.aria-label]=\"ariaLabel\">\n            </div>\n            <div #box [ngClass]=\"{'p-checkbox-box p-component':true,\n                'p-highlight':checked, 'p-disabled':disabled}\" role=\"checkbox\" [attr.aria-checked]=\"checked\">\n                <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check':checked}\"></span>\n            </div>\n        </div>\n    ", isInline: true, directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableCheckbox, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'p-tableCheckbox',
+                        template: "\n        <div class=\"p-checkbox p-component\" (click)=\"onClick($event)\">\n            <div class=\"p-hidden-accessible\">\n                <input type=\"checkbox\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [disabled]=\"disabled\"\n                [attr.required]=\"required\" [attr.aria-label]=\"ariaLabel\">\n            </div>\n            <div #box [ngClass]=\"{'p-checkbox-box p-component':true,\n                'p-highlight':checked, 'p-disabled':disabled}\" role=\"checkbox\" [attr.aria-checked]=\"checked\">\n                <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check':checked}\"></span>\n            </div>\n        </div>\n    ",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: TableService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+                    type: i0.Input
+                }], value: [{
+                    type: i0.Input
+                }], index: [{
+                    type: i0.Input
+                }], inputId: [{
+                    type: i0.Input
+                }], name: [{
+                    type: i0.Input
+                }], required: [{
+                    type: i0.Input
+                }], ariaLabel: [{
+                    type: i0.Input
+                }], boxViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['box']
+                }] } });
     var TableHeaderCheckbox = /** @class */ (function () {
         function TableHeaderCheckbox(dt, tableService, cd) {
             var _this = this;
@@ -3528,26 +3763,28 @@
         };
         return TableHeaderCheckbox;
     }());
-    TableHeaderCheckbox.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'p-tableHeaderCheckbox',
-                    template: "\n        <div class=\"p-checkbox p-component\" (click)=\"onClick($event)\">\n            <div class=\"p-hidden-accessible\">\n                <input #cb type=\"checkbox\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\n                [disabled]=\"isDisabled()\" [attr.aria-label]=\"ariaLabel\">\n            </div>\n            <div #box [ngClass]=\"{'p-checkbox-box':true,\n                'p-highlight':checked, 'p-disabled': isDisabled()}\" role=\"checkbox\" [attr.aria-checked]=\"checked\">\n                <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check':checked}\"></span>\n            </div>\n        </div>\n    ",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    TableHeaderCheckbox.ctorParameters = function () { return [
-        { type: Table },
-        { type: TableService },
-        { type: core.ChangeDetectorRef }
-    ]; };
-    TableHeaderCheckbox.propDecorators = {
-        boxViewChild: [{ type: core.ViewChild, args: ['box',] }],
-        disabled: [{ type: core.Input }],
-        inputId: [{ type: core.Input }],
-        name: [{ type: core.Input }],
-        ariaLabel: [{ type: core.Input }]
-    };
+    TableHeaderCheckbox.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableHeaderCheckbox, deps: [{ token: Table }, { token: TableService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TableHeaderCheckbox.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: { disabled: "disabled", inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "boxViewChild", first: true, predicate: ["box"], descendants: true }], ngImport: i0__namespace, template: "\n        <div class=\"p-checkbox p-component\" (click)=\"onClick($event)\">\n            <div class=\"p-hidden-accessible\">\n                <input #cb type=\"checkbox\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\n                [disabled]=\"isDisabled()\" [attr.aria-label]=\"ariaLabel\">\n            </div>\n            <div #box [ngClass]=\"{'p-checkbox-box':true,\n                'p-highlight':checked, 'p-disabled': isDisabled()}\" role=\"checkbox\" [attr.aria-checked]=\"checked\">\n                <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check':checked}\"></span>\n            </div>\n        </div>\n    ", isInline: true, directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableHeaderCheckbox, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'p-tableHeaderCheckbox',
+                        template: "\n        <div class=\"p-checkbox p-component\" (click)=\"onClick($event)\">\n            <div class=\"p-hidden-accessible\">\n                <input #cb type=\"checkbox\" [attr.id]=\"inputId\" [attr.name]=\"name\" [checked]=\"checked\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\n                [disabled]=\"isDisabled()\" [attr.aria-label]=\"ariaLabel\">\n            </div>\n            <div #box [ngClass]=\"{'p-checkbox-box':true,\n                'p-highlight':checked, 'p-disabled': isDisabled()}\" role=\"checkbox\" [attr.aria-checked]=\"checked\">\n                <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check':checked}\"></span>\n            </div>\n        </div>\n    ",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: TableService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { boxViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['box']
+                }], disabled: [{
+                    type: i0.Input
+                }], inputId: [{
+                    type: i0.Input
+                }], name: [{
+                    type: i0.Input
+                }], ariaLabel: [{
+                    type: i0.Input
+                }] } });
     var ReorderableRowHandle = /** @class */ (function () {
         function ReorderableRowHandle(el) {
             this.el = el;
@@ -3557,17 +3794,17 @@
         };
         return ReorderableRowHandle;
     }());
-    ReorderableRowHandle.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pReorderableRowHandle]'
-                },] }
-    ];
-    ReorderableRowHandle.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
-    ReorderableRowHandle.propDecorators = {
-        index: [{ type: core.Input, args: ["pReorderableRowHandle",] }]
-    };
+    ReorderableRowHandle.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ReorderableRowHandle, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ReorderableRowHandle.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: ReorderableRowHandle, selector: "[pReorderableRowHandle]", inputs: { index: ["pReorderableRowHandle", "index"] }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ReorderableRowHandle, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pReorderableRowHandle]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { index: [{
+                    type: i0.Input,
+                    args: ["pReorderableRowHandle"]
+                }] } });
     var ReorderableRow = /** @class */ (function () {
         function ReorderableRow(dt, el, zone) {
             this.dt = dt;
@@ -3648,21 +3885,22 @@
         };
         return ReorderableRow;
     }());
-    ReorderableRow.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pReorderableRow]'
-                },] }
-    ];
-    ReorderableRow.ctorParameters = function () { return [
-        { type: Table },
-        { type: core.ElementRef },
-        { type: core.NgZone }
-    ]; };
-    ReorderableRow.propDecorators = {
-        index: [{ type: core.Input, args: ["pReorderableRow",] }],
-        pReorderableRowDisabled: [{ type: core.Input }],
-        onDrop: [{ type: core.HostListener, args: ['drop', ['$event'],] }]
-    };
+    ReorderableRow.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ReorderableRow, deps: [{ token: Table }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ReorderableRow.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: ReorderableRow, selector: "[pReorderableRow]", inputs: { index: ["pReorderableRow", "index"], pReorderableRowDisabled: "pReorderableRowDisabled" }, host: { listeners: { "drop": "onDrop($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ReorderableRow, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[pReorderableRow]'
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { index: [{
+                    type: i0.Input,
+                    args: ["pReorderableRow"]
+                }], pReorderableRowDisabled: [{
+                    type: i0.Input
+                }], onDrop: [{
+                    type: i0.HostListener,
+                    args: ['drop', ['$event']]
+                }] } });
     var ColumnFilterFormElement = /** @class */ (function () {
         function ColumnFilterFormElement(dt) {
             this.dt = dt;
@@ -3693,32 +3931,44 @@
         };
         return ColumnFilterFormElement;
     }());
-    ColumnFilterFormElement.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'p-columnFilterFormElement',
-                    template: "\n        <ng-container *ngIf=\"filterTemplate; else builtInElement\">\n            <ng-container *ngTemplateOutlet=\"filterTemplate; context: {$implicit: filterConstraint.value, filterCallback: filterCallback}\"></ng-container>\n        </ng-container>\n        <ng-template #builtInElement>\n            <ng-container [ngSwitch]=\"type\">\n                <input *ngSwitchCase=\"'text'\" type=\"text\" pInputText [value]=\"filterConstraint?.value\" (input)=\"onModelChange($event.target.value)\"\n                    (keydown.enter)=\"onTextInputEnterKeyDown($event)\" [attr.placeholder]=\"placeholder\">\n                <p-inputNumber *ngSwitchCase=\"'numeric'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" (onKeyDown)=\"onNumericInputKeyDown($event)\" [showButtons]=\"true\" [attr.placeholder]=\"placeholder\"\n                    [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" [prefix]=\"prefix\" [suffix]=\"suffix\" [placeholder]=\"placeholder\"\n                    [mode]=\"currency ? 'currency' : 'decimal'\" [locale]=\"locale\" [localeMatcher]=\"localeMatcher\" [currency]=\"currency\" [currencyDisplay]=\"currencyDisplay\" [useGrouping]=\"useGrouping\"></p-inputNumber>\n                <p-triStateCheckbox *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></p-triStateCheckbox>\n                <p-calendar *ngSwitchCase=\"'date'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></p-calendar>\n            </ng-container>\n        </ng-template>\n    ",
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    ColumnFilterFormElement.ctorParameters = function () { return [
-        { type: Table }
-    ]; };
-    ColumnFilterFormElement.propDecorators = {
-        field: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        filterConstraint: [{ type: core.Input }],
-        filterTemplate: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        minFractionDigits: [{ type: core.Input }],
-        maxFractionDigits: [{ type: core.Input }],
-        prefix: [{ type: core.Input }],
-        suffix: [{ type: core.Input }],
-        locale: [{ type: core.Input }],
-        localeMatcher: [{ type: core.Input }],
-        currency: [{ type: core.Input }],
-        currencyDisplay: [{ type: core.Input }],
-        useGrouping: [{ type: core.Input }]
-    };
+    ColumnFilterFormElement.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ColumnFilterFormElement, deps: [{ token: Table }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ColumnFilterFormElement.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ColumnFilterFormElement, selector: "p-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: "useGrouping" }, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"filterTemplate; else builtInElement\">\n            <ng-container *ngTemplateOutlet=\"filterTemplate; context: {$implicit: filterConstraint.value, filterCallback: filterCallback}\"></ng-container>\n        </ng-container>\n        <ng-template #builtInElement>\n            <ng-container [ngSwitch]=\"type\">\n                <input *ngSwitchCase=\"'text'\" type=\"text\" pInputText [value]=\"filterConstraint?.value\" (input)=\"onModelChange($event.target.value)\"\n                    (keydown.enter)=\"onTextInputEnterKeyDown($event)\" [attr.placeholder]=\"placeholder\">\n                <p-inputNumber *ngSwitchCase=\"'numeric'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" (onKeyDown)=\"onNumericInputKeyDown($event)\" [showButtons]=\"true\" [attr.placeholder]=\"placeholder\"\n                    [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" [prefix]=\"prefix\" [suffix]=\"suffix\" [placeholder]=\"placeholder\"\n                    [mode]=\"currency ? 'currency' : 'decimal'\" [locale]=\"locale\" [localeMatcher]=\"localeMatcher\" [currency]=\"currency\" [currencyDisplay]=\"currencyDisplay\" [useGrouping]=\"useGrouping\"></p-inputNumber>\n                <p-triStateCheckbox *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></p-triStateCheckbox>\n                <p-calendar *ngSwitchCase=\"'date'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></p-calendar>\n            </ng-container>\n        </ng-template>\n    ", isInline: true, components: [{ type: i5__namespace.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "step", "inputStyle", "inputStyleClass", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { type: i6__namespace.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { type: i7__namespace.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "numberOfMonths", "view", "touchUI", "timeSeparator", "focusTrap", "firstDayOfWeek", "showTransitionOptions", "hideTransitionOptions", "tabindex", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8__namespace.InputText, selector: "[pInputText]" }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ColumnFilterFormElement, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'p-columnFilterFormElement',
+                        template: "\n        <ng-container *ngIf=\"filterTemplate; else builtInElement\">\n            <ng-container *ngTemplateOutlet=\"filterTemplate; context: {$implicit: filterConstraint.value, filterCallback: filterCallback}\"></ng-container>\n        </ng-container>\n        <ng-template #builtInElement>\n            <ng-container [ngSwitch]=\"type\">\n                <input *ngSwitchCase=\"'text'\" type=\"text\" pInputText [value]=\"filterConstraint?.value\" (input)=\"onModelChange($event.target.value)\"\n                    (keydown.enter)=\"onTextInputEnterKeyDown($event)\" [attr.placeholder]=\"placeholder\">\n                <p-inputNumber *ngSwitchCase=\"'numeric'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" (onKeyDown)=\"onNumericInputKeyDown($event)\" [showButtons]=\"true\" [attr.placeholder]=\"placeholder\"\n                    [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" [prefix]=\"prefix\" [suffix]=\"suffix\" [placeholder]=\"placeholder\"\n                    [mode]=\"currency ? 'currency' : 'decimal'\" [locale]=\"locale\" [localeMatcher]=\"localeMatcher\" [currency]=\"currency\" [currencyDisplay]=\"currencyDisplay\" [useGrouping]=\"useGrouping\"></p-inputNumber>\n                <p-triStateCheckbox *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></p-triStateCheckbox>\n                <p-calendar *ngSwitchCase=\"'date'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></p-calendar>\n            </ng-container>\n        </ng-template>\n    ",
+                        encapsulation: i0.ViewEncapsulation.None
+                    }]
+            }], ctorParameters: function () { return [{ type: Table }]; }, propDecorators: { field: [{
+                    type: i0.Input
+                }], type: [{
+                    type: i0.Input
+                }], filterConstraint: [{
+                    type: i0.Input
+                }], filterTemplate: [{
+                    type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
+                }], minFractionDigits: [{
+                    type: i0.Input
+                }], maxFractionDigits: [{
+                    type: i0.Input
+                }], prefix: [{
+                    type: i0.Input
+                }], suffix: [{
+                    type: i0.Input
+                }], locale: [{
+                    type: i0.Input
+                }], localeMatcher: [{
+                    type: i0.Input
+                }], currency: [{
+                    type: i0.Input
+                }], currencyDisplay: [{
+                    type: i0.Input
+                }], useGrouping: [{
+                    type: i0.Input
+                }] } });
     var ColumnFilter = /** @class */ (function () {
         function ColumnFilter(el, dt, renderer, config) {
             this.el = el;
@@ -3728,7 +3978,7 @@
             this.type = 'text';
             this.display = 'row';
             this.showMenu = true;
-            this.operator = api.FilterOperator.AND;
+            this.operator = i1.FilterOperator.AND;
             this.showOperator = true;
             this.showClearButton = true;
             this.showApplyButton = true;
@@ -3756,14 +4006,15 @@
         ColumnFilter.prototype.generateMatchModeOptions = function () {
             var _this = this;
             var _a;
-            this.matchModes = this.matchModeOptions || ((_a = this.config.filterMatchModeOptions[this.type]) === null || _a === void 0 ? void 0 : _a.map(function (key) {
-                return { label: _this.config.getTranslation(key), value: key };
-            }));
+            this.matchModes = this.matchModeOptions ||
+                ((_a = this.config.filterMatchModeOptions[this.type]) === null || _a === void 0 ? void 0 : _a.map(function (key) {
+                    return { label: _this.config.getTranslation(key), value: key };
+                }));
         };
         ColumnFilter.prototype.generateOperatorOptions = function () {
             this.operatorOptions = [
-                { label: this.config.getTranslation(api.TranslationKeys.MATCH_ALL), value: api.FilterOperator.AND },
-                { label: this.config.getTranslation(api.TranslationKeys.MATCH_ANY), value: api.FilterOperator.OR }
+                { label: this.config.getTranslation(i1.TranslationKeys.MATCH_ALL), value: i1.FilterOperator.AND },
+                { label: this.config.getTranslation(i1.TranslationKeys.MATCH_ANY), value: i1.FilterOperator.OR }
             ];
         };
         ColumnFilter.prototype.ngAfterContentInit = function () {
@@ -3912,13 +4163,13 @@
             }
             else {
                 if (this.type === 'text')
-                    return api.FilterMatchMode.STARTS_WITH;
+                    return i1.FilterMatchMode.STARTS_WITH;
                 else if (this.type === 'numeric')
-                    return api.FilterMatchMode.EQUALS;
+                    return i1.FilterMatchMode.EQUALS;
                 else if (this.type === 'date')
-                    return api.FilterMatchMode.DATE_IS;
+                    return i1.FilterMatchMode.DATE_IS;
                 else
-                    return api.FilterMatchMode.CONTAINS;
+                    return i1.FilterMatchMode.CONTAINS;
             }
         };
         ColumnFilter.prototype.getDefaultOperator = function () {
@@ -3964,35 +4215,35 @@
         });
         Object.defineProperty(ColumnFilter.prototype, "applyButtonLabel", {
             get: function () {
-                return this.config.getTranslation(api.TranslationKeys.APPLY);
+                return this.config.getTranslation(i1.TranslationKeys.APPLY);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(ColumnFilter.prototype, "clearButtonLabel", {
             get: function () {
-                return this.config.getTranslation(api.TranslationKeys.CLEAR);
+                return this.config.getTranslation(i1.TranslationKeys.CLEAR);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(ColumnFilter.prototype, "addRuleButtonLabel", {
             get: function () {
-                return this.config.getTranslation(api.TranslationKeys.ADD_RULE);
+                return this.config.getTranslation(i1.TranslationKeys.ADD_RULE);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(ColumnFilter.prototype, "removeRuleButtonLabel", {
             get: function () {
-                return this.config.getTranslation(api.TranslationKeys.REMOVE_RULE);
+                return this.config.getTranslation(i1.TranslationKeys.REMOVE_RULE);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(ColumnFilter.prototype, "noFilterLabel", {
             get: function () {
-                return this.config.getTranslation(api.TranslationKeys.NO_FILTER);
+                return this.config.getTranslation(i1.TranslationKeys.NO_FILTER);
             },
             enumerable: false,
             configurable: true
@@ -4090,72 +4341,110 @@
         };
         return ColumnFilter;
     }());
-    ColumnFilter.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'p-columnFilter',
-                    template: "\n        <div class=\"p-column-filter\" [ngClass]=\"{'p-column-filter-row': display === 'row', 'p-column-filter-menu': display === 'menu'}\">\n            <p-columnFilterFormElement *ngIf=\"display === 'row'\" class=\"p-fluid\" [type]=\"type\" [field]=\"field\" [filterConstraint]=\"dt.filters[field]\" [filterTemplate]=\"filterTemplate\" [placeholder]=\"placeholder\" [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" [prefix]=\"prefix\" [suffix]=\"suffix\"\n                                    [locale]=\"locale\"  [localeMatcher]=\"localeMatcher\" [currency]=\"currency\" [currencyDisplay]=\"currencyDisplay\" [useGrouping]=\"useGrouping\"></p-columnFilterFormElement>\n            <button #icon *ngIf=\"showMenuButton\" type=\"button\" class=\"p-column-filter-menu-button p-link\" aria-haspopup=\"true\" [attr.aria-expanded]=\"overlayVisible\"\n                [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}\" \n                (click)=\"toggleMenu()\" (keydown)=\"onToggleButtonKeyDown($event)\"><span class=\"pi pi-filter-icon pi-filter\"></span></button>\n            <button #icon *ngIf=\"showMenuButton && display === 'row'\" [ngClass]=\"{'p-hidden-space': !hasRowFilter()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\"><span class=\"pi pi-filter-slash\"></span></button>\n            <div *ngIf=\"showMenu && overlayVisible\" [ngClass]=\"{'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu'}\" \n                [@overlayAnimation]=\"'visible'\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (keydown.escape)=\"onEscape()\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: {$implicit: field}\"></ng-container>\n                <ul *ngIf=\"display === 'row'; else menu\" class=\"p-column-filter-row-items\">\n                    <li class=\"p-column-filter-row-item\" *ngFor=\"let matchMode of matchModes; let i = index;\" (click)=\"onRowMatchModeChange(matchMode.value)\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"this.onRowMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': isRowMatchModeSelected(matchMode.value)}\" [attr.tabindex]=\"i === 0 ? '0' : null\">{{matchMode.label}}</li>\n                    <li class=\"p-column-filter-separator\"></li>\n                    <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">{{noFilterLabel}}</li>\n                </ul>\n                <ng-template #menu>\n                    <div class=\"p-column-filter-operator\" *ngIf=\"isShowOperator\">\n                        <p-dropdown [options]=\"operatorOptions\" [ngModel]=\"operator\" (ngModelChange)=\"onOperatorChange($event)\" styleClass=\"p-column-filter-operator-dropdown\"></p-dropdown>\n                    </div>\n                    <div class=\"p-column-filter-constraints\">\n                        <div *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\" class=\"p-column-filter-constraint\">\n                            <p-dropdown  *ngIf=\"showMatchModes && matchModes\" [options]=\"matchModes\" [ngModel]=\"fieldConstraint.matchMode\" (ngModelChange)=\"onMenuMatchModeChange($event, fieldConstraint)\" styleClass=\"p-column-filter-matchmode-dropdown\"></p-dropdown>\n                            <p-columnFilterFormElement [type]=\"type\" [field]=\"field\" [filterConstraint]=\"fieldConstraint\" [filterTemplate]=\"filterTemplate\" [placeholder]=\"placeholder\"\n                            [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" [prefix]=\"prefix\" [suffix]=\"suffix\"\n                            [locale]=\"locale\"  [localeMatcher]=\"localeMatcher\" [currency]=\"currency\" [currencyDisplay]=\"currencyDisplay\" [useGrouping]=\"useGrouping\"></p-columnFilterFormElement>\n                            <div>\n                                <button *ngIf=\"showRemoveIcon\" type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-column-filter-remove-button p-button-text p-button-danger p-button-sm\" (click)=\"removeConstraint(fieldConstraint)\" pRipple [label]=\"removeRuleButtonLabel\"></button>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"p-column-filter-add-rule\" *ngIf=\"isShowAddConstraint\">\n                        <button type=\"button\" pButton [label]=\"addRuleButtonLabel\" icon=\"pi pi-plus\" class=\"p-column-filter-add-button p-button-text p-button-sm\" (click)=\"addConstraint()\" pRipple></button>\n                    </div>\n                    <div class=\"p-column-filter-buttonbar\">\n                        <button *ngIf=\"showClearButton\" type=\"button\" pButton class=\"p-button-outlined\" (click)=\"clearFilter()\" [label]=\"clearButtonLabel\" pRipple></button>\n                        <button *ngIf=\"showApplyButton\" type=\"button\" pButton (click)=\"applyFilter()\" [label]=\"applyButtonLabel\" pRipple></button>\n                    </div>\n                </ng-template>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: {$implicit: field}\"></ng-container>\n            </div>\n        </div>\n    ",
-                    animations: [
-                        animations.trigger('overlayAnimation', [
-                            animations.transition(':enter', [
-                                animations.style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                                animations.animate('.12s cubic-bezier(0, 0, 0.2, 1)')
-                            ]),
-                            animations.transition(':leave', [
-                                animations.animate('.1s linear', animations.style({ opacity: 0 }))
+    ColumnFilter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ColumnFilter, deps: [{ token: i0__namespace.ElementRef }, { token: Table }, { token: i0__namespace.Renderer2 }, { token: i1__namespace.PrimeNGConfig }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ColumnFilter.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ColumnFilter, selector: "p-columnFilter", inputs: { field: "field", type: "type", display: "display", showMenu: "showMenu", matchMode: "matchMode", operator: "operator", showOperator: "showOperator", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showMatchModes: "showMatchModes", showAddButton: "showAddButton", hideOnClear: "hideOnClear", placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: "maxConstraints", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: "useGrouping" }, queries: [{ propertyName: "templates", predicate: i1.PrimeTemplate }], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }], ngImport: i0__namespace, template: "\n        <div class=\"p-column-filter\" [ngClass]=\"{'p-column-filter-row': display === 'row', 'p-column-filter-menu': display === 'menu'}\">\n            <p-columnFilterFormElement *ngIf=\"display === 'row'\" class=\"p-fluid\" [type]=\"type\" [field]=\"field\" [filterConstraint]=\"dt.filters[field]\" [filterTemplate]=\"filterTemplate\" [placeholder]=\"placeholder\" [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" [prefix]=\"prefix\" [suffix]=\"suffix\"\n                                    [locale]=\"locale\"  [localeMatcher]=\"localeMatcher\" [currency]=\"currency\" [currencyDisplay]=\"currencyDisplay\" [useGrouping]=\"useGrouping\"></p-columnFilterFormElement>\n            <button #icon *ngIf=\"showMenuButton\" type=\"button\" class=\"p-column-filter-menu-button p-link\" aria-haspopup=\"true\" [attr.aria-expanded]=\"overlayVisible\"\n                [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}\"\n                (click)=\"toggleMenu()\" (keydown)=\"onToggleButtonKeyDown($event)\"><span class=\"pi pi-filter-icon pi-filter\"></span></button>\n            <button #icon *ngIf=\"showMenuButton && display === 'row'\" [ngClass]=\"{'p-hidden-space': !hasRowFilter()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\"><span class=\"pi pi-filter-slash\"></span></button>\n            <div *ngIf=\"showMenu && overlayVisible\" [ngClass]=\"{'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu'}\"\n                [@overlayAnimation]=\"'visible'\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (keydown.escape)=\"onEscape()\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: {$implicit: field}\"></ng-container>\n                <ul *ngIf=\"display === 'row'; else menu\" class=\"p-column-filter-row-items\">\n                    <li class=\"p-column-filter-row-item\" *ngFor=\"let matchMode of matchModes; let i = index;\" (click)=\"onRowMatchModeChange(matchMode.value)\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"this.onRowMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': isRowMatchModeSelected(matchMode.value)}\" [attr.tabindex]=\"i === 0 ? '0' : null\">{{matchMode.label}}</li>\n                    <li class=\"p-column-filter-separator\"></li>\n                    <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">{{noFilterLabel}}</li>\n                </ul>\n                <ng-template #menu>\n                    <div class=\"p-column-filter-operator\" *ngIf=\"isShowOperator\">\n                        <p-dropdown [options]=\"operatorOptions\" [ngModel]=\"operator\" (ngModelChange)=\"onOperatorChange($event)\" styleClass=\"p-column-filter-operator-dropdown\"></p-dropdown>\n                    </div>\n                    <div class=\"p-column-filter-constraints\">\n                        <div *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\" class=\"p-column-filter-constraint\">\n                            <p-dropdown  *ngIf=\"showMatchModes && matchModes\" [options]=\"matchModes\" [ngModel]=\"fieldConstraint.matchMode\" (ngModelChange)=\"onMenuMatchModeChange($event, fieldConstraint)\" styleClass=\"p-column-filter-matchmode-dropdown\"></p-dropdown>\n                            <p-columnFilterFormElement [type]=\"type\" [field]=\"field\" [filterConstraint]=\"fieldConstraint\" [filterTemplate]=\"filterTemplate\" [placeholder]=\"placeholder\"\n                            [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" [prefix]=\"prefix\" [suffix]=\"suffix\"\n                            [locale]=\"locale\"  [localeMatcher]=\"localeMatcher\" [currency]=\"currency\" [currencyDisplay]=\"currencyDisplay\" [useGrouping]=\"useGrouping\"></p-columnFilterFormElement>\n                            <div>\n                                <button *ngIf=\"showRemoveIcon\" type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-column-filter-remove-button p-button-text p-button-danger p-button-sm\" (click)=\"removeConstraint(fieldConstraint)\" pRipple [label]=\"removeRuleButtonLabel\"></button>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"p-column-filter-add-rule\" *ngIf=\"isShowAddConstraint\">\n                        <button type=\"button\" pButton [label]=\"addRuleButtonLabel\" icon=\"pi pi-plus\" class=\"p-column-filter-add-button p-button-text p-button-sm\" (click)=\"addConstraint()\" pRipple></button>\n                    </div>\n                    <div class=\"p-column-filter-buttonbar\">\n                        <button *ngIf=\"showClearButton\" type=\"button\" pButton class=\"p-button-outlined\" (click)=\"clearFilter()\" [label]=\"clearButtonLabel\" pRipple></button>\n                        <button *ngIf=\"showApplyButton\" type=\"button\" pButton (click)=\"applyFilter()\" [label]=\"applyButtonLabel\" pRipple></button>\n                    </div>\n                </ng-template>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: {$implicit: field}\"></ng-container>\n            </div>\n        </div>\n    ", isInline: true, components: [{ type: ColumnFilterFormElement, selector: "p-columnFilterFormElement", inputs: ["field", "type", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping"] }, { type: i10__namespace.Dropdown, selector: "p-dropdown", inputs: ["scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "selectId", "dataKey", "filterBy", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "virtualScroll", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaFilterLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "disabled", "options", "filterValue"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i11__namespace.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], animations: [
+            animations.trigger('overlayAnimation', [
+                animations.transition(':enter', [
+                    animations.style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                    animations.animate('.12s cubic-bezier(0, 0, 0.2, 1)')
+                ]),
+                animations.transition(':leave', [
+                    animations.animate('.1s linear', animations.style({ opacity: 0 }))
+                ])
+            ])
+        ], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: ColumnFilter, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'p-columnFilter',
+                        template: "\n        <div class=\"p-column-filter\" [ngClass]=\"{'p-column-filter-row': display === 'row', 'p-column-filter-menu': display === 'menu'}\">\n            <p-columnFilterFormElement *ngIf=\"display === 'row'\" class=\"p-fluid\" [type]=\"type\" [field]=\"field\" [filterConstraint]=\"dt.filters[field]\" [filterTemplate]=\"filterTemplate\" [placeholder]=\"placeholder\" [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" [prefix]=\"prefix\" [suffix]=\"suffix\"\n                                    [locale]=\"locale\"  [localeMatcher]=\"localeMatcher\" [currency]=\"currency\" [currencyDisplay]=\"currencyDisplay\" [useGrouping]=\"useGrouping\"></p-columnFilterFormElement>\n            <button #icon *ngIf=\"showMenuButton\" type=\"button\" class=\"p-column-filter-menu-button p-link\" aria-haspopup=\"true\" [attr.aria-expanded]=\"overlayVisible\"\n                [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}\"\n                (click)=\"toggleMenu()\" (keydown)=\"onToggleButtonKeyDown($event)\"><span class=\"pi pi-filter-icon pi-filter\"></span></button>\n            <button #icon *ngIf=\"showMenuButton && display === 'row'\" [ngClass]=\"{'p-hidden-space': !hasRowFilter()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\"><span class=\"pi pi-filter-slash\"></span></button>\n            <div *ngIf=\"showMenu && overlayVisible\" [ngClass]=\"{'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': display === 'menu'}\"\n                [@overlayAnimation]=\"'visible'\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (keydown.escape)=\"onEscape()\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: {$implicit: field}\"></ng-container>\n                <ul *ngIf=\"display === 'row'; else menu\" class=\"p-column-filter-row-items\">\n                    <li class=\"p-column-filter-row-item\" *ngFor=\"let matchMode of matchModes; let i = index;\" (click)=\"onRowMatchModeChange(matchMode.value)\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"this.onRowMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': isRowMatchModeSelected(matchMode.value)}\" [attr.tabindex]=\"i === 0 ? '0' : null\">{{matchMode.label}}</li>\n                    <li class=\"p-column-filter-separator\"></li>\n                    <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">{{noFilterLabel}}</li>\n                </ul>\n                <ng-template #menu>\n                    <div class=\"p-column-filter-operator\" *ngIf=\"isShowOperator\">\n                        <p-dropdown [options]=\"operatorOptions\" [ngModel]=\"operator\" (ngModelChange)=\"onOperatorChange($event)\" styleClass=\"p-column-filter-operator-dropdown\"></p-dropdown>\n                    </div>\n                    <div class=\"p-column-filter-constraints\">\n                        <div *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\" class=\"p-column-filter-constraint\">\n                            <p-dropdown  *ngIf=\"showMatchModes && matchModes\" [options]=\"matchModes\" [ngModel]=\"fieldConstraint.matchMode\" (ngModelChange)=\"onMenuMatchModeChange($event, fieldConstraint)\" styleClass=\"p-column-filter-matchmode-dropdown\"></p-dropdown>\n                            <p-columnFilterFormElement [type]=\"type\" [field]=\"field\" [filterConstraint]=\"fieldConstraint\" [filterTemplate]=\"filterTemplate\" [placeholder]=\"placeholder\"\n                            [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" [prefix]=\"prefix\" [suffix]=\"suffix\"\n                            [locale]=\"locale\"  [localeMatcher]=\"localeMatcher\" [currency]=\"currency\" [currencyDisplay]=\"currencyDisplay\" [useGrouping]=\"useGrouping\"></p-columnFilterFormElement>\n                            <div>\n                                <button *ngIf=\"showRemoveIcon\" type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-column-filter-remove-button p-button-text p-button-danger p-button-sm\" (click)=\"removeConstraint(fieldConstraint)\" pRipple [label]=\"removeRuleButtonLabel\"></button>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"p-column-filter-add-rule\" *ngIf=\"isShowAddConstraint\">\n                        <button type=\"button\" pButton [label]=\"addRuleButtonLabel\" icon=\"pi pi-plus\" class=\"p-column-filter-add-button p-button-text p-button-sm\" (click)=\"addConstraint()\" pRipple></button>\n                    </div>\n                    <div class=\"p-column-filter-buttonbar\">\n                        <button *ngIf=\"showClearButton\" type=\"button\" pButton class=\"p-button-outlined\" (click)=\"clearFilter()\" [label]=\"clearButtonLabel\" pRipple></button>\n                        <button *ngIf=\"showApplyButton\" type=\"button\" pButton (click)=\"applyFilter()\" [label]=\"applyButtonLabel\" pRipple></button>\n                    </div>\n                </ng-template>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: {$implicit: field}\"></ng-container>\n            </div>\n        </div>\n    ",
+                        animations: [
+                            animations.trigger('overlayAnimation', [
+                                animations.transition(':enter', [
+                                    animations.style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                                    animations.animate('.12s cubic-bezier(0, 0, 0.2, 1)')
+                                ]),
+                                animations.transition(':leave', [
+                                    animations.animate('.1s linear', animations.style({ opacity: 0 }))
+                                ])
                             ])
-                        ])
-                    ],
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    ColumnFilter.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: Table },
-        { type: core.Renderer2 },
-        { type: api.PrimeNGConfig }
-    ]; };
-    ColumnFilter.propDecorators = {
-        field: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        display: [{ type: core.Input }],
-        showMenu: [{ type: core.Input }],
-        matchMode: [{ type: core.Input }],
-        operator: [{ type: core.Input }],
-        showOperator: [{ type: core.Input }],
-        showClearButton: [{ type: core.Input }],
-        showApplyButton: [{ type: core.Input }],
-        showMatchModes: [{ type: core.Input }],
-        showAddButton: [{ type: core.Input }],
-        hideOnClear: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        matchModeOptions: [{ type: core.Input }],
-        maxConstraints: [{ type: core.Input }],
-        minFractionDigits: [{ type: core.Input }],
-        maxFractionDigits: [{ type: core.Input }],
-        prefix: [{ type: core.Input }],
-        suffix: [{ type: core.Input }],
-        locale: [{ type: core.Input }],
-        localeMatcher: [{ type: core.Input }],
-        currency: [{ type: core.Input }],
-        currencyDisplay: [{ type: core.Input }],
-        useGrouping: [{ type: core.Input }],
-        icon: [{ type: core.ViewChild, args: ['icon',] }],
-        templates: [{ type: core.ContentChildren, args: [api.PrimeTemplate,] }]
-    };
+                        ],
+                        encapsulation: i0.ViewEncapsulation.None
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: Table }, { type: i0__namespace.Renderer2 }, { type: i1__namespace.PrimeNGConfig }]; }, propDecorators: { field: [{
+                    type: i0.Input
+                }], type: [{
+                    type: i0.Input
+                }], display: [{
+                    type: i0.Input
+                }], showMenu: [{
+                    type: i0.Input
+                }], matchMode: [{
+                    type: i0.Input
+                }], operator: [{
+                    type: i0.Input
+                }], showOperator: [{
+                    type: i0.Input
+                }], showClearButton: [{
+                    type: i0.Input
+                }], showApplyButton: [{
+                    type: i0.Input
+                }], showMatchModes: [{
+                    type: i0.Input
+                }], showAddButton: [{
+                    type: i0.Input
+                }], hideOnClear: [{
+                    type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
+                }], matchModeOptions: [{
+                    type: i0.Input
+                }], maxConstraints: [{
+                    type: i0.Input
+                }], minFractionDigits: [{
+                    type: i0.Input
+                }], maxFractionDigits: [{
+                    type: i0.Input
+                }], prefix: [{
+                    type: i0.Input
+                }], suffix: [{
+                    type: i0.Input
+                }], locale: [{
+                    type: i0.Input
+                }], localeMatcher: [{
+                    type: i0.Input
+                }], currency: [{
+                    type: i0.Input
+                }], currencyDisplay: [{
+                    type: i0.Input
+                }], useGrouping: [{
+                    type: i0.Input
+                }], icon: [{
+                    type: i0.ViewChild,
+                    args: ['icon']
+                }], templates: [{
+                    type: i0.ContentChildren,
+                    args: [i1.PrimeTemplate]
+                }] } });
     var TableModule = /** @class */ (function () {
         function TableModule() {
         }
         return TableModule;
     }());
-    TableModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [common.CommonModule, paginator.PaginatorModule, inputtext.InputTextModule, dropdown.DropdownModule, scrolling.ScrollingModule, forms.FormsModule, button.ButtonModule, selectbutton.SelectButtonModule, calendar.CalendarModule, inputnumber.InputNumberModule, tristatecheckbox.TriStateCheckboxModule],
-                    exports: [Table, api.SharedModule, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, SortIcon,
-                        TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, scrolling.ScrollingModule, ColumnFilter],
-                    declarations: [Table, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, TableBody, ScrollableView, SortIcon,
-                        TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement]
-                },] }
-    ];
+    TableModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TableModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableModule, declarations: [Table, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, TableBody, ScrollableView, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement], imports: [i3.CommonModule, i2.PaginatorModule, i8.InputTextModule, i10.DropdownModule, i4.ScrollingModule, i9.FormsModule, i11.ButtonModule, selectbutton.SelectButtonModule, i7.CalendarModule, i5.InputNumberModule, i6.TriStateCheckboxModule], exports: [Table, i1.SharedModule, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, i4.ScrollingModule, ColumnFilter] });
+    TableModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableModule, imports: [[i3.CommonModule, i2.PaginatorModule, i8.InputTextModule, i10.DropdownModule, i4.ScrollingModule, i9.FormsModule, i11.ButtonModule, selectbutton.SelectButtonModule, i7.CalendarModule, i5.InputNumberModule, i6.TriStateCheckboxModule], i1.SharedModule,
+            i4.ScrollingModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: TableModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [i3.CommonModule, i2.PaginatorModule, i8.InputTextModule, i10.DropdownModule, i4.ScrollingModule, i9.FormsModule, i11.ButtonModule, selectbutton.SelectButtonModule, i7.CalendarModule, i5.InputNumberModule, i6.TriStateCheckboxModule],
+                        exports: [Table, i1.SharedModule, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, SortIcon,
+                            TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, i4.ScrollingModule, ColumnFilter],
+                        declarations: [Table, SortableColumn, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, TableBody, ScrollableView, SortIcon,
+                            TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement]
+                    }]
+            }] });
 
     /**
      * Generated bundle index. Do not edit.