igniteui-angular 12.2.4 → 12.2.5

package/bundles/igniteui-angular.umd.js

@@ -2537,11 +2537,11 @@
             };
             return rec;
         };
-        DataUtil.group = function (data, state, grid, groupsRecords, fullResult) {
+        DataUtil.group = function (data, state, grouping, grid, groupsRecords, fullResult) {
+            if (grouping === void 0) { grouping = new IgxGrouping(); }
             if (grid === void 0) { grid = null; }
             if (groupsRecords === void 0) { groupsRecords = []; }
             if (fullResult === void 0) { fullResult = { data: [], metadata: [] }; }
-            var grouping = new IgxGrouping();
             groupsRecords.splice(0, groupsRecords.length);
             return grouping.groupBy(data, state, grid, groupsRecords, fullResult);
         };
@@ -13147,7 +13147,7 @@
                 }
                 if (hasGrouping && !this.options.ignoreGrouping) {
                     var groupsRecords = [];
-                    DataUtil.group(cloneArray(gridData), groupedGridGroupingState, grid, groupsRecords);
+                    DataUtil.group(cloneArray(gridData), groupedGridGroupingState, grid.groupStrategy, grid, groupsRecords);
                     gridData = groupsRecords;
                 }
                 if (hasGrouping && !this.options.ignoreGrouping) {
@@ -21713,6 +21713,10 @@
         igx_collapse: 'Collapse',
     };
 
+    var ActionStripResourceStringsEN = {
+        igx_action_strip_button_more_title: 'More'
+    };
+
     /**
      * @hidden
      * IF YOU EDIT THIS OBJECT, DO NOT FORGET TO UPDATE
@@ -21736,7 +21740,8 @@
         CarouselResStrings: cloneValue(CarouselResourceStringsEN),
         ListResStrings: cloneValue(ListResourceStringsEN),
         InputResStrings: cloneValue(InputResourceStringsEN),
-        TreeResStrings: cloneValue(TreeResourceStringsEN)
+        TreeResStrings: cloneValue(TreeResourceStringsEN),
+        ActionStripResourceStrings: cloneValue(ActionStripResourceStringsEN)
     };
     var updateResourceStrings = function (currentStrings, newStrings) {
         var e_1, _a;
@@ -21781,7 +21786,7 @@
     /**
      * Returns current resource strings for all components
      */
-    var getCurrentResourceStrings = function () { return (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, CurrentResourceStrings.CalendarResStrings), CurrentResourceStrings.CarouselResStrings), CurrentResourceStrings.ChipResStrings), CurrentResourceStrings.DatePickerResourceStrings), CurrentResourceStrings.DateRangePickerResStrings), CurrentResourceStrings.GridResStrings), CurrentResourceStrings.InputResStrings), CurrentResourceStrings.ListResStrings), CurrentResourceStrings.PaginatorResStrings), CurrentResourceStrings.TimePickerResStrings), CurrentResourceStrings.TreeResStrings)); };
+    var getCurrentResourceStrings = function () { return (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, CurrentResourceStrings.CalendarResStrings), CurrentResourceStrings.CarouselResStrings), CurrentResourceStrings.ChipResStrings), CurrentResourceStrings.DatePickerResourceStrings), CurrentResourceStrings.DateRangePickerResStrings), CurrentResourceStrings.GridResStrings), CurrentResourceStrings.InputResStrings), CurrentResourceStrings.ListResStrings), CurrentResourceStrings.PaginatorResStrings), CurrentResourceStrings.TimePickerResStrings), CurrentResourceStrings.TreeResStrings), CurrentResourceStrings.ActionStripResourceStrings)); };
 
     var IgxInputGroupTheme = mkenum({
         Material: 'material',
@@ -28827,7 +28832,7 @@
     IgxGridActionButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-grid-action-button',
-                    template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button igxButton=\"icon\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]='containerClass'>\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>"
+                    template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button [title]=\"labelText\" igxButton=\"icon\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]='containerClass'>\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>"
                 },] }
     ];
     IgxGridActionButtonComponent.propDecorators = {
@@ -29067,8 +29072,8 @@
          * @internal
          */
         IgxGridEditingActionsComponent.prototype.registerIcons = function () {
-            this.iconService.addSvgIconFromText(materialIconsExtended.addRow.name, materialIconsExtended.addRow.value, 'imx-icons');
-            this.iconService.addSvgIconFromText(materialIconsExtended.addChild.name, materialIconsExtended.addChild.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(materialIconsExtended.addRow.name, materialIconsExtended.addRow.value, 'imx-icons', true);
+            this.iconService.addSvgIconFromText(materialIconsExtended.addChild.name, materialIconsExtended.addChild.value, 'imx-icons', true);
         };
         return IgxGridEditingActionsComponent;
     }(IgxGridActionsBaseDirective));
@@ -29209,10 +29214,10 @@
             var context = this.strip.context;
             var grid = context.grid;
             if (grid) {
-                this.iconService.addSvgIconFromText(materialIconsExtended.pinLeft.name, materialIconsExtended.pinLeft.value, 'imx-icons');
-                this.iconService.addSvgIconFromText(materialIconsExtended.unpinLeft.name, materialIconsExtended.unpinLeft.value, 'imx-icons');
-                this.iconService.addSvgIconFromText(materialIconsExtended.jumpDown.name, materialIconsExtended.jumpDown.value, 'imx-icons');
-                this.iconService.addSvgIconFromText(materialIconsExtended.jumpUp.name, materialIconsExtended.jumpDown.value, 'imx-icons');
+                this.iconService.addSvgIconFromText(materialIconsExtended.pinLeft.name, materialIconsExtended.pinLeft.value, 'imx-icons', true);
+                this.iconService.addSvgIconFromText(materialIconsExtended.unpinLeft.name, materialIconsExtended.unpinLeft.value, 'imx-icons', true);
+                this.iconService.addSvgIconFromText(materialIconsExtended.jumpDown.name, materialIconsExtended.jumpDown.value, 'imx-icons', true);
+                this.iconService.addSvgIconFromText(materialIconsExtended.jumpUp.name, materialIconsExtended.jumpDown.value, 'imx-icons', true);
             }
         };
         return IgxGridPinningActionsComponent;
@@ -29300,6 +29305,25 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(IgxActionStripComponent.prototype, "resourceStrings", {
+            get: function () {
+                if (!this._resourceStrings) {
+                    this._resourceStrings = CurrentResourceStrings.ActionStripResourceStrings;
+                }
+                return this._resourceStrings;
+            },
+            /**
+             * Gets/Sets the resource strings.
+             *
+             * @remarks
+             * By default it uses EN resources.
+             */
+            set: function (value) {
+                this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgxActionStripComponent.prototype, "display", {
             /**
              * Getter for the 'display' property of the current `IgxActionStrip`
@@ -29444,7 +29468,7 @@
     IgxActionStripComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-action-strip',
-                    template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    <ng-container *ngIf=\"menuItems.length > 0\">\n        <button\n            igxButton=\"icon\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon>more_vert</igx-icon>\n        </button>\n    </ng-container>\n    <igx-drop-down #dropdown [displayDensity]=\"displayDensity\">\n        <igx-drop-down-item\n            *ngFor=\"let item of menuItems\"\n            class=\"igx-action-strip__menu-item\"\n        >\n            <div class=\"igx-drop-down__item-template\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        item.templateRef;\n                        context: { $implicit: item }\n                    \"\n                ></ng-container>\n            </div>\n        </igx-drop-down-item>\n    </igx-drop-down>\n</div>\n"
+                    template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    <ng-container *ngIf=\"menuItems.length > 0\">\n        <button\n            igxButton=\"icon\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [title]=\"resourceStrings.igx_action_strip_button_more_title\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon>more_vert</igx-icon>\n        </button>\n    </ng-container>\n    <igx-drop-down #dropdown [displayDensity]=\"displayDensity\">\n        <igx-drop-down-item\n            *ngFor=\"let item of menuItems\"\n            class=\"igx-action-strip__menu-item\"\n        >\n            <div class=\"igx-drop-down__item-template\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        item.templateRef;\n                        context: { $implicit: item }\n                    \"\n                ></ng-container>\n            </div>\n        </igx-drop-down-item>\n    </igx-drop-down>\n</div>\n"
                 },] }
     ];
     IgxActionStripComponent.ctorParameters = function () { return [
@@ -29459,6 +29483,7 @@
         actionButtons: [{ type: i0.ContentChildren, args: [IgxGridActionsBaseDirective,] }],
         hidden: [{ type: i0.Input }],
         hostClass: [{ type: i0.Input, args: ['class',] }],
+        resourceStrings: [{ type: i0.Input }],
         menu: [{ type: i0.ViewChild, args: ['dropdown',] }],
         display: [{ type: i0.HostBinding, args: ['style.display',] }],
         hostClasses: [{ type: i0.HostBinding, args: ['attr.class',] }]
@@ -59425,6 +59450,9 @@
             if (!this.clipboardOptions.copyHeaders) {
                 result = result.substring(result.indexOf('\n') + 1);
             }
+            if (Object.values(data[0]).length === 1) {
+                result = result.slice(0, -2);
+            }
             event.preventDefault();
             /* Necessary for the hiearachical case but will probably have to
                change how getSelectedData is propagated in the hiearachical grid
@@ -68874,6 +68902,26 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(IgxGridComponent.prototype, "groupStrategy", {
+            /**
+             * Gets/Sets the grouping strategy of the grid.
+             *
+             * @remarks The default IgxGrouping extends from IgxSorting and a custom one can be used as a `sortStrategy` as well.
+             *
+             * @example
+             * ```html
+             *  <igx-grid #grid [data]="localData" [groupStrategy]="groupStrategy"></igx-grid>
+             * ```
+             */
+            get: function () {
+                return this._groupStrategy;
+            },
+            set: function (value) {
+                this._groupStrategy = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgxGridComponent.prototype, "dropAreaMessage", {
             get: function () {
                 return this._dropAreaMessage || this.resourceStrings.igx_grid_groupByArea_message;
@@ -69695,7 +69743,7 @@
                         IgxForOfScrollSyncService
                     ],
                     selector: 'igx-grid',
-                    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: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\" [rowData]=\"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:rowData: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\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData: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"
+                    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\" [rowData]=\"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:rowData: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\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData: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"
                 },] }
     ];
     IgxGridComponent.propDecorators = {
@@ -69721,6 +69769,7 @@
         groupingExpressions: [{ type: i0.Input }],
         groupingExpansionState: [{ type: i0.Input }],
         hideGroupedColumns: [{ type: i0.Input }],
+        groupStrategy: [{ type: i0.Input }],
         dropAreaMessage: [{ type: i0.Input }],
         showGroupArea: [{ type: i0.Input }]
     };
@@ -71459,7 +71508,7 @@
         function IgxGridGroupingPipe(gridAPI) {
             this.gridAPI = gridAPI;
         }
-        IgxGridGroupingPipe.prototype.transform = function (collection, expression, expansion, defaultExpanded, id, groupsRecords, _pipeTrigger) {
+        IgxGridGroupingPipe.prototype.transform = function (collection, expression, expansion, groupingStrategy, defaultExpanded, id, groupsRecords, _pipeTrigger) {
             var state = { expressions: [], expansion: [], defaultExpanded: defaultExpanded };
             var grid = this.gridAPI.grid;
             state.expressions = grid.groupingExpressions;
@@ -71476,7 +71525,7 @@
             else {
                 state.expansion = grid.groupingExpansionState;
                 state.defaultExpanded = grid.groupsExpanded;
-                result = DataUtil.group(cloneArray(collection), state, grid, groupsRecords, fullResult);
+                result = DataUtil.group(cloneArray(collection), state, groupingStrategy, grid, groupsRecords, fullResult);
             }
             grid.groupingFlatResult = result.data;
             grid.groupingResult = fullResult.data;
@@ -81799,6 +81848,16 @@
              * @hidden
              */
             _this.isVisibleChange = new i0.EventEmitter();
+            _this._position = 'bottom';
+            _this._positionSettings = {
+                horizontalDirection: exports.HorizontalAlignment.Center,
+                verticalDirection: exports.VerticalAlignment.Bottom,
+                openAnimation: i1.useAnimation(fadeIn),
+                closeAnimation: i1.useAnimation(fadeOut),
+            };
+            return _this;
+        }
+        Object.defineProperty(IgxToastComponent.prototype, "position", {
             /**
              * Sets/gets the position of the toast.
              * If not set, the `position` attribute will have value `IgxToastPosition.Bottom`.
@@ -81811,19 +81870,18 @@
              *
              * @memberof IgxToastComponent
              */
-            _this.position = 'bottom';
-            _this._positionSettings = {
-                horizontalDirection: exports.HorizontalAlignment.Center,
-                verticalDirection: _this.position === 'bottom'
-                    ? exports.VerticalAlignment.Bottom
-                    : _this.position === 'middle'
-                        ? exports.VerticalAlignment.Middle
-                        : exports.VerticalAlignment.Top,
-                openAnimation: i1.useAnimation(fadeIn),
-                closeAnimation: i1.useAnimation(fadeOut),
-            };
-            return _this;
-        }
+            get: function () {
+                return this._position;
+            },
+            set: function (position) {
+                if (position) {
+                    this._position = position;
+                    this._positionSettings.verticalDirection = this.calculatePosition();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgxToastComponent.prototype, "positionSettings", {
             /**
              * Get the position and animation settings used by the toast.
@@ -81884,10 +81942,13 @@
          * this.toast.open();
          * ```
          */
-        IgxToastComponent.prototype.open = function (message) {
+        IgxToastComponent.prototype.open = function (message, settings) {
             if (message !== undefined) {
                 this.textMessage = message;
             }
+            if (settings !== undefined) {
+                this.positionSettings = settings;
+            }
             this.strategy = new GlobalPositionStrategy(this.positionSettings);
             _super.prototype.open.call(this);
         };
@@ -81920,6 +81981,18 @@
                 _this.isVisibleChange.emit(closedEventArgs);
             });
         };
+        IgxToastComponent.prototype.ngOnChanges = function (changes) {
+            if (changes['position'] && this._positionSettings) {
+                this._positionSettings.verticalDirection = this.calculatePosition();
+            }
+        };
+        IgxToastComponent.prototype.calculatePosition = function () {
+            return this.position === 'bottom'
+                ? exports.VerticalAlignment.Bottom
+                : this.position === 'middle'
+                    ? exports.VerticalAlignment.Middle
+                    : exports.VerticalAlignment.Top;
+        };
         return IgxToastComponent;
     }(IgxNotificationsDirective));
     IgxToastComponent.decorators = [
@@ -81942,6 +82015,9 @@
         position: [{ type: i0.Input }],
         positionSettings: [{ type: i0.Input }]
     };
+    __decorate([
+        DeprecateProperty('`position` is deprecated. We suggest using `positionSettings` property instead.')
+    ], IgxToastComponent.prototype, "position", null);
     /**
      * @hidden
      */