primeng 11.1.0 → 11.2.3

package/bundles/primeng-table.umd.js

@@ -321,12 +321,14 @@
             this.valueSource = new rxjs.Subject();
             this.totalRecordsSource = new rxjs.Subject();
             this.columnsSource = new rxjs.Subject();
+            this.resetSource = new rxjs.Subject();
             this.sortSource$ = this.sortSource.asObservable();
             this.selectionSource$ = this.selectionSource.asObservable();
             this.contextMenuSource$ = this.contextMenuSource.asObservable();
             this.valueSource$ = this.valueSource.asObservable();
             this.totalRecordsSource$ = this.totalRecordsSource.asObservable();
             this.columnsSource$ = this.columnsSource.asObservable();
+            this.resetSource$ = this.resetSource.asObservable();
         }
         TableService.prototype.onSort = function (sortMeta) {
             this.sortSource.next(sortMeta);
@@ -334,6 +336,9 @@
         TableService.prototype.onSelectionChange = function () {
             this.selectionSource.next();
         };
+        TableService.prototype.onResetChange = function () {
+            this.resetSource.next();
+        };
         TableService.prototype.onContextMenu = function (data) {
             this.contextMenuSource.next(data);
         };
@@ -470,6 +475,9 @@
                     case 'frozencolgroup':
                         _this.frozenColGroupTemplate = item.template;
                         break;
+                    case 'frozenrowexpansion':
+                        _this.frozenExpandedRowTemplate = item.template;
+                        break;
                     case 'emptymessage':
                         _this.emptyMessageTemplate = item.template;
                         break;
@@ -534,7 +542,7 @@
             }
             if (simpleChange.multiSortMeta) {
                 this._multiSortMeta = simpleChange.multiSortMeta.currentValue;
-                if (this.sortMode === 'multiple') {
+                if (this.sortMode === 'multiple' && (this.initialized || (!this.lazy && !this.virtualScroll))) {
                     this.sortMultiple();
                 }
             }
@@ -688,7 +696,6 @@
             if (this.sortMode === 'single') {
                 this._sortOrder = (this.sortField === event.field) ? this.sortOrder * -1 : this.defaultSortOrder;
                 this._sortField = event.field;
-                this.sortSingle();
                 if (this.resetPageOnSort) {
                     this._first = 0;
                     this.firstChange.emit(this._first);
@@ -696,6 +703,7 @@
                         this.resetScrollTop();
                     }
                 }
+                this.sortSingle();
             }
             if (this.sortMode === 'multiple') {
                 var metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
@@ -937,7 +945,7 @@
                                 this._selection = null;
                                 this.selectionKeys = {};
                                 this.selectionChange.emit(this.selection);
-                                this.onRowUnselect.emit({ originalEvent: event.originalEvent, data: rowData, type: 'row' });
+                                this.onRowUnselect.emit({ originalEvent: event.originalEvent, data: rowData, type: 'row', index: event.rowIndex });
                             }
                             else {
                                 this._selection = rowData;
@@ -954,7 +962,7 @@
                                 var selectionIndex_2 = this.findIndexInSelection(rowData);
                                 this._selection = this.selection.filter(function (val, i) { return i != selectionIndex_2; });
                                 this.selectionChange.emit(this.selection);
-                                this.onRowUnselect.emit({ originalEvent: event.originalEvent, data: rowData, type: 'row' });
+                                this.onRowUnselect.emit({ originalEvent: event.originalEvent, data: rowData, type: 'row', index: event.rowIndex });
                                 if (dataKeyValue) {
                                     delete this.selectionKeys[dataKeyValue];
                                 }
@@ -998,15 +1006,20 @@
                         if (this.isSingleSelectionMode()) {
                             this.selection = rowData;
                             this.selectionChange.emit(rowData);
+                            if (dataKeyValue) {
+                                this.selectionKeys = {};
+                                this.selectionKeys[dataKeyValue] = 1;
+                            }
                         }
                         else if (this.isMultipleSelectionMode()) {
-                            this.selection = [rowData];
+                            this._selection = this.selection ? __spread(this.selection, [rowData]) : [rowData];
                             this.selectionChange.emit(this.selection);
-                        }
-                        if (dataKeyValue) {
-                            this.selectionKeys[dataKeyValue] = 1;
+                            if (dataKeyValue) {
+                                this.selectionKeys[dataKeyValue] = 1;
+                            }
                         }
                     }
+                    this.tableService.onSelectionChange();
                     this.contextMenu.show(event.originalEvent);
                     this.onContextMenuSelect.emit({ originalEvent: event, data: rowData, index: event.rowIndex });
                 }
@@ -1042,8 +1055,8 @@
                     }
                 }
             }
-            this.onRowSelect.emit({ originalEvent: event, data: rangeRowsData, type: 'row' });
             this.selectionChange.emit(this.selection);
+            this.onRowSelect.emit({ originalEvent: event, data: rangeRowsData, type: 'row' });
         };
         Table.prototype.clearSelectionRange = function (event) {
             var rangeStart, rangeEnd;
@@ -1333,7 +1346,7 @@
             this._multiSortMeta = null;
             this.tableService.onSort(null);
             this.filteredValue = null;
-            this.filters = {};
+            this.tableService.onResetChange();
             this.first = 0;
             this.firstChange.emit(this.first);
             if (this.lazy) {
@@ -2143,7 +2156,7 @@
     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\">\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.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    ",
+                    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
                 },] }
@@ -2526,6 +2539,11 @@
                 rowIndex: this.index
             });
         };
+        SelectableRow.prototype.onPageDownKeyDown = function () {
+            if (this.dt.virtualScroll) {
+                dom.DomHandler.findSingle(this.dt.scrollableViewChild.el.nativeElement, 'cdk-virtual-scroll-viewport').focus();
+            }
+        };
         SelectableRow.prototype.findNextSelectableRow = function (row) {
             var nextRow = row.nextElementSibling;
             if (nextRow) {
@@ -2582,7 +2600,8 @@
         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'],] }]
+        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', ['$event'],] }, { type: core.HostListener, args: ['keydown.pageup', ['$event'],] }, { type: core.HostListener, args: ['keydown.home', ['$event'],] }, { type: core.HostListener, args: ['keydown.end', ['$event'],] }, { type: core.HostListener, args: ['keydown.space', ['$event'],] }]
     };
     var SelectableRowDblClick = /** @class */ (function () {
         function SelectableRowDblClick(dt, tableService) {
@@ -2966,6 +2985,50 @@
                 }
             }
         };
+        EditableColumn.prototype.onArrowDown = function (event) {
+            if (this.isEnabled()) {
+                var currentCell = this.findCell(event.target);
+                if (currentCell) {
+                    var cellIndex = dom.DomHandler.index(currentCell);
+                    var targetCell = this.findNextEditableColumnByIndex(currentCell, cellIndex);
+                    if (targetCell) {
+                        if (this.dt.isEditingCellValid()) {
+                            this.closeEditingCell(true, event);
+                        }
+                        dom.DomHandler.invokeElementMethod(event.target, 'blur');
+                        dom.DomHandler.invokeElementMethod(targetCell, 'click');
+                    }
+                    event.preventDefault();
+                }
+            }
+        };
+        EditableColumn.prototype.onArrowUp = function (event) {
+            if (this.isEnabled()) {
+                var currentCell = this.findCell(event.target);
+                if (currentCell) {
+                    var cellIndex = dom.DomHandler.index(currentCell);
+                    var targetCell = this.findPrevEditableColumnByIndex(currentCell, cellIndex);
+                    if (targetCell) {
+                        if (this.dt.isEditingCellValid()) {
+                            this.closeEditingCell(true, event);
+                        }
+                        dom.DomHandler.invokeElementMethod(event.target, 'blur');
+                        dom.DomHandler.invokeElementMethod(targetCell, 'click');
+                    }
+                    event.preventDefault();
+                }
+            }
+        };
+        EditableColumn.prototype.onArrowLeft = function (event) {
+            if (this.isEnabled()) {
+                this.moveToPreviousCell(event);
+            }
+        };
+        EditableColumn.prototype.onArrowRight = function (event) {
+            if (this.isEnabled()) {
+                this.moveToNextCell(event);
+            }
+        };
         EditableColumn.prototype.findCell = function (element) {
             if (element) {
                 var cell = element;
@@ -3042,6 +3105,32 @@
                 return null;
             }
         };
+        EditableColumn.prototype.findNextEditableColumnByIndex = function (cell, index) {
+            var nextRow = cell.parentElement.nextElementSibling;
+            if (nextRow) {
+                var nextCell = nextRow.children[index];
+                if (nextCell && dom.DomHandler.hasClass(nextCell, 'p-editable-column')) {
+                    return nextCell;
+                }
+                return null;
+            }
+            else {
+                return null;
+            }
+        };
+        EditableColumn.prototype.findPrevEditableColumnByIndex = function (cell, index) {
+            var prevRow = cell.parentElement.previousElementSibling;
+            if (prevRow) {
+                var prevCell = prevRow.children[index];
+                if (prevCell && dom.DomHandler.hasClass(prevCell, 'p-editable-column')) {
+                    return prevCell;
+                }
+                return null;
+            }
+            else {
+                return null;
+            }
+        };
         EditableColumn.prototype.isEnabled = function () {
             return this.pEditableColumnDisabled !== true;
         };
@@ -3066,7 +3155,11 @@
         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'],] }]
+        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'],] }]
     };
     var EditableRow = /** @class */ (function () {
         function EditableRow(el) {
@@ -3565,7 +3658,7 @@
     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\"\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    ",
+                    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
                 },] }
     ];
@@ -3615,6 +3708,9 @@
                 _this.generateMatchModeOptions();
                 _this.generateOperatorOptions();
             });
+            this.resetSubscription = this.dt.tableService.resetSource$.subscribe(function () {
+                _this.clearFilter();
+            });
             this.generateMatchModeOptions();
             this.generateOperatorOptions();
         };
@@ -3704,8 +3800,10 @@
             this.dt._filter();
         };
         ColumnFilter.prototype.onOperatorChange = function (value) {
+            var _this = this;
             this.dt.filters[this.field].forEach(function (filterMeta) {
                 filterMeta.operator = value;
+                _this.operator = value;
             });
             if (!this.showApplyButton) {
                 this.dt._filter();
@@ -3779,7 +3877,7 @@
                 else if (this.type === 'numeric')
                     return api.FilterMatchMode.EQUALS;
                 else if (this.type === 'date')
-                    return api.FilterMatchMode.EQUALS;
+                    return api.FilterMatchMode.DATE_IS;
                 else
                     return api.FilterMatchMode.CONTAINS;
             }
@@ -3945,13 +4043,16 @@
             if (this.translationSubscription) {
                 this.translationSubscription.unsubscribe();
             }
+            if (this.resetSubscription) {
+                this.resetSubscription.unsubscribe();
+            }
         };
         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                            <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 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 type=\"button\" pButton class=\"p-button-outlined\" (click)=\"clearFilter()\" [label]=\"clearButtonLabel\" pRipple></button>\n                        <button 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    ",
+                    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 type=\"button\" pButton class=\"p-button-outlined\" (click)=\"clearFilter()\" [label]=\"clearButtonLabel\" pRipple></button>\n                        <button 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', [