igniteui-angular 12.3.16 → 12.3.19

package/fesm2015/igniteui-angular.js

@@ -2863,13 +2863,9 @@ class IgxDateFilteringOperand extends IgxBaseDateTimeFilteringOperand {
             }].concat(this.operations);
     }
 }
-class IgxDateTimeFilteringOperand extends IgxDateFilteringOperand {
+class IgxDateTimeFilteringOperand extends IgxBaseDateTimeFilteringOperand {
     constructor() {
         super();
-        let 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,
@@ -2906,6 +2902,154 @@ class IgxDateTimeFilteringOperand extends IgxDateFilteringOperand {
                         targetp.minutes !== searchp.minutes ||
                         targetp.seconds !== searchp.seconds;
                 }
+            }, {
+                name: 'before',
+                isUnary: false,
+                iconName: 'is-before',
+                logic: (target, searchVal) => {
+                    if (!target) {
+                        return false;
+                    }
+                    this.validateInputData(target);
+                    return target < searchVal;
+                }
+            }, {
+                name: 'after',
+                isUnary: false,
+                iconName: 'is-after',
+                logic: (target, searchVal) => {
+                    if (!target) {
+                        return false;
+                    }
+                    this.validateInputData(target);
+                    return target > searchVal;
+                }
+            }, {
+                name: 'today',
+                isUnary: true,
+                iconName: 'today',
+                logic: (target) => {
+                    if (!target) {
+                        return false;
+                    }
+                    this.validateInputData(target);
+                    const d = IgxDateTimeFilteringOperand.getDateParts(target, 'yMd');
+                    const 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: (target) => {
+                    if (!target) {
+                        return false;
+                    }
+                    this.validateInputData(target);
+                    const td = IgxDateTimeFilteringOperand.getDateParts(target, 'yMd');
+                    const y = ((d) => new Date(d.setDate(d.getDate() - 1)))(new Date());
+                    const 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: (target) => {
+                    if (!target) {
+                        return false;
+                    }
+                    this.validateInputData(target);
+                    const d = IgxDateTimeFilteringOperand.getDateParts(target, 'yM');
+                    const now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'yM');
+                    return d.year === now.year &&
+                        d.month === now.month;
+                }
+            }, {
+                name: 'lastMonth',
+                isUnary: true,
+                iconName: 'last-month',
+                logic: (target) => {
+                    if (!target) {
+                        return false;
+                    }
+                    this.validateInputData(target);
+                    const d = IgxDateTimeFilteringOperand.getDateParts(target, 'yM');
+                    const 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: (target) => {
+                    if (!target) {
+                        return false;
+                    }
+                    this.validateInputData(target);
+                    const d = IgxDateTimeFilteringOperand.getDateParts(target, 'yM');
+                    const 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: (target) => {
+                    if (!target) {
+                        return false;
+                    }
+                    this.validateInputData(target);
+                    const d = IgxDateTimeFilteringOperand.getDateParts(target, 'y');
+                    const now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'y');
+                    return d.year === now.year;
+                }
+            }, {
+                name: 'lastYear',
+                isUnary: true,
+                iconName: 'last-year',
+                logic: (target) => {
+                    if (!target) {
+                        return false;
+                    }
+                    this.validateInputData(target);
+                    const d = IgxDateTimeFilteringOperand.getDateParts(target, 'y');
+                    const now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'y');
+                    return d.year === now.year - 1;
+                }
+            }, {
+                name: 'nextYear',
+                isUnary: true,
+                iconName: 'next-year',
+                logic: (target) => {
+                    if (!target) {
+                        return false;
+                    }
+                    this.validateInputData(target);
+                    const d = IgxDateTimeFilteringOperand.getDateParts(target, 'y');
+                    const now = IgxDateTimeFilteringOperand.getDateParts(new Date(), 'y');
+                    return d.year === now.year + 1;
+                }
             }].concat(this.operations);
     }
 }
@@ -6514,7 +6658,8 @@ class IgxRowAddCrudState extends IgxRowCrudState {
      * @hidden @internal
      */
     endRowTransaction(commit, event) {
-        if (this.row && this.row.getClassName() === IgxAddRow.name) {
+        const isAddRow = this.row && this.row.getClassName() === IgxAddRow.name;
+        if (isAddRow) {
             this.grid.rowAdded.pipe(first$1()).subscribe((addRowArgs) => {
                 const rowData = addRowArgs.data;
                 const pinnedIndex = this.grid.pinnedRecords.findIndex(x => x[this.primaryKey] === rowData[this.primaryKey]);
@@ -6530,10 +6675,12 @@ class IgxRowAddCrudState extends IgxRowCrudState {
         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;
     }
@@ -37080,6 +37227,10 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         super.onBlur();
     }
     /** @hidden @internal */
+    onFocus() {
+        this._internalFilter = this.comboInput.value || '';
+    }
+    /** @hidden @internal */
     getEditElement() {
         return this.comboInput.nativeElement;
     }
@@ -37215,7 +37366,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
 IgxSimpleComboComponent.decorators = [
     { type: 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 },
@@ -41547,7 +41698,7 @@ IgxExcelStyleHeaderComponent.decorators = [
     { type: 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 = () => [
@@ -43649,8 +43800,10 @@ class IgxGridNavigationService {
                 });
             }
             else {
-                const range = { rowStart: this.activeNode.row, rowEnd: this.activeNode.row,
-                    columnStart: this.activeNode.column, columnEnd: this.activeNode.column };
+                const range = {
+                    rowStart: this.activeNode.row, rowEnd: this.activeNode.row,
+                    columnStart: this.activeNode.column, columnEnd: this.activeNode.column
+                };
                 this.grid.selectRange(range);
                 this.grid.notifyChanges();
             }
@@ -44161,11 +44314,15 @@ class IgxGridNavigationService {
                 .find(c => this.isColumnFullyVisible(c.visibleIndex))) === null || _a === void 0 ? void 0 : _a.visibleIndex;
         const column = this.grid.visibleColumns.find((col) => !col.columnLayout && col.visibleIndex === colIndex);
         const rowInd = rowIndex ? rowIndex : (_b = this.grid.rowList.find(r => !this.shouldPerformVerticalScroll(r.index, colIndex))) === null || _b === void 0 ? void 0 : _b.index;
-        const node = { row: rowInd !== null && rowInd !== void 0 ? rowInd : 0,
+        const 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;
     }
     handleMCHeaderNav(key, ctrl) {
@@ -45453,7 +45610,7 @@ IgxGroupByAreaDirective.propDecorators = {
 class IgxGroupByMetaPipe {
     transform(key, grid) {
         const 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 };
     }
 }
 IgxGroupByMetaPipe.decorators = [
@@ -46510,7 +46667,7 @@ class IgxAdvancedFilteringDialogComponent {
 IgxAdvancedFilteringDialogComponent.decorators = [
     { type: 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 = () => [
@@ -54408,14 +54565,12 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     }
     _shouldAutoSize(renderedHeight) {
         this.tbody.nativeElement.style.display = 'none';
-        let res = !this.nativeElement.parentElement ||
+        const 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;
     }
@@ -57587,7 +57742,7 @@ class IgxGridRowClassesPipe {
         this.gridAPI = gridAPI;
         this.row = new IgxGridRow(this.gridAPI.grid, -1, {});
     }
-    transform(cssClasses, row, editMode, selected, dirty, deleted, dragging, index, mrl, filteredOut, _) {
+    transform(cssClasses, row, editMode, selected, dirty, deleted, dragging, index, mrl, filteredOut, _rowData, _) {
         const result = new Set(['igx-grid__tr', index % 2 ? row.grid.evenRowCSS : row.grid.oddRowCSS]);
         const mapping = [
             [selected, 'igx-grid__tr--selected'],
@@ -62287,7 +62442,9 @@ class IgxGridComponent extends IgxGridBaseDirective {
             if (changes && this.columnList.length > 0) {
                 changes.forEachAddedItem((rec) => {
                     const col = this.getColumnByName(rec.item.fieldName);
-                    col.hidden = true;
+                    if (col) {
+                        col.hidden = true;
+                    }
                 });
                 changes.forEachRemovedItem((rec) => {
                     const col = this.getColumnByName(rec.item.fieldName);
@@ -62575,7 +62732,7 @@ IgxGridComponent.decorators = [
                     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 = {
@@ -63403,7 +63560,7 @@ class IgxGridToolbarAdvancedFilteringComponent {
 IgxGridToolbarAdvancedFilteringComponent.decorators = [
     { type: 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 = () => [
@@ -63649,7 +63806,7 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
 IgxGridToolbarExporterComponent.decorators = [
     { type: 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 = () => [
@@ -63687,7 +63844,7 @@ class IgxGridToolbarHidingComponent extends BaseToolbarColumnActionsDirective {
 IgxGridToolbarHidingComponent.decorators = [
     { type: 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 = {
@@ -63714,7 +63871,7 @@ class IgxGridToolbarPinningComponent extends BaseToolbarColumnActionsDirective {
 IgxGridToolbarPinningComponent.decorators = [
     { type: 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 = {
@@ -66016,7 +66173,7 @@ IgxTreeGridComponent.decorators = [
                 changeDetection: 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,
@@ -67302,8 +67459,8 @@ class IgxHierarchicalGridNavigationService extends IgxGridNavigationService {
     }
     clearActivation() {
         // clear if previous activation exists.
-        if (this.activeNode) {
-            this.activeNode.row = null;
+        if (this.activeNode && Object.keys(this.activeNode).length) {
+            this.activeNode = Object.assign({});
         }
     }
     hasNextTarget(grid, index, isNext) {
@@ -68887,7 +69044,7 @@ IgxHierarchicalGridComponent.decorators = [
                 changeDetection: 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,
@@ -72728,7 +72885,7 @@ class IgxBottomNavComponent extends IgxTabsDirective {
 IgxBottomNavComponent.decorators = [
     { type: 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 }]
             },] }
 ];
@@ -72738,7 +72895,7 @@ class IgxBottomNavItemComponent extends IgxTabItemDirective {
 IgxBottomNavItemComponent.decorators = [
     { type: 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 }]
             },] }
 ];
@@ -72760,7 +72917,7 @@ class IgxBottomNavHeaderComponent extends IgxTabHeaderDirective {
 IgxBottomNavHeaderComponent.decorators = [
     { type: 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 }]
             },] }
 ];
@@ -72795,7 +72952,7 @@ class IgxBottomNavContentComponent extends IgxTabContentDirective {
 IgxBottomNavContentComponent.decorators = [
     { type: 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 }]
             },] }
 ];
@@ -73079,7 +73236,7 @@ class IgxTabsComponent extends IgxTabsDirective {
 IgxTabsComponent.decorators = [
     { type: 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 }]
             },] }
 ];
@@ -73105,7 +73262,7 @@ class IgxTabItemComponent extends IgxTabItemDirective {
 IgxTabItemComponent.decorators = [
     { type: 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 }]
             },] }
 ];
@@ -73206,7 +73363,7 @@ class IgxTabHeaderComponent extends IgxTabHeaderDirective {
 IgxTabHeaderComponent.decorators = [
     { type: 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 }]
             },] }
 ];
@@ -73249,7 +73406,7 @@ class IgxTabContentComponent extends IgxTabContentDirective {
 IgxTabContentComponent.decorators = [
     { type: 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 }]
             },] }
 ];