igniteui-angular 21.0.6 → 21.0.7

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

@@ -131,10 +131,10 @@ class IgxHierarchicalGridAPIService extends GridBaseAPIService {
         const index = this.get_row_index_in_data(rowID, data);
         return data[index];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridAPIService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridAPIService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridAPIService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridAPIService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridAPIService, decorators: [{
             type: Injectable
         }] });
 
@@ -569,10 +569,10 @@ class IgxHierarchicalGridNavigationService extends IgxGridNavigationService {
         }
         return { grid: currGrid, prev };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridNavigationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridNavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridNavigationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridNavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridNavigationService, decorators: [{
             type: Injectable
         }] });
 
@@ -737,10 +737,10 @@ class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
         }
         return this.gridAPI.getChildGrid(path);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridBaseDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.8", type: IgxHierarchicalGridBaseDirective, isStandalone: true, inputs: { hasChildrenKey: "hasChildrenKey", showExpandAll: ["showExpandAll", "showExpandAll", booleanAttribute] }, outputs: { dataPreLoad: "dataPreLoad" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridBaseDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.0", type: IgxHierarchicalGridBaseDirective, isStandalone: true, inputs: { hasChildrenKey: "hasChildrenKey", showExpandAll: ["showExpandAll", "showExpandAll", booleanAttribute] }, outputs: { dataPreLoad: "dataPreLoad" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridBaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { hasChildrenKey: [{
                 type: Input
@@ -823,10 +823,10 @@ class IgxRowIslandAPIService {
     getChildGridByID(rowID) {
         return this.childGrids.get(rowID);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowIslandAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowIslandAPIService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxRowIslandAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxRowIslandAPIService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowIslandAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxRowIslandAPIService, decorators: [{
             type: Injectable
         }] });
 
@@ -1221,8 +1221,8 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         grid.childGridTemplates.clear();
         grid.onRowIslandChange();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowIslandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxRowIslandComponent, isStandalone: true, selector: "igx-row-island", inputs: { key: "key", childDataKey: "childDataKey", toolbarTemplate: "toolbarTemplate", paginatorTemplate: "paginatorTemplate", expandChildren: ["expandChildren", "expandChildren", booleanAttribute] }, outputs: { layoutChange: "layoutChange", gridCreated: "gridCreated", gridInitialized: "gridInitialized" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxRowIslandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: IgxRowIslandComponent, isStandalone: true, selector: "igx-row-island", inputs: { key: "key", childDataKey: "childDataKey", toolbarTemplate: "toolbarTemplate", paginatorTemplate: "paginatorTemplate", expandChildren: ["expandChildren", "expandChildren", booleanAttribute] }, outputs: { layoutChange: "layoutChange", gridCreated: "gridCreated", gridInitialized: "gridInitialized" }, providers: [
             IgxRowIslandAPIService,
             IgxFilteringService,
             IgxGridSelectionService
@@ -1231,7 +1231,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         <ng-content select="igx-row-island,igc-row-island"></ng-content>
     }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxRowIslandComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxRowIslandComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1320,10 +1320,10 @@ class IgxGridHierarchicalPipe {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHierarchicalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHierarchicalPipe, isStandalone: true, name: "gridHierarchical" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxGridHierarchicalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: IgxGridHierarchicalPipe, isStandalone: true, name: "gridHierarchical" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHierarchicalPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxGridHierarchicalPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridHierarchical',
@@ -1350,10 +1350,10 @@ class IgxGridHierarchicalPagingPipe {
         this.grid.pagingState = state;
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHierarchicalPagingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHierarchicalPagingPipe, isStandalone: true, name: "gridHierarchicalPaging" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxGridHierarchicalPagingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: IgxGridHierarchicalPagingPipe, isStandalone: true, name: "gridHierarchicalPaging" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxGridHierarchicalPagingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxGridHierarchicalPagingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'gridHierarchicalPaging',
@@ -1410,10 +1410,10 @@ class IgxHierarchicalGridCellComponent extends IgxGridCellComponent {
             grid.cdr.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxHierarchicalGridCellComponent, isStandalone: true, selector: "igx-hierarchical-grid-cell", providers: [HammerGesturesManager], 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</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\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:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                    ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                    : column.dataType === 'currency'\n                    ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo: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            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"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                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [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                [igxTextSelection]=\"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 [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][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: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { 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", "outlet", "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: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "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: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: IgxHierarchicalGridCellComponent, isStandalone: true, selector: "igx-hierarchical-grid-cell", providers: [HammerGesturesManager], 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</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\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:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                    ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                    : column.dataType === 'currency'\n                    ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo: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            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"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                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [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                [igxTextSelection]=\"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 [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][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: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { 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", "outlet", "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: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "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: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-cell', providers: [HammerGesturesManager], imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe], 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</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\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:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                    ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                    : column.dataType === 'currency'\n                    ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo: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            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"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                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [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                [igxTextSelection]=\"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 [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n" }]
         }] });
@@ -1525,10 +1525,10 @@ class IgxHierarchicalRowComponent extends IgxRowDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxHierarchicalRowComponent, isStandalone: true, selector: "igx-hierarchical-grid-row", host: { properties: { "class.igx-grid__tr--expanded": "this.expandedClass", "class.igx-grid__tr--highlighted": "this.highlighted" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], viewQueries: [{ propertyName: "expander", first: true, predicate: ["expander"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultEmptyTemplate", first: true, predicate: ["defaultEmptyTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_cells", predicate: i0.forwardRef(() => IgxHierarchicalGridCellComponent), descendants: true, read: IgxHierarchicalGridCellComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n<ng-template #defaultExpandedTemplate>\n    <igx-icon family=\"default\" name=\"tree_collapse\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"tree_expand\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\n    <!-- Empty icon used as spacer for size matching-->\n    <igx-icon></igx-icon>\n</ng-template>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    <!-- Drag indicator -->\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n\n    <!-- Select Row -->\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (click)=\"onRowSelectorClick($event)\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: {\n                                index: viewIndex,\n                                rowID: key,\n                                key,\n                                selected: selected,\n                                select: select,\n                                deselect: deselect }}\">\n            </ng-template>\n        </div>\n    }\n\n    <!-- Row Expander -->\n    @if (hasChildren) {\n        <div  (click)=\"expanderClick($event)\" (mousedown)='$event.preventDefault()' [ngClass]=\"expanderClassResolved\" #expander>\n            <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n            </ng-container>\n        </div>\n    }\n\n    @if (pinnedStartColumns.length > 0) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate;  context: { $implicit: this, columns: pinnedStartColumns}\"></ng-template>\n    }\n\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"' [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n        @if (this.hasMergedCells) {\n            <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n                 class=\"igx-grid__mrl-block\"\n                 [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n                 [ngStyle]=\"{\n                'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n            }\">\n                <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: this, column: col }\"></ng-container>\n            </div>\n        }\n        @else {\n            <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: this, column: col }\"></ng-container>\n        }\n    </ng-template>\n\n    @if (pinnedEndColumns.length > 0) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: { $implicit: this, columns: pinnedEndColumns}\"></ng-template>\n    }\n\n    <ng-template #rowSelectorBaseTemplate>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox\n                [tabindex]=\"-1\"\n                [readonly]=\"true\"\n                [checked]=\"selected\"\n                [disableRipple]=\"true\"\n                [disabled]=\"deleted\"\n                [disableTransitions]=\"grid.disableTransitions\"\n                [aria-label]=\"rowCheckboxAriaLabel\">\n            </igx-checkbox>\n        </div>\n    </ng-template>\n\n    <ng-template #pinnedCellsTemplate let-col let-columns=\"columns\">\n        @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n            <igx-hierarchical-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [firstPinned]=\"col.isFirstPinned\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\">\n            </igx-hierarchical-grid-cell>\n        }\n    </ng-template>\n</ng-template>\n\n<ng-template #cellTemplate let-col=\"column\">\n    <igx-hierarchical-grid-cell\n    [class.igx-grid__td--merged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n    [isMerged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    class=\"igx-grid__td igx-grid__td--fw\"\n    [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n    [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n    [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n    [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [active]=\"isCellActive(col.visibleIndex)\"\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]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\">\n</igx-hierarchical-grid-cell>\n</ng-template>\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: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxHierarchicalGridCellComponent, selector: "igx-hierarchical-grid-cell" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: IgxHierarchicalRowComponent, isStandalone: true, selector: "igx-hierarchical-grid-row", host: { properties: { "class.igx-grid__tr--expanded": "this.expandedClass", "class.igx-grid__tr--highlighted": "this.highlighted" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], viewQueries: [{ propertyName: "expander", first: true, predicate: ["expander"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultEmptyTemplate", first: true, predicate: ["defaultEmptyTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_cells", predicate: i0.forwardRef(() => IgxHierarchicalGridCellComponent), descendants: true, read: IgxHierarchicalGridCellComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n<ng-template #defaultExpandedTemplate>\n    <igx-icon family=\"default\" name=\"tree_collapse\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"tree_expand\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\n    <!-- Empty icon used as spacer for size matching-->\n    <igx-icon></igx-icon>\n</ng-template>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    <!-- Drag indicator -->\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n\n    <!-- Select Row -->\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (click)=\"onRowSelectorClick($event)\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: {\n                                index: viewIndex,\n                                rowID: key,\n                                key,\n                                selected: selected,\n                                select: select,\n                                deselect: deselect }}\">\n            </ng-template>\n        </div>\n    }\n\n    <!-- Row Expander -->\n    @if (hasChildren) {\n        <div  (click)=\"expanderClick($event)\" (mousedown)='$event.preventDefault()' [ngClass]=\"expanderClassResolved\" #expander>\n            <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n            </ng-container>\n        </div>\n    }\n\n    @if (pinnedStartColumns.length > 0) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate;  context: { $implicit: this, columns: pinnedStartColumns}\"></ng-template>\n    }\n\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"' [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n        @if (this.hasMergedCells) {\n            <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n                 class=\"igx-grid__mrl-block\"\n                 [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n                 [ngStyle]=\"{\n                'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n            }\">\n                <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: this, column: col }\"></ng-container>\n            </div>\n        }\n        @else {\n            <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: this, column: col }\"></ng-container>\n        }\n    </ng-template>\n\n    @if (pinnedEndColumns.length > 0) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: { $implicit: this, columns: pinnedEndColumns}\"></ng-template>\n    }\n\n    <ng-template #rowSelectorBaseTemplate>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox\n                [tabindex]=\"-1\"\n                [readonly]=\"true\"\n                [checked]=\"selected\"\n                [disableRipple]=\"true\"\n                [disabled]=\"deleted\"\n                [disableTransitions]=\"grid.disableTransitions\"\n                [aria-label]=\"rowCheckboxAriaLabel\">\n            </igx-checkbox>\n        </div>\n    </ng-template>\n\n    <ng-template #pinnedCellsTemplate let-col let-columns=\"columns\">\n        @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n            <igx-hierarchical-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [firstPinned]=\"col.isFirstPinned\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\">\n            </igx-hierarchical-grid-cell>\n        }\n    </ng-template>\n</ng-template>\n\n<ng-template #cellTemplate let-col=\"column\">\n    <igx-hierarchical-grid-cell\n    [class.igx-grid__td--merged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n    [isMerged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    class=\"igx-grid__td igx-grid__td--fw\"\n    [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n    [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n    [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n    [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [active]=\"isCellActive(col.visibleIndex)\"\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]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\">\n</igx-hierarchical-grid-cell>\n</ng-template>\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: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxHierarchicalGridCellComponent, selector: "igx-hierarchical-grid-cell" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], imports: [NgTemplateOutlet, IgxIconComponent, IgxRowDragDirective, NgClass, IgxGridForOfDirective, IgxHierarchicalGridCellComponent, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n<ng-template #defaultExpandedTemplate>\n    <igx-icon family=\"default\" name=\"tree_collapse\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"tree_expand\" [active]='!added'></igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\n    <!-- Empty icon used as spacer for size matching-->\n    <igx-icon></igx-icon>\n</ng-template>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    <!-- Drag indicator -->\n    @if (rowDraggable) {\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    }\n\n    <!-- Select Row -->\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (click)=\"onRowSelectorClick($event)\" (pointerdown)=\"$event.preventDefault()\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: {\n                                index: viewIndex,\n                                rowID: key,\n                                key,\n                                selected: selected,\n                                select: select,\n                                deselect: deselect }}\">\n            </ng-template>\n        </div>\n    }\n\n    <!-- Row Expander -->\n    @if (hasChildren) {\n        <div  (click)=\"expanderClick($event)\" (mousedown)='$event.preventDefault()' [ngClass]=\"expanderClassResolved\" #expander>\n            <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n            </ng-container>\n        </div>\n    }\n\n    @if (pinnedStartColumns.length > 0) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate;  context: { $implicit: this, columns: pinnedStartColumns}\"></ng-template>\n    }\n\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"' [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n        @if (this.hasMergedCells) {\n            <div [style.height.px]=\" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null\"\n                 class=\"igx-grid__mrl-block\"\n                 [style.visibility]=\"this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'\"\n                 [ngStyle]=\"{\n                'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null\n            }\">\n                <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: this, column: col }\"></ng-container>\n            </div>\n        }\n        @else {\n            <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: this, column: col }\"></ng-container>\n        }\n    </ng-template>\n\n    @if (pinnedEndColumns.length > 0) {\n        <ng-template *ngTemplateOutlet=\"pinnedCellsTemplate; context: { $implicit: this, columns: pinnedEndColumns}\"></ng-template>\n    }\n\n    <ng-template #rowSelectorBaseTemplate>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox\n                [tabindex]=\"-1\"\n                [readonly]=\"true\"\n                [checked]=\"selected\"\n                [disableRipple]=\"true\"\n                [disabled]=\"deleted\"\n                [disableTransitions]=\"grid.disableTransitions\"\n                [aria-label]=\"rowCheckboxAriaLabel\">\n            </igx-checkbox>\n        </div>\n    </ng-template>\n\n    <ng-template #pinnedCellsTemplate let-col let-columns=\"columns\">\n        @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n            <igx-hierarchical-grid-cell\n                class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n                [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n                [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n                [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n                [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n                [column]=\"col\"\n                [formatter]=\"col.formatter\"\n                [intRow]=\"this\"\n                [active]=\"isCellActive(col.visibleIndex)\"\n                [firstPinned]=\"col.isFirstPinned\"\n                [lastPinned]=\"col.isLastPinned\"\n                [rowData]=\"data\"\n                [style.min-width]=\"col.resolvedWidth\"\n                [style.max-width]=\"col.resolvedWidth\"\n                [style.flex-basis]=\"col.resolvedWidth\"\n                [width]=\"col.getCellWidth()\"\n                [visibleColumnIndex]=\"col.visibleIndex\"\n                [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n                [cellTemplate]=\"col.bodyTemplate\"\n                [cellValidationErrorTemplate]=\"col.errorTemplate\"\n                [lastSearchInfo]=\"grid.lastSearchInfo\"\n                [cellSelectionMode]=\"grid.cellSelection\"\n                [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\">\n            </igx-hierarchical-grid-cell>\n        }\n    </ng-template>\n</ng-template>\n\n<ng-template #cellTemplate let-col=\"column\">\n    <igx-hierarchical-grid-cell\n    [class.igx-grid__td--merged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n    [isMerged]=\"metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    class=\"igx-grid__td igx-grid__td--fw\"\n    [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n    [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n    [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n    [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [active]=\"isCellActive(col.visibleIndex)\"\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]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\">\n</igx-hierarchical-grid-cell>\n</ng-template>\n" }]
         }], propDecorators: { expander: [{
@@ -1706,10 +1706,10 @@ class IgxChildGridRowComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxChildGridRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: IgxChildGridRowComponent, isStandalone: true, selector: "igx-child-grid-row", inputs: { layout: "layout", parentGridID: "parentGridID", data: "data", index: "index" }, host: { properties: { "attr.aria-level": "this.level" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"igx-grid__hierarchical-indent\" [ngClass]=\"{'igx-grid__hierarchical-indent--scroll': parentHasScroll}\">\n    <ng-container #container></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxChildGridRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: IgxChildGridRowComponent, isStandalone: true, selector: "igx-child-grid-row", inputs: { layout: "layout", parentGridID: "parentGridID", data: "data", index: "index" }, host: { properties: { "attr.aria-level": "this.level" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"igx-grid__hierarchical-indent\" [ngClass]=\"{'igx-grid__hierarchical-indent--scroll': parentHasScroll}\">\n    <ng-container #container></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxChildGridRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxChildGridRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-child-grid-row', imports: [NgClass], template: "<div class=\"igx-grid__hierarchical-indent\" [ngClass]=\"{'igx-grid__hierarchical-indent--scroll': parentHasScroll}\">\n    <ng-container #container></ng-container>\n</div>\n" }]
         }], propDecorators: { layout: [{
@@ -2552,8 +2552,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
             childEntities: childEntities
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: IgxHierarchicalGridComponent, isStandalone: true, selector: "igx-hierarchical-grid", inputs: { id: "id", data: "data", totalItemCount: "totalItemCount", expandChildren: ["expandChildren", "expandChildren", booleanAttribute], schema: "schema" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: IgxHierarchicalGridComponent, isStandalone: true, selector: "igx-hierarchical-grid", inputs: { id: "id", data: "data", totalItemCount: "totalItemCount", expandChildren: ["expandChildren", "expandChildren", booleanAttribute], schema: "schema" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, providers: [
             IgxGridCRUDService,
             IgxGridValidationService,
             IgxGridSelectionService,
@@ -2569,7 +2569,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
             IgxRowIslandAPIService
         ], queries: [{ propertyName: "childLayoutList", predicate: IgxRowIslandComponent, read: IgxRowIslandComponent }, { propertyName: "allLayoutList", predicate: IgxRowIslandComponent, descendants: true, read: IgxRowIslandComponent }, { propertyName: "paginatorList", predicate: IgxPaginatorToken, descendants: true }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken, read: IgxActionStripToken }], viewQueries: [{ propertyName: "toolbarOutlet", first: true, predicate: ["toolbarOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "paginatorOutlet", first: true, predicate: ["paginatorOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "hierarchicalRecordTemplate", first: true, predicate: ["hierarchical_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childTemplate", first: true, predicate: ["child_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "templateOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "hierarchicalRows", predicate: IgxChildGridRowComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\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    (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=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n        (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody (scroll)=\"preventContainerScroll($event)\">\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        @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-hierarchical-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-hierarchical-grid-row>\n                }\n        </div>\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:[]:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData\n            ) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer class=\"igx-grid__tr--pinned\"\n                        [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                        [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\" [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\" (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\" (cachedViewLoaded)=\"cachedViewLoaded($event)\" (beforeViewDetach)=\"viewDetachHandler($event)\">\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData let-metaData=\"metaData\">\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [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>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-hierarchical-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-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div [attr.data-rowindex]=\"rowIndex\" (scroll)=\"onContainerScroll()\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                @for (layout of childLayoutList; track layout) {\n                    <igx-child-grid-row [parentGridID]=\"id\" [index]=\"rowIndex\"\n                        [data]=\"rowData\" [layout]=\"layout\" #row>\n                    </igx-child-grid-row>\n                }\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\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 class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        @if (!this.parent) {\n            <igc-trial-watermark></igc-trial-watermark>\n        }\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\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    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n        (keydown)=\"navigation.summaryNav($event)\">\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\" [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]=\"[]\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\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 #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [active]=\"hasExpandedRecords() && hasExpandableChildren\">\n    </igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\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<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\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 : resolveRowEditText || 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=\"resolveRowEditActions || 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__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\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-action-strip,igc-action-strip\"></ng-content>\n    <ng-content select=\"igx-row-island,igc-row-island\"></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: IgxHierarchicalRowComponent, selector: "igx-hierarchical-grid-row" }, { 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: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { 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: "component", type: IgxChildGridRowComponent, selector: "igx-child-grid-row", inputs: ["layout", "parentGridID", "data", "index"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { 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: IgxGridHierarchicalPipe, name: "gridHierarchical" }, { kind: "pipe", type: IgxGridHierarchicalPagingPipe, name: "gridHierarchicalPaging" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid', providers: [
                         IgxGridCRUDService,
@@ -2769,8 +2769,8 @@ const IGX_HIERARCHICAL_GRID_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxHierarchicalGridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridModule, imports: [IgxHierarchicalGridComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridModule, imports: [IgxHierarchicalGridComponent,
             IgxRowIslandComponent,
             IgxRowAddTextDirective,
             IgxRowEditActionsDirective,
@@ -2947,7 +2947,7 @@ class IgxHierarchicalGridModule {
             IgxPageSizeSelectorComponent,
             IgxPaginatorContentDirective,
             IgxPaginatorDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridModule, imports: [IgxHierarchicalGridComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridModule, imports: [IgxHierarchicalGridComponent,
             IgxGridFooterComponent,
             IgxAdvancedFilteringDialogComponent,
             // IGX_GRID_ACTIONS
@@ -2986,7 +2986,7 @@ class IgxHierarchicalGridModule {
             IgxPageNavigationComponent,
             IgxPageSizeSelectorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: IgxHierarchicalGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IgxHierarchicalGridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [