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

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, TemplateRef, Directive, Pipe, Input, ChangeDetectionStrategy, Component, forwardRef, HostBinding, ViewChildren, IterableDiffers, booleanAttribute, ContentChild, ViewChild, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, NgModule } from '@angular/core';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
-import { GridBaseAPIService, IgxGridSelectionService, GridSelectionMode, IGX_GRID_BASE, GridSummaryPosition, IgxTreeGridRow, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, IgxRowDirective, IgxRowDragDirective, IgxGridCellComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, IgxGroupByAreaDirective, IgxGroupAreaDropDirective, IgxGroupByMetaPipe, IgxGridTransaction, IgxGridCell, IgxSummaryRow, IgxGridHeaderRowComponent, IgxGridBodyDirective, IgxGridDragSelectDirective, IgxColumnMovingDropDirective, IgxSummaryRowComponent, IgxRowEditTabStopDirective, IgxGridColumnResizerComponent, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, IgxGridRowClassesPipe, IgxGridRowStylesPipe, IgxSummaryDataPipe, IgxGridCRUDService, IgxGridValidationService, IgxGridSummaryService, IgxGridNavigationService, IGX_GRID_SERVICE_BASE, IgxFilteringService, IgxColumnResizingService, IgxRowAddTextDirective, IgxRowEditActionsDirective, IgxRowEditTextDirective, IgxGridFooterComponent, IgxAdvancedFilteringDialogComponent, IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxDragIndicatorIconDirective, IgxRowDragGhostDirective, IgxGridStateDirective, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxGridActionsBaseDirective, IgxGridActionButtonComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxFilterCellTemplateDirective, IgxSummaryTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCellHeaderTemplateDirective, IgxCellFooterTemplateDirective, IgxCellEditorTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxColumnActionsComponent, IgxColumnHidingDirective, IgxColumnPinningDirective, IgxRowSelectorDirective, IgxGroupByRowSelectorDirective, IgxHeadSelectorDirective, IgxCSVTextDirective, IgxExcelTextDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridToolbarDirective, IgxGridExcelStyleFilteringComponent, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleMovingComponent, IgxExcelStyleSearchComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleLoadingValuesTemplateDirective, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnEmailValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMaxLengthValidatorDirective, IgxColumnPatternValidatorDirective } from 'igniteui-angular/grids/core';
-import { TransactionType, GridColumnDataType, DataUtil, cloneArray, IgxDataRecordSorting, TreeGridFilteringStrategy, FilterUtil, mergeObjects, GridSummaryCalculationMode, FilteringExpressionsTree, cloneHierarchicalArray, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe, IgxHierarchicalTransactionFactory, DefaultTreeGridMergeStrategy, TransactionEventOrigin, IgxOverlayOutletDirective, IgxSorting } from 'igniteui-angular/core';
+import { GridBaseAPIService, IgxGridSelectionService, GridSelectionMode, IGX_GRID_BASE, GridSummaryPosition, IgxTreeGridRow, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, IgxRowDirective, IgxRowDragDirective, IgxGridCellComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, IgxGroupByAreaDirective, IgxGroupAreaDropDirective, IgxGroupByMetaPipe, IgxGridCell, IgxSummaryRow, IgxGridHeaderRowComponent, IgxGridBodyDirective, IgxGridDragSelectDirective, IgxColumnMovingDropDirective, IgxSummaryRowComponent, IgxRowEditTabStopDirective, IgxGridColumnResizerComponent, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, IgxGridRowClassesPipe, IgxGridRowStylesPipe, IgxSummaryDataPipe, IgxGridCRUDService, IgxGridValidationService, IgxGridSummaryService, IgxGridNavigationService, IGX_GRID_SERVICE_BASE, IgxFilteringService, IgxColumnResizingService, IgxRowAddTextDirective, IgxRowEditActionsDirective, IgxRowEditTextDirective, IgxGridFooterComponent, IgxAdvancedFilteringDialogComponent, IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxDragIndicatorIconDirective, IgxRowDragGhostDirective, IgxGridStateDirective, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxGridActionsBaseDirective, IgxGridActionButtonComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxFilterCellTemplateDirective, IgxSummaryTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCellHeaderTemplateDirective, IgxCellFooterTemplateDirective, IgxCellEditorTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxColumnActionsComponent, IgxColumnHidingDirective, IgxColumnPinningDirective, IgxRowSelectorDirective, IgxGroupByRowSelectorDirective, IgxHeadSelectorDirective, IgxCSVTextDirective, IgxExcelTextDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridToolbarDirective, IgxGridExcelStyleFilteringComponent, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleMovingComponent, IgxExcelStyleSearchComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleLoadingValuesTemplateDirective, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnEmailValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMaxLengthValidatorDirective, IgxColumnPatternValidatorDirective } from 'igniteui-angular/grids/core';
+import { TransactionType, GridColumnDataType, DataUtil, cloneArray, IgxDataRecordSorting, TreeGridFilteringStrategy, FilterUtil, mergeObjects, GridSummaryCalculationMode, FilteringExpressionsTree, cloneHierarchicalArray, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe, IgxGridTransaction, IgxHierarchicalTransactionFactory, DefaultTreeGridMergeStrategy, TransactionEventOrigin, IgxOverlayOutletDirective, IgxSorting } from 'igniteui-angular/core';
 import { IgxGridExpandableCellComponent, IgxGridBaseDirective, IgxGridCellMergePipe, IgxGridUnmergeActivePipe } from 'igniteui-angular/grids/grid';
 import { takeUntil, first } from 'rxjs/operators';
 import * as i1 from '@angular/forms';
@@ -75,7 +75,7 @@ class IgxTreeGridAPIService extends GridBaseAPIService {
             return expanded;
         }
         else {
-            return record.children && !!record.children.length && record.level < grid.expansionDepth;
+            return (record.children && !!record.children.length && record.level < grid.expansionDepth);
         }
     }
     should_apply_number_style(column) {
@@ -117,7 +117,7 @@ class IgxTreeGridAPIService extends GridBaseAPIService {
         else {
             const collection = record.parent ? record.parent.data[treeGrid.childDataKey] : treeGrid.data;
             index = treeGrid.primaryKey ?
-                collection.map(c => c[treeGrid.primaryKey]).indexOf(rowID) :
+                collection.map((c) => c[treeGrid.primaryKey]).indexOf(rowID) :
                 collection.indexOf(rowID);
             const selectedChildren = [];
             this.get_selected_children(record, selectedChildren);
@@ -239,7 +239,7 @@ class IgxTreeGridAPIService extends GridBaseAPIService {
         else {
             const record = grid.records.get(rowID);
             const childData = record.parent ? record.parent.data[grid.childDataKey] : grid.data;
-            index = grid.primaryKey ? childData.map(c => c[grid.primaryKey]).indexOf(rowID) :
+            index = grid.primaryKey ? childData.map((c) => c[grid.primaryKey]).indexOf(rowID) :
                 childData.indexOf(rowID);
             childData[index] = value;
         }
@@ -341,9 +341,10 @@ class IgxTreeGridSelectionService extends IgxGridSelectionService {
     emitRowSelectionEvent(newSelection, added, removed, event) {
         if (this.grid.rowSelection === GridSelectionMode.multipleCascade) {
             this.emitCascadeRowSelectionEvent(newSelection, added, removed, event);
-            return;
+            return undefined;
         }
         super.emitRowSelectionEvent(newSelection, added, removed, event);
+        return undefined;
     }
     updateCascadeSelectionOnFilterAndCRUD(parents, crudRowID, visibleRowIDs = null) {
         if (visibleRowIDs === null) {
@@ -423,7 +424,7 @@ class IgxTreeGridSelectionService extends IgxGridSelectionService {
         if (args.cancel) {
             return;
         }
-        const newSelectionIDs = args.newSelection.map(r => this.grid.primaryKey ? r[this.grid.primaryKey] : r);
+        const newSelectionIDs = args.newSelection.map((r) => this.grid.primaryKey ? r[this.grid.primaryKey] : r);
         // if args.newSelection hasn't been modified
         if (this.areEqualCollections(Array.from(this.rowsToBeSelected), newSelectionIDs)) {
             this.rowSelection = new Set(this.rowsToBeSelected);
@@ -442,8 +443,8 @@ class IgxTreeGridSelectionService extends IgxGridSelectionService {
     handleAddedAndRemovedArgs(args) {
         const newSelectionSet = new Set(args.newSelection);
         const oldSelectionSet = new Set(args.oldSelection);
-        args.removed = args.oldSelection.filter(x => !newSelectionSet.has(x));
-        args.added = args.newSelection.filter(x => !oldSelectionSet.has(x));
+        args.removed = args.oldSelection.filter((x) => !newSelectionSet.has(x));
+        args.added = args.newSelection.filter((x) => !oldSelectionSet.has(x));
     }
     /**
      * adds to rowsToBeProcessed set all visible children of the rows which was initially within the rowsToBeProcessed set
@@ -475,7 +476,7 @@ class IgxTreeGridSelectionService extends IgxGridSelectionService {
      * with the rows which will be eventually in selected/indeterminate state
      */
     calculateRowsNewSelectionState(args, shouldConvert = false) {
-        this.rowsToBeSelected = new Set(args.oldSelection ? shouldConvert ? args.oldSelection.map(r => r[this.grid.primaryKey]) : args.oldSelection : this.getSelectedRows());
+        this.rowsToBeSelected = new Set(args.oldSelection ? shouldConvert ? args.oldSelection.map((r) => r[this.grid.primaryKey]) : args.oldSelection : this.getSelectedRows());
         this.rowsToBeIndeterminate = new Set(this.getIndeterminateRows());
         const visibleRowIDs = new Set(this.getRowIDs(this.allData));
         const removed = new Set(args.removed);
@@ -634,12 +635,13 @@ class IgxTreeGridSummaryPipe {
         if (!grid.transactions.enabled || !grid.cascadeOnDelete) {
             return data;
         }
-        const deletedRows = grid.transactions.getTransactionLog().filter(t => t.type === 'delete').map(t => t.id);
+        const deletedRows = grid.transactions.getTransactionLog().filter((t) => t.type === 'delete').map((t) => t.id);
         let row = grid.records.get(rowId);
-        if (!row && deletedRows.lenght === 0) {
-            return [];
+        // Nothing was deleted, so there is nothing to strip from the summary data.
+        if (!row && deletedRows.length === 0) {
+            return data;
         }
-        row = row.children ? row : row.parent;
+        row = row?.children ? row : row?.parent;
         while (row) {
             rowId = row.key;
             if (deletedRows.indexOf(rowId) !== -1) {
@@ -647,8 +649,8 @@ class IgxTreeGridSummaryPipe {
             }
             row = row.parent;
         }
-        deletedRows.forEach(rowID => {
-            const tempData = grid.primaryKey ? data.map(rec => rec[grid.primaryKey]) : data;
+        deletedRows.forEach((rowID) => {
+            const tempData = grid.primaryKey ? data.map((rec) => rec[grid.primaryKey]) : data;
             const index = tempData.indexOf(rowID);
             if (index !== -1) {
                 data.splice(index, 1);
@@ -1016,7 +1018,7 @@ class IgxTreeGridAddRowPipe {
         const copy = collection.slice(0);
         const rec = this.grid.crudService.row.recordRef;
         if (this.grid.crudService.addRowParent.isPinned) {
-            const parentRowIndex = copy.findIndex(record => record.rowID === this.grid.crudService.addRowParent.rowID);
+            const parentRowIndex = copy.findIndex((record) => record.rowID === this.grid.crudService.addRowParent.rowID);
             copy.splice(parentRowIndex + 1, 0, rec);
         }
         else {
@@ -1074,7 +1076,7 @@ class IgxTreeGridCellComponent extends IgxGridExpandableCellComponent {
         event.stopPropagation();
     }
     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 }); }
+    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]=\"column.editorOptions?.dateTimeFormat!\"\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]=\"column.editorOptions?.dateTimeFormat!\"\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]=\"column.editorOptions?.dateTimeFormat!\"\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: $any(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(column.field)!.errors?.['required']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup.get(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(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(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(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(column.field)!.errors?.['email']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup.get(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.1", ngImport: i0, type: IgxTreeGridCellComponent, decorators: [{
             type: Component,
@@ -1106,7 +1108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         IgxStringReplacePipe,
                         IgxColumnFormatterPipe,
                         IgxTextSelectionDirective
-                    ], 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" }]
+                    ], 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]=\"column.editorOptions?.dateTimeFormat!\"\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]=\"column.editorOptions?.dateTimeFormat!\"\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]=\"column.editorOptions?.dateTimeFormat!\"\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: $any(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(column.field)!.errors?.['required']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup.get(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(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(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(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(column.field)!.errors?.['email']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.['pattern']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_pattern_validation_error }}\n    </div>\n  }\n</ng-template>\n" }]
         }], propDecorators: { level: [{
                 type: Input
             }], showIndicator: [{
@@ -1244,11 +1246,11 @@ class IgxTreeGridRowComponent extends IgxRowDirective {
         this.grid.crudService.enterAddRowMode(this, true);
     }
     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 }); }
+    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.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" }]
+            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: [{
                 type: ViewChildren,
                 args: ['treeCell']
@@ -1392,6 +1394,8 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         super(...arguments);
         this._diTransactions = inject(IgxGridTransaction, { optional: true, });
         this.transactionFactory = inject(IgxHierarchicalTransactionFactory);
+        /** @hidden @internal */
+        this.selectionService = inject(IgxGridSelectionService);
         /**
          * Sets whether child records should be deleted when their parent gets deleted.
          * By default it is set to true and deletes all children along with the parent.
@@ -1542,7 +1546,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
             if (this.rowSelection === GridSelectionMode.multipleCascade) {
                 let rec = this.gridAPI.get_rec_by_id(this.primaryKey ? args.data[this.primaryKey] : args.data);
                 if (rec && rec.parent) {
-                    this.gridAPI.grid.selectionService.updateCascadeSelectionOnFilterAndCRUD(new Set([rec.parent]), rec.parent.key);
+                    this.selectionService.updateCascadeSelectionOnFilterAndCRUD(new Set([rec.parent]), rec.parent.key);
                 }
                 else {
                     // The record is still not available
@@ -1551,7 +1555,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
                         rec = this.gridAPI.get_rec_by_id(this.primaryKey ?
                             args.data[this.primaryKey] : args.data);
                         if (rec && rec.parent) {
-                            this.gridAPI.grid.selectionService.updateCascadeSelectionOnFilterAndCRUD(new Set([rec.parent]), rec.parent.key);
+                            this.selectionService.updateCascadeSelectionOnFilterAndCRUD(new Set([rec.parent]), rec.parent.key);
                         }
                         this.notifyChanges();
                     });
@@ -1574,7 +1578,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
                     });
                     // Wait for the change detection to update records through pipes
                     requestAnimationFrame(() => {
-                        this.gridAPI.grid.selectionService.updateCascadeSelectionOnFilterAndCRUD(leafRowsDirectParents);
+                        this.selectionService.updateCascadeSelectionOnFilterAndCRUD(leafRowsDirectParents);
                         this.notifyChanges();
                     });
                 }
@@ -1617,7 +1621,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         super.ngAfterContentInit();
     }
     getDefaultExpandState(record) {
-        return record.children && record.children.length && record.level < this.expansionDepth;
+        return !!(record.children && record.children.length && record.level < this.expansionDepth);
     }
     /**
      * Expands all rows.
@@ -1650,7 +1654,8 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
     refreshGridState(args) {
         super.refreshGridState();
         if (this.primaryKey && this.foreignKey && args) {
-            const rowID = args.data[this.foreignKey];
+            // Invalidate the parent's summaries - the foreign key on the added/changed row points at it.
+            const rowID = (args.rowData ?? args.data)?.[this.foreignKey];
             this.summaryService.clearSummaryCache({ rowID });
             this.pipeTrigger++;
             this.cdr.detectChanges();
@@ -1900,6 +1905,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         if (row && row instanceof IgxTreeGridRow && column) {
             return new IgxGridCell(this, rowIndex, column);
         }
+        return undefined;
     }
     /**
      * Returns a `CellType` object that matches the conditions.
@@ -1919,6 +1925,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         if (row && column) {
             return new IgxGridCell(this, row.index, column);
         }
+        return undefined;
     }
     pinRow(rowID, index) {
         const row = this.getRowByKey(rowID);
@@ -2160,7 +2167,7 @@ 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    [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 }); }
+        ], 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($any($event))\"\n  (keydown.control.c)=\"copyHandler($any($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($any($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: $any(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.1", ngImport: i0, type: IgxTreeGridComponent, decorators: [{
             type: Component,
@@ -2215,7 +2222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", 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    [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" }]
+                    ], 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($any($event))\"\n  (keydown.control.c)=\"copyHandler($any($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($any($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: $any(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: [{