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

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, ElementRef, ChangeDetectorRef, TemplateRef, HostBinding, HostListener, ViewChild, Input, ChangeDetectionStrategy, Component, Pipe, DOCUMENT, forwardRef, InjectionToken, QueryList, NgZone, IterableDiffers, ViewContainerRef, Injector, EnvironmentInjector, LOCALE_ID, EventEmitter, createComponent, booleanAttribute, ViewChildren, ContentChildren, ContentChild, Output, Directive, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, NgModule } from '@angular/core';
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
-import { GridBaseAPIService, IGX_GRID_BASE, IgxGridSelectionService, IgxFilteringService, GridSelectionMode, IgxColumnFormatterPipe, IgxGroupByAreaDirective, IgxGroupAreaDropDirective, IgxGroupByMetaPipe, GridSummaryPosition, RowPinningPosition, IgxGridCellComponent, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxRowDirective, IgxRowDragDirective, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, FilterMode, GridCellMergeMode, IgxGridValidationService, IgxColumnResizingService, IGX_GRID_SERVICE_BASE, IgxGridNavigationService, IgxGridSummaryService, RowEditPositionStrategy, getUUID, IgxGridExcelStyleFilteringComponent, DropPosition, IgxCell, IgxEditRow, IgxColumnComponent, CharSeparatedValueData, IgxAdvancedFilteringDialogComponent, IgxColumnGroupComponent, IgxGridPinningActionsComponent, IgxGridColumnResizerComponent, IgxGridHeaderRowComponent, IgxGridBodyDirective, IgxRowEditTabStopDirective, IgxSummaryRowComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxRowAddTextDirective, IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxGridLoadingTemplateDirective, IgxGridEmptyTemplateDirective, IgxHeadSelectorDirective, IgxRowSelectorDirective, IgxRowDragGhostDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxDragIndicatorIconDirective, IgxToolbarToken, WatchChanges, IgxGridRow, IgxGridCell, IgxGroupByRow, IgxSummaryRow, IgxGridMRLNavigationService, IgxGridDragSelectDirective, IgxColumnMovingDropDirective, IgxGridTransactionPipe, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, IgxGridAddRowPipe, IgxGridRowClassesPipe, IgxGridRowStylesPipe, IgxSummaryDataPipe, IgxGridDetailTemplateDirective, IgxGroupByRowTemplateDirective, IgxGroupByRowSelectorDirective, IgxGridCRUDService, IgxGridFooterComponent, IgxGridStateDirective, IgxGridEditingActionsComponent, IgxGridActionsBaseDirective, IgxGridActionButtonComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxFilterCellTemplateDirective, IgxSummaryTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCellHeaderTemplateDirective, IgxCellFooterTemplateDirective, IgxCellEditorTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnLayoutComponent, IgxColumnActionsComponent, IgxColumnHidingDirective, IgxColumnPinningDirective, IgxCSVTextDirective, IgxExcelTextDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridToolbarDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleMovingComponent, IgxExcelStyleSearchComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnEmailValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMaxLengthValidatorDirective, IgxColumnPatternValidatorDirective } from 'igniteui-angular/grids/core';
-import { cloneArray, DataUtil, GridColumnDataType, IgxNumberFormatterPipe, IgxDateFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, GridSummaryCalculationMode, FilteringExpressionsTree, FilterUtil, isTree, FilteringLogic, FilteringExpressionsTreeType, getCurrentResourceStrings, GridResourceStringsEN, isObject, TransactionType, IgxFlatTransactionFactory, IgxOverlayService, PlatformUtil, IgxGridTransaction, I18N_FORMATTER, DefaultMergeStrategy, FilteringStrategy, ColumnPinningPosition, VerticalAlignment, HorizontalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy, DefaultDataCloneStrategy, ɵSize as _Size, IgxStylesRegistrar, areEqualArrays, runAfterRenderOnce, resizeObservable, compareMaps, TransactionEventOrigin, mergeObjects, ContainerPositionStrategy, resolveNestedPath, columnFieldPath, recreateTree, recreateTreeFromFields, DEFAULT_LOCALE, onResourceChangeHandle, IgxOverlayOutletDirective, IgxActionStripToken } from 'igniteui-angular/core';
+import { GridBaseAPIService, IGX_GRID_BASE, IgxGridSelectionService, IgxFilteringService, GridSelectionMode, IgxColumnFormatterPipe, IgxGroupByAreaDirective, IgxGroupAreaDropDirective, IgxGroupByMetaPipe, GridSummaryPosition, RowPinningPosition, IgxGridCellComponent, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxRowDirective, IgxRowDragDirective, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, FilterMode, GridCellMergeMode, IgxGridValidationService, IgxColumnResizingService, IGX_GRID_SERVICE_BASE, IgxGridNavigationService, IgxGridSummaryService, IgxGridTransaction, RowEditPositionStrategy, getUUID, IgxGridExcelStyleFilteringComponent, DropPosition, IgxCell, IgxEditRow, IgxColumnComponent, CharSeparatedValueData, IgxAdvancedFilteringDialogComponent, IgxColumnGroupComponent, IgxGridPinningActionsComponent, IgxGridColumnResizerComponent, IgxGridHeaderRowComponent, IgxGridBodyDirective, IgxRowEditTabStopDirective, IgxSummaryRowComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxRowAddTextDirective, IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxGridLoadingTemplateDirective, IgxGridEmptyTemplateDirective, IgxHeadSelectorDirective, IgxRowSelectorDirective, IgxRowDragGhostDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxDragIndicatorIconDirective, IgxToolbarToken, WatchChanges, IgxGridRow, IgxGridCell, IgxGroupByRow, IgxSummaryRow, IgxGridMRLNavigationService, IgxGridDragSelectDirective, IgxColumnMovingDropDirective, IgxGridTransactionPipe, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, IgxGridAddRowPipe, IgxGridRowClassesPipe, IgxGridRowStylesPipe, IgxSummaryDataPipe, IgxGridDetailTemplateDirective, IgxGroupByRowTemplateDirective, IgxGroupByRowSelectorDirective, IgxGridCRUDService, IgxGridFooterComponent, IgxGridStateDirective, IgxGridEditingActionsComponent, IgxGridActionsBaseDirective, IgxGridActionButtonComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxFilterCellTemplateDirective, IgxSummaryTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCellHeaderTemplateDirective, IgxCellFooterTemplateDirective, IgxCellEditorTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnLayoutComponent, IgxColumnActionsComponent, IgxColumnHidingDirective, IgxColumnPinningDirective, IgxCSVTextDirective, IgxExcelTextDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridToolbarDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleMovingComponent, IgxExcelStyleSearchComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxColumnRequiredValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnEmailValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMaxLengthValidatorDirective, IgxColumnPatternValidatorDirective } from 'igniteui-angular/grids/core';
+import { cloneArray, DataUtil, GridColumnDataType, IgxNumberFormatterPipe, IgxDateFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, GridSummaryCalculationMode, FilteringExpressionsTree, FilterUtil, isTree, FilteringLogic, FilteringExpressionsTreeType, getCurrentResourceStrings, GridResourceStringsEN, isObject, TransactionType, IgxFlatTransactionFactory, IgxOverlayService, PlatformUtil, I18N_FORMATTER, DefaultMergeStrategy, FilteringStrategy, ColumnPinningPosition, VerticalAlignment, HorizontalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy, DefaultDataCloneStrategy, ɵSize as _Size, IgxStylesRegistrar, areEqualArrays, runAfterRenderOnce, resizeObservable, compareMaps, TransactionEventOrigin, mergeObjects, ContainerPositionStrategy, resolveNestedPath, columnFieldPath, recreateTree, recreateTreeFromFields, DEFAULT_LOCALE, onResourceChangeHandle, IgxOverlayOutletDirective, IgxActionStripToken } from 'igniteui-angular/core';
 import { takeUntil, shareReplay, filter, throttle, take, switchMap, throttleTime, takeWhile, map, first } from 'rxjs/operators';
 import { Subject, BehaviorSubject, animationFrameScheduler, fromEvent, timer, pipe, merge } from 'rxjs';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -279,10 +279,10 @@ class IgxGridGroupByRowComponent {
         }
         event.stopPropagation();
         if (this.areAllRowsInTheGroupSelected) {
-            this.gridSelection.deselectRows(this.groupRow.records.map(x => this.getRowID(x)), event);
+            this.gridSelection.deselectRows(this.groupRow.records.map(x => this.getRowID(x)));
         }
         else {
-            this.gridSelection.selectRows(this.groupRow.records.map(x => this.getRowID(x)), false, event);
+            this.gridSelection.selectRows(this.groupRow.records.map(x => this.getRowID(x)));
         }
     }
     /**
@@ -359,7 +359,7 @@ class IgxGridGroupByRowComponent {
         return this.grid.rowSelection !== GridSelectionMode.none && !this.hideGroupRowSelectors;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridGroupByRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridGroupByRowComponent, isStandalone: true, selector: "igx-grid-groupby-row", inputs: { hideGroupRowSelectors: "hideGroupRowSelectors", rowDraggable: "rowDraggable", index: "index", gridID: "gridID", groupRow: "groupRow", isFocused: "isFocused" }, host: { listeners: { "pointerdown": "activate()", "click": "onClick($event)" }, properties: { "attr.aria-describedby": "this.describedBy", "attr.data-rowIndex": "this.dataRowIndex", "attr.id": "this.attrCellID", "class": "this.styleClasses", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "groupContent", first: true, predicate: ["groupContent"], descendants: true, static: true }, { propertyName: "defaultGroupByExpandedTemplate", first: true, predicate: ["defaultGroupByExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupByCollapsedTemplate", first: true, predicate: ["defaultGroupByCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container #defaultGroupRow>\n\n    @if (rowDraggable) {\n        <div class=\"igx-grid__drag-indicator igx-grid__tr-action\" role=\"gridcell\">\n            <igx-icon family=\"default\" name=\"drag_indicator\" [style.visibility]=\"'hidden'\"></igx-icon>\n        </div>\n    }\n\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" role=\"gridcell\" (pointerdown)=\"$event.preventDefault()\"\n            (click)=\"onGroupSelectorClick($event)\">\n            <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n                this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n                context: { $implicit: {\n                    selectedCount: selectedRowsInTheGroup.length,\n                    totalCount: this.groupRow.records.length,\n                    groupRow: this.groupRow }}\">\n            </ng-template>\n        </div>\n    }\n\n    <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\" role=\"gridcell\" [attr.aria-expanded]=\"expanded\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: $any(this) }\">\n        </ng-container>\n    </div>\n\n    <div class=\"igx-grid__group-content\" role=\"gridcell\" #groupContent>\n        <ng-container\n            *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n        </ng-container>\n    </div>\n\n    <ng-template #defaultGroupByExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n    </ng-template>\n\n    <ng-template #defaultGroupByCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n    </ng-template>\n\n\n    <ng-template #defaultGroupByTemplate>\n        <div class=\"igx-group-label\">\n            <igx-icon family=\"default\" name=\"group_work\" class=\"igx-group-label__icon\"></igx-icon>\n            <span class=\"igx-group-label__column-name\">\n                {{ groupRow.column && groupRow.column.header ?\n                groupRow.column.header :\n                (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n            </span>\n\n            <span class=\"igx-group-label__text\">{{\n                formatter\n                    ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)\n                    : dataType === \"number\"\n                    ? (groupRow.value | number:groupRow.column!.pipeArgs.digitsInfo:grid.locale)\n                    : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')\n                    ? (groupRow.value | date:groupRow.column!.pipeArgs.format:groupRow.column!.pipeArgs.timezone:grid.locale)\n                    : dataType === 'currency'\n                    ? (groupRow.value | currency:currencyCode:groupRow.column!.pipeArgs.display:groupRow.column!.pipeArgs.digitsInfo:grid.locale)\n                    : dataType === 'percent'\n                    ? (groupRow.value | percent:groupRow.column!.pipeArgs.digitsInfo:grid.locale)\n                    : groupRow.value\n            }}</span>\n\n            <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n            </igx-badge>\n        </div>\n    </ng-template>\n    <ng-template #groupByRowSelectorBaseTemplate let-context>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n                [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n                [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n                #groupByRowCheckbox>\n            </igx-checkbox>\n        </div>\n    </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridGroupByRowComponent, isStandalone: true, selector: "igx-grid-groupby-row", inputs: { hideGroupRowSelectors: "hideGroupRowSelectors", rowDraggable: "rowDraggable", index: "index", gridID: "gridID", groupRow: "groupRow", isFocused: "isFocused" }, host: { listeners: { "pointerdown": "activate()", "click": "onClick($event)" }, properties: { "attr.aria-describedby": "this.describedBy", "attr.data-rowIndex": "this.dataRowIndex", "attr.id": "this.attrCellID", "class": "this.styleClasses", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "groupContent", first: true, predicate: ["groupContent"], descendants: true, static: true }, { propertyName: "defaultGroupByExpandedTemplate", first: true, predicate: ["defaultGroupByExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupByCollapsedTemplate", first: true, predicate: ["defaultGroupByCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container #defaultGroupRow>\n\n    @if (rowDraggable) {\n        <div class=\"igx-grid__drag-indicator igx-grid__tr-action\" role=\"gridcell\">\n            <igx-icon family=\"default\" name=\"drag_indicator\" [style.visibility]=\"'hidden'\"></igx-icon>\n        </div>\n    }\n\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" role=\"gridcell\" (pointerdown)=\"$event.preventDefault()\"\n            (click)=\"onGroupSelectorClick($event)\">\n            <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n                this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n                context: { $implicit: {\n                    selectedCount: selectedRowsInTheGroup.length,\n                    totalCount: this.groupRow.records.length,\n                    groupRow: this.groupRow }}\">\n            </ng-template>\n        </div>\n    }\n\n    <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\" role=\"gridcell\" [attr.aria-expanded]=\"expanded\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <div class=\"igx-grid__group-content\" role=\"gridcell\" #groupContent>\n        <ng-container\n            *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n        </ng-container>\n    </div>\n\n    <ng-template #defaultGroupByExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n    </ng-template>\n\n    <ng-template #defaultGroupByCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n    </ng-template>\n\n\n    <ng-template #defaultGroupByTemplate>\n        <div class=\"igx-group-label\">\n            <igx-icon family=\"default\" name=\"group_work\" class=\"igx-group-label__icon\"></igx-icon>\n            <span class=\"igx-group-label__column-name\">\n                {{ groupRow.column && groupRow.column.header ?\n                groupRow.column.header :\n                (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n            </span>\n\n            <span class=\"igx-group-label__text\">{{\n                formatter\n                    ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)\n                    : dataType === \"number\"\n                    ? (groupRow.value | number:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')\n                    ? (groupRow.value | date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale)\n                    : dataType === 'currency'\n                    ? (groupRow.value | currency:currencyCode:groupRow.column.pipeArgs.display:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : dataType === 'percent'\n                    ? (groupRow.value | percent:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : groupRow.value\n            }}</span>\n\n            <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n            </igx-badge>\n        </div>\n    </ng-template>\n    <ng-template #groupByRowSelectorBaseTemplate let-context>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n                [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n                [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n                #groupByRowCheckbox>\n            </igx-checkbox>\n        </div>\n    </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridGroupByRowComponent, decorators: [{
             type: Component,
@@ -373,7 +373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         IgxBadgeComponent,
                         IgxCheckboxComponent,
                         IgxColumnFormatterPipe
-                    ], template: "<ng-container #defaultGroupRow>\n\n    @if (rowDraggable) {\n        <div class=\"igx-grid__drag-indicator igx-grid__tr-action\" role=\"gridcell\">\n            <igx-icon family=\"default\" name=\"drag_indicator\" [style.visibility]=\"'hidden'\"></igx-icon>\n        </div>\n    }\n\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" role=\"gridcell\" (pointerdown)=\"$event.preventDefault()\"\n            (click)=\"onGroupSelectorClick($event)\">\n            <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n                this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n                context: { $implicit: {\n                    selectedCount: selectedRowsInTheGroup.length,\n                    totalCount: this.groupRow.records.length,\n                    groupRow: this.groupRow }}\">\n            </ng-template>\n        </div>\n    }\n\n    <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\" role=\"gridcell\" [attr.aria-expanded]=\"expanded\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: $any(this) }\">\n        </ng-container>\n    </div>\n\n    <div class=\"igx-grid__group-content\" role=\"gridcell\" #groupContent>\n        <ng-container\n            *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n        </ng-container>\n    </div>\n\n    <ng-template #defaultGroupByExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n    </ng-template>\n\n    <ng-template #defaultGroupByCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n    </ng-template>\n\n\n    <ng-template #defaultGroupByTemplate>\n        <div class=\"igx-group-label\">\n            <igx-icon family=\"default\" name=\"group_work\" class=\"igx-group-label__icon\"></igx-icon>\n            <span class=\"igx-group-label__column-name\">\n                {{ groupRow.column && groupRow.column.header ?\n                groupRow.column.header :\n                (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n            </span>\n\n            <span class=\"igx-group-label__text\">{{\n                formatter\n                    ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)\n                    : dataType === \"number\"\n                    ? (groupRow.value | number:groupRow.column!.pipeArgs.digitsInfo:grid.locale)\n                    : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')\n                    ? (groupRow.value | date:groupRow.column!.pipeArgs.format:groupRow.column!.pipeArgs.timezone:grid.locale)\n                    : dataType === 'currency'\n                    ? (groupRow.value | currency:currencyCode:groupRow.column!.pipeArgs.display:groupRow.column!.pipeArgs.digitsInfo:grid.locale)\n                    : dataType === 'percent'\n                    ? (groupRow.value | percent:groupRow.column!.pipeArgs.digitsInfo:grid.locale)\n                    : groupRow.value\n            }}</span>\n\n            <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n            </igx-badge>\n        </div>\n    </ng-template>\n    <ng-template #groupByRowSelectorBaseTemplate let-context>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n                [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n                [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n                #groupByRowCheckbox>\n            </igx-checkbox>\n        </div>\n    </ng-template>\n</ng-container>\n" }]
+                    ], template: "<ng-container #defaultGroupRow>\n\n    @if (rowDraggable) {\n        <div class=\"igx-grid__drag-indicator igx-grid__tr-action\" role=\"gridcell\">\n            <igx-icon family=\"default\" name=\"drag_indicator\" [style.visibility]=\"'hidden'\"></igx-icon>\n        </div>\n    }\n\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" role=\"gridcell\" (pointerdown)=\"$event.preventDefault()\"\n            (click)=\"onGroupSelectorClick($event)\">\n            <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n                this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n                context: { $implicit: {\n                    selectedCount: selectedRowsInTheGroup.length,\n                    totalCount: this.groupRow.records.length,\n                    groupRow: this.groupRow }}\">\n            </ng-template>\n        </div>\n    }\n\n    <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\" role=\"gridcell\" [attr.aria-expanded]=\"expanded\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <div class=\"igx-grid__group-content\" role=\"gridcell\" #groupContent>\n        <ng-container\n            *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n        </ng-container>\n    </div>\n\n    <ng-template #defaultGroupByExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n    </ng-template>\n\n    <ng-template #defaultGroupByCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n    </ng-template>\n\n\n    <ng-template #defaultGroupByTemplate>\n        <div class=\"igx-group-label\">\n            <igx-icon family=\"default\" name=\"group_work\" class=\"igx-group-label__icon\"></igx-icon>\n            <span class=\"igx-group-label__column-name\">\n                {{ groupRow.column && groupRow.column.header ?\n                groupRow.column.header :\n                (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n            </span>\n\n            <span class=\"igx-group-label__text\">{{\n                formatter\n                    ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)\n                    : dataType === \"number\"\n                    ? (groupRow.value | number:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')\n                    ? (groupRow.value | date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale)\n                    : dataType === 'currency'\n                    ? (groupRow.value | currency:currencyCode:groupRow.column.pipeArgs.display:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : dataType === 'percent'\n                    ? (groupRow.value | percent:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : groupRow.value\n            }}</span>\n\n            <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n            </igx-badge>\n        </div>\n    </ng-template>\n    <ng-template #groupByRowSelectorBaseTemplate let-context>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n                [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n                [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n                #groupByRowCheckbox>\n            </igx-checkbox>\n        </div>\n    </ng-template>\n</ng-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { hideGroupRowSelectors: [{
                 type: Input
             }], rowDraggable: [{
@@ -746,7 +746,7 @@ class IgxGridUnmergeActivePipe {
             const cols = colsToMerge.filter(col => colKeys.indexOf(col.field) !== -1);
             for (const col of cols) {
                 const childData = x.cellMergeMeta.get(col.field).childRecords;
-                const childRecs = childData.map((rec) => rec.recordRef);
+                const childRecs = childData.map(rec => rec.recordRef);
                 if (childRecs.length === 0) {
                     // nothing to unmerge
                     continue;
@@ -874,9 +874,7 @@ class IgxGridExpandableCellComponent extends IgxGridCellComponent {
      * @hidden
      */
     onIndicatorFocus() {
-        if (this.grid.crudService.cell) {
-            this.grid.gridAPI.update_cell(this.grid.crudService.cell);
-        }
+        this.grid.gridAPI.update_cell(this.grid.crudService.cell);
     }
     /**
      * @hidden
@@ -909,7 +907,7 @@ class IgxGridExpandableCellComponent extends IgxGridCellComponent {
         return !this.editMode && (!this.intRow.pinned || isGhost);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridExpandableCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridExpandableCellComponent, isStandalone: true, selector: "igx-expandable-grid-cell", inputs: { expanded: "expanded" }, viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "indentationDiv", first: true, predicate: ["indentationDiv"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], 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      [class.igx-grid__td--number]=\"\n        column.dataType === 'number' ||\n        column.dataType === 'percent' ||\n        column.dataType === 'currency'\n      \"\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\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <div [class.igx-grid__td--bool]=\"column.dataType === 'boolean'\">\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    </div>\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      {{ value ? 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          [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        [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        [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        [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 (showExpanderIndicator) {\n  <div\n    #indicator\n    class=\"igx-grid__tree-grouping-indicator\"\n    (click)=\"toggle($event)\"\n    (focus)=\"onIndicatorFocus()\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: row }\">\n    </ng-container>\n  </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\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\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: "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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridExpandableCellComponent, isStandalone: true, selector: "igx-expandable-grid-cell", inputs: { expanded: "expanded" }, viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "indentationDiv", first: true, predicate: ["indentationDiv"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], 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      [class.igx-grid__td--number]=\"\n        column.dataType === 'number' ||\n        column.dataType === 'percent' ||\n        column.dataType === 'currency'\n      \"\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\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <div [class.igx-grid__td--bool]=\"column.dataType === 'boolean'\">\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    </div>\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      {{ value ? 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          [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        [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        [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        [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 (showExpanderIndicator) {\n  <div\n    #indicator\n    class=\"igx-grid__tree-grouping-indicator\"\n    (click)=\"toggle($event)\"\n    (focus)=\"onIndicatorFocus()\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: row }\">\n    </ng-container>\n  </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\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\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: "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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridExpandableCellComponent, decorators: [{
             type: Component,
@@ -917,7 +915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent,
                         IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet,
                         IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe,
-                        IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe], 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      [class.igx-grid__td--number]=\"\n        column.dataType === 'number' ||\n        column.dataType === 'percent' ||\n        column.dataType === 'currency'\n      \"\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\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <div [class.igx-grid__td--bool]=\"column.dataType === 'boolean'\">\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    </div>\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      {{ value ? 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          [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        [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        [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        [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 (showExpanderIndicator) {\n  <div\n    #indicator\n    class=\"igx-grid__tree-grouping-indicator\"\n    (click)=\"toggle($event)\"\n    (focus)=\"onIndicatorFocus()\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: row }\">\n    </ng-container>\n  </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\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\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" }]
+                        IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe], 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      [class.igx-grid__td--number]=\"\n        column.dataType === 'number' ||\n        column.dataType === 'percent' ||\n        column.dataType === 'currency'\n      \"\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\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <div [class.igx-grid__td--bool]=\"column.dataType === 'boolean'\">\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    </div>\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      {{ value ? 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          [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        [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        [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        [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 (showExpanderIndicator) {\n  <div\n    #indicator\n    class=\"igx-grid__tree-grouping-indicator\"\n    (click)=\"toggle($event)\"\n    (focus)=\"onIndicatorFocus()\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: row }\">\n    </ng-container>\n  </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\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\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" }]
         }], propDecorators: { expanded: [{
                 type: Input
             }], indicator: [{
@@ -950,11 +948,11 @@ class IgxGridRowComponent extends IgxRowDirective {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridRowComponent, isStandalone: true, selector: "igx-grid-row", providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], 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 (this.showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (pointerdown)=\"$event.preventDefault()\"\n      (click)=\"onRowSelectorClick($event)\"\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 (grid.groupingExpressions!.length > 0) {\n    <div\n      class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{\n        grid.groupingExpressions!.length\n      }}\"\n      (pointerdown)=\"$event.preventDefault()\"\n      (click)=\"$event.stopPropagation()\"\n    ></div>\n  }\n\n  @if (!grid.hasColumnLayouts) {\n    @if (pinnedStartColumns.length > 0) {\n      @for (\n        col of pinnedStartColumns | igxNotGrouped;\n        track trackPinnedColumn(col)\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 && grid.hasDetails\n                  ? expandableCellTemplate\n                  : cellTemplate;\n                context: getContext(col, this)\n              \"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      }\n    }\n    <ng-template\n      igxGridFor\n      let-col\n      [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n      [igxForScrollContainer]=\"grid.parentVirtDir\"\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 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        </div>\n      } @else {\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 && grid.hasDetails\n              ? expandableCellTemplate\n              : cellTemplate;\n            context: getContext(col, this)\n          \"\n        ></ng-container>\n      }\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n      @for (\n        col of pinnedEndColumns | igxNotGrouped;\n        track trackPinnedColumn(col)\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 && grid.hasDetails\n                  ? expandableCellTemplate\n                  : cellTemplate;\n                context: getContext(col, this)\n              \"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      }\n    }\n  }\n\n  @if (grid.hasColumnLayouts) {\n    @if (pinnedStartColumns.length > 0) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          mrlPinnedTemplate;\n          context: getContextMRL(pinnedStartColumns, this)\n        \"\n      ></ng-container>\n    }\n    <ng-template\n      igxGridFor\n      let-col\n      [igxGridForOf]=\"unpinnedColumns | igxTopLevel\"\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      <div\n        class=\"igx-grid__mrl-block\"\n        [ngStyle]=\"{\n          'grid-template-rows': col.getGridTemplate(true),\n          'grid-template-columns': col.getGridTemplate(false),\n        }\"\n      >\n        @for (col of col.children; track trackPinnedColumn(col)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? mrlExpandableCellTemplate\n                : mrlCellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      </div>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          mrlPinnedTemplate;\n          context: getContextMRL(pinnedEndColumns, this)\n        \"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n  @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n    <div\n      class=\"igx-grid__mrl-block\"\n      [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n      [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n      [ngStyle]=\"{\n        'grid-template-rows': col.getGridTemplate(true),\n        'grid-template-columns': col.getGridTemplate(false),\n        'z-index': col.pinned ? 1 : null,\n      }\"\n    >\n      @for (col of col.children; track col) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 && grid.hasDetails\n              ? mrlExpandableCellTemplate\n              : mrlCellTemplate;\n            context: getContext(col, this)\n          \"\n        ></ng-container>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n  <div class=\"igx-grid__cbx-padding\">\n    <igx-checkbox\n      [tabindex]=\"-1\"\n      [checked]=\"selected\"\n      [readonly]=\"true\"\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 #cellTemplate let-col>\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    [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--pinned]=\"col.pinned\"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [class.igx-grid__td--image]=\"col.dataType === 'image'\"\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    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\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    #cell\n  >\n  </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n  <igx-expandable-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    [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 igx-grid__td--fw igx-grid__td--tree-cell\"\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    [expanded]=\"expanded\"\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.columnLayoutChild ? null : 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    #cell\n  >\n  </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n  <igx-grid-cell\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--pinned]=\"col.pinned\"\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    [style.grid-row-end]=\"col.rowEnd\"\n    [style.grid-column-end]=\"col.colEnd\"\n    [style.grid-row-start]=\"col.rowStart\"\n    [style.grid-column-start]=\"col.colStart\"\n    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [rowData]=\"data\"\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    #cell\n  >\n  </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n  <igx-expandable-grid-cell\n    class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\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--pinned]=\"col.pinned\"\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    [expanded]=\"expanded\"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [style.grid-row-end]=\"col.rowEnd\"\n    [style.grid-column-end]=\"col.colEnd\"\n    [style.grid-row-start]=\"col.rowStart\"\n    [style.grid-column-start]=\"col.colStart\"\n    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [rowData]=\"data\"\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    #cell\n  >\n  </igx-expandable-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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { 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: "component", type: IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: ["expanded"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { 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: IgxGridRowComponent, isStandalone: true, selector: "igx-grid-row", providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], 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 (this.showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (pointerdown)=\"$event.preventDefault()\"\n      (click)=\"onRowSelectorClick($event)\"\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 (grid.groupingExpressions.length > 0) {\n    <div\n      class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{\n        grid.groupingExpressions.length\n      }}\"\n      (pointerdown)=\"$event.preventDefault()\"\n      (click)=\"$event.stopPropagation()\"\n    ></div>\n  }\n\n  @if (!grid.hasColumnLayouts) {\n    @if (pinnedStartColumns.length > 0) {\n      @for (\n        col of pinnedStartColumns | igxNotGrouped;\n        track trackPinnedColumn(col)\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 && grid.hasDetails\n                  ? expandableCellTemplate\n                  : cellTemplate;\n                context: getContext(col, this)\n              \"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      }\n    }\n    <ng-template\n      igxGridFor\n      let-col\n      [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n      [igxForScrollContainer]=\"grid.parentVirtDir\"\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 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        </div>\n      } @else {\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 && grid.hasDetails\n              ? expandableCellTemplate\n              : cellTemplate;\n            context: getContext(col, this)\n          \"\n        ></ng-container>\n      }\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n      @for (\n        col of pinnedEndColumns | igxNotGrouped;\n        track trackPinnedColumn(col)\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 && grid.hasDetails\n                  ? expandableCellTemplate\n                  : cellTemplate;\n                context: getContext(col, this)\n              \"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      }\n    }\n  }\n\n  @if (grid.hasColumnLayouts) {\n    @if (pinnedStartColumns.length > 0) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          mrlPinnedTemplate;\n          context: getContextMRL(pinnedStartColumns, this)\n        \"\n      ></ng-container>\n    }\n    <ng-template\n      igxGridFor\n      let-col\n      [igxGridForOf]=\"unpinnedColumns | igxTopLevel\"\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      <div\n        class=\"igx-grid__mrl-block\"\n        [ngStyle]=\"{\n          'grid-template-rows': col.getGridTemplate(true),\n          'grid-template-columns': col.getGridTemplate(false),\n        }\"\n      >\n        @for (col of col.children; track trackPinnedColumn(col)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? mrlExpandableCellTemplate\n                : mrlCellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      </div>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          mrlPinnedTemplate;\n          context: getContextMRL(pinnedEndColumns, this)\n        \"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n  @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n    <div\n      class=\"igx-grid__mrl-block\"\n      [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n      [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n      [ngStyle]=\"{\n        'grid-template-rows': col.getGridTemplate(true),\n        'grid-template-columns': col.getGridTemplate(false),\n        'z-index': col.pinned ? 1 : null,\n      }\"\n    >\n      @for (col of col.children; track col) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 && grid.hasDetails\n              ? mrlExpandableCellTemplate\n              : mrlCellTemplate;\n            context: getContext(col, this)\n          \"\n        ></ng-container>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n  <div class=\"igx-grid__cbx-padding\">\n    <igx-checkbox\n      [tabindex]=\"-1\"\n      [checked]=\"selected\"\n      [readonly]=\"true\"\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 #cellTemplate let-col>\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    [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--pinned]=\"col.pinned\"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [class.igx-grid__td--image]=\"col.dataType === 'image'\"\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    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\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    #cell\n  >\n  </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n  <igx-expandable-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    [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 igx-grid__td--fw igx-grid__td--tree-cell\"\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    [expanded]=\"expanded\"\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.columnLayoutChild ? null : 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    #cell\n  >\n  </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n  <igx-grid-cell\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--pinned]=\"col.pinned\"\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    [style.grid-row-end]=\"col.rowEnd\"\n    [style.grid-column-end]=\"col.colEnd\"\n    [style.grid-row-start]=\"col.rowStart\"\n    [style.grid-column-start]=\"col.colStart\"\n    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [rowData]=\"data\"\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    #cell\n  >\n  </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n  <igx-expandable-grid-cell\n    class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\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--pinned]=\"col.pinned\"\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    [expanded]=\"expanded\"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [style.grid-row-end]=\"col.rowEnd\"\n    [style.grid-column-end]=\"col.colEnd\"\n    [style.grid-row-start]=\"col.rowStart\"\n    [style.grid-column-start]=\"col.colStart\"\n    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [rowData]=\"data\"\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    #cell\n  >\n  </igx-expandable-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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { 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: "component", type: IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: ["expanded"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { 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: IgxGridRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, NgStyle, IgxCheckboxComponent, IgxGridCellComponent, NgClass, IgxGridExpandableCellComponent, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, 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 (this.showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (pointerdown)=\"$event.preventDefault()\"\n      (click)=\"onRowSelectorClick($event)\"\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 (grid.groupingExpressions!.length > 0) {\n    <div\n      class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{\n        grid.groupingExpressions!.length\n      }}\"\n      (pointerdown)=\"$event.preventDefault()\"\n      (click)=\"$event.stopPropagation()\"\n    ></div>\n  }\n\n  @if (!grid.hasColumnLayouts) {\n    @if (pinnedStartColumns.length > 0) {\n      @for (\n        col of pinnedStartColumns | igxNotGrouped;\n        track trackPinnedColumn(col)\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 && grid.hasDetails\n                  ? expandableCellTemplate\n                  : cellTemplate;\n                context: getContext(col, this)\n              \"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      }\n    }\n    <ng-template\n      igxGridFor\n      let-col\n      [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n      [igxForScrollContainer]=\"grid.parentVirtDir\"\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 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        </div>\n      } @else {\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 && grid.hasDetails\n              ? expandableCellTemplate\n              : cellTemplate;\n            context: getContext(col, this)\n          \"\n        ></ng-container>\n      }\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n      @for (\n        col of pinnedEndColumns | igxNotGrouped;\n        track trackPinnedColumn(col)\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 && grid.hasDetails\n                  ? expandableCellTemplate\n                  : cellTemplate;\n                context: getContext(col, this)\n              \"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      }\n    }\n  }\n\n  @if (grid.hasColumnLayouts) {\n    @if (pinnedStartColumns.length > 0) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          mrlPinnedTemplate;\n          context: getContextMRL(pinnedStartColumns, this)\n        \"\n      ></ng-container>\n    }\n    <ng-template\n      igxGridFor\n      let-col\n      [igxGridForOf]=\"unpinnedColumns | igxTopLevel\"\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      <div\n        class=\"igx-grid__mrl-block\"\n        [ngStyle]=\"{\n          'grid-template-rows': col.getGridTemplate(true),\n          'grid-template-columns': col.getGridTemplate(false),\n        }\"\n      >\n        @for (col of col.children; track trackPinnedColumn(col)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? mrlExpandableCellTemplate\n                : mrlCellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      </div>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          mrlPinnedTemplate;\n          context: getContextMRL(pinnedEndColumns, this)\n        \"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n  @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n    <div\n      class=\"igx-grid__mrl-block\"\n      [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n      [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n      [ngStyle]=\"{\n        'grid-template-rows': col.getGridTemplate(true),\n        'grid-template-columns': col.getGridTemplate(false),\n        'z-index': col.pinned ? 1 : null,\n      }\"\n    >\n      @for (col of col.children; track col) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 && grid.hasDetails\n              ? mrlExpandableCellTemplate\n              : mrlCellTemplate;\n            context: getContext(col, this)\n          \"\n        ></ng-container>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n  <div class=\"igx-grid__cbx-padding\">\n    <igx-checkbox\n      [tabindex]=\"-1\"\n      [checked]=\"selected\"\n      [readonly]=\"true\"\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 #cellTemplate let-col>\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    [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--pinned]=\"col.pinned\"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [class.igx-grid__td--image]=\"col.dataType === 'image'\"\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    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\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    #cell\n  >\n  </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n  <igx-expandable-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    [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 igx-grid__td--fw igx-grid__td--tree-cell\"\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    [expanded]=\"expanded\"\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.columnLayoutChild ? null : 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    #cell\n  >\n  </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n  <igx-grid-cell\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--pinned]=\"col.pinned\"\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    [style.grid-row-end]=\"col.rowEnd\"\n    [style.grid-column-end]=\"col.colEnd\"\n    [style.grid-row-start]=\"col.rowStart\"\n    [style.grid-column-start]=\"col.colStart\"\n    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [rowData]=\"data\"\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    #cell\n  >\n  </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n  <igx-expandable-grid-cell\n    class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\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--pinned]=\"col.pinned\"\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    [expanded]=\"expanded\"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [style.grid-row-end]=\"col.rowEnd\"\n    [style.grid-column-end]=\"col.colEnd\"\n    [style.grid-row-start]=\"col.rowStart\"\n    [style.grid-column-start]=\"col.colStart\"\n    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [rowData]=\"data\"\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    #cell\n  >\n  </igx-expandable-grid-cell>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, NgStyle, IgxCheckboxComponent, IgxGridCellComponent, NgClass, IgxGridExpandableCellComponent, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, 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 (this.showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (pointerdown)=\"$event.preventDefault()\"\n      (click)=\"onRowSelectorClick($event)\"\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 (grid.groupingExpressions.length > 0) {\n    <div\n      class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{\n        grid.groupingExpressions.length\n      }}\"\n      (pointerdown)=\"$event.preventDefault()\"\n      (click)=\"$event.stopPropagation()\"\n    ></div>\n  }\n\n  @if (!grid.hasColumnLayouts) {\n    @if (pinnedStartColumns.length > 0) {\n      @for (\n        col of pinnedStartColumns | igxNotGrouped;\n        track trackPinnedColumn(col)\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 && grid.hasDetails\n                  ? expandableCellTemplate\n                  : cellTemplate;\n                context: getContext(col, this)\n              \"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      }\n    }\n    <ng-template\n      igxGridFor\n      let-col\n      [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n      [igxForScrollContainer]=\"grid.parentVirtDir\"\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 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        </div>\n      } @else {\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 && grid.hasDetails\n              ? expandableCellTemplate\n              : cellTemplate;\n            context: getContext(col, this)\n          \"\n        ></ng-container>\n      }\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n      @for (\n        col of pinnedEndColumns | igxNotGrouped;\n        track trackPinnedColumn(col)\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 && grid.hasDetails\n                  ? expandableCellTemplate\n                  : cellTemplate;\n                context: getContext(col, this)\n              \"\n            ></ng-container>\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? expandableCellTemplate\n                : cellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      }\n    }\n  }\n\n  @if (grid.hasColumnLayouts) {\n    @if (pinnedStartColumns.length > 0) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          mrlPinnedTemplate;\n          context: getContextMRL(pinnedStartColumns, this)\n        \"\n      ></ng-container>\n    }\n    <ng-template\n      igxGridFor\n      let-col\n      [igxGridForOf]=\"unpinnedColumns | igxTopLevel\"\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      <div\n        class=\"igx-grid__mrl-block\"\n        [ngStyle]=\"{\n          'grid-template-rows': col.getGridTemplate(true),\n          'grid-template-columns': col.getGridTemplate(false),\n        }\"\n      >\n        @for (col of col.children; track trackPinnedColumn(col)) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              col.visibleIndex === 0 && grid.hasDetails\n                ? mrlExpandableCellTemplate\n                : mrlCellTemplate;\n              context: getContext(col, this)\n            \"\n          ></ng-container>\n        }\n      </div>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          mrlPinnedTemplate;\n          context: getContextMRL(pinnedEndColumns, this)\n        \"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n  @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) {\n    <div\n      class=\"igx-grid__mrl-block\"\n      [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n      [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n      [ngStyle]=\"{\n        'grid-template-rows': col.getGridTemplate(true),\n        'grid-template-columns': col.getGridTemplate(false),\n        'z-index': col.pinned ? 1 : null,\n      }\"\n    >\n      @for (col of col.children; track col) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 && grid.hasDetails\n              ? mrlExpandableCellTemplate\n              : mrlCellTemplate;\n            context: getContext(col, this)\n          \"\n        ></ng-container>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n  <div class=\"igx-grid__cbx-padding\">\n    <igx-checkbox\n      [tabindex]=\"-1\"\n      [checked]=\"selected\"\n      [readonly]=\"true\"\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 #cellTemplate let-col>\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    [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--pinned]=\"col.pinned\"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [class.igx-grid__td--image]=\"col.dataType === 'image'\"\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    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\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    #cell\n  >\n  </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n  <igx-expandable-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    [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 igx-grid__td--fw igx-grid__td--tree-cell\"\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    [expanded]=\"expanded\"\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.columnLayoutChild ? null : 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    #cell\n  >\n  </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n  <igx-grid-cell\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--pinned]=\"col.pinned\"\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    [style.grid-row-end]=\"col.rowEnd\"\n    [style.grid-column-end]=\"col.colEnd\"\n    [style.grid-row-start]=\"col.rowStart\"\n    [style.grid-column-start]=\"col.colStart\"\n    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [rowData]=\"data\"\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    #cell\n  >\n  </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n  <igx-expandable-grid-cell\n    class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\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--pinned]=\"col.pinned\"\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    [expanded]=\"expanded\"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [style.grid-row-end]=\"col.rowEnd\"\n    [style.grid-column-end]=\"col.colEnd\"\n    [style.grid-row-start]=\"col.rowStart\"\n    [style.grid-column-start]=\"col.colStart\"\n    [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [rowData]=\"data\"\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    #cell\n  >\n  </igx-expandable-grid-cell>\n</ng-template>\n" }]
         }] });
 
 // Auto-generated — do not edit manually. Re-run build:styles to update.
@@ -2205,7 +2203,7 @@ class IgxGridBaseDirective {
     }
     set batchEditing(val) {
         if (val !== this._batchEditing) {
-            this._transactions = null;
+            delete this._transactions;
             this._batchEditing = val;
             this.switchTransactionService(val);
             this.subscribeToTransactions();
@@ -2308,7 +2306,7 @@ class IgxGridBaseDirective {
      */
     set pagingState(value) {
         this._pagingState = value;
-        if (this.paginator && !this._init && value.metadata) {
+        if (this.paginator && !this._init) {
             this.paginator.totalRecords = value.metadata.countRecords;
         }
     }
@@ -2418,7 +2416,6 @@ class IgxGridBaseDirective {
         if (this.hasNoData) {
             return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyGridDefaultTemplate;
         }
-        return undefined;
     }
     /**
      * @hidden @internal
@@ -3449,14 +3446,13 @@ class IgxGridBaseDirective {
          * @hidden @internal
          */
         this.preventContainerScroll = (evt) => {
-            const target = evt.target;
-            if (target.scrollTop !== 0) {
-                this.verticalScrollContainer.addScroll(target.scrollTop);
-                target.scrollTop = 0;
+            if (evt.target.scrollTop !== 0) {
+                this.verticalScrollContainer.addScroll(evt.target.scrollTop);
+                evt.target.scrollTop = 0;
             }
-            if (target.scrollLeft !== 0) {
-                this.headerContainer.scrollPosition += target.scrollLeft;
-                target.scrollLeft = 0;
+            if (evt.target.scrollLeft !== 0) {
+                this.headerContainer.scrollPosition += evt.target.scrollLeft;
+                evt.target.scrollLeft = 0;
             }
         };
         /**
@@ -3697,7 +3693,7 @@ class IgxGridBaseDirective {
                         // resizing occurs due to the change of --ig-size css var
                         this._gridSize = this.gridSize;
                         this.updateDefaultRowHeight();
-                        this._autoSize = !!(this.isPercentHeight && this.calcHeight !== this.getDataBasedBodyHeight());
+                        this._autoSize = this.isPercentHeight && this.calcHeight !== this.getDataBasedBodyHeight();
                         this.crudService.endEdit(false);
                         if (this._summaryRowHeight === 0) {
                             this.summaryService.summaryHeight = 0;
@@ -4190,7 +4186,7 @@ class IgxGridBaseDirective {
         this.textHighlightService.destroyGroup(this.id);
         if (this._advancedFilteringOverlayId) {
             this.overlayService.detach(this._advancedFilteringOverlayId);
-            this._advancedFilteringOverlayId = '';
+            delete this._advancedFilteringOverlayId;
         }
         this.overlayIDs.forEach(overlayID => {
             const overlay = this.overlayService.getOverlayById(overlayID);
@@ -4514,7 +4510,7 @@ class IgxGridBaseDirective {
     getHeaderGroupWidth(column) {
         return this.hasColumnLayouts
             ? ''
-            : `${parseFloat(column.calcWidth?.toString() || column.defaultWidth)}px`;
+            : `${parseFloat(column.calcWidth)}px`;
     }
     /**
      * Returns the column by field name.
@@ -4575,7 +4571,7 @@ class IgxGridBaseDirective {
      * ```
      */
     get totalRecords() {
-        return this._totalRecords >= 0 ? this._totalRecords : this.pagingState?.metadata?.countRecords || 0;
+        return this._totalRecords >= 0 ? this._totalRecords : this.pagingState?.metadata.countRecords;
     }
     set totalRecords(total) {
         if (total >= 0) {
@@ -4597,7 +4593,7 @@ class IgxGridBaseDirective {
         let totalWidth = 0;
         let i = 0;
         for (i; i < cols.length; i++) {
-            totalWidth += parseFloat(cols[i].calcWidth?.toString() || cols[i].defaultWidth);
+            totalWidth += parseFloat(cols[i].calcWidth) || 0;
         }
         this._totalWidth = totalWidth;
         return totalWidth;
@@ -4956,26 +4952,50 @@ class IgxGridBaseDirective {
     filterGlobal(value, condition, ignoreCase) {
         this.filteringService.filterGlobal(value, condition, ignoreCase);
     }
-    enableSummaries(rest, customSummary) {
-        if (Array.isArray(rest)) {
-            this._multipleSummaries(rest, true);
-        }
-        else if (typeof rest === 'string') {
-            this._summaries(rest, true, customSummary);
+    /**
+     * Enables summaries for the specified column and applies your customSummary.
+     *
+     * @remarks
+     * If you do not provide the customSummary, then the default summary for the column data type will be applied.
+     * @example
+     * ```typescript
+     * grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);
+     * ```
+     * Enable summaries for the listed columns.
+     * @example
+     * ```typescript
+     * grid.enableSummaries('ProductName');
+     * ```
+     * @param rest
+     */
+    enableSummaries(...rest) {
+        if (rest.length === 1 && Array.isArray(rest[0])) {
+            this._multipleSummaries(rest[0], true);
         }
         else {
-            this._summaries(rest.fieldName, true, rest.customSummary);
+            this._summaries(rest[0], true, rest[1]);
         }
     }
-    disableSummaries(rest) {
-        if (Array.isArray(rest)) {
-            this._disableMultipleSummaries(rest);
-        }
-        else if (typeof rest === 'string') {
-            this._summaries(rest, false);
+    /**
+     * Disable summaries for the specified column.
+     *
+     * @example
+     * ```typescript
+     * grid.disableSummaries('ProductName');
+     * ```
+     * @remarks
+     * Disable summaries for the listed columns.
+     * @example
+     * ```typescript
+     * grid.disableSummaries([{ fieldName: 'ProductName' }]);
+     * ```
+     */
+    disableSummaries(...rest) {
+        if (rest.length === 1 && Array.isArray(rest[0])) {
+            this._disableMultipleSummaries(rest[0]);
         }
         else {
-            this._summaries(rest.fieldName, false);
+            this._summaries(rest[0], false);
         }
     }
     /**
@@ -5016,10 +5036,10 @@ class IgxGridBaseDirective {
     /**
      * @hidden @internal
      */
-    refreshGridState(args) {
+    refreshGridState(_args) {
         this.crudService.endEdit(true);
         this.selectionService.clearHeaderCBState();
-        this.summaryService.clearSummaryCache(args);
+        this.summaryService.clearSummaryCache();
         this.summaryPipeTrigger++;
         this.cdr.detectChanges();
     }
@@ -5075,7 +5095,7 @@ class IgxGridBaseDirective {
         const eventArgs = this.gridAPI.get_pin_row_event_args(rowID, index, row, true);
         this.rowPinning.emit(eventArgs);
         if (eventArgs.cancel) {
-            return undefined;
+            return;
         }
         this.crudService.endEdit(false);
         const insertIndex = typeof eventArgs.insertAtIndex === 'number' ? eventArgs.insertAtIndex : this._pinnedRecordIDs.length;
@@ -5107,7 +5127,7 @@ class IgxGridBaseDirective {
         const eventArgs = this.gridAPI.get_pin_row_event_args(rowID, null, row, false);
         this.rowPinning.emit(eventArgs);
         if (eventArgs.cancel) {
-            return undefined;
+            return;
         }
         this.crudService.endEdit(false);
         this._pinnedRecordIDs.splice(index, 1);
@@ -5356,6 +5376,7 @@ class IgxGridBaseDirective {
         const colsPerBlock = columnBlocks.map(block => block.getInitialChildColumnSizes(block.children));
         const combinedBlocksSize = colsPerBlock.reduce((acc, item) => acc + item.length, 0);
         colsPerBlock.forEach(blockCols => visibleCols = visibleCols.concat(blockCols));
+        //
         const columnsWithSetWidths = this.hasColumnLayouts ?
             visibleCols.filter(c => c.widthSetByUser) :
             visibleChildColumns.filter(c => (c.widthSetByUser || c.widthConstrained) && c.width !== 'fit-content');
@@ -5366,7 +5387,7 @@ class IgxGridBaseDirective {
             .reduce((prev, curr) => {
             const colInstance = this.hasColumnLayouts ? curr.ref : curr;
             const colWidth = !colInstance.widthConstrained ? curr.width : colInstance.calcPixelWidth;
-            let widthValue = typeof colWidth === 'string' ? parseFloat(colWidth) : colWidth;
+            let widthValue = parseFloat(colWidth);
             if (isNaN(widthValue)) {
                 widthValue = MINIMUM_COLUMN_WIDTH;
             }
@@ -5420,7 +5441,7 @@ class IgxGridBaseDirective {
         let sum = 0;
         for (const col of fc) {
             if (col.level === 0) {
-                sum += parseFloat(col.calcWidth?.toString() || col.defaultWidth);
+                sum += parseFloat(col.calcWidth);
             }
         }
         // includes features at start
@@ -5441,7 +5462,7 @@ class IgxGridBaseDirective {
         let sum = 0;
         for (const col of fc) {
             if (col.level === 0) {
-                sum += parseFloat(col.calcWidth?.toString() || col.defaultWidth);
+                sum += parseFloat(col.calcWidth);
             }
         }
         return sum;
@@ -5452,6 +5473,21 @@ class IgxGridBaseDirective {
     isColumnGrouped(_fieldName) {
         return false;
     }
+    /**
+     * @hidden @internal
+     * TODO: REMOVE
+     */
+    onHeaderSelectorClick(event) {
+        if (!this.isMultiRowSelectionEnabled) {
+            return;
+        }
+        if (this.selectionService.areAllRowSelected()) {
+            this.selectionService.clearRowSelection(event);
+        }
+        else {
+            this.selectionService.selectAllRows(event);
+        }
+    }
     /**
      * @hidden @internal
      */
@@ -5767,7 +5803,7 @@ class IgxGridBaseDirective {
      * @internal
      */
     copyHandler(event) {
-        const eventPathElements = event.composedPath().map((el) => el.tagName?.toLowerCase());
+        const eventPathElements = event.composedPath().map(el => el.tagName?.toLowerCase());
         if (eventPathElements.includes('igx-grid-filtering-row') ||
             eventPathElements.includes('igx-grid-filtering-cell')) {
             return;
@@ -5780,7 +5816,7 @@ class IgxGridBaseDirective {
         }
         let data = [];
         let result;
-        if (event instanceof KeyboardEvent && event.code === 'KeyC' && (event.ctrlKey || event.metaKey) && event.currentTarget?.className === 'igx-grid-thead__wrapper') {
+        if (event.code === 'KeyC' && (event.ctrlKey || event.metaKey) && event.currentTarget.className === 'igx-grid-thead__wrapper') {
             if (selectedData.length) {
                 if (columnData.length === 0) {
                     result = this.prepareCopyData(event, selectedData);
@@ -5808,9 +5844,7 @@ class IgxGridBaseDirective {
                 data = selectedData;
                 result = this.prepareCopyData(event, data);
             }
-            // Note: when the gridCopy event is cancelled `result` is undefined and the
-            // clipboard is intentionally set to the string 'undefined', as it always has been.
-            event.clipboardData?.setData('text/plain', result);
+            event.clipboardData.setData('text/plain', result);
         }
     }
     /**
@@ -5831,8 +5865,8 @@ class IgxGridBaseDirective {
             result = result.slice(0, -2);
         }
         event.preventDefault();
-        /* Necessary for the hierarchical case but will probably have to
-           change how getSelectedData is propagated in the hierarchical grid
+        /* Necessary for the hiearachical case but will probably have to
+           change how getSelectedData is propagated in the hiearachical grid
         */
         event.stopPropagation();
         return result;
@@ -5981,7 +6015,7 @@ class IgxGridBaseDirective {
      * @hidden @internal
      */
     trackColumnChanges(_index, col) {
-        return col.field + col.calcWidth?.toString();
+        return col.field + col._calcWidth.toString();
     }
     /**
      * @hidden
@@ -6139,7 +6173,7 @@ class IgxGridBaseDirective {
     /* blazorCSSuppress */
     endEdit(commit = true, event) {
         if (!this.crudService.cellInEditMode && !this.crudService.rowInEditMode) {
-            return undefined;
+            return;
         }
         const document = this.nativeElement?.getRootNode();
         const focusWithin = this.nativeElement?.contains(document.activeElement);
@@ -6237,10 +6271,9 @@ class IgxGridBaseDirective {
      * @hidden
      */
     preventHeaderScroll(args) {
-        const target = args.target;
-        if (target.scrollLeft !== 0) {
-            this.navigation.forOfDir().getScroll().scrollLeft = target.scrollLeft;
-            target.scrollLeft = 0;
+        if (args.target.scrollLeft !== 0) {
+            this.navigation.forOfDir().getScroll().scrollLeft = args.target.scrollLeft;
+            args.target.scrollLeft = 0;
         }
     }
     beginAddRowForIndex(index, asChild = false) {
@@ -6316,9 +6349,6 @@ class IgxGridBaseDirective {
         // check virtualization state of data record added from cache
         // in case state is no longer valid - update it.
         const rowForOf = row.virtDirRow;
-        if (!rowForOf) {
-            return;
-        }
         const gridScrLeft = rowForOf.getScroll().scrollLeft;
         rowForOf.onHScroll(gridScrLeft);
         rowForOf.cdr.detectChanges();
@@ -6894,7 +6924,7 @@ class IgxGridBaseDirective {
      */
     _disableMultipleSummaries(expressions) {
         expressions.forEach((column) => {
-            const columnName = typeof column === 'string' ? column : column.fieldName;
+            const columnName = column && column.fieldName ? column.fieldName : column;
             this._summaries(columnName, false);
         });
     }
@@ -7035,18 +7065,18 @@ class IgxGridBaseDirective {
         const isRemote = totalItems && totalItems > this.dataView.length;
         let selectionMap;
         if (this.type === 'hierarchical' && selectionCollection.size > 0) {
-            selectionMap = isRemote ? new Map(selectionCollection) :
-                new Map(Array.from(selectionCollection).filter((tuple) => tuple[0] < source.length));
+            selectionMap = isRemote ? Array.from(selectionCollection) :
+                Array.from(selectionCollection).filter((tuple) => tuple[0] < source.length);
         }
         else {
-            selectionMap = isRemote ? new Map(this.selectionService.selection) :
-                new Map(Array.from(this.selectionService.selection).filter((tuple) => tuple[0] < source.length));
+            selectionMap = isRemote ? Array.from(this.selectionService.selection) :
+                Array.from(this.selectionService.selection).filter((tuple) => tuple[0] < source.length);
         }
         if (this.cellSelection === GridSelectionMode.single && activeEl) {
-            selectionMap.set(activeEl.row, new Set().add(activeEl.column));
+            selectionMap.push([activeEl.row, new Set().add(activeEl.column)]);
         }
         if (this.cellSelection === GridSelectionMode.none && activeEl) {
-            selectionMap.set(activeEl.row, new Set().add(activeEl.column));
+            selectionMap.push([activeEl.row, new Set().add(activeEl.column)]);
         }
         if (columnData) {
             selectedData = columnData;
@@ -7274,7 +7304,7 @@ class IgxGridBaseDirective {
         const cols = this.hasColumnLayouts ?
             this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup);
         cols.forEach((item) => {
-            colSum += parseInt((item.calcWidth?.toString() || item.defaultWidth), 10) || this.minColumnWidth;
+            colSum += parseInt((item.calcWidth || item.defaultWidth), 10) || this.minColumnWidth;
         });
         if (!colSum) {
             return null;
@@ -7379,15 +7409,12 @@ class IgxGridBaseDirective {
         if (!cb) {
             return;
         }
-        let row = this.summariesRowList.filter(s => s.index !== 0).find(r => r.index === rowIndex) || this.rowList.find(r => r.index === rowIndex);
+        let row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
         if (!row) {
             if (this.totalItemCount) {
                 this.verticalScrollContainer.dataChanged.pipe(first(), takeUntil(this.destroy$)).subscribe(() => {
                     this.cdr.detectChanges();
-                    row = this.summariesRowList.filter(s => s.index !== 0).find(r => r.index === rowIndex) || this.rowList.find(r => r.index === rowIndex);
-                    if (!row) {
-                        return;
-                    }
+                    row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
                     const cbArgs = this.getNavigationArguments(row, visibleColIndex);
                     cb(cbArgs);
                 });
@@ -7405,7 +7432,7 @@ class IgxGridBaseDirective {
     getNavigationArguments(row, visibleColIndex) {
         let targetType;
         let target;
-        switch (row.nativeElement?.tagName.toLowerCase()) {
+        switch (row.nativeElement.tagName.toLowerCase()) {
             case 'igx-grid-groupby-row':
                 targetType = 'groupRow';
                 target = row;
@@ -7413,7 +7440,7 @@ class IgxGridBaseDirective {
             case 'igx-grid-summary-row':
                 targetType = 'summaryCell';
                 target = visibleColIndex !== -1 ?
-                    row.summaryCells?.find(c => c.visibleColumnIndex === visibleColIndex) : row.summaryCells.first;
+                    row.summaryCells.find(c => c.visibleColumnIndex === visibleColIndex) : row.summaryCells.first;
                 break;
             case 'igx-child-grid-row':
                 targetType = 'hierarchicalRow';
@@ -7421,7 +7448,7 @@ class IgxGridBaseDirective {
                 break;
             default:
                 targetType = 'dataCell';
-                target = visibleColIndex !== -1 ? row.cells?.find(c => c.visibleColumnIndex === visibleColIndex) : row.cells.first;
+                target = visibleColIndex !== -1 ? row.cells.find(c => c.visibleColumnIndex === visibleColIndex) : row.cells.first;
                 break;
         }
         return { targetType, target };
@@ -7479,7 +7506,7 @@ class IgxGridBaseDirective {
         return isPinned && !isInPinnedArea;
     }
     isValidPosition(rowIndex, colIndex) {
-        const rows = this.summariesRowList.filter(s => s.index !== 0).length + this.rowList.length;
+        const rows = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).length;
         const cols = this._columns.filter(col => !col.columnGroup && col.visibleIndex >= 0 && !col.hidden).length;
         if (rows < 1 || cols < 1) {
             return false;
@@ -7615,7 +7642,7 @@ class IgxGridBaseDirective {
     }
     updateDefaultRowHeight() {
         if (this.dataRowList.length > 0 && this.dataRowList.first.cells && this.dataRowList.first.cells.length > 0) {
-            const targetCell = this.dataRowList.first.cells.find((x) => !x.isMerged);
+            const targetCell = this.dataRowList.first.cells.toArray().find((x) => !x.isMerged);
             if (!targetCell) {
                 this._shouldRecalcRowHeight = true;
                 return;
@@ -8393,10 +8420,6 @@ class IgxGridComponent extends IgxGridBaseDirective {
          * @hidden
          */
         this._groupingExpandState = [];
-        /**
-         * @hidden
-         */
-        this.groupingDiffer = null;
         this._hideGroupedColumns = false;
         this._dropAreaMessage = null;
         this._showGroupArea = true;
@@ -9200,7 +9223,6 @@ class IgxGridComponent extends IgxGridBaseDirective {
             }
             return new IgxGridCell(this, row.index, column);
         }
-        return undefined;
     }
     /**
      * Returns a `CellType` object that matches the conditions.
@@ -9220,7 +9242,6 @@ class IgxGridComponent extends IgxGridBaseDirective {
         if (row && column) {
             return new IgxGridCell(this, row.index, column);
         }
-        return undefined;
     }
     pinRow(rowID, index) {
         const row = this.getRowByKey(rowID);
@@ -9337,11 +9358,11 @@ class IgxGridComponent extends IgxGridBaseDirective {
         }
         return !expression.fieldName;
     }
-    _setGroupColsVisibility(hidden) {
+    _setGroupColsVisibility(value) {
         if (this._columns.length > 0 && !this.hasColumnLayouts) {
             this.groupingExpressions.forEach((expr) => {
                 const col = this.getColumnByName(expr.fieldName);
-                col.hidden = hidden;
+                col.hidden = value;
             });
         }
     }
@@ -9366,7 +9387,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
             IgxColumnResizingService,
             IgxForOfSyncService,
             IgxForOfScrollSyncService,
-        ], queries: [{ propertyName: "detailTemplateDirective", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: TemplateRef }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [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    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($any($event))\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-grid-row  class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:hasCellsToMerge:false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles! | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data!\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData!\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <div [attr.data-index]=\"rowIndex\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (beforeViewDetach)=\"viewDetachHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles! | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles! | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                    @if (this.groupingExpressions.length > 0) {\n                        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                    }\n                    <ng-template\n                        [ngTemplateOutlet]=\"detailTemplate\"\n                        [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <ng-container #bodyViewContainerRef></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div class=\"igx-grid__loading-outlet\">\n        <div igxToggle #loadingOverlay>\n            @if (shouldOverlayLoading) {\n                <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n            }\n        </div>\n    </div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" role=\"rowgroup\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div 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\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></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 *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></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 *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this), $implicit: $any(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text! | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon 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 select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></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: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { 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: IgxGridRowComponent, selector: "igx-grid-row" }, { kind: "component", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { 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: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { 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: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridGroupingPipe, name: "gridGroupBy" }, { kind: "pipe", type: IgxGridPagingPipe, name: "gridPaging" }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridSummaryPipe, name: "gridSummary" }, { kind: "pipe", type: IgxGridDetailsPipe, name: "gridDetails" }, { 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: "detailTemplateDirective", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: TemplateRef }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [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    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-grid-row  class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:hasCellsToMerge:false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <div [attr.data-index]=\"rowIndex\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (beforeViewDetach)=\"viewDetachHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                    @if (this.groupingExpressions.length > 0) {\n                        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                    }\n                    <ng-template\n                        [ngTemplateOutlet]=\"detailTemplate\"\n                        [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <ng-container #bodyViewContainerRef></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div class=\"igx-grid__loading-outlet\">\n        <div igxToggle #loadingOverlay>\n            @if (shouldOverlayLoading) {\n                <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n            }\n        </div>\n    </div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" role=\"rowgroup\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div 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\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></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 *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></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 *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this), $implicit: this }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon 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 select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></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: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { 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: IgxGridRowComponent, selector: "igx-grid-row" }, { kind: "component", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { 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: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { 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: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridGroupingPipe, name: "gridGroupBy" }, { kind: "pipe", type: IgxGridPagingPipe, name: "gridPaging" }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridSummaryPipe, name: "gridSummary" }, { kind: "pipe", type: IgxGridDetailsPipe, name: "gridDetails" }, { 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: IgxGridComponent, decorators: [{
             type: Component,
@@ -9423,7 +9444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         IgxGridCellMergePipe,
                         IgxGridUnmergeActivePipe,
                         IgxScrollInertiaDirective
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [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    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($any($event))\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-grid-row  class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:hasCellsToMerge:false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles! | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data!\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData!\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <div [attr.data-index]=\"rowIndex\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (beforeViewDetach)=\"viewDetachHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles! | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles! | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                    @if (this.groupingExpressions.length > 0) {\n                        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                    }\n                    <ng-template\n                        [ngTemplateOutlet]=\"detailTemplate\"\n                        [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <ng-container #bodyViewContainerRef></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div class=\"igx-grid__loading-outlet\">\n        <div igxToggle #loadingOverlay>\n            @if (shouldOverlayLoading) {\n                <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n            }\n        </div>\n    </div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" role=\"rowgroup\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div 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\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></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 *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></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 *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this), $implicit: $any(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text! | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon 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 select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [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    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-grid-row  class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:hasCellsToMerge:false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <div [attr.data-index]=\"rowIndex\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (beforeViewDetach)=\"viewDetachHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                    @if (this.groupingExpressions.length > 0) {\n                        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                    }\n                    <ng-template\n                        [ngTemplateOutlet]=\"detailTemplate\"\n                        [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <ng-container #bodyViewContainerRef></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div class=\"igx-grid__loading-outlet\">\n        <div igxToggle #loadingOverlay>\n            @if (shouldOverlayLoading) {\n                <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n            }\n        </div>\n    </div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" role=\"rowgroup\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div 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\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></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 *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></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 *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this), $implicit: this }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon 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 select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n" }]
         }], propDecorators: { dataPreLoad: [{
                 type: Output
             }], groupingExpressionsChange: [{