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

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

@@ -152,10 +152,10 @@ class IgxGridAPIService extends GridBaseAPIService {
             groupingExpressions.splice(index, 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridAPIService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridAPIService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridAPIService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridAPIService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridAPIService, decorators: [{
             type: Injectable
         }] });
 
@@ -358,10 +358,10 @@ class IgxGridGroupByRowComponent {
     get showRowSelectors() {
         return this.grid.rowSelection !== GridSelectionMode.none && !this.hideGroupRowSelectors;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridGroupByRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.ɵ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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridGroupByRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridGroupByRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-groupby-row', imports: [
                         NgTemplateOutlet,
@@ -447,10 +447,10 @@ class IgxGridGroupByAreaComponent extends IgxGroupByAreaDirective {
     clearGrouping(name) {
         this.grid.clearGrouping(name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridGroupByAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxGridGroupByAreaComponent, isStandalone: true, selector: "igx-grid-group-by-area", inputs: { sortingExpressions: "sortingExpressions", grid: "grid" }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    @for (expression of chipExpressions; track expression.fieldName; let last = $last) {\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    }\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridGroupByAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridGroupByAreaComponent, isStandalone: true, selector: "igx-grid-group-by-area", inputs: { sortingExpressions: "sortingExpressions", grid: "grid" }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    @for (expression of chipExpressions; track expression.fieldName; let last = $last) {\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    }\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridGroupByAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridGroupByAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-grid-group-by-area', providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe], template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    @for (expression of chipExpressions; track expression.fieldName; let last = $last) {\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    }\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n" }]
         }], propDecorators: { sortingExpressions: [{
@@ -483,10 +483,10 @@ class IgxGridDetailsPipe {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridDetailsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxGridDetailsPipe, isStandalone: true, name: "gridDetails" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridDetailsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridDetailsPipe, isStandalone: true, name: "gridDetails" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridDetailsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridDetailsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridDetails',
@@ -608,10 +608,10 @@ class IgxGridSummaryPipe {
         });
         return data;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridSummaryPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxGridSummaryPipe, isStandalone: true, name: "gridSummary" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSummaryPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSummaryPipe, isStandalone: true, name: "gridSummary" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridSummaryPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSummaryPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridSummary',
@@ -638,10 +638,10 @@ class IgxGridSortingPipe {
         this.grid.setFilteredSortedData(result, pinned);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridSortingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxGridSortingPipe, isStandalone: true, name: "gridSort" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSortingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSortingPipe, isStandalone: true, name: "gridSort" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridSortingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridSortingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridSort',
@@ -678,10 +678,10 @@ class IgxGridGroupingPipe {
         this.grid.groupingMetadata = fullResult.metadata;
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridGroupingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxGridGroupingPipe, isStandalone: true, name: "gridGroupBy" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridGroupingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridGroupingPipe, isStandalone: true, name: "gridGroupBy" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridGroupingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridGroupingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridGroupBy',
@@ -699,10 +699,10 @@ class IgxGridCellMergePipe {
         const result = DataUtil.merge(collection, colsToMerge, mergeStrategy, [], this.grid);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridCellMergePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxGridCellMergePipe, isStandalone: true, name: "gridCellMerge" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellMergePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellMergePipe, isStandalone: true, name: "gridCellMerge" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridCellMergePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellMergePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridCellMerge',
@@ -775,10 +775,10 @@ class IgxGridUnmergeActivePipe {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridUnmergeActivePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxGridUnmergeActivePipe, isStandalone: true, name: "gridUnmergeActive" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridUnmergeActivePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridUnmergeActivePipe, isStandalone: true, name: "gridUnmergeActive" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridUnmergeActivePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridUnmergeActivePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridUnmergeActive',
@@ -812,10 +812,10 @@ class IgxGridPagingPipe {
         this.grid.pagingState = state;
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridPagingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxGridPagingPipe, isStandalone: true, name: "gridPaging" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridPagingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridPagingPipe, isStandalone: true, name: "gridPaging" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridPagingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridPagingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridPaging',
@@ -842,10 +842,10 @@ class IgxGridFilteringPipe {
         this.grid.setFilteredData(result, pinned);
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxGridFilteringPipe, isStandalone: true, name: "gridFiltering" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringPipe, isStandalone: true, name: "gridFiltering" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridFilteringPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridFiltering',
@@ -906,10 +906,10 @@ class IgxGridExpandableCellComponent extends IgxGridCellComponent {
         const isGhost = this.intRow.pinned && this.intRow.disabled;
         return !this.editMode && (!this.intRow.pinned || isGhost);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridExpandableCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.ɵ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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridExpandableCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridExpandableCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-expandable-grid-cell', imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule,
                         IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent,
@@ -947,16 +947,16 @@ class IgxGridRowComponent extends IgxRowDirective {
             row
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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.ɵ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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridRowComponent, decorators: [{
+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" }]
         }] });
 
 // 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));border-inline-end:var(--row-border-width) 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{display:inline-flex;justify-content:center;align-items:center;margin:0 .25rem}.igx-grid-grouparea__connector igx-icon{width:var(--ig-icon-size, 1rem) !important;height:var(--ig-icon-size, 1rem) !important;font-size:var(--ig-icon-size, 1rem) !important}[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-icon,.igx-grid-th__icons .sort-icon igx-icon{--size: var(--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-icon,.igx-grid-th__icons .sort-icon igx-icon{--size: var(--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-icon,.igx-grid-th__icons .sort-icon igx-icon{--size: var(--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);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}}}";
 
 /**
  * Injection token for setting the throttle time multiplier used in grid virtual scroll.
@@ -3675,7 +3675,12 @@ class IgxGridBaseDirective {
             this.summaryService.clearSummaryCache(args);
         });
         this.subscribeToTransactions();
-        this.scrollNotify.pipe(filter(() => !this._init), throttle(() => this.throttleTime$.pipe(take(1), switchMap(time => timer(time, this.throttleScheduler)))), destructor)
+        this.scrollNotify.pipe(filter(() => !this._init), throttle(() => this.throttleTime$.pipe(take(1), switchMap(time => timer(time, this.throttleScheduler))), 
+        // `trailing: true` ensures the final settle position of a fast momentum
+        // scroll is processed; otherwise the last scroll events are dropped and the
+        // rows stay frozen at an intermediate startIndex while the scrollbar is at top.
+        // `leading: true` keeps the immediate response on scroll start.
+        { leading: true, trailing: true }), destructor)
             .subscribe((event) => {
             this.verticalScrollHandler(event);
         });
@@ -7785,8 +7790,8 @@ class IgxGridBaseDirective {
             this.notifyChanges(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.0", type: IgxGridBaseDirective, isStandalone: true, inputs: { snackbarDisplayTime: "snackbarDisplayTime", autoGenerate: ["autoGenerate", "autoGenerate", booleanAttribute], autoGenerateExclude: "autoGenerateExclude", moving: ["moving", "moving", booleanAttribute], emptyGridTemplate: "emptyGridTemplate", addRowEmptyTemplate: "addRowEmptyTemplate", loadingGridTemplate: "loadingGridTemplate", summaryRowHeight: "summaryRowHeight", dataCloneStrategy: "dataCloneStrategy", clipboardOptions: "clipboardOptions", rowClasses: "rowClasses", rowStyles: "rowStyles", primaryKey: "primaryKey", uniqueColumnValuesStrategy: "uniqueColumnValuesStrategy", dragGhostCustomTemplate: "dragGhostCustomTemplate", rowEditTextTemplate: "rowEditTextTemplate", rowAddTextTemplate: "rowAddTextTemplate", rowEditActionsTemplate: "rowEditActionsTemplate", rowExpandedIndicatorTemplate: "rowExpandedIndicatorTemplate", rowCollapsedIndicatorTemplate: "rowCollapsedIndicatorTemplate", headerExpandedIndicatorTemplate: "headerExpandedIndicatorTemplate", headerCollapsedIndicatorTemplate: "headerCollapsedIndicatorTemplate", excelStyleHeaderIconTemplate: "excelStyleHeaderIconTemplate", sortAscendingHeaderIconTemplate: "sortAscendingHeaderIconTemplate", sortDescendingHeaderIconTemplate: "sortDescendingHeaderIconTemplate", sortHeaderIconTemplate: "sortHeaderIconTemplate", resourceStrings: "resourceStrings", filteringLogic: "filteringLogic", filteringExpressionsTree: "filteringExpressionsTree", advancedFilteringExpressionsTree: "advancedFilteringExpressionsTree", locale: "locale", pagingMode: "pagingMode", hideRowSelectors: ["hideRowSelectors", "hideRowSelectors", booleanAttribute], rowDraggable: ["rowDraggable", "rowDraggable", booleanAttribute], validationTrigger: "validationTrigger", rowEditable: ["rowEditable", "rowEditable", booleanAttribute], height: "height", width: "width", rowHeight: "rowHeight", columnWidth: "columnWidth", emptyGridMessage: "emptyGridMessage", isLoading: ["isLoading", "isLoading", booleanAttribute], emptyFilteredGridMessage: "emptyFilteredGridMessage", pinning: "pinning", allowFiltering: ["allowFiltering", "allowFiltering", booleanAttribute], allowAdvancedFiltering: ["allowAdvancedFiltering", "allowAdvancedFiltering", booleanAttribute], filterMode: "filterMode", summaryPosition: "summaryPosition", summaryCalculationMode: "summaryCalculationMode", showSummaryOnCollapse: ["showSummaryOnCollapse", "showSummaryOnCollapse", booleanAttribute], filterStrategy: "filterStrategy", sortStrategy: "sortStrategy", mergeStrategy: "mergeStrategy", sortingOptions: "sortingOptions", selectedRows: "selectedRows", headSelectorTemplate: "headSelectorTemplate", rowSelectorTemplate: "rowSelectorTemplate", dragIndicatorIconTemplate: "dragIndicatorIconTemplate", sortingExpressions: "sortingExpressions", batchEditing: ["batchEditing", "batchEditing", booleanAttribute], cellSelection: "cellSelection", cellMergeMode: "cellMergeMode", rowSelection: "rowSelection", columnSelection: "columnSelection", expansionStates: "expansionStates", outlet: "outlet", totalRecords: "totalRecords", selectRowOnClick: ["selectRowOnClick", "selectRowOnClick", booleanAttribute] }, outputs: { filteringExpressionsTreeChange: "filteringExpressionsTreeChange", advancedFilteringExpressionsTreeChange: "advancedFilteringExpressionsTreeChange", gridScroll: "gridScroll", cellClick: "cellClick", rowClick: "rowClick", formGroupCreated: "formGroupCreated", validationStatusChange: "validationStatusChange", selected: "selected", rowSelectionChanging: "rowSelectionChanging", columnSelectionChanging: "columnSelectionChanging", columnPin: "columnPin", columnPinned: "columnPinned", cellEditEnter: "cellEditEnter", cellEditExit: "cellEditExit", cellEdit: "cellEdit", cellEditDone: "cellEditDone", rowEditEnter: "rowEditEnter", rowEdit: "rowEdit", rowEditDone: "rowEditDone", rowEditExit: "rowEditExit", columnInit: "columnInit", sorting: "sorting", sortingDone: "sortingDone", filtering: "filtering", filteringDone: "filteringDone", rowAdded: "rowAdded", rowDeleted: "rowDeleted", rowDelete: "rowDelete", rowAdd: "rowAdd", columnResized: "columnResized", contextMenu: "contextMenu", doubleClick: "doubleClick", columnVisibilityChanging: "columnVisibilityChanging", columnVisibilityChanged: "columnVisibilityChanged", columnMovingStart: "columnMovingStart", columnMoving: "columnMoving", columnMovingEnd: "columnMovingEnd", gridKeydown: "gridKeydown", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", gridCopy: "gridCopy", expansionStatesChange: "expansionStatesChange", selectedRowsChange: "selectedRowsChange", rowToggle: "rowToggle", rowPinning: "rowPinning", rowPinned: "rowPinned", activeNodeChange: "activeNodeChange", sortingExpressionsChange: "sortingExpressionsChange", toolbarExporting: "toolbarExporting", rangeSelected: "rangeSelected", rendered: "rendered", localeChange: "localeChange", dataChanging: "dataChanging", dataChanged: "dataChanged" }, host: { listeners: { "mouseleave": "hideActionStrip()" }, properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.hostRole", "class.igx-grid": "this.baseClass", "attr.aria-colcount": "this.ariaColCount", "attr.aria-rowcount": "this.ariaRowCount", "style.height": "this.height", "style.width": "this.hostWidth", "class.igx-grid--loading": "this.isLoading", "style.display": "this.displayStyle", "style.grid-template-rows": "this.templateRows" } }, queries: [{ propertyName: "excelStyleLoadingValuesTemplateDirective", first: true, predicate: IgxExcelStyleLoadingValuesTemplateDirective, descendants: true, read: IgxExcelStyleLoadingValuesTemplateDirective, static: true }, { propertyName: "rowAddText", first: true, predicate: IgxRowAddTextDirective, descendants: true, read: TemplateRef }, { propertyName: "rowExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxRowExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxRowCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleHeaderIconDirectiveTemplate", first: true, predicate: IgxExcelStyleHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortAscendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortAscendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortDescendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortDescendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortHeaderIconDirectiveTemplate", first: true, predicate: IgxSortHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingDirectiveTemplate", first: true, predicate: IgxGridLoadingTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyDirectiveTemplate", first: true, predicate: IgxGridEmptyTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "columnList", predicate: IgxColumnComponent, descendants: true, read: IgxColumnComponent }, { propertyName: "headSelectorsTemplates", predicate: IgxHeadSelectorDirective, read: TemplateRef }, { propertyName: "rowSelectorsTemplates", predicate: IgxRowSelectorDirective, read: TemplateRef }, { propertyName: "dragGhostCustomTemplates", predicate: IgxRowDragGhostDirective, read: TemplateRef }, { propertyName: "rowEditCustomDirectives", predicate: IgxRowEditTemplateDirective, read: TemplateRef }, { propertyName: "rowEditTextDirectives", predicate: IgxRowEditTextDirective, read: TemplateRef }, { propertyName: "rowEditActionsDirectives", predicate: IgxRowEditActionsDirective, read: TemplateRef }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken }, { propertyName: "dragIndicatorIconTemplates", predicate: IgxDragIndicatorIconDirective, read: TemplateRef }, { propertyName: "rowEditTabsCUSTOM", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "toolbar", predicate: IgxToolbarToken }, { propertyName: "paginationComponents", predicate: IgxPaginatorToken }], viewQueries: [{ propertyName: "addRowSnackbar", first: true, predicate: IgxSnackbarComponent, descendants: true }, { propertyName: "resizeLine", first: true, predicate: IgxGridColumnResizerComponent, descendants: true }, { propertyName: "loadingOverlay", first: true, predicate: ["loadingOverlay"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "emptyFilteredGridTemplate", first: true, predicate: ["emptyFilteredGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyGridDefaultTemplate", first: true, predicate: ["defaultEmptyGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "loadingGridDefaultTemplate", first: true, predicate: ["defaultLoadingGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "parentVirtDir", first: true, predicate: ["scrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScrollContainer", first: true, predicate: ["verticalScrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScroll", first: true, predicate: ["verticalScrollHolder"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "scr", first: true, predicate: ["scr"], descendants: true, read: ElementRef, static: true }, { propertyName: "headerSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, read: ElementRef }, { propertyName: "theadRow", first: true, predicate: IgxGridHeaderRowComponent, descendants: true, static: true }, { propertyName: "groupArea", first: true, predicate: IgxGridGroupByAreaComponent, descendants: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, static: true }, { propertyName: "bodyViewContainerRef", first: true, predicate: ["bodyViewContainerRef"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "tbodyContainer", first: true, predicate: IgxGridBodyDirective, descendants: true, read: ElementRef, static: true }, { propertyName: "pinContainer", first: true, predicate: ["pinContainer"], descendants: true, read: ElementRef }, { propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true, static: true }, { propertyName: "dragIndicatorIconBase", first: true, predicate: ["dragIndicatorIconBase"], descendants: true, read: TemplateRef, static: true }, { propertyName: "rowEditingOverlay", first: true, predicate: ["rowEditingOverlay"], descendants: true, read: IgxToggleDirective }, { propertyName: "_outletDirective", first: true, predicate: ["igxFilteringOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "anchor", first: true, predicate: ["sink"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultRowEditTemplate", first: true, predicate: ["defaultRowEditTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tmpOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "rowEditTabsDEFAULT", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "_summaryRowList", predicate: ["summaryRow"], descendants: true, read: IgxSummaryRowComponent }, { propertyName: "_rowList", predicate: ["row"], descendants: true }, { propertyName: "_pinnedRowList", predicate: ["pinnedRow"], descendants: true }, { propertyName: "_dataRowList", predicate: IgxRowDirective, descendants: true, read: IgxRowDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.1", type: IgxGridBaseDirective, isStandalone: true, inputs: { snackbarDisplayTime: "snackbarDisplayTime", autoGenerate: ["autoGenerate", "autoGenerate", booleanAttribute], autoGenerateExclude: "autoGenerateExclude", moving: ["moving", "moving", booleanAttribute], emptyGridTemplate: "emptyGridTemplate", addRowEmptyTemplate: "addRowEmptyTemplate", loadingGridTemplate: "loadingGridTemplate", summaryRowHeight: "summaryRowHeight", dataCloneStrategy: "dataCloneStrategy", clipboardOptions: "clipboardOptions", rowClasses: "rowClasses", rowStyles: "rowStyles", primaryKey: "primaryKey", uniqueColumnValuesStrategy: "uniqueColumnValuesStrategy", dragGhostCustomTemplate: "dragGhostCustomTemplate", rowEditTextTemplate: "rowEditTextTemplate", rowAddTextTemplate: "rowAddTextTemplate", rowEditActionsTemplate: "rowEditActionsTemplate", rowExpandedIndicatorTemplate: "rowExpandedIndicatorTemplate", rowCollapsedIndicatorTemplate: "rowCollapsedIndicatorTemplate", headerExpandedIndicatorTemplate: "headerExpandedIndicatorTemplate", headerCollapsedIndicatorTemplate: "headerCollapsedIndicatorTemplate", excelStyleHeaderIconTemplate: "excelStyleHeaderIconTemplate", sortAscendingHeaderIconTemplate: "sortAscendingHeaderIconTemplate", sortDescendingHeaderIconTemplate: "sortDescendingHeaderIconTemplate", sortHeaderIconTemplate: "sortHeaderIconTemplate", resourceStrings: "resourceStrings", filteringLogic: "filteringLogic", filteringExpressionsTree: "filteringExpressionsTree", advancedFilteringExpressionsTree: "advancedFilteringExpressionsTree", locale: "locale", pagingMode: "pagingMode", hideRowSelectors: ["hideRowSelectors", "hideRowSelectors", booleanAttribute], rowDraggable: ["rowDraggable", "rowDraggable", booleanAttribute], validationTrigger: "validationTrigger", rowEditable: ["rowEditable", "rowEditable", booleanAttribute], height: "height", width: "width", rowHeight: "rowHeight", columnWidth: "columnWidth", emptyGridMessage: "emptyGridMessage", isLoading: ["isLoading", "isLoading", booleanAttribute], emptyFilteredGridMessage: "emptyFilteredGridMessage", pinning: "pinning", allowFiltering: ["allowFiltering", "allowFiltering", booleanAttribute], allowAdvancedFiltering: ["allowAdvancedFiltering", "allowAdvancedFiltering", booleanAttribute], filterMode: "filterMode", summaryPosition: "summaryPosition", summaryCalculationMode: "summaryCalculationMode", showSummaryOnCollapse: ["showSummaryOnCollapse", "showSummaryOnCollapse", booleanAttribute], filterStrategy: "filterStrategy", sortStrategy: "sortStrategy", mergeStrategy: "mergeStrategy", sortingOptions: "sortingOptions", selectedRows: "selectedRows", headSelectorTemplate: "headSelectorTemplate", rowSelectorTemplate: "rowSelectorTemplate", dragIndicatorIconTemplate: "dragIndicatorIconTemplate", sortingExpressions: "sortingExpressions", batchEditing: ["batchEditing", "batchEditing", booleanAttribute], cellSelection: "cellSelection", cellMergeMode: "cellMergeMode", rowSelection: "rowSelection", columnSelection: "columnSelection", expansionStates: "expansionStates", outlet: "outlet", totalRecords: "totalRecords", selectRowOnClick: ["selectRowOnClick", "selectRowOnClick", booleanAttribute] }, outputs: { filteringExpressionsTreeChange: "filteringExpressionsTreeChange", advancedFilteringExpressionsTreeChange: "advancedFilteringExpressionsTreeChange", gridScroll: "gridScroll", cellClick: "cellClick", rowClick: "rowClick", formGroupCreated: "formGroupCreated", validationStatusChange: "validationStatusChange", selected: "selected", rowSelectionChanging: "rowSelectionChanging", columnSelectionChanging: "columnSelectionChanging", columnPin: "columnPin", columnPinned: "columnPinned", cellEditEnter: "cellEditEnter", cellEditExit: "cellEditExit", cellEdit: "cellEdit", cellEditDone: "cellEditDone", rowEditEnter: "rowEditEnter", rowEdit: "rowEdit", rowEditDone: "rowEditDone", rowEditExit: "rowEditExit", columnInit: "columnInit", sorting: "sorting", sortingDone: "sortingDone", filtering: "filtering", filteringDone: "filteringDone", rowAdded: "rowAdded", rowDeleted: "rowDeleted", rowDelete: "rowDelete", rowAdd: "rowAdd", columnResized: "columnResized", contextMenu: "contextMenu", doubleClick: "doubleClick", columnVisibilityChanging: "columnVisibilityChanging", columnVisibilityChanged: "columnVisibilityChanged", columnMovingStart: "columnMovingStart", columnMoving: "columnMoving", columnMovingEnd: "columnMovingEnd", gridKeydown: "gridKeydown", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", gridCopy: "gridCopy", expansionStatesChange: "expansionStatesChange", selectedRowsChange: "selectedRowsChange", rowToggle: "rowToggle", rowPinning: "rowPinning", rowPinned: "rowPinned", activeNodeChange: "activeNodeChange", sortingExpressionsChange: "sortingExpressionsChange", toolbarExporting: "toolbarExporting", rangeSelected: "rangeSelected", rendered: "rendered", localeChange: "localeChange", dataChanging: "dataChanging", dataChanged: "dataChanged" }, host: { listeners: { "mouseleave": "hideActionStrip()" }, properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.hostRole", "class.igx-grid": "this.baseClass", "attr.aria-colcount": "this.ariaColCount", "attr.aria-rowcount": "this.ariaRowCount", "style.height": "this.height", "style.width": "this.hostWidth", "class.igx-grid--loading": "this.isLoading", "style.display": "this.displayStyle", "style.grid-template-rows": "this.templateRows" } }, queries: [{ propertyName: "excelStyleLoadingValuesTemplateDirective", first: true, predicate: IgxExcelStyleLoadingValuesTemplateDirective, descendants: true, read: IgxExcelStyleLoadingValuesTemplateDirective, static: true }, { propertyName: "rowAddText", first: true, predicate: IgxRowAddTextDirective, descendants: true, read: TemplateRef }, { propertyName: "rowExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxRowExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxRowCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleHeaderIconDirectiveTemplate", first: true, predicate: IgxExcelStyleHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortAscendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortAscendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortDescendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortDescendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortHeaderIconDirectiveTemplate", first: true, predicate: IgxSortHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "loadingDirectiveTemplate", first: true, predicate: IgxGridLoadingTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyDirectiveTemplate", first: true, predicate: IgxGridEmptyTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "columnList", predicate: IgxColumnComponent, descendants: true, read: IgxColumnComponent }, { propertyName: "headSelectorsTemplates", predicate: IgxHeadSelectorDirective, read: TemplateRef }, { propertyName: "rowSelectorsTemplates", predicate: IgxRowSelectorDirective, read: TemplateRef }, { propertyName: "dragGhostCustomTemplates", predicate: IgxRowDragGhostDirective, read: TemplateRef }, { propertyName: "rowEditCustomDirectives", predicate: IgxRowEditTemplateDirective, read: TemplateRef }, { propertyName: "rowEditTextDirectives", predicate: IgxRowEditTextDirective, read: TemplateRef }, { propertyName: "rowEditActionsDirectives", predicate: IgxRowEditActionsDirective, read: TemplateRef }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken }, { propertyName: "dragIndicatorIconTemplates", predicate: IgxDragIndicatorIconDirective, read: TemplateRef }, { propertyName: "rowEditTabsCUSTOM", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "toolbar", predicate: IgxToolbarToken }, { propertyName: "paginationComponents", predicate: IgxPaginatorToken }], viewQueries: [{ propertyName: "addRowSnackbar", first: true, predicate: IgxSnackbarComponent, descendants: true }, { propertyName: "resizeLine", first: true, predicate: IgxGridColumnResizerComponent, descendants: true }, { propertyName: "loadingOverlay", first: true, predicate: ["loadingOverlay"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "emptyFilteredGridTemplate", first: true, predicate: ["emptyFilteredGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyGridDefaultTemplate", first: true, predicate: ["defaultEmptyGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "loadingGridDefaultTemplate", first: true, predicate: ["defaultLoadingGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "parentVirtDir", first: true, predicate: ["scrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScrollContainer", first: true, predicate: ["verticalScrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScroll", first: true, predicate: ["verticalScrollHolder"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "scr", first: true, predicate: ["scr"], descendants: true, read: ElementRef, static: true }, { propertyName: "headerSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, read: ElementRef }, { propertyName: "theadRow", first: true, predicate: IgxGridHeaderRowComponent, descendants: true, static: true }, { propertyName: "groupArea", first: true, predicate: IgxGridGroupByAreaComponent, descendants: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, static: true }, { propertyName: "bodyViewContainerRef", first: true, predicate: ["bodyViewContainerRef"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "tbodyContainer", first: true, predicate: IgxGridBodyDirective, descendants: true, read: ElementRef, static: true }, { propertyName: "pinContainer", first: true, predicate: ["pinContainer"], descendants: true, read: ElementRef }, { propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true, static: true }, { propertyName: "dragIndicatorIconBase", first: true, predicate: ["dragIndicatorIconBase"], descendants: true, read: TemplateRef, static: true }, { propertyName: "rowEditingOverlay", first: true, predicate: ["rowEditingOverlay"], descendants: true, read: IgxToggleDirective }, { propertyName: "_outletDirective", first: true, predicate: ["igxFilteringOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "anchor", first: true, predicate: ["sink"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultRowEditTemplate", first: true, predicate: ["defaultRowEditTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tmpOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "rowEditTabsDEFAULT", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "_summaryRowList", predicate: ["summaryRow"], descendants: true, read: IgxSummaryRowComponent }, { propertyName: "_rowList", predicate: ["row"], descendants: true }, { propertyName: "_pinnedRowList", predicate: ["pinnedRow"], descendants: true }, { propertyName: "_dataRowList", predicate: IgxRowDirective, descendants: true, read: IgxRowDirective }], ngImport: i0 }); }
 }
 __decorate([
     WatchChanges()
@@ -7839,7 +7844,7 @@ __decorate([
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "selectRowOnClick", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridBaseDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { snackbarDisplayTime: [{
                 type: Input
@@ -9365,8 +9370,8 @@ class IgxGridComponent extends IgxGridBaseDirective {
         }
         return val;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IgxGridComponent, isStandalone: true, selector: "igx-grid", inputs: { groupsExpanded: ["groupsExpanded", "groupsExpanded", booleanAttribute], dropAreaTemplate: "dropAreaTemplate", detailTemplate: "detailTemplate", id: "id", data: "data", totalItemCount: "totalItemCount", groupingExpressions: "groupingExpressions", groupingExpansionState: "groupingExpansionState", hideGroupedColumns: ["hideGroupedColumns", "hideGroupedColumns", booleanAttribute], groupStrategy: "groupStrategy", dropAreaMessage: "dropAreaMessage", groupByRowSelectorTemplate: "groupByRowSelectorTemplate", groupRowTemplate: "groupRowTemplate", showGroupArea: ["showGroupArea", "showGroupArea", booleanAttribute] }, outputs: { dataPreLoad: "dataPreLoad", groupingExpressionsChange: "groupingExpressionsChange", groupingExpansionStateChange: "groupingExpansionStateChange", groupingDone: "groupingDone" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridComponent, isStandalone: true, selector: "igx-grid", inputs: { groupsExpanded: ["groupsExpanded", "groupsExpanded", booleanAttribute], dropAreaTemplate: "dropAreaTemplate", detailTemplate: "detailTemplate", id: "id", data: "data", totalItemCount: "totalItemCount", groupingExpressions: "groupingExpressions", groupingExpansionState: "groupingExpansionState", hideGroupedColumns: ["hideGroupedColumns", "hideGroupedColumns", booleanAttribute], groupStrategy: "groupStrategy", dropAreaMessage: "dropAreaMessage", groupByRowSelectorTemplate: "groupByRowSelectorTemplate", groupRowTemplate: "groupRowTemplate", showGroupArea: ["showGroupArea", "showGroupArea", booleanAttribute] }, outputs: { dataPreLoad: "dataPreLoad", groupingExpressionsChange: "groupingExpressionsChange", groupingExpansionStateChange: "groupingExpansionStateChange", groupingDone: "groupingDone" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, providers: [
             IgxGridCRUDService,
             IgxGridMRLNavigationService,
             IgxGridNavigationService,
@@ -9379,9 +9384,9 @@ 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\" [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($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-grid-row  class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:hasCellsToMerge:false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <div [attr.data-index]=\"rowIndex\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (beforeViewDetach)=\"viewDetachHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                    @if (this.groupingExpressions.length > 0) {\n                        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                    }\n                    <ng-template\n                        [ngTemplateOutlet]=\"detailTemplate\"\n                        [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <ng-container #bodyViewContainerRef></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div class=\"igx-grid__loading-outlet\">\n        <div igxToggle #loadingOverlay>\n            @if (shouldOverlayLoading) {\n                <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n            }\n        </div>\n    </div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" role=\"rowgroup\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\"\n        [class.igx-grid__scroll-start--pinned]=\"pinnedStartColumns.length > 0\"\n        [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n        [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this), $implicit: this }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxGridRowComponent, selector: "igx-grid-row" }, { kind: "component", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridGroupingPipe, name: "gridGroupBy" }, { kind: "pipe", type: IgxGridPagingPipe, name: "gridPaging" }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridSummaryPipe, name: "gridSummary" }, { kind: "pipe", type: IgxGridDetailsPipe, name: "gridDetails" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
                         IgxGridCRUDService,
@@ -9436,7 +9441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", 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\" [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($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"presentation\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-grid-row  class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:hasCellsToMerge:false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <div [attr.data-index]=\"rowIndex\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (beforeViewDetach)=\"viewDetachHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:hasCellsToMerge:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                    @if (this.groupingExpressions.length > 0) {\n                        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                    }\n                    <ng-template\n                        [ngTemplateOutlet]=\"detailTemplate\"\n                        [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <ng-container #bodyViewContainerRef></ng-container>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div class=\"igx-grid__loading-outlet\">\n        <div igxToggle #loadingOverlay>\n            @if (shouldOverlayLoading) {\n                <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n            }\n        </div>\n    </div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"presentation\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" role=\"rowgroup\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" role=\"presentation\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\"\n        [class.igx-grid__scroll-start--pinned]=\"pinnedStartColumns.length > 0\"\n        [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n        [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this), $implicit: this }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n" }]
         }], propDecorators: { dataPreLoad: [{
                 type: Output
             }], groupingExpressionsChange: [{
@@ -9609,8 +9614,8 @@ const IGX_GRID_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxGridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: IgxGridModule, imports: [IgxGridComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: IgxGridModule, imports: [IgxGridComponent,
             IgxGroupByRowTemplateDirective,
             IgxGridDetailTemplateDirective,
             IgxRowAddTextDirective,
@@ -9793,7 +9798,7 @@ class IgxGridModule {
             IgxPageSizeSelectorComponent,
             IgxPaginatorContentDirective,
             IgxPaginatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridModule, imports: [IgxGridComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridModule, imports: [IgxGridComponent,
             IgxGridFooterComponent,
             IgxAdvancedFilteringDialogComponent,
             // IGX_GRID_ACTIONS
@@ -9832,7 +9837,7 @@ class IgxGridModule {
             IgxPageNavigationComponent,
             IgxPageSizeSelectorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IgxGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [