igniteui-angular 22.2.2 → 22.2.4

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

@@ -1083,7 +1083,7 @@ class IgxTreeGridCellComponent extends IgxGridExpandableCellComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeGridCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", 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\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        : 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.2.0", ngImport: i0, type: IgxTreeGridCellComponent, decorators: [{
             type: Component,
@@ -1115,7 +1115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                         IgxStringReplacePipe,
                         IgxColumnFormatterPipe,
                         IgxTextSelectionDirective
-                    ], 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" }]
+                    ], 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\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        : 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" }]
         }], propDecorators: { level: [{
                 type: Input
             }], showIndicator: [{
@@ -1253,11 +1253,11 @@ class IgxTreeGridRowComponent extends IgxRowDirective {
         this.grid.crudService.enterAddRowMode(this, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxTreeGridRowComponent, isStandalone: true, selector: "igx-tree-grid-row", inputs: { treeRow: "treeRow" }, host: { properties: { "attr.aria-expanded": "this.expanded" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], viewQueries: [{ propertyName: "_cells", predicate: ["treeCell"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"\n></ng-container>\n\n<ng-template #addTemp>\n  <div\n    class=\"igx-grid__tr--inner\"\n    [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\"\n    (animationend)=\"animationEndHandler()\"\n  >\n    <ng-container *ngTemplateOutlet=\"defaultTemp\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #defaultTemp>\n  @if (rowDraggable) {\n    <div\n      [class]=\"resolveDragIndicatorClasses\"\n      role=\"gridcell\"\n      [igxRowDrag]=\"this\"\n      (click)=\"$event.stopPropagation()\"\n      [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()!\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.grid.dragIndicatorIconTemplate\n            ? this.grid.dragIndicatorIconTemplate\n            : this.grid.dragIndicatorIconBase\n        \"\n      ></ng-container>\n    </div>\n  }\n  @if (showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (click)=\"onRowSelectorClick($event)\"\n      (pointerdown)=\"$event.preventDefault()\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          this.grid.rowSelectorTemplate\n            ? this.grid.rowSelectorTemplate\n            : rowSelectorBaseTemplate;\n          context: {\n            $implicit: {\n              index: viewIndex,\n              rowID: key,\n              key,\n              selected: selected,\n            },\n          }\n        \"\n      >\n      </ng-template>\n    </div>\n  }\n  @if (pinnedStartColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedStartColumns }\n      \"\n    ></ng-container>\n  }\n  <ng-template\n    igxGridFor\n    let-col\n    [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\"\n    let-colIndex=\"index\"\n    [igxForScrollOrientation]=\"'horizontal'\"\n    [igxForContainerSize]=\"grid.unpinnedWidth\"\n    [igxForSizePropName]=\"'calcPixelWidth'\"\n    [igxForTrackBy]=\"grid.trackColumnChanges\"\n    #igxDirRef\n  >\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  </ng-template>\n  @if (pinnedEndColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedEndColumns }\n      \"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n  <div class=\"igx-grid__cbx-padding\">\n    <igx-checkbox\n      [tabindex]=\"-1\"\n      [readonly]=\"true\"\n      [checked]=\"selected\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"deleted\"\n      [disableRipple]=\"true\"\n      [disableTransitions]=\"grid.disableTransitions\"\n      [aria-label]=\"rowCheckboxAriaLabel\"\n    >\n    </igx-checkbox>\n  </div>\n</ng-template>\n\n<ng-template #pinnedCellsTemplate let-col let-columns=\"columns\">\n  @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #cellTemplate let-col=\"column\">\n  <igx-grid-cell\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    class=\"igx-grid__td igx-grid__td--fw\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [firstPinned]=\"col.isFirstPinned\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-grid-cell>\n</ng-template>\n<ng-template #treeCellTemplate let-col=\"column\">\n  <igx-tree-grid-cell\n    class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      (col.dataType === 'number' ||\n        col.dataType === 'percent' ||\n        col.dataType === 'currency') &&\n      col.visibleIndex !== 0\n    \"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [level]=\"treeRow.level!\"\n    [expanded]=\"expanded\"\n    [showIndicator]=\"showIndicator\"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [isLoading]=\"isLoading\"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-tree-grid-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "isPlaceholder", "isMerged", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxTreeGridCellComponent, selector: "igx-tree-grid-cell", inputs: ["level", "showIndicator", "isLoading", "row"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxTreeGridRowComponent, isStandalone: true, selector: "igx-tree-grid-row", inputs: { treeRow: "treeRow" }, host: { properties: { "attr.aria-expanded": "this.expanded" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], viewQueries: [{ propertyName: "_cells", predicate: ["treeCell"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"\n></ng-container>\n\n<ng-template #addTemp>\n  <div\n    class=\"igx-grid__tr--inner\"\n    [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\"\n    (animationend)=\"animationEndHandler()\"\n  >\n    <ng-container *ngTemplateOutlet=\"defaultTemp\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #defaultTemp>\n  @if (rowDraggable) {\n    <div\n      [class]=\"resolveDragIndicatorClasses\"\n      role=\"gridcell\"\n      [igxRowDrag]=\"this\"\n      (click)=\"$event.stopPropagation()\"\n      [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()!\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.grid.dragIndicatorIconTemplate\n            ? this.grid.dragIndicatorIconTemplate\n            : this.grid.dragIndicatorIconBase\n        \"\n      ></ng-container>\n    </div>\n  }\n  @if (showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (click)=\"onRowSelectorClick($event)\"\n      (pointerdown)=\"$event.preventDefault()\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          this.grid.rowSelectorTemplate\n            ? this.grid.rowSelectorTemplate\n            : rowSelectorBaseTemplate;\n          context: {\n            $implicit: {\n              index: viewIndex,\n              rowID: key,\n              key,\n              selected: selected,\n            },\n          }\n        \"\n      >\n      </ng-template>\n    </div>\n  }\n  @if (pinnedStartColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedStartColumns }\n      \"\n    ></ng-container>\n  }\n  <ng-template\n    igxGridFor\n    let-col\n    [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\"\n    let-colIndex=\"index\"\n    [igxForScrollOrientation]=\"'horizontal'\"\n    [igxForContainerSize]=\"grid.unpinnedWidth\"\n    [igxForSizePropName]=\"'calcPixelWidth'\"\n    [igxForTrackBy]=\"grid.trackColumnChanges\"\n    #igxDirRef\n  >\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  </ng-template>\n  @if (pinnedEndColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedEndColumns }\n      \"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n  <div class=\"igx-grid__cbx-padding\">\n    <igx-checkbox\n      [tabindex]=\"-1\"\n      [readonly]=\"true\"\n      [checked]=\"selected\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"deleted\"\n      [disableRipple]=\"true\"\n      [disableTransitions]=\"grid.disableTransitions\"\n      [aria-label]=\"rowCheckboxAriaLabel\"\n    >\n    </igx-checkbox>\n  </div>\n</ng-template>\n\n<ng-template #pinnedCellsTemplate let-col let-columns=\"columns\">\n  @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #cellTemplate let-col=\"column\">\n  <igx-grid-cell\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    class=\"igx-grid__td igx-grid__td--fw\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [firstPinned]=\"col.isFirstPinned\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-grid-cell>\n</ng-template>\n<ng-template #treeCellTemplate let-col=\"column\">\n  <igx-tree-grid-cell\n    class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      (col.dataType === 'number' ||\n        col.dataType === 'percent' ||\n        col.dataType === 'currency') &&\n      col.visibleIndex !== 0\n    \"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [level]=\"treeRow.level!\"\n    [expanded]=\"expanded\"\n    [showIndicator]=\"showIndicator\"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [isLoading]=\"isLoading\"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-tree-grid-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "isPlaceholder", "isMerged", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxTreeGridCellComponent, selector: "igx-tree-grid-cell", inputs: ["level", "showIndicator", "isLoading", "row"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxTreeGridRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxTreeGridCellComponent, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container\n  *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"\n></ng-container>\n\n<ng-template #addTemp>\n  <div\n    class=\"igx-grid__tr--inner\"\n    [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\"\n    (animationend)=\"animationEndHandler()\"\n  >\n    <ng-container *ngTemplateOutlet=\"defaultTemp\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #defaultTemp>\n  @if (rowDraggable) {\n    <div\n      [class]=\"resolveDragIndicatorClasses\"\n      role=\"gridcell\"\n      [igxRowDrag]=\"this\"\n      (click)=\"$event.stopPropagation()\"\n      [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()!\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.grid.dragIndicatorIconTemplate\n            ? this.grid.dragIndicatorIconTemplate\n            : this.grid.dragIndicatorIconBase\n        \"\n      ></ng-container>\n    </div>\n  }\n  @if (showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (click)=\"onRowSelectorClick($event)\"\n      (pointerdown)=\"$event.preventDefault()\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          this.grid.rowSelectorTemplate\n            ? this.grid.rowSelectorTemplate\n            : rowSelectorBaseTemplate;\n          context: {\n            $implicit: {\n              index: viewIndex,\n              rowID: key,\n              key,\n              selected: selected,\n            },\n          }\n        \"\n      >\n      </ng-template>\n    </div>\n  }\n  @if (pinnedStartColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedStartColumns }\n      \"\n    ></ng-container>\n  }\n  <ng-template\n    igxGridFor\n    let-col\n    [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\"\n    let-colIndex=\"index\"\n    [igxForScrollOrientation]=\"'horizontal'\"\n    [igxForContainerSize]=\"grid.unpinnedWidth\"\n    [igxForSizePropName]=\"'calcPixelWidth'\"\n    [igxForTrackBy]=\"grid.trackColumnChanges\"\n    #igxDirRef\n  >\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  </ng-template>\n  @if (pinnedEndColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedEndColumns }\n      \"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n  <div class=\"igx-grid__cbx-padding\">\n    <igx-checkbox\n      [tabindex]=\"-1\"\n      [readonly]=\"true\"\n      [checked]=\"selected\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"deleted\"\n      [disableRipple]=\"true\"\n      [disableTransitions]=\"grid.disableTransitions\"\n      [aria-label]=\"rowCheckboxAriaLabel\"\n    >\n    </igx-checkbox>\n  </div>\n</ng-template>\n\n<ng-template #pinnedCellsTemplate let-col let-columns=\"columns\">\n  @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #cellTemplate let-col=\"column\">\n  <igx-grid-cell\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    class=\"igx-grid__td igx-grid__td--fw\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [firstPinned]=\"col.isFirstPinned\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-grid-cell>\n</ng-template>\n<ng-template #treeCellTemplate let-col=\"column\">\n  <igx-tree-grid-cell\n    class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      (col.dataType === 'number' ||\n        col.dataType === 'percent' ||\n        col.dataType === 'currency') &&\n      col.visibleIndex !== 0\n    \"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [level]=\"treeRow.level!\"\n    [expanded]=\"expanded\"\n    [showIndicator]=\"showIndicator\"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [isLoading]=\"isLoading\"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-tree-grid-cell>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxTreeGridCellComponent, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe], template: "<ng-container\n  *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"\n></ng-container>\n\n<ng-template #addTemp>\n  <div\n    class=\"igx-grid__tr--inner\"\n    [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\"\n    (animationend)=\"animationEndHandler()\"\n  >\n    <ng-container *ngTemplateOutlet=\"defaultTemp\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #defaultTemp>\n  @if (rowDraggable) {\n    <div\n      [class]=\"resolveDragIndicatorClasses\"\n      role=\"gridcell\"\n      [igxRowDrag]=\"this\"\n      (click)=\"$event.stopPropagation()\"\n      [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()!\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.grid.dragIndicatorIconTemplate\n            ? this.grid.dragIndicatorIconTemplate\n            : this.grid.dragIndicatorIconBase\n        \"\n      ></ng-container>\n    </div>\n  }\n  @if (showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (click)=\"onRowSelectorClick($event)\"\n      (pointerdown)=\"$event.preventDefault()\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          this.grid.rowSelectorTemplate\n            ? this.grid.rowSelectorTemplate\n            : rowSelectorBaseTemplate;\n          context: {\n            $implicit: {\n              index: viewIndex,\n              rowID: key,\n              key,\n              selected: selected,\n            },\n          }\n        \"\n      >\n      </ng-template>\n    </div>\n  }\n  @if (pinnedStartColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedStartColumns }\n      \"\n    ></ng-container>\n  }\n  <ng-template\n    igxGridFor\n    let-col\n    [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\"\n    let-colIndex=\"index\"\n    [igxForScrollOrientation]=\"'horizontal'\"\n    [igxForContainerSize]=\"grid.unpinnedWidth\"\n    [igxForSizePropName]=\"'calcPixelWidth'\"\n    [igxForTrackBy]=\"grid.trackColumnChanges\"\n    #igxDirRef\n  >\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  </ng-template>\n  @if (pinnedEndColumns.length > 0) {\n    <ng-container\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedEndColumns }\n      \"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n  <div class=\"igx-grid__cbx-padding\">\n    <igx-checkbox\n      [tabindex]=\"-1\"\n      [readonly]=\"true\"\n      [checked]=\"selected\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"deleted\"\n      [disableRipple]=\"true\"\n      [disableTransitions]=\"grid.disableTransitions\"\n      [aria-label]=\"rowCheckboxAriaLabel\"\n    >\n    </igx-checkbox>\n  </div>\n</ng-template>\n\n<ng-template #pinnedCellsTemplate let-col let-columns=\"columns\">\n  @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          col.visibleIndex === 0 ? treeCellTemplate : cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  }\n</ng-template>\n\n<ng-template #cellTemplate let-col=\"column\">\n  <igx-grid-cell\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    class=\"igx-grid__td igx-grid__td--fw\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [firstPinned]=\"col.isFirstPinned\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-grid-cell>\n</ng-template>\n<ng-template #treeCellTemplate let-col=\"column\">\n  <igx-tree-grid-cell\n    class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    [class.igx-grid__td--pinned]=\"col.pinned\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      (col.dataType === 'number' ||\n        col.dataType === 'percent' ||\n        col.dataType === 'currency') &&\n      col.visibleIndex !== 0\n    \"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [level]=\"treeRow.level!\"\n    [expanded]=\"expanded\"\n    [showIndicator]=\"showIndicator\"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [lastPinned]=\"col.isLastPinned\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [isLoading]=\"isLoading\"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n    #treeCell\n  >\n  </igx-tree-grid-cell>\n</ng-template>\n" }]
         }], propDecorators: { _cells: [{
                 type: ViewChildren,
                 args: ['treeCell']