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

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, 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 { 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 { 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)));
+            this.gridSelection.deselectRows(this.groupRow.records.map(x => this.getRowID(x)), event);
         }
         else {
-            this.gridSelection.selectRows(this.groupRow.records.map(x => this.getRowID(x)));
+            this.gridSelection.selectRows(this.groupRow.records.map(x => this.getRowID(x)), false, event);
         }
     }
     /**
@@ -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: 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: $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 }); }
 }
 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: 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: $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" }]
         }], 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,7 +874,9 @@ class IgxGridExpandableCellComponent extends IgxGridCellComponent {
      * @hidden
      */
     onIndicatorFocus() {
-        this.grid.gridAPI.update_cell(this.grid.crudService.cell);
+        if (this.grid.crudService.cell) {
+            this.grid.gridAPI.update_cell(this.grid.crudService.cell);
+        }
     }
     /**
      * @hidden
@@ -907,7 +909,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]=\"\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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridExpandableCellComponent, decorators: [{
             type: Component,
@@ -915,7 +917,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]=\"\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" }]
+                        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" }]
         }], propDecorators: { expanded: [{
                 type: Input
             }], indicator: [{
@@ -948,15 +950,15 @@ 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.
-const GRID_BASE_CSS = "@layer ig.base{.igx-grid-thead__title,.igx-grid__td{position:relative;display:flex;flex:1 1 0%;align-items:center;outline-style:none;color:inherit;text-align:start;min-height:var(--cell-height);overflow:hidden;padding-block:0;background-clip:padding-box !important;font-size:.8125rem;line-height:1rem;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid-thead__title{flex-flow:row nowrap;justify-content:space-between;align-items:flex-end;min-width:0;min-height:var(--header-size);padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;font-size:var(--_grid-head-font-size);font-weight:600;border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));overflow:hidden;transition:color 120ms ease-in-out;outline-style:none}.igx-grid__td>igx-input-group,.igx-grid__td igx-combo,.igx-grid__td igx-simple-combo,.igx-grid__td igx-select,.igx-grid__td igx-date-picker,.igx-grid__td igx-time-picker{position:relative;height:auto;width:100% !important;overflow:hidden;z-index:0}.igx-grid__td igx-input-group{--_bundle-row: 1;background:var(--cell-editing-background)}.igx-grid__td igx-input-group input,.igx-grid__td igx-input-group .igx-input-group__input{height:100%;color:var(--cell-editing-foreground)}.igx-grid__td igx-input-group input,.igx-grid__td igx-input-group .igx-input-group__input:focus{color:var(--cell-editing-focus-foreground)}.igx-grid__td igx-select igx-input-group,.igx-grid__td igx-combo igx-input-group,.igx-grid__td igx-simple-combo igx-input-group,.igx-grid__td igx-time-picker igx-input-group,.igx-grid__td igx-date-picker igx-input-group{height:100%}.igx-grid__td .igx-input-group__bundle{background:var(--cell-editing-background) !important;height:100% !important;min-height:100% !important;border:none !important}.igx-grid__td .igx-input-group__bundle .igx-input-group__filler,.igx-grid__td .igx-input-group__bundle .igx-input-group__notch{border:none !important}.igx-grid__td .igx-input-group__bundle::before{content:none !important}.igx-grid__td .igx-input-group__bundle::after{display:none}.igx-grid__td .igx-input-group--indigo .igx-input-group__bundle:hover,.igx-grid__td .igx-input-group--indigo .igx-input-group__bundle:focus{background:rgba(0,0,0,0)}.igx-grid__td .igx-input-group__bundle-main,.igx-grid__td .igx-input-group__bundle-start,.igx-grid__td .igx-input-group__bundle-end{height:auto;border:none !important;border-radius:0 !important;box-shadow:none !important}.igx-grid__td .igx-input-group__bundle-main{padding:0}.igx-grid__td .igx-input-group__line{display:none}.igx-grid__td igx-prefix,.igx-grid__td igx-suffix{background:inherit !important;border-radius:0 !important;padding-top:0 !important;padding-bottom:0 !important;border:none !important;padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)) !important}.igx-grid__td .igx-input-group--indigo{padding-inline:max(var(--is-large, 1)*max(0.75rem, -1 * 0.75rem),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)) !important}.igx-grid__td .igx-input-group--indigo igx-prefix{padding-inline-start:0 !important}.igx-grid__td .igx-input-group--indigo igx-suffix{padding-inline-end:0 !important}.igx-grid__td .igx-input-group__input{padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)) !important}.igx-grid__td igx-date-range-picker{height:100%}.igx-grid__td igx-time-picker [igxLabel]{display:none}.igx-grid__td input{margin:0 auto;max-width:100%}.igx-grid__td .igx-input-group__input,.igx-grid__td .igx-input-group__file-input,.igx-grid__td .igx-input-group__textarea{box-shadow:none !important;border:none !important}.igx-grid__td .igx-input-group--disabled,.igx-grid__td .igx-input-group--disabled igx-prefix,.igx-grid__td .igx-input-group--disabled igx-suffix{color:var(--cell-disabled-color)}.igx-grid{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--ig-size-large));--grid-size: var(--component-size);--_expander-icon-width: 1.5rem;--_hierarchical-action-icon: 1.5rem;--_hierarchical-indent-small: 0.75rem;--_hierarchical-indent-medium: 1rem;--_hierarchical-indent-large: 1.5rem;--cell-height: max(var(--is-large, 1) * max(3.125rem, -1 * 3.125rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem));--header-size: max(var(--is-large, 1) * max(3.125rem, -1 * 3.125rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem));--grouparea-size: max(var(--is-large, 1) * max(3.5625rem, -1 * 3.5625rem), var(--is-medium, 1) * max(3.0625rem, -1 * 3.0625rem), var(--is-small, 1) * max(2.5625rem, -1 * 2.5625rem));--ig-tree-indent-size: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));--_grid-head-font-size: 0.75rem;position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto auto;grid-template-columns:100%;overflow:hidden;box-shadow:0 0 0 .0625rem var(--grid-border-color),var(--grid-elevation);outline-style:none;z-index:1}.igx-grid__caption{display:flex;align-items:center;font-size:1.25rem;line-height:2rem;padding:1rem 1.5rem;grid-row:1}.igx-grid__tbody{position:relative;display:flex;grid-row:4;overflow:hidden}.igx-grid__tbody-content{position:relative;background:var(--content-background);color:var(--content-text-color);overflow:hidden;z-index:1;outline-style:none}.igx-grid__tbody-content:focus{outline:0}.igx-grid__tbody-message{display:flex;justify-content:center;align-items:center;height:100%;color:var(--content-text-color);flex-direction:column;padding:1.5rem}.igx-grid__loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:6.25rem}.igx-grid__tbody-scrollbar{background:var(--content-background);border-inline-start:.0625rem solid var(--row-border-color);position:relative}.igx-grid__tbody-scrollbar-main{position:relative}.igx-grid__tbody-scrollbar-start{background:var(--content-background)}.igx-grid__tbody-scrollbar-end{background:var(--header-background)}.igx-grid__scroll{grid-row:6;display:flex;flex-flow:row nowrap;width:100%;background:var(--_grid-background, var(--content-background));z-index:10001}.igx-grid__scroll-start{background:var(--_grid-background, var(--content-background))}.igx-grid__scroll-start--column-selection{border-inline-end:var(--row-border-width) solid var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid__scroll-start--pinned{border-inline-end:.125rem solid var(--ig-grid-summary-pinned-border-color, var(--pinned-border-color))}.igx-grid__scroll-end{background:var(--_grid-background, var(--content-background));border-inline-start:var(--pinned-border-width) solid var(--ig-grid-summary-pinned-border-color, var(--pinned-border-color))}.igx-grid__scroll-main igx-display-container{height:0}.igx-grid__tfoot{position:relative;display:flex;background:var(--header-background);color:var(--header-text-color);overflow:hidden;outline-style:none;grid-row:5;z-index:10001}.igx-grid__tfoot .igx-grid__tr{position:relative;background:inherit;color:inherit;z-index:2}.igx-grid__tfoot .igx-grid__tr:hover{background:inherit;color:inherit}.igx-grid__tfoot>[aria-activedescendant]{outline-style:none}.igx-grid__tfoot:focus{outline:0}.igx-grid__tfoot:empty{display:none}.igx-grid__tfoot-thumb{position:absolute;top:0;inset-inline-end:0;background:var(--igx-grid-summary-background-color, var(--ig-grid-summary-background-color, var(--_grid-background, var(--content-background))))}.igx-grid__footer{grid-row:7}.igx-grid__tr{position:relative;display:flex;outline-style:none;border-bottom:var(--row-border-width) var(--row-border-style) var(--row-border-color);background-clip:padding-box !important}.igx-grid__tr .igx-display-container{overflow:visible !important;flex:1 !important;min-width:0}.igx-grid__tr:hover .igx-grid__td--column-selected{color:var(--row-selected-hover-text-color);background:var(--row-selected-hover-background)}.igx-grid__tr:hover .igx-grid__td:not(.igx-grid__td--pinned-last){border-inline-end-color:var(--body-column-hover-border-color)}.igx-grid__tr:not(.igx-grid__tr--header,.igx-grid__tr--selected,.igx-grid__tr--ghost):hover{background:var(--row-hover-background);color:var(--row-hover-text-color)}.igx-grid__tr--odd{background:var(--row-odd-background);color:var(--row-odd-text-color)}.igx-grid__tr--odd .igx-grid__tr-action{border-inline-end:var(--row-border-width) var(--row-border-style) var(--_grid-action-border-color, hsla(from var(--action-border-color) h s l/0.38))}.igx-grid__tr--odd .igx-grid__td:not(.igx-grid__td--pinned-last){border-inline-end:var(--header-border-width) solid var(--body-column-border-color-odd)}.igx-grid__tr--even{background:var(--row-even-background);color:var(--row-even-text-color)}.igx-grid__tr--even .igx-grid__td:not(.igx-grid__td--pinned-last){border-inline-end:var(--header-border-width) solid var(--body-column-border-color-even)}.igx-grid__tr--even .igx-grid__tr-action{border-inline-end:var(--row-border-width) var(--row-border-style) var(--_grid-action-border-color, hsla(from var(--action-border-color) h s l/0.38))}.igx-grid__tr--selected{color:var(--row-selected-text-color);background:var(--row-selected-background)}.igx-grid__tr--selected .igx-grid__td--selected,.igx-grid__tr--selected .igx-grid__td--pinned.igx-grid__td--selected{color:var(--cell-selected-within-text-color);background:var(--cell-selected-within-background)}.igx-grid__tr--selected .igx-grid__td:not(.igx-grid__td--pinned-last){border-inline-end-color:var(--body-column-selected-border-color)}.igx-grid__tr--selected:hover{color:var(--row-selected-hover-text-color);background:var(--row-selected-hover-background)}.igx-grid__tr--selected:hover .igx-grid__td:not(.igx-grid__td--pinned-last){border-inline-end-color:var(--body-column-hover-selected-border-color)}.igx-grid__tr--deleted .igx-grid__td-text{font-style:italic;color:var(--ig-error-500);text-decoration:line-through}.igx-grid__tr--highlighted{position:relative}.igx-grid__tr--highlighted::after{content:\"\";position:absolute;top:0;inset-inline-start:0;width:.25rem;height:100%;background:var(--row-highlight);z-index:3}.igx-grid__tr--highlighted::before{inset-inline-start:.25rem}.igx-grid__tr--filtered .igx-grid__td-text{color:var(--tree-filtered-text-color)}.igx-grid__tr--selected.igx-grid__tr--filtered .igx-grid__td-text{color:var(--tree-selected-filtered-row-text-color)}.igx-grid__tr--expanded{border-bottom:none}.igx-grid__tr--pinned{position:relative;background:inherit;z-index:10000}.igx-grid__tr--pinned-top{border-bottom:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color) !important}.igx-grid__tr--pinned-bottom{border-top:.125rem solid var(--pinned-border-color) !important;position:absolute;bottom:0}.igx-grid__tr--merged{border-block-end:0}.igx-grid__tr--merged-top{position:absolute;width:100%}.igx-grid__tr--disabled .igx-grid__td-text{color:var(--cell-disabled-color)}.igx-grid__tr-header-row igx-pivot-row-header-group{padding-inline-start:max(var(--is-large, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__tr-header-row igx-pivot-row-header-group .igx-grid-th{border-block-end:0}.igx-grid__td::after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid__td--centered{justify-content:center}.igx-grid__td--image{justify-content:center}.igx-grid__td--bool{display:flex;flex-grow:1;justify-content:center}.igx-grid__td--bool .igx-icon{--component-size: 1}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-600)}.igx-grid__td--bool-true .igx-icon--success{color:var(--ig-gray-700)}.igx-grid__td--fw{flex-grow:0;outline-style:none}.igx-grid__td--fw>.igx-icon{--component-size: 3}.igx-grid__td-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none}.igx-grid__td--new{color:var(--cell-new-color)}.igx-grid__td--edited .igx-grid__td-text{font-style:italic;color:var(--cell-edited-value-color);padding:0 .0625rem}.igx-grid__td--merged{z-index:1;grid-row:1/-1}.igx-grid__td--merged-selected{color:var(--row-selected-text-color);background:var(--row-selected-background) !important}.igx-grid__td--merged-hovered{color:var(--row-hover-text-color);background:var(--row-hover-background) !important}.igx-grid__td--merged-selected.igx-grid__td--merged-hovered{color:var(--row-selected-hover-text-color);background:var(--row-selected-hover-background) !important}.igx-grid__td--number{text-align:end;justify-content:flex-end;flex-grow:1}.igx-grid__td--pinned{position:relative;background:inherit;z-index:9999}.igx-grid__td--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid__td--pinned-first::after{width:calc(100% - 0.0625rem);inset-inline-end:0;inset-inline-start:unset}.igx-grid__td--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid__td--pinned.igx-grid__td--selected{color:var(--cell-selected-text-color);background:var(--cell-selected-background)}.igx-grid__td--pinned.igx-grid__td--column-selected{color:var(--row-selected-text-color);background:var(--row-selected-background)}.igx-grid__td--pinned.igx-grid__td--column-selected:hover{background:var(--row-selected-hover-background);color:var(--row-selected-text-color)}.igx-grid__td--row-pinned-first{overflow:hidden}.igx-grid__td--pinned-chip{margin-inline-end:max(var(--is-large, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__td--active::after{border:var(--cell-active-border-width) var(--active-state-border-style) var(--cell-active-border-color)}.igx-grid__td--selected{color:var(--cell-selected-text-color);background:var(--cell-selected-background)}.igx-grid__td--selected .igx-grid__tree-grouping-indicator:hover{color:var(--cell-selected-text-color)}.igx-grid__td--column-selected{color:var(--row-selected-text-color);background:var(--row-selected-background)}.igx-grid__td--column-selected:hover{color:var(--row-selected-hover-text-color);background:var(--row-selected-hover-background)}.igx-grid__td--selected.igx-grid__td--column-selected{color:var(--cell-selected-within-text-color);background:var(--cell-selected-within-background)}.igx-grid__td--selected.igx-grid__td--column-selected:hover{color:var(--cell-selected-within-text-color);background:var(--cell-selected-within-background)}.igx-grid__td--editing{background:var(--cell-editing-background) !important;padding-inline:0}.igx-grid__td--editing::after{box-shadow:inset 0 0 0 0.0625rem var(--edit-mode-color)}.igx-grid__td--editing .igx-input-group{--size: 100% !important;--ig-input-group-border-color: transparent;--ig-input-group-hover-border-color: transparent;--ig-input-group-focused-border-color: transparent;--ig-input-group-focused-secondary-color: transparent;--ig-input-group-disabled-border-color: transparent;width:100%;overflow:hidden}.igx-grid__td--editing .igx-input-group .igx-input-group__bundle::before,.igx-grid__td--editing .igx-input-group .igx-input-group__bundle::after{display:none}.igx-grid__td--editing .igx-input-group .igx-input-group__input{--input-font-size: 0.8125rem;--input-line-height: 1rem;font-size:var(--input-font-size) !important;line-height:var(--input-line-height) !important}.igx-grid__td--editing [aria-readonly=true]{color:var(--cell-disabled-color)}.igx-grid__td--editing [aria-readonly=true] igx-icon{color:var(--cell-disabled-color)}.igx-grid__td--editing.igx-grid__td--invalid .igx-input-group__bundle:focus-within::after{border:none !important}.igx-grid__td--editing.igx-grid__td--invalid::after{box-shadow:inset 0 0 0 0.0625rem var(--ig-error-500) !important}.igx-grid__td--invalid{padding-inline-end:.25rem !important}.igx-grid__td--invalid>igx-icon{--component-size: 1 !important;color:var(--ig-error-500)}.igx-grid__td--editing.igx-grid__td--valid::after{box-shadow:inset 0 0 0 .0625rem var(--ig-success-500)}.igx-grid__td--valid>igx-icon{--component-size: 1 !important}.igx-grid__tr--edit{position:relative}.igx-grid__tr--edit::after{content:\"\";position:absolute;height:100%;width:100%;inset:0;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:10000;box-shadow:inset 0 .0625rem 0 0 var(--edit-mode-color),inset 0 -0.0625rem 0 0 var(--edit-mode-color)}.igx-grid__tr--mrl.igx-grid__tr--edit:first-of-type::after{top:0;z-index:5}.igx-grid__tr--drag{opacity:.5}.igx-grid__tr--ghost{background:var(--row-ghost-background);color:var(--row-drag-color);outline:.0625rem solid var(--row-ghost-border-color);z-index:10002}.igx-grid__tr--ghost{--row-ghost-background: var(--igx-grid-row-ghost-background, var(--ig-grid-row-ghost-background, var(--ig-gray-50)));--row-drag-color: var(--igx-grid-row-drag-color, var(--ig-grid-row-drag-color, var(--ig-gray-800)));--row-ghost-border-color: var(--igx-grid-row-ghost-border-color, var(--ig-grid-row-ghost-border-color, var(--ig-gray-500)))}.igx-grid__tr--group{position:relative;background:var(--header-background) !important}.igx-grid__tr--inner{display:flex;background:inherit}.igx-grid__tr--header{display:flex;align-items:center}.igx-grid__tr--header igx-icon{--component-size: 3}.igx-grid__tr--add-animate{animation:scale-in-ver-center .2s cubic-bezier(0.25, 0.46, 0.45, 0.94)}.igx-grid__tr--edited::before{content:\"\";position:absolute;width:.125rem;height:100%;z-index:10000;background:var(--edited-row-indicator)}.igx-grid__row-editing-outlet{z-index:10000;position:absolute}.igx-grid__tr-container{overflow:auto;width:100%;border-bottom:.0625rem solid var(--row-border-color)}.igx-grid__tr-container--active{border:var(--cell-active-border-width) var(--active-state-border-style) var(--cell-active-border-color)}.igx-grid__tr-action:last-of-type{border-inline-end:var(--row-border-width) var(--row-border-style) var(--_grid-action-border-color, hsla(from var(--action-border-color) h s l/0.38));min-height:var(--cell-height)}.igx-grid__tree-grouping-indicator{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline-style:none;margin-inline-end:.5rem;cursor:pointer;color:var(--expand-icon-color)}.igx-grid__tree-grouping-indicator:hover{color:var(--expand-icon-hover-color)}[dir=rtl] .igx-grid__tree-grouping-indicator{transform:scaleX(-1)}.igx-grid__tree-grouping-indicator igx-icon{--component-size: 3}.igx-grid__tree-loading-indicator{width:1.5rem;height:1.5rem;margin-inline-end:.5rem}.igx-grid__row-indentation{position:relative;display:flex;justify-content:center;align-items:center;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));background:inherit;z-index:1;background-clip:padding-box !important}.igx-grid__hierarchical-expander{-webkit-user-select:none;-moz-user-select:none;user-select:none;background:inherit;padding-inline:max(var(--is-large, 1)*max(var(--_hierarchical-indent-large), -1 * var(--_hierarchical-indent-large))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(var(--_hierarchical-indent-medium), -1 * var(--_hierarchical-indent-medium))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(var(--_hierarchical-indent-small), -1 * var(--_hierarchical-indent-small))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;color:var(--expand-icon-color)}.igx-grid__hierarchical-expander:focus{outline:none}.igx-grid__hierarchical-expander:focus igx-icon{color:var(--expand-icon-hover-color)}.igx-grid__hierarchical-expander:hover igx-icon{color:var(--expand-icon-hover-color)}.igx-grid__hierarchical-expander igx-icon{--component-size: 3;color:var(--expand-icon-color)}[dir=rtl] .igx-grid__hierarchical-expander{transform:scaleX(-1)}.igx-grid__hierarchical-expander--empty{cursor:default;pointer-events:none;padding-inline:max(var(--is-large, 1)*max(var(--_hierarchical-indent-large), -1 * var(--_hierarchical-indent-large))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(var(--_hierarchical-indent-medium), -1 * var(--_hierarchical-indent-medium))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(var(--_hierarchical-indent-small), -1 * var(--_hierarchical-indent-small))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-inline-end:var(--row-border-width) var(--row-border-style) var(--_grid-action-border-color, hsla(from var(--action-border-color) h s l/0.38))}.igx-grid__hierarchical-expander--header{background:inherit;border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));z-index:3}.igx-grid__hierarchical-expander--header igx-icon{display:flex;align-items:center}.igx-grid__hierarchical-expander--push{align-items:flex-start}.igx-grid__hierarchical-expander--push igx-icon{min-height:var(--header-size);max-height:var(--header-size)}.igx-grid__hierarchical-indent{display:flex;margin-inline-start:max(var(--is-large, 1)*max(calc(2 * var(--_hierarchical-indent-large) + var(--_hierarchical-action-icon)), -1 * calc(2 * var(--_hierarchical-indent-large) + var(--_hierarchical-action-icon)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(2 * var(--_hierarchical-indent-medium) + var(--_hierarchical-action-icon)), -1 * calc(2 * var(--_hierarchical-indent-medium) + var(--_hierarchical-action-icon)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(2 * var(--_hierarchical-indent-small) + var(--_hierarchical-action-icon)), -1 * calc(2 * var(--_hierarchical-indent-small) + var(--_hierarchical-action-icon)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline-end:max(var(--is-large, 1)*max(var(--_hierarchical-indent-large), -1 * var(--_hierarchical-indent-large))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(var(--_hierarchical-indent-medium), -1 * var(--_hierarchical-indent-medium))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(var(--_hierarchical-indent-small), -1 * var(--_hierarchical-indent-small))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-block:max(var(--is-large, 1)*max(var(--_hierarchical-indent-large), -1 * var(--_hierarchical-indent-large))*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(var(--_hierarchical-indent-medium), -1 * var(--_hierarchical-indent-medium))*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(var(--_hierarchical-indent-small), -1 * var(--_hierarchical-indent-small))*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-grid__hierarchical-indent--scroll{margin-inline-end:max(var(--is-large, 1)*max(calc(var(--_hierarchical-indent-large) + 18px), -1 * calc(var(--_hierarchical-indent-large) + 18px))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(var(--_hierarchical-indent-medium) + 18px), -1 * calc(var(--_hierarchical-indent-medium) + 18px))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(var(--_hierarchical-indent-small) + 18px), -1 * calc(var(--_hierarchical-indent-small) + 18px))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-1{padding-inline-start:max(var(--is-large, 1)*max(2.25rem, -1 * 2.25rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(2rem, -1 * 2rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-2{padding-inline-start:max(var(--is-large, 1)*max(4.5rem, -1 * 4.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(4rem, -1 * 4rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(3rem, -1 * 3rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-3{padding-inline-start:max(var(--is-large, 1)*max(6.75rem, -1 * 6.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(6rem, -1 * 6rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(4.5rem, -1 * 4.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-4{padding-inline-start:max(var(--is-large, 1)*max(9rem, -1 * 9rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(8rem, -1 * 8rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(6rem, -1 * 6rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-5{padding-inline-start:max(var(--is-large, 1)*max(11.25rem, -1 * 11.25rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(10rem, -1 * 10rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(7.5rem, -1 * 7.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-6{padding-inline-start:max(var(--is-large, 1)*max(13.5rem, -1 * 13.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(12rem, -1 * 12rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(9rem, -1 * 9rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-7{padding-inline-start:max(var(--is-large, 1)*max(15.75rem, -1 * 15.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(14rem, -1 * 14rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(10.5rem, -1 * 10.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-8{padding-inline-start:max(var(--is-large, 1)*max(18rem, -1 * 18rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(16rem, -1 * 16rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(12rem, -1 * 12rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-9{padding-inline-start:max(var(--is-large, 1)*max(20.25rem, -1 * 20.25rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(18rem, -1 * 18rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(13.5rem, -1 * 13.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-10{padding-inline-start:max(var(--is-large, 1)*max(22.5rem, -1 * 22.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(20rem, -1 * 20rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(15rem, -1 * 15rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__header-indentation{position:relative;padding-inline-end:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));background:var(--header-background);z-index:4;height:100%}.igx-grid__header-indentation igx-icon{--component-size: 3}.igx-grid__header-indentation--no-border{border-inline-end:.0625rem solid rgba(0,0,0,0)}.igx-grid__cbx-padding{display:flex;align-items:center;justify-content:center;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__cbx-selection{display:flex;justify-content:center;align-items:center;background:inherit;z-index:4;border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));background-clip:border-box !important}.igx-grid__cbx-selection--push{align-items:flex-start;padding-block-start:max(var(--is-large, 1)*max(0.9375rem, -1 * 0.9375rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-grid__group-row{background:var(--group-row-background);display:flex;outline-style:none;border-block:var(--row-border-width) var(--row-border-style) var(--row-border-color);min-height:var(--header-size)}.igx-grid__group-row::after{content:\"\";position:absolute;width:100%;height:100%;inset:0;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-grid__group-row--active{position:relative;background:var(--group-row-selected-background)}.igx-grid__group-row--active:hover{background:var(--group-row-selected-background)}.igx-grid__group-row--active::after{border:var(--cell-active-border-width) var(--active-state-border-style) var(--cell-active-border-color);z-index:4}.igx-grid__group-content{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;padding-inline-start:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));border-inline-end:var(--header-border-width) solid var(--body-column-border-color-odd);min-height:var(--cell-height)}.igx-grid__group-content:focus{outline:rgba(0,0,0,0)}.igx-grid__grouping-indicator{position:relative;display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;justify-content:center;align-items:center;z-index:1;cursor:pointer;padding-inline-end:.75rem;margin-inline-start:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));min-height:var(--header-size)}.igx-grid__grouping-indicator igx-icon{--component-size: 3;color:var(--expand-icon-color)}.igx-grid__grouping-indicator:hover,.igx-grid__grouping-indicator:focus{outline-style:none}.igx-grid__grouping-indicator:hover igx-icon,.igx-grid__grouping-indicator:focus igx-icon{color:var(--expand-icon-hover-color)}[dir=rtl] .igx-grid__grouping-indicator{transform:scaleX(-1)}.igx-grid__group-expand-btn{position:absolute;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;inset-block-start:calc(50% - var(--_expander-icon-width)/2);inset-inline-start:var(--_indicator-inline-inset)}.igx-grid__group-expand-btn:hover{color:var(--expand-icon-hover-color)}.igx-grid__group-expand-btn--push{inset-block-start:max(var(--is-large, 1)*max(1.375rem, -1 * 1.375rem),var(--is-medium, 1)*max(1.125rem, -1 * 1.125rem),var(--is-small, 1)*max(0.875rem, -1 * 0.875rem))}.igx-grid__group-row--padding-level-1 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(1.125rem, -1 * 1.125rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem))}.igx-grid__group-row--padding-level-2 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(2.25rem, -1 * 2.25rem),var(--is-medium, 1)*max(2rem, -1 * 2rem),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem))}.igx-grid__group-row--padding-level-3 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(3.375rem, -1 * 3.375rem),var(--is-medium, 1)*max(3rem, -1 * 3rem),var(--is-small, 1)*max(2.25rem, -1 * 2.25rem))}.igx-grid__group-row--padding-level-4 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(4.5rem, -1 * 4.5rem),var(--is-medium, 1)*max(4rem, -1 * 4rem),var(--is-small, 1)*max(3rem, -1 * 3rem))}.igx-grid__group-row--padding-level-5 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(5.625rem, -1 * 5.625rem),var(--is-medium, 1)*max(5rem, -1 * 5rem),var(--is-small, 1)*max(3.75rem, -1 * 3.75rem))}.igx-grid__group-row--padding-level-6 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(6.75rem, -1 * 6.75rem),var(--is-medium, 1)*max(6rem, -1 * 6rem),var(--is-small, 1)*max(4.5rem, -1 * 4.5rem))}.igx-grid__group-row--padding-level-7 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(7.875rem, -1 * 7.875rem),var(--is-medium, 1)*max(7rem, -1 * 7rem),var(--is-small, 1)*max(5.25rem, -1 * 5.25rem))}.igx-grid__group-row--padding-level-8 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(9rem, -1 * 9rem),var(--is-medium, 1)*max(8rem, -1 * 8rem),var(--is-small, 1)*max(6rem, -1 * 6rem))}.igx-grid__group-row--padding-level-9 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(10.125rem, -1 * 10.125rem),var(--is-medium, 1)*max(9rem, -1 * 9rem),var(--is-small, 1)*max(6.75rem, -1 * 6.75rem))}.igx-grid__group-row--padding-level-10 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(11.25rem, -1 * 11.25rem),var(--is-medium, 1)*max(10rem, -1 * 10rem),var(--is-small, 1)*max(7.5rem, -1 * 7.5rem))}.igx-grid__mrl-block{display:grid !important;background:inherit;position:relative}.igx-grid__pivot--super-compact{--ig-size: 1 !important}.igx-grid__pivot--super-compact .igx-grid-th,.igx-grid__pivot--super-compact .igx-grid-thead__title,.igx-grid__pivot--super-compact .igx-grid__td{padding:0 .25rem !important;min-height:1.5rem !important;height:1.5rem}.igx-grid__pivot--super-compact .igx-grid-th>*,.igx-grid__pivot--super-compact .igx-grid-thead__title>*{line-height:normal;align-self:initial;max-height:100%}.igx-grid__pivot--super-compact .igx-grid__tr-pivot--row-area{padding-bottom:.25rem}.igx-grid__tr-pivot{display:flex;align-items:center;background:inherit;overflow:hidden;z-index:3;height:var(--header-size);padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;border-inline-start:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));border-bottom:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid__tr-pivot igx-chips-area{flex-wrap:nowrap;width:auto}.igx-grid__tr-pivot igx-chips-area>*{margin-inline-end:.25rem}.igx-grid__tr-pivot igx-chips-area:last-child{margin-inline-end:0}.igx-grid__pivot-filter-toggle{display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}.igx-grid__pivot-filter-toggle>igx-badge{position:absolute;top:-0.25rem;inset-inline-start:60%;width:1.125rem;min-width:1.125rem;height:1.125rem;font-size:.625rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-grid__pivot-empty-chip-area{line-height:normal;font-size:.875rem;margin-inline-end:0 !important}.igx-grid__tr-pivot--small-row-area{border-inline-start:0}.igx-grid__tr-pivot--row-area{height:auto !important;align-items:flex-end;padding-bottom:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));border-inline-start:0;border-bottom:0}.igx-grid__tr-pivot--filter-container{display:flex;flex-direction:column}.igx-grid__tr-pivot--chip_drop_indicator{width:.125rem;background:var(--resize-line-color);visibility:hidden}.igx-grid__tr-pivot--drop-row-area{flex-grow:1}.igx-grid__tr-pivot--filter{height:var(--header-size);border-inline-start:0}.igx-grid__tr-pivot-group{flex:1}.igx-grid__tr-pivot--columnDimensionLeaf{box-shadow:none}.igx-grid__tr-pivot--columnDimensionLeaf igx-grid-header{border:none}.igx-grid__tr-pivot--columnMultiRowSpan igx-grid-header>*{visibility:hidden}.igx-grid__tr-pivot-toggle-icons{display:inline-flex !important}.igx-grid__drag-indicator{display:flex;align-items:center;justify-content:center;padding-inline:max(var(--is-large, 1)*max(var(--_hierarchical-indent-large), -1 * var(--_hierarchical-indent-large))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(var(--_hierarchical-indent-medium), -1 * var(--_hierarchical-indent-medium))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(var(--_hierarchical-indent-small), -1 * var(--_hierarchical-indent-small))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));min-height:var(--cell-height);padding-block:0;flex:0 0 auto;background:inherit;z-index:4;cursor:move;border-inline-end:.0625rem solid rgba(0,0,0,0)}.igx-grid__drag-indicator igx-icon{--component-size: 3}.igx-grid__drag-indicator--header{border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid__drag-indicator--off{color:var(--row-drag-color)}.igx-grid__drag-ghost-image{position:absolute !important;align-items:center !important;background:var(--ghost-header-background) !important;color:var(--ghost-header-text-color) !important;border:rgba(0,0,0,0) !important;min-width:10.5rem;max-width:20rem;height:var(--header-size);min-height:var(--header-size);padding-inline:max(var(--is-large, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));top:-625rem;inset-inline-start:-625rem;box-shadow:var(--drag-shadow);overflow:hidden;z-index:20}.igx-grid__drag-ghost-image .igx-grid-th__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1 0 0;text-align:end;color:var(--ghost-header-text-color) !important}.igx-grid__drag-ghost-image .igx-grid-thead__title{border:none;color:var(--ghost-header-text-color) !important;background:rgba(0,0,0,0) !important}.igx-grid__drag-ghost-image .igx-grid-th__icons,.igx-grid__drag-ghost-image::before,.igx-grid__drag-ghost-image::after{display:none}.igx-grid__drag-ghost-image-icon{color:var(--ghost-header-icon-color);margin-inline-end:.75rem}.igx-grid__drag-ghost-image-icon-group{color:var(--ghost-header-icon-color);padding:1.5rem;padding-inline-end:0;margin-inline-end:.5rem}.igx-grid__drag-col-header{background:var(--header-background)}.igx-grid__drag-col-header .igx-grid-thead__title>*,.igx-grid__drag-col-header .igx-grid-th>*{opacity:.4}.igx-grid__scroll-on-drag-left{position:absolute;width:.9375rem;top:0;height:100%;z-index:25;inset-inline-start:0}.igx-grid__scroll-on-drag-right{position:absolute;width:.9375rem;top:0;height:100%;z-index:25;inset-inline-end:0}.igx-grid__scroll-on-drag-pinned{position:absolute;width:.9375rem;height:100%;top:0;z-index:25}.igx-grid__filtering-row{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;position:absolute;inset-inline-start:0;bottom:0;z-index:3;grid-row:2;width:100%;height:var(--cell-height);padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--filtering-row-text-color);background:var(--filtering-row-background);box-shadow:0 .25rem .625rem rgba(0,0,0,.12)}.igx-grid__filtering-row .igx-input-group{--size: calc(var(--cell-height) - 0.5rem) !important;min-height:var(--size);width:100% !important;max-width:12.5rem !important;min-width:8.75rem !important}.igx-grid__filtering-row .igx-input-group igx-prefix,.igx-grid__filtering-row .igx-input-group igx-suffix{height:100% !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__input{font-size:max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(0.875rem, -1 * 0.875rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)) !important;padding-inline-start:0 !important;padding-block:0 !important;height:100% !important}.igx-grid__filtering-row [igxIconButton]{--ig-size: 1;aspect-ratio:1;color:var(--filtering-row-text-color)}.igx-grid__filtering-row-main{display:flex;flex:1 1 auto;align-items:center;overflow:hidden;max-width:calc(100% - 11rem);min-width:3.5rem}.igx-grid__filtering-row-main igx-chips-area{flex-wrap:nowrap;margin-inline:.5rem;gap:.25rem}.igx-grid__filtering-row-editing-buttons{display:flex;align-items:center;padding:.5rem;gap:.25rem}.igx-grid__filtering-row-editing-buttons button{transition:none}.igx-grid__filtering-row-editing-buttons button:not([disabled]) igx-icon{color:var(--sorted-header-icon-color)}.igx-grid__filtering-row-editing-buttons--small{padding:.25rem}.igx-grid__filtering-row-editing-buttons--small button{transition:none}.igx-grid__filtering-row-editing-buttons--small button:not([disabled]) igx-icon{color:var(--sorted-header-icon-color)}.igx-grid__filtering-row-scroll-start{position:relative;margin-inline:.5rem;overflow:visible}.igx-grid__filtering-row-scroll-start::after{display:block;position:absolute;width:.625rem;content:\"\";inset-block:-0.125rem;background:linear-gradient(to right, var(--filtering-row-background), transparent);inset-inline-end:-0.625rem}.igx-grid__filtering-row-scroll-end{position:relative;margin-inline:.5rem;overflow:visible}.igx-grid__filtering-row-scroll-end::before{display:block;position:absolute;width:.625rem;content:\"\";inset-block:-0.125rem;background:linear-gradient(to left, var(--filtering-row-background), transparent);inset-inline-start:-0.625rem}.igx-grid .igx-grid__filtering-cell--selected,.igx-grid .igx-grid__filtering-cell{display:flex;align-items:center;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;overflow:hidden;border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));border-top:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));height:var(--header-size);gap:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));background-clip:padding-box !important}.igx-grid .igx-grid__filtering-cell--selected igx-chips-area,.igx-grid .igx-grid__filtering-cell igx-chips-area{width:auto;min-width:0;flex-wrap:nowrap}.igx-grid .igx-grid__filtering-cell--selected igx-chips-area .igx-filtering-chips__connector,.igx-grid .igx-grid__filtering-cell igx-chips-area .igx-filtering-chips__connector{font-size:.75rem;text-transform:uppercase;font-weight:600;margin:0 .5rem;overflow:hidden}.igx-grid__filtering-cell--selected{color:var(--header-selected-text-color);background:var(--header-selected-background)}.igx-grid__filtering-cell--selected igx-chips-area{background:inherit}.igx-grid__filtering-cell-indicator{display:flex;align-items:center;position:relative}.igx-grid__filtering-cell-indicator igx-icon,.igx-grid__filtering-cell-indicator .igx-badge{cursor:pointer}.igx-grid__filtering-cell-indicator .igx-badge{position:absolute;top:-0.25rem;inset-inline-start:60%}.igx-grid__filtering-cell-indicator--hidden .igx-badge,.igx-grid__filtering-cell-indicator--hidden igx-icon{display:none}.igx-grid__filtering-dropdown-items{display:flex;align-items:center}.igx-grid__filtering-dropdown-text{margin-inline-start:1rem}.igx-grid__summaries{display:flex;overflow:hidden;outline-style:none;background-color:var(--igx-grid-summary-background-color, var(--ig-grid-summary-background-color, var(--summaries-patch-background)))}.igx-grid__summaries igx-display-container{overflow:visible !important;flex:1;min-width:0}.igx-grid__summaries--body{--summaries-patch-background: var(--group-row-background);display:flex;overflow:hidden;outline-style:none;border-bottom:.0625rem dashed var(--row-border-color);background-color:var(--summaries-patch-background)}.igx-grid__summaries--body:last-of-type{border-bottom:none}.igx-grid__summaries--body .igx-grid-summary{--background-color: inherit !important;--result-color: hsla( from color(from var(--background-color) var(--y-contrast)) h 0 l / 1 ) !important}.igx-grid__summaries--body .igx-display-container{overflow:visible !important;flex:1;min-width:0}.igx-grid__summaries-patch{position:relative;background:inherit;border-inline-end:var(--ig-grid-summary-border-width, 0.0625rem) var(--ig-grid-summary-border-style, solid) var(--ig-grid-summary-border-color, var(--_grid-action-border-color, hsla(from var(--action-border-color) h s l/0.38)));z-index:1}.igx-grid__outlet{--ig-size: var(--grid-size);z-index:10002;position:fixed}.igx-grid__loading-outlet{z-index:10003}.igx-grid__row-editing-outlet{z-index:10000;position:absolute}.igx-grid__addrow-snackbar{position:absolute;bottom:1rem;inset-inline-start:50%;transform:translateX(-50%);z-index:10003}.igx-grid__icon{display:flex;align-items:center;justify-content:center}.igx-grid__column-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-grid__count-badge{display:flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:.125rem .375rem;border-radius:.625rem;font-size:.75rem;background:var(--group-count-background);color:var(--group-count-text-color)}.igx-grid__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-grid--loading{--ig-overlay-background-color: transparent}.igx-grid .igx-banner{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--ig-size-large));display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;padding-block:max(var(--is-large, 1)*max(8px, -1 * 8px)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(6px, -1 * 6px)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(4px, -1 * 4px)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(16px, -1 * 16px)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(4px, -1 * 4px)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));min-width:20rem;color:var(--ig-grid-foreground, var(--ig-surface-500-contrast));background:var(--ig-grid-background, var(--ig-surface-500));border-radius:0}.igx-grid .igx-banner igc-icon,.igx-grid .igx-banner igx-icon,.igx-grid .igx-banner igc-button,.igx-grid .igx-banner [igxButton]{--component-size: var(--ig-size, var(--ig-size-large))}.igx-grid .igx-banner__message{display:flex;align-items:center;min-width:9.375rem;flex:1 0 0%;gap:1rem;padding:0 .5rem}.igx-grid .igx-banner__text{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);flex:1 0 0%}.igx-grid .igx-banner__border-top{box-shadow:inset 0 .0625rem 0 0 var(--row-border-color)}.igx-grid .igx-banner__border-bottom{box-shadow:inset 0 -0.0625rem 0 0 var(--row-border-color)}.igx-grid .igx-banner__actions{flex-wrap:wrap;align-self:flex-end;gap:.5rem}.igx-grid .igx-grid__tr:hover .igx-grid__td--selected:has(+.igx-grid__td--selected){border-inline-end-color:var(--cell-selected-background)}.igx-grid .igx-grid__tr--selected:hover .igx-grid__td--selected:has(+.igx-grid__td--selected){border-inline-end-color:var(--cell-selected-within-background)}.igx-grid .igx-grid__tr--selected .igx-grid__td--selected:has(+.igx-grid__td--selected){border-inline-end-color:var(--cell-selected-within-background)}.igx-grid .igx-grid__td--selected:has(+.igx-grid__td--selected){border-inline-end-color:var(--cell-selected-background)}.igx-grid-grouparea{grid-row:2;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;border-bottom:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));background:var(--grouparea-background);color:var(--grouparea-color);min-height:var(--grouparea-size);padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;z-index:2;height:100%;overflow:hidden}.igx-grid-grouparea:focus{outline-style:none}.igx-grid-grouparea .igx-chip{margin-block:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-grid-grouparea__connector{--ig-icon-size: 1rem;display:inline-flex;justify-content:center;align-items:center;margin:0 .25rem}[dir=rtl] .igx-grid-grouparea__connector{transform:scaleX(-1)}.igx-grid-th{position:relative;display:flex;flex:1 1 0%;color:inherit;text-align:start;background-clip:padding-box !important;line-height:1rem;flex-flow:row nowrap;justify-content:space-between;align-items:flex-end;min-width:0;min-height:var(--header-size);padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;font-size:.75rem;font-weight:600;border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));overflow:hidden;transition:color 120ms ease-in-out;outline-style:none}.igx-grid-th__expander{display:flex;align-items:center;justify-content:center;margin-inline-end:.5rem;cursor:pointer}.igx-grid-th__expander igx-icon{color:var(--expand-icon-color)}.igx-grid-th__expander:hover igx-icon{color:var(--expand-icon-hover-color)}.igx-grid-th__group-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-grid-th__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:3ch;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:initial;flex-grow:1;line-height:var(--header-size)}.igx-grid-th__icons{display:inline-flex;align-items:center;justify-content:flex-end;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:1.875rem;height:var(--header-size);align-self:flex-end}.igx-grid-th__icons:empty{min-width:0}.igx-grid-th__icons .igx-excel-filter__icon{position:relative;display:flex;--ig-icon-size: 0.9375rem}.igx-grid-th__icons .igx-excel-filter__icon::after{content:attr(data-sortIndex);position:absolute;top:-0.3125rem;inset-inline-end:-0.0625rem;font-size:.625rem;text-align:end;font-family:sans-serif;line-height:.625rem}.igx-grid-th__icons .igx-excel-filter__icon--filtered{display:inline-flex;color:var(--sorted-header-icon-color)}.igx-grid-th__icons .igx-excel-filter__icon--filtered:hover,.igx-grid-th__icons .igx-excel-filter__icon--filtered:focus{color:var(--sortable-header-icon-hover-color)}.igx-grid-th__resize-handle{position:absolute;width:.25rem;top:0;inset-inline-end:-0.125rem;height:100%;z-index:2}.igx-grid-th__resize-line{position:absolute;cursor:col-resize;width:.25rem;background:var(--resize-line-color);z-index:2}.igx-grid-th__resize-line::before,.igx-grid-th__resize-line::after{position:absolute;content:\"\";height:100%;width:6rem}.igx-grid-th__resize-line::before{inset-inline-end:100%}.igx-grid-th__resize-line::after{inset-inline-start:100%}.igx-grid-th__drop-indicator-left{position:absolute;width:.0625rem;height:100%;top:0;z-index:1;inset-inline-start:-0.0625rem}.igx-grid-th__drop-indicator-right{position:absolute;width:.0625rem;height:100%;top:0;z-index:1;inset-inline-end:-0.0625rem}.igx-grid-th--active::after{content:\"\";position:absolute;inset:0;width:100%;height:100%;border:var(--cell-active-border-width) var(--active-state-border-style) var(--cell-active-border-color);pointer-events:none}.igx-grid-th--active.igx-grid-th--pinned::after{inset-block-start:0;inset-inline-start:0;width:calc(100% - var(--pinned-border-width)) !important}.igx-grid-th--number{text-align:end;flex-grow:1}.igx-grid-th--number .igx-grid-th__icons{justify-content:flex-start;order:-1}.igx-grid-th--number .igx-grid-th__icons .sort-icon{order:1}.igx-grid-th--collapsible{justify-content:normal}.igx-grid-th--sortable :where(.sort-icon){display:flex;align-items:center;cursor:pointer;position:relative;opacity:.7}.igx-grid-th--sortable :where(.sort-icon):is(:hover){opacity:1}.igx-grid-th--sortable :where(.sort-icon)::after{content:attr(data-sortIndex);position:absolute;top:-0.3125rem;inset-inline-end:-0.0625rem;font-size:.625rem;text-align:end;font-family:sans-serif;line-height:.625rem}.igx-grid-th--sorted :where(.sort-icon){opacity:1;color:var(--sorted-header-icon-color)}.igx-grid-th--sorted :where(.sort-icon):is(:hover,:focus){color:var(--sortable-header-icon-hover-color)}.igx-grid-th--selectable{color:var(--header-selected-text-color);background:var(--header-selected-background)}.igx-grid-th--filtrable :where(.igx-grid-th__title){opacity:.7}.igx-grid-th--pinned{position:relative;background:inherit}.igx-grid-th--pinned::after{width:calc(100% - 0.0625rem) !important}.igx-grid-th--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style)}.igx-grid-th--pinned-first:dir(ltr){border-inline-start-color:var(--pinned-border-color);border-inline-end:none}.igx-grid-th--pinned-first:dir(rtl){border-inline-end-color:var(--pinned-border-color);border-inline-start:none}.igx-grid-th--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-th--pinned-last:dir(ltr){border-inline-end-color:var(--header-border-color);border-inline-end-width:var(--pinned-border-width);border-inline-end-style:var(--pinned-border-style)}.igx-grid-th--pinned-last:dir(rtl){border-inline-start-color:var(--header-border-color);border-inline-start-width:var(--pinned-border-width);border-inline-start-style:var(--pinned-border-style)}.igx-grid-th--selected{color:var(--header-selected-text-color);background:var(--header-selected-background)}.igx-grid-th--selected :where(.sort-icon::after){background:var(--header-selected-background)}.igx-grid-th--fw{flex-grow:0;outline-style:none}.igx-grid-th--filtering{background:var(--filtering-header-background);color:var(--filtering-header-text-color);z-index:3}.igx-grid-th--filtrable.igx-grid-th--sortable :where(.sort-icon){cursor:pointer;opacity:.7}.igx-grid-th--filtrable.igx-grid-th--sortable :where(.sort-icon) :is(:hover){opacity:1}.igx-grid-th--selectable.igx-grid-th--sorted :where(.sort-icon){color:var(--header-selected-text-color)}.igx-grid-th--selectable.igx-grid-th--sorted :where(.sort-icon) :is(:hover,:focus){color:var(--header-selected-text-color)}.igx-grid-th--selected.igx-grid-th--sorted :where(.sort-icon){color:var(--header-selected-text-color)}.igx-grid-th--selected.igx-grid-th--sorted :where(.sort-icon) :is(:hover,:focus){color:var(--header-selected-text-color)}.igx-grid-th__drop-indicator--active.igx-grid-th__drop-indicator-left,.igx-grid-th__drop-indicator--active.igx-grid-th__drop-indicator-right{border-inline-end:.0625rem solid var(--drop-indicator-color)}.igx-grid-th__drop-indicator--active::after,.igx-grid-th__drop-indicator--active::before{position:absolute;content:\"\";width:0;height:0;border-style:solid;inset-inline-start:-0.1875rem}.igx-grid-th__drop-indicator--active::before{bottom:0;border-width:0 .25rem .25rem;border-color:rgba(0,0,0,0) rgba(0,0,0,0) var(--drop-indicator-color)}.igx-grid-th__drop-indicator--active::after{top:0;border-width:.25rem .25rem 0;border-color:var(--drop-indicator-color) rgba(0,0,0,0) rgba(0,0,0,0)}.igx-grid-thead{grid-row:3;display:flex;overflow:hidden;background:var(--header-background);color:var(--header-text-color)}.igx-grid-thead .igx-grid__tr{position:relative;background:inherit;color:inherit;z-index:2}.igx-grid-thead .igx-grid__tr:hover{background:inherit;color:inherit}.igx-grid-thead__wrapper{position:relative;display:flex;background:var(--header-background);color:var(--header-text-color);overflow:hidden;outline-style:none;z-index:2;border-bottom:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead__wrapper .igx-grid__tr{border-bottom:none}.igx-grid-thead__wrapper .igx-grid__tr:hover{background:inherit;color:inherit}.igx-grid-thead__wrapper .igx-grid__tr-action:last-of-type{border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead__wrapper .igx-grid__cbx-selection--push{align-items:flex-start;padding-block-start:max(var(--is-large, 1)*max(0.9375rem, -1 * 0.9375rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-grid-thead__wrapper>[aria-activedescendant]{outline-style:none}.igx-grid-thead__wrapper:focus{outline:0}.igx-grid-thead__wrapper--pivot{border-block-end:none !important}.igx-grid-thead__title{flex-basis:auto !important;align-items:center !important;border-block-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));height:var(--header-size)}.igx-grid-thead__group{display:flex;flex-flow:row nowrap}.igx-grid-thead__subgroup{position:relative}.igx-grid-thead__subgroup.igx-grid-thead__item.igx-grid-th--active::after{height:100%}.igx-grid-thead__item{display:flex;flex-flow:column nowrap;position:relative}.igx-grid-thead__item :where(.igx-grid-th,.igx-grid-thead__group){flex:1 1 auto}.igx-grid-thead__item :where(.igx-grid-thead__title){flex:0 0 auto}.igx-grid-thead__thumb{background:var(--header-background);border-block-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));border-inline-start:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead--pivot{display:flex}.igx-grid-thead--pivot .igx-grid-thead--virtualizationWrapper{border-inline-start:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead--pivot .igx-grid-thead__wrapper{border-block-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead--virtualizationWrapper{height:100%}.igx-grid-thead--virtualizationContainer{height:100%;overflow:visible}.igx-grid-thead--virtualizationContainer .igx-grid__tr-pivot--columnDimensionLeaf::after{display:none}.igx-grid-thead .igx-grid__group-expand-btn{color:var(--expand-all-icon-color)}.igx-grid-thead .igx-grid__group-expand-btn:hover,.igx-grid-thead .igx-grid__group-expand-btn:focus{color:var(--expand-all-icon-hover-color)}.igx-drop-area{display:flex;align-items:center;justify-content:flex-start;min-width:5rem;width:100%;height:max(var(--is-large, 1)*max(2rem, -1 * 2rem),var(--is-medium, 1)*max(1.5rem, -1 * 1.5rem),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem));padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));flex:1 0 0%;background:var(--drop-area-background);border-radius:var(--drop-area-border-radius)}.igx-drop-area:hover{background:var(--drop-area-on-drop-background)}.igx-drop-area__icon{--ig-icon-size: rem(16px);color:var(--drop-area-icon-color);margin-inline-end:.5rem}.igx-drop-area__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--drop-area-text-color);font-size:.8125rem}.igx-group-label{display:flex;align-items:center;justify-content:flex-start;line-height:1rem;gap:.25rem}.igx-group-label__text{color:var(--group-label-text);font-size:calc(var(--_grid-head-font-size) + 0.0625rem)}.igx-group-label__icon{--component-size: 1;color:var(--group-label-icon);-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-group-label__column-name{font-weight:600;font-size:var(--_grid-head-font-size);color:var(--group-label-column-name-text)}.igx-group-label__count-badge{--ig-badge-background-color: var(--group-count-background);--ig-badge-text-color: var(--group-count-text-color)}.igx-group-label__count-badge>span{font-size:var(--_grid-head-font-size)}.igx-advanced-filter .igx-excel-filter__secondary-footer{--ig-size: 2;display:flex;justify-content:space-between;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block-end:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-advanced-filter .igx-excel-filter__secondary-footer .igx-excel-filter__clear{flex-grow:1}.igx-advanced-filter .igx-excel-filter__secondary-footer .igx-excel-filter__apply,.igx-advanced-filter .igx-excel-filter__secondary-footer .igx-excel-filter__cancel{flex-grow:0}.igx-advanced-filter .igx-excel-filter__cancel+.igx-excel-filter__apply{margin-inline-start:1rem}igx-pivot-row-dimension-header.igx-grid-th{align-items:center}igx-pivot-row-dimension-header-group::after{height:100% !important}igx-pivot-row-header-group::after{inset-inline-start:calc(var(--header-border-width)*-1) !important;width:100% !important;height:100% !important}igx-pivot-row-header-group igx-pivot-row-dimension-header.igx-grid-th .igx-grid-th__icons{align-self:center}igx-pivot-row-header-group igx-pivot-row-dimension-header .igx-grid-th__icons{padding-inline-end:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}igx-pivot-row-header-group:only-child igx-pivot-row-dimension-header.igx-grid-th,igx-pivot-row-header-group:last-child igx-pivot-row-dimension-header.igx-grid-th{border-inline-end:0 !important}.igx-pivot-grid-row-filler__wrapper .igx-grid-thead__wrapper{height:100%}.igx-pivot-grid-row-filler__wrapper .igx-grid-thead__wrapper .igx-grid-th{height:100%}.igx-grid-thead .igx-grid__header-indentation igx-icon{--component-size: 3}.igx-grid-thead .igx-grid__drag-indicator{cursor:default}.igx-grid-thead .igx-grid__tr--mrl .igx-grid__hierarchical-expander--header,.igx-grid-thead .igx-grid__tr--mrl .igx-grid__hierarchical-expander,.igx-grid-thead .igx-grid__tr--mrl .igx-grid__row-indentation,.igx-grid-thead .igx-grid__tr--mrl .igx-grid__cbx-selection{border-bottom:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead:focus-visible{outline-color:rgba(0,0,0,0)}.igx-grid__mrl-block .igx-grid-thead__item{display:flex}.igx-grid__mrl-block .igx-grid-thead__title{border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38)) !important;border-block-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid__mrl-block .igx-grid-th{border-block-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid__mrl-block .igx-grid-thead__subgroup:only-child .igx-grid-th,.igx-grid__mrl-block .igx-grid-thead__subgroup:last-child .igx-grid-th{border-block-end:0}.igx-grid__mrl-block.igx-grid__tbody-pivot-dimension .igx-grid-th{border-block-end:0}.igx-grid__tr--odd.igx-grid__tr--mrl .igx-grid__td{--body-column-border-color-odd: var(--row-border-color);border-block-end:.0625rem solid var(--row-border-color)}.igx-grid__tr--even.igx-grid__tr--mrl .igx-grid__td{--body-column-border-color-even: var(--row-border-color);border-block-end:.0625rem solid var(--row-border-color)}.igx-grid__tr--mrl .igx-grid__cbx-selection,.igx-grid__tr--mrl .igx-grid__hierarchical-expander,.igx-grid__tr--mrl .igx-grid__row-indentation,.igx-grid__tr--mrl .igx-grid__drag-indicator{border-bottom:.0625rem solid var(--row-border-color)}.igx-grid__tr--mrl{background-clip:padding-box !important}.igx-grid .igx-checkbox{min-width:1.25rem}.igx-grid .igx-checkbox .igx-checkbox__composite-wrapper{width:var(--cbx-size, 1.25rem);height:var(--cbx-size, 1.25rem);padding:0 !important}.igx-grid .igx-checkbox .igx-checkbox__label{margin-inline-start:.75rem}.igx-grid .igx-checkbox .igx-checkbox__label--before{margin-inline-end:.75rem}.igx-grid .igx-checkbox .igx-checkbox__label:empty,.igx-grid .igx-checkbox .igx-checkbox__label--before:empty{padding:0;margin:0}.igx-grid-thead__item.igx-grid-th--active::after{width:calc(100% - var(--header-border-width))}.igx-grid__row-indentation--level-1{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(1.5rem + var(--_expander-icon-width)), -1 * calc(1.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(1rem + var(--_expander-icon-width)), -1 * calc(1rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(0.75rem + var(--_expander-icon-width)), -1 * calc(0.75rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-2{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(3rem + var(--_expander-icon-width)), -1 * calc(3rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(2rem + var(--_expander-icon-width)), -1 * calc(2rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(1.5rem + var(--_expander-icon-width)), -1 * calc(1.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-3{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(4.5rem + var(--_expander-icon-width)), -1 * calc(4.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(3rem + var(--_expander-icon-width)), -1 * calc(3rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(2.25rem + var(--_expander-icon-width)), -1 * calc(2.25rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-4{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(6rem + var(--_expander-icon-width)), -1 * calc(6rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(4rem + var(--_expander-icon-width)), -1 * calc(4rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(3rem + var(--_expander-icon-width)), -1 * calc(3rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-5{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(7.5rem + var(--_expander-icon-width)), -1 * calc(7.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(5rem + var(--_expander-icon-width)), -1 * calc(5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(3.75rem + var(--_expander-icon-width)), -1 * calc(3.75rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-6{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(9rem + var(--_expander-icon-width)), -1 * calc(9rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(6rem + var(--_expander-icon-width)), -1 * calc(6rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(4.5rem + var(--_expander-icon-width)), -1 * calc(4.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-7{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(10.5rem + var(--_expander-icon-width)), -1 * calc(10.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(7rem + var(--_expander-icon-width)), -1 * calc(7rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(5.25rem + var(--_expander-icon-width)), -1 * calc(5.25rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-8{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(12rem + var(--_expander-icon-width)), -1 * calc(12rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(8rem + var(--_expander-icon-width)), -1 * calc(8rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(6rem + var(--_expander-icon-width)), -1 * calc(6rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-9{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(13.5rem + var(--_expander-icon-width)), -1 * calc(13.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(9rem + var(--_expander-icon-width)), -1 * calc(9rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(6.75rem + var(--_expander-icon-width)), -1 * calc(6.75rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-10{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(15rem + var(--_expander-icon-width)), -1 * calc(15rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(10rem + var(--_expander-icon-width)), -1 * calc(10rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(7.5rem + var(--_expander-icon-width)), -1 * calc(7.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}}@layer ig.material{@container style(--ig-theme: material){.igx-grid{--ig-chip-disabled-text-color: var(--ig-gray-500);--ig-chip-disabled-background: var(--ig-gray-300);--ig-chip-disabled-border-color: var(--ig-gray-300)}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group igx-prefix,.igx-grid__filtering-row .igx-input-group igx-suffix{align-items:center;background:rgba(0,0,0,0) !important;border-radius:0 !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end:hover,.igx-grid__filtering-row .igx-input-group igx-prefix:hover,.igx-grid__filtering-row .igx-input-group igx-suffix:hover{background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group .igx-input-group__input{border:0 !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__input:hover{border:0 !important;box-shadow:none !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle::after,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle::before{display:none !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-main{padding-inline-start:0 !important;margin:0 !important;border:0 !important;outline:none !important;box-shadow:none !important;background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group{border:.0625rem solid var(--ig-gray-300) !important}.igx-grid__filtering-row .igx-input-group:hover{border-color:var(--ig-primary-500) !important}.igx-grid__filtering-row .igx-input-group--focused{border-color:var(--ig-primary-500) !important;border-width:.0625rem !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__input{border:0 !important;box-shadow:none !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-main,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end{margin:0 !important;border:0 !important;outline:none !important;box-shadow:none !important;background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group--focused igx-prefix,.igx-grid__filtering-row .igx-input-group--focused igx-suffix{background:rgba(0,0,0,0) !important;border-radius:0 !important}.igx-grid__filtering-row .igx-input-group__line{display:none !important}.igx-grid__filtering-row igx-prefix:focus{color:var(--ig-secondary-500) !important}.igx-grid__filtering-row igx-suffix igx-icon{outline-style:none !important}.igx-grid__filtering-row igx-suffix igx-icon:focus{color:var(--ig-secondary-500) !important}.igx-grid__filtering-row igx-suffix igx-icon+igx-icon{margin-inline-start:.25rem !important}.igx-grid__filtering-row igx-prefix,.igx-grid__filtering-row igx-suffix{padding:0 max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)) !important}}}@layer ig.material{@container style(--ig-theme: material){.igx-grid-th__title{font-weight:600}.igx-grid-th__icons .igx-excel-filter__icon--filtered,.igx-grid-th__icons .sort-icon{--ig-icon-size: 0.9375rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group igx-prefix,.igx-grid__filtering-row .igx-input-group igx-suffix{align-items:center;background:rgba(0,0,0,0) !important;border-radius:0 !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end:hover,.igx-grid__filtering-row .igx-input-group igx-prefix:hover,.igx-grid__filtering-row .igx-input-group igx-suffix:hover{background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group .igx-input-group__input{border:0 !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__input:hover{border:0 !important;box-shadow:none !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle::after,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle::before{display:none !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-main{padding-inline-start:0 !important;margin:0 !important;border:0 !important;outline:none !important;box-shadow:none !important;background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group{border:.0625rem solid var(--ig-gray-300) !important}.igx-grid__filtering-row .igx-input-group:hover{border-color:var(--ig-primary-500) !important}.igx-grid__filtering-row .igx-input-group--focused{border-color:var(--ig-primary-500) !important;border-width:.0625rem !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__input{border:0 !important;box-shadow:none !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-main,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end{margin:0 !important;border:0 !important;outline:none !important;box-shadow:none !important;background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group--focused igx-prefix,.igx-grid__filtering-row .igx-input-group--focused igx-suffix{background:rgba(0,0,0,0) !important;border-radius:0 !important}.igx-grid__filtering-row .igx-input-group__line{display:none !important}.igx-grid__filtering-row igx-prefix:focus{color:var(--ig-secondary-500) !important}.igx-grid__filtering-row igx-suffix igx-icon{outline-style:none !important}.igx-grid__filtering-row igx-suffix igx-icon:focus{color:var(--ig-secondary-500) !important}.igx-grid__filtering-row igx-suffix igx-icon+igx-icon{margin-inline-start:.25rem !important}.igx-grid__filtering-row igx-prefix,.igx-grid__filtering-row igx-suffix{padding:0 max(var(--is-large, 1)*max(0.875rem, -1 * 0.875rem),var(--is-medium, 1)*max(0.625rem, -1 * 0.625rem),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)) !important}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-grid-th__title{font-weight:700}.igx-grid-th__icons .igx-excel-filter__icon--filtered,.igx-grid-th__icons .sort-icon{--ig-icon-size: 0.9375rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-grid{box-shadow:0 0 0 .0625rem var(--grid-border-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-grid-th__title{font-weight:800}.igx-grid-th__icons .igx-excel-filter__icon--filtered,.igx-grid-th__icons .sort-icon{--ig-icon-size: 0.9375rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid{--cell-height: max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem));--header-size: max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem));--grouparea-size: max(var(--is-large, 1) * max(3.4375rem, -1 * 3.4375rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem));--_expander-icon-width: 1rem;--_hierarchical-action-icon: 1rem;--ig-chip-disabled-text-color: var(--ig-gray-500);--ig-chip-disabled-background: var(--ig-gray-200);--ig-chip-disabled-border-color: var(--ig-gray-300);--_grid-header-border-color: var(--header-border-color);--_grid-action-border-color: var(--action-border-color)}.igx-grid__filtering-row-main igx-chips-area{margin-inline:.75rem;gap:.25rem}.igx-grid__filtering-row igx-input-group{--size: calc(sizable(rem(32px), rem(40px), rem(48px)) - 0.5rem)}.igx-grid__filtering-cell{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))) !important}.igx-grid__td:not(.igx-grid__td--editing){padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));font-family:var(--ig-detail-1-font-family, var(--ig-font-family));font-size:var(--ig-detail-1-font-size);font-weight:var(--ig-detail-1-font-weight);font-style:var(--ig-detail-1-font-style);line-height:var(--ig-detail-1-line-height);letter-spacing:var(--ig-detail-1-letter-spacing);text-transform:var(--ig-detail-1-text-transform);margin-top:var(--ig-detail-1-margin-top);margin-bottom:var(--ig-detail-1-margin-bottom)}.igx-grid__td--bool{--component-size: 2}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-500)}.igx-grid__tr--edited::before{width:.25rem}.igx-grid__tr--header igx-icon{--component-size: 2}.igx-grid__tr-action:last-of-type{min-height:max(var(--is-large, 1)*max(3rem, -1 * 3rem),var(--is-medium, 1)*max(2.5rem, -1 * 2.5rem),var(--is-small, 1)*max(2rem, -1 * 2rem))}.igx-grid__tree-grouping-indicator{margin-inline-end:.25rem}.igx-grid__tree-grouping-indicator igx-icon{--component-size: 2}.igx-grid__hierarchical-expander igx-icon{--component-size: 2}.igx-grid__header-indentation igx-icon{--component-size: 2}.igx-grid__group-content{padding-inline-start:0}.igx-grid__grouping-indicator{padding-inline-end:1rem}.igx-grid__grouping-indicator igx-icon{--component-size: 2}.igx-grid__tr-pivot{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-th{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}.igx-grid-th__expander{--component-size: 2}.igx-grid-th__icons .igx-excel-filter__icon{--ig-icon-size: 0.75rem}.igx-grid-th--filtrable :where(.igx-grid-th__title){opacity:.75}.igx-grid-th--sortable .igx-grid-th__icons .sort-icon{opacity:.75}.igx-grid-th--filtrable.igx-grid-th--sortable :where(.sort-icon){opacity:1}.igx-grid-th__icons .igx-excel-filter__icon--filtered igx-icon,.igx-grid-th__icons .sort-icon igx-icon{--component-size: 2}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-thead__title{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-drop-area{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}}}@layer ig.indigo{@container style(--ig-theme: indigo){igx-icon.igx-group-label__icon{--component-size: 2}.igx-group-label__count-badge{--shadow: none}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-grid-th--sortable .igx-grid-th__icons .sort-icon{opacity:.75}.igx-grid-th--sortable .igx-grid-th__icons .sort-icon:hover{opacity:1}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-grid__pivot-empty-chip-area{color:var(--ig-gray-600)}.igx-grid__tr-header-row igx-pivot-row-dimension-header-group igx-icon{opacity:.75}.igx-grid__tr-header-row igx-pivot-row-dimension-header-group igx-icon:hover{opacity:1;cursor:pointer}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-grid-thead__title igx-icon{opacity:.75}.igx-grid-thead__title igx-icon:hover{opacity:1;cursor:pointer}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: dark){.igx-grid{--ig-chip-disabled-text-color: var(--ig-gray-300);--ig-chip-disabled-background: var(--ig-gray-200);--ig-chip-disabled-border-color: var(--ig-gray-200)}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-500)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-grid{--ig-chip-disabled-text-color: var(--ig-gray-400);--ig-chip-disabled-background: var(--ig-gray-200);--ig-chip-disabled-border-color: var(--ig-gray-200)}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-500)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-grid{--ig-chip-disabled-text-color: var(--ig-gray-400);--ig-chip-disabled-background: var(--ig-gray-200);--ig-chip-disabled-border-color: var(--ig-gray-200)}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-500)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-grid-th--sortable .igx-grid-th__icons .sort-icon{opacity:.85}.igx-grid-th--filtrable :where(.igx-grid-th__title){opacity:.85}.igx-grid-th--fw igx-icon{--component-size: 3}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-grid{--ig-chip-disabled-text-color: var(--ig-gray-300);--ig-chip-disabled-background: var(--ig-gray-200);--ig-chip-disabled-border-color: var(--ig-gray-200)}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-500)}.igx-grid__pivot-empty-chip-area{color:hsl(from var(--ig-gray-50-contrast) h s l/0.6)}.igx-grid__tr-header-row igx-pivot-row-dimension-header-group igx-icon{opacity:.85}.igx-grid__tr-header-row igx-pivot-row-dimension-header-group igx-icon:hover{opacity:1;cursor:pointer}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-grid-thead__title igx-icon{opacity:.85}.igx-grid-thead__title igx-icon:hover{opacity:1;cursor:pointer}}}";
+const GRID_BASE_CSS = "@layer ig.base{.igx-grid-thead__title,.igx-grid__td{position:relative;display:flex;flex:1 1 0%;align-items:center;outline-style:none;color:inherit;text-align:start;min-height:var(--cell-height);padding-block:0;background-clip:padding-box !important;font-size:.8125rem;line-height:1rem;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid-thead__title{flex-flow:row nowrap;justify-content:space-between;align-items:flex-end;min-width:0;min-height:var(--header-size);padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;font-size:var(--_grid-head-font-size);font-weight:600;border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));overflow:hidden;transition:color 120ms ease-in-out;outline-style:none}.igx-grid__td>igx-input-group,.igx-grid__td>igx-combo,.igx-grid__td>igx-simple-combo,.igx-grid__td>igx-select,.igx-grid__td>igx-date-picker,.igx-grid__td>igx-time-picker{position:relative;height:auto;width:100% !important;overflow:hidden;z-index:0}.igx-grid__td>igx-combo igx-input-group,.igx-grid__td>igx-simple-combo igx-input-group,.igx-grid__td>igx-select igx-input-group,.igx-grid__td>igx-date-picker igx-input-group,.igx-grid__td>igx-time-picker igx-input-group,.igx-grid__td>igx-input-group{--_bundle-row: 1}.igx-grid__td>igx-combo igx-input-group input,.igx-grid__td>igx-combo igx-input-group .igx-input-group__input,.igx-grid__td>igx-simple-combo igx-input-group input,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__input,.igx-grid__td>igx-select igx-input-group input,.igx-grid__td>igx-select igx-input-group .igx-input-group__input,.igx-grid__td>igx-date-picker igx-input-group input,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__input,.igx-grid__td>igx-time-picker igx-input-group input,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__input,.igx-grid__td>igx-input-group input,.igx-grid__td>igx-input-group .igx-input-group__input{height:100%;font-size:.8125rem !important;color:var(--cell-editing-foreground)}.igx-grid__td>igx-combo igx-input-group input,.igx-grid__td>igx-combo igx-input-group .igx-input-group__input:focus,.igx-grid__td>igx-simple-combo igx-input-group input,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__input:focus,.igx-grid__td>igx-select igx-input-group input,.igx-grid__td>igx-select igx-input-group .igx-input-group__input:focus,.igx-grid__td>igx-date-picker igx-input-group input,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__input:focus,.igx-grid__td>igx-time-picker igx-input-group input,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__input:focus,.igx-grid__td>igx-input-group input,.igx-grid__td>igx-input-group .igx-input-group__input:focus{color:var(--cell-editing-focus-foreground)}.igx-grid__td>igx-combo igx-input-group .igx-input-group__bundle,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__bundle,.igx-grid__td>igx-select igx-input-group .igx-input-group__bundle,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__bundle,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__bundle,.igx-grid__td>igx-input-group .igx-input-group__bundle{background:rgba(0,0,0,0) !important;height:100% !important;min-height:100% !important;border:none !important}.igx-grid__td>igx-combo igx-input-group .igx-input-group__bundle .igx-input-group__filler,.igx-grid__td>igx-combo igx-input-group .igx-input-group__bundle .igx-input-group__notch,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__bundle .igx-input-group__filler,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__bundle .igx-input-group__notch,.igx-grid__td>igx-select igx-input-group .igx-input-group__bundle .igx-input-group__filler,.igx-grid__td>igx-select igx-input-group .igx-input-group__bundle .igx-input-group__notch,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__bundle .igx-input-group__filler,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__bundle .igx-input-group__notch,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__bundle .igx-input-group__filler,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__bundle .igx-input-group__notch,.igx-grid__td>igx-input-group .igx-input-group__bundle .igx-input-group__filler,.igx-grid__td>igx-input-group .igx-input-group__bundle .igx-input-group__notch{border:none !important}.igx-grid__td>igx-combo igx-input-group .igx-input-group__bundle::before,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__bundle::before,.igx-grid__td>igx-select igx-input-group .igx-input-group__bundle::before,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__bundle::before,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__bundle::before,.igx-grid__td>igx-input-group .igx-input-group__bundle::before{content:none !important}.igx-grid__td>igx-combo igx-input-group .igx-input-group__bundle::after,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__bundle::after,.igx-grid__td>igx-select igx-input-group .igx-input-group__bundle::after,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__bundle::after,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__bundle::after,.igx-grid__td>igx-input-group .igx-input-group__bundle::after{display:none}.igx-grid__td>igx-combo igx-input-group .igx-input-group__bundle-main,.igx-grid__td>igx-combo igx-input-group .igx-input-group__bundle-start,.igx-grid__td>igx-combo igx-input-group .igx-input-group__bundle-end,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__bundle-main,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__bundle-start,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__bundle-end,.igx-grid__td>igx-select igx-input-group .igx-input-group__bundle-main,.igx-grid__td>igx-select igx-input-group .igx-input-group__bundle-start,.igx-grid__td>igx-select igx-input-group .igx-input-group__bundle-end,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__bundle-main,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__bundle-start,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__bundle-end,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__bundle-main,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__bundle-start,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__bundle-end,.igx-grid__td>igx-input-group .igx-input-group__bundle-main,.igx-grid__td>igx-input-group .igx-input-group__bundle-start,.igx-grid__td>igx-input-group .igx-input-group__bundle-end{height:auto;border:none !important;border-radius:0 !important;box-shadow:none !important}.igx-grid__td>igx-combo igx-input-group .igx-input-group__bundle-main,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__bundle-main,.igx-grid__td>igx-select igx-input-group .igx-input-group__bundle-main,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__bundle-main,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__bundle-main,.igx-grid__td>igx-input-group .igx-input-group__bundle-main{padding:0}.igx-grid__td>igx-combo igx-input-group .igx-input-group__line,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__line,.igx-grid__td>igx-select igx-input-group .igx-input-group__line,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__line,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__line,.igx-grid__td>igx-input-group .igx-input-group__line{display:none}.igx-grid__td>igx-combo igx-input-group igx-prefix,.igx-grid__td>igx-combo igx-input-group igx-suffix,.igx-grid__td>igx-simple-combo igx-input-group igx-prefix,.igx-grid__td>igx-simple-combo igx-input-group igx-suffix,.igx-grid__td>igx-select igx-input-group igx-prefix,.igx-grid__td>igx-select igx-input-group igx-suffix,.igx-grid__td>igx-date-picker igx-input-group igx-prefix,.igx-grid__td>igx-date-picker igx-input-group igx-suffix,.igx-grid__td>igx-time-picker igx-input-group igx-prefix,.igx-grid__td>igx-time-picker igx-input-group igx-suffix,.igx-grid__td>igx-input-group igx-prefix,.igx-grid__td>igx-input-group igx-suffix{background:inherit !important;border-radius:0 !important;padding-top:0 !important;padding-bottom:0 !important;border:none !important;padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)) !important}.igx-grid__td>igx-combo igx-input-group .igx-input-group__input,.igx-grid__td>igx-combo igx-input-group .igx-input-group__file-input,.igx-grid__td>igx-combo igx-input-group .igx-input-group__textarea,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__input,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__file-input,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__textarea,.igx-grid__td>igx-select igx-input-group .igx-input-group__input,.igx-grid__td>igx-select igx-input-group .igx-input-group__file-input,.igx-grid__td>igx-select igx-input-group .igx-input-group__textarea,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__input,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__file-input,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__textarea,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__input,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__file-input,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__textarea,.igx-grid__td>igx-input-group .igx-input-group__input,.igx-grid__td>igx-input-group .igx-input-group__file-input,.igx-grid__td>igx-input-group .igx-input-group__textarea{box-shadow:none !important;border:none !important}.igx-grid__td>igx-combo igx-input-group .igx-input-group--disabled,.igx-grid__td>igx-combo igx-input-group .igx-input-group--disabled igx-prefix,.igx-grid__td>igx-combo igx-input-group .igx-input-group--disabled igx-suffix,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group--disabled,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group--disabled igx-prefix,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group--disabled igx-suffix,.igx-grid__td>igx-select igx-input-group .igx-input-group--disabled,.igx-grid__td>igx-select igx-input-group .igx-input-group--disabled igx-prefix,.igx-grid__td>igx-select igx-input-group .igx-input-group--disabled igx-suffix,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group--disabled,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group--disabled igx-prefix,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group--disabled igx-suffix,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group--disabled,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group--disabled igx-prefix,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group--disabled igx-suffix,.igx-grid__td>igx-input-group .igx-input-group--disabled,.igx-grid__td>igx-input-group .igx-input-group--disabled igx-prefix,.igx-grid__td>igx-input-group .igx-input-group--disabled igx-suffix{color:var(--cell-disabled-color)}.igx-grid__td>igx-combo igx-input-group .igx-input-group__toggle-button,.igx-grid__td>igx-simple-combo igx-input-group .igx-input-group__toggle-button,.igx-grid__td>igx-select igx-input-group .igx-input-group__toggle-button,.igx-grid__td>igx-date-picker igx-input-group .igx-input-group__toggle-button,.igx-grid__td>igx-time-picker igx-input-group .igx-input-group__toggle-button,.igx-grid__td>igx-input-group .igx-input-group__toggle-button{margin:0 !important}.igx-grid__td>igx-select igx-input-group,.igx-grid__td>igx-combo igx-input-group,.igx-grid__td>igx-simple-combo igx-input-group,.igx-grid__td>igx-time-picker igx-input-group,.igx-grid__td>igx-date-picker igx-input-group{height:100%}.igx-grid__td>igx-date-range-picker{height:100%}.igx-grid__td>.igx-input-group--indigo .igx-input-group__bundle:hover,.igx-grid__td>.igx-input-group--indigo .igx-input-group__bundle:focus{background:rgba(0,0,0,0)}.igx-grid__td>.igx-input-group--indigo{padding-inline:max(var(--is-large, 1)*max(0.75rem, -1 * 0.75rem),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)) !important}.igx-grid__td>.igx-input-group--indigo igx-prefix{padding-inline-start:0 !important}.igx-grid__td>.igx-input-group--indigo igx-suffix{padding-inline-end:0 !important}.igx-grid__td>igx-input-group .igx-input-group__input{padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)) !important}.igx-grid__td>igx-time-picker [igxLabel]{display:none}.igx-grid__td>input{margin:0 auto;max-width:100%}.igx-grid{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--ig-size-large));--grid-size: var(--component-size);--_expander-icon-width: 1.5rem;--_hierarchical-action-icon: 1.5rem;--_hierarchical-indent-small: 0.75rem;--_hierarchical-indent-medium: 1rem;--_hierarchical-indent-large: 1.5rem;--cell-height: max(var(--is-large, 1) * max(3.125rem, -1 * 3.125rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem));--header-size: max(var(--is-large, 1) * max(3.125rem, -1 * 3.125rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem));--grouparea-size: max(var(--is-large, 1) * max(3.5625rem, -1 * 3.5625rem), var(--is-medium, 1) * max(3.0625rem, -1 * 3.0625rem), var(--is-small, 1) * max(2.5625rem, -1 * 2.5625rem));--ig-tree-indent-size: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));--_grid-head-font-size: 0.75rem;position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto auto;grid-template-columns:100%;overflow:hidden;box-shadow:0 0 0 .0625rem var(--grid-border-color),var(--grid-elevation);outline-style:none;z-index:1}.igx-grid__caption{display:flex;align-items:center;font-size:1.25rem;line-height:2rem;padding:1rem 1.5rem;grid-row:1}.igx-grid__tbody{position:relative;display:flex;grid-row:4;overflow:hidden}.igx-grid__tbody-content{position:relative;background:var(--content-background);color:var(--content-text-color);overflow:hidden;z-index:1;outline-style:none}.igx-grid__tbody-content:focus{outline:0}.igx-grid__tbody-message{display:flex;justify-content:center;align-items:center;height:100%;color:var(--content-text-color);flex-direction:column;padding:1.5rem}.igx-grid__loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:6.25rem}.igx-grid__tbody-scrollbar{background:var(--content-background);border-inline-start:.0625rem solid var(--row-border-color);position:relative}.igx-grid__tbody-scrollbar-main{position:relative}.igx-grid__tbody-scrollbar-start{background:var(--content-background)}.igx-grid__tbody-scrollbar-end{background:var(--header-background)}.igx-grid__scroll{grid-row:6;display:flex;flex-flow:row nowrap;width:100%;background:var(--_grid-background, var(--content-background));z-index:10001}.igx-grid__scroll-start{background:var(--_grid-background, var(--content-background))}.igx-grid__scroll-start--column-selection{border-inline-end:var(--row-border-width) solid var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid__scroll-start--pinned{border-inline-end:.125rem solid var(--ig-grid-summary-pinned-border-color, var(--pinned-border-color))}.igx-grid__scroll-end{background:var(--_grid-background, var(--content-background));border-inline-start:var(--pinned-border-width) solid var(--ig-grid-summary-pinned-border-color, var(--pinned-border-color))}.igx-grid__scroll-main igx-display-container{height:0}.igx-grid__tfoot{position:relative;display:flex;background:var(--header-background);color:var(--header-text-color);overflow:hidden;outline-style:none;grid-row:5;z-index:10001}.igx-grid__tfoot .igx-grid__tr{position:relative;background:inherit;color:inherit;z-index:2}.igx-grid__tfoot .igx-grid__tr:hover{background:inherit;color:inherit}.igx-grid__tfoot>[aria-activedescendant]{outline-style:none}.igx-grid__tfoot:focus{outline:0}.igx-grid__tfoot:empty{display:none}.igx-grid__tfoot-thumb{position:absolute;top:0;inset-inline-end:0;background:var(--igx-grid-summary-background-color, var(--ig-grid-summary-background-color, var(--_grid-background, var(--content-background))))}.igx-grid__footer{grid-row:7}.igx-grid__tr{position:relative;display:flex;outline-style:none;border-bottom:var(--row-border-width) var(--row-border-style) var(--row-border-color);background-clip:padding-box !important}.igx-grid__tr .igx-display-container{overflow:visible !important;flex:1 !important;min-width:0}.igx-grid__tr:hover .igx-grid__td--column-selected{color:var(--row-selected-hover-text-color);background:var(--row-selected-hover-background)}.igx-grid__tr:hover .igx-grid__td:not(.igx-grid__td--pinned-last){border-inline-end-color:var(--body-column-hover-border-color)}.igx-grid__tr:not(.igx-grid__tr--header,.igx-grid__tr--selected,.igx-grid__tr--ghost):hover{background:var(--row-hover-background);color:var(--row-hover-text-color)}.igx-grid__tr--odd{background:var(--row-odd-background);color:var(--row-odd-text-color)}.igx-grid__tr--odd .igx-grid__tr-action{border-inline-end:var(--row-border-width) var(--row-border-style) var(--_grid-action-border-color, hsla(from var(--action-border-color) h s l/0.38))}.igx-grid__tr--odd .igx-grid__td:not(.igx-grid__td--pinned-last){border-inline-end:var(--header-border-width) solid var(--body-column-border-color-odd)}.igx-grid__tr--even{background:var(--row-even-background);color:var(--row-even-text-color)}.igx-grid__tr--even .igx-grid__td:not(.igx-grid__td--pinned-last){border-inline-end:var(--header-border-width) solid var(--body-column-border-color-even)}.igx-grid__tr--even .igx-grid__tr-action{border-inline-end:var(--row-border-width) var(--row-border-style) var(--_grid-action-border-color, hsla(from var(--action-border-color) h s l/0.38))}.igx-grid__tr--selected{color:var(--row-selected-text-color);background:var(--row-selected-background)}.igx-grid__tr--selected .igx-grid__td--selected,.igx-grid__tr--selected .igx-grid__td--pinned.igx-grid__td--selected{color:var(--cell-selected-within-text-color);background:var(--cell-selected-within-background)}.igx-grid__tr--selected .igx-grid__td:not(.igx-grid__td--pinned-last){border-inline-end-color:var(--body-column-selected-border-color)}.igx-grid__tr--selected:hover{color:var(--row-selected-hover-text-color);background:var(--row-selected-hover-background)}.igx-grid__tr--selected:hover .igx-grid__td:not(.igx-grid__td--pinned-last){border-inline-end-color:var(--body-column-hover-selected-border-color)}.igx-grid__tr--deleted .igx-grid__td-text{font-style:italic;color:var(--ig-error-500);text-decoration:line-through}.igx-grid__tr--highlighted{position:relative}.igx-grid__tr--highlighted::after{content:\"\";position:absolute;top:0;inset-inline-start:0;width:.25rem;height:100%;background:var(--row-highlight);z-index:3}.igx-grid__tr--highlighted::before{inset-inline-start:.25rem}.igx-grid__tr--filtered .igx-grid__td-text{color:var(--tree-filtered-text-color)}.igx-grid__tr--selected.igx-grid__tr--filtered .igx-grid__td-text{color:var(--tree-selected-filtered-row-text-color)}.igx-grid__tr--expanded{border-bottom:none}.igx-grid__tr--pinned{position:relative;background:inherit;z-index:10000}.igx-grid__tr--pinned-top{border-bottom:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color) !important}.igx-grid__tr--pinned-bottom{border-top:.125rem solid var(--pinned-border-color) !important;position:absolute;bottom:0}.igx-grid__tr--merged{border-block-end:0}.igx-grid__tr--merged-top{position:absolute;width:100%}.igx-grid__tr--disabled .igx-grid__td-text{color:var(--cell-disabled-color)}.igx-grid__tr-header-row igx-pivot-row-header-group{padding-inline-start:max(var(--is-large, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__tr-header-row igx-pivot-row-header-group .igx-grid-th{border-block-end:0}.igx-grid__td::after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid__td--centered{justify-content:center}.igx-grid__td--image{justify-content:center}.igx-grid__td--bool{display:flex;flex-grow:1;justify-content:center}.igx-grid__td--bool>.igx-icon{--component-size: 1}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-600)}.igx-grid__td--bool-true .igx-icon--success{color:var(--ig-gray-700)}.igx-grid__td--fw:not(.igx-grid__td--bool){flex-grow:0;outline-style:none}.igx-grid__td--fw:not(.igx-grid__td--bool)>.igx-icon{--component-size: 3}.igx-grid__td-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none}.igx-grid__td--new{color:var(--cell-new-color)}.igx-grid__td--edited .igx-grid__td-text{font-style:italic;color:var(--cell-edited-value-color);padding:0 .0625rem}.igx-grid__td--merged{z-index:1;grid-row:1/-1}.igx-grid__td--merged-selected{color:var(--row-selected-text-color);background:var(--row-selected-background) !important}.igx-grid__td--merged-hovered{color:var(--row-hover-text-color);background:var(--row-hover-background) !important}.igx-grid__td--merged-selected.igx-grid__td--merged-hovered{color:var(--row-selected-hover-text-color);background:var(--row-selected-hover-background) !important}.igx-grid__td--number{text-align:end;justify-content:flex-end;flex-grow:1}.igx-grid__td--pinned{position:relative;background:inherit;z-index:9999}.igx-grid__td--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid__td--pinned-first::after{width:calc(100% - 0.0625rem);inset-inline-end:0;inset-inline-start:unset}.igx-grid__td--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid__td--pinned.igx-grid__td--selected{color:var(--cell-selected-text-color);background:var(--cell-selected-background)}.igx-grid__td--pinned.igx-grid__td--column-selected{color:var(--row-selected-text-color);background:var(--row-selected-background)}.igx-grid__td--pinned.igx-grid__td--column-selected:hover{background:var(--row-selected-hover-background);color:var(--row-selected-text-color)}.igx-grid__td--row-pinned-first{overflow:hidden}.igx-grid__td--pinned-chip{margin-inline-end:max(var(--is-large, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__td--active::after{border:var(--cell-active-border-width) var(--active-state-border-style) var(--cell-active-border-color)}.igx-grid__td--selected{color:var(--cell-selected-text-color);background:var(--cell-selected-background)}.igx-grid__td--selected .igx-grid__tree-grouping-indicator:hover{color:var(--cell-selected-text-color)}.igx-grid__td--column-selected{color:var(--row-selected-text-color);background:var(--row-selected-background)}.igx-grid__td--column-selected:hover{color:var(--row-selected-hover-text-color);background:var(--row-selected-hover-background)}.igx-grid__td--selected.igx-grid__td--column-selected{color:var(--cell-selected-within-text-color);background:var(--cell-selected-within-background)}.igx-grid__td--selected.igx-grid__td--column-selected:hover{color:var(--cell-selected-within-text-color);background:var(--cell-selected-within-background)}.igx-grid__td--editing{background:var(--cell-editing-background) !important;padding-inline:0}.igx-grid__td--editing::after{box-shadow:inset 0 0 0 0.0625rem var(--edit-mode-color)}.igx-grid__td--editing .igx-input-group{--size: 100% !important;--ig-input-group-border-color: transparent;--ig-input-group-hover-border-color: transparent;--ig-input-group-focused-border-color: transparent;--ig-input-group-focused-secondary-color: transparent;--ig-input-group-disabled-border-color: transparent;width:100%;overflow:hidden}.igx-grid__td--editing .igx-input-group .igx-input-group__bundle::before,.igx-grid__td--editing .igx-input-group .igx-input-group__bundle::after{display:none}.igx-grid__td--editing .igx-input-group .igx-input-group__input{--input-font-size: 0.8125rem;--input-line-height: 1rem;font-size:var(--input-font-size) !important;line-height:var(--input-line-height) !important}.igx-grid__td--editing [aria-readonly=true]{color:var(--cell-disabled-color)}.igx-grid__td--editing [aria-readonly=true] igx-icon{color:var(--cell-disabled-color)}.igx-grid__td--editing.igx-grid__td--invalid .igx-input-group__bundle:focus-within::after{border:none !important}.igx-grid__td--editing.igx-grid__td--invalid::after{box-shadow:inset 0 0 0 0.0625rem var(--ig-error-500) !important}.igx-grid__td--invalid{padding-inline-end:.25rem !important}.igx-grid__td--invalid>igx-icon{--component-size: 1 !important;color:var(--ig-error-500)}.igx-grid__td--editing.igx-grid__td--valid::after{box-shadow:inset 0 0 0 .0625rem var(--ig-success-500)}.igx-grid__td--valid>igx-icon{--component-size: 1 !important}.igx-grid__tr--edit{position:relative}.igx-grid__tr--edit::after{content:\"\";position:absolute;height:100%;width:100%;inset:0;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:10000;box-shadow:inset 0 .0625rem 0 0 var(--edit-mode-color),inset 0 -0.0625rem 0 0 var(--edit-mode-color)}.igx-grid__tr--mrl.igx-grid__tr--edit:first-of-type::after{top:0;z-index:5}.igx-grid__tr--drag{opacity:.5}.igx-grid__tr--ghost{background:var(--row-ghost-background);color:var(--row-drag-color);outline:.0625rem solid var(--row-ghost-border-color);z-index:10002}.igx-grid__tr--ghost{--row-ghost-background: var(--igx-grid-row-ghost-background, var(--ig-grid-row-ghost-background, var(--ig-gray-50)));--row-drag-color: var(--igx-grid-row-drag-color, var(--ig-grid-row-drag-color, var(--ig-gray-800)));--row-ghost-border-color: var(--igx-grid-row-ghost-border-color, var(--ig-grid-row-ghost-border-color, var(--ig-gray-500)))}.igx-grid__tr--group{position:relative;background:var(--header-background) !important}.igx-grid__tr--inner{display:flex;background:inherit}.igx-grid__tr--header{display:flex;align-items:center}.igx-grid__tr--header igx-icon{--component-size: 3}.igx-grid__tr--add-animate{animation:scale-in-ver-center .2s cubic-bezier(0.25, 0.46, 0.45, 0.94)}.igx-grid__tr--edited::before{content:\"\";position:absolute;width:.125rem;height:100%;z-index:10000;background:var(--edited-row-indicator)}.igx-grid__row-editing-outlet{z-index:10000;position:absolute}.igx-grid__tr-container{overflow:auto;width:100%;border-bottom:.0625rem solid var(--row-border-color)}.igx-grid__tr-container--active{border:var(--cell-active-border-width) var(--active-state-border-style) var(--cell-active-border-color)}.igx-grid__tr-action:last-of-type{border-inline-end:var(--row-border-width) var(--row-border-style) var(--_grid-action-border-color, hsla(from var(--action-border-color) h s l/0.38));min-height:var(--cell-height)}.igx-grid__tree-grouping-indicator{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline-style:none;margin-inline-end:.5rem;cursor:pointer;color:var(--expand-icon-color)}.igx-grid__tree-grouping-indicator:hover{color:var(--expand-icon-hover-color)}[dir=rtl] .igx-grid__tree-grouping-indicator{transform:scaleX(-1)}.igx-grid__tree-grouping-indicator igx-icon{--component-size: 3}.igx-grid__tree-loading-indicator{width:1.5rem;height:1.5rem;margin-inline-end:.5rem}.igx-grid__row-indentation{position:relative;display:flex;justify-content:center;align-items:center;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));background:inherit;z-index:1;background-clip:padding-box !important}.igx-grid__hierarchical-expander{-webkit-user-select:none;-moz-user-select:none;user-select:none;background:inherit;padding-inline:max(var(--is-large, 1)*max(var(--_hierarchical-indent-large), -1 * var(--_hierarchical-indent-large))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(var(--_hierarchical-indent-medium), -1 * var(--_hierarchical-indent-medium))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(var(--_hierarchical-indent-small), -1 * var(--_hierarchical-indent-small))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;color:var(--expand-icon-color)}.igx-grid__hierarchical-expander:focus{outline:none}.igx-grid__hierarchical-expander:focus igx-icon{color:var(--expand-icon-hover-color)}.igx-grid__hierarchical-expander:hover igx-icon{color:var(--expand-icon-hover-color)}.igx-grid__hierarchical-expander igx-icon{--component-size: 3;color:var(--expand-icon-color)}[dir=rtl] .igx-grid__hierarchical-expander{transform:scaleX(-1)}.igx-grid__hierarchical-expander--empty{cursor:default;pointer-events:none;padding-inline:max(var(--is-large, 1)*max(var(--_hierarchical-indent-large), -1 * var(--_hierarchical-indent-large))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(var(--_hierarchical-indent-medium), -1 * var(--_hierarchical-indent-medium))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(var(--_hierarchical-indent-small), -1 * var(--_hierarchical-indent-small))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-inline-end:var(--row-border-width) var(--row-border-style) var(--_grid-action-border-color, hsla(from var(--action-border-color) h s l/0.38))}.igx-grid__hierarchical-expander--header{background:inherit;border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));z-index:3}.igx-grid__hierarchical-expander--header igx-icon{display:flex;align-items:center}.igx-grid__hierarchical-expander--push{align-items:flex-start}.igx-grid__hierarchical-expander--push igx-icon{min-height:var(--header-size);max-height:var(--header-size)}.igx-grid__hierarchical-indent{display:flex;margin-inline-start:max(var(--is-large, 1)*max(calc(2 * var(--_hierarchical-indent-large) + var(--_hierarchical-action-icon)), -1 * calc(2 * var(--_hierarchical-indent-large) + var(--_hierarchical-action-icon)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(2 * var(--_hierarchical-indent-medium) + var(--_hierarchical-action-icon)), -1 * calc(2 * var(--_hierarchical-indent-medium) + var(--_hierarchical-action-icon)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(2 * var(--_hierarchical-indent-small) + var(--_hierarchical-action-icon)), -1 * calc(2 * var(--_hierarchical-indent-small) + var(--_hierarchical-action-icon)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-inline-end:max(var(--is-large, 1)*max(var(--_hierarchical-indent-large), -1 * var(--_hierarchical-indent-large))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(var(--_hierarchical-indent-medium), -1 * var(--_hierarchical-indent-medium))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(var(--_hierarchical-indent-small), -1 * var(--_hierarchical-indent-small))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));margin-block:max(var(--is-large, 1)*max(var(--_hierarchical-indent-large), -1 * var(--_hierarchical-indent-large))*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(var(--_hierarchical-indent-medium), -1 * var(--_hierarchical-indent-medium))*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(var(--_hierarchical-indent-small), -1 * var(--_hierarchical-indent-small))*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-grid__hierarchical-indent--scroll{margin-inline-end:max(var(--is-large, 1)*max(calc(var(--_hierarchical-indent-large) + 18px), -1 * calc(var(--_hierarchical-indent-large) + 18px))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(var(--_hierarchical-indent-medium) + 18px), -1 * calc(var(--_hierarchical-indent-medium) + 18px))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(var(--_hierarchical-indent-small) + 18px), -1 * calc(var(--_hierarchical-indent-small) + 18px))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-1{padding-inline-start:max(var(--is-large, 1)*max(2.25rem, -1 * 2.25rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(2rem, -1 * 2rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-2{padding-inline-start:max(var(--is-large, 1)*max(4.5rem, -1 * 4.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(4rem, -1 * 4rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(3rem, -1 * 3rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-3{padding-inline-start:max(var(--is-large, 1)*max(6.75rem, -1 * 6.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(6rem, -1 * 6rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(4.5rem, -1 * 4.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-4{padding-inline-start:max(var(--is-large, 1)*max(9rem, -1 * 9rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(8rem, -1 * 8rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(6rem, -1 * 6rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-5{padding-inline-start:max(var(--is-large, 1)*max(11.25rem, -1 * 11.25rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(10rem, -1 * 10rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(7.5rem, -1 * 7.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-6{padding-inline-start:max(var(--is-large, 1)*max(13.5rem, -1 * 13.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(12rem, -1 * 12rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(9rem, -1 * 9rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-7{padding-inline-start:max(var(--is-large, 1)*max(15.75rem, -1 * 15.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(14rem, -1 * 14rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(10.5rem, -1 * 10.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-8{padding-inline-start:max(var(--is-large, 1)*max(18rem, -1 * 18rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(16rem, -1 * 16rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(12rem, -1 * 12rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-9{padding-inline-start:max(var(--is-large, 1)*max(20.25rem, -1 * 20.25rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(18rem, -1 * 18rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(13.5rem, -1 * 13.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-10{padding-inline-start:max(var(--is-large, 1)*max(22.5rem, -1 * 22.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(20rem, -1 * 20rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(15rem, -1 * 15rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__header-indentation{position:relative;padding-inline-end:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));background:var(--header-background);z-index:4;height:100%}.igx-grid__header-indentation igx-icon{--component-size: 3}.igx-grid__header-indentation--no-border{border-inline-end:.0625rem solid rgba(0,0,0,0)}.igx-grid__cbx-padding{display:flex;align-items:center;justify-content:center;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__cbx-selection{display:flex;justify-content:center;align-items:center;background:inherit;z-index:4;border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));background-clip:border-box !important}.igx-grid__cbx-selection--push{align-items:flex-start;padding-block-start:max(var(--is-large, 1)*max(0.9375rem, -1 * 0.9375rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-grid__group-row{background:var(--group-row-background);display:flex;outline-style:none;border-block:var(--row-border-width) var(--row-border-style) var(--row-border-color);min-height:var(--header-size)}.igx-grid__group-row::after{content:\"\";position:absolute;width:100%;height:100%;inset:0;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-grid__group-row--active{position:relative;background:var(--group-row-selected-background)}.igx-grid__group-row--active:hover{background:var(--group-row-selected-background)}.igx-grid__group-row--active::after{border:var(--cell-active-border-width) var(--active-state-border-style) var(--cell-active-border-color);z-index:4}.igx-grid__group-content{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;padding-inline-start:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));border-inline-end:var(--header-border-width) solid var(--body-column-border-color-odd);min-height:var(--cell-height)}.igx-grid__group-content:focus{outline:rgba(0,0,0,0)}.igx-grid__grouping-indicator{position:relative;display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;justify-content:center;align-items:center;z-index:1;cursor:pointer;padding-inline-end:.75rem;margin-inline-start:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));min-height:var(--header-size)}.igx-grid__grouping-indicator igx-icon{--component-size: 3;color:var(--expand-icon-color)}.igx-grid__grouping-indicator:hover,.igx-grid__grouping-indicator:focus{outline-style:none}.igx-grid__grouping-indicator:hover igx-icon,.igx-grid__grouping-indicator:focus igx-icon{color:var(--expand-icon-hover-color)}[dir=rtl] .igx-grid__grouping-indicator{transform:scaleX(-1)}.igx-grid__group-expand-btn{position:absolute;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;inset-block-start:calc(50% - var(--_expander-icon-width)/2);inset-inline-start:var(--_indicator-inline-inset)}.igx-grid__group-expand-btn:hover{color:var(--expand-icon-hover-color)}.igx-grid__group-expand-btn--push{inset-block-start:max(var(--is-large, 1)*max(1.375rem, -1 * 1.375rem),var(--is-medium, 1)*max(1.125rem, -1 * 1.125rem),var(--is-small, 1)*max(0.875rem, -1 * 0.875rem))}.igx-grid__group-row--padding-level-1 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(1.125rem, -1 * 1.125rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem))}.igx-grid__group-row--padding-level-2 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(2.25rem, -1 * 2.25rem),var(--is-medium, 1)*max(2rem, -1 * 2rem),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem))}.igx-grid__group-row--padding-level-3 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(3.375rem, -1 * 3.375rem),var(--is-medium, 1)*max(3rem, -1 * 3rem),var(--is-small, 1)*max(2.25rem, -1 * 2.25rem))}.igx-grid__group-row--padding-level-4 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(4.5rem, -1 * 4.5rem),var(--is-medium, 1)*max(4rem, -1 * 4rem),var(--is-small, 1)*max(3rem, -1 * 3rem))}.igx-grid__group-row--padding-level-5 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(5.625rem, -1 * 5.625rem),var(--is-medium, 1)*max(5rem, -1 * 5rem),var(--is-small, 1)*max(3.75rem, -1 * 3.75rem))}.igx-grid__group-row--padding-level-6 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(6.75rem, -1 * 6.75rem),var(--is-medium, 1)*max(6rem, -1 * 6rem),var(--is-small, 1)*max(4.5rem, -1 * 4.5rem))}.igx-grid__group-row--padding-level-7 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(7.875rem, -1 * 7.875rem),var(--is-medium, 1)*max(7rem, -1 * 7rem),var(--is-small, 1)*max(5.25rem, -1 * 5.25rem))}.igx-grid__group-row--padding-level-8 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(9rem, -1 * 9rem),var(--is-medium, 1)*max(8rem, -1 * 8rem),var(--is-small, 1)*max(6rem, -1 * 6rem))}.igx-grid__group-row--padding-level-9 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(10.125rem, -1 * 10.125rem),var(--is-medium, 1)*max(9rem, -1 * 9rem),var(--is-small, 1)*max(6.75rem, -1 * 6.75rem))}.igx-grid__group-row--padding-level-10 .igx-grid__grouping-indicator{padding-inline-start:max(var(--is-large, 1)*max(11.25rem, -1 * 11.25rem),var(--is-medium, 1)*max(10rem, -1 * 10rem),var(--is-small, 1)*max(7.5rem, -1 * 7.5rem))}.igx-grid__mrl-block{display:grid !important;background:inherit;position:relative}.igx-grid__pivot--super-compact{--ig-size: 1 !important}.igx-grid__pivot--super-compact .igx-grid-th,.igx-grid__pivot--super-compact .igx-grid-thead__title,.igx-grid__pivot--super-compact .igx-grid__td{padding:0 .25rem !important;min-height:1.5rem !important;height:1.5rem}.igx-grid__pivot--super-compact .igx-grid-th>*,.igx-grid__pivot--super-compact .igx-grid-thead__title>*{line-height:normal;align-self:initial;max-height:100%}.igx-grid__pivot--super-compact .igx-grid__tr-pivot--row-area{padding-bottom:.25rem}.igx-grid__tr-pivot{display:flex;align-items:center;background:inherit;overflow:hidden;z-index:3;height:var(--header-size);padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;border-inline-start:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));border-bottom:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid__tr-pivot igx-chips-area{flex-wrap:nowrap;width:auto}.igx-grid__tr-pivot igx-chips-area>*{margin-inline-end:.25rem}.igx-grid__tr-pivot igx-chips-area:last-child{margin-inline-end:0}.igx-grid__pivot-filter-toggle{display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}.igx-grid__pivot-filter-toggle>igx-badge{position:absolute;top:-0.25rem;inset-inline-start:60%;width:1.125rem;min-width:1.125rem;height:1.125rem;font-size:.625rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-grid__pivot-empty-chip-area{line-height:normal;font-size:.875rem;margin-inline-end:0 !important}.igx-grid__tr-pivot--small-row-area{border-inline-start:0}.igx-grid__tr-pivot--row-area{height:auto !important;align-items:flex-end;padding-bottom:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));border-inline-start:0;border-bottom:0}.igx-grid__tr-pivot--filter-container{display:flex;flex-direction:column}.igx-grid__tr-pivot--chip_drop_indicator{width:.125rem;background:var(--resize-line-color);visibility:hidden}.igx-grid__tr-pivot--drop-row-area{flex-grow:1}.igx-grid__tr-pivot--filter{height:var(--header-size);border-inline-start:0}.igx-grid__tr-pivot-group{flex:1}.igx-grid__tr-pivot--columnDimensionLeaf{box-shadow:none}.igx-grid__tr-pivot--columnDimensionLeaf igx-grid-header{border:none}.igx-grid__tr-pivot--columnMultiRowSpan igx-grid-header>*{visibility:hidden}.igx-grid__tr-pivot-toggle-icons{display:inline-flex !important}.igx-grid__drag-indicator{display:flex;align-items:center;justify-content:center;padding-inline:max(var(--is-large, 1)*max(var(--_hierarchical-indent-large), -1 * var(--_hierarchical-indent-large))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(var(--_hierarchical-indent-medium), -1 * var(--_hierarchical-indent-medium))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(var(--_hierarchical-indent-small), -1 * var(--_hierarchical-indent-small))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));min-height:var(--cell-height);padding-block:0;flex:0 0 auto;background:inherit;background-clip:border-box;z-index:4;cursor:move;border-inline-end:.0625rem solid rgba(0,0,0,0)}.igx-grid__drag-indicator igx-icon{--component-size: 3}.igx-grid__drag-indicator--header{border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid__drag-indicator--off{color:var(--row-drag-color)}.igx-grid__drag-ghost-image{position:absolute !important;align-items:center !important;background:var(--ghost-header-background) !important;color:var(--ghost-header-text-color) !important;border:rgba(0,0,0,0) !important;min-width:10.5rem;max-width:20rem;height:var(--header-size);min-height:var(--header-size);padding-inline:max(var(--is-large, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));top:-625rem;inset-inline-start:-625rem;box-shadow:var(--drag-shadow);overflow:hidden;z-index:20}.igx-grid__drag-ghost-image .igx-grid-th__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1 0 0;text-align:end;color:var(--ghost-header-text-color) !important}.igx-grid__drag-ghost-image .igx-grid-thead__title{border:none;color:var(--ghost-header-text-color) !important;background:rgba(0,0,0,0) !important}.igx-grid__drag-ghost-image .igx-grid-th__icons,.igx-grid__drag-ghost-image::before,.igx-grid__drag-ghost-image::after{display:none}.igx-grid__drag-ghost-image-icon{color:var(--ghost-header-icon-color);margin-inline-end:.75rem}.igx-grid__drag-ghost-image-icon-group{color:var(--ghost-header-icon-color);padding:1.5rem;padding-inline-end:0;margin-inline-end:.5rem}.igx-grid__drag-col-header{background:var(--header-background)}.igx-grid__drag-col-header .igx-grid-thead__title>*,.igx-grid__drag-col-header .igx-grid-th>*{opacity:.4}.igx-grid__scroll-on-drag-left{position:absolute;width:.9375rem;top:0;height:100%;z-index:25;inset-inline-start:0}.igx-grid__scroll-on-drag-right{position:absolute;width:.9375rem;top:0;height:100%;z-index:25;inset-inline-end:0}.igx-grid__scroll-on-drag-pinned{position:absolute;width:.9375rem;height:100%;top:0;z-index:25}.igx-grid__filtering-row{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;position:absolute;inset-inline-start:0;bottom:0;z-index:3;grid-row:2;width:100%;height:var(--cell-height);padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));color:var(--filtering-row-text-color);background:var(--filtering-row-background);box-shadow:0 .25rem .625rem rgba(0,0,0,.12)}.igx-grid__filtering-row .igx-input-group{--size: calc(var(--cell-height) - 0.5rem) !important;min-height:var(--size);width:100% !important;max-width:12.5rem !important;min-width:8.75rem !important}.igx-grid__filtering-row .igx-input-group igx-prefix,.igx-grid__filtering-row .igx-input-group igx-suffix{height:100% !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__input{font-size:max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(0.875rem, -1 * 0.875rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)) !important;padding-inline-start:0 !important;padding-block:0 !important;height:100% !important}.igx-grid__filtering-row [igxIconButton]{--ig-size: 1;aspect-ratio:1;color:var(--filtering-row-text-color)}.igx-grid__filtering-row-main{display:flex;flex:1 1 auto;align-items:center;overflow:hidden;max-width:calc(100% - 11rem);min-width:3.5rem}.igx-grid__filtering-row-main igx-chips-area{flex-wrap:nowrap;margin-inline:.5rem;gap:.25rem}.igx-grid__filtering-row-editing-buttons{display:flex;align-items:center;padding:.5rem;gap:.25rem}.igx-grid__filtering-row-editing-buttons button{transition:none}.igx-grid__filtering-row-editing-buttons button:not([disabled]) igx-icon{color:var(--sorted-header-icon-color)}.igx-grid__filtering-row-editing-buttons--small{padding:.25rem}.igx-grid__filtering-row-editing-buttons--small button{transition:none}.igx-grid__filtering-row-editing-buttons--small button:not([disabled]) igx-icon{color:var(--sorted-header-icon-color)}.igx-grid__filtering-row-scroll-start{position:relative;margin-inline:.5rem;overflow:visible}.igx-grid__filtering-row-scroll-start::after{display:block;position:absolute;width:.625rem;content:\"\";inset-block:-0.125rem;background:linear-gradient(to right, var(--filtering-row-background), transparent);inset-inline-end:-0.625rem}.igx-grid__filtering-row-scroll-end{position:relative;margin-inline:.5rem;overflow:visible}.igx-grid__filtering-row-scroll-end::before{display:block;position:absolute;width:.625rem;content:\"\";inset-block:-0.125rem;background:linear-gradient(to left, var(--filtering-row-background), transparent);inset-inline-start:-0.625rem}.igx-grid .igx-grid__filtering-cell--selected,.igx-grid .igx-grid__filtering-cell{display:flex;align-items:center;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;overflow:hidden;border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));border-top:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));height:var(--header-size);gap:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));background-clip:padding-box !important}.igx-grid .igx-grid__filtering-cell--selected igx-chips-area,.igx-grid .igx-grid__filtering-cell igx-chips-area{width:auto;min-width:0;flex-wrap:nowrap}.igx-grid .igx-grid__filtering-cell--selected igx-chips-area .igx-filtering-chips__connector,.igx-grid .igx-grid__filtering-cell igx-chips-area .igx-filtering-chips__connector{font-size:.75rem;text-transform:uppercase;font-weight:600;margin:0 .5rem;overflow:hidden}.igx-grid__filtering-cell--selected{color:var(--header-selected-text-color);background:var(--header-selected-background)}.igx-grid__filtering-cell--selected igx-chips-area{background:inherit}.igx-grid__filtering-cell-indicator{display:flex;align-items:center;position:relative}.igx-grid__filtering-cell-indicator igx-icon,.igx-grid__filtering-cell-indicator .igx-badge{cursor:pointer}.igx-grid__filtering-cell-indicator .igx-badge{position:absolute;top:-0.25rem;inset-inline-start:60%}.igx-grid__filtering-cell-indicator--hidden .igx-badge,.igx-grid__filtering-cell-indicator--hidden igx-icon{display:none}.igx-grid__filtering-dropdown-items{display:flex;align-items:center}.igx-grid__filtering-dropdown-text{margin-inline-start:1rem}.igx-grid__summaries{display:flex;overflow:hidden;outline-style:none;background-color:var(--igx-grid-summary-background-color, var(--ig-grid-summary-background-color, var(--summaries-patch-background)))}.igx-grid__summaries igx-display-container{overflow:visible !important;flex:1;min-width:0}.igx-grid__summaries--body{--summaries-patch-background: var(--group-row-background);display:flex;overflow:hidden;outline-style:none;border-bottom:.0625rem dashed var(--row-border-color);background-color:var(--summaries-patch-background)}.igx-grid__summaries--body:last-of-type{border-bottom:none}.igx-grid__summaries--body .igx-grid-summary{--background-color: inherit !important;--result-color: hsla( from color(from var(--background-color) var(--y-contrast)) h 0 l / 1 ) !important}.igx-grid__summaries--body .igx-display-container{overflow:visible !important;flex:1;min-width:0}.igx-grid__summaries-patch{position:relative;background:inherit;border-inline-end:var(--ig-grid-summary-border-width, 0.0625rem) var(--ig-grid-summary-border-style, solid) var(--ig-grid-summary-border-color, var(--_grid-action-border-color, hsla(from var(--action-border-color) h s l/0.38)));z-index:1}.igx-grid__outlet{--ig-size: var(--grid-size);z-index:10002;position:fixed}.igx-grid__loading-outlet{z-index:10003}.igx-grid__row-editing-outlet{z-index:10000;position:absolute}.igx-grid__addrow-snackbar{position:absolute;bottom:1rem;inset-inline-start:50%;transform:translateX(-50%);z-index:10003}.igx-grid__icon{display:flex;align-items:center;justify-content:center}.igx-grid__column-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-grid__count-badge{display:flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:.125rem .375rem;border-radius:.625rem;font-size:.75rem;background:var(--group-count-background);color:var(--group-count-text-color)}.igx-grid__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-grid--loading{--ig-overlay-background-color: transparent}.igx-grid .igx-banner{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--component-size: var(--ig-size, var(--ig-size-large));display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;padding-block:max(var(--is-large, 1)*max(8px, -1 * 8px)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(6px, -1 * 6px)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(4px, -1 * 4px)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(16px, -1 * 16px)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(4px, -1 * 4px)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));min-width:20rem;color:var(--ig-grid-foreground, var(--ig-surface-500-contrast));background:var(--ig-grid-background, var(--ig-surface-500));border-radius:0}.igx-grid .igx-banner igc-icon,.igx-grid .igx-banner igx-icon,.igx-grid .igx-banner igc-button,.igx-grid .igx-banner [igxButton]{--component-size: var(--ig-size, var(--ig-size-large))}.igx-grid .igx-banner__message{display:flex;align-items:center;min-width:9.375rem;flex:1 0 0%;gap:1rem;padding:0 .5rem}.igx-grid .igx-banner__text{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);flex:1 0 0%}.igx-grid .igx-banner__border-top{box-shadow:inset 0 .0625rem 0 0 var(--row-border-color)}.igx-grid .igx-banner__border-bottom{box-shadow:inset 0 -0.0625rem 0 0 var(--row-border-color)}.igx-grid .igx-banner__actions{flex-wrap:wrap;align-self:flex-end;gap:.5rem}.igx-grid .igx-grid__tr:hover .igx-grid__td--selected:has(+.igx-grid__td--selected){border-inline-end-color:var(--cell-selected-background)}.igx-grid .igx-grid__tr--selected:hover .igx-grid__td--selected:has(+.igx-grid__td--selected){border-inline-end-color:var(--cell-selected-within-background)}.igx-grid .igx-grid__tr--selected .igx-grid__td--selected:has(+.igx-grid__td--selected){border-inline-end-color:var(--cell-selected-within-background)}.igx-grid .igx-grid__td--selected:has(+.igx-grid__td--selected){border-inline-end-color:var(--cell-selected-background)}.igx-grid-grouparea{grid-row:2;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;border-bottom:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));background:var(--grouparea-background);color:var(--grouparea-color);min-height:var(--grouparea-size);padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;z-index:2;height:100%;overflow:hidden}.igx-grid-grouparea:focus{outline-style:none}.igx-grid-grouparea .igx-chip{margin-block:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-grid-grouparea__connector{--ig-icon-size: 1rem;display:inline-flex;justify-content:center;align-items:center;margin:0 .25rem}[dir=rtl] .igx-grid-grouparea__connector{transform:scaleX(-1)}.igx-grid-th{position:relative;display:flex;flex:1 1 0%;color:inherit;text-align:start;background-clip:padding-box !important;line-height:1rem;flex-flow:row nowrap;justify-content:space-between;align-items:flex-end;min-width:0;min-height:var(--header-size);padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block:0;font-size:.75rem;font-weight:600;border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));overflow:hidden;transition:color 120ms ease-in-out;outline-style:none}.igx-grid-th__expander{display:flex;align-items:center;justify-content:center;margin-inline-end:.5rem;cursor:pointer}.igx-grid-th__expander igx-icon{color:var(--expand-icon-color)}.igx-grid-th__expander:hover igx-icon{color:var(--expand-icon-hover-color)}.igx-grid-th__group-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.igx-grid-th__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:3ch;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:initial;flex-grow:1;line-height:var(--header-size)}.igx-grid-th__icons{display:inline-flex;align-items:center;justify-content:flex-end;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:1.875rem;height:var(--header-size);align-self:flex-end}.igx-grid-th__icons:empty{min-width:0}.igx-grid-th__icons .igx-excel-filter__icon{position:relative;display:flex;cursor:pointer;--ig-icon-size: 0.9375rem}.igx-grid-th__icons .igx-excel-filter__icon::after{content:attr(data-sortIndex);position:absolute;top:-0.3125rem;inset-inline-end:-0.0625rem;font-size:.625rem;text-align:end;font-family:sans-serif;line-height:.625rem}.igx-grid-th__icons .igx-excel-filter__icon--filtered{display:inline-flex;color:var(--sorted-header-icon-color)}.igx-grid-th__icons .igx-excel-filter__icon--filtered:hover,.igx-grid-th__icons .igx-excel-filter__icon--filtered:focus{color:var(--sortable-header-icon-hover-color)}.igx-grid-th__resize-handle{position:absolute;width:.25rem;top:0;inset-inline-end:-0.125rem;height:100%;z-index:2}.igx-grid-th__resize-line{position:absolute;cursor:col-resize;width:.25rem;background:var(--resize-line-color);z-index:2}.igx-grid-th__resize-line::before,.igx-grid-th__resize-line::after{position:absolute;content:\"\";height:100%;width:6rem}.igx-grid-th__resize-line::before{inset-inline-end:100%}.igx-grid-th__resize-line::after{inset-inline-start:100%}.igx-grid-th__drop-indicator-left{position:absolute;width:.0625rem;height:100%;top:0;z-index:1;inset-inline-start:-0.0625rem}.igx-grid-th__drop-indicator-right{position:absolute;width:.0625rem;height:100%;top:0;z-index:1;inset-inline-end:-0.0625rem}.igx-grid-th--active::after{content:\"\";position:absolute;inset:0;width:100%;height:100%;border:var(--cell-active-border-width) var(--active-state-border-style) var(--cell-active-border-color);pointer-events:none}.igx-grid-th--active.igx-grid-th--pinned::after{inset-block-start:0;inset-inline-start:0;width:calc(100% - var(--pinned-border-width)) !important}.igx-grid-th--number{text-align:end;flex-grow:1}.igx-grid-th--number .igx-grid-th__icons{justify-content:flex-start;order:-1}.igx-grid-th--number .igx-grid-th__icons .sort-icon{order:1}.igx-grid-th--collapsible{justify-content:normal}.igx-grid-th--sortable :where(.sort-icon){display:flex;align-items:center;cursor:pointer;position:relative;opacity:.7}.igx-grid-th--sortable :where(.sort-icon):is(:hover){opacity:1}.igx-grid-th--sortable :where(.sort-icon)::after{content:attr(data-sortIndex);position:absolute;top:-0.3125rem;inset-inline-end:-0.0625rem;font-size:.625rem;text-align:end;font-family:sans-serif;line-height:.625rem}.igx-grid-th--sorted :where(.sort-icon){opacity:1;color:var(--sorted-header-icon-color)}.igx-grid-th--sorted :where(.sort-icon):is(:hover,:focus){color:var(--sortable-header-icon-hover-color)}.igx-grid-th--selectable{color:var(--header-selected-text-color);background:var(--header-selected-background)}.igx-grid-th--filtrable :where(.igx-grid-th__title){opacity:.7}.igx-grid-th--pinned{position:relative;background:inherit}.igx-grid-th--pinned::after{width:calc(100% - 0.0625rem) !important}.igx-grid-th--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style)}.igx-grid-th--pinned-first:dir(ltr){border-inline-start-color:var(--pinned-border-color);border-inline-end:none}.igx-grid-th--pinned-first:dir(rtl){border-inline-end-color:var(--pinned-border-color);border-inline-start:none}.igx-grid-th--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-th--pinned-last:dir(ltr){border-inline-end-color:var(--header-border-color);border-inline-end-width:var(--pinned-border-width);border-inline-end-style:var(--pinned-border-style)}.igx-grid-th--pinned-last:dir(rtl){border-inline-start-color:var(--header-border-color);border-inline-start-width:var(--pinned-border-width);border-inline-start-style:var(--pinned-border-style)}.igx-grid-th--selected{color:var(--header-selected-text-color);background:var(--header-selected-background)}.igx-grid-th--selected :where(.sort-icon::after){background:var(--header-selected-background)}.igx-grid-th--fw{flex-grow:0;outline-style:none}.igx-grid-th--filtering{background:var(--filtering-header-background);color:var(--filtering-header-text-color);z-index:3}.igx-grid-th--filtrable.igx-grid-th--sortable :where(.sort-icon){cursor:pointer;opacity:.7}.igx-grid-th--filtrable.igx-grid-th--sortable :where(.sort-icon) :is(:hover){opacity:1}.igx-grid-th--selectable.igx-grid-th--sorted :where(.sort-icon){color:var(--header-selected-text-color)}.igx-grid-th--selectable.igx-grid-th--sorted :where(.sort-icon) :is(:hover,:focus){color:var(--header-selected-text-color)}.igx-grid-th--selected.igx-grid-th--sorted :where(.sort-icon){color:var(--header-selected-text-color)}.igx-grid-th--selected.igx-grid-th--sorted :where(.sort-icon) :is(:hover,:focus){color:var(--header-selected-text-color)}.igx-grid-th__drop-indicator--active.igx-grid-th__drop-indicator-left,.igx-grid-th__drop-indicator--active.igx-grid-th__drop-indicator-right{border-inline-end:.0625rem solid var(--drop-indicator-color)}.igx-grid-th__drop-indicator--active::after,.igx-grid-th__drop-indicator--active::before{position:absolute;content:\"\";width:0;height:0;border-style:solid;inset-inline-start:-0.1875rem}.igx-grid-th__drop-indicator--active::before{bottom:0;border-width:0 .25rem .25rem;border-color:rgba(0,0,0,0) rgba(0,0,0,0) var(--drop-indicator-color)}.igx-grid-th__drop-indicator--active::after{top:0;border-width:.25rem .25rem 0;border-color:var(--drop-indicator-color) rgba(0,0,0,0) rgba(0,0,0,0)}.igx-grid-thead{grid-row:3;display:flex;overflow:hidden;background:var(--header-background);color:var(--header-text-color)}.igx-grid-thead .igx-grid__tr{position:relative;background:inherit;color:inherit;z-index:2}.igx-grid-thead .igx-grid__tr:hover{background:inherit;color:inherit}.igx-grid-thead__wrapper{position:relative;display:flex;background:var(--header-background);color:var(--header-text-color);overflow:hidden;outline-style:none;z-index:2;border-bottom:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead__wrapper .igx-grid__tr{border-bottom:none}.igx-grid-thead__wrapper .igx-grid__tr:hover{background:inherit;color:inherit}.igx-grid-thead__wrapper .igx-grid__tr-action:last-of-type{border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead__wrapper .igx-grid__cbx-selection--push{align-items:flex-start;padding-block-start:max(var(--is-large, 1)*max(0.9375rem, -1 * 0.9375rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-grid-thead__wrapper>[aria-activedescendant]{outline-style:none}.igx-grid-thead__wrapper:focus{outline:0}.igx-grid-thead__wrapper--pivot{border-block-end:none !important}.igx-grid-thead__title{flex-basis:auto !important;align-items:center !important;border-block-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));height:var(--header-size)}.igx-grid-thead__group{display:flex;flex-flow:row nowrap}.igx-grid-thead__subgroup{position:relative}.igx-grid-thead__subgroup.igx-grid-thead__item.igx-grid-th--active::after{height:100%}.igx-grid-thead__item{display:flex;flex-flow:column nowrap;position:relative}.igx-grid-thead__item :where(.igx-grid-th,.igx-grid-thead__group){flex:1 1 auto}.igx-grid-thead__item :where(.igx-grid-thead__title){flex:0 0 auto}.igx-grid-thead__thumb{background:var(--header-background);border-block-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38));border-inline-start:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead--pivot{display:flex}.igx-grid-thead--pivot .igx-grid-thead--virtualizationWrapper{border-inline-start:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead--pivot .igx-grid-thead__wrapper{border-block-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead--virtualizationWrapper{height:100%}.igx-grid-thead--virtualizationContainer{height:100%;overflow:visible}.igx-grid-thead--virtualizationContainer .igx-grid__tr-pivot--columnDimensionLeaf::after{display:none}.igx-grid-thead .igx-grid__group-expand-btn{color:var(--expand-all-icon-color)}.igx-grid-thead .igx-grid__group-expand-btn:hover,.igx-grid-thead .igx-grid__group-expand-btn:focus{color:var(--expand-all-icon-hover-color)}.igx-drop-area{display:flex;align-items:center;justify-content:flex-start;min-width:5rem;width:100%;height:max(var(--is-large, 1)*max(2rem, -1 * 2rem),var(--is-medium, 1)*max(1.5rem, -1 * 1.5rem),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem));padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));flex:1 0 0%;background:var(--drop-area-background);border-radius:var(--drop-area-border-radius)}.igx-drop-area:hover{background:var(--drop-area-on-drop-background)}.igx-drop-area__icon{--ig-icon-size: rem(16px);color:var(--drop-area-icon-color);margin-inline-end:.5rem}.igx-drop-area__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--drop-area-text-color);font-size:.8125rem}.igx-group-label{display:flex;align-items:center;justify-content:flex-start;line-height:1rem;gap:.25rem}.igx-group-label__text{color:var(--group-label-text);font-size:calc(var(--_grid-head-font-size) + 0.0625rem)}.igx-group-label__icon{--component-size: 1;color:var(--group-label-icon);-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-group-label__column-name{font-weight:600;font-size:var(--_grid-head-font-size);color:var(--group-label-column-name-text)}.igx-group-label__count-badge{--ig-badge-background-color: var(--group-count-background);--ig-badge-text-color: var(--group-count-text-color)}.igx-group-label__count-badge>span{font-size:var(--_grid-head-font-size)}.igx-advanced-filter .igx-excel-filter__secondary-footer{--ig-size: 2;display:flex;justify-content:space-between;padding-inline:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));padding-block-end:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))))}.igx-advanced-filter .igx-excel-filter__secondary-footer .igx-excel-filter__clear{flex-grow:1}.igx-advanced-filter .igx-excel-filter__secondary-footer .igx-excel-filter__apply,.igx-advanced-filter .igx-excel-filter__secondary-footer .igx-excel-filter__cancel{flex-grow:0}.igx-advanced-filter .igx-excel-filter__cancel+.igx-excel-filter__apply{margin-inline-start:1rem}igx-pivot-row-dimension-header.igx-grid-th{align-items:center}igx-pivot-row-dimension-header-group::after{height:100% !important}igx-pivot-row-header-group::after{inset-inline-start:calc(var(--header-border-width)*-1) !important;width:100% !important;height:100% !important}igx-pivot-row-header-group igx-pivot-row-dimension-header.igx-grid-th .igx-grid-th__icons{align-self:center}igx-pivot-row-header-group igx-pivot-row-dimension-header .igx-grid-th__icons{padding-inline-end:max(var(--is-large, 1)*max(1.5rem, -1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}igx-pivot-row-header-group:only-child igx-pivot-row-dimension-header.igx-grid-th,igx-pivot-row-header-group:last-child igx-pivot-row-dimension-header.igx-grid-th{border-inline-end:0 !important}.igx-pivot-grid-row-filler__wrapper .igx-grid-thead__wrapper{height:100%}.igx-pivot-grid-row-filler__wrapper .igx-grid-thead__wrapper .igx-grid-th{height:100%}.igx-grid-thead .igx-grid__header-indentation igx-icon{--component-size: 3}.igx-grid-thead .igx-grid__drag-indicator{cursor:default}.igx-grid-thead .igx-grid__tr--mrl .igx-grid__hierarchical-expander--header,.igx-grid-thead .igx-grid__tr--mrl .igx-grid__hierarchical-expander,.igx-grid-thead .igx-grid__tr--mrl .igx-grid__row-indentation,.igx-grid-thead .igx-grid__tr--mrl .igx-grid__cbx-selection{border-bottom:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid-thead:focus-visible{outline-color:rgba(0,0,0,0)}.igx-grid__mrl-block .igx-grid-thead__item{display:flex}.igx-grid__mrl-block .igx-grid-thead__title{border-inline-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38)) !important;border-block-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid__mrl-block .igx-grid-th{border-block-end:var(--header-border-width) var(--header-border-style) var(--_grid-header-border-color, hsla(from var(--header-border-color) h s l/0.38))}.igx-grid__mrl-block .igx-grid-thead__subgroup:only-child .igx-grid-th,.igx-grid__mrl-block .igx-grid-thead__subgroup:last-child .igx-grid-th{border-block-end:0}.igx-grid__mrl-block.igx-grid__tbody-pivot-dimension .igx-grid-th{border-block-end:0}.igx-grid__tr--odd.igx-grid__tr--mrl .igx-grid__td{--body-column-border-color-odd: var(--row-border-color);border-block-end:.0625rem solid var(--row-border-color)}.igx-grid__tr--even.igx-grid__tr--mrl .igx-grid__td{--body-column-border-color-even: var(--row-border-color);border-block-end:.0625rem solid var(--row-border-color)}.igx-grid__tr--mrl .igx-grid__cbx-selection,.igx-grid__tr--mrl .igx-grid__hierarchical-expander,.igx-grid__tr--mrl .igx-grid__row-indentation,.igx-grid__tr--mrl .igx-grid__drag-indicator{border-bottom:.0625rem solid var(--row-border-color)}.igx-grid__tr--mrl{background-clip:padding-box !important}.igx-grid .igx-checkbox{min-width:1.25rem}.igx-grid .igx-checkbox .igx-checkbox__composite-wrapper{width:var(--cbx-size, 1.25rem);height:var(--cbx-size, 1.25rem);padding:0 !important}.igx-grid .igx-checkbox .igx-checkbox__label{margin-inline-start:.75rem}.igx-grid .igx-checkbox .igx-checkbox__label--before{margin-inline-end:.75rem}.igx-grid .igx-checkbox .igx-checkbox__label:empty,.igx-grid .igx-checkbox .igx-checkbox__label--before:empty{padding:0;margin:0}.igx-grid-thead__item.igx-grid-th--active::after{width:calc(100% - var(--header-border-width))}.igx-grid__row-indentation--level-1{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(1.5rem + var(--_expander-icon-width)), -1 * calc(1.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(1rem + var(--_expander-icon-width)), -1 * calc(1rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(0.75rem + var(--_expander-icon-width)), -1 * calc(0.75rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-2{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(3rem + var(--_expander-icon-width)), -1 * calc(3rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(2rem + var(--_expander-icon-width)), -1 * calc(2rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(1.5rem + var(--_expander-icon-width)), -1 * calc(1.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-3{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(4.5rem + var(--_expander-icon-width)), -1 * calc(4.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(3rem + var(--_expander-icon-width)), -1 * calc(3rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(2.25rem + var(--_expander-icon-width)), -1 * calc(2.25rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-4{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(6rem + var(--_expander-icon-width)), -1 * calc(6rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(4rem + var(--_expander-icon-width)), -1 * calc(4rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(3rem + var(--_expander-icon-width)), -1 * calc(3rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-5{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(7.5rem + var(--_expander-icon-width)), -1 * calc(7.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(5rem + var(--_expander-icon-width)), -1 * calc(5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(3.75rem + var(--_expander-icon-width)), -1 * calc(3.75rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-6{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(9rem + var(--_expander-icon-width)), -1 * calc(9rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(6rem + var(--_expander-icon-width)), -1 * calc(6rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(4.5rem + var(--_expander-icon-width)), -1 * calc(4.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-7{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(10.5rem + var(--_expander-icon-width)), -1 * calc(10.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(7rem + var(--_expander-icon-width)), -1 * calc(7rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(5.25rem + var(--_expander-icon-width)), -1 * calc(5.25rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-8{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(12rem + var(--_expander-icon-width)), -1 * calc(12rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(8rem + var(--_expander-icon-width)), -1 * calc(8rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(6rem + var(--_expander-icon-width)), -1 * calc(6rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-9{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(13.5rem + var(--_expander-icon-width)), -1 * calc(13.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(9rem + var(--_expander-icon-width)), -1 * calc(9rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(6.75rem + var(--_expander-icon-width)), -1 * calc(6.75rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-grid__row-indentation--level-10{--_indicator-inline-inset: max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));padding-inline-start:max(var(--is-large, 1)*max(calc(15rem + var(--_expander-icon-width)), -1 * calc(15rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(calc(10rem + var(--_expander-icon-width)), -1 * calc(10rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(calc(7.5rem + var(--_expander-icon-width)), -1 * calc(7.5rem + var(--_expander-icon-width)))*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}}@layer ig.material{@container style(--ig-theme: material){.igx-grid{--ig-chip-disabled-text-color: var(--ig-gray-500);--ig-chip-disabled-background: var(--ig-gray-300);--ig-chip-disabled-border-color: var(--ig-gray-300)}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group igx-prefix,.igx-grid__filtering-row .igx-input-group igx-suffix{align-items:center;background:rgba(0,0,0,0) !important;border-radius:0 !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end:hover,.igx-grid__filtering-row .igx-input-group igx-prefix:hover,.igx-grid__filtering-row .igx-input-group igx-suffix:hover{background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group .igx-input-group__input{border:0 !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__input:hover{border:0 !important;box-shadow:none !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle::after,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle::before{display:none !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-main{padding-inline-start:0 !important;margin:0 !important;border:0 !important;outline:none !important;box-shadow:none !important;background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group{border:.0625rem solid var(--ig-gray-300) !important}.igx-grid__filtering-row .igx-input-group:hover{border-color:var(--ig-primary-500) !important}.igx-grid__filtering-row .igx-input-group--focused{border-color:var(--ig-primary-500) !important;border-width:.0625rem !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__input{border:0 !important;box-shadow:none !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-main,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end{margin:0 !important;border:0 !important;outline:none !important;box-shadow:none !important;background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group--focused igx-prefix,.igx-grid__filtering-row .igx-input-group--focused igx-suffix{background:rgba(0,0,0,0) !important;border-radius:0 !important}.igx-grid__filtering-row .igx-input-group__line{display:none !important}.igx-grid__filtering-row igx-prefix:focus{color:var(--ig-secondary-500) !important}.igx-grid__filtering-row igx-suffix igx-icon{outline-style:none !important}.igx-grid__filtering-row igx-suffix igx-icon:focus{color:var(--ig-secondary-500) !important}.igx-grid__filtering-row igx-suffix igx-icon+igx-icon{margin-inline-start:.25rem !important}.igx-grid__filtering-row igx-prefix,.igx-grid__filtering-row igx-suffix{padding:0 max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)) !important}}}@layer ig.material{@container style(--ig-theme: material){.igx-grid-th__title{font-weight:600}.igx-grid-th__icons .igx-excel-filter__icon--filtered,.igx-grid-th__icons .sort-icon{--ig-icon-size: 0.9375rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group igx-prefix,.igx-grid__filtering-row .igx-input-group igx-suffix{align-items:center;background:rgba(0,0,0,0) !important;border-radius:0 !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end:hover,.igx-grid__filtering-row .igx-input-group igx-prefix:hover,.igx-grid__filtering-row .igx-input-group igx-suffix:hover{background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group .igx-input-group__input{border:0 !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-start:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-end:hover,.igx-grid__filtering-row .igx-input-group .igx-input-group__input:hover{border:0 !important;box-shadow:none !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle::after,.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle::before{display:none !important}.igx-grid__filtering-row .igx-input-group .igx-input-group__bundle-main{padding-inline-start:0 !important;margin:0 !important;border:0 !important;outline:none !important;box-shadow:none !important;background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group{border:.0625rem solid var(--ig-gray-300) !important}.igx-grid__filtering-row .igx-input-group:hover{border-color:var(--ig-primary-500) !important}.igx-grid__filtering-row .igx-input-group--focused{border-color:var(--ig-primary-500) !important;border-width:.0625rem !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__input{border:0 !important;box-shadow:none !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-main,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end{margin:0 !important;border:0 !important;outline:none !important;box-shadow:none !important;background:rgba(0,0,0,0) !important}.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-start,.igx-grid__filtering-row .igx-input-group--focused .igx-input-group__bundle-end,.igx-grid__filtering-row .igx-input-group--focused igx-prefix,.igx-grid__filtering-row .igx-input-group--focused igx-suffix{background:rgba(0,0,0,0) !important;border-radius:0 !important}.igx-grid__filtering-row .igx-input-group__line{display:none !important}.igx-grid__filtering-row igx-prefix:focus{color:var(--ig-secondary-500) !important}.igx-grid__filtering-row igx-suffix igx-icon{outline-style:none !important}.igx-grid__filtering-row igx-suffix igx-icon:focus{color:var(--ig-secondary-500) !important}.igx-grid__filtering-row igx-suffix igx-icon+igx-icon{margin-inline-start:.25rem !important}.igx-grid__filtering-row igx-prefix,.igx-grid__filtering-row igx-suffix{padding:0 max(var(--is-large, 1)*max(0.875rem, -1 * 0.875rem),var(--is-medium, 1)*max(0.625rem, -1 * 0.625rem),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)) !important}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-grid-th__title{font-weight:700}.igx-grid-th__icons .igx-excel-filter__icon--filtered,.igx-grid-th__icons .sort-icon{--ig-icon-size: 0.9375rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-grid{box-shadow:0 0 0 .0625rem var(--grid-border-color)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-grid-th__title{font-weight:800}.igx-grid-th__icons .igx-excel-filter__icon--filtered,.igx-grid-th__icons .sort-icon{--ig-icon-size: 0.9375rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid{--cell-height: max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem));--header-size: max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem));--grouparea-size: max(var(--is-large, 1) * max(3.4375rem, -1 * 3.4375rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem));--_expander-icon-width: 1rem;--_hierarchical-action-icon: 1rem;--ig-chip-disabled-text-color: var(--ig-gray-500);--ig-chip-disabled-background: var(--ig-gray-200);--ig-chip-disabled-border-color: var(--ig-gray-300);--_grid-header-border-color: var(--header-border-color);--_grid-action-border-color: var(--action-border-color)}.igx-grid__filtering-row-main igx-chips-area{margin-inline:.75rem;gap:.25rem}.igx-grid__filtering-row igx-input-group{--size: calc(sizable(rem(32px), rem(40px), rem(48px)) - 0.5rem)}.igx-grid__filtering-cell{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing)))) !important}.igx-grid__td:not(.igx-grid__td--editing){padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));font-family:var(--ig-detail-1-font-family, var(--ig-font-family));font-size:var(--ig-detail-1-font-size);font-weight:var(--ig-detail-1-font-weight);font-style:var(--ig-detail-1-font-style);line-height:var(--ig-detail-1-line-height);letter-spacing:var(--ig-detail-1-letter-spacing);text-transform:var(--ig-detail-1-text-transform);margin-top:var(--ig-detail-1-margin-top);margin-bottom:var(--ig-detail-1-margin-bottom)}.igx-grid__td--bool{--component-size: 2}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-500)}.igx-grid__tr--edited::before{width:.25rem}.igx-grid__tr--header igx-icon{--component-size: 2}.igx-grid__tr-action:last-of-type{min-height:max(var(--is-large, 1)*max(3rem, -1 * 3rem),var(--is-medium, 1)*max(2.5rem, -1 * 2.5rem),var(--is-small, 1)*max(2rem, -1 * 2rem))}.igx-grid__tree-grouping-indicator{margin-inline-end:.25rem}.igx-grid__tree-grouping-indicator igx-icon{--component-size: 2}.igx-grid__hierarchical-expander igx-icon{--component-size: 2}.igx-grid__header-indentation igx-icon{--component-size: 2}.igx-grid__group-content{padding-inline-start:0}.igx-grid__grouping-indicator{padding-inline-end:1rem}.igx-grid__grouping-indicator igx-icon{--component-size: 2}.igx-grid__tr-pivot{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-th{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}.igx-grid-th__expander{--component-size: 2}.igx-grid-th__icons .igx-excel-filter__icon{--ig-icon-size: 0.75rem}.igx-grid-th--filtrable :where(.igx-grid-th__title){opacity:.75}.igx-grid-th--sortable .igx-grid-th__icons .sort-icon{opacity:.75}.igx-grid-th--filtrable.igx-grid-th--sortable :where(.sort-icon){opacity:1}.igx-grid-th__icons .igx-excel-filter__icon--filtered igx-icon,.igx-grid-th__icons .sort-icon igx-icon{--component-size: 2}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-thead__title{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-drop-area{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}}}@layer ig.indigo{@container style(--ig-theme: indigo){igx-icon.igx-group-label__icon{--component-size: 2}.igx-group-label__count-badge{--shadow: none}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-grid-th--sortable .igx-grid-th__icons .sort-icon{opacity:.75}.igx-grid-th--sortable .igx-grid-th__icons .sort-icon:hover{opacity:1}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-grid__pivot-empty-chip-area{color:var(--ig-gray-600)}.igx-grid__tr-header-row igx-pivot-row-dimension-header-group igx-icon{opacity:.75}.igx-grid__tr-header-row igx-pivot-row-dimension-header-group igx-icon:hover{opacity:1;cursor:pointer}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-grid-thead__title igx-icon{opacity:.75}.igx-grid-thead__title igx-icon:hover{opacity:1;cursor:pointer}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: dark){.igx-grid{--ig-chip-disabled-text-color: var(--ig-gray-300);--ig-chip-disabled-background: var(--ig-gray-200);--ig-chip-disabled-border-color: var(--ig-gray-200)}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-500)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-grid{--ig-chip-disabled-text-color: var(--ig-gray-400);--ig-chip-disabled-background: var(--ig-gray-200);--ig-chip-disabled-border-color: var(--ig-gray-200)}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-500)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-grid{--ig-chip-disabled-text-color: var(--ig-gray-400);--ig-chip-disabled-background: var(--ig-gray-200);--ig-chip-disabled-border-color: var(--ig-gray-200)}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-500)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-grid-th--sortable .igx-grid-th__icons .sort-icon{opacity:.85}.igx-grid-th--filtrable :where(.igx-grid-th__title){opacity:.85}.igx-grid-th--fw igx-icon{--component-size: 3}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-grid{--ig-chip-disabled-text-color: var(--ig-gray-300);--ig-chip-disabled-background: var(--ig-gray-200);--ig-chip-disabled-border-color: var(--ig-gray-200)}.igx-grid__td--bool .igx-icon--error{color:var(--ig-gray-500)}.igx-grid__pivot-empty-chip-area{color:hsl(from var(--ig-gray-50-contrast) h s l/0.6)}.igx-grid__tr-header-row igx-pivot-row-dimension-header-group igx-icon{opacity:.85}.igx-grid__tr-header-row igx-pivot-row-dimension-header-group igx-icon:hover{opacity:1;cursor:pointer}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-grid-thead__title igx-icon{opacity:.85}.igx-grid-thead__title igx-icon:hover{opacity:1;cursor:pointer}}}";
 
 /**
  * Injection token for setting the throttle time multiplier used in grid virtual scroll.
@@ -2203,7 +2205,7 @@ class IgxGridBaseDirective {
     }
     set batchEditing(val) {
         if (val !== this._batchEditing) {
-            delete this._transactions;
+            this._transactions = null;
             this._batchEditing = val;
             this.switchTransactionService(val);
             this.subscribeToTransactions();
@@ -2306,7 +2308,7 @@ class IgxGridBaseDirective {
      */
     set pagingState(value) {
         this._pagingState = value;
-        if (this.paginator && !this._init) {
+        if (this.paginator && !this._init && value.metadata) {
             this.paginator.totalRecords = value.metadata.countRecords;
         }
     }
@@ -2416,6 +2418,7 @@ class IgxGridBaseDirective {
         if (this.hasNoData) {
             return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyGridDefaultTemplate;
         }
+        return undefined;
     }
     /**
      * @hidden @internal
@@ -3446,13 +3449,14 @@ class IgxGridBaseDirective {
          * @hidden @internal
          */
         this.preventContainerScroll = (evt) => {
-            if (evt.target.scrollTop !== 0) {
-                this.verticalScrollContainer.addScroll(evt.target.scrollTop);
-                evt.target.scrollTop = 0;
+            const target = evt.target;
+            if (target.scrollTop !== 0) {
+                this.verticalScrollContainer.addScroll(target.scrollTop);
+                target.scrollTop = 0;
             }
-            if (evt.target.scrollLeft !== 0) {
-                this.headerContainer.scrollPosition += evt.target.scrollLeft;
-                evt.target.scrollLeft = 0;
+            if (target.scrollLeft !== 0) {
+                this.headerContainer.scrollPosition += target.scrollLeft;
+                target.scrollLeft = 0;
             }
         };
         /**
@@ -3693,7 +3697,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;
@@ -4186,7 +4190,7 @@ class IgxGridBaseDirective {
         this.textHighlightService.destroyGroup(this.id);
         if (this._advancedFilteringOverlayId) {
             this.overlayService.detach(this._advancedFilteringOverlayId);
-            delete this._advancedFilteringOverlayId;
+            this._advancedFilteringOverlayId = '';
         }
         this.overlayIDs.forEach(overlayID => {
             const overlay = this.overlayService.getOverlayById(overlayID);
@@ -4510,7 +4514,7 @@ class IgxGridBaseDirective {
     getHeaderGroupWidth(column) {
         return this.hasColumnLayouts
             ? ''
-            : `${parseFloat(column.calcWidth)}px`;
+            : `${parseFloat(column.calcWidth?.toString() || column.defaultWidth)}px`;
     }
     /**
      * Returns the column by field name.
@@ -4571,7 +4575,7 @@ class IgxGridBaseDirective {
      * ```
      */
     get totalRecords() {
-        return this._totalRecords >= 0 ? this._totalRecords : this.pagingState?.metadata.countRecords;
+        return this._totalRecords >= 0 ? this._totalRecords : this.pagingState?.metadata?.countRecords || 0;
     }
     set totalRecords(total) {
         if (total >= 0) {
@@ -4593,7 +4597,7 @@ class IgxGridBaseDirective {
         let totalWidth = 0;
         let i = 0;
         for (i; i < cols.length; i++) {
-            totalWidth += parseFloat(cols[i].calcWidth) || 0;
+            totalWidth += parseFloat(cols[i].calcWidth?.toString() || cols[i].defaultWidth);
         }
         this._totalWidth = totalWidth;
         return totalWidth;
@@ -4952,50 +4956,26 @@ class IgxGridBaseDirective {
     filterGlobal(value, condition, ignoreCase) {
         this.filteringService.filterGlobal(value, condition, ignoreCase);
     }
-    /**
-     * 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);
+    enableSummaries(rest, customSummary) {
+        if (Array.isArray(rest)) {
+            this._multipleSummaries(rest, true);
+        }
+        else if (typeof rest === 'string') {
+            this._summaries(rest, true, customSummary);
         }
         else {
-            this._summaries(rest[0], true, rest[1]);
+            this._summaries(rest.fieldName, true, rest.customSummary);
         }
     }
-    /**
-     * 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]);
+    disableSummaries(rest) {
+        if (Array.isArray(rest)) {
+            this._disableMultipleSummaries(rest);
+        }
+        else if (typeof rest === 'string') {
+            this._summaries(rest, false);
         }
         else {
-            this._summaries(rest[0], false);
+            this._summaries(rest.fieldName, false);
         }
     }
     /**
@@ -5036,10 +5016,10 @@ class IgxGridBaseDirective {
     /**
      * @hidden @internal
      */
-    refreshGridState(_args) {
+    refreshGridState(args) {
         this.crudService.endEdit(true);
         this.selectionService.clearHeaderCBState();
-        this.summaryService.clearSummaryCache();
+        this.summaryService.clearSummaryCache(args);
         this.summaryPipeTrigger++;
         this.cdr.detectChanges();
     }
@@ -5095,7 +5075,7 @@ class IgxGridBaseDirective {
         const eventArgs = this.gridAPI.get_pin_row_event_args(rowID, index, row, true);
         this.rowPinning.emit(eventArgs);
         if (eventArgs.cancel) {
-            return;
+            return undefined;
         }
         this.crudService.endEdit(false);
         const insertIndex = typeof eventArgs.insertAtIndex === 'number' ? eventArgs.insertAtIndex : this._pinnedRecordIDs.length;
@@ -5127,7 +5107,7 @@ class IgxGridBaseDirective {
         const eventArgs = this.gridAPI.get_pin_row_event_args(rowID, null, row, false);
         this.rowPinning.emit(eventArgs);
         if (eventArgs.cancel) {
-            return;
+            return undefined;
         }
         this.crudService.endEdit(false);
         this._pinnedRecordIDs.splice(index, 1);
@@ -5376,7 +5356,6 @@ 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');
@@ -5387,7 +5366,7 @@ class IgxGridBaseDirective {
             .reduce((prev, curr) => {
             const colInstance = this.hasColumnLayouts ? curr.ref : curr;
             const colWidth = !colInstance.widthConstrained ? curr.width : colInstance.calcPixelWidth;
-            let widthValue = parseFloat(colWidth);
+            let widthValue = typeof colWidth === 'string' ? parseFloat(colWidth) : colWidth;
             if (isNaN(widthValue)) {
                 widthValue = MINIMUM_COLUMN_WIDTH;
             }
@@ -5441,7 +5420,7 @@ class IgxGridBaseDirective {
         let sum = 0;
         for (const col of fc) {
             if (col.level === 0) {
-                sum += parseFloat(col.calcWidth);
+                sum += parseFloat(col.calcWidth?.toString() || col.defaultWidth);
             }
         }
         // includes features at start
@@ -5462,7 +5441,7 @@ class IgxGridBaseDirective {
         let sum = 0;
         for (const col of fc) {
             if (col.level === 0) {
-                sum += parseFloat(col.calcWidth);
+                sum += parseFloat(col.calcWidth?.toString() || col.defaultWidth);
             }
         }
         return sum;
@@ -5473,21 +5452,6 @@ 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
      */
@@ -5803,7 +5767,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;
@@ -5816,7 +5780,7 @@ class IgxGridBaseDirective {
         }
         let data = [];
         let result;
-        if (event.code === 'KeyC' && (event.ctrlKey || event.metaKey) && event.currentTarget.className === 'igx-grid-thead__wrapper') {
+        if (event instanceof KeyboardEvent && 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);
@@ -5844,7 +5808,9 @@ class IgxGridBaseDirective {
                 data = selectedData;
                 result = this.prepareCopyData(event, data);
             }
-            event.clipboardData.setData('text/plain', result);
+            // 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);
         }
     }
     /**
@@ -5865,8 +5831,8 @@ class IgxGridBaseDirective {
             result = result.slice(0, -2);
         }
         event.preventDefault();
-        /* Necessary for the hiearachical case but will probably have to
-           change how getSelectedData is propagated in the hiearachical grid
+        /* Necessary for the hierarchical case but will probably have to
+           change how getSelectedData is propagated in the hierarchical grid
         */
         event.stopPropagation();
         return result;
@@ -6015,7 +5981,7 @@ class IgxGridBaseDirective {
      * @hidden @internal
      */
     trackColumnChanges(_index, col) {
-        return col.field + col._calcWidth.toString();
+        return col.field + col.calcWidth?.toString();
     }
     /**
      * @hidden
@@ -6173,7 +6139,7 @@ class IgxGridBaseDirective {
     /* blazorCSSuppress */
     endEdit(commit = true, event) {
         if (!this.crudService.cellInEditMode && !this.crudService.rowInEditMode) {
-            return;
+            return undefined;
         }
         const document = this.nativeElement?.getRootNode();
         const focusWithin = this.nativeElement?.contains(document.activeElement);
@@ -6271,9 +6237,10 @@ class IgxGridBaseDirective {
      * @hidden
      */
     preventHeaderScroll(args) {
-        if (args.target.scrollLeft !== 0) {
-            this.navigation.forOfDir().getScroll().scrollLeft = args.target.scrollLeft;
-            args.target.scrollLeft = 0;
+        const target = args.target;
+        if (target.scrollLeft !== 0) {
+            this.navigation.forOfDir().getScroll().scrollLeft = target.scrollLeft;
+            target.scrollLeft = 0;
         }
     }
     beginAddRowForIndex(index, asChild = false) {
@@ -6349,6 +6316,9 @@ 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();
@@ -6924,7 +6894,7 @@ class IgxGridBaseDirective {
      */
     _disableMultipleSummaries(expressions) {
         expressions.forEach((column) => {
-            const columnName = column && column.fieldName ? column.fieldName : column;
+            const columnName = typeof column === 'string' ? column : column.fieldName;
             this._summaries(columnName, false);
         });
     }
@@ -7065,18 +7035,18 @@ class IgxGridBaseDirective {
         const isRemote = totalItems && totalItems > this.dataView.length;
         let selectionMap;
         if (this.type === 'hierarchical' && selectionCollection.size > 0) {
-            selectionMap = isRemote ? Array.from(selectionCollection) :
-                Array.from(selectionCollection).filter((tuple) => tuple[0] < source.length);
+            selectionMap = isRemote ? new Map(selectionCollection) :
+                new Map(Array.from(selectionCollection).filter((tuple) => tuple[0] < source.length));
         }
         else {
-            selectionMap = isRemote ? Array.from(this.selectionService.selection) :
-                Array.from(this.selectionService.selection).filter((tuple) => tuple[0] < source.length);
+            selectionMap = isRemote ? new Map(this.selectionService.selection) :
+                new Map(Array.from(this.selectionService.selection).filter((tuple) => tuple[0] < source.length));
         }
         if (this.cellSelection === GridSelectionMode.single && activeEl) {
-            selectionMap.push([activeEl.row, new Set().add(activeEl.column)]);
+            selectionMap.set(activeEl.row, new Set().add(activeEl.column));
         }
         if (this.cellSelection === GridSelectionMode.none && activeEl) {
-            selectionMap.push([activeEl.row, new Set().add(activeEl.column)]);
+            selectionMap.set(activeEl.row, new Set().add(activeEl.column));
         }
         if (columnData) {
             selectedData = columnData;
@@ -7203,6 +7173,9 @@ class IgxGridBaseDirective {
         if (colResized) {
             this.resetCachedWidths();
             this.cdr.detectChanges();
+            // Rebuild master's sizesCache once from updated calcPixelWidth values
+            this.headerContainer.resolveDataDiff();
+            this._horizontalForOfs.forEach(vfor => vfor.resolveDataDiff());
         }
         if (this.isColumnWidthSum) {
             this.calcWidth = this.getColumnWidthSum();
@@ -7301,7 +7274,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 || item.defaultWidth), 10) || this.minColumnWidth;
+            colSum += parseInt((item.calcWidth?.toString() || item.defaultWidth), 10) || this.minColumnWidth;
         });
         if (!colSum) {
             return null;
@@ -7406,12 +7379,15 @@ class IgxGridBaseDirective {
         if (!cb) {
             return;
         }
-        let row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
+        let row = this.summariesRowList.filter(s => s.index !== 0).find(r => r.index === rowIndex) || this.rowList.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).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
+                    row = this.summariesRowList.filter(s => s.index !== 0).find(r => r.index === rowIndex) || this.rowList.find(r => r.index === rowIndex);
+                    if (!row) {
+                        return;
+                    }
                     const cbArgs = this.getNavigationArguments(row, visibleColIndex);
                     cb(cbArgs);
                 });
@@ -7429,7 +7405,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;
@@ -7437,7 +7413,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';
@@ -7445,7 +7421,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 };
@@ -7503,7 +7479,7 @@ class IgxGridBaseDirective {
         return isPinned && !isInPinnedArea;
     }
     isValidPosition(rowIndex, colIndex) {
-        const rows = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).length;
+        const rows = this.summariesRowList.filter(s => s.index !== 0).length + this.rowList.length;
         const cols = this._columns.filter(col => !col.columnGroup && col.visibleIndex >= 0 && !col.hidden).length;
         if (rows < 1 || cols < 1) {
             return false;
@@ -7639,7 +7615,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.toArray().find((x) => !x.isMerged);
+            const targetCell = this.dataRowList.first.cells.find((x) => !x.isMerged);
             if (!targetCell) {
                 this._shouldRecalcRowHeight = true;
                 return;
@@ -8417,6 +8393,10 @@ class IgxGridComponent extends IgxGridBaseDirective {
          * @hidden
          */
         this._groupingExpandState = [];
+        /**
+         * @hidden
+         */
+        this.groupingDiffer = null;
         this._hideGroupedColumns = false;
         this._dropAreaMessage = null;
         this._showGroupArea = true;
@@ -9220,6 +9200,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
             }
             return new IgxGridCell(this, row.index, column);
         }
+        return undefined;
     }
     /**
      * Returns a `CellType` object that matches the conditions.
@@ -9239,6 +9220,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
         if (row && column) {
             return new IgxGridCell(this, row.index, column);
         }
+        return undefined;
     }
     pinRow(rowID, index) {
         const row = this.getRowByKey(rowID);
@@ -9355,11 +9337,11 @@ class IgxGridComponent extends IgxGridBaseDirective {
         }
         return !expression.fieldName;
     }
-    _setGroupColsVisibility(value) {
+    _setGroupColsVisibility(hidden) {
         if (this._columns.length > 0 && !this.hasColumnLayouts) {
             this.groupingExpressions.forEach((expr) => {
                 const col = this.getColumnByName(expr.fieldName);
-                col.hidden = value;
+                col.hidden = hidden;
             });
         }
     }
@@ -9384,7 +9366,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($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 }); }
+        ], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridComponent, decorators: [{
             type: Component,
@@ -9441,7 +9423,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($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" }]
+                    ], 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" }]
         }], propDecorators: { dataPreLoad: [{
                 type: Output
             }], groupingExpressionsChange: [{