igniteui-angular 12.3.16 → 12.3.19

package/bundles/igniteui-angular.umd.js

@@ -3414,10 +3414,6 @@
         __extends(IgxDateTimeFilteringOperand, _super);
         function IgxDateTimeFilteringOperand() {
             var _this = _super.call(this) || this;
-            var index = _this.operations.indexOf(_this.condition('equals'));
-            _this.operations.splice(index, 1);
-            index = _this.operations.indexOf(_this.condition('doesNotEqual'));
-            _this.operations.splice(index, 1);
             _this.operations = [{
                     name: 'equals',
                     isUnary: false,
@@ -3454,11 +3450,159 @@
                             targetp.minutes !== searchp.minutes ||
                             targetp.seconds !== searchp.seconds;
                     }
+                }, {
+                    name: 'before',
+                    isUnary: false,
+                    iconName: 'is-before',
+                    logic: function (target, searchVal) {
+                        if (!target) {
+                            return false;
+                        }
+                        _this.validateInputData(target);
+                        return target < searchVal;
+                    }
+                }, {
+                    name: 'after',
+                    isUnary: false,
+                    iconName: 'is-after',
+                    logic: function (target, searchVal) {
+                        if (!target) {
+                            return false;
+                        }
+                        _this.validateInputData(target);
+                        return target > searchVal;
+                    }
+                }, {
+                    name: 'today',
+                    isUnary: true,
+                    iconName: 'today',
+                    logic: function (target) {
+                        if (!target) {
+                            return false;
+                        }
+                        _this.validateInputData(target);
+                        var d = IgxDateTimeFilteringOperand.getDateParts(target, 'yMd');
+                        var now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'yMd');
+                        return d.year === now.year &&
+                            d.month === now.month &&
+                            d.day === now.day;
+                    }
+                }, {
+                    name: 'yesterday',
+                    isUnary: true,
+                    iconName: 'yesterday',
+                    logic: function (target) {
+                        if (!target) {
+                            return false;
+                        }
+                        _this.validateInputData(target);
+                        var td = IgxDateTimeFilteringOperand.getDateParts(target, 'yMd');
+                        var y = (function (d) { return new Date(d.setDate(d.getDate() - 1)); })(new Date());
+                        var yesterday = IgxDateTimeFilteringOperand.getDateParts(y, 'yMd');
+                        return td.year === yesterday.year &&
+                            td.month === yesterday.month &&
+                            td.day === yesterday.day;
+                    }
+                }, {
+                    name: 'thisMonth',
+                    isUnary: true,
+                    iconName: 'this-month',
+                    logic: function (target) {
+                        if (!target) {
+                            return false;
+                        }
+                        _this.validateInputData(target);
+                        var d = IgxDateTimeFilteringOperand.getDateParts(target, 'yM');
+                        var now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'yM');
+                        return d.year === now.year &&
+                            d.month === now.month;
+                    }
+                }, {
+                    name: 'lastMonth',
+                    isUnary: true,
+                    iconName: 'last-month',
+                    logic: function (target) {
+                        if (!target) {
+                            return false;
+                        }
+                        _this.validateInputData(target);
+                        var d = IgxDateTimeFilteringOperand.getDateParts(target, 'yM');
+                        var now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'yM');
+                        if (!now.month) {
+                            now.month = 11;
+                            now.year -= 1;
+                        }
+                        else {
+                            now.month--;
+                        }
+                        return d.year === now.year &&
+                            d.month === now.month;
+                    }
+                }, {
+                    name: 'nextMonth',
+                    isUnary: true,
+                    iconName: 'next-month',
+                    logic: function (target) {
+                        if (!target) {
+                            return false;
+                        }
+                        _this.validateInputData(target);
+                        var d = IgxDateTimeFilteringOperand.getDateParts(target, 'yM');
+                        var now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'yM');
+                        if (now.month === 11) {
+                            now.month = 0;
+                            now.year += 1;
+                        }
+                        else {
+                            now.month++;
+                        }
+                        return d.year === now.year &&
+                            d.month === now.month;
+                    }
+                }, {
+                    name: 'thisYear',
+                    isUnary: true,
+                    iconName: 'this-year',
+                    logic: function (target) {
+                        if (!target) {
+                            return false;
+                        }
+                        _this.validateInputData(target);
+                        var d = IgxDateTimeFilteringOperand.getDateParts(target, 'y');
+                        var now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'y');
+                        return d.year === now.year;
+                    }
+                }, {
+                    name: 'lastYear',
+                    isUnary: true,
+                    iconName: 'last-year',
+                    logic: function (target) {
+                        if (!target) {
+                            return false;
+                        }
+                        _this.validateInputData(target);
+                        var d = IgxDateTimeFilteringOperand.getDateParts(target, 'y');
+                        var now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'y');
+                        return d.year === now.year - 1;
+                    }
+                }, {
+                    name: 'nextYear',
+                    isUnary: true,
+                    iconName: 'next-year',
+                    logic: function (target) {
+                        if (!target) {
+                            return false;
+                        }
+                        _this.validateInputData(target);
+                        var d = IgxDateTimeFilteringOperand.getDateParts(target, 'y');
+                        var now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'y');
+                        return d.year === now.year + 1;
+                    }
                 }].concat(_this.operations);
             return _this;
         }
         return IgxDateTimeFilteringOperand;
-    }(IgxDateFilteringOperand));
+    }(IgxBaseDateTimeFilteringOperand));
     var IgxTimeFilteringOperand = /** @class */ (function (_super) {
         __extends(IgxTimeFilteringOperand, _super);
         function IgxTimeFilteringOperand() {
@@ -7271,7 +7415,8 @@
          */
         IgxRowAddCrudState.prototype.endRowTransaction = function (commit, event) {
             var _this = this;
-            if (this.row && this.row.getClassName() === IgxAddRow.name) {
+            var isAddRow = this.row && this.row.getClassName() === IgxAddRow.name;
+            if (isAddRow) {
                 this.grid.rowAdded.pipe(operators.first()).subscribe(function (addRowArgs) {
                     var rowData = addRowArgs.data;
                     var pinnedIndex = _this.grid.pinnedRecords.findIndex(function (x) { return x[_this.primaryKey] === rowData[_this.primaryKey]; });
@@ -7287,10 +7432,12 @@
             if (args.cancel) {
                 return args;
             }
-            this.endAddRow();
-            if (commit) {
-                this.grid.rowAddedNotifier.next({ data: args.newValue });
-                this.grid.rowAdded.emit({ data: args.newValue });
+            if (isAddRow) {
+                this.endAddRow();
+                if (commit) {
+                    this.grid.rowAddedNotifier.next({ data: args.newValue });
+                    this.grid.rowAdded.emit({ data: args.newValue });
+                }
             }
             return args;
         };
@@ -41281,6 +41428,10 @@
             _super.prototype.onBlur.call(this);
         };
         /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.onFocus = function () {
+            this._internalFilter = this.comboInput.value || '';
+        };
+        /** @hidden @internal */
         IgxSimpleComboComponent.prototype.getEditElement = function () {
             return this.comboInput.nativeElement;
         };
@@ -41418,7 +41569,7 @@
     IgxSimpleComboComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-simple-combo',
-                    template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\" aria-autocomplete=\"both\"\n        [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" [disabled]=\"disabled\"\n        [igxTextSelection]=\"!composing\" />\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\"\n        (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"handleItemClick()\" *igxFor=\"let item of data\n            | comboClean\n            | comboFiltering:filterValue:displayKey:filteringOptions:true\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
+                    template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" (focus)=\"onFocus()\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\" aria-autocomplete=\"both\"\n        [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" [disabled]=\"disabled\"\n        [igxTextSelection]=\"!composing\" />\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\"\n        (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"handleItemClick()\" *igxFor=\"let item of data\n            | comboClean\n            | comboFiltering:filterValue:displayKey:filteringOptions:true\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
                     providers: [
                         IgxComboAPIService,
                         { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
@@ -46181,7 +46332,7 @@
         { type: i0.Component, args: [{
                     preserveWhitespaces: false,
                     selector: 'igx-excel-style-header',
-                    template: "<header *ngIf=\"esf.column\"\r\n        class=\"igx-excel-filter__menu-header\">\r\n    <h4>{{ esf.column.header || esf.column.field }}</h4>\r\n    <div class=\"igx-excel-filter__menu-header-actions\">\r\n        <button *ngIf=\"showSelecting\"\r\n            igxButton=\"icon\"\r\n            (click)=\"esf.onSelect()\"\r\n            [ngClass]=\"esf.selectedClass()\"\r\n            [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\r\n        >\r\n            <igx-icon>done</igx-icon>\r\n        </button>\r\n        <button *ngIf=\"showPinning\"\r\n            igxButton=\"icon\"\r\n            (click)=\"esf.onPin()\"\r\n            [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\r\n        >\r\n            <igx-icon family=\"imx-icons\" [name]=\"esf.column.pinned ? 'unpin-left' : 'pin-left'\"></igx-icon>\r\n        </button>\r\n        <button *ngIf=\"showHiding\"\r\n            igxButton=\"icon\"\r\n            (click)=\"esf.onHideToggle()\"\r\n            [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\r\n        >\r\n            <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\r\n        </button>\r\n    </div>\r\n</header>\r\n"
+                    template: "<header *ngIf=\"esf.column\"\n        class=\"igx-excel-filter__menu-header\">\n    <h4>{{ esf.column.header || esf.column.field }}</h4>\n    <div class=\"igx-excel-filter__menu-header-actions\">\n        <button *ngIf=\"showSelecting\"\n            igxButton=\"icon\"\n            (click)=\"esf.onSelect()\"\n            [ngClass]=\"esf.selectedClass()\"\n            [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n        >\n            <igx-icon>done</igx-icon>\n        </button>\n        <button *ngIf=\"showPinning\"\n            igxButton=\"icon\"\n            (click)=\"esf.onPin()\"\n            [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n        >\n            <igx-icon family=\"imx-icons\" [name]=\"esf.column.pinned ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        </button>\n        <button *ngIf=\"showHiding\"\n            igxButton=\"icon\"\n            (click)=\"esf.onHideToggle()\"\n            [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n        >\n            <igx-icon>{{ esf.column.hidden ? 'visibility' : 'visibility_off' }}</igx-icon>\n        </button>\n    </div>\n</header>\n"
                 },] }
     ];
     IgxExcelStyleHeaderComponent.ctorParameters = function () { return [
@@ -48545,8 +48696,10 @@
                     });
                 }
                 else {
-                    var range = { rowStart: this.activeNode.row, rowEnd: this.activeNode.row,
-                        columnStart: this.activeNode.column, columnEnd: this.activeNode.column };
+                    var range = {
+                        rowStart: this.activeNode.row, rowEnd: this.activeNode.row,
+                        columnStart: this.activeNode.column, columnEnd: this.activeNode.column
+                    };
                     this.grid.selectRange(range);
                     this.grid.notifyChanges();
                 }
@@ -49108,11 +49261,15 @@
                     .find(function (c) { return _this.isColumnFullyVisible(c.visibleIndex); })) === null || _a === void 0 ? void 0 : _a.visibleIndex;
             var column = this.grid.visibleColumns.find(function (col) { return !col.columnLayout && col.visibleIndex === colIndex; });
             var rowInd = rowIndex ? rowIndex : (_b = this.grid.rowList.find(function (r) { return !_this.shouldPerformVerticalScroll(r.index, colIndex); })) === null || _b === void 0 ? void 0 : _b.index;
-            var node = { row: rowInd !== null && rowInd !== void 0 ? rowInd : 0,
+            var node = {
+                row: rowInd !== null && rowInd !== void 0 ? rowInd : 0,
                 column: (_c = column === null || column === void 0 ? void 0 : column.visibleIndex) !== null && _c !== void 0 ? _c : 0, level: (_d = column === null || column === void 0 ? void 0 : column.level) !== null && _d !== void 0 ? _d : 0,
                 mchCache: column ? { level: column.level, visibleIndex: column.visibleIndex } : {},
-                layout: column && column.columnLayoutChild ? { rowStart: column.rowStart, colStart: column.colStart,
-                    rowEnd: column.rowEnd, colEnd: column.colEnd, columnVisibleIndex: column.visibleIndex } : null };
+                layout: column && column.columnLayoutChild ? {
+                    rowStart: column.rowStart, colStart: column.colStart,
+                    rowEnd: column.rowEnd, colEnd: column.colEnd, columnVisibleIndex: column.visibleIndex
+                } : null
+            };
             return node;
         };
         IgxGridNavigationService.prototype.handleMCHeaderNav = function (key, ctrl) {
@@ -50600,7 +50757,7 @@
         }
         IgxGroupByMetaPipe.prototype.transform = function (key, grid) {
             var column = grid.getColumnByName(key);
-            return { groupable: column.groupable, title: column.header || key };
+            return { groupable: !!(column === null || column === void 0 ? void 0 : column.groupable), title: (column === null || column === void 0 ? void 0 : column.header) || key };
         };
         return IgxGroupByMetaPipe;
     }());
@@ -51831,7 +51988,7 @@
     IgxAdvancedFilteringDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-advanced-filtering-dialog',
-                    template: "<article\n    *ngIf=\"grid\"\n    class=\"igx-advanced-filter\"\n    igxDrag\n    [ghost]=\"false\"\n    [dragTolerance]=\"0\"\n    (dragStart)=\"dragStart($event)\"\n    (dragEnd)=\"dragEnd()\"\n    (dragMove)=\"onDragMove($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [ngClass]=\"{\n        'igx-advanced-filter--cosy': grid.displayDensity === 'cosy',\n        'igx-advanced-filter--compact': grid.displayDensity === 'compact',\n        'igx-advanced-filter--inline': inline\n    }\"\n>\n    <header class=\"igx-advanced-filter__header\" igxDragHandle>\n        <h4 class=\"igx-typography__h6\" style=\"pointer-events: none;\">\n            {{ grid.resourceStrings.igx_grid_advanced_filter_title }}\n        </h4>\n        <div class=\"igx-filter-legend\">\n            <div class=\"igx-filter-legend__item--and\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_and_label }}</span>\n            </div>\n            <div class=\"igx-filter-legend__item--or\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_or_label }}</span>\n            </div>\n        </div>\n    </header>\n\n    <article #expressionsContainer\n             class=\"igx-advanced-filter__main\"\n             (scroll)=\"onExpressionsScrolled()\">\n        <ng-container *ngIf=\"!rootGroup\">\n\n            <button #addRootAndGroupButton\n                igxButton=\"outlined\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"addAndGroup()\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\" [displayDensity]=\"displayDensity\" (click)=\"addOrGroup()\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{grid.resourceStrings.igx_grid_advanced_filter_initial_text}}\n                </h6>\n            </div>\n        </ng-container>\n\n        <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n            <button #addConditionButton\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addCondition(expressionItem, afterExpression)\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_add_condition}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addAndGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addOrGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n        </ng-template>\n\n        <ng-template #filterOperandTemplate let-expressionItem>\n            <div *ngIf=\"!expressionItem.inEditMode\"\n                class=\"igx-filter-tree__expression-item\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                >\n                <igx-chip [data]=\"expressionItem\"\n                          [displayDensity]=\"displayDensity === 'compact' ? 'cosy' : displayDensity\"\n                          [removable]=\"true\"\n                          [selected]=\"expressionItem.selected\"\n                          (keydown)=\"invokeClick($event)\"\n                          (click)=\"onChipClick(expressionItem)\"\n                          (dblclick)=\"onChipDblClick(expressionItem)\"\n                          (remove)=\"onChipRemove(expressionItem)\"\n                          (selectedChanged)=\"onChipSelectionEnd()\"\n                    >\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">{{ expressionItem.columnHeader || expressionItem.expression.fieldName }}</span>\n                    <igx-prefix>\n                        <igx-icon family=\"imx-icons\" [name]=\"expressionItem.expression.condition.iconName\">\n                    </igx-icon>\n                    </igx-prefix>\n                    <span class=\"igx-filter-tree__expression-condition\">\n                        {{ getConditionFriendlyName(expressionItem.expression.condition.name) }}\n                    </span>\n                    <span igxSuffix *ngIf=\"!expressionItem.expression.condition.isUnary\">\n                        {{\n                            isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal | columnFormatter:getFormatter(expressionItem.expression.fieldName):undefined)\n                                : (expressionItem.expression.searchVal | date:getFormat(expressionItem.expression.fieldName):undefined:grid.locale)\n                            : expressionItem.expression.searchVal\n                        }}\n                    </span>\n                </igx-chip>\n                <div class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"(expressionItem.selected && selectedExpressions.length === 1) || expressionItem.hovered\">\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionEdit(expressionItem)\">\n                        edit\n                    </igx-icon>\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionAdd(expressionItem)\"\n                        *ngIf=\"!expressionItem.inAddMode && (expressionItem.parent !== currentGroup || expressionItem !== currentGroup.children[currentGroup.children.length - 1])\"\n                    >\n                        add\n                    </igx-icon>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inEditMode\"\n                #editingInputsContainer\n                class=\"igx-filter-tree__inputs\"\n            >\n                <igx-select #columnSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"columnSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_column_placeholder\"\n                            [(ngModel)]=\"selectedColumn\">\n                    <igx-select-item *ngFor=\"let column of filterableColumns\" [value]=\"column\">\n                        {{column.header || column.field}}\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-select #conditionSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"conditionSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_filter_condition_placeholder\"\n                            [(ngModel)]=\"selectedCondition\"\n                            [disabled]=\"!selectedColumn\">\n                    <igx-prefix *ngIf=\"selectedColumn && conditionSelect.value && selectedColumn.filters.condition(conditionSelect.value)\">\n                        <igx-icon family=\"imx-icons\" [name]=\"selectedColumn.filters.condition(conditionSelect.value).iconName\">\n                        </igx-icon>\n                    </igx-prefix>\n                    <igx-select-item *ngFor=\"let condition of getConditionList()\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\">\n                        <div class=\"igx-grid__filtering-dropdown-items\">\n                            <igx-icon family=\"imx-icons\"\n                                      [name]=\"selectedColumn.filters.condition(condition).iconName\">\n                            </igx-icon>\n                            <span class=\"igx-grid__filtering-dropdown-text\">{{getConditionFriendlyName(condition)}}</span>\n                        </div>\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-input-group *ngIf=\"!selectedColumn || (selectedColumn.dataType !== 'date' && selectedColumn.dataType !== 'time' && selectedColumn.dataType !== 'dateTime')\"\n                                 type=\"box\"\n                                 [displayDensity]=\"'compact'\">\n                    <input #searchValueInput\n                           igxInput\n                           [disabled]=\"!selectedColumn || !selectedCondition\n                            || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"\n                           [type]=\"selectedColumn && selectedColumn.dataType === 'number' ? 'number' : 'text'\"\n                           [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_value_placeholder\"\n                           [(ngModel)]=\"searchValue\"/>\n                </igx-input-group>\n\n                <igx-date-picker #picker *ngIf=\"selectedColumn && selectedColumn.dataType === 'date'\"\n                    [(value)]=\"searchValue\"\n                    (keydown)=\"openPicker($event)\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [displayDensity]=\"'compact'\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                    [disabled]=\"!selectedColumn || !selectedCondition\n                        || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\n                    <!-- disable default icons -->\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-date-picker>\n\n                <igx-time-picker #picker *ngIf=\"selectedColumn && selectedColumn.dataType === 'time'\"\n                    [inputFormat]=\"selectedColumn.defaultTimeFormat\"\n                    [(value)]=\"searchValue\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    [displayDensity]=\"'compact'\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_time_placeholder\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"!selectedColumn || !selectedCondition ||\n                             (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\n                     <!-- disable default icons -->\n                     <igx-picker-toggle></igx-picker-toggle>\n                     <igx-picker-clear></igx-picker-clear>\n                </igx-time-picker>\n\n                <igx-input-group #inputGroup type=\"box\" *ngIf=\"selectedColumn && selectedColumn.dataType === 'dateTime'\"\n                type=\"box\"\n                [displayDensity]=\"'compact'\">\n                    <input #input igxInput tabindex=\"0\"\n                        [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                        [igxDateTimeEditor]=\"selectedColumn.defaultDateTimeFormat\"\n                        [(ngModel)]=\"searchValue\"\n                        [disabled]=\"!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"/>\n                </igx-input-group>\n\n                <div class=\"igx-filter-tree__inputs-actions\">\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitOperandEdit()\">\n                        <igx-icon>check</igx-icon>\n                    </button>\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            (click)=\"cancelOperandEdit()\">\n                        <igx-icon>close</igx-icon>\n                    </button>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inAddMode\"\n                #addModeContainer\n                class=\"igx-filter-tree__buttons\"\n            >\n                <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem.parent, expressionItem)\"></ng-container>\n                <button igxButton=\"icon\"\n                        [displayDensity]=\"displayDensity\"\n                        (click)=\"cancelOperandAdd()\">\n                    <igx-icon>close</igx-icon>\n                </button>\n            </div>\n\n        </ng-template>\n\n        <ng-template #expressionTreeTemplate let-expressionItem>\n            <div class=\"igx-filter-tree\">\n                <div tabindex=\"0\"\n                     class=\"igx-filter-tree__line\"\n                     [ngClass]=\"{\n                         'igx-filter-tree__line--and': expressionItem.operator === 0,\n                         'igx-filter-tree__line--or': expressionItem.operator === 1,\n                         'igx-filter-tree__line--selected': expressionItem.selected\n                     }\"\n                     (keydown)=\"invokeClick($event)\"\n                     (click)=\"onGroupClick(expressionItem)\"\n                ></div>\n\n                <div class=\"igx-filter-tree__expression\">\n                    <ng-container *ngFor=\"let expr of expressionItem.children\">\n                        <ng-container *ngTemplateOutlet=\"isExpressionGroup(expr) ? expressionTreeTemplate : filterOperandTemplate; context: context(expr)\"></ng-container>\n                    </ng-container>\n                    <div *ngIf=\"currentGroup === expressionItem\"\n                        #currentGroupButtonsContainer\n                        class=\"igx-filter-tree__buttons\">\n                        <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem)\"></ng-container>\n                        <button igxButton=\"outlined\"\n                                *ngIf=\"expressionItem !== rootGroup\"\n                                [displayDensity]=\"displayDensity\"\n                                [disabled]=\"hasEditedExpression || expressionItem.children.length < 2\"\n                                (click)=\"endGroup(expressionItem)\">\n                            <span>{{grid.resourceStrings.igx_grid_advanced_filter_end_group}}</span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </ng-template>\n\n        <ng-container *ngIf=\"rootGroup\">\n            <ng-container *ngTemplateOutlet=\"expressionTreeTemplate; context: context(rootGroup)\"></ng-container>\n        </ng-container>\n\n        <div igxToggle\n            class=\"igx-filter-contextual-menu\"\n            (keydown)=\"onKeyDown($event)\"\n            (closed)=\"contextMenuClosed()\"\n            [ngClass]=\"{\n                'igx-filter-contextual-menu--cosy': displayDensity === 'cosy',\n                'igx-filter-contextual-menu--compact': displayDensity === 'compact'\n            }\"\n        >\n            <button igxButton=\"icon\"\n                    class=\"igx-filter-contextual-menu__close-btn\"\n                    (click)=\"clearSelection()\"\n            >\n                <igx-icon>close</igx-icon>\n            </button>\n\n            <ng-container *ngIf=\"contextualGroup\">\n                <igx-buttongroup [displayDensity]=\"displayDensity\"\n                                 [multiSelection]=\"false\"\n                                 [values]=\"filteringLogics\"\n                                 type=\"outline\"\n                                 (selected)=\"selectFilteringLogic($event)\">\n                </igx-buttongroup>\n\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"!contextualGroup.parent\"\n                    (click)=\"ungroup()\"\n                >\n                    <igx-icon family=\"imx-icons\" name=\"ungroup\"></igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_ungroup}}</span>\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteGroup()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    <igx-icon>delete</igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_delete}}</span>\n                </button>\n            </ng-container>\n            <ng-container *ngIf=\"!contextualGroup\">\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createAndGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_and_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createOrGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_or_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteFilters()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_delete_filters}}\n                </button>\n            </ng-container>\n        </div>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button\n                igxButton=\"flat\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button\n                igxButton=\"raised\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n<div #overlayOutlet\n     igxOverlayOutlet\n     class=\"igx-advanced-filter__outlet\"\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n"
+                    template: "<article\n    *ngIf=\"grid\"\n    class=\"igx-advanced-filter\"\n    igxDrag\n    [ghost]=\"false\"\n    [dragTolerance]=\"0\"\n    (dragStart)=\"dragStart($event)\"\n    (dragEnd)=\"dragEnd()\"\n    (dragMove)=\"onDragMove($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [ngClass]=\"{\n        'igx-advanced-filter--cosy': grid.displayDensity === 'cosy',\n        'igx-advanced-filter--compact': grid.displayDensity === 'compact',\n        'igx-advanced-filter--inline': inline\n    }\"\n>\n    <header class=\"igx-advanced-filter__header\" igxDragHandle>\n        <h4 class=\"igx-typography__h6\" style=\"pointer-events: none;\">\n            {{ grid.resourceStrings.igx_grid_advanced_filter_title }}\n        </h4>\n        <div class=\"igx-filter-legend\">\n            <div class=\"igx-filter-legend__item--and\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_and_label }}</span>\n            </div>\n            <div class=\"igx-filter-legend__item--or\">\n                <span>{{ grid.resourceStrings.igx_grid_advanced_filter_or_label }}</span>\n            </div>\n        </div>\n    </header>\n\n    <article #expressionsContainer\n             class=\"igx-advanced-filter__main\"\n             (scroll)=\"onExpressionsScrolled()\">\n        <ng-container *ngIf=\"!rootGroup\">\n\n            <button #addRootAndGroupButton\n                igxButton=\"outlined\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"addAndGroup()\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\" [displayDensity]=\"displayDensity\" (click)=\"addOrGroup()\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n            <div class=\"igx-filter-empty\">\n                <h6 class=\"igx-filter-empty__title\">\n                    {{grid.resourceStrings.igx_grid_advanced_filter_initial_text}}\n                </h6>\n            </div>\n        </ng-container>\n\n        <ng-template #addExpressionsTemplate let-expressionItem let-afterExpression=\"afterExpression\">\n            <button #addConditionButton\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addCondition(expressionItem, afterExpression)\"\n            >\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_add_condition}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addAndGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_and_group}}</span>\n            </button>\n\n            <button igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"hasEditedExpression\"\n                    (click)=\"addOrGroup(expressionItem, afterExpression)\">\n                <igx-icon>add</igx-icon>\n                <span>{{grid.resourceStrings.igx_grid_advanced_filter_or_group}}</span>\n            </button>\n\n        </ng-template>\n\n        <ng-template #filterOperandTemplate let-expressionItem>\n            <div *ngIf=\"!expressionItem.inEditMode\"\n                class=\"igx-filter-tree__expression-item\"\n                (mouseenter)=\"expressionItem.hovered = true\"\n                (mouseleave)=\"expressionItem.hovered = false\"\n                >\n                <igx-chip [data]=\"expressionItem\"\n                          [displayDensity]=\"displayDensity === 'compact' ? 'cosy' : displayDensity\"\n                          [removable]=\"true\"\n                          [selected]=\"expressionItem.selected\"\n                          (keydown)=\"invokeClick($event)\"\n                          (click)=\"onChipClick(expressionItem)\"\n                          (dblclick)=\"onChipDblClick(expressionItem)\"\n                          (remove)=\"onChipRemove(expressionItem)\"\n                          (selectedChanged)=\"onChipSelectionEnd()\"\n                    >\n                    <span igxPrefix class=\"igx-filter-tree__expression-column\">{{ expressionItem.columnHeader || expressionItem.expression.fieldName }}</span>\n                    <igx-prefix>\n                        <igx-icon family=\"imx-icons\" [name]=\"expressionItem.expression.condition.iconName\">\n                    </igx-icon>\n                    </igx-prefix>\n                    <span class=\"igx-filter-tree__expression-condition\">\n                        {{ getConditionFriendlyName(expressionItem.expression.condition.name) }}\n                    </span>\n                    <span igxSuffix *ngIf=\"!expressionItem.expression.condition.isUnary\">\n                        {{\n                            isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal | columnFormatter:getFormatter(expressionItem.expression.fieldName):undefined)\n                                : (expressionItem.expression.searchVal | date:getFormat(expressionItem.expression.fieldName):undefined:grid.locale)\n                            : expressionItem.expression.searchVal\n                        }}\n                    </span>\n                </igx-chip>\n                <div class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"(expressionItem.selected && selectedExpressions.length === 1) || expressionItem.hovered\">\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionEdit(expressionItem)\">\n                        edit\n                    </igx-icon>\n                    <igx-icon\n                        tabindex=\"0\"\n                        (keydown)=\"invokeClick($event)\"\n                        (click)=\"enterExpressionAdd(expressionItem)\"\n                        *ngIf=\"!expressionItem.inAddMode && (expressionItem.parent !== currentGroup || expressionItem !== currentGroup.children[currentGroup.children.length - 1])\"\n                    >\n                        add\n                    </igx-icon>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inEditMode\"\n                #editingInputsContainer\n                class=\"igx-filter-tree__inputs\"\n            >\n                <igx-select #columnSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"columnSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_column_placeholder\"\n                            [(ngModel)]=\"selectedColumn\">\n                    <igx-select-item *ngFor=\"let column of filterableColumns\" [value]=\"column\">\n                        {{column.header || column.field}}\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-select #conditionSelect\n                            type=\"box\"\n                            [displayDensity]=\"'compact'\"\n                            [overlaySettings]=\"conditionSelectOverlaySettings\"\n                            [placeholder]=\"grid.resourceStrings.igx_grid_filter_condition_placeholder\"\n                            [(ngModel)]=\"selectedCondition\"\n                            [disabled]=\"!selectedColumn\">\n                    <igx-prefix *ngIf=\"selectedColumn && conditionSelect.value && selectedColumn.filters.condition(conditionSelect.value)\">\n                        <igx-icon family=\"imx-icons\" [name]=\"selectedColumn.filters.condition(conditionSelect.value).iconName\">\n                        </igx-icon>\n                    </igx-prefix>\n                    <igx-select-item *ngFor=\"let condition of getConditionList()\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\">\n                        <div class=\"igx-grid__filtering-dropdown-items\">\n                            <igx-icon family=\"imx-icons\"\n                                      [name]=\"selectedColumn.filters.condition(condition).iconName\">\n                            </igx-icon>\n                            <span class=\"igx-grid__filtering-dropdown-text\">{{getConditionFriendlyName(condition)}}</span>\n                        </div>\n                    </igx-select-item>\n                </igx-select>\n\n                <igx-input-group *ngIf=\"!selectedColumn || (selectedColumn.dataType !== 'date' && selectedColumn.dataType !== 'time' && selectedColumn.dataType !== 'dateTime')\"\n                                 type=\"box\"\n                                 [displayDensity]=\"'compact'\">\n                    <input #searchValueInput\n                           igxInput\n                           [disabled]=\"!selectedColumn || !selectedCondition\n                            || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"\n                           [type]=\"selectedColumn && selectedColumn.dataType === 'number' ? 'number' : 'text'\"\n                           [placeholder]=\"grid.resourceStrings.igx_grid_advanced_filter_value_placeholder\"\n                           [(ngModel)]=\"searchValue\"/>\n                </igx-input-group>\n\n                <igx-date-picker #picker *ngIf=\"selectedColumn && selectedColumn.dataType === 'date'\"\n                    [(value)]=\"searchValue\"\n                    (keydown)=\"openPicker($event)\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    (click)=\"picker.open()\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [displayDensity]=\"'compact'\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    [displayFormat]=\"selectedColumn.pipeArgs.format\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                    [disabled]=\"!selectedColumn || !selectedCondition\n                        || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\n                    <!-- disable default icons -->\n                    <igx-picker-toggle></igx-picker-toggle>\n                    <igx-picker-clear></igx-picker-clear>\n                </igx-date-picker>\n\n                <igx-time-picker #picker *ngIf=\"selectedColumn && selectedColumn.dataType === 'time'\"\n                    [inputFormat]=\"selectedColumn.defaultTimeFormat\"\n                    [(value)]=\"searchValue\"\n                    [formatter]=\"selectedColumn.formatter\"\n                    [locale]=\"grid.locale\"\n                    [outlet]=\"grid.outlet\"\n                    (click)=\"picker.open()\"\n                    (keydown)=\"openPicker($event)\"\n                    [displayDensity]=\"'compact'\"\n                    [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_time_placeholder\"\n                    type=\"box\"\n                    [readOnly]=\"true\"\n                    [disabled]=\"!selectedColumn || !selectedCondition ||\n                             (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\">\n                     <!-- disable default icons -->\n                     <igx-picker-toggle></igx-picker-toggle>\n                     <igx-picker-clear></igx-picker-clear>\n                </igx-time-picker>\n\n                <igx-input-group #inputGroup type=\"box\" *ngIf=\"selectedColumn && selectedColumn.dataType === 'dateTime'\"\n                type=\"box\"\n                [displayDensity]=\"'compact'\">\n                    <input #input igxInput tabindex=\"0\"\n                        [placeholder]=\"grid.resourceStrings.igx_grid_filter_row_date_placeholder\"\n                        [igxDateTimeEditor]=\"selectedColumn.defaultDateTimeFormat\"\n                        [(ngModel)]=\"searchValue\"\n                        [disabled]=\"!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)\"/>\n                </igx-input-group>\n\n                <div class=\"igx-filter-tree__inputs-actions\">\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            [disabled]=\"!operandCanBeCommitted()\"\n                            (click)=\"commitOperandEdit()\">\n                        <igx-icon>check</igx-icon>\n                    </button>\n                    <button igxButton=\"icon\"\n                            [displayDensity]=\"displayDensity\"\n                            (click)=\"cancelOperandEdit()\">\n                        <igx-icon>close</igx-icon>\n                    </button>\n                </div>\n            </div>\n\n            <div *ngIf=\"expressionItem.inAddMode\"\n                #addModeContainer\n                class=\"igx-filter-tree__buttons\"\n            >\n                <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem.parent, expressionItem)\"></ng-container>\n                <button igxButton=\"icon\"\n                        [displayDensity]=\"displayDensity\"\n                        (click)=\"cancelOperandAdd()\">\n                    <igx-icon>close</igx-icon>\n                </button>\n            </div>\n\n        </ng-template>\n\n        <ng-template #expressionTreeTemplate let-expressionItem>\n            <div class=\"igx-filter-tree\">\n                <div tabindex=\"0\"\n                     class=\"igx-filter-tree__line\"\n                     [ngClass]=\"{\n                         'igx-filter-tree__line--and': expressionItem.operator === 0,\n                         'igx-filter-tree__line--or': expressionItem.operator === 1,\n                         'igx-filter-tree__line--selected': expressionItem.selected\n                     }\"\n                     (keydown)=\"invokeClick($event)\"\n                     (click)=\"onGroupClick(expressionItem)\"\n                ></div>\n\n                <div class=\"igx-filter-tree__expression\">\n                    <ng-container *ngFor=\"let expr of expressionItem.children\">\n                        <ng-container *ngTemplateOutlet=\"isExpressionGroup(expr) ? expressionTreeTemplate : filterOperandTemplate; context: context(expr)\"></ng-container>\n                    </ng-container>\n                    <div *ngIf=\"currentGroup === expressionItem\"\n                        #currentGroupButtonsContainer\n                        class=\"igx-filter-tree__buttons\">\n                        <ng-container *ngTemplateOutlet=\"addExpressionsTemplate; context: context(expressionItem)\"></ng-container>\n                        <button igxButton=\"outlined\"\n                                *ngIf=\"expressionItem !== rootGroup\"\n                                [displayDensity]=\"displayDensity\"\n                                [disabled]=\"hasEditedExpression || expressionItem.children.length < 2\"\n                                (click)=\"endGroup(expressionItem)\">\n                            <span>{{grid.resourceStrings.igx_grid_advanced_filter_end_group}}</span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </ng-template>\n\n        <ng-container *ngIf=\"rootGroup\">\n            <ng-container *ngTemplateOutlet=\"expressionTreeTemplate; context: context(rootGroup)\"></ng-container>\n        </ng-container>\n\n        <div igxToggle\n            class=\"igx-filter-contextual-menu\"\n            (keydown)=\"onKeyDown($event)\"\n            (closed)=\"contextMenuClosed()\"\n            [ngClass]=\"{\n                'igx-filter-contextual-menu--cosy': displayDensity === 'cosy',\n                'igx-filter-contextual-menu--compact': displayDensity === 'compact'\n            }\"\n        >\n            <button igxButton=\"icon\"\n                    class=\"igx-filter-contextual-menu__close-btn\"\n                    (click)=\"clearSelection()\"\n            >\n                <igx-icon>close</igx-icon>\n            </button>\n\n            <ng-container *ngIf=\"contextualGroup\">\n                <igx-buttongroup [displayDensity]=\"displayDensity\"\n                                 [multiSelection]=\"false\"\n                                 [values]=\"filteringLogics\"\n                                 type=\"outline\"\n                                 (selected)=\"selectFilteringLogic($event)\">\n                </igx-buttongroup>\n\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    [disabled]=\"!contextualGroup.parent\"\n                    (click)=\"ungroup()\"\n                >\n                    <igx-icon family=\"imx-icons\" name=\"ungroup\"></igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_ungroup}}</span>\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteGroup()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    <igx-icon>delete</igx-icon>\n                    <span>{{grid.resourceStrings.igx_grid_advanced_filter_delete}}</span>\n                </button>\n            </ng-container>\n            <ng-container *ngIf=\"!contextualGroup\">\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createAndGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_and_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"createOrGroup()\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_create_or_group}}\n                </button>\n                <button\n                    igxButton=\"outlined\"\n                    [displayDensity]=\"displayDensity\"\n                    (click)=\"deleteFilters()\"\n                    class=\"igx-filter-contextual-menu__delete-btn\"\n                >\n                    {{grid.resourceStrings.igx_grid_advanced_filter_delete_filters}}\n                </button>\n            </ng-container>\n        </div>\n    </article>\n\n    <footer class=\"igx-excel-filter__secondary-footer\">\n        <div class=\"igx-excel-filter__clear\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__cancel\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n            </button>\n        </div>\n        <div class=\"igx-excel-filter__apply\">\n            <button\n                igxButton=\"raised\"\n                type=\"button\"\n                [displayDensity]=\"displayDensity\"\n                (click)=\"onApplyButtonClick($event)\">\n                {{ grid.resourceStrings.igx_grid_excel_apply }}\n            </button>\n        </div>\n    </footer>\n</article>\n<div #overlayOutlet\n     igxOverlayOutlet\n     class=\"igx-advanced-filter__outlet\"\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n"
                 },] }
     ];
     IgxAdvancedFilteringDialogComponent.ctorParameters = function () { return [
@@ -60945,12 +61102,10 @@
             this.tbody.nativeElement.style.display = 'none';
             var res = !this.nativeElement.parentElement ||
                 this.nativeElement.parentElement.clientHeight === 0 ||
-                this.nativeElement.parentElement.clientHeight === renderedHeight;
-            if (!this.platform.isChromium && !this.platform.isFirefox) {
+                this.nativeElement.parentElement.clientHeight === renderedHeight ||
                 // If grid causes the parent container to extend (for example when container is flex)
                 // we should always auto-size since the actual size of the container will continuously change as the grid renders elements.
-                res = this.checkContainerSizeChange();
-            }
+                this.checkContainerSizeChange();
             this.tbody.nativeElement.style.display = '';
             return res;
         };
@@ -64633,7 +64788,7 @@
             this.gridAPI = gridAPI;
             this.row = new IgxGridRow(this.gridAPI.grid, -1, {});
         }
-        IgxGridRowClassesPipe.prototype.transform = function (cssClasses, row, editMode, selected, dirty, deleted, dragging, index, mrl, filteredOut, _) {
+        IgxGridRowClassesPipe.prototype.transform = function (cssClasses, row, editMode, selected, dirty, deleted, dragging, index, mrl, filteredOut, _rowData, _) {
             var e_3, _c, e_4, _d;
             var result = new Set(['igx-grid__tr', index % 2 ? row.grid.evenRowCSS : row.grid.oddRowCSS]);
             var mapping = [
@@ -69924,7 +70079,9 @@
                 if (changes && this.columnList.length > 0) {
                     changes.forEachAddedItem(function (rec) {
                         var col = _this.getColumnByName(rec.item.fieldName);
-                        col.hidden = true;
+                        if (col) {
+                            col.hidden = true;
+                        }
                     });
                     changes.forEachRemovedItem(function (rec) {
                         var col = _this.getColumnByName(rec.item.fieldName);
@@ -70238,7 +70395,7 @@
                         IgxForOfScrollSyncService
                     ],
                     selector: 'igx-grid',
-                    template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]='outerWidth'\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [density]=\"displayDensity\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)='preventContainerScroll($event)'\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf='data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>\n            <div #pinContainer *ngIf='pinnedData.length > 0'\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:paginator?.page:paginator?.perPage:id:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight'\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]='getRowTemplate(rowData)'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'\n                (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail='true' style=\"overflow: auto; width: 100%;\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)='detailsViewFocused(detailsContainer, rowIndex)' #detailsContainer [attr.data-rowindex]='rowIndex'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\" style='display: flex;'>\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]='detailTemplate.first'\n                    [ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth'  [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-container *ngIf=\"totalRecords || pagingMode === 1\">\n        <ng-content select=\"igx-paginator\"></ng-content>\n    </ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n   [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_less</igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n    [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_more</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n"
+                    template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]='outerWidth'\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [density]=\"displayDensity\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)='preventContainerScroll($event)'\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf='data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>\n            <div #pinContainer *ngIf='pinnedData.length > 0'\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:paginator?.page:paginator?.perPage:id:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight'\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]='getRowTemplate(rowData)'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'\n                (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail='true' style=\"overflow: auto; width: 100%;\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)='detailsViewFocused(detailsContainer, rowIndex)' #detailsContainer [attr.data-rowindex]='rowIndex'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\" style='display: flex;'>\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]='detailTemplate.first'\n                    [ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth'  [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-container *ngIf=\"totalRecords || pagingMode === 1\">\n        <ng-content select=\"igx-paginator\"></ng-content>\n    </ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n   [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_less</igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n    [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_more</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n"
                 },] }
     ];
     IgxGridComponent.propDecorators = {
@@ -71189,7 +71346,7 @@
     IgxGridToolbarAdvancedFilteringComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-grid-toolbar-advanced-filtering',
-                    template: "<button igxButton=\"outlined\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n    [ngClass]=\"grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n</button>\n"
+                    template: "<button igxButton=\"outlined\" type=\"button\" [displayDensity]=\"grid.displayDensity\" name=\"btnAdvancedFiltering\" igxRipple\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_tooltip\"\n    (click)=\"grid.openAdvancedFilteringDialog(overlaySettings)\"\n    [ngClass]=\"grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'\">\n    <igx-icon>filter_list</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>\n</button>\n"
                 },] }
     ];
     IgxGridToolbarAdvancedFilteringComponent.ctorParameters = function () { return [
@@ -71461,7 +71618,7 @@
     IgxGridToolbarExporterComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-grid-toolbar-exporter',
-                    template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n    igxButton=\"outlined\" [displayDensity]=\"grid.displayDensity\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n    <igx-icon>import_export</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">\n        {{ grid.exportText || grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n    </span>\n    <igx-icon>arrow_drop_down</igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        <li *ngIf=\"grid.exportExcel || exportExcel\" #btnExportExcel id=\"btnExportExcel\"\n            class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"export('excel', toggleRef)\">\n\n            <ng-template #excel>\n                <ng-content select=[excelText],excel-text></ng-content>\n            </ng-template>\n            <excel-text *ngIf=\"!hasExcelAttr\">\n                {{ grid.exportExcelText || grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n            </excel-text>\n            <ng-container *ngTemplateOutlet=\"excel\"></ng-container>\n        </li>\n\n        <li *ngIf=\"grid.exportCsv || exportCSV\" #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n            igxRipple (click)=\"export('csv', toggleRef)\">\n\n            <ng-template #csv>\n                <ng-content select=[csvText],csv-text></ng-content>\n            </ng-template>\n            <csv-text *ngIf=\"!hasCSVAttr\">\n                {{ grid.exportCsvText || grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>\n            <ng-container *ngTemplateOutlet=\"csv\"></ng-container>\n        </li>\n    </ul>\n</div>\n"
+                    template: "<button [title]=\"grid?.resourceStrings.igx_grid_toolbar_exporter_button_tooltip\" [disabled]=\"isExporting\"\n    igxButton=\"outlined\" type=\"button\" [displayDensity]=\"grid.displayDensity\" igxRipple #btn (click)=\"toggle(btn, toggleRef)\">\n\n    <igx-icon>import_export</igx-icon>\n    <span #ref>\n        <ng-content></ng-content>\n    </span>\n    <span *ngIf=\"!ref.childNodes.length\">\n        {{ grid.exportText || grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }}\n    </span>\n    <igx-icon>arrow_drop_down</igx-icon>\n</button>\n\n<div class=\"igx-grid-toolbar__dropdown\" id=\"btnExport\">\n    <ul class=\"igx-grid-toolbar__dd-list\" igxToggle #toggleRef=\"toggle\">\n        <li *ngIf=\"grid.exportExcel || exportExcel\" #btnExportExcel id=\"btnExportExcel\"\n            class=\"igx-grid-toolbar__dd-list-items\" igxRipple (click)=\"export('excel', toggleRef)\">\n\n            <ng-template #excel>\n                <ng-content select=[excelText],excel-text></ng-content>\n            </ng-template>\n            <excel-text *ngIf=\"!hasExcelAttr\">\n                {{ grid.exportExcelText || grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}}\n            </excel-text>\n            <ng-container *ngTemplateOutlet=\"excel\"></ng-container>\n        </li>\n\n        <li *ngIf=\"grid.exportCsv || exportCSV\" #btnExportCsv id=\"btnExportCsv\" class=\"igx-grid-toolbar__dd-list-items\"\n            igxRipple (click)=\"export('csv', toggleRef)\">\n\n            <ng-template #csv>\n                <ng-content select=[csvText],csv-text></ng-content>\n            </ng-template>\n            <csv-text *ngIf=\"!hasCSVAttr\">\n                {{ grid.exportCsvText || grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }}</csv-text>\n            <ng-container *ngTemplateOutlet=\"csv\"></ng-container>\n        </li>\n    </ul>\n</div>\n"
                 },] }
     ];
     IgxGridToolbarExporterComponent.ctorParameters = function () { return [
@@ -71508,7 +71665,7 @@
     IgxGridToolbarHidingComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-grid-toolbar-hiding',
-                    template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\" #btn igxButton=\"outlined\"\n        name=\"btnColumnHiding\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon>{{ !grid.hiddenColumnsCount ? 'visibility' : 'visibility_off' }}</igx-icon>\n        <span>{{ grid.hiddenColumnsCount }}</span>\n        <span>{{ grid.hiddenColumnsText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnHiding igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"grid.columnHidingTitleInternal || title || grid?.resourceStrings.igx_grid_toolbar_hiding_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n"
+                    template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\" #btn igxButton=\"outlined\" type=\"button\"\n        name=\"btnColumnHiding\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon>{{ !grid.hiddenColumnsCount ? 'visibility' : 'visibility_off' }}</igx-icon>\n        <span>{{ grid.hiddenColumnsCount }}</span>\n        <span>{{ grid.hiddenColumnsText }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnHiding igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"grid.columnHidingTitleInternal || title || grid?.resourceStrings.igx_grid_toolbar_hiding_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n"
                 },] }
     ];
     IgxGridToolbarHidingComponent.propDecorators = {
@@ -71544,7 +71701,7 @@
     IgxGridToolbarPinningComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-grid-toolbar-pinning',
-                    template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\" #btn igxButton=\"outlined\"\n        name=\"btnColumnPinning\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon family=\"imx-icons\" [name]=\"!grid.pinnedColumnsCount ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        <span>{{ grid.pinnedColumnsCount }}</span>\n        <span>{{ grid.pinnedColumnsTextInternal }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnPinning igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"grid.columnPinningTitleInternal || title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n"
+                    template: "<ng-container *ngIf=\"grid.rendered$ | async\">\n    <button [title]=\"grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\" #btn igxButton=\"outlined\" type=\"button\"\n        name=\"btnColumnPinning\" (click)=\"toggle(btn, ref, actions)\" [displayDensity]=\"grid.displayDensity\">\n        <igx-icon family=\"imx-icons\" [name]=\"!grid.pinnedColumnsCount ? 'unpin-left' : 'pin-left'\"></igx-icon>\n        <span>{{ grid.pinnedColumnsCount }}</span>\n        <span>{{ grid.pinnedColumnsTextInternal }}</span>\n    </button>\n    <igx-column-actions #actions igxColumnPinning igxToggle (opened)=\"focusSearch(ref.element)\" #ref=\"toggle\"\n        [grid]=\"grid\" [title]=\"grid.columnPinningTitleInternal || title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n        [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\"\n        [hideFilter]=\"hideFilter\" [filterCriteria]=\"filterCriteria\" [columnDisplayOrder]=\"columnDisplayOrder\" [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n        [uncheckAllText]=\"uncheckAllText\" [checkAllText]=\"checkAllText\" [indentation]=\"indentetion\">\n    </igx-column-actions>\n</ng-container>\n"
                 },] }
     ];
     IgxGridToolbarPinningComponent.propDecorators = {
@@ -74104,7 +74261,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
                     selector: 'igx-tree-grid',
-                    template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf='data\n            | treeGridTransaction:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | treeGridNormalizeRecord:pipeTrigger\n            | treeGridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n            | treeGridSorting:sortingExpressions:sortStrategy:pipeTrigger:true as pinnedData'>\n                <div #pinContainer *ngIf='pinnedData.length > 0'\n                    [ngClass]=\"{\n                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                        'igx-grid__tr--pinned-top': isRowPinningToTop\n                    }\"\n                    class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData;let rowIndex = index;\">\n                        <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:paginator?.page:paginator?.perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n            [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-container *ngIf=\"totalRecords || pagingMode === 1\">\n        <ng-content select=\"igx-paginator\"></ng-content>\n    </ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n",
+                    template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf='data\n            | treeGridTransaction:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | treeGridNormalizeRecord:pipeTrigger\n            | treeGridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n            | treeGridSorting:sortingExpressions:sortStrategy:pipeTrigger:true as pinnedData'>\n                <div #pinContainer *ngIf='pinnedData.length > 0'\n                    [ngClass]=\"{\n                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                        'igx-grid__tr--pinned-top': isRowPinningToTop\n                    }\"\n                    class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData;let rowIndex = index;\">\n                        <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:paginator?.page:paginator?.perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n            [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-container *ngIf=\"totalRecords || pagingMode === 1\">\n        <ng-content select=\"igx-paginator\"></ng-content>\n    </ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n",
                     providers: [
                         IgxGridCRUDService,
                         IgxGridSummaryService,
@@ -75612,8 +75769,8 @@
         };
         IgxHierarchicalGridNavigationService.prototype.clearActivation = function () {
             // clear if previous activation exists.
-            if (this.activeNode) {
-                this.activeNode.row = null;
+            if (this.activeNode && Object.keys(this.activeNode).length) {
+                this.activeNode = Object.assign({});
             }
         };
         IgxHierarchicalGridNavigationService.prototype.hasNextTarget = function (grid, index, isNext) {
@@ -77323,7 +77480,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
                     selector: 'igx-hierarchical-grid',
-                    template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n     (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | gridTransaction:id:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | gridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n            | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'\n                    [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                    [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                        <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:paginator?.page:paginator?.perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)' (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)' (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div style=\"overflow: auto; width: 100%;\" [attr.data-rowindex]='rowIndex' (scroll)='onContainerScroll()'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n                    [rowData]=\"rowData\" [layout]='layout' #row>\n                </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n     (keydown)=\"navigation.summaryNav($event)\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\"  (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content *ngIf=\"totalRecords || pagingMode === 1\"  select=\"igx-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\">unfold_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" [active]='hasExpandedRecords() && hasExpandableChildren'>unfold_less</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n",
+                    template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n     (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | gridTransaction:id:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | gridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n            | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'\n                    [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                    [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                        <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:paginator?.page:paginator?.perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)' (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)' (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div style=\"overflow: auto; width: 100%;\" [attr.data-rowindex]='rowIndex' (scroll)='onContainerScroll()'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n                    [rowData]=\"rowData\" [layout]='layout' #row>\n                </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n     (keydown)=\"navigation.summaryNav($event)\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\"  (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content *ngIf=\"totalRecords || pagingMode === 1\"  select=\"igx-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\">unfold_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" [active]='hasExpandedRecords() && hasExpandableChildren'>unfold_less</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n",
                     providers: [
                         IgxGridCRUDService,
                         IgxGridSelectionService,
@@ -81635,7 +81792,7 @@
     IgxBottomNavComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-bottom-nav',
-                    template: "<ng-container *ngFor=\"let tab of items; let i = index\">\r\n    <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div\r\n    #tablist\r\n    role=\"tablist\"\r\n    class=\"igx-bottom-nav__menu igx-bottom-nav__menu--bottom\"\r\n    aria-orientation=\"horizontal\"\r\n>\r\n    <ng-container *ngFor=\"let tab of items; let i = index\">\r\n        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n",
+                    template: "<ng-container *ngFor=\"let tab of items; let i = index\">\n    <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n</ng-container>\n\n<div\n    #tablist\n    role=\"tablist\"\n    class=\"igx-bottom-nav__menu igx-bottom-nav__menu--bottom\"\n    aria-orientation=\"horizontal\"\n>\n    <ng-container *ngFor=\"let tab of items; let i = index\">\n        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n    </ng-container>\n</div>\n",
                     providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }]
                 },] }
     ];
@@ -81650,7 +81807,7 @@
     IgxBottomNavItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-bottom-nav-item',
-                    template: "<ng-template #headerTemplate>\r\n    <ng-content select=\"igx-bottom-nav-header\"></ng-content>\r\n</ng-template>\r\n<ng-template #panelTemplate>\r\n    <ng-content select=\"igx-bottom-nav-content\"></ng-content>\r\n</ng-template>\r\n",
+                    template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-bottom-nav-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-bottom-nav-content\"></ng-content>\n</ng-template>\n",
                     providers: [{ provide: IgxTabItemDirective, useExisting: IgxBottomNavItemComponent }]
                 },] }
     ];
@@ -81689,7 +81846,7 @@
     IgxBottomNavHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-bottom-nav-header',
-                    template: "<ng-content></ng-content>\r\n",
+                    template: "<ng-content></ng-content>\n",
                     providers: [{ provide: IgxTabHeaderBase, useExisting: IgxBottomNavHeaderComponent }]
                 },] }
     ];
@@ -81733,7 +81890,7 @@
     IgxBottomNavContentComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-bottom-nav-content',
-                    template: "<ng-content *ngIf=\"tab.selected || tab.previous\"></ng-content>\r\n",
+                    template: "<ng-content *ngIf=\"tab.selected || tab.previous\"></ng-content>\n",
                     providers: [{ provide: IgxTabContentBase, useExisting: IgxBottomNavContentComponent }]
                 },] }
     ];
@@ -82032,7 +82189,7 @@
     IgxTabsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-tabs',
-                    template: "<div #headerContainer class=\"igx-tabs__header\">\r\n    <button\r\n        #leftButton\r\n        igxButton=\"icon\"\r\n        igxRipple\r\n        class=\"igx-tabs__header-button\"\r\n        (click)=\"scrollLeft()\"\r\n    >\r\n        <igx-icon>navigate_before</igx-icon>\r\n    </button>\r\n    <div #viewPort class=\"igx-tabs__header-content\">\r\n        <div\r\n            #itemsWrapper\r\n            class=\"igx-tabs__header-wrapper\"            \r\n            role=\"tablist\"\r\n        >\r\n            <div \r\n                #itemsContainer\r\n                class=\"igx-tabs__header-scroll\"\r\n                [ngClass]=\"resolveHeaderScrollClasses()\"\r\n            >\r\n                <ng-container *ngFor=\"let tab of items; let i = index\">\r\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n                </ng-container>\r\n            </div>\r\n            <div\r\n                #selectedIndicator\r\n                *ngIf=\"items.length > 0\"\r\n                class=\"igx-tabs__header-active-indicator\"\r\n            >\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button\r\n        #rightButton\r\n        igxButton=\"icon\"\r\n        igxRipple\r\n        class=\"igx-tabs__header-button\"\r\n        (click)=\"scrollRight()\"\r\n    >\r\n        <igx-icon>navigate_next</igx-icon>\r\n    </button>\r\n</div>\r\n<div class=\"igx-tabs__panels\">\r\n    <ng-container *ngFor=\"let tab of items; let i = index\">\r\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n",
+                    template: "<div #headerContainer class=\"igx-tabs__header\">\n    <button\n        #leftButton\n        igxButton=\"icon\"\n        igxRipple\n        class=\"igx-tabs__header-button\"\n        (click)=\"scrollLeft()\"\n    >\n        <igx-icon>navigate_before</igx-icon>\n    </button>\n    <div #viewPort class=\"igx-tabs__header-content\">\n        <div\n            #itemsWrapper\n            class=\"igx-tabs__header-wrapper\"            \n            role=\"tablist\"\n        >\n            <div \n                #itemsContainer\n                class=\"igx-tabs__header-scroll\"\n                [ngClass]=\"resolveHeaderScrollClasses()\"\n            >\n                <ng-container *ngFor=\"let tab of items; let i = index\">\n                    <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                </ng-container>\n            </div>\n            <div\n                #selectedIndicator\n                *ngIf=\"items.length > 0\"\n                class=\"igx-tabs__header-active-indicator\"\n            >\n            </div>\n        </div>\n    </div>\n    <button\n        #rightButton\n        igxButton=\"icon\"\n        igxRipple\n        class=\"igx-tabs__header-button\"\n        (click)=\"scrollRight()\"\n    >\n        <igx-icon>navigate_next</igx-icon>\n    </button>\n</div>\n<div class=\"igx-tabs__panels\">\n    <ng-container *ngFor=\"let tab of items; let i = index\">\n        <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n    </ng-container>\n</div>\n",
                     providers: [{ provide: IgxTabsBase, useExisting: IgxTabsComponent }]
                 },] }
     ];
@@ -82063,7 +82220,7 @@
     IgxTabItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-tab-item',
-                    template: "<ng-template #headerTemplate>\r\n    <ng-content select=\"igx-tab-header\"></ng-content>\r\n</ng-template>\r\n<ng-template #panelTemplate>\r\n    <ng-content select=\"igx-tab-content\"></ng-content>\r\n</ng-template>\r\n",
+                    template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-tab-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-tab-content\"></ng-content>\n</ng-template>\n",
                     providers: [{ provide: IgxTabItemDirective, useExisting: IgxTabItemComponent }]
                 },] }
     ];
@@ -82177,7 +82334,7 @@
     IgxTabHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-tab-header',
-                    template: "<ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\r\n\r\n<div class=\"igx-tabs__header-item-inner\">\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\r\n",
+                    template: "<ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n\n<div class=\"igx-tabs__header-item-inner\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n",
                     providers: [{ provide: IgxTabHeaderBase, useExisting: IgxTabHeaderComponent }]
                 },] }
     ];
@@ -82229,7 +82386,7 @@
     IgxTabContentComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-tab-content',
-                    template: "<ng-content *ngIf=\"tab.selected || tab.previous\"></ng-content>\r\n",
+                    template: "<ng-content *ngIf=\"tab.selected || tab.previous\"></ng-content>\n",
                     providers: [{ provide: IgxTabContentBase, useExisting: IgxTabContentComponent }]
                 },] }
     ];