igniteui-angular 13.0.0 → 13.0.1

package/esm2020/lib/grids/grid/grid-row.component.mjs

@@ -27,9 +27,9 @@ export class IgxGridRowComponent extends IgxRowDirective {
         };
     }
 }
-IgxGridRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IgxGridRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxGridRowComponent, selector: "igx-grid-row", providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    <ng-container *ngIf=\"rowDraggable\">\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"this.showRowSelectors\">\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" (click)=\"onRowSelectorClick($event)\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n            </ng-template>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"grid.groupingExpressions.length > 0\">\n        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}\" (pointerdown)=\"$event.preventDefault()\" (click)=\"$event.stopPropagation()\"></div>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"!grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]='\"calcPixelWidth\"' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n            <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxTopLevel\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]='\"calcPixelWidth\"' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n            <div class=\"igx-grid__mrl-block\" [ngStyle]=\"{\n                'grid-template-rows':col.getGridTemplate(true),\n                'grid-template-columns':col.getGridTemplate(false)\n            }\">\n                <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n                </ng-template>\n            </div>\n        </ng-template>\n\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n    <div *ngFor=\"let col of pinnedColumns | igxTopLevel\" class=\"igx-grid__mrl-block\"\n    [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n    [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n    [style.left]=\"mrlRightPinnedOffset\"\n    [ngStyle]=\"{\n        'grid-template-rows':col.getGridTemplate(true),\n        'grid-template-columns':col.getGridTemplate(false),\n        'z-index': col.pinned ? 1 : null\n    }\">\n        <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n    </div>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [checked]=\"selected\"\n            [readonly]=\"true\"\n            [disabled]=\"deleted\"\n            [disableRipple]=\"true\"\n            [disableTransitions]=\"grid.disableTransitions\"\n            [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #cellTemplate let-col>\n        <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.width\"\n        [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\"\n        [style.left]=\"col.rightPinnedOffset\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.width\"\n        [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n    <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n", components: [{ type: i1.IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { type: i2.IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "intRow", "row", "rowData", "cellTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { type: i3.IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: ["expanded"] }], directives: [{ type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf"], outputs: ["dataChanging"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "igxNotGrouped": i7.IgxGridNotGroupedPipe, "igxTopLevel": i7.IgxGridTopLevelColumns, "transactionState": i7.IgxGridTransactionStatePipe, "igxStringReplace": i7.IgxStringReplacePipe, "igxCellStyleClasses": i7.IgxGridCellStyleClassesPipe, "igxCellStyles": i7.IgxGridCellStylesPipe, "dataMapper": i7.IgxGridDataMapperPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridRowComponent, decorators: [{
+IgxGridRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+IgxGridRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridRowComponent, selector: "igx-grid-row", providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    <ng-container *ngIf=\"rowDraggable\">\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"this.showRowSelectors\">\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" (click)=\"onRowSelectorClick($event)\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n            </ng-template>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"grid.groupingExpressions.length > 0\">\n        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}\" (pointerdown)=\"$event.preventDefault()\" (click)=\"$event.stopPropagation()\"></div>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"!grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]='\"calcPixelWidth\"' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n            <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxTopLevel\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]='\"calcPixelWidth\"' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n            <div class=\"igx-grid__mrl-block\" [ngStyle]=\"{\n                'grid-template-rows':col.getGridTemplate(true),\n                'grid-template-columns':col.getGridTemplate(false)\n            }\">\n                <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n                </ng-template>\n            </div>\n        </ng-template>\n\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n    <div *ngFor=\"let col of pinnedColumns | igxTopLevel\" class=\"igx-grid__mrl-block\"\n    [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n    [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n    [style.left]=\"mrlRightPinnedOffset\"\n    [ngStyle]=\"{\n        'grid-template-rows':col.getGridTemplate(true),\n        'grid-template-columns':col.getGridTemplate(false),\n        'z-index': col.pinned ? 1 : null\n    }\">\n        <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n    </div>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [checked]=\"selected\"\n            [readonly]=\"true\"\n            [disabled]=\"deleted\"\n            [disableRipple]=\"true\"\n            [disableTransitions]=\"grid.disableTransitions\"\n            [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #cellTemplate let-col>\n        <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.width\"\n        [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\"\n        [style.left]=\"col.rightPinnedOffset\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.width\"\n        [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n    <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n", components: [{ type: i1.IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { type: i2.IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "intRow", "row", "rowData", "cellTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { type: i3.IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: ["expanded"] }], directives: [{ type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf"], outputs: ["dataChanging"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "igxNotGrouped": i7.IgxGridNotGroupedPipe, "igxTopLevel": i7.IgxGridTopLevelColumns, "transactionState": i7.IgxGridTransactionStatePipe, "igxStringReplace": i7.IgxStringReplacePipe, "igxCellStyleClasses": i7.IgxGridCellStyleClassesPipe, "igxCellStyles": i7.IgxGridCellStylesPipe, "dataMapper": i7.IgxGridDataMapperPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], template: "<ng-container *ngTemplateOutlet='addRowUI ? addTemp : defaultTemp'></ng-container>\n\n<ng-template #addTemp>\n    <div class='igx-grid__tr--inner' [class.igx-grid__tr--add-animate]='triggerAddAnimationClass' (animationend)='animationEndHandler()'>\n        <ng-container *ngTemplateOutlet='defaultTemp'></ng-container>\n    </div>\n</ng-template>\n<ng-template #defaultTemp>\n    <ng-container *ngIf=\"rowDraggable\">\n        <div [class]=\"resolveDragIndicatorClasses\" [igxRowDrag]=\"this\" (click)=\"$event.stopPropagation()\" [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()\">\n            <ng-container *ngTemplateOutlet=\"this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase\"></ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"this.showRowSelectors\">\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" (click)=\"onRowSelectorClick($event)\">\n            <ng-template *ngTemplateOutlet=\"\n                this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;\n                context: { $implicit: { index: viewIndex, rowID: key, key, selected: selected }}\">\n            </ng-template>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"grid.groupingExpressions.length > 0\">\n        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}\" (pointerdown)=\"$event.preventDefault()\" (click)=\"$event.stopPropagation()\"></div>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"!grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]='\"calcPixelWidth\"' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n            <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-template ngFor let-col [ngForOf]=\"pinnedColumns | igxNotGrouped\">\n                    <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"grid.hasColumnLayouts\">\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\n        <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxTopLevel\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]='\"calcPixelWidth\"' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n            <div class=\"igx-grid__mrl-block\" [ngStyle]=\"{\n                'grid-template-rows':col.getGridTemplate(true),\n                'grid-template-columns':col.getGridTemplate(false)\n            }\">\n                <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                        <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails ? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n                </ng-template>\n            </div>\n        </ng-template>\n\n        <ng-container *ngIf=\"pinnedColumns.length > 0 && !grid.isPinningToStart\">\n            <ng-container *ngTemplateOutlet=\"mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #mrlPinnedTemplate let-pinnedColumns>\n    <div *ngFor=\"let col of pinnedColumns | igxTopLevel\" class=\"igx-grid__mrl-block\"\n    [class.igx-grid__td--pinned-last]=\"col.hasLastPinnedChildColumn\"\n    [class.igx-grid__td--pinned-first]=\"col.hasFirstPinnedChildColumn\"\n    [style.left]=\"mrlRightPinnedOffset\"\n    [ngStyle]=\"{\n        'grid-template-rows':col.getGridTemplate(true),\n        'grid-template-columns':col.getGridTemplate(false),\n        'z-index': col.pinned ? 1 : null\n    }\">\n        <ng-template ngFor let-col [ngForOf]=\"col.children\">\n                <ng-container *ngTemplateOutlet=\"col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)\"></ng-container>\n        </ng-template>\n    </div>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [checked]=\"selected\"\n            [readonly]=\"true\"\n            [disabled]=\"deleted\"\n            [disableRipple]=\"true\"\n            [disableTransitions]=\"grid.disableTransitions\"\n            [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n<ng-template #cellTemplate let-col>\n        <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.width\"\n        [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\"\n        [style.left]=\"col.rightPinnedOffset\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #expandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.width\"\n        [style.max-width]=\"col.width\"\n        [style.flex-basis]=\"col.width\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n\n<ng-template #mrlCellTemplate let-col>\n    <igx-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [firstPinned]=\"col.columnLayoutChild ? null : col.isFirstPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #mrlExpandableCellTemplate let-col>\n    <igx-expandable-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n        [attr.aria-describedby]=\"gridID + '_' + col.field | igxStringReplace:'.':'_'\"\n        [class.igx-grid__td--pinned]=\"col.pinned\"\n        [class.igx-grid__td--number]=\"(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0\"\n        [ngClass]=\"col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger\"\n        [expanded]=\"expanded\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\"\n        [column]=\"col\"\n        [style.grid-row-end]=\"col.rowEnd\"\n        [style.grid-column-end]=\"col.colEnd\"\n        [style.grid-row-start]=\"col.rowStart\"\n        [style.grid-column-start]=\"col.colStart\"\n        [lastPinned]=\"col.columnLayoutChild ? null : col.isLastPinned\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [style.min-height.px]=\"cellHeight\"\n        [rowData]=\"data\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col.visibleIndex)\"\n        #cell>\n    </igx-expandable-grid-cell>\n</ng-template>\n" }]
         }] });

package/esm2020/lib/grids/grid/grid.component.mjs

@@ -1066,8 +1066,8 @@ export class IgxGridComponent extends IgxGridBaseDirective {
         }
     }
 }
-IgxGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IgxGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxGridComponent, selector: "igx-grid", inputs: { groupsExpanded: "groupsExpanded", dropAreaTemplate: "dropAreaTemplate", id: "id", data: "data", groupingExpressions: "groupingExpressions", groupingExpansionState: "groupingExpansionState", hideGroupedColumns: "hideGroupedColumns", groupStrategy: "groupStrategy", dropAreaMessage: "dropAreaMessage", showGroupArea: "showGroupArea" }, outputs: { dataPreLoad: "dataPreLoad", groupingExpressionsChange: "groupingExpressionsChange", groupingExpansionStateChange: "groupingExpansionStateChange", onGroupingDone: "onGroupingDone" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, providers: [
+IgxGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+IgxGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridComponent, selector: "igx-grid", inputs: { groupsExpanded: "groupsExpanded", dropAreaTemplate: "dropAreaTemplate", id: "id", data: "data", groupingExpressions: "groupingExpressions", groupingExpansionState: "groupingExpansionState", hideGroupedColumns: "hideGroupedColumns", groupStrategy: "groupStrategy", dropAreaMessage: "dropAreaMessage", showGroupArea: "showGroupArea" }, outputs: { dataPreLoad: "dataPreLoad", groupingExpressionsChange: "groupingExpressionsChange", groupingExpansionStateChange: "groupingExpansionStateChange", onGroupingDone: "onGroupingDone" }, host: { properties: { "attr.role": "this.role", "attr.id": "this.id" } }, providers: [
         IgxGridCRUDService,
         IgxGridNavigationService,
         IgxGridSummaryService,
@@ -1079,7 +1079,7 @@ IgxGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         IgxForOfSyncService,
         IgxForOfScrollSyncService
     ], queries: [{ propertyName: "detailTemplate", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "gridDetailsTemplate", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: IgxGridDetailTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: IgxGroupByRowSelectorDirective }], viewQueries: [{ propertyName: "groupArea", first: true, predicate: IgxGridGroupByAreaComponent, descendants: true }, { propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]='outerWidth'\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [density]=\"displayDensity\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)='preventContainerScroll($event)'\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf='data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>\n            <div #pinContainer *ngIf='pinnedData.length > 0'\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:paginator?.page:paginator?.perPage:id:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight'\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\">\n            <ng-template\n                [igxTemplateOutlet]='getRowTemplate(rowData)'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'\n                (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:data:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:data:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail='true' style=\"overflow: auto; width: 100%;\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)='detailsViewFocused(detailsContainer, rowIndex)' #detailsContainer [attr.data-rowindex]='rowIndex'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\" style='display: flex;'>\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]='detailTemplate'\n                    [ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth'  [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-container *ngIf=\"totalRecords || pagingMode === 1\">\n        <ng-content select=\"igx-paginator\"></ng-content>\n    </ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n   [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_less</igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n    [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_more</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", components: [{ type: i1.IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { type: i2.IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { type: i3.IgxGridRowComponent, selector: "igx-grid-row" }, { type: i4.IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { type: i5.IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { type: i6.IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "indeterminate", "textVisibility", "text", "value"] }, { type: i7.IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { type: i8.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i9.IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer" }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.IgxGridBodyDirective, selector: "[igxGridBody]" }, { type: i12.IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { type: i13.IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf"], outputs: ["dataChanging"] }, { type: i15.IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i16.IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { type: i16.IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: i17.IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: i18.IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { type: i19.IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }], pipes: { "gridSort": i20.IgxGridSortingPipe, "gridFiltering": i20.IgxGridFilteringPipe, "gridRowPinning": i21.IgxGridRowPinningPipe, "gridAddRow": i21.IgxGridAddRowPipe, "visibleColumns": i21.IgxHasVisibleColumnsPipe, "gridTransaction": i21.IgxGridTransactionPipe, "gridDetails": i22.IgxGridDetailsPipe, "gridSummary": i23.IgxGridSummaryPipe, "gridPaging": i20.IgxGridPagingPipe, "gridGroupBy": i20.IgxGridGroupingPipe, "igxGridRowClasses": i21.IgxGridRowClassesPipe, "igxGridRowStyles": i21.IgxGridRowStylesPipe, "igxGridSummaryDataPipe": i24.IgxSummaryDataPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         IgxGridCRUDService,

package/esm2020/lib/grids/grid/grid.details.pipe.mjs

@@ -26,9 +26,9 @@ export class IgxGridDetailsPipe {
         return result;
     }
 }
-IgxGridDetailsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridDetailsPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
-IgxGridDetailsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridDetailsPipe, name: "gridDetails" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridDetailsPipe, decorators: [{
+IgxGridDetailsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridDetailsPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
+IgxGridDetailsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridDetailsPipe, name: "gridDetails" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridDetailsPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'gridDetails' }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{

package/esm2020/lib/grids/grid/grid.directives.mjs

@@ -10,9 +10,9 @@ export class IgxGroupByRowTemplateDirective {
         this.template = template;
     }
 }
-IgxGroupByRowTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGroupByRowTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-IgxGroupByRowTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxGroupByRowTemplateDirective, selector: "[igxGroupByRow]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGroupByRowTemplateDirective, decorators: [{
+IgxGroupByRowTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGroupByRowTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+IgxGroupByRowTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxGroupByRowTemplateDirective, selector: "[igxGroupByRow]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGroupByRowTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGroupByRow]'
@@ -23,9 +23,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
  */
 export class IgxGridDetailTemplateDirective {
 }
-IgxGridDetailTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-IgxGridDetailTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxGridDetailTemplateDirective, selector: "[igxGridDetail]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridDetailTemplateDirective, decorators: [{
+IgxGridDetailTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+IgxGridDetailTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridDetailTemplateDirective, selector: "[igxGridDetail]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridDetailTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGridDetail]'
@@ -36,9 +36,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
  */
 export class IgxRowExpandedIndicatorDirective {
 }
-IgxRowExpandedIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxRowExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-IgxRowExpandedIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxRowExpandedIndicatorDirective, selector: "[igxRowExpandedIndicator]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxRowExpandedIndicatorDirective, decorators: [{
+IgxRowExpandedIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxRowExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+IgxRowExpandedIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxRowExpandedIndicatorDirective, selector: "[igxRowExpandedIndicator]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxRowExpandedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowExpandedIndicator]'
@@ -49,9 +49,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
  */
 export class IgxRowCollapsedIndicatorDirective {
 }
-IgxRowCollapsedIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-IgxRowCollapsedIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxRowCollapsedIndicatorDirective, selector: "[igxRowCollapsedIndicator]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, decorators: [{
+IgxRowCollapsedIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+IgxRowCollapsedIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxRowCollapsedIndicatorDirective, selector: "[igxRowCollapsedIndicator]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxRowCollapsedIndicator]'
@@ -62,9 +62,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
  */
 export class IgxHeaderExpandIndicatorDirective {
 }
-IgxHeaderExpandIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxHeaderExpandIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-IgxHeaderExpandIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxHeaderExpandIndicatorDirective, selector: "[igxHeaderExpandedIndicator]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxHeaderExpandIndicatorDirective, decorators: [{
+IgxHeaderExpandIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxHeaderExpandIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+IgxHeaderExpandIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxHeaderExpandIndicatorDirective, selector: "[igxHeaderExpandedIndicator]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxHeaderExpandIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeaderExpandedIndicator]'
@@ -75,9 +75,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
  */
 export class IgxHeaderCollapseIndicatorDirective {
 }
-IgxHeaderCollapseIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxHeaderCollapseIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-IgxHeaderCollapseIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxHeaderCollapseIndicatorDirective, selector: "[igxHeaderCollapsedIndicator]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxHeaderCollapseIndicatorDirective, decorators: [{
+IgxHeaderCollapseIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxHeaderCollapseIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+IgxHeaderCollapseIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxHeaderCollapseIndicatorDirective, selector: "[igxHeaderCollapsedIndicator]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxHeaderCollapseIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxHeaderCollapsedIndicator]'
@@ -88,9 +88,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
  */
 export class IgxExcelStyleHeaderIconDirective {
 }
-IgxExcelStyleHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-IgxExcelStyleHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxExcelStyleHeaderIconDirective, selector: "[igxExcelStyleHeaderIcon]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, decorators: [{
+IgxExcelStyleHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+IgxExcelStyleHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxExcelStyleHeaderIconDirective, selector: "[igxExcelStyleHeaderIcon]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxExcelStyleHeaderIcon]'
@@ -101,9 +101,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
  */
 export class IgxSortHeaderIconDirective {
 }
-IgxSortHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSortHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-IgxSortHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxSortHeaderIconDirective, selector: "[igxSortHeaderIcon]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSortHeaderIconDirective, decorators: [{
+IgxSortHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxSortHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+IgxSortHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxSortHeaderIconDirective, selector: "[igxSortHeaderIcon]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxSortHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortHeaderIcon]'
@@ -114,9 +114,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
  */
 export class IgxSortAscendingHeaderIconDirective {
 }
-IgxSortAscendingHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-IgxSortAscendingHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxSortAscendingHeaderIconDirective, selector: "[igxSortAscendingHeaderIcon]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, decorators: [{
+IgxSortAscendingHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+IgxSortAscendingHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxSortAscendingHeaderIconDirective, selector: "[igxSortAscendingHeaderIcon]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortAscendingHeaderIcon]'
@@ -127,9 +127,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
  */
 export class IgxSortDescendingHeaderIconDirective {
 }
-IgxSortDescendingHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-IgxSortDescendingHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxSortDescendingHeaderIconDirective, selector: "[igxSortDescendingHeaderIcon]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, decorators: [{
+IgxSortDescendingHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+IgxSortDescendingHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxSortDescendingHeaderIconDirective, selector: "[igxSortDescendingHeaderIcon]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSortDescendingHeaderIcon]'
@@ -192,9 +192,9 @@ export class IgxGroupAreaDropDirective extends IgxDropDirective {
         }
     }
 }
-IgxGroupAreaDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGroupAreaDropDirective, deps: [{ token: i1.IgxGroupByAreaDirective }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-IgxGroupAreaDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]", host: { properties: { "class.igx-drop-area--hover": "this.hovered" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGroupAreaDropDirective, decorators: [{
+IgxGroupAreaDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGroupAreaDropDirective, deps: [{ token: i1.IgxGroupByAreaDirective }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+IgxGroupAreaDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: IgxGroupAreaDropDirective, selector: "[igxGroupAreaDrop]", host: { properties: { "class.igx-drop-area--hover": "this.hovered" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGroupAreaDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxGroupAreaDrop]'

package/esm2020/lib/grids/grid/grid.module.mjs

@@ -15,8 +15,8 @@ import * as i0 from "@angular/core";
  */
 export class IgxGridModule {
 }
-IgxGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-IgxGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridModule, declarations: [IgxGridComponent,
+IgxGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IgxGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridModule, declarations: [IgxGridComponent,
         IgxGridRowComponent,
         IgxGridGroupByRowComponent,
         IgxGroupByRowTemplateDirective,
@@ -42,10 +42,10 @@ IgxGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         IgxGridDetailsPipe,
         IgxGridGroupByAreaComponent,
         IgxGridCommonModule] });
-IgxGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridModule, imports: [[
+IgxGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridModule, imports: [[
             IgxGridCommonModule,
         ], IgxGridCommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/lib/grids/grid/grid.pipes.mjs

@@ -24,9 +24,9 @@ export class IgxGridSortingPipe {
         return result;
     }
 }
-IgxGridSortingPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridSortingPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
-IgxGridSortingPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridSortingPipe, name: "gridSort" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridSortingPipe, decorators: [{
+IgxGridSortingPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridSortingPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
+IgxGridSortingPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridSortingPipe, name: "gridSort" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridSortingPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'gridSort' }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -64,9 +64,9 @@ export class IgxGridGroupingPipe {
         return result;
     }
 }
-IgxGridGroupingPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridGroupingPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
-IgxGridGroupingPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridGroupingPipe, name: "gridGroupBy" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridGroupingPipe, decorators: [{
+IgxGridGroupingPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridGroupingPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
+IgxGridGroupingPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridGroupingPipe, name: "gridGroupBy" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridGroupingPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'gridGroupBy' }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -101,9 +101,9 @@ export class IgxGridPagingPipe {
         return result;
     }
 }
-IgxGridPagingPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridPagingPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
-IgxGridPagingPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridPagingPipe, name: "gridPaging" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridPagingPipe, decorators: [{
+IgxGridPagingPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridPagingPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
+IgxGridPagingPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridPagingPipe, name: "gridPaging" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridPagingPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'gridPaging' }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -131,9 +131,9 @@ export class IgxGridFilteringPipe {
         return result;
     }
 }
-IgxGridFilteringPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridFilteringPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
-IgxGridFilteringPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridFilteringPipe, name: "gridFiltering" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridFilteringPipe, decorators: [{
+IgxGridFilteringPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridFilteringPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
+IgxGridFilteringPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridFilteringPipe, name: "gridFiltering" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridFilteringPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'gridFiltering' }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{

package/esm2020/lib/grids/grid/grid.summary.pipe.mjs

@@ -117,9 +117,9 @@ export class IgxGridSummaryPipe {
         return data;
     }
 }
-IgxGridSummaryPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridSummaryPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
-IgxGridSummaryPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridSummaryPipe, name: "gridSummary" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridSummaryPipe, decorators: [{
+IgxGridSummaryPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridSummaryPipe, deps: [{ token: IGX_GRID_BASE }], target: i0.ɵɵFactoryTarget.Pipe });
+IgxGridSummaryPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridSummaryPipe, name: "gridSummary" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridSummaryPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'gridSummary' }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{

package/esm2020/lib/grids/grid/groupby-row.component.mjs

@@ -190,9 +190,9 @@ export class IgxGridGroupByRowComponent {
         return this.grid.rowSelection !== GridSelectionMode.none && !this.hideGroupRowSelectors;
     }
 }
-IgxGridGroupByRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridGroupByRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: i1.IgxGridSelectionService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.IgxFilteringService }], target: i0.ɵɵFactoryTarget.Component });
-IgxGridGroupByRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: { hideGroupRowSelectors: "hideGroupRowSelectors", rowDraggable: "rowDraggable", index: "index", gridID: "gridID", groupRow: "groupRow", isFocused: "isFocused" }, host: { listeners: { "pointerdown": "activate()" }, properties: { "attr.aria-expanded": "this.expanded", "attr.aria-describedby": "this.describedBy", "attr.data-rowIndex": "this.dataRowIndex", "attr.id": "this.attrCellID", "class": "this.styleClasses" } }, viewQueries: [{ propertyName: "groupContent", first: true, predicate: ["groupContent"], descendants: true, static: true }, { propertyName: "defaultGroupByExpandedTemplate", first: true, predicate: ["defaultGroupByExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupByCollapsedTemplate", first: true, predicate: ["defaultGroupByCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container #defaultGroupRow>\n\n    <ng-container *ngIf=\"rowDraggable\">\n        <div class=\"igx-grid__drag-indicator igx-grid__tr-action\">\n            <igx-icon [style.visibility]=\"'hidden'\">drag_indicator</igx-icon>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"showRowSelectors\">\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" style=\"background: none;\" (pointerdown)=\"$event.preventDefault()\"\n            (click)=\"onGroupSelectorClick($event)\">\n            <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n                this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n                context: { $implicit: {\n                    selectedCount: selectedRowsInTheGroup.length,\n                    totalCount: this.groupRow.records.length,\n                    groupRow: this.groupRow }}\">\n            </ng-template>\n        </div>\n    </ng-container>\n\n    <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <div class=\"igx-grid__group-content\" #groupContent>\n        <ng-container\n            *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n        </ng-container>\n    </div>\n\n    <ng-template #defaultGroupByExpandedTemplate>\n        <igx-icon>expand_more</igx-icon>\n    </ng-template>\n\n    <ng-template #defaultGroupByCollapsedTemplate>\n        <igx-icon>chevron_right</igx-icon>\n    </ng-template>\n\n\n    <ng-template #defaultGroupByTemplate>\n        <div class=\"igx-group-label\">\n            <igx-icon class=\"igx-group-label__icon\">group_work</igx-icon>\n            <span class=\"igx-group-label__column-name\">\n                {{ groupRow.column && groupRow.column.header ?\n                groupRow.column.header :\n                (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n            </span>\n\n            <ng-container *ngIf=\"dataType === 'boolean' || dataType === 'string'; else default\">\n                <span class=\"igx-group-label__text\">{{ groupRow.value }}</span>\n            </ng-container>\n            <ng-template #default>\n                <ng-container *ngIf=\"dataType === 'number'\">\n                    <span class=\"igx-group-label__text\">{{ groupRow.value | number }}</span>\n                </ng-container>\n                <ng-container *ngIf=\"dataType === 'date'\">\n                    <span class=\"igx-group-label__text\">{{ groupRow.value | date }}</span>\n                </ng-container>\n            </ng-template>\n\n            <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n            </igx-badge>\n        </div>\n    </ng-template>\n    <ng-template #groupByRowSelectorBaseTemplate let-context>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n                [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n                [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n                #groupByRowCheckbox>\n            </igx-checkbox>\n        </div>\n    </ng-template>\n</ng-container>\n", components: [{ type: i3.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i4.IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon"] }, { type: i5.IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "number": i6.DecimalPipe, "date": i6.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridGroupByRowComponent, decorators: [{
+IgxGridGroupByRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridGroupByRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: i1.IgxGridSelectionService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.IgxFilteringService }], target: i0.ɵɵFactoryTarget.Component });
+IgxGridGroupByRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: { hideGroupRowSelectors: "hideGroupRowSelectors", rowDraggable: "rowDraggable", index: "index", gridID: "gridID", groupRow: "groupRow", isFocused: "isFocused" }, host: { listeners: { "pointerdown": "activate()" }, properties: { "attr.aria-expanded": "this.expanded", "attr.aria-describedby": "this.describedBy", "attr.data-rowIndex": "this.dataRowIndex", "attr.id": "this.attrCellID", "class": "this.styleClasses" } }, viewQueries: [{ propertyName: "groupContent", first: true, predicate: ["groupContent"], descendants: true, static: true }, { propertyName: "defaultGroupByExpandedTemplate", first: true, predicate: ["defaultGroupByExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupByCollapsedTemplate", first: true, predicate: ["defaultGroupByCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container #defaultGroupRow>\n\n    <ng-container *ngIf=\"rowDraggable\">\n        <div class=\"igx-grid__drag-indicator igx-grid__tr-action\">\n            <igx-icon [style.visibility]=\"'hidden'\">drag_indicator</igx-icon>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"showRowSelectors\">\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" style=\"background: none;\" (pointerdown)=\"$event.preventDefault()\"\n            (click)=\"onGroupSelectorClick($event)\">\n            <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n                this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n                context: { $implicit: {\n                    selectedCount: selectedRowsInTheGroup.length,\n                    totalCount: this.groupRow.records.length,\n                    groupRow: this.groupRow }}\">\n            </ng-template>\n        </div>\n    </ng-container>\n\n    <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <div class=\"igx-grid__group-content\" #groupContent>\n        <ng-container\n            *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n        </ng-container>\n    </div>\n\n    <ng-template #defaultGroupByExpandedTemplate>\n        <igx-icon>expand_more</igx-icon>\n    </ng-template>\n\n    <ng-template #defaultGroupByCollapsedTemplate>\n        <igx-icon>chevron_right</igx-icon>\n    </ng-template>\n\n\n    <ng-template #defaultGroupByTemplate>\n        <div class=\"igx-group-label\">\n            <igx-icon class=\"igx-group-label__icon\">group_work</igx-icon>\n            <span class=\"igx-group-label__column-name\">\n                {{ groupRow.column && groupRow.column.header ?\n                groupRow.column.header :\n                (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n            </span>\n\n            <ng-container *ngIf=\"dataType === 'boolean' || dataType === 'string'; else default\">\n                <span class=\"igx-group-label__text\">{{ groupRow.value }}</span>\n            </ng-container>\n            <ng-template #default>\n                <ng-container *ngIf=\"dataType === 'number'\">\n                    <span class=\"igx-group-label__text\">{{ groupRow.value | number }}</span>\n                </ng-container>\n                <ng-container *ngIf=\"dataType === 'date'\">\n                    <span class=\"igx-group-label__text\">{{ groupRow.value | date }}</span>\n                </ng-container>\n            </ng-template>\n\n            <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n            </igx-badge>\n        </div>\n    </ng-template>\n    <ng-template #groupByRowSelectorBaseTemplate let-context>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n                [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n                [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n                #groupByRowCheckbox>\n            </igx-checkbox>\n        </div>\n    </ng-template>\n</ng-container>\n", components: [{ type: i3.IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i4.IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon"] }, { type: i5.IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "number": i6.DecimalPipe, "date": i6.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: IgxGridGroupByRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-groupby-row', template: "<ng-container #defaultGroupRow>\n\n    <ng-container *ngIf=\"rowDraggable\">\n        <div class=\"igx-grid__drag-indicator igx-grid__tr-action\">\n            <igx-icon [style.visibility]=\"'hidden'\">drag_indicator</igx-icon>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"showRowSelectors\">\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" style=\"background: none;\" (pointerdown)=\"$event.preventDefault()\"\n            (click)=\"onGroupSelectorClick($event)\">\n            <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n                this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n                context: { $implicit: {\n                    selectedCount: selectedRowsInTheGroup.length,\n                    totalCount: this.groupRow.records.length,\n                    groupRow: this.groupRow }}\">\n            </ng-template>\n        </div>\n    </ng-container>\n\n    <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <div class=\"igx-grid__group-content\" #groupContent>\n        <ng-container\n            *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n        </ng-container>\n    </div>\n\n    <ng-template #defaultGroupByExpandedTemplate>\n        <igx-icon>expand_more</igx-icon>\n    </ng-template>\n\n    <ng-template #defaultGroupByCollapsedTemplate>\n        <igx-icon>chevron_right</igx-icon>\n    </ng-template>\n\n\n    <ng-template #defaultGroupByTemplate>\n        <div class=\"igx-group-label\">\n            <igx-icon class=\"igx-group-label__icon\">group_work</igx-icon>\n            <span class=\"igx-group-label__column-name\">\n                {{ groupRow.column && groupRow.column.header ?\n                groupRow.column.header :\n                (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n            </span>\n\n            <ng-container *ngIf=\"dataType === 'boolean' || dataType === 'string'; else default\">\n                <span class=\"igx-group-label__text\">{{ groupRow.value }}</span>\n            </ng-container>\n            <ng-template #default>\n                <ng-container *ngIf=\"dataType === 'number'\">\n                    <span class=\"igx-group-label__text\">{{ groupRow.value | number }}</span>\n                </ng-container>\n                <ng-container *ngIf=\"dataType === 'date'\">\n                    <span class=\"igx-group-label__text\">{{ groupRow.value | date }}</span>\n                </ng-container>\n            </ng-template>\n\n            <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n            </igx-badge>\n        </div>\n    </ng-template>\n    <ng-template #groupByRowSelectorBaseTemplate let-context>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n                [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n                [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n                #groupByRowCheckbox>\n            </igx-checkbox>\n        </div>\n    </ng-template>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{