igniteui-angular 22.0.1 → 22.0.3

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

@@ -2160,7 +2160,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
             IgxColumnResizingService,
             IgxForOfSyncService,
             IgxForOfScrollSyncService
-        ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n  [unpinnedColumnCollection]=\"unpinnedColumns\"\n  (keydown.meta.c)=\"copyHandler($event)\"\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  (keydown)=\"navigation.headerNavigation($event)\"\n  (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div igxToggle #loadingOverlay>\n    @if (shouldOverlayLoading) {\n      <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n    }\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\n    {{ resourceStrings.igx_grid_add_row_label }}\n  </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n  <div class=\"igx-grid__loading\">\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: this\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n  <div class=\"igx-banner__message\">\n    <span class=\"igx-banner__text\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n  [unpinnedColumnCollection]=\"unpinnedColumns\"\n  (keydown.meta.c)=\"copyHandler($event)\"\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  (keydown)=\"navigation.headerNavigation($event)\"\n  (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div class=\"igx-grid__loading-outlet\">\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n        <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n        }\n    </div>\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\n    {{ resourceStrings.igx_grid_add_row_label }}\n  </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n  <div class=\"igx-grid__loading\">\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: this\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n  <div class=\"igx-banner__message\">\n    <span class=\"igx-banner__text\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxTreeGridComponent, decorators: [{
             type: Component,
@@ -2215,7 +2215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                         IgxGridCellMergePipe,
                         IgxScrollInertiaDirective,
                         IgxGridUnmergeActivePipe
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n  [unpinnedColumnCollection]=\"unpinnedColumns\"\n  (keydown.meta.c)=\"copyHandler($event)\"\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  (keydown)=\"navigation.headerNavigation($event)\"\n  (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div igxToggle #loadingOverlay>\n    @if (shouldOverlayLoading) {\n      <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n    }\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\n    {{ resourceStrings.igx_grid_add_row_label }}\n  </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n  <div class=\"igx-grid__loading\">\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: this\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n  <div class=\"igx-banner__message\">\n    <span class=\"igx-banner__text\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content\n  select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"\n></ng-content>\n<igx-grid-header-row\n  class=\"igx-grid-thead\"\n  tabindex=\"0\"\n  [grid]=\"this\"\n  [hasMRL]=\"hasColumnLayouts\"\n  [width]=\"calcWidth\"\n  [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n  [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n  [unpinnedColumnCollection]=\"unpinnedColumns\"\n  (keydown.meta.c)=\"copyHandler($event)\"\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  (keydown)=\"navigation.headerNavigation($event)\"\n  (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div\n  igxGridBody\n  (keydown.control.c)=\"copyHandler($event)\"\n  (copy)=\"copyHandler($event)\"\n  class=\"igx-grid__tbody\"\n  role=\"presentation\"\n>\n  <div\n    class=\"igx-grid__tbody-content\"\n    tabindex=\"0\"\n    (focus)=\"navigation.focusTbody($event)\"\n    (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.role]=\"dataView.length ? 'rowgroup' : 'row'\"\n    (dragScroll)=\"dragScroll($event)\"\n    [igxGridDragSelect]=\"selectionService.dragMode\"\n    [style.height.px]=\"totalHeight\"\n    [style.width.px]=\"totalCalcWidth\"\n    [style.width]=\"!platform.isBrowser ? '100%' : undefined\"\n    #tbody\n    (scroll)=\"preventContainerScroll($event)\"\n  >\n    @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-left\"\n      ></span>\n    }\n    @if (moving && columnInDrag && pinnedColumns.length > 0) {\n      <span\n        [igxColumnMovingDrop]=\"headerContainer\"\n        [attr.droppable]=\"true\"\n        id=\"left\"\n        class=\"igx-grid__scroll-on-drag-pinned\"\n        [style.left.px]=\"pinnedStartWidth\"\n      ></span>\n    }\n\n    @if (mergedDataInView && mergedDataInView.length > 0) {\n      <div\n        igxScrollInertia\n        [IgxScrollInertiaScrollContainer]=\"\n          this.verticalScrollContainer.dc.instance.scrollContainer\n        \"\n        [IgxScrollInertiaDirection]=\"\n          this.verticalScrollContainer.dc.instance.scrollDirection\n        \"\n      >\n        @for (rowData of mergedDataInView; track rowData.record) {\n          <igx-tree-grid-row\n            class=\"igx-grid__tr--merged-top\"\n            [gridID]=\"id\"\n            [index]=\"rowData.index\"\n            [treeRow]=\"rowData.record.recordRef\"\n            [metaData]=\"rowData.record\"\n            [style.top.px]=\"getMergeCellOffset(rowData)\"\n            [ngClass]=\"\n              rowClasses\n                | igxGridRowClasses\n                  : row\n                  : row.inEditMode\n                  : row.selected\n                  : row.dirty\n                  : row.deleted\n                  : row.dragging\n                  : rowData.index\n                  : hasColumnLayouts\n                  : hasCellsToMerge\n                  : row.treeRow.isFilteredOutParent\n                  : rowData\n                  : pipeTrigger\n            \"\n            [ngStyle]=\"\n              rowStyles\n                | igxGridRowStyles: rowData : rowData.index : pipeTrigger\n            \"\n            #row\n          >\n          </igx-tree-grid-row>\n        }\n      </div>\n    }\n\n    <ng-template #pinnedRecordsTemplate>\n      @if (\n        data\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridNormalizeRecord: pipeTrigger\n          | treeGridAddRow: true : pipeTrigger\n          | gridRowPinning: id : true : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n            : true\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n            : true\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : true\n            : pipeTrigger;\n        as pinnedData\n      ) {\n        @if (pinnedData.length > 0) {\n          <div\n            #pinContainer\n            [ngClass]=\"{\n              'igx-grid__tr--pinned-bottom': !isRowPinningToTop,\n              'igx-grid__tr--pinned-top': isRowPinningToTop,\n            }\"\n            class=\"igx-grid__tr--pinned\"\n            [style.width.px]=\"calcWidth\"\n          >\n            @for (\n              rowData of pinnedData;\n              track trackPinnedRowData(rowData);\n              let rowIndex = $index\n            ) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  pinned_record_template;\n                  context: getContext(rowData, rowIndex, true)\n                \"\n              >\n              </ng-container>\n            }\n          </div>\n        }\n      }\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      igxGridFor\n      let-rowData\n      [igxGridForOf]=\"\n        renderData\n          | treeGridTransaction: pipeTrigger\n          | visibleColumns: hasVisibleColumns\n          | treeGridHierarchizing\n            : primaryKey\n            : foreignKey\n            : childDataKey\n            : pipeTrigger\n          | treeGridFiltering\n            : filteringExpressionsTree\n            : filterStrategy\n            : advancedFilteringExpressionsTree\n            : pipeTrigger\n            : filteringPipeTrigger\n          | treeGridSorting\n            : sortingExpressions\n            : $safeNavigationMigration(treeGroupArea?.expressions)\n            : sortStrategy\n            : pipeTrigger\n          | treeGridFlattening: expansionDepth : expansionStates : pipeTrigger\n          | treeGridPaging: !!paginator : page : perPage : pipeTrigger\n          | treeGridSummary\n            : hasSummarizedColumns\n            : summaryCalculationMode\n            : summaryPosition\n            : showSummaryOnCollapse\n            : pipeTrigger\n            : summaryPipeTrigger\n          | treeGridAddRow: false : pipeTrigger\n          | gridRowPinning: id : false : pipeTrigger\n          | gridCellMerge\n            : columnsToMerge\n            : cellMergeMode\n            : mergeStrategy\n            : pipeTrigger\n          | gridUnmergeActive\n            : columnsToMerge\n            : activeRowIndexes\n            : false\n            : pipeTrigger\n      \"\n      let-rowIndex=\"index\"\n      [igxForScrollOrientation]=\"'vertical'\"\n      [igxForScrollContainer]=\"verticalScroll\"\n      [igxForContainerSize]=\"calcHeight\"\n      [igxForItemSize]=\"renderedRowHeight\"\n      #verticalScrollContainer\n      (dataChanging)=\"dataRebinding($event)\"\n      (dataChanged)=\"dataRebound($event)\"\n    >\n      <div [attr.data-index]=\"rowIndex\">\n        <ng-template\n          [igxTemplateOutlet]=\"\n            isSummaryRow(rowData) ? summary_template : record_template\n          \"\n          [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\"\n          (beforeViewDetach)=\"viewDetachHandler($event)\"\n          (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n        >\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\n      \"\n    ></ng-container>\n    <ng-template\n      #record_template\n      let-rowIndex=\"index\"\n      let-disabledRow=\"disabled\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [disabled]=\"disabledRow\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template\n      #pinned_record_template\n      let-rowIndex=\"index\"\n      let-rowData\n      let-metaData=\"metaData\"\n    >\n      <igx-tree-grid-row\n        [gridID]=\"id\"\n        [index]=\"rowIndex\"\n        [treeRow]=\"rowData\"\n        [metaData]=\"metaData\"\n        [ngClass]=\"\n          rowClasses\n            | igxGridRowClasses\n              : row\n              : row.inEditMode\n              : row.selected\n              : row.dirty\n              : row.deleted\n              : row.dragging\n              : rowIndex\n              : hasColumnLayouts\n              : hasCellsToMerge\n              : row.treeRow.isFilteredOutParent\n              : rowData\n              : pipeTrigger\n        \"\n        [ngStyle]=\"\n          rowStyles | igxGridRowStyles: rowData : rowIndex : pipeTrigger\n        \"\n        #row\n        #pinnedRow\n      >\n      </igx-tree-grid-row>\n    </ng-template>\n    <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n      <igx-grid-summary-row\n        [gridID]=\"id\"\n        [summaries]=\"rowData.summaries\"\n        [firstCellIndentation]=\"rowData.cellIndentation\"\n        [index]=\"rowIndex\"\n        class=\"igx-grid__summaries--body\"\n        role=\"row\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n    ></ng-container>\n    <ng-container #bodyViewContainerRef></ng-container>\n    <igc-trial-watermark></igc-trial-watermark>\n  </div>\n  <div class=\"igx-grid__loading-outlet\">\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n        <igx-circular-bar [indeterminate]=\"true\"></igx-circular-bar>\n        }\n    </div>\n  </div>\n  @if (moving && columnInDrag) {\n    <span\n      [igxColumnMovingDrop]=\"headerContainer\"\n      [attr.droppable]=\"true\"\n      id=\"right\"\n      class=\"igx-grid__scroll-on-drag-right\"\n    ></span>\n  }\n  <div\n    [hidden]=\"!hasVerticalScroll()\"\n    class=\"igx-grid__tbody-scrollbar\"\n    [style.width.px]=\"scrollSize\"\n    (pointerdown)=\"$event.preventDefault()\"\n    [style.height.px]=\"calcHeight\"\n  >\n    <div\n      class=\"igx-grid__tbody-scrollbar-start\"\n      [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n    <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n      <ng-template\n        igxGridFor\n        [igxGridForOf]=\"[]\"\n        #verticalScrollHolder\n      ></ng-template>\n    </div>\n    <div\n      class=\"igx-grid__tbody-scrollbar-end\"\n      [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"\n    ></div>\n  </div>\n  <div class=\"igx-grid__addrow-snackbar\">\n    <igx-snackbar\n      #addRowSnackbar\n      [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\"\n      [displayTime]=\"snackbarDisplayTime\"\n      >{{ resourceStrings.igx_grid_snackbar_addrow_label }}</igx-snackbar\n    >\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__tfoot\"\n  role=\"presentation\"\n  [style.height.px]=\"summaryRowHeight\"\n  #tfoot\n>\n  <div\n    tabindex=\"0\"\n    role=\"rowgroup\"\n    (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n  >\n    @if (hasSummarizedColumns && rootSummariesEnabled) {\n      <igx-grid-summary-row\n        [style.width.px]=\"calcWidth\"\n        [style.height.px]=\"summaryRowHeight\"\n        [gridID]=\"id\"\n        role=\"row\"\n        [summaries]=\"\n          id | igxGridSummaryDataPipe: summaryService.retriggerRootPipe\n        \"\n        [index]=\"dataView.length\"\n        class=\"igx-grid__summaries\"\n        #summaryRow\n      >\n      </igx-grid-summary-row>\n    }\n    <div\n      class=\"igx-grid__tfoot-thumb\"\n      [hidden]=\"!hasVerticalScroll()\"\n      [style.height.px]=\"summaryRowHeight\"\n      [style.width.px]=\"scrollSize\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"igx-grid__scroll\"\n  role=\"presentation\"\n  [style.height.px]=\"scrollSize\"\n  #scr\n  [hidden]=\"isHorizontalScrollHidden\"\n  (pointerdown)=\"$event.preventDefault()\"\n>\n  <div\n    class=\"igx-grid__scroll-start\"\n    [style.width.px]=\"pinnedStartWidth\"\n    [style.min-width.px]=\"pinnedStartWidth\"\n  ></div>\n  <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n    <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer> </ng-template>\n  </div>\n  <div\n    class=\"igx-grid__scroll-end\"\n    [style.width.px]=\"pinnedEndWidth\"\n    [style.min-width.px]=\"pinnedEndWidth\"\n    [hidden]=\"pinnedEndWidth === 0\"\n  ></div>\n</div>\n\n<div class=\"igx-grid__footer\" role=\"presentation\" #footer>\n  <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n  <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyFilteredGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n  <span class=\"igx-grid__tbody-message\" role=\"cell\">\n    <span>{{ emptyGridMessage }}</span>\n    @if (showAddButton) {\n      <span>\n        <ng-container\n          *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"\n        ></ng-container>\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n  <button\n    type=\"button\"\n    igxButton=\"contained\"\n    igxRipple\n    (click)=\"this.crudService.enterAddRowMode(null, false, $event)\"\n  >\n    {{ resourceStrings.igx_grid_add_row_label }}\n  </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n  <div class=\"igx-grid__loading\">\n    <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n  </div>\n</ng-template>\n\n@if (rowEditable) {\n  <div igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditContainer;\n          context: {\n            rowChangesCount: rowChangesCount,\n            endEdit: this.crudService.endEdit.bind(this),\n            $implicit: this\n          }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultRowEditText>\n  {{\n    this.resourceStrings.igx_grid_row_edit_text\n      | igxStringReplace: '{0}' : rowChangesCount.toString()\n      | igxStringReplace: '{1}' : hiddenColumnsCount.toString()\n  }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(false, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}\n  </button>\n  <button\n    type=\"button\"\n    igxButton\n    igxRowEditTabStop\n    (click)=\"this.endRowEditTabStop(true, $event)\"\n  >\n    {{ this.resourceStrings.igx_grid_row_edit_btn_done }}\n  </button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n  <div class=\"igx-banner__message\">\n    <span class=\"igx-banner__text\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.crudService.row?.isAddRow\n            ? rowAddTextTemplate\n            : rowEditTextTemplate\n              ? rowEditTextTemplate\n              : defaultRowEditText;\n          context: {\n            $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null,\n          }\n        \"\n      >\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"igx-banner__actions\">\n    <div class=\"igx-banner__row\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          rowEditActionsTemplate\n            ? rowEditActionsTemplate\n            : defaultRowEditActions;\n          context: { $implicit: this.endEdit.bind(this) }\n        \"\n      >\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n  <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n  <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n  <div #sink style=\"display: none\"></div>\n  <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n  <ng-content\n    select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"\n  ></ng-content>\n}\n" }]
         }], propDecorators: { childDataKey: [{
                 type: Input
             }], foreignKey: [{