igniteui-angular 12.2.4 → 12.2.8

package/bundles/igniteui-angular.umd.js

@@ -1244,7 +1244,7 @@
             fn();
         }
     };
-    var ɵ0$5 = run;
+    var ɵ0$4 = run;
     var listener = function (event) { return run(event.data); };
     var ɵ1$1 = listener;
     // Use function instead of arrow function to workaround an issue in codesandbox
@@ -1276,6 +1276,15 @@
         delete queue[id];
     }
 
+    /**
+     * @hidden
+     */
+    var showMessage = function (message, isMessageShown) {
+        if (!isMessageShown && i0.isDevMode()) {
+            console.warn(message);
+        }
+        return true;
+    };
     var mkenum = function (x) { return x; };
     /**
      * Returns the ResizeObserver type or the polyfilled version if not available.
@@ -1327,6 +1336,18 @@
         }
         return result;
     };
+    /**
+     * Creates an object with prototype from provided source and copies
+     * all properties descriptors from provided source
+     *
+     * @param obj Source to copy prototype and descriptors from
+     * @returns New object with cloned prototype and property descriptors
+     */
+    var copyDescriptors = function (obj) {
+        if (obj) {
+            return Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
+        }
+    };
     /**
      * Deep clones all first level keys of Obj2 and merges them to Obj1
      *
@@ -1414,7 +1435,7 @@
      * @returns true if provided variable is Object
      * @hidden
      */
-    var isObject = function (value) { return value && value.toString() === '[object Object]'; };
+    var isObject = function (value) { return !!(value && value.toString() === '[object Object]'); };
     /**
      * Checks if provided variable is Date
      *
@@ -2489,6 +2510,15 @@
         TransactionEventOrigin["END"] = "endPending";
     })(exports.TransactionEventOrigin || (exports.TransactionEventOrigin = {}));
 
+    var DefaultDataCloneStrategy = /** @class */ (function () {
+        function DefaultDataCloneStrategy() {
+        }
+        DefaultDataCloneStrategy.prototype.clone = function (data) {
+            return cloneValue(data);
+        };
+        return DefaultDataCloneStrategy;
+    }());
+
     /**
      * @hidden
      */
@@ -2537,11 +2567,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);
         };
@@ -2603,13 +2633,14 @@
          * @param deleteRows Should delete rows with DELETE transaction type from data
          * @returns Provided data collections updated with all provided transactions
          */
-        DataUtil.mergeTransactions = function (data, transactions, primaryKey, deleteRows) {
+        DataUtil.mergeTransactions = function (data, transactions, primaryKey, cloneStrategy, deleteRows) {
+            if (cloneStrategy === void 0) { cloneStrategy = new DefaultDataCloneStrategy(); }
             if (deleteRows === void 0) { deleteRows = false; }
             data.forEach(function (item, index) {
                 var rowId = primaryKey ? item[primaryKey] : item;
                 var transaction = transactions.find(function (t) { return t.id === rowId; });
                 if (transaction && transaction.type === exports.TransactionType.UPDATE) {
-                    data[index] = transaction.newValue;
+                    data[index] = mergeObjects(cloneStrategy.clone(data[index]), transaction.newValue);
                 }
             });
             if (deleteRows) {
@@ -2637,8 +2668,9 @@
          * @param deleteRows Should delete rows with DELETE transaction type from data
          * @returns Provided data collections updated with all provided transactions
          */
-        DataUtil.mergeHierarchicalTransactions = function (data, transactions, childDataKey, primaryKey, deleteRows) {
+        DataUtil.mergeHierarchicalTransactions = function (data, transactions, childDataKey, primaryKey, cloneStrategy, deleteRows) {
             var e_1, _a;
+            if (cloneStrategy === void 0) { cloneStrategy = new DefaultDataCloneStrategy(); }
             if (deleteRows === void 0) { deleteRows = false; }
             var _loop_1 = function (transaction) {
                 if (transaction.path) {
@@ -2655,7 +2687,7 @@
                         case exports.TransactionType.UPDATE:
                             var updateIndex = collection.findIndex(function (x) { return x[primaryKey] === transaction.id; });
                             if (updateIndex !== -1) {
-                                collection[updateIndex] = mergeObjects(cloneValue(collection[updateIndex]), transaction.newValue);
+                                collection[updateIndex] = mergeObjects(cloneStrategy.clone(collection[updateIndex]), transaction.newValue);
                             }
                             break;
                         case exports.TransactionType.DELETE:
@@ -7171,7 +7203,8 @@
             var rowInEditMode = grid.gridAPI.crudService.row;
             row.newData = value !== null && value !== void 0 ? value : rowInEditMode.transactionState;
             if (rowInEditMode && row.id === rowInEditMode.id) {
-                row.data = Object.assign(Object.assign({}, row.data), rowInEditMode.transactionState);
+                // do not use spread operator here as it will copy everything over an empty object with no descriptors
+                row.data = Object.assign(copyDescriptors(row.data), row.data, rowInEditMode.transactionState);
                 // TODO: Workaround for updating a row in edit mode through the API
             }
             else if (this.grid.transactions.enabled) {
@@ -7444,7 +7477,7 @@
             }
             if (!data) {
                 if (grid.transactions.enabled) {
-                    data = DataUtil.mergeTransactions(cloneArray(grid.data), grid.transactions.getAggregatedChanges(true), grid.primaryKey);
+                    data = DataUtil.mergeTransactions(cloneArray(grid.data), grid.transactions.getAggregatedChanges(true), grid.primaryKey, grid.dataCloneStrategy);
                     var deletedRows = grid.transactions.getTransactionLog().filter(function (t) { return t.type === exports.TransactionType.DELETE; }).map(function (t) { return t.id; });
                     deletedRows.forEach(function (rowID) {
                         var tempData = grid.primaryKey ? data.map(function (rec) { return rec[grid.primaryKey]; }) : data;
@@ -8592,7 +8625,7 @@
              */
             get: function () {
                 if (this.inEditMode) {
-                    return mergeWith__default['default'](cloneValue(this._rowData), this.grid.transactions.getAggregatedValue(this.rowID, false), function (objValue, srcValue) {
+                    return mergeWith__default['default'](this.grid.dataCloneStrategy.clone(this._rowData), this.grid.transactions.getAggregatedValue(this.rowID, false), function (objValue, srcValue) {
                         if (Array.isArray(srcValue)) {
                             return objValue = srcValue;
                         }
@@ -9139,7 +9172,7 @@
     };
 
     var clear = function (el) { return el === 0 || Boolean(el); };
-    var ɵ0$4 = clear;
+    var ɵ0$3 = clear;
     var first = function (arr) { return arr[0]; };
     var ɵ1 = first;
     var last = function (arr) { return arr[arr.length - 1]; };
@@ -13147,7 +13180,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) {
@@ -16283,6 +16316,7 @@
                 return null;
             }
             var hook = this._document.createElement('div');
+            hook.style.display = 'none';
             element.parentElement.insertBefore(hook, element);
             return hook;
         };
@@ -16851,7 +16885,23 @@
             this._isPending = false;
             this._pendingTransactions = [];
             this._pendingStates = new Map();
+            this._cloneStrategy = new DefaultDataCloneStrategy();
         }
+        Object.defineProperty(IgxBaseTransactionService.prototype, "cloneStrategy", {
+            /**
+             * @inheritdoc
+             */
+            get: function () {
+                return this._cloneStrategy;
+            },
+            set: function (strategy) {
+                if (strategy) {
+                    this._cloneStrategy = strategy;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgxBaseTransactionService.prototype, "canRedo", {
             /**
              * @inheritdoc
@@ -16979,7 +17029,7 @@
                 }
             }
             else {
-                state = { value: cloneValue(transaction.newValue), recordRef: recordRef, type: transaction.type };
+                state = { value: this.cloneStrategy.clone(transaction.newValue), recordRef: recordRef, type: transaction.type };
                 states.set(transaction.id, state);
             }
         };
@@ -17001,7 +17051,7 @@
          */
         IgxBaseTransactionService.prototype.mergeValues = function (first, second) {
             if (isObject(first) || isObject(second)) {
-                return mergeObjects(cloneValue(first), second);
+                return mergeObjects(this.cloneStrategy.clone(first), second);
             }
             else {
                 return second ? second : first;
@@ -17327,7 +17377,7 @@
                 }
             }
             else {
-                state = { value: cloneValue(transaction.newValue), recordRef: recordRef, type: transaction.type };
+                state = { value: this.cloneStrategy.clone(transaction.newValue), recordRef: recordRef, type: transaction.type };
                 states.set(transaction.id, state);
             }
             //  should not clean pending state. This will happen automatically on endPending call
@@ -17418,7 +17468,7 @@
             var _this = this;
             var result = [];
             this._states.forEach(function (state, key) {
-                var value = mergeChanges ? _this.mergeValues(state.recordRef, state.value) : cloneValue(state.value);
+                var value = mergeChanges ? _this.mergeValues(state.recordRef, state.value) : _this.cloneStrategy.clone(state.value);
                 _this.clearArraysFromObject(value);
                 result.push({ id: key, path: state.path, newValue: value, type: state.type });
             });
@@ -17430,7 +17480,7 @@
                 if (id !== undefined) {
                     transactions = transactions.filter(function (t) { return t.id === id; });
                 }
-                DataUtil.mergeHierarchicalTransactions(data, transactions, childDataKey, primaryKeyOrId, true);
+                DataUtil.mergeHierarchicalTransactions(data, transactions, childDataKey, primaryKeyOrId, this.cloneStrategy, true);
                 this.clear(id);
             }
             else {
@@ -17536,7 +17586,6 @@
             switch (type) {
                 case ("Base" /* Base */):
                     return new IgxHierarchicalTransactionService();
-                    ;
                 default:
                     return new IgxBaseTransactionService();
             }
@@ -18299,124 +18348,6 @@
                 },] }
     ];
 
-    /**
-     * @hidden
-     */
-    var DeprecateClass = function (message) {
-        var isMessageShown = false;
-        return function (originalClass) { return /** @class */ (function (_super) {
-            __extends(class_1, _super);
-            function class_1() {
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i] = arguments[_i];
-                }
-                var _this = this;
-                var target = originalClass;
-                var targetName = typeof target === 'function' ? target.name : target.constructor.name;
-                isMessageShown = showMessage(targetName + ": " + message, isMessageShown);
-                _this = _super.apply(this, __spreadArray([], __read(args))) || this;
-                return _this;
-            }
-            return class_1;
-        }(originalClass)); };
-    };
-    /**
-     * @hidden
-     */
-    function DeprecateMethod(message) {
-        var isMessageShown = false;
-        return function (target, key, descriptor) {
-            if (descriptor && descriptor.value) {
-                var originalMethod_1 = descriptor.value;
-                descriptor.value = function () {
-                    var e_1, _a;
-                    var targetName = typeof target === 'function' ? target.name : target.constructor.name;
-                    isMessageShown = showMessage(targetName + "." + key + ": " + message, isMessageShown);
-                    var args = [];
-                    try {
-                        for (var arguments_1 = __values(arguments), arguments_1_1 = arguments_1.next(); !arguments_1_1.done; arguments_1_1 = arguments_1.next()) {
-                            var x = arguments_1_1.value;
-                            args.push(x);
-                        }
-                    }
-                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                    finally {
-                        try {
-                            if (arguments_1_1 && !arguments_1_1.done && (_a = arguments_1.return)) _a.call(arguments_1);
-                        }
-                        finally { if (e_1) throw e_1.error; }
-                    }
-                    return originalMethod_1.call.apply(originalMethod_1, __spreadArray([this], __read(args)));
-                };
-                return descriptor;
-            }
-        };
-    }
-    /**
-     * @hidden
-     */
-    function DeprecateProperty(message) {
-        return function (target, key) {
-            var isMessageShown = false;
-            var messageToDisplay = target.constructor.name + "." + key + ": " + message;
-            // if the target already has the property defined
-            var originalDescriptor = Object.getOwnPropertyDescriptor(target, key);
-            if (originalDescriptor) {
-                var getter_1 = originalDescriptor.get;
-                var setter_1 = originalDescriptor.set;
-                if (getter_1) {
-                    originalDescriptor.get = function () {
-                        isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                        return getter_1.call(this);
-                    };
-                }
-                if (setter_1) {
-                    originalDescriptor.set = function (value) {
-                        isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                        setter_1.call(this, value);
-                    };
-                }
-                return originalDescriptor;
-            }
-            // the target doesn't contain a descriptor for that property, so create one
-            // use backing field to set/get the value of the property to ensure there won't be infinite recursive calls
-            var newKey = generateUniqueKey(target, key);
-            Object.defineProperty(target, key, {
-                configurable: true,
-                enumerable: true,
-                set: function (value) {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    this[newKey] = value;
-                },
-                get: function () {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    return this[newKey];
-                }
-            });
-        };
-    }
-    /**
-     * @hidden
-     */
-    var generateUniqueKey = function (target, key) {
-        var newKey = '_' + key;
-        while (target.hasOwnProperty(newKey)) {
-            newKey = '_' + newKey;
-        }
-        return newKey;
-    };
-    var ɵ0$3 = generateUniqueKey;
-    /**
-     * @hidden
-     */
-    var showMessage = function (message, isMessageShown) {
-        if (!isMessageShown && i0.isDevMode()) {
-            console.warn(message);
-        }
-        return true;
-    };
-
     var NEXT_ID$t = 0;
     /**
      * The `<igx-drop-down-item>` is a container intended for row items in
@@ -18492,7 +18423,6 @@
     };
 
     var NEXT_ID$s = 0;
-    var warningShown = false;
     /**
      * An abstract class defining a drop-down item:
      * With properties / styles for selection, highlight, height
@@ -18566,8 +18496,6 @@
              */
             get: function () {
                 if (this._index === null) {
-                    warningShown = showMessage('IgxDropDownItemBaseDirective: Automatic index is deprecated.' +
-                        'Bind in the template instead using `<igx-drop-down-item [index]="i"` instead.`', warningShown);
                     return this.itemIndex;
                 }
                 return this._index;
@@ -21420,9 +21348,6 @@
         getInactive: [{ type: i0.HostBinding, args: ['class.igx-icon--inactive',] }],
         getColor: [{ type: i0.HostBinding, args: ['style.color',] }]
     };
-    __decorate([
-        DeprecateProperty('`color` is deprecated.')
-    ], IgxIconComponent.prototype, "color", void 0);
 
     /**
      * @hidden
@@ -21713,6 +21638,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 +21665,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 +21711,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',
@@ -26111,10 +26041,10 @@
         });
         Object.defineProperty(IgxRadioGroupDirective.prototype, "disabled", {
             /**
-             * An @Input property that allows you to disable the radio group. By default it's false.
-             *
              * @deprecated in version 12.2.0
              *
+             * An input property that allows you to disable the radio group. By default it's false.
+             *
              * @example
              *  ```html
              * <igx-radio-group disabled></igx-radio-group>
@@ -26132,10 +26062,10 @@
         });
         Object.defineProperty(IgxRadioGroupDirective.prototype, "labelPosition", {
             /**
-             * Sets/gets the position of the `label` in the child radio buttons.
-             *
              * @deprecated in version 12.2.0
              *
+             * Sets/gets the position of the `label` in the child radio buttons.
+             *
              * @remarks
              * If not set, `labelPosition` will have value `"after"`.
              *
@@ -26403,12 +26333,6 @@
         vertical: [{ type: i0.HostBinding, args: ['class.igx-radio-group--vertical',] }],
         alignment: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateProperty('`disabled` is deprecated.')
-    ], IgxRadioGroupDirective.prototype, "disabled", null);
-    __decorate([
-        DeprecateProperty('`labelPosition` is deprecated.')
-    ], IgxRadioGroupDirective.prototype, "labelPosition", null);
     /**
      * @hidden
      */
@@ -28827,7 +28751,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 +28991,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 +29133,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 +29224,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 +29387,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 +29402,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',] }]
@@ -48905,7 +48849,7 @@
             var summaryIDs = [];
             var data = this.grid.data;
             if (this.grid.transactions.enabled) {
-                data = DataUtil.mergeTransactions(cloneArray(this.grid.data), this.grid.transactions.getAggregatedChanges(true), this.grid.primaryKey);
+                data = DataUtil.mergeTransactions(cloneArray(this.grid.data), this.grid.transactions.getAggregatedChanges(true), this.grid.primaryKey, this.grid.dataCloneStrategy);
             }
             var rowData = this.grid.primaryKey ? data.find(function (rec) { return rec[_this.grid.primaryKey] === rowID; }) : rowID;
             var id = '{ ';
@@ -54181,7 +54125,7 @@
         { type: i0.Component, args: [{
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     selector: 'igx-grid-header-row',
-                    template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n"
+                    template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n"
                 },] }
     ];
     IgxGridHeaderRowComponent.ctorParameters = function () { return [
@@ -54365,9 +54309,10 @@
              */
             _this.gridScroll = new i0.EventEmitter();
             /**
+             * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+             *
              * Emitted after the current page is changed.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```html
              * <igx-grid (pageChange)="onPageChange($event)"></igx-grid>
@@ -54380,10 +54325,10 @@
              */
             _this.pageChange = new i0.EventEmitter();
             /**
+             * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+             *
              * Emitted when `perPage` property value of the grid is changed.
              *
-             * @deprecated in version 12.1.0
-             * @example
              * ```html
              * <igx-grid #grid (perPageChange)="onPerPageChange($event)" [autoGenerate]="true"></igx-grid>
              * ```
@@ -54400,6 +54345,8 @@
              */
             _this.class = '';
             /**
+             * @deprecated in version 12.2.0. We suggest using `rowClasses` property instead
+             *
              * Gets/Sets the styling classes applied to all even `IgxGridRowComponent`s in the grid.
              *
              * @example
@@ -54409,6 +54356,8 @@
              */
             _this.evenRowCSS = 'igx-grid__tr--even';
             /**
+             * @deprecated in version 12.2.0. We suggest using `rowClasses` property instead
+             *
              * Gets/Sets the styling classes applied to all odd `IgxGridRowComponent`s in the grid.
              *
              * @example
@@ -54663,9 +54612,10 @@
              */
             _this.filteringDone = new i0.EventEmitter();
             /**
+             * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+             *
              * Emitted after paging is performed.
              *
-             * @deprecated in version 12.1.x
              * @remarks
              * Returns an object consisting of the previous and next pages.
              * @example
@@ -55148,6 +55098,7 @@
                 outlet: _this.rowOutletDirective,
                 positionStrategy: _this.rowEditPositioningStrategy
             };
+            _this._dataCloneStrategy = new DefaultDataCloneStrategy();
             _this.transactionChange$ = new rxjs.Subject();
             _this._rendered = false;
             _this.DRAG_SCROLL_DELTA = 10;
@@ -55170,6 +55121,7 @@
             _this.currencyPipe = new i2.CurrencyPipe(_this.locale);
             _this.percentPipe = new i2.PercentPipe(_this.locale);
             _this._transactions = _this.transactionFactory.create("None" /* None */);
+            _this._transactions.cloneStrategy = _this.dataCloneStrategy;
             _this.cdr.detach();
             return _this;
         }
@@ -55180,6 +55132,27 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(IgxGridBaseDirective.prototype, "dataCloneStrategy", {
+            /**
+             * Gets/Sets the data clone strategy of the grid when in edit mode.
+             *
+             * @example
+             * ```html
+             *  <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>
+             * ```
+             */
+            get: function () {
+                return this._dataCloneStrategy;
+            },
+            set: function (strategy) {
+                if (strategy) {
+                    this._dataCloneStrategy = strategy;
+                    this._transactions.cloneStrategy = strategy;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgxGridBaseDirective.prototype, "headerContainer", {
             get: function () {
                 return this.theadRow.headerContainer;
@@ -55369,9 +55342,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "paging", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+             *
              * Gets/Sets whether the paging feature is enabled.
              *
-             * @deprecated in version 12.1.x
              * @remarks
              * The default state is disabled (false).
              * @example
@@ -55393,9 +55367,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "page", {
             /**
+             * @deprecated in version 12.1.0. Use `page` property form `paginator` component instead
+             *
              * Gets/Sets the current page index.
              *
-             * @deprecated in version 12.1.x
              * @example
              * ```html
              * <igx-grid #grid [data]="Data" [autoGenerate]="true">
@@ -55419,9 +55394,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "perPage", {
             /**
+             * @deprecated in version 12.1.0. Use `perPage` property from `paginator` component instead
+             *
              * Gets/Sets the number of visible items per page.
              *
-             * @deprecated in version 12.1.x
              * @remarks
              * The default is 15.
              * @example
@@ -55446,9 +55422,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnHiding", {
             /**
+             * @deprecated in version 10.1.0
+             *
              * Gets/Sets whether the column hiding UI is enabled.
              *
-             * @deprecated
              * @remarks
              * By default it is disabled (false). In order for the UI to work, you need to enable the toolbar as shown in the example below.
              * @example
@@ -55699,9 +55676,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnHidingTitle", {
             /**
-             * Gets/Sets the title to be displayed in the built-in column hiding UI.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the title to be displayed in the built-in column hiding UI.
              *
              * @example
              * ```html
@@ -55751,9 +55728,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnPinning", {
             /**
-             * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
              *
              * @example
              * ```html
@@ -55772,9 +55749,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnPinningTitle", {
             /**
-             * Gets/Sets the title to be displayed in the UI of the column pinning.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the title to be displayed in the UI of the column pinning.
              *
              * @example
              * ```html
@@ -56377,9 +56354,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "hiddenColumnsText", {
             /**
-             * Gets/Sets the text to be displayed inside the toggle button.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the text to be displayed inside the toggle button.
              *
              * @remarks
              * Used for the built-in column hiding UI of the`IgxColumnComponent`.
@@ -56388,7 +56365,6 @@
              * <igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>
              * ```
              */
-            // @DeprecateProperty('`hiddenColumnsText` is deprecated')
             get: function () {
                 return this._hiddenColumnsText;
             },
@@ -56401,9 +56377,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "pinnedColumnsText", {
             /**
-             * Gets/Sets the text to be displayed inside the toggle button.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the text to be displayed inside the toggle button.
              *
              * @remarks
              * Used for the built-in column pinning UI of the`IgxColumnComponent`.
@@ -56497,9 +56473,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "showToolbar", {
             /**
-             * Gets/Sets whether the toolbar is shown.
+             * @deprecated in version 11.0.0
              *
-             * @deprecated
+             * Gets/Sets whether the toolbar is shown.
              *
              * @example
              * ```html
@@ -56517,9 +56493,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "toolbarTitle", {
             /**
-             * Gets/Sets the toolbar's title.
+             * @deprecated in version 11.0.0
              *
-             * @deprecated
+             * Gets/Sets the toolbar's title.
              *
              * @example
              * ```html
@@ -56538,9 +56514,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportExcel", {
             /**
-             * Gets/Sets whether exporting to MS Excel is enabled or disabled.
+             * @deprecated `exportExcel` is deprecated
              *
-             * @deprecated
+             * Gets/Sets whether exporting to MS Excel is enabled or disabled.
              *
              * @example
              * ```html
@@ -56559,9 +56535,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportCsv", {
             /**
-             * Gets/Sets whether the option for exporting to CSV is enabled or disabled.
+             * @deprecated `exportCsv` is deprecated
              *
-             * @deprecated
+             * Gets/Sets whether the option for exporting to CSV is enabled or disabled.
              *
              * ```html
              * <igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportCsv]="true"></igx-grid>
@@ -56579,9 +56555,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportText", {
             /**
-             * Gets/Sets the textual content for the main export button.
+             * @deprecated `exportText` is deprecated
              *
-             * @deprecated
+             * Gets/Sets the textual content for the main export button.
              *
              * @example
              * ```html
@@ -56600,9 +56576,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportExcelText", {
             /**
-             * Gets/Sets the textual content for the MS Excel export button.
+             * @deprecated `exportExcelText` is deprecated
              *
-             * @deprecated
+             * Gets/Sets the textual content for the MS Excel export button.
              *
              * ```html
              * <igx-grid [exportExcelText]="'My Excel Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>
@@ -56620,9 +56596,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportCsvText", {
             /**
-             * Gets/Sets the textual content for the CSV export button.
+             * @deprecated `exportCsvText` is deprecated
              *
-             * @deprecated
+             * Gets/Sets the textual content for the CSV export button.
              *
              * @example
              * ```html
@@ -57888,9 +57864,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "totalPages", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+             *
              * Gets the total number of pages.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```typescript
              * const totalPages = this.grid.totalPages;
@@ -57905,9 +57882,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "isFirstPage", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+             *
              * Gets if the current page is the first page.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```typescript
              * const firstPage = this.grid.isFirstPage;
@@ -57920,9 +57898,10 @@
             configurable: true
         });
         /**
+         * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+         *
          * Goes to the next page, if the grid is not already at the last page.
          *
-         * @deprecated in version 12.1.0
          * @example
          * ```typescript
          * this.grid1.nextPage();
@@ -57934,9 +57913,10 @@
             (_a = this.paginator) === null || _a === void 0 ? void 0 : _a.nextPage();
         };
         /**
+         * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+         *
          * Goes to the previous page, if the grid is not already at the first page.
          *
-         * @deprecated in version 12.1.0
          * @example
          * ```typescript
          * this.grid1.previousPage();
@@ -57977,9 +57957,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "isLastPage", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+             *
              * Returns if the current page is the last page.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```typescript
              * const lastPage = this.grid.isLastPage;
@@ -58096,6 +58077,8 @@
             this._columnsReordered(column);
         };
         /**
+         * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+         *
          * Goes to the desired page index.
          *
          * @example
@@ -59425,6 +59408,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
@@ -59843,6 +59829,9 @@
             else {
                 this._transactions = this.transactionFactory.create("None" /* None */);
             }
+            if (this.dataCloneStrategy) {
+                this._transactions.cloneStrategy = this.dataCloneStrategy;
+            }
         };
         IgxGridBaseDirective.prototype.subscribeToTransactions = function () {
             this.transactionChange$.next();
@@ -61229,6 +61218,7 @@
         primaryKey: [{ type: i0.Input }],
         uniqueColumnValuesStrategy: [{ type: i0.Input }],
         excelStyleFilteringComponents: [{ type: i0.ContentChildren, args: [IgxGridExcelStyleFilteringComponent, { read: IgxGridExcelStyleFilteringComponent, descendants: false },] }],
+        dataCloneStrategy: [{ type: i0.Input }],
         cellClick: [{ type: i0.Output }],
         selected: [{ type: i0.Output }],
         rowSelected: [{ type: i0.Output }],
@@ -61383,24 +61373,9 @@
         totalRecords: [{ type: i0.Input }],
         selectRowOnClick: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateProperty('`pageChange` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "pageChange", void 0);
-    __decorate([
-        DeprecateProperty('`perPageChange` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "perPageChange", void 0);
-    __decorate([
-        DeprecateProperty('`evenRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
-    ], IgxGridBaseDirective.prototype, "evenRowCSS", void 0);
-    __decorate([
-        DeprecateProperty('`oddRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
-    ], IgxGridBaseDirective.prototype, "oddRowCSS", void 0);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "primaryKey", void 0);
-    __decorate([
-        DeprecateProperty('`pagingDone` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "pagingDone", void 0);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "filteringLogic", null);
@@ -61410,18 +61385,6 @@
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "advancedFilteringExpressionsTree", null);
-    __decorate([
-        DeprecateProperty('`paging` is deprecated')
-    ], IgxGridBaseDirective.prototype, "paging", null);
-    __decorate([
-        DeprecateProperty('`page` is deprecated. Use `page` property form `paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "page", null);
-    __decorate([
-        DeprecateProperty('`perPage` is deprecated. Use `perPage` property from `paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "perPage", null);
-    __decorate([
-        DeprecateProperty('`columnHiding` is deprecated.')
-    ], IgxGridBaseDirective.prototype, "columnHiding", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "hideRowSelectors", null);
@@ -61443,42 +61406,9 @@
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "isLoading", null);
-    __decorate([
-        DeprecateProperty('`columnHidingTitle` is deprecated')
-    ], IgxGridBaseDirective.prototype, "columnHidingTitle", null);
-    __decorate([
-        DeprecateProperty('`columnPinning` is deprecated')
-    ], IgxGridBaseDirective.prototype, "columnPinning", null);
-    __decorate([
-        DeprecateProperty('`columnPinningTitle` is deprecated')
-    ], IgxGridBaseDirective.prototype, "columnPinningTitle", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "sortingExpressions", null);
-    __decorate([
-        DeprecateProperty('`pinnedColumnsText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "pinnedColumnsText", null);
-    __decorate([
-        DeprecateProperty('`showToolbar` is deprecated')
-    ], IgxGridBaseDirective.prototype, "showToolbar", null);
-    __decorate([
-        DeprecateProperty('`toolbarTitle` is deprecated')
-    ], IgxGridBaseDirective.prototype, "toolbarTitle", null);
-    __decorate([
-        DeprecateProperty('`exportExcel` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportExcel", null);
-    __decorate([
-        DeprecateProperty('`exportCsv` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportCsv", null);
-    __decorate([
-        DeprecateProperty('`exportText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportText", null);
-    __decorate([
-        DeprecateProperty('`exportExcelText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportExcelText", null);
-    __decorate([
-        DeprecateProperty('`exportCsvText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportCsvText", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "cellSelection", null);
@@ -61488,24 +61418,6 @@
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "columnSelection", null);
-    __decorate([
-        DeprecateProperty('`totalPages` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "totalPages", null);
-    __decorate([
-        DeprecateProperty('`isFirstPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "isFirstPage", null);
-    __decorate([
-        DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "nextPage", null);
-    __decorate([
-        DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "previousPage", null);
-    __decorate([
-        DeprecateProperty('`isLastPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "isLastPage", null);
-    __decorate([
-        DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "paginate", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "selectRowOnClick", null);
@@ -61544,6 +61456,22 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(BaseRow.prototype, "addRowUI", {
+            /**
+             * Gets if this represents add row UI
+             *
+             * ```typescript
+             * let isAddRow = row.addRowUI;
+             * ```
+             */
+            get: function () {
+                return !!this.grid.crudService.row &&
+                    this.grid.crudService.row.getClassName() === IgxAddRow.name &&
+                    this.grid.crudService.row.id === this.key;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(BaseRow.prototype, "data", {
             /**
              * The data record that populates the row.
@@ -61555,7 +61483,7 @@
             get: function () {
                 var _a, _b;
                 if (this.inEditMode) {
-                    return mergeWith__default['default'](cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
+                    return mergeWith__default['default'](this.grid.dataCloneStrategy.clone((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
                         if (Array.isArray(srcValue)) {
                             return objValue = srcValue;
                         }
@@ -61568,7 +61496,7 @@
         });
         Object.defineProperty(BaseRow.prototype, "rowData", {
             /**
-             * @deprecated Use 'data' instead.
+             * @deprecated Use 'data' instead
              *
              * The data record that populates the row
              */
@@ -61580,8 +61508,7 @@
         });
         Object.defineProperty(BaseRow.prototype, "rowID", {
             /**
-             * @deprecated Use 'key' instead.
-             *
+             * @deprecated Use 'key' instead
              */
             get: function () {
                 return this.key;
@@ -61787,12 +61714,6 @@
         };
         return BaseRow;
     }());
-    __decorate([
-        DeprecateProperty("'rowData' property is deprecated. Use 'data' instead.")
-    ], BaseRow.prototype, "rowData", null);
-    __decorate([
-        DeprecateProperty("'rowID' property is deprecated. Use 'key' instead.")
-    ], BaseRow.prototype, "rowID", null);
     var IgxGridRow = /** @class */ (function (_super) {
         __extends(IgxGridRow, _super);
         /**
@@ -61922,7 +61843,7 @@
             get: function () {
                 var _a;
                 if (this.inEditMode) {
-                    return mergeWith__default['default'](cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
+                    return mergeWith__default['default'](this.grid.dataCloneStrategy.clone((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
                         if (Array.isArray(srcValue)) {
                             return objValue = srcValue;
                         }
@@ -63035,17 +62956,6 @@
             enumerable: false,
             configurable: true
         });
-        /**
-         * @deprecated
-         * Gets whether the cell is selected.
-         * ```typescript
-         * let isCellSelected = thid.cell.isCellSelected();
-         * ```
-         * @memberof IgxGridCellComponent
-         */
-        IgxGridCellComponent.prototype.isCellSelected = function () {
-            return this.selectionService.selected(this.selectionNode);
-        };
         /**
          * @hidden
          * @internal
@@ -63357,9 +63267,6 @@
         onClick: [{ type: i0.HostListener, args: ['click', ['$event'],] }],
         onContextMenu: [{ type: i0.HostListener, args: ['contextmenu', ['$event'],] }]
     };
-    __decorate([
-        DeprecateMethod("'isCellSelected' is deprecated. Use 'selected' property instead.")
-    ], IgxGridCellComponent.prototype, "isCellSelected", null);
 
     var IgxGridFooterComponent = /** @class */ (function () {
         function IgxGridFooterComponent() {
@@ -63762,9 +63669,10 @@
         }
         Object.defineProperty(IgxColumnActionsComponent.prototype, "columns", {
             /**
+             * @deprecated Use grid input instead.
+             *
              * Gets the grid columns to provide an action for.
              *
-             * @deprecated
              * @example
              * ```typescript
              * let gridColumns = this.columnActions.columns;
@@ -64044,9 +63952,6 @@
         checkAllText: [{ type: i0.Input }],
         id: [{ type: i0.HostBinding, args: ['attr.id',] }, { type: i0.Input }]
     };
-    __decorate([
-        DeprecateProperty("Deprecated. Use 'grid' input instead.")
-    ], IgxColumnActionsComponent.prototype, "columns", null);
 
     /**
      * @hidden
@@ -64292,7 +64197,7 @@
         IgxGridTransactionPipe.prototype.transform = function (collection, _id, _pipeTrigger) {
             var grid = this.gridAPI.grid;
             if (grid.transactions.enabled) {
-                var result = DataUtil.mergeTransactions(cloneArray(collection), grid.transactions.getAggregatedChanges(true), grid.primaryKey);
+                var result = DataUtil.mergeTransactions(cloneArray(collection), grid.transactions.getAggregatedChanges(true), grid.primaryKey, grid.dataCloneStrategy);
                 return result;
             }
             return collection;
@@ -68874,6 +68779,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;
@@ -68898,7 +68823,8 @@
             configurable: true
         });
         /**
-         * @deprecated
+         * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+         *
          * Returns a `CellType` object that matches the conditions.
          *
          * @example
@@ -69695,7 +69621,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,12 +69647,10 @@
         groupingExpressions: [{ type: i0.Input }],
         groupingExpansionState: [{ type: i0.Input }],
         hideGroupedColumns: [{ type: i0.Input }],
+        groupStrategy: [{ type: i0.Input }],
         dropAreaMessage: [{ type: i0.Input }],
         showGroupArea: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-    ], IgxGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
     var IgxGridStateDirective = /** @class */ (function () {
         /**
@@ -71459,7 +71383,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 +71400,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;
@@ -72902,7 +72826,8 @@
             configurable: true
         });
         /**
-         * @deprecated
+         * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+         *
          * Returns a `CellType` object that matches the conditions.
          *
          * @example
@@ -73614,9 +73539,6 @@
         expansionDepth: [{ type: i0.Input }],
         rowLoadingIndicatorTemplate: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-    ], IgxTreeGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
     var IgxTreeGridRowComponent = /** @class */ (function (_super) {
         __extends(IgxTreeGridRowComponent, _super);
@@ -74081,11 +74003,11 @@
                     var childDataKey = grid.childDataKey;
                     if (foreignKey) {
                         var flatDataClone = cloneArray(collection);
-                        return DataUtil.mergeTransactions(flatDataClone, aggregatedChanges, grid.primaryKey);
+                        return DataUtil.mergeTransactions(flatDataClone, aggregatedChanges, grid.primaryKey, grid.dataCloneStrategy);
                     }
                     else if (childDataKey) {
                         var hierarchicalDataClone = cloneHierarchicalArray(collection, childDataKey);
-                        return DataUtil.mergeHierarchicalTransactions(hierarchicalDataClone, aggregatedChanges, childDataKey, grid.primaryKey);
+                        return DataUtil.mergeHierarchicalTransactions(hierarchicalDataClone, aggregatedChanges, childDataKey, grid.primaryKey, grid.dataCloneStrategy);
                     }
                 }
             }
@@ -76114,7 +76036,8 @@
             configurable: true
         });
         /**
-         * @deprecated
+         * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+         *
          * Returns a `CellType` object that matches the conditions.
          *
          * @example
@@ -76810,9 +76733,6 @@
         data: [{ type: i0.Input }],
         expandChildren: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-    ], IgxHierarchicalGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
     var IgxHierarchicalGridCellComponent = /** @class */ (function (_super) {
         __extends(IgxHierarchicalGridCellComponent, _super);
@@ -81799,7 +81719,19 @@
              * @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", {
             /**
+             * @deprecated in version 12.2.3. We suggest using `positionSettings` property instead
+             *
              * Sets/gets the position of the toast.
              * If not set, the `position` attribute will have value `IgxToastPosition.Bottom`.
              * ```html
@@ -81811,19 +81743,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 +81815,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 +81854,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 = [
@@ -85697,6 +85643,7 @@
     exports.DEFAULT_OWNER = DEFAULT_OWNER;
     exports.DataUtil = DataUtil;
     exports.DateRangePickerFormatPipe = DateRangePickerFormatPipe;
+    exports.DefaultDataCloneStrategy = DefaultDataCloneStrategy;
     exports.DefaultSortingStrategy = DefaultSortingStrategy;
     exports.DisplayDensity = DisplayDensity;
     exports.DisplayDensityBase = DisplayDensityBase;
@@ -86198,185 +86145,183 @@
     exports.ɵ2 = ɵ2;
     exports.ɵa = IgxActionStripMenuItemDirective;
     exports.ɵb = IGX_DROPDOWN_BASE;
-    exports.ɵba = IgxGridActionButtonComponent;
-    exports.ɵbb = ToggleAnimationPlayer;
-    exports.ɵbc = IgxExpansionPanelTitleDirective;
-    exports.ɵbd = IgxExpansionPanelDescriptionDirective;
-    exports.ɵbe = IgxExpansionPanelIconDirective;
-    exports.ɵbf = IgxBannerActionsDirective;
-    exports.ɵbg = IgxDaysViewNavigationService;
-    exports.ɵbh = IgxDayItemComponent;
-    exports.ɵbi = IgxMonthViewSlotsCalendar;
-    exports.ɵbj = IgxGetViewDateCalendar;
-    exports.ɵbk = IgxCarouselIndicatorDirective;
-    exports.ɵbl = IgxCarouselNextButtonDirective;
-    exports.ɵbm = IgxCarouselPrevButtonDirective;
-    exports.ɵbn = IgxComboAPIService;
-    exports.ɵbo = IGX_COMBO_COMPONENT;
-    exports.ɵbq = IgxComboDropDownComponent;
-    exports.ɵbr = IgxComboItemComponent;
-    exports.ɵbs = IgxComboHeaderDirective;
-    exports.ɵbt = IgxComboFooterDirective;
-    exports.ɵbu = IgxComboItemDirective;
-    exports.ɵbv = IgxComboEmptyDirective;
-    exports.ɵbw = IgxComboHeaderItemDirective;
-    exports.ɵbx = IgxComboAddItemDirective;
-    exports.ɵby = IgxComboToggleIconDirective;
-    exports.ɵbz = IgxComboClearIconDirective;
-    exports.ɵca = IgxComboFilteringPipe;
-    exports.ɵcb = IgxComboGroupingPipe;
-    exports.ɵcc = IgxComboAddItemComponent;
-    exports.ɵcd = PickerBaseDirective;
-    exports.ɵce = IgxCalendarContainerComponent;
-    exports.ɵcf = IgxCalendarContainerModule;
-    exports.ɵcg = IgxDialogTitleDirective;
-    exports.ɵch = IgxDialogActionsDirective;
-    exports.ɵci = IgxCellCrudState;
-    exports.ɵcj = IgxRowCrudState;
-    exports.ɵck = IgxRowAddCrudState;
-    exports.ɵcl = IgxGridCRUDService;
-    exports.ɵcm = IgxColumnMovingService;
-    exports.ɵcn = IgxExcelStyleCustomDialogComponent;
-    exports.ɵco = IgxExcelStyleDefaultExpressionComponent;
-    exports.ɵcp = IgxExcelStyleDateExpressionComponent;
-    exports.ɵcq = HammerGesturesManager;
-    exports.ɵcr = WatchChanges;
-    exports.ɵcs = WatchColumnChanges;
-    exports.ɵct = notifyChanges;
-    exports.ɵcu = IgxNotificationsDirective;
-    exports.ɵcv = IgxGridColumnResizerComponent;
-    exports.ɵcw = IgxColumnResizerDirective;
-    exports.ɵcx = IgxColumnResizingService;
-    exports.ɵcy = IgxRowSelectorDirective;
-    exports.ɵcz = IgxGroupByRowSelectorDirective;
+    exports.ɵba = IgxExpansionPanelTitleDirective;
+    exports.ɵbb = IgxExpansionPanelDescriptionDirective;
+    exports.ɵbc = IgxExpansionPanelIconDirective;
+    exports.ɵbd = IgxBannerActionsDirective;
+    exports.ɵbe = IgxDaysViewNavigationService;
+    exports.ɵbf = IgxDayItemComponent;
+    exports.ɵbg = IgxMonthViewSlotsCalendar;
+    exports.ɵbh = IgxGetViewDateCalendar;
+    exports.ɵbi = IgxCarouselIndicatorDirective;
+    exports.ɵbj = IgxCarouselNextButtonDirective;
+    exports.ɵbk = IgxCarouselPrevButtonDirective;
+    exports.ɵbl = IgxComboAPIService;
+    exports.ɵbm = IGX_COMBO_COMPONENT;
+    exports.ɵbo = IgxComboDropDownComponent;
+    exports.ɵbp = IgxComboItemComponent;
+    exports.ɵbq = IgxComboHeaderDirective;
+    exports.ɵbr = IgxComboFooterDirective;
+    exports.ɵbs = IgxComboItemDirective;
+    exports.ɵbt = IgxComboEmptyDirective;
+    exports.ɵbu = IgxComboHeaderItemDirective;
+    exports.ɵbv = IgxComboAddItemDirective;
+    exports.ɵbw = IgxComboToggleIconDirective;
+    exports.ɵbx = IgxComboClearIconDirective;
+    exports.ɵby = IgxComboFilteringPipe;
+    exports.ɵbz = IgxComboGroupingPipe;
+    exports.ɵca = IgxComboAddItemComponent;
+    exports.ɵcb = PickerBaseDirective;
+    exports.ɵcc = IgxCalendarContainerComponent;
+    exports.ɵcd = IgxCalendarContainerModule;
+    exports.ɵce = IgxDialogTitleDirective;
+    exports.ɵcf = IgxDialogActionsDirective;
+    exports.ɵcg = IgxCellCrudState;
+    exports.ɵch = IgxRowCrudState;
+    exports.ɵci = IgxRowAddCrudState;
+    exports.ɵcj = IgxGridCRUDService;
+    exports.ɵck = IgxColumnMovingService;
+    exports.ɵcl = IgxExcelStyleCustomDialogComponent;
+    exports.ɵcm = IgxExcelStyleDefaultExpressionComponent;
+    exports.ɵcn = IgxExcelStyleDateExpressionComponent;
+    exports.ɵco = HammerGesturesManager;
+    exports.ɵcp = WatchChanges;
+    exports.ɵcq = WatchColumnChanges;
+    exports.ɵcr = notifyChanges;
+    exports.ɵcs = IgxNotificationsDirective;
+    exports.ɵct = IgxGridColumnResizerComponent;
+    exports.ɵcu = IgxColumnResizerDirective;
+    exports.ɵcv = IgxColumnResizingService;
+    exports.ɵcw = IgxRowSelectorDirective;
+    exports.ɵcx = IgxGroupByRowSelectorDirective;
+    exports.ɵcy = IgxHeadSelectorDirective;
+    exports.ɵcz = IgxRowDragDirective;
     exports.ɵd = IgxGridSelectionService;
-    exports.ɵda = IgxHeadSelectorDirective;
-    exports.ɵdb = IgxRowDragDirective;
-    exports.ɵdc = IgxDragIndicatorIconDirective;
-    exports.ɵdd = IgxRowDragGhostDirective;
-    exports.ɵde = IgxRowDragModule;
-    exports.ɵdf = IgxGridHeaderRowComponent;
-    exports.ɵdg = IgxGridHeaderGroupComponent;
-    exports.ɵdh = IgxGridHeaderComponent;
-    exports.ɵdi = IgxGridFilteringCellComponent;
-    exports.ɵdj = IgxFilteringService;
-    exports.ɵdk = IgxGridFilteringRowComponent;
-    exports.ɵdl = IgxGridGroupByAreaComponent;
-    exports.ɵdm = IgxGroupByAreaDirective;
-    exports.ɵdn = IgxGroupByMetaPipe;
-    exports.ɵdo = IgxTemplateOutletDirective;
-    exports.ɵdp = IgxTemplateOutletModule;
-    exports.ɵdq = IgxRowEditTemplateDirective;
-    exports.ɵdr = IgxRowEditTextDirective;
-    exports.ɵds = IgxRowAddTextDirective;
-    exports.ɵdt = IgxRowEditActionsDirective;
-    exports.ɵdu = IgxRowEditTabStopDirective;
-    exports.ɵdv = IgxSummaryRowComponent;
-    exports.ɵdw = IgxSummaryCellComponent;
-    exports.ɵdx = IgxRowDirective;
-    exports.ɵdy = IgxGridNavigationService;
-    exports.ɵdz = IgxGridSummaryService;
-    exports.ɵea = ConnectedPositioningStrategy;
-    exports.ɵeb = IgxGridGroupByRowComponent;
-    exports.ɵec = IgxTreeGridSelectionService;
-    exports.ɵed = IgxTreeGridGroupByAreaComponent;
-    exports.ɵee = IgxRowLoadingIndicatorTemplateDirective;
-    exports.ɵef = IgxHierarchicalGridNavigationService;
-    exports.ɵeg = IgxChildGridRowComponent;
-    exports.ɵeh = IgxGridCellComponent;
-    exports.ɵei = IgxGridFooterComponent;
-    exports.ɵej = IgxAdvancedFilteringDialogComponent;
-    exports.ɵek = IgxColumnHidingDirective;
-    exports.ɵel = IgxColumnPinningDirective;
-    exports.ɵem = IgxGridSharedModules;
-    exports.ɵen = IgxProcessBarTextTemplateDirective;
-    exports.ɵeo = IgxProgressBarGradientDirective;
-    exports.ɵep = DIR_DOCUMENT_FACTORY;
-    exports.ɵeq = DIR_DOCUMENT;
-    exports.ɵer = IgxDirectionality;
-    exports.ɵes = IgxSelectItemNavigationDirective;
-    exports.ɵet = IGX_TIME_PICKER_COMPONENT;
-    exports.ɵev = IgxItemListDirective;
-    exports.ɵew = IgxTimeItemDirective;
-    exports.ɵex = IgxTimePickerTemplateDirective;
-    exports.ɵey = IgxTimePickerActionsDirective;
-    exports.ɵez = TimeFormatPipe;
+    exports.ɵda = IgxDragIndicatorIconDirective;
+    exports.ɵdb = IgxRowDragGhostDirective;
+    exports.ɵdc = IgxRowDragModule;
+    exports.ɵdd = IgxGridHeaderRowComponent;
+    exports.ɵde = IgxGridHeaderGroupComponent;
+    exports.ɵdf = IgxGridHeaderComponent;
+    exports.ɵdg = IgxGridFilteringCellComponent;
+    exports.ɵdh = IgxFilteringService;
+    exports.ɵdi = IgxGridFilteringRowComponent;
+    exports.ɵdj = IgxGridGroupByAreaComponent;
+    exports.ɵdk = IgxGroupByAreaDirective;
+    exports.ɵdl = IgxGroupByMetaPipe;
+    exports.ɵdm = IgxTemplateOutletDirective;
+    exports.ɵdn = IgxTemplateOutletModule;
+    exports.ɵdo = IgxRowEditTemplateDirective;
+    exports.ɵdp = IgxRowEditTextDirective;
+    exports.ɵdq = IgxRowAddTextDirective;
+    exports.ɵdr = IgxRowEditActionsDirective;
+    exports.ɵds = IgxRowEditTabStopDirective;
+    exports.ɵdt = IgxSummaryRowComponent;
+    exports.ɵdu = IgxSummaryCellComponent;
+    exports.ɵdv = IgxRowDirective;
+    exports.ɵdw = IgxGridNavigationService;
+    exports.ɵdx = IgxGridSummaryService;
+    exports.ɵdy = ConnectedPositioningStrategy;
+    exports.ɵdz = IgxGridGroupByRowComponent;
+    exports.ɵea = IgxTreeGridSelectionService;
+    exports.ɵeb = IgxTreeGridGroupByAreaComponent;
+    exports.ɵec = IgxRowLoadingIndicatorTemplateDirective;
+    exports.ɵed = IgxHierarchicalGridNavigationService;
+    exports.ɵee = IgxChildGridRowComponent;
+    exports.ɵef = IgxGridCellComponent;
+    exports.ɵeg = IgxGridFooterComponent;
+    exports.ɵeh = IgxAdvancedFilteringDialogComponent;
+    exports.ɵei = IgxColumnHidingDirective;
+    exports.ɵej = IgxColumnPinningDirective;
+    exports.ɵek = IgxGridSharedModules;
+    exports.ɵel = IgxProcessBarTextTemplateDirective;
+    exports.ɵem = IgxProgressBarGradientDirective;
+    exports.ɵen = DIR_DOCUMENT_FACTORY;
+    exports.ɵeo = DIR_DOCUMENT;
+    exports.ɵep = IgxDirectionality;
+    exports.ɵeq = IgxSelectItemNavigationDirective;
+    exports.ɵer = IGX_TIME_PICKER_COMPONENT;
+    exports.ɵet = IgxItemListDirective;
+    exports.ɵeu = IgxTimeItemDirective;
+    exports.ɵev = IgxTimePickerTemplateDirective;
+    exports.ɵew = IgxTimePickerActionsDirective;
+    exports.ɵex = TimeFormatPipe;
+    exports.ɵey = TimeItemPipe;
+    exports.ɵez = IgxGridPipesModule;
     exports.ɵf = IGX_EXPANSION_PANEL_COMPONENT;
-    exports.ɵfa = TimeItemPipe;
-    exports.ɵfb = IgxGridPipesModule;
-    exports.ɵfc = IgxGridCellStyleClassesPipe;
-    exports.ɵfd = IgxGridCellStylesPipe;
-    exports.ɵfe = IgxGridRowClassesPipe;
-    exports.ɵff = IgxGridRowStylesPipe;
-    exports.ɵfg = IgxGridNotGroupedPipe;
-    exports.ɵfh = IgxGridTopLevelColumns;
-    exports.ɵfi = IgxGridFilterConditionPipe;
-    exports.ɵfj = IgxGridTransactionPipe;
-    exports.ɵfk = IgxGridPaginatorOptionsPipe;
-    exports.ɵfl = IgxHasVisibleColumnsPipe;
-    exports.ɵfm = IgxGridRowPinningPipe;
-    exports.ɵfn = IgxColumnActionEnabledPipe;
-    exports.ɵfo = IgxFilterActionColumnsPipe;
-    exports.ɵfp = IgxSortActionColumnsPipe;
-    exports.ɵfq = IgxGridDataMapperPipe;
-    exports.ɵfr = IgxStringReplacePipe;
-    exports.ɵfs = IgxGridTransactionStatePipe;
-    exports.ɵft = IgxColumnFormatterPipe;
-    exports.ɵfu = IgxSummaryFormatterPipe;
-    exports.ɵfv = IgxGridAddRowPipe;
-    exports.ɵfw = IgxHeaderGroupWidthPipe;
-    exports.ɵfx = IgxHeaderGroupStylePipe;
-    exports.ɵfy = IgxGridColumnModule;
-    exports.ɵfz = IgxGridHeadersModule;
+    exports.ɵfa = IgxGridCellStyleClassesPipe;
+    exports.ɵfb = IgxGridCellStylesPipe;
+    exports.ɵfc = IgxGridRowClassesPipe;
+    exports.ɵfd = IgxGridRowStylesPipe;
+    exports.ɵfe = IgxGridNotGroupedPipe;
+    exports.ɵff = IgxGridTopLevelColumns;
+    exports.ɵfg = IgxGridFilterConditionPipe;
+    exports.ɵfh = IgxGridTransactionPipe;
+    exports.ɵfi = IgxGridPaginatorOptionsPipe;
+    exports.ɵfj = IgxHasVisibleColumnsPipe;
+    exports.ɵfk = IgxGridRowPinningPipe;
+    exports.ɵfl = IgxColumnActionEnabledPipe;
+    exports.ɵfm = IgxFilterActionColumnsPipe;
+    exports.ɵfn = IgxSortActionColumnsPipe;
+    exports.ɵfo = IgxGridDataMapperPipe;
+    exports.ɵfp = IgxStringReplacePipe;
+    exports.ɵfq = IgxGridTransactionStatePipe;
+    exports.ɵfr = IgxColumnFormatterPipe;
+    exports.ɵfs = IgxSummaryFormatterPipe;
+    exports.ɵft = IgxGridAddRowPipe;
+    exports.ɵfu = IgxHeaderGroupWidthPipe;
+    exports.ɵfv = IgxHeaderGroupStylePipe;
+    exports.ɵfw = IgxGridColumnModule;
+    exports.ɵfx = IgxGridHeadersModule;
+    exports.ɵfy = SortingIndexPipe;
+    exports.ɵfz = IgxGridFilteringModule;
     exports.ɵg = IGX_TREE_COMPONENT;
-    exports.ɵga = SortingIndexPipe;
-    exports.ɵgb = IgxGridFilteringModule;
-    exports.ɵgc = IgxColumnMovingModule;
-    exports.ɵgd = IgxColumnMovingDropDirective;
-    exports.ɵge = IgxColumnMovingDragDirective;
-    exports.ɵgf = IgxGridResizingModule;
-    exports.ɵgg = IgxResizeHandleDirective;
-    exports.ɵgh = IgxGridExcelStyleFilteringModule;
-    exports.ɵgi = IgxGridSelectionModule;
-    exports.ɵgj = IgxGridDragSelectDirective;
-    exports.ɵgk = IgxGridSummaryModule;
-    exports.ɵgl = IgxSummaryDataPipe;
-    exports.ɵgm = IgxGridToolbarModule;
-    exports.ɵgn = BaseToolbarDirective;
-    exports.ɵgo = BaseToolbarColumnActionsDirective;
-    exports.ɵgp = IgxGridRowComponent;
-    exports.ɵgq = IgxGridSortingPipe;
-    exports.ɵgr = IgxGridGroupingPipe;
-    exports.ɵgs = IgxGridPagingPipe;
-    exports.ɵgt = IgxGridFilteringPipe;
-    exports.ɵgu = IgxGridSummaryPipe;
-    exports.ɵgv = IgxGridDetailsPipe;
-    exports.ɵgw = IgxGridExpandableCellComponent;
-    exports.ɵgx = IgxTreeGridRowComponent;
-    exports.ɵgy = IgxTreeGridCellComponent;
-    exports.ɵgz = IgxTreeGridHierarchizingPipe;
+    exports.ɵga = IgxColumnMovingModule;
+    exports.ɵgb = IgxColumnMovingDropDirective;
+    exports.ɵgc = IgxColumnMovingDragDirective;
+    exports.ɵgd = IgxGridResizingModule;
+    exports.ɵge = IgxResizeHandleDirective;
+    exports.ɵgf = IgxGridExcelStyleFilteringModule;
+    exports.ɵgg = IgxGridSelectionModule;
+    exports.ɵgh = IgxGridDragSelectDirective;
+    exports.ɵgi = IgxGridSummaryModule;
+    exports.ɵgj = IgxSummaryDataPipe;
+    exports.ɵgk = IgxGridToolbarModule;
+    exports.ɵgl = BaseToolbarDirective;
+    exports.ɵgm = BaseToolbarColumnActionsDirective;
+    exports.ɵgn = IgxGridRowComponent;
+    exports.ɵgo = IgxGridSortingPipe;
+    exports.ɵgp = IgxGridGroupingPipe;
+    exports.ɵgq = IgxGridPagingPipe;
+    exports.ɵgr = IgxGridFilteringPipe;
+    exports.ɵgs = IgxGridSummaryPipe;
+    exports.ɵgt = IgxGridDetailsPipe;
+    exports.ɵgu = IgxGridExpandableCellComponent;
+    exports.ɵgv = IgxTreeGridRowComponent;
+    exports.ɵgw = IgxTreeGridCellComponent;
+    exports.ɵgx = IgxTreeGridHierarchizingPipe;
+    exports.ɵgy = IgxTreeGridFlatteningPipe;
+    exports.ɵgz = IgxTreeGridSortingPipe;
     exports.ɵh = IGX_TREE_NODE_COMPONENT;
-    exports.ɵha = IgxTreeGridFlatteningPipe;
-    exports.ɵhb = IgxTreeGridSortingPipe;
-    exports.ɵhc = IgxTreeGridPagingPipe;
-    exports.ɵhd = IgxTreeGridTransactionPipe;
-    exports.ɵhe = IgxTreeGridNormalizeRecordsPipe;
-    exports.ɵhf = IgxTreeGridAddRowPipe;
-    exports.ɵhg = IgxTreeGridFilteringPipe;
-    exports.ɵhh = IgxTreeGridSummaryPipe;
-    exports.ɵhi = IgxHierarchicalRowComponent;
-    exports.ɵhj = IgxHierarchicalGridCellComponent;
-    exports.ɵhk = IgxSliderThumbComponent;
-    exports.ɵhl = IgxThumbLabelComponent;
-    exports.ɵhm = IgxTicksComponent;
-    exports.ɵhn = IgxTickLabelsPipe;
-    exports.ɵho = IgxTabsBase;
-    exports.ɵhp = IgxTabHeaderBase;
-    exports.ɵhq = IgxTabContentBase;
-    exports.ɵhr = IgxSplitBarComponent;
-    exports.ɵhs = IgxTreeService;
-    exports.ɵht = IgxTreeSelectionService;
-    exports.ɵhu = IgxTreeNavigationService;
+    exports.ɵha = IgxTreeGridPagingPipe;
+    exports.ɵhb = IgxTreeGridTransactionPipe;
+    exports.ɵhc = IgxTreeGridNormalizeRecordsPipe;
+    exports.ɵhd = IgxTreeGridAddRowPipe;
+    exports.ɵhe = IgxTreeGridFilteringPipe;
+    exports.ɵhf = IgxTreeGridSummaryPipe;
+    exports.ɵhg = IgxHierarchicalRowComponent;
+    exports.ɵhh = IgxHierarchicalGridCellComponent;
+    exports.ɵhi = IgxSliderThumbComponent;
+    exports.ɵhj = IgxThumbLabelComponent;
+    exports.ɵhk = IgxTicksComponent;
+    exports.ɵhl = IgxTickLabelsPipe;
+    exports.ɵhm = IgxTabsBase;
+    exports.ɵhn = IgxTabHeaderBase;
+    exports.ɵho = IgxTabContentBase;
+    exports.ɵhp = IgxSplitBarComponent;
+    exports.ɵhq = IgxTreeService;
+    exports.ɵhr = IgxTreeSelectionService;
+    exports.ɵhs = IgxTreeNavigationService;
     exports.ɵi = PlatformUtil;
     exports.ɵl = IgxInputGroupBase;
     exports.ɵm = IgxSelectionAPIService;
@@ -86389,10 +86334,10 @@
     exports.ɵt = VirtualHelperBaseDirective;
     exports.ɵu = HVirtualHelperComponent;
     exports.ɵv = MaskParsingService;
-    exports.ɵw = DeprecateMethod;
-    exports.ɵx = DeprecateProperty;
-    exports.ɵy = isHierarchyMatch;
-    exports.ɵz = getHierarchy;
+    exports.ɵw = isHierarchyMatch;
+    exports.ɵx = getHierarchy;
+    exports.ɵy = IgxGridActionButtonComponent;
+    exports.ɵz = ToggleAnimationPlayer;
 
     Object.defineProperty(exports, '__esModule', { value: true });