igniteui-angular 22.1.0-rc.0 → 22.1.1

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

@@ -1076,7 +1076,7 @@ class IgxTreeGridCellComponent extends IgxGridExpandableCellComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTreeGridCellComponent, isStandalone: true, selector: "igx-tree-grid-cell", inputs: { level: "level", showIndicator: "showIndicator", isLoading: "isLoading", row: "row" }, usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n  @if (displayPinnedChip) {\n    <igx-chip\n      class=\"igx-grid__td--pinned-chip\"\n      [disabled]=\"true\"\n      [style.--ig-size]=\"1\"\n      >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\n    </div>\n  }\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <igx-icon\n      family=\"default\"\n      [name]=\"value ? 'confirm' : 'close'\"\n      [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >\n    </igx-icon>\n  }\n  @if (column.dataType === 'image') {\n    <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n  }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n  @if (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{ !isEmptyAddRowCell ? value : column.header || column.field }}\n    </div>\n  }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n  @if (column.dataType === 'string' || column.dataType === 'image') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-input-group [style.--ig-size]=\"1\">\n        <input\n          igxInput\n          [attr.aria-describedby]=\"ariaDescribeBy\"\n          [attr.aria-invalid]=\"isInvalid\"\n          [igxFocus]=\"true\"\n          [igxTextSelection]=\"true\"\n          [formControl]=\"formControl\"\n          (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n          (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n        />\n      </igx-input-group>\n    </ng-container>\n  }\n  @if (column.dataType === 'number') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'boolean') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-checkbox\n        [checked]=\"editValue\"\n        [igxFocus]=\"true\"\n        [disableRipple]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-checkbox>\n    </ng-container>\n  }\n  @if (column.dataType === 'date') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-date-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [weekStart]=\"column.pipeArgs.weekStart!\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n      >\n      </igx-date-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'time') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-time-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n      ></igx-time-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'dateTime') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        type=\"text\"\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [formControl]=\"formControl\"\n        igxInput\n        [locale]=\"grid.locale\"\n        [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n        [igxFocus]=\"true\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'currency') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      @if (grid.currencyPositionLeft) {\n        <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n      }\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n      @if (!grid.currencyPositionLeft) {\n        <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n      }\n    </igx-input-group>\n  }\n  @if (column.dataType === 'percent') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n      <igx-suffix>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </igx-suffix>\n    </igx-input-group>\n  }\n</ng-template>\n@if (!editMode) {\n  @if (level > 0) {\n    <div\n      #indentationDiv\n      class=\"igx-grid__tree-cell--padding-level-{{ level }}\"\n      [ngStyle]=\"{\n        'padding-inline-start':\n          'calc(var(--ig-tree-indent-size) *' + level + ')',\n      }\"\n    ></div>\n  }\n  @if (!isLoading) {\n    <div\n      #indicator\n      class=\"igx-grid__tree-grouping-indicator\"\n      [ngStyle]=\"{ visibility: showIndicator ? 'visible' : 'hidden' }\"\n      (click)=\"toggle($event)\"\n      (focus)=\"onIndicatorFocus()\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"iconTemplate; context: { $implicit: $any(this) }\"\n      >\n      </ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\"\n      >\n      </ng-container>\n    </div>\n  }\n  @if (isLoading) {\n    <div\n      (dblclick)=\"onLoadingDblClick($event)\"\n      class=\"igx-grid__tree-loading-indicator\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          grid.rowLoadingIndicatorTemplate\n            ? grid.rowLoadingIndicatorTemplate\n            : defaultLoadingIndicatorTemplate\n        \"\n      >\n      </ng-container>\n    </div>\n  }\n  <ng-template #defaultLoadingIndicatorTemplate>\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </ng-template>\n}\n<ng-container *ngTemplateOutlet=\"template; context: context\"> </ng-container>\n@if (isInvalid) {\n  <igx-icon\n    family=\"default\"\n    name=\"error\"\n    #errorIcon\n    [igxTooltipTarget]=\"tooltipRef\"\n    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n  <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n  <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n<ng-template #defaultError>\n  @if (\n    formGroup.get(column.field)!.errors?.['required']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.[\n      'minlength'\n    ]\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error!\n          | igxStringReplace\n            : '{0}'\n            : formGroup.get(column.field)!.errors!.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.[\n      'maxlength'\n    ]\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error!\n          | igxStringReplace\n            : '{0}'\n            : formGroup.get(column.field)!.errors!.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.['min']\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error!\n          | igxStringReplace: '{0}' : formGroup.get(column.field)!.errors!.min.min\n      }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.['max']\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error!\n          | igxStringReplace: '{0}' : formGroup.get(column.field)!.errors!.max.max\n      }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.['email']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.['pattern']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_pattern_validation_error }}\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTreeGridCellComponent, isStandalone: true, selector: "igx-tree-grid-cell", inputs: { level: "level", showIndicator: "showIndicator", isLoading: "isLoading", row: "row" }, usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n  @if (displayPinnedChip) {\n    <igx-chip\n      class=\"igx-grid__td--pinned-chip\"\n      [disabled]=\"true\"\n      [style.--ig-size]=\"1\"\n      >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\n    </div>\n  }\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <igx-icon\n      family=\"default\"\n      [name]=\"value ? 'confirm' : 'close'\"\n      [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >\n    </igx-icon>\n  }\n  @if (column.dataType === 'image') {\n    <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n  }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n  @if (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{ !isEmptyAddRowCell ? value : column.header || column.field }}\n    </div>\n  }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n  @if (column.dataType === 'string' || column.dataType === 'image') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-input-group [style.--ig-size]=\"1\">\n        <input\n          igxInput\n          [attr.aria-describedby]=\"ariaDescribeBy\"\n          [attr.aria-invalid]=\"isInvalid\"\n          [igxFocus]=\"true\"\n          [igxTextSelection]=\"true\"\n          [formControl]=\"formControl\"\n          (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n          (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n        />\n      </igx-input-group>\n    </ng-container>\n  }\n  @if (column.dataType === 'number') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'boolean') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-checkbox\n        [checked]=\"editValue\"\n        [igxFocus]=\"true\"\n        [disableRipple]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-checkbox>\n    </ng-container>\n  }\n  @if (column.dataType === 'date') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-date-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [weekStart]=\"column.pipeArgs.weekStart!\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n      >\n      </igx-date-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'time') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-time-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n      ></igx-time-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'dateTime') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        type=\"text\"\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [formControl]=\"formControl\"\n        igxInput\n        [locale]=\"grid.locale\"\n        [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n        [igxFocus]=\"true\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'currency') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      @if (grid.currencyPositionLeft) {\n        <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n      }\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n      @if (!grid.currencyPositionLeft) {\n        <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n      }\n    </igx-input-group>\n  }\n  @if (column.dataType === 'percent') {\n    <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [igxTextSelection]=\"true\"\n        [formControl]=\"formControl\"\n      />\n      <igx-suffix>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </igx-suffix>\n    </igx-input-group>\n  }\n</ng-template>\n@if (!editMode) {\n  @if (level > 0) {\n    <div\n      #indentationDiv\n      class=\"igx-grid__tree-cell--padding-level-{{ level }}\"\n      [ngStyle]=\"{\n        'padding-inline-start':\n          'calc(var(--ig-tree-indent-size) *' + level + ')',\n      }\"\n    ></div>\n  }\n  @if (!isLoading) {\n    <div\n      #indicator\n      class=\"igx-grid__tree-grouping-indicator\"\n      [ngStyle]=\"{ visibility: showIndicator ? 'visible' : 'hidden' }\"\n      (click)=\"toggle($event)\"\n      (focus)=\"onIndicatorFocus()\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"iconTemplate; context: { $implicit: $any(this) }\"\n      >\n      </ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\"\n      >\n      </ng-container>\n    </div>\n  }\n  @if (isLoading) {\n    <div\n      (dblclick)=\"onLoadingDblClick($event)\"\n      class=\"igx-grid__tree-loading-indicator\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          grid.rowLoadingIndicatorTemplate\n            ? grid.rowLoadingIndicatorTemplate\n            : defaultLoadingIndicatorTemplate\n        \"\n      >\n      </ng-container>\n    </div>\n  }\n  <ng-template #defaultLoadingIndicatorTemplate>\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </ng-template>\n}\n<ng-container *ngTemplateOutlet=\"template; context: context\"> </ng-container>\n@if (isInvalid) {\n  <igx-icon\n    family=\"default\"\n    name=\"error\"\n    #errorIcon\n    [igxTooltipTarget]=\"tooltipRef\"\n    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n  <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n  <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n<ng-template #defaultError>\n  @if (\n    formGroup.get(column.field)!.errors?.['required']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.[\n      'minlength'\n    ]\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error!\n          | igxStringReplace\n            : '{0}'\n            : formGroup.get(column.field)!.errors!.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.[\n      'maxlength'\n    ]\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error!\n          | igxStringReplace\n            : '{0}'\n            : formGroup.get(column.field)!.errors!.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.['min']\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error!\n          | igxStringReplace: '{0}' : formGroup.get(column.field)!.errors!.min.min\n      }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.['max']\n  ) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error!\n          | igxStringReplace: '{0}' : formGroup.get(column.field)!.errors!.max.max\n      }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.['email']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (\n    formGroup.get(column.field)!.errors?.['pattern']\n  ) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_pattern_validation_error }}\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "outlined", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridCellComponent, decorators: [{
             type: Component,
@@ -1357,7 +1357,7 @@ class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTreeGridGroupByAreaComponent, isStandalone: true, selector: "igx-tree-grid-group-by-area", inputs: { hideGroupedColumns: ["hideGroupedColumns", "hideGroupedColumns", booleanAttribute] }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    @for (expression of chipExpressions; track expression.fieldName; let last = $last) {\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    }\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxTreeGridGroupByAreaComponent, isStandalone: true, selector: "igx-tree-grid-group-by-area", inputs: { hideGroupedColumns: ["hideGroupedColumns", "hideGroupedColumns", booleanAttribute] }, providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxTreeGridGroupByAreaComponent }], usesInheritance: true, ngImport: i0, template: "<igx-chips-area (reorder)=\"handleReorder($event)\" (moveEnd)=\"handleMoveEnd()\">\n    @for (expression of chipExpressions; track expression.fieldName; let last = $last) {\n        <igx-chip\n            [id]=\"expression.fieldName\"\n            [title]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title\"\n            [removable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [draggable]=\"(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            [disabled]=\"!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable\"\n            (keyDown)=\"handleKeyDown($event.owner.id, $event.originalEvent)\"\n            (remove)=\"clearGrouping($event.owner.id)\"\n            (chipClick)=\"handleClick(expression.fieldName)\"\n        >\n            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>\n            <igx-icon\n                family=\"default\"\n                [name]=\"expression.dir === 1 ? 'sort_asc' : 'sort_desc'\"\n                igxSuffix>\n            </igx-icon>\n        </igx-chip>\n\n        <span class=\"igx-grid-grouparea__connector\">\n            <igx-icon\n                family=\"default\"\n                name=\"arrow_forward\"\n                [hidden]=\"(last && !dropAreaVisible)\">\n            </igx-icon>\n        </span>\n    }\n    <div igxGroupAreaDrop\n        class=\"igx-drop-area\"\n        [attr.gridId]=\"grid.id\"\n        [hidden]=\"!dropAreaVisible\"\n        (igxDrop)=\"onDragDrop($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"dropAreaTemplate || default\"></ng-container>\n    </div>\n</igx-chips-area>\n\n<ng-template #default>\n    <igx-icon\n        family=\"default\"\n        name=\"group_work\"\n        class=\"igx-drop-area__icon\">\n    </igx-icon>\n    <span class=\"igx-drop-area__text\">{{ dropAreaMessage }}</span>\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "outlined", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxGroupByMetaPipe, name: "igxGroupByMeta" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridGroupByAreaComponent, decorators: [{
             type: Component,
@@ -2167,7 +2167,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
             IgxColumnResizingService,
             IgxForOfSyncService,
             IgxForOfScrollSyncService
-        ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n  [unpinnedColumnCollection]=\"unpinnedColumns\"\n  (keydown.meta.c)=\"copyHandler($any($event))\"\n  (keydown.control.c)=\"copyHandler($any($event))\"\n  (copy)=\"copyHandler($event)\"\n  (keydown)=\"navigation.headerNavigation($event)\"\n  (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($any($event))\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent!\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles!\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data!\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData!\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent!\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles! | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent!\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles! | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div igxToggle #loadingOverlay>\n    @if (shouldOverlayLoading) {\n      <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n    }\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [class.igx-grid__scroll-start--pinned]=\"pinnedStartColumns.length > 0\"\n    [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\n    {{ resourceStrings.igx_grid_add_row_label }}\n  </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n  <div class=\"igx-grid__loading\">\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: $any(this)\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text!\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n  <div class=\"igx-banner__message\">\n    <span class=\"igx-banner__text\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n  [unpinnedColumnCollection]=\"unpinnedColumns\"\n  (keydown.meta.c)=\"copyHandler($any($event))\"\n  (keydown.control.c)=\"copyHandler($any($event))\"\n  (copy)=\"copyHandler($event)\"\n  (keydown)=\"navigation.headerNavigation($event)\"\n  (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($any($event))\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent!\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data!\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData!\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent!\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent!\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div igxToggle #loadingOverlay>\n    @if (shouldOverlayLoading) {\n      <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n    }\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [class.igx-grid__scroll-start--pinned]=\"pinnedStartColumns.length > 0\"\n    [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\n    {{ resourceStrings.igx_grid_add_row_label }}\n  </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n  <div class=\"igx-grid__loading\">\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: $any(this)\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text!\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n  <div class=\"igx-banner__message\">\n    <span class=\"igx-banner__text\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxTreeGridComponent, decorators: [{
             type: Component,
@@ -2222,7 +2222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         IgxGridCellMergePipe,
                         IgxScrollInertiaDirective,
                         IgxGridUnmergeActivePipe
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n  [unpinnedColumnCollection]=\"unpinnedColumns\"\n  (keydown.meta.c)=\"copyHandler($any($event))\"\n  (keydown.control.c)=\"copyHandler($any($event))\"\n  (copy)=\"copyHandler($event)\"\n  (keydown)=\"navigation.headerNavigation($event)\"\n  (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($any($event))\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent!\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles!\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data!\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData!\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent!\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles! | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent!\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles! | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div igxToggle #loadingOverlay>\n    @if (shouldOverlayLoading) {\n      <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n    }\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [class.igx-grid__scroll-start--pinned]=\"pinnedStartColumns.length > 0\"\n    [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\n    {{ resourceStrings.igx_grid_add_row_label }}\n  </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n  <div class=\"igx-grid__loading\">\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: $any(this)\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text!\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n  <div class=\"igx-banner__message\">\n    <span class=\"igx-banner__text\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n  [unpinnedColumnCollection]=\"unpinnedColumns\"\n  (keydown.meta.c)=\"copyHandler($any($event))\"\n  (keydown.control.c)=\"copyHandler($any($event))\"\n  (copy)=\"copyHandler($event)\"\n  (keydown)=\"navigation.headerNavigation($event)\"\n  (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($any($event))\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent!\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data!\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData!\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent!\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent!\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div igxToggle #loadingOverlay>\n    @if (shouldOverlayLoading) {\n      <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n    }\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [class.igx-grid__scroll-start--pinned]=\"pinnedStartColumns.length > 0\"\n    [class.igx-grid__scroll-start--column-selection]=\"columnSelection !== 'none'\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\n    {{ resourceStrings.igx_grid_add_row_label }}\n  </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n  <div class=\"igx-grid__loading\">\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: $any(this)\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text!\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n  <div class=\"igx-banner__message\">\n    <span class=\"igx-banner__text\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n" }]
         }], propDecorators: { childDataKey: [{
                 type: Input
             }], foreignKey: [{