igniteui-angular 22.1.0-beta.2 → 22.1.0-beta.4

package/fesm2022/igniteui-angular-grids-tree-grid.mjs

@@ -296,10 +296,10 @@ class IgxTreeGridAPIService extends GridBaseAPIService {
             this.getFlatDataFromFilteredRecords(record.children, data);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridAPIService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridAPIService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridAPIService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridAPIService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridAPIService, decorators: [{
             type: Injectable
         }] });
 
@@ -310,10 +310,10 @@ class IgxRowLoadingIndicatorTemplateDirective {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxRowLoadingIndicatorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: IgxRowLoadingIndicatorTemplateDirective, isStandalone: true, selector: "[igxRowLoadingIndicator]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowLoadingIndicatorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxRowLoadingIndicatorTemplateDirective, isStandalone: true, selector: "[igxRowLoadingIndicator]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxRowLoadingIndicatorTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowLoadingIndicatorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowLoadingIndicator]',
@@ -557,10 +557,10 @@ class IgxTreeGridSelectionService extends IgxGridSelectionService {
             this.rowsToBeIndeterminate.delete(rowID);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridSelectionService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridSelectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridSelectionService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridSelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridSelectionService, decorators: [{
             type: Injectable
         }] });
 
@@ -656,10 +656,10 @@ class IgxTreeGridSummaryPipe {
         });
         return data;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridSummaryPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridSummaryPipe, isStandalone: true, name: "treeGridSummary" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridSummaryPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridSummaryPipe, isStandalone: true, name: "treeGridSummary" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridSummaryPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridSummaryPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'treeGridSummary',
@@ -703,10 +703,10 @@ class IgxTreeGridFilteringPipe {
     filter(data, state, grid) {
         return state.strategy.filter(data, state.expressionsTree, state.advancedExpressionsTree, grid);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridFilteringPipe, isStandalone: true, name: "treeGridFiltering" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridFilteringPipe, isStandalone: true, name: "treeGridFiltering" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridFilteringPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridFilteringPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'treeGridFiltering',
@@ -819,10 +819,10 @@ class IgxTreeGridHierarchizingPipe {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridHierarchizingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridHierarchizingPipe, isStandalone: true, name: "treeGridHierarchizing" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridHierarchizingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridHierarchizingPipe, isStandalone: true, name: "treeGridHierarchizing" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridHierarchizingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridHierarchizingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'treeGridHierarchizing',
@@ -862,10 +862,10 @@ class IgxTreeGridFlatteningPipe {
         const rec = grid.records.get(record.key);
         rec.expanded = record.expanded;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridFlatteningPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridFlatteningPipe, isStandalone: true, name: "treeGridFlattening" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridFlatteningPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridFlatteningPipe, isStandalone: true, name: "treeGridFlattening" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridFlatteningPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridFlatteningPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'treeGridFlattening',
@@ -899,10 +899,10 @@ class IgxTreeGridSortingPipe {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridSortingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridSortingPipe, isStandalone: true, name: "treeGridSorting" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridSortingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridSortingPipe, isStandalone: true, name: "treeGridSorting" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridSortingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridSortingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'treeGridSorting',
@@ -929,10 +929,10 @@ class IgxTreeGridPagingPipe {
         this.grid.page = state.index;
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridPagingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridPagingPipe, isStandalone: true, name: "treeGridPaging" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridPagingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridPagingPipe, isStandalone: true, name: "treeGridPaging" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridPagingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridPagingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'treeGridPaging',
@@ -965,10 +965,10 @@ class IgxTreeGridTransactionPipe {
         }
         return collection;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridTransactionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridTransactionPipe, isStandalone: true, name: "treeGridTransaction" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridTransactionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridTransactionPipe, isStandalone: true, name: "treeGridTransaction" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridTransactionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridTransactionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'treeGridTransaction',
@@ -994,10 +994,10 @@ class IgxTreeGridNormalizeRecordsPipe {
         })) : [];
         return res;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridNormalizeRecordsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridNormalizeRecordsPipe, isStandalone: true, name: "treeGridNormalizeRecord" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridNormalizeRecordsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridNormalizeRecordsPipe, isStandalone: true, name: "treeGridNormalizeRecord" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridNormalizeRecordsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridNormalizeRecordsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'treeGridNormalizeRecord',
@@ -1025,10 +1025,10 @@ class IgxTreeGridAddRowPipe {
         this.grid.records.set(rec.key, rec);
         return copy;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridAddRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridAddRowPipe, isStandalone: true, name: "treeGridAddRow" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridAddRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridAddRowPipe, isStandalone: true, name: "treeGridAddRow" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridAddRowPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridAddRowPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'treeGridAddRow',
@@ -1073,10 +1073,10 @@ class IgxTreeGridCellComponent extends IgxGridExpandableCellComponent {
     onLoadingDblClick(event) {
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxTreeGridCellComponent, isStandalone: true, selector: "igx-tree-grid-cell", inputs: { level: "level", showIndicator: "showIndicator", isLoading: "isLoading", row: "row" }, usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n  @if (displayPinnedChip) {\n    <igx-chip\n      class=\"igx-grid__td--pinned-chip\"\n      [disabled]=\"true\"\n      [style.--ig-size]=\"1\"\n      >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\n    </div>\n  }\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <igx-icon\n      family=\"default\"\n      [name]=\"value ? 'confirm' : 'close'\"\n      [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >\n    </igx-icon>\n  }\n  @if (column.dataType === 'image') {\n    <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n  }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n  @if (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{ !isEmptyAddRowCell ? value : column.header || column.field }}\n    </div>\n  }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n  @if (column.dataType === 'string' || column.dataType === 'image') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-input-group [style.--ig-size]=\"1\">\n        <input\n          igxInput\n          [attr.aria-describedby]=\"ariaDescribeBy\"\n          [attr.aria-invalid]=\"isInvalid\"\n          [igxFocus]=\"true\"\n          [igxTextSelection]=\"true\"\n          [formControl]=\"formControl\"\n          (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n          (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n        />\n      </igx-input-group>\n    </ng-container>\n  }\n  @if (column.dataType === 'number') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'boolean') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-checkbox\n        [checked]=\"editValue\"\n        [igxFocus]=\"true\"\n        [disableRipple]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-checkbox>\n    </ng-container>\n  }\n  @if (column.dataType === 'date') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-date-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [weekStart]=\"column.pipeArgs.weekStart\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [displayFormat]=\"column.pipeArgs.format\"\n      >\n      </igx-date-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'time') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-time-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [displayFormat]=\"column.pipeArgs.format\"\n      ></igx-time-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'dateTime') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        type=\"text\"\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [formControl]=\"formControl\"\n        igxInput\n        [locale]=\"grid.locale\"\n        [igxDateTimeEditor]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [igxFocus]=\"true\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'currency') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      @if (grid.currencyPositionLeft) {\n        <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n      }\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n      @if (!grid.currencyPositionLeft) {\n        <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n      }\n    </igx-input-group>\n  }\n  @if (column.dataType === 'percent') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n      <igx-suffix>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </igx-suffix>\n    </igx-input-group>\n  }\n</ng-template>\n@if (!editMode) {\n  @if (level > 0) {\n    <div\n      #indentationDiv\n      class=\"igx-grid__tree-cell--padding-level-{{ level }}\"\n      [ngStyle]=\"{\n        'padding-inline-start':\n          'calc(var(--ig-tree-indent-size) *' + level + ')',\n      }\"\n    ></div>\n  }\n  @if (!isLoading) {\n    <div\n      #indicator\n      class=\"igx-grid__tree-grouping-indicator\"\n      [ngStyle]=\"{ visibility: showIndicator ? 'visible' : 'hidden' }\"\n      (click)=\"toggle($event)\"\n      (focus)=\"onIndicatorFocus()\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\"\n      >\n      </ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\"\n      >\n      </ng-container>\n    </div>\n  }\n  @if (isLoading) {\n    <div\n      (dblclick)=\"onLoadingDblClick($event)\"\n      class=\"igx-grid__tree-loading-indicator\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          grid.rowLoadingIndicatorTemplate\n            ? grid.rowLoadingIndicatorTemplate\n            : defaultLoadingIndicatorTemplate\n        \"\n      >\n      </ng-container>\n    </div>\n  }\n  <ng-template #defaultLoadingIndicatorTemplate>\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </ng-template>\n}\n<ng-container *ngTemplateOutlet=\"template; context: context\"> </ng-container>\n@if (isInvalid) {\n  <igx-icon\n    family=\"default\"\n    name=\"error\"\n    #errorIcon\n    [igxTooltipTarget]=\"tooltipRef\"\n    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n  <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n  <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n<ng-template #defaultError>\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.['required']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.[\n      'minlength'\n    ]\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error\n          | igxStringReplace\n            : '{0}'\n            : formGroup.get(column.field).errors.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.[\n      'maxlength'\n    ]\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error\n          | igxStringReplace\n            : '{0}'\n            : formGroup.get(column.field).errors.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.['min']\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error\n          | igxStringReplace: '{0}' : formGroup.get(column.field).errors.min.min\n      }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.['max']\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error\n          | igxStringReplace: '{0}' : formGroup.get(column.field).errors.max.max\n      }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.['email']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.['pattern']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_pattern_validation_error }}\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTreeGridCellComponent, isStandalone: true, selector: "igx-tree-grid-cell", inputs: { level: "level", showIndicator: "showIndicator", isLoading: "isLoading", row: "row" }, usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n  @if (displayPinnedChip) {\n    <igx-chip\n      class=\"igx-grid__td--pinned-chip\"\n      [disabled]=\"true\"\n      [style.--ig-size]=\"1\"\n      >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\n    </div>\n  }\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <igx-icon\n      family=\"default\"\n      [name]=\"value ? 'confirm' : 'close'\"\n      [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >\n    </igx-icon>\n  }\n  @if (column.dataType === 'image') {\n    <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n  }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n  @if (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{ !isEmptyAddRowCell ? value : column.header || column.field }}\n    </div>\n  }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n  @if (column.dataType === 'string' || column.dataType === 'image') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-input-group [style.--ig-size]=\"1\">\n        <input\n          igxInput\n          [attr.aria-describedby]=\"ariaDescribeBy\"\n          [attr.aria-invalid]=\"isInvalid\"\n          [igxFocus]=\"true\"\n          [igxTextSelection]=\"true\"\n          [formControl]=\"formControl\"\n          (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n          (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n        />\n      </igx-input-group>\n    </ng-container>\n  }\n  @if (column.dataType === 'number') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'boolean') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-checkbox\n        [checked]=\"editValue\"\n        [igxFocus]=\"true\"\n        [disableRipple]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-checkbox>\n    </ng-container>\n  }\n  @if (column.dataType === 'date') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-date-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [weekStart]=\"column.pipeArgs.weekStart\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [displayFormat]=\"column.pipeArgs.format\"\n      >\n      </igx-date-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'time') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-time-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [displayFormat]=\"column.pipeArgs.format\"\n      ></igx-time-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'dateTime') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        type=\"text\"\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [formControl]=\"formControl\"\n        igxInput\n        [locale]=\"grid.locale\"\n        [igxDateTimeEditor]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [igxFocus]=\"true\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'currency') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      @if (grid.currencyPositionLeft) {\n        <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n      }\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n      @if (!grid.currencyPositionLeft) {\n        <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n      }\n    </igx-input-group>\n  }\n  @if (column.dataType === 'percent') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n      <igx-suffix>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </igx-suffix>\n    </igx-input-group>\n  }\n</ng-template>\n@if (!editMode) {\n  @if (level > 0) {\n    <div\n      #indentationDiv\n      class=\"igx-grid__tree-cell--padding-level-{{ level }}\"\n      [ngStyle]=\"{\n        'padding-inline-start':\n          'calc(var(--ig-tree-indent-size) *' + level + ')',\n      }\"\n    ></div>\n  }\n  @if (!isLoading) {\n    <div\n      #indicator\n      class=\"igx-grid__tree-grouping-indicator\"\n      [ngStyle]=\"{ visibility: showIndicator ? 'visible' : 'hidden' }\"\n      (click)=\"toggle($event)\"\n      (focus)=\"onIndicatorFocus()\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\"\n      >\n      </ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\"\n      >\n      </ng-container>\n    </div>\n  }\n  @if (isLoading) {\n    <div\n      (dblclick)=\"onLoadingDblClick($event)\"\n      class=\"igx-grid__tree-loading-indicator\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          grid.rowLoadingIndicatorTemplate\n            ? grid.rowLoadingIndicatorTemplate\n            : defaultLoadingIndicatorTemplate\n        \"\n      >\n      </ng-container>\n    </div>\n  }\n  <ng-template #defaultLoadingIndicatorTemplate>\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </ng-template>\n}\n<ng-container *ngTemplateOutlet=\"template; context: context\"> </ng-container>\n@if (isInvalid) {\n  <igx-icon\n    family=\"default\"\n    name=\"error\"\n    #errorIcon\n    [igxTooltipTarget]=\"tooltipRef\"\n    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n  <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n  <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n<ng-template #defaultError>\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.['required']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.[\n      'minlength'\n    ]\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error\n          | igxStringReplace\n            : '{0}'\n            : formGroup.get(column.field).errors.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.[\n      'maxlength'\n    ]\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error\n          | igxStringReplace\n            : '{0}'\n            : formGroup.get(column.field).errors.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.['min']\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error\n          | igxStringReplace: '{0}' : formGroup.get(column.field).errors.min.min\n      }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.['max']\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error\n          | igxStringReplace: '{0}' : formGroup.get(column.field).errors.max.max\n      }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.['email']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup?.get($safeNavigationMigration(column?.field)).errors?.['pattern']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_pattern_validation_error }}\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-cell', imports: [
                         NgClass,
@@ -1243,10 +1243,10 @@ class IgxTreeGridRowComponent extends IgxRowDirective {
     beginAddChild() {
         this.grid.crudService.enterAddRowMode(this, true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxTreeGridRowComponent, isStandalone: true, selector: "igx-tree-grid-row", inputs: { treeRow: "treeRow" }, host: { properties: { "attr.aria-expanded": "this.expanded" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], viewQueries: [{ propertyName: "_cells", predicate: ["treeCell"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"\n></ng-container>\n\n<ng-template #addTemp>\n  <div\n    class=\"igx-grid__tr--inner\"\n    [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\"\n    (animationend)=\"animationEndHandler()\"\n  >\n    <ng-container *ngTemplateOutlet=\"defaultTemp\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #defaultTemp>\n  @if (rowDraggable) {\n    <div\n      [class]=\"resolveDragIndicatorClasses\"\n      role=\"gridcell\"\n      [igxRowDrag]=\"this\"\n      (click)=\"$event.stopPropagation()\"\n      [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.grid.dragIndicatorIconTemplate\n            ? this.grid.dragIndicatorIconTemplate\n            : this.grid.dragIndicatorIconBase\n        \"\n      ></ng-container>\n    </div>\n  }\n  @if (showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (click)=\"onRowSelectorClick($event)\"\n      (pointerdown)=\"$event.preventDefault()\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          this.grid.rowSelectorTemplate\n            ? this.grid.rowSelectorTemplate\n            : rowSelectorBaseTemplate;\n          context: {\n            $implicit: {\n              index: viewIndex,\n              rowID: key,\n              key,\n              selected: selected,\n            },\n          }\n        \"\n      >\n      </ng-template>\n    </div>\n  }\n  @if (pinnedStartColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedStartColumns }\n      \"\n    ></ng-container>\n  }\n  <ng-template\n    igxGridFor\n    let-col\n    [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\"\n    let-colIndex=\"index\"\n    [igxForScrollOrientation]=\"'horizontal'\"\n    [igxForContainerSize]=\"grid.unpinnedWidth\"\n    [igxForSizePropName]=\"'calcPixelWidth'\"\n    [igxForTrackBy]=\"grid.trackColumnChanges\"\n    #igxDirRef\n  >\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  </ng-template>\n  @if (pinnedEndColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedEndColumns }\n      \"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n  <div class=\"igx-grid__cbx-padding\">\n    <igx-checkbox\n      [tabindex]=\"-1\"\n      [readonly]=\"true\"\n      [checked]=\"selected\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"deleted\"\n      [disableRipple]=\"true\"\n      [disableTransitions]=\"grid.disableTransitions\"\n      [aria-label]=\"rowCheckboxAriaLabel\"\n    >\n    </igx-checkbox>\n  </div>\n</ng-template>\n\n<ng-template #pinnedCellsTemplate let-col let-columns=\"columns\">\n  @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #cellTemplate let-col=\"column\">\n  <igx-grid-cell\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    class=\"igx-grid__td igx-grid__td--fw\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [firstPinned]=\"col.isFirstPinned\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-grid-cell>\n</ng-template>\n<ng-template #treeCellTemplate let-col=\"column\">\n  <igx-tree-grid-cell\n    class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      (col.dataType === 'number' ||\n        col.dataType === 'percent' ||\n        col.dataType === 'currency') &&\n      col.visibleIndex !== 0\n    \"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [level]=\"treeRow.level\"\n    [expanded]=\"expanded\"\n    [showIndicator]=\"showIndicator\"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [isLoading]=\"isLoading\"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-tree-grid-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "isPlaceholder", "isMerged", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxTreeGridCellComponent, selector: "igx-tree-grid-cell", inputs: ["level", "showIndicator", "isLoading", "row"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTreeGridRowComponent, isStandalone: true, selector: "igx-tree-grid-row", inputs: { treeRow: "treeRow" }, host: { properties: { "attr.aria-expanded": "this.expanded" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], viewQueries: [{ propertyName: "_cells", predicate: ["treeCell"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"\n></ng-container>\n\n<ng-template #addTemp>\n  <div\n    class=\"igx-grid__tr--inner\"\n    [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\"\n    (animationend)=\"animationEndHandler()\"\n  >\n    <ng-container *ngTemplateOutlet=\"defaultTemp\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #defaultTemp>\n  @if (rowDraggable) {\n    <div\n      [class]=\"resolveDragIndicatorClasses\"\n      role=\"gridcell\"\n      [igxRowDrag]=\"this\"\n      (click)=\"$event.stopPropagation()\"\n      [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.grid.dragIndicatorIconTemplate\n            ? this.grid.dragIndicatorIconTemplate\n            : this.grid.dragIndicatorIconBase\n        \"\n      ></ng-container>\n    </div>\n  }\n  @if (showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (click)=\"onRowSelectorClick($event)\"\n      (pointerdown)=\"$event.preventDefault()\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          this.grid.rowSelectorTemplate\n            ? this.grid.rowSelectorTemplate\n            : rowSelectorBaseTemplate;\n          context: {\n            $implicit: {\n              index: viewIndex,\n              rowID: key,\n              key,\n              selected: selected,\n            },\n          }\n        \"\n      >\n      </ng-template>\n    </div>\n  }\n  @if (pinnedStartColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedStartColumns }\n      \"\n    ></ng-container>\n  }\n  <ng-template\n    igxGridFor\n    let-col\n    [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\"\n    let-colIndex=\"index\"\n    [igxForScrollOrientation]=\"'horizontal'\"\n    [igxForContainerSize]=\"grid.unpinnedWidth\"\n    [igxForSizePropName]=\"'calcPixelWidth'\"\n    [igxForTrackBy]=\"grid.trackColumnChanges\"\n    #igxDirRef\n  >\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  </ng-template>\n  @if (pinnedEndColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedEndColumns }\n      \"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n  <div class=\"igx-grid__cbx-padding\">\n    <igx-checkbox\n      [tabindex]=\"-1\"\n      [readonly]=\"true\"\n      [checked]=\"selected\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"deleted\"\n      [disableRipple]=\"true\"\n      [disableTransitions]=\"grid.disableTransitions\"\n      [aria-label]=\"rowCheckboxAriaLabel\"\n    >\n    </igx-checkbox>\n  </div>\n</ng-template>\n\n<ng-template #pinnedCellsTemplate let-col let-columns=\"columns\">\n  @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #cellTemplate let-col=\"column\">\n  <igx-grid-cell\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    class=\"igx-grid__td igx-grid__td--fw\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [firstPinned]=\"col.isFirstPinned\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-grid-cell>\n</ng-template>\n<ng-template #treeCellTemplate let-col=\"column\">\n  <igx-tree-grid-cell\n    class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      (col.dataType === 'number' ||\n        col.dataType === 'percent' ||\n        col.dataType === 'currency') &&\n      col.visibleIndex !== 0\n    \"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [level]=\"treeRow.level\"\n    [expanded]=\"expanded\"\n    [showIndicator]=\"showIndicator\"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [isLoading]=\"isLoading\"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-tree-grid-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "isPlaceholder", "isMerged", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxTreeGridCellComponent, selector: "igx-tree-grid-cell", inputs: ["level", "showIndicator", "isLoading", "row"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxTreeGridCellComponent, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container\n  *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"\n></ng-container>\n\n<ng-template #addTemp>\n  <div\n    class=\"igx-grid__tr--inner\"\n    [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\"\n    (animationend)=\"animationEndHandler()\"\n  >\n    <ng-container *ngTemplateOutlet=\"defaultTemp\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #defaultTemp>\n  @if (rowDraggable) {\n    <div\n      [class]=\"resolveDragIndicatorClasses\"\n      role=\"gridcell\"\n      [igxRowDrag]=\"this\"\n      (click)=\"$event.stopPropagation()\"\n      [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.grid.dragIndicatorIconTemplate\n            ? this.grid.dragIndicatorIconTemplate\n            : this.grid.dragIndicatorIconBase\n        \"\n      ></ng-container>\n    </div>\n  }\n  @if (showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (click)=\"onRowSelectorClick($event)\"\n      (pointerdown)=\"$event.preventDefault()\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          this.grid.rowSelectorTemplate\n            ? this.grid.rowSelectorTemplate\n            : rowSelectorBaseTemplate;\n          context: {\n            $implicit: {\n              index: viewIndex,\n              rowID: key,\n              key,\n              selected: selected,\n            },\n          }\n        \"\n      >\n      </ng-template>\n    </div>\n  }\n  @if (pinnedStartColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedStartColumns }\n      \"\n    ></ng-container>\n  }\n  <ng-template\n    igxGridFor\n    let-col\n    [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\"\n    let-colIndex=\"index\"\n    [igxForScrollOrientation]=\"'horizontal'\"\n    [igxForContainerSize]=\"grid.unpinnedWidth\"\n    [igxForSizePropName]=\"'calcPixelWidth'\"\n    [igxForTrackBy]=\"grid.trackColumnChanges\"\n    #igxDirRef\n  >\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  </ng-template>\n  @if (pinnedEndColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedEndColumns }\n      \"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n  <div class=\"igx-grid__cbx-padding\">\n    <igx-checkbox\n      [tabindex]=\"-1\"\n      [readonly]=\"true\"\n      [checked]=\"selected\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"deleted\"\n      [disableRipple]=\"true\"\n      [disableTransitions]=\"grid.disableTransitions\"\n      [aria-label]=\"rowCheckboxAriaLabel\"\n    >\n    </igx-checkbox>\n  </div>\n</ng-template>\n\n<ng-template #pinnedCellsTemplate let-col let-columns=\"columns\">\n  @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #cellTemplate let-col=\"column\">\n  <igx-grid-cell\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    class=\"igx-grid__td igx-grid__td--fw\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [firstPinned]=\"col.isFirstPinned\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-grid-cell>\n</ng-template>\n<ng-template #treeCellTemplate let-col=\"column\">\n  <igx-tree-grid-cell\n    class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      (col.dataType === 'number' ||\n        col.dataType === 'percent' ||\n        col.dataType === 'currency') &&\n      col.visibleIndex !== 0\n    \"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [level]=\"treeRow.level\"\n    [expanded]=\"expanded\"\n    [showIndicator]=\"showIndicator\"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [isLoading]=\"isLoading\"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-tree-grid-cell>\n</ng-template>\n" }]
         }], propDecorators: { _cells: [{
@@ -1354,10 +1354,10 @@ class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxTreeGridGroupByAreaComponent, isStandalone: true, selector: "igx-tree-grid-group-by-area", inputs: { hideGroupedColumns: ["hideGroupedColumns", "hideGroupedColumns", booleanAttribute] }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    @for (expression of chipExpressions; track expression.fieldName; let last = $last) {\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    }\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTreeGridGroupByAreaComponent, isStandalone: true, selector: "igx-tree-grid-group-by-area", inputs: { hideGroupedColumns: ["hideGroupedColumns", "hideGroupedColumns", booleanAttribute] }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    @for (expression of chipExpressions; track expression.fieldName; let last = $last) {\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    }\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-tree-grid-group-by-area', providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe], template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    @for (expression of chipExpressions; track expression.fieldName; let last = $last) {\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    }\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n" }]
         }], propDecorators: { hideGroupedColumns: [{
@@ -2147,8 +2147,8 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxTreeGridComponent, isStandalone: true, selector: "igx-tree-grid", inputs: { childDataKey: "childDataKey", foreignKey: "foreignKey", hasChildrenKey: "hasChildrenKey", cascadeOnDelete: ["cascadeOnDelete", "cascadeOnDelete", booleanAttribute], loadChildrenOnDemand: "loadChildrenOnDemand", id: "id", data: "data", expansionDepth: "expansionDepth", rowLoadingIndicatorTemplate: "rowLoadingIndicatorTemplate" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTreeGridComponent, isStandalone: true, selector: "igx-tree-grid", inputs: { childDataKey: "childDataKey", foreignKey: "foreignKey", hasChildrenKey: "hasChildrenKey", cascadeOnDelete: ["cascadeOnDelete", "cascadeOnDelete", booleanAttribute], loadChildrenOnDemand: "loadChildrenOnDemand", id: "id", data: "data", expansionDepth: "expansionDepth", rowLoadingIndicatorTemplate: "rowLoadingIndicatorTemplate" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, providers: [
             IgxGridCRUDService,
             IgxGridValidationService,
             IgxGridSummaryService,
@@ -2160,9 +2160,9 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
             IgxColumnResizingService,
             IgxForOfSyncService,
             IgxForOfScrollSyncService
-        ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\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\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div igxToggle #loadingOverlay>\n    @if (shouldOverlayLoading) {\n      <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n    }\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\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\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: this\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </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=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\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\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div igxToggle #loadingOverlay>\n    @if (shouldOverlayLoading) {\n      <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n    }\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [class.igx-grid__scroll-start--pinned]=\"pinnedStartColumns.length > 0\"\n    [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\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\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: this\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </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=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid', encapsulation: ViewEncapsulation.None, providers: [
                         IgxGridCRUDService,
@@ -2215,7 +2215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         IgxGridCellMergePipe,
                         IgxScrollInertiaDirective,
                         IgxGridUnmergeActivePipe
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\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\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div igxToggle #loadingOverlay>\n    @if (shouldOverlayLoading) {\n      <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n    }\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\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\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: this\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </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=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\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\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div igxToggle #loadingOverlay>\n    @if (shouldOverlayLoading) {\n      <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n    }\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [class.igx-grid__scroll-start--pinned]=\"pinnedStartColumns.length > 0\"\n    [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\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\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: this\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </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=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n" }]
         }], propDecorators: { childDataKey: [{
                 type: Input
             }], foreignKey: [{
@@ -2351,10 +2351,10 @@ class IgxTreeGridGroupingPipe {
         }
         return Array.from(map.values());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridGroupingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridGroupingPipe, isStandalone: true, name: "treeGridGrouping" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridGroupingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridGroupingPipe, isStandalone: true, name: "treeGridGrouping" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridGroupingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridGroupingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'treeGridGrouping',
@@ -2460,8 +2460,8 @@ const IGX_TREE_GRID_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxTreeGridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridModule, imports: [IgxTreeGridComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridModule, imports: [IgxTreeGridComponent,
             IgxTreeGridGroupByAreaComponent,
             IgxTreeGridGroupingPipe,
             IgxRowAddTextDirective,
@@ -2640,7 +2640,7 @@ class IgxTreeGridModule {
             IgxPageSizeSelectorComponent,
             IgxPaginatorContentDirective,
             IgxPaginatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridModule, imports: [IgxTreeGridComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridModule, imports: [IgxTreeGridComponent,
             IgxTreeGridGroupByAreaComponent,
             IgxGridFooterComponent,
             IgxAdvancedFilteringDialogComponent,
@@ -2680,7 +2680,7 @@ class IgxTreeGridModule {
             IgxPageNavigationComponent,
             IgxPageSizeSelectorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxTreeGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [