igniteui-angular 12.2.4 → 12.2.8

package/fesm2015/igniteui-angular.js

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/animations';
 import { style, animate, animation, keyframes, AnimationBuilder, useAnimation, trigger, transition } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, HostListener, NgModule, Inject, PLATFORM_ID, SimpleChange, InjectionToken, EventEmitter, Optional, Output, ElementRef, Renderer2, NgZone, Component, ViewChild, HostBinding, forwardRef, ChangeDetectorRef, ViewContainerRef, TemplateRef, IterableDiffers, ComponentFactoryResolver, QueryList, ViewChildren, ChangeDetectionStrategy, ContentChild, ContentChildren, ApplicationRef, Injector, isDevMode, Self, SecurityContext, Pipe, LOCALE_ID, Host, NgModuleRef, inject, CUSTOM_ELEMENTS_SCHEMA, SkipSelf } from '@angular/core';
+import { Injectable, Directive, Input, HostListener, NgModule, isDevMode, Inject, PLATFORM_ID, SimpleChange, InjectionToken, EventEmitter, Optional, Output, ElementRef, Renderer2, NgZone, Component, ViewChild, HostBinding, forwardRef, ChangeDetectorRef, ViewContainerRef, TemplateRef, IterableDiffers, ComponentFactoryResolver, QueryList, ViewChildren, ChangeDetectionStrategy, ContentChild, ContentChildren, ApplicationRef, Injector, Self, SecurityContext, Pipe, LOCALE_ID, Host, NgModuleRef, inject, CUSTOM_ELEMENTS_SCHEMA, SkipSelf } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, NgModel, FormControlName, FormsModule, NgControl, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule, DOCUMENT, DatePipe, formatDate, FormatWidth, getLocaleDateFormat, getLocaleCurrencyCode, DecimalPipe, CurrencyPipe, PercentPipe, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol } from '@angular/common';
@@ -892,7 +892,7 @@ const run = (id) => {
         fn();
     }
 };
-const ɵ0$5 = run;
+const ɵ0$4 = run;
 const listener = (event) => run(event.data);
 const ɵ1$1 = listener;
 // Use function instead of arrow function to workaround an issue in codesandbox
@@ -920,6 +920,15 @@ function clearImmediate(id) {
     delete queue[id];
 }
 
+/**
+ * @hidden
+ */
+const showMessage = (message, isMessageShown) => {
+    if (!isMessageShown && isDevMode()) {
+        console.warn(message);
+    }
+    return true;
+};
 const mkenum = (x) => x;
 /**
  * Returns the ResizeObserver type or the polyfilled version if not available.
@@ -960,6 +969,18 @@ const cloneHierarchicalArray = (array, childDataKey) => {
     }
     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
+ */
+const copyDescriptors = (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
  *
@@ -1036,7 +1057,7 @@ const uniqueDates = (columnValues) => columnValues.reduce((a, c) => {
  * @returns true if provided variable is Object
  * @hidden
  */
-const isObject = (value) => value && value.toString() === '[object Object]';
+const isObject = (value) => !!(value && value.toString() === '[object Object]');
 /**
  * Checks if provided variable is Date
  *
@@ -2020,6 +2041,12 @@ var TransactionEventOrigin;
     TransactionEventOrigin["END"] = "endPending";
 })(TransactionEventOrigin || (TransactionEventOrigin = {}));
 
+class DefaultDataCloneStrategy {
+    clone(data) {
+        return cloneValue(data);
+    }
+}
+
 /**
  * @hidden
  */
@@ -2064,8 +2091,7 @@ class DataUtil {
         };
         return rec;
     }
-    static group(data, state, grid = null, groupsRecords = [], fullResult = { data: [], metadata: [] }) {
-        const grouping = new IgxGrouping();
+    static group(data, state, grouping = new IgxGrouping(), grid = null, groupsRecords = [], fullResult = { data: [], metadata: [] }) {
         groupsRecords.splice(0, groupsRecords.length);
         return grouping.groupBy(data, state, grid, groupsRecords, fullResult);
     }
@@ -2127,12 +2153,12 @@ class DataUtil {
      * @param deleteRows Should delete rows with DELETE transaction type from data
      * @returns Provided data collections updated with all provided transactions
      */
-    static mergeTransactions(data, transactions, primaryKey, deleteRows = false) {
+    static mergeTransactions(data, transactions, primaryKey, cloneStrategy = new DefaultDataCloneStrategy(), deleteRows = false) {
         data.forEach((item, index) => {
             const rowId = primaryKey ? item[primaryKey] : item;
             const transaction = transactions.find(t => t.id === rowId);
             if (transaction && transaction.type === TransactionType.UPDATE) {
-                data[index] = transaction.newValue;
+                data[index] = mergeObjects(cloneStrategy.clone(data[index]), transaction.newValue);
             }
         });
         if (deleteRows) {
@@ -2160,7 +2186,7 @@ class DataUtil {
      * @param deleteRows Should delete rows with DELETE transaction type from data
      * @returns Provided data collections updated with all provided transactions
      */
-    static mergeHierarchicalTransactions(data, transactions, childDataKey, primaryKey, deleteRows = false) {
+    static mergeHierarchicalTransactions(data, transactions, childDataKey, primaryKey, cloneStrategy = new DefaultDataCloneStrategy(), deleteRows = false) {
         for (const transaction of transactions) {
             if (transaction.path) {
                 const parent = this.findParentFromPath(data, primaryKey, childDataKey, transaction.path);
@@ -2176,7 +2202,7 @@ class DataUtil {
                     case TransactionType.UPDATE:
                         const updateIndex = collection.findIndex(x => 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 TransactionType.DELETE:
@@ -6423,7 +6449,8 @@ class IgxRowCrudState extends IgxCellCrudState {
         const 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) {
@@ -6679,7 +6706,7 @@ class GridBaseAPIService {
         }
         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);
                 const deletedRows = grid.transactions.getTransactionLog().filter(t => t.type === TransactionType.DELETE).map(t => t.id);
                 deletedRows.forEach(rowID => {
                     const tempData = grid.primaryKey ? data.map(rec => rec[grid.primaryKey]) : data;
@@ -7765,7 +7792,7 @@ class IgxRowDirective {
      */
     get rowData() {
         if (this.inEditMode) {
-            return mergeWith(cloneValue(this._rowData), this.grid.transactions.getAggregatedValue(this.rowID, false), (objValue, srcValue) => {
+            return mergeWith(this.grid.dataCloneStrategy.clone(this._rowData), this.grid.transactions.getAggregatedValue(this.rowID, false), (objValue, srcValue) => {
                 if (Array.isArray(srcValue)) {
                     return objValue = srcValue;
                 }
@@ -8199,7 +8226,7 @@ IgxRowDirective.propDecorators = {
 };
 
 const clear = (el) => el === 0 || Boolean(el);
-const ɵ0$4 = clear;
+const ɵ0$3 = clear;
 const first = (arr) => arr[0];
 const ɵ1 = first;
 const last = (arr) => arr[arr.length - 1];
@@ -11752,7 +11779,7 @@ class IgxBaseExporter {
             }
             if (hasGrouping && !this.options.ignoreGrouping) {
                 const groupsRecords = [];
-                DataUtil.group(cloneArray(gridData), groupedGridGroupingState, grid, groupsRecords);
+                DataUtil.group(cloneArray(gridData), groupedGridGroupingState, grid.groupStrategy, grid, groupsRecords);
                 gridData = groupsRecords;
             }
             if (hasGrouping && !this.options.ignoreGrouping) {
@@ -14535,6 +14562,7 @@ class IgxOverlayService {
             return null;
         }
         const hook = this._document.createElement('div');
+        hook.style.display = 'none';
         element.parentElement.insertBefore(hook, element);
         return hook;
     }
@@ -15087,6 +15115,18 @@ class IgxBaseTransactionService {
         this._isPending = false;
         this._pendingTransactions = [];
         this._pendingStates = new Map();
+        this._cloneStrategy = new DefaultDataCloneStrategy();
+    }
+    /**
+     * @inheritdoc
+     */
+    get cloneStrategy() {
+        return this._cloneStrategy;
+    }
+    set cloneStrategy(strategy) {
+        if (strategy) {
+            this._cloneStrategy = strategy;
+        }
     }
     /**
      * @inheritdoc
@@ -15202,7 +15242,7 @@ class IgxBaseTransactionService {
             }
         }
         else {
-            state = { value: cloneValue(transaction.newValue), recordRef, type: transaction.type };
+            state = { value: this.cloneStrategy.clone(transaction.newValue), recordRef, type: transaction.type };
             states.set(transaction.id, state);
         }
     }
@@ -15224,7 +15264,7 @@ class IgxBaseTransactionService {
      */
     mergeValues(first, second) {
         if (isObject(first) || isObject(second)) {
-            return mergeObjects(cloneValue(first), second);
+            return mergeObjects(this.cloneStrategy.clone(first), second);
         }
         else {
             return second ? second : first;
@@ -15489,7 +15529,7 @@ class IgxTransactionService extends IgxBaseTransactionService {
             }
         }
         else {
-            state = { value: cloneValue(transaction.newValue), recordRef, type: transaction.type };
+            state = { value: this.cloneStrategy.clone(transaction.newValue), recordRef, type: transaction.type };
             states.set(transaction.id, state);
         }
         //  should not clean pending state. This will happen automatically on endPending call
@@ -15563,7 +15603,7 @@ class IgxHierarchicalTransactionService extends IgxTransactionService {
     getAggregatedChanges(mergeChanges) {
         const result = [];
         this._states.forEach((state, key) => {
-            const value = mergeChanges ? this.mergeValues(state.recordRef, state.value) : cloneValue(state.value);
+            const 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 });
         });
@@ -15575,7 +15615,7 @@ class IgxHierarchicalTransactionService extends IgxTransactionService {
             if (id !== undefined) {
                 transactions = transactions.filter(t => t.id === id);
             }
-            DataUtil.mergeHierarchicalTransactions(data, transactions, childDataKey, primaryKeyOrId, true);
+            DataUtil.mergeHierarchicalTransactions(data, transactions, childDataKey, primaryKeyOrId, this.cloneStrategy, true);
             this.clear(id);
         }
         else {
@@ -15662,7 +15702,6 @@ class IgxHierarchicalTransactionFactory extends IgxFlatTransactionFactory {
         switch (type) {
             case ("Base" /* Base */):
                 return new IgxHierarchicalTransactionService();
-                ;
             default:
                 return new IgxBaseTransactionService();
         }
@@ -16383,105 +16422,6 @@ IgxSelectionAPIService.decorators = [
             },] }
 ];
 
-/**
- * @hidden
- */
-const DeprecateClass = (message) => {
-    let isMessageShown = false;
-    return (originalClass) => class extends originalClass {
-        constructor(...args) {
-            const target = originalClass;
-            const targetName = typeof target === 'function' ? target.name : target.constructor.name;
-            isMessageShown = showMessage(`${targetName}: ${message}`, isMessageShown);
-            super(...args);
-        }
-    };
-};
-/**
- * @hidden
- */
-function DeprecateMethod(message) {
-    let isMessageShown = false;
-    return function (target, key, descriptor) {
-        if (descriptor && descriptor.value) {
-            const originalMethod = descriptor.value;
-            descriptor.value = function () {
-                const targetName = typeof target === 'function' ? target.name : target.constructor.name;
-                isMessageShown = showMessage(`${targetName}.${key}: ${message}`, isMessageShown);
-                const args = [];
-                for (const x of arguments) {
-                    args.push(x);
-                }
-                return originalMethod.call(this, ...args);
-            };
-            return descriptor;
-        }
-    };
-}
-/**
- * @hidden
- */
-function DeprecateProperty(message) {
-    return function (target, key) {
-        let isMessageShown = false;
-        const messageToDisplay = `${target.constructor.name}.${key}: ${message}`;
-        // if the target already has the property defined
-        const originalDescriptor = Object.getOwnPropertyDescriptor(target, key);
-        if (originalDescriptor) {
-            const getter = originalDescriptor.get;
-            const setter = originalDescriptor.set;
-            if (getter) {
-                originalDescriptor.get = function () {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    return getter.call(this);
-                };
-            }
-            if (setter) {
-                originalDescriptor.set = function (value) {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    setter.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
-        const newKey = generateUniqueKey(target, key);
-        Object.defineProperty(target, key, {
-            configurable: true,
-            enumerable: true,
-            set(value) {
-                isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                this[newKey] = value;
-            },
-            get() {
-                isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                return this[newKey];
-            }
-        });
-    };
-}
-/**
- * @hidden
- */
-const generateUniqueKey = (target, key) => {
-    let newKey = '_' + key;
-    while (target.hasOwnProperty(newKey)) {
-        newKey = '_' + newKey;
-    }
-    return newKey;
-};
-const ɵ0$3 = generateUniqueKey;
-/**
- * @hidden
- */
-const showMessage = (message, isMessageShown) => {
-    if (!isMessageShown && isDevMode()) {
-        console.warn(message);
-    }
-    return true;
-};
-
 let NEXT_ID$t = 0;
 /**
  * The `<igx-drop-down-item>` is a container intended for row items in
@@ -16551,7 +16491,6 @@ IgxDropDownGroupComponent.propDecorators = {
 };
 
 let NEXT_ID$s = 0;
-let warningShown = false;
 /**
  * An abstract class defining a drop-down item:
  * With properties / styles for selection, highlight, height
@@ -16616,8 +16555,6 @@ class IgxDropDownItemBaseDirective {
      */
     get index() {
         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;
@@ -19116,9 +19053,6 @@ IgxIconComponent.propDecorators = {
     getInactive: [{ type: HostBinding, args: ['class.igx-icon--inactive',] }],
     getColor: [{ type: HostBinding, args: ['style.color',] }]
 };
-__decorate([
-    DeprecateProperty('`color` is deprecated.')
-], IgxIconComponent.prototype, "color", void 0);
 
 /**
  * @hidden
@@ -19394,6 +19328,10 @@ const TreeResourceStringsEN = {
     igx_collapse: 'Collapse',
 };
 
+const ActionStripResourceStringsEN = {
+    igx_action_strip_button_more_title: 'More'
+};
+
 /**
  * @hidden
  * IF YOU EDIT THIS OBJECT, DO NOT FORGET TO UPDATE
@@ -19417,7 +19355,8 @@ const CurrentResourceStrings = {
     CarouselResStrings: cloneValue(CarouselResourceStringsEN),
     ListResStrings: cloneValue(ListResourceStringsEN),
     InputResStrings: cloneValue(InputResourceStringsEN),
-    TreeResStrings: cloneValue(TreeResourceStringsEN)
+    TreeResStrings: cloneValue(TreeResourceStringsEN),
+    ActionStripResourceStrings: cloneValue(ActionStripResourceStringsEN)
 };
 const updateResourceStrings = (currentStrings, newStrings) => {
     for (const key of Object.keys(newStrings)) {
@@ -19440,7 +19379,7 @@ const changei18n = (resourceStrings) => {
 /**
  * Returns current resource strings for all components
  */
-const getCurrentResourceStrings = () => (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));
+const getCurrentResourceStrings = () => (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));
 
 const IgxInputGroupTheme = mkenum({
     Material: 'material',
@@ -23284,10 +23223,10 @@ class IgxRadioGroupDirective {
         this._setRadioButtonsRequired();
     }
     /**
-     * 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>
@@ -23301,10 +23240,10 @@ class IgxRadioGroupDirective {
         this.setDisabledState(value);
     }
     /**
-     * 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"`.
      *
@@ -23554,12 +23493,6 @@ IgxRadioGroupDirective.propDecorators = {
     vertical: [{ type: HostBinding, args: ['class.igx-radio-group--vertical',] }],
     alignment: [{ type: Input }]
 };
-__decorate([
-    DeprecateProperty('`disabled` is deprecated.')
-], IgxRadioGroupDirective.prototype, "disabled", null);
-__decorate([
-    DeprecateProperty('`labelPosition` is deprecated.')
-], IgxRadioGroupDirective.prototype, "labelPosition", null);
 /**
  * @hidden
  */
@@ -25783,7 +25716,7 @@ class IgxGridActionButtonComponent {
 IgxGridActionButtonComponent.decorators = [
     { type: 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 = {
@@ -25995,8 +25928,8 @@ class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective {
      * @internal
      */
     registerIcons() {
-        this.iconService.addSvgIconFromText(addRow.name, addRow.value, 'imx-icons');
-        this.iconService.addSvgIconFromText(addChild.name, addChild.value, 'imx-icons');
+        this.iconService.addSvgIconFromText(addRow.name, addRow.value, 'imx-icons', true);
+        this.iconService.addSvgIconFromText(addChild.name, addChild.value, 'imx-icons', true);
     }
 }
 IgxGridEditingActionsComponent.decorators = [
@@ -26122,10 +26055,10 @@ class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective {
         const context = this.strip.context;
         const grid = context.grid;
         if (grid) {
-            this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons');
-            this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons');
-            this.iconService.addSvgIconFromText(jumpDown.name, jumpDown.value, 'imx-icons');
-            this.iconService.addSvgIconFromText(jumpUp.name, jumpDown.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons', true);
+            this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons', true);
+            this.iconService.addSvgIconFromText(jumpDown.name, jumpDown.value, 'imx-icons', true);
+            this.iconService.addSvgIconFromText(jumpUp.name, jumpDown.value, 'imx-icons', true);
         }
     }
 }
@@ -26205,6 +26138,21 @@ class IgxActionStripComponent extends DisplayDensityBase {
     get hidden() {
         return this._hidden;
     }
+    /**
+     * Gets/Sets the resource strings.
+     *
+     * @remarks
+     * By default it uses EN resources.
+     */
+    set resourceStrings(value) {
+        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+    }
+    get resourceStrings() {
+        if (!this._resourceStrings) {
+            this._resourceStrings = CurrentResourceStrings.ActionStripResourceStrings;
+        }
+        return this._resourceStrings;
+    }
     /**
      * Getter for the 'display' property of the current `IgxActionStrip`
      *
@@ -26334,7 +26282,7 @@ class IgxActionStripComponent extends DisplayDensityBase {
 IgxActionStripComponent.decorators = [
     { type: 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 = () => [
@@ -26349,6 +26297,7 @@ IgxActionStripComponent.propDecorators = {
     actionButtons: [{ type: ContentChildren, args: [IgxGridActionsBaseDirective,] }],
     hidden: [{ type: Input }],
     hostClass: [{ type: Input, args: ['class',] }],
+    resourceStrings: [{ type: Input }],
     menu: [{ type: ViewChild, args: ['dropdown',] }],
     display: [{ type: HostBinding, args: ['style.display',] }],
     hostClasses: [{ type: HostBinding, args: ['attr.class',] }]
@@ -43975,7 +43924,7 @@ class IgxGridSummaryService {
         const summaryIDs = [];
         let 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);
         }
         const rowData = this.grid.primaryKey ? data.find(rec => rec[this.grid.primaryKey] === rowID) : rowID;
         let id = '{ ';
@@ -48400,7 +48349,7 @@ IgxGridHeaderRowComponent.decorators = [
     { type: Component, args: [{
                 changeDetection: 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 = () => [
@@ -48580,9 +48529,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.gridScroll = new 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>
@@ -48595,10 +48545,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.pageChange = new 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>
          * ```
@@ -48615,6 +48565,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         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
@@ -48624,6 +48576,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         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
@@ -48878,9 +48832,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.filteringDone = new 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
@@ -49363,6 +49318,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             outlet: this.rowOutletDirective,
             positionStrategy: this.rowEditPositioningStrategy
         };
+        this._dataCloneStrategy = new DefaultDataCloneStrategy();
         this.transactionChange$ = new Subject();
         this._rendered = false;
         this.DRAG_SCROLL_DELTA = 10;
@@ -49385,11 +49341,29 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.currencyPipe = new CurrencyPipe(this.locale);
         this.percentPipe = new PercentPipe(this.locale);
         this._transactions = this.transactionFactory.create("None" /* None */);
+        this._transactions.cloneStrategy = this.dataCloneStrategy;
         this.cdr.detach();
     }
     get headerGroups() {
         return this.theadRow.groups;
     }
+    /**
+     * 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 dataCloneStrategy() {
+        return this._dataCloneStrategy;
+    }
+    set dataCloneStrategy(strategy) {
+        if (strategy) {
+            this._dataCloneStrategy = strategy;
+            this._transactions.cloneStrategy = strategy;
+        }
+    }
     get headerContainer() {
         return this.theadRow.headerContainer;
     }
@@ -49533,9 +49507,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges(true);
     }
     /**
+     * @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
@@ -49553,9 +49528,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.pipeTrigger++;
     }
     /**
+     * @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">
@@ -49575,9 +49551,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
     }
     /**
+     * @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
@@ -49598,9 +49575,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
     }
     /**
+     * @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
@@ -49798,9 +49776,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this._emptyFilteredGridMessage || this.resourceStrings.igx_grid_emptyFilteredGrid_message;
     }
     /**
-     * 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
@@ -49838,9 +49816,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this._pinning = value;
     }
     /**
-     * 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
@@ -49855,9 +49833,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * 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
@@ -50304,9 +50282,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this.pinnedColumns.filter(col => !col.columnLayout).length;
     }
     /**
-     * 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`.
@@ -50315,7 +50293,6 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * <igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>
      * ```
      */
-    // @DeprecateProperty('`hiddenColumnsText` is deprecated')
     get hiddenColumnsText() {
         return this._hiddenColumnsText;
     }
@@ -50324,9 +50301,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * 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`.
@@ -50396,9 +50373,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this._currencyPositionLeft = i < 1;
     }
     /**
-     * Gets/Sets whether the toolbar is shown.
+     * @deprecated in version 11.0.0
      *
-     * @deprecated
+     * Gets/Sets whether the toolbar is shown.
      *
      * @example
      * ```html
@@ -50412,9 +50389,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this._showToolbar = newValue;
     }
     /**
-     * Gets/Sets the toolbar's title.
+     * @deprecated in version 11.0.0
      *
-     * @deprecated
+     * Gets/Sets the toolbar's title.
      *
      * @example
      * ```html
@@ -50429,9 +50406,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * 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
@@ -50446,9 +50423,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * 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>
@@ -50462,9 +50439,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * 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
@@ -50479,9 +50456,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * 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>
@@ -50495,9 +50472,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * 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
@@ -51591,9 +51568,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this._visibleColumns;
     }
     /**
+     * @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;
@@ -51604,9 +51582,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return (_a = this.paginator) === null || _a === void 0 ? void 0 : _a.totalPages;
     }
     /**
+     * @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;
@@ -51616,9 +51595,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this.paginator.isLastPage;
     }
     /**
+     * @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();
@@ -51630,9 +51610,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         (_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();
@@ -51668,9 +51649,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
     }
     /**
+     * @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;
@@ -51767,6 +51749,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         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
@@ -52956,6 +52940,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         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
@@ -53363,6 +53350,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         else {
             this._transactions = this.transactionFactory.create("None" /* None */);
         }
+        if (this.dataCloneStrategy) {
+            this._transactions.cloneStrategy = this.dataCloneStrategy;
+        }
     }
     subscribeToTransactions() {
         this.transactionChange$.next();
@@ -54624,6 +54614,7 @@ IgxGridBaseDirective.propDecorators = {
     primaryKey: [{ type: Input }],
     uniqueColumnValuesStrategy: [{ type: Input }],
     excelStyleFilteringComponents: [{ type: ContentChildren, args: [IgxGridExcelStyleFilteringComponent, { read: IgxGridExcelStyleFilteringComponent, descendants: false },] }],
+    dataCloneStrategy: [{ type: Input }],
     cellClick: [{ type: Output }],
     selected: [{ type: Output }],
     rowSelected: [{ type: Output }],
@@ -54778,24 +54769,9 @@ IgxGridBaseDirective.propDecorators = {
     totalRecords: [{ type: Input }],
     selectRowOnClick: [{ type: 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);
@@ -54805,18 +54781,6 @@ __decorate([
 __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);
@@ -54838,42 +54802,9 @@ __decorate([
 __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);
@@ -54883,24 +54814,6 @@ __decorate([
 __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);
@@ -54929,6 +54842,18 @@ class BaseRow {
         const primaryKey = this.grid.primaryKey;
         return primaryKey ? data[primaryKey] : data;
     }
+    /**
+     * Gets if this represents add row UI
+     *
+     * ```typescript
+     * let isAddRow = row.addRowUI;
+     * ```
+     */
+    get addRowUI() {
+        return !!this.grid.crudService.row &&
+            this.grid.crudService.row.getClassName() === IgxAddRow.name &&
+            this.grid.crudService.row.id === this.key;
+    }
     /**
      * The data record that populates the row.
      *
@@ -54939,7 +54864,7 @@ class BaseRow {
     get data() {
         var _a, _b;
         if (this.inEditMode) {
-            return mergeWith(cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), (objValue, srcValue) => {
+            return mergeWith(this.grid.dataCloneStrategy.clone((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), (objValue, srcValue) => {
                 if (Array.isArray(srcValue)) {
                     return objValue = srcValue;
                 }
@@ -54948,7 +54873,7 @@ class BaseRow {
         return (_b = this._data) !== null && _b !== void 0 ? _b : this.grid.dataView[this.index];
     }
     /**
-     * @deprecated Use 'data' instead.
+     * @deprecated Use 'data' instead
      *
      * The data record that populates the row
      */
@@ -54956,8 +54881,7 @@ class BaseRow {
         return this.data;
     }
     /**
-     * @deprecated Use 'key' instead.
-     *
+     * @deprecated Use 'key' instead
      */
     get rowID() {
         return this.key;
@@ -55126,12 +55050,6 @@ class BaseRow {
         this.grid.deleteRowById(this.key);
     }
 }
-__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);
 class IgxGridRow extends BaseRow {
     /**
      * @hidden
@@ -55242,7 +55160,7 @@ class IgxTreeGridRow extends BaseRow {
     get data() {
         var _a;
         if (this.inEditMode) {
-            return mergeWith(cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), (objValue, srcValue) => {
+            return mergeWith(this.grid.dataCloneStrategy.clone((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), (objValue, srcValue) => {
                 if (Array.isArray(srcValue)) {
                     return objValue = srcValue;
                 }
@@ -56128,17 +56046,6 @@ class IgxGridCellComponent {
     get currencyCodeSymbol() {
         return getCurrencySymbol(this.currencyCode, 'wide', this.grid.locale);
     }
-    /**
-     * @deprecated
-     * Gets whether the cell is selected.
-     * ```typescript
-     * let isCellSelected = thid.cell.isCellSelected();
-     * ```
-     * @memberof IgxGridCellComponent
-     */
-    isCellSelected() {
-        return this.selectionService.selected(this.selectionNode);
-    }
     /**
      * @hidden
      * @internal
@@ -56443,9 +56350,6 @@ IgxGridCellComponent.propDecorators = {
     onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
     onContextMenu: [{ type: HostListener, args: ['contextmenu', ['$event'],] }]
 };
-__decorate([
-    DeprecateMethod(`'isCellSelected' is deprecated. Use 'selected' property instead.`)
-], IgxGridCellComponent.prototype, "isCellSelected", null);
 
 class IgxGridFooterComponent {
 }
@@ -56824,9 +56728,10 @@ class IgxColumnActionsComponent {
         this._differ = this.differs.find([]).create(this.trackChanges);
     }
     /**
+     * @deprecated Use grid input instead.
+     *
      * Gets the grid columns to provide an action for.
      *
-     * @deprecated
      * @example
      * ```typescript
      * let gridColumns = this.columnActions.columns;
@@ -57066,9 +56971,6 @@ IgxColumnActionsComponent.propDecorators = {
     checkAllText: [{ type: Input }],
     id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }]
 };
-__decorate([
-    DeprecateProperty(`Deprecated. Use 'grid' input instead.`)
-], IgxColumnActionsComponent.prototype, "columns", null);
 
 /**
  * @hidden
@@ -57243,7 +57145,7 @@ class IgxGridTransactionPipe {
     transform(collection, _id, _pipeTrigger) {
         const grid = this.gridAPI.grid;
         if (grid.transactions.enabled) {
-            const result = DataUtil.mergeTransactions(cloneArray(collection), grid.transactions.getAggregatedChanges(true), grid.primaryKey);
+            const result = DataUtil.mergeTransactions(cloneArray(collection), grid.transactions.getAggregatedChanges(true), grid.primaryKey, grid.dataCloneStrategy);
             return result;
         }
         return collection;
@@ -61325,6 +61227,22 @@ class IgxGridComponent extends IgxGridBaseDirective {
         }
         this._hideGroupedColumns = value;
     }
+    /**
+     * 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 groupStrategy() {
+        return this._groupStrategy;
+    }
+    set groupStrategy(value) {
+        this._groupStrategy = value;
+    }
     /**
      * Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.
      *
@@ -61345,7 +61263,8 @@ class IgxGridComponent extends IgxGridBaseDirective {
         return this._dropAreaMessage || this.resourceStrings.igx_grid_groupByArea_message;
     }
     /**
-     * @deprecated
+     * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+     *
      * Returns a `CellType` object that matches the conditions.
      *
      * @example
@@ -62077,7 +61996,7 @@ IgxGridComponent.decorators = [
                     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 = {
@@ -62103,12 +62022,10 @@ IgxGridComponent.propDecorators = {
     groupingExpressions: [{ type: Input }],
     groupingExpansionState: [{ type: Input }],
     hideGroupedColumns: [{ type: Input }],
+    groupStrategy: [{ type: Input }],
     dropAreaMessage: [{ type: Input }],
     showGroupArea: [{ type: Input }]
 };
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
 class IgxGridStateDirective {
     /**
@@ -63625,7 +63542,7 @@ class IgxGridGroupingPipe {
     constructor(gridAPI) {
         this.gridAPI = gridAPI;
     }
-    transform(collection, expression, expansion, defaultExpanded, id, groupsRecords, _pipeTrigger) {
+    transform(collection, expression, expansion, groupingStrategy, defaultExpanded, id, groupsRecords, _pipeTrigger) {
         const state = { expressions: [], expansion: [], defaultExpanded };
         const grid = this.gridAPI.grid;
         state.expressions = grid.groupingExpressions;
@@ -63642,7 +63559,7 @@ class IgxGridGroupingPipe {
         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;
@@ -64911,7 +64828,8 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         return this.gridAPI;
     }
     /**
-     * @deprecated
+     * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+     *
      * Returns a `CellType` object that matches the conditions.
      *
      * @example
@@ -65571,9 +65489,6 @@ IgxTreeGridComponent.propDecorators = {
     expansionDepth: [{ type: Input }],
     rowLoadingIndicatorTemplate: [{ type: Input }]
 };
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxTreeGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
 class IgxTreeGridRowComponent extends IgxRowDirective {
     /**
@@ -65948,11 +65863,11 @@ class IgxTreeGridTransactionPipe {
                 const childDataKey = grid.childDataKey;
                 if (foreignKey) {
                     const flatDataClone = cloneArray(collection);
-                    return DataUtil.mergeTransactions(flatDataClone, aggregatedChanges, grid.primaryKey);
+                    return DataUtil.mergeTransactions(flatDataClone, aggregatedChanges, grid.primaryKey, grid.dataCloneStrategy);
                 }
                 else if (childDataKey) {
                     const hierarchicalDataClone = cloneHierarchicalArray(collection, childDataKey);
-                    return DataUtil.mergeHierarchicalTransactions(hierarchicalDataClone, aggregatedChanges, childDataKey, grid.primaryKey);
+                    return DataUtil.mergeHierarchicalTransactions(hierarchicalDataClone, aggregatedChanges, childDataKey, grid.primaryKey, grid.dataCloneStrategy);
                 }
             }
         }
@@ -67774,7 +67689,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         return this._defaultExpandState;
     }
     /**
-     * @deprecated
+     * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+     *
      * Returns a `CellType` object that matches the conditions.
      *
      * @example
@@ -68419,9 +68335,6 @@ IgxHierarchicalGridComponent.propDecorators = {
     data: [{ type: Input }],
     expandChildren: [{ type: Input }]
 };
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxHierarchicalGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
 class IgxHierarchicalGridCellComponent extends IgxGridCellComponent {
     constructor(selectionService, gridAPI, cdr, helement, zone, touchManager, platformUtil) {
@@ -72849,30 +72762,37 @@ class IgxToastComponent extends IgxNotificationsDirective {
          * @hidden
          */
         this.isVisibleChange = new EventEmitter();
-        /**
-         * Sets/gets the position of the toast.
-         * If not set, the `position` attribute will have value `IgxToastPosition.Bottom`.
-         * ```html
-         * <igx-toast [position]="top"></igx-toast>
-         * ```
-         * ```typescript
-         * let toastPosition = this.toast.position;
-         * ```
-         *
-         * @memberof IgxToastComponent
-         */
-        this.position = 'bottom';
+        this._position = 'bottom';
         this._positionSettings = {
             horizontalDirection: HorizontalAlignment.Center,
-            verticalDirection: this.position === 'bottom'
-                ? VerticalAlignment.Bottom
-                : this.position === 'middle'
-                    ? VerticalAlignment.Middle
-                    : VerticalAlignment.Top,
+            verticalDirection: VerticalAlignment.Bottom,
             openAnimation: useAnimation(fadeIn),
             closeAnimation: useAnimation(fadeOut),
         };
     }
+    /**
+     * @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
+     * <igx-toast [position]="top"></igx-toast>
+     * ```
+     * ```typescript
+     * let toastPosition = this.toast.position;
+     * ```
+     *
+     * @memberof IgxToastComponent
+     */
+    get position() {
+        return this._position;
+    }
+    set position(position) {
+        if (position) {
+            this._position = position;
+            this._positionSettings.verticalDirection = this.calculatePosition();
+        }
+    }
     /**
      * Get the position and animation settings used by the toast.
      * ```typescript
@@ -72925,10 +72845,13 @@ class IgxToastComponent extends IgxNotificationsDirective {
      * this.toast.open();
      * ```
      */
-    open(message) {
+    open(message, settings) {
         if (message !== undefined) {
             this.textMessage = message;
         }
+        if (settings !== undefined) {
+            this.positionSettings = settings;
+        }
         this.strategy = new GlobalPositionStrategy(this.positionSettings);
         super.open();
     }
@@ -72960,6 +72883,18 @@ class IgxToastComponent extends IgxNotificationsDirective {
             this.isVisibleChange.emit(closedEventArgs);
         });
     }
+    ngOnChanges(changes) {
+        if (changes['position'] && this._positionSettings) {
+            this._positionSettings.verticalDirection = this.calculatePosition();
+        }
+    }
+    calculatePosition() {
+        return this.position === 'bottom'
+            ? VerticalAlignment.Bottom
+            : this.position === 'middle'
+                ? VerticalAlignment.Middle
+                : VerticalAlignment.Top;
+    }
 }
 IgxToastComponent.decorators = [
     { type: Component, args: [{
@@ -76374,5 +76309,5 @@ IgxTreeModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BaseProgressDirective, BlockScrollStrategy, ButtonGroupAlignment, Calendar, CalendarHammerConfig, CalendarSelection, CalendarView, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultSortingStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportRecordType, FilterListItem, FilterMode, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GlobalPositionStrategy, GridBaseAPIService, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupedRecords, HeaderType, HorizontalAlignment, IGX_CHECKBOX_REQUIRED_VALIDATOR, IGX_INPUT_GROUP_TYPE, IGX_SWITCH_REQUIRED_VALIDATOR, ITreeGridAggregation, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripModule, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarBaseDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollMonthDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCardType, IgxCarouselComponent, IgxCarouselComponentBase, IgxCarouselModule, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxCheckboxRequiredDirective, IgxChipComponent, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnActionsModule, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxComboComponent, IgxComboModule, IgxComboState, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogComponent, IgxDialogModule, IgxDisplayDensityModule, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragLocation, IgxDropDirective, IgxDropDownBaseDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemBaseDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelModule, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridAPIService, IgxGridActionsBaseDirective, IgxGridBaseDirective, IgxGridBodyDirective, IgxGridCell, IgxGridCommonModule, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridForOfDirective, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalPipe, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridStateModule, IgxGridToolbarActionsDirective, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleDirective, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHierarchicalGridAPIService, IgxHierarchicalGridBaseDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHierarchicalTransactionServiceFactory, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerBaseDirective, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorDirective, IgxPaginatorModule, IgxPaginatorTemplateDirective, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPickersCommonModule, IgxPrefixDirective, IgxPrefixModule, IgxPrependDropStrategy, IgxProgressBarModule, IgxProgressType, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandAPIService, IgxRowIslandComponent, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSorting, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStringFilteringOperand, IgxSuffixDirective, IgxSuffixModule, IgxSummaryOperand, IgxSummaryRow, IgxSwitchComponent, IgxSwitchModule, IgxSwitchRequiredDirective, IgxTabContentComponent, IgxTabContentDirective, IgxTabHeaderComponent, IgxTabHeaderDirective, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabItemDirective, IgxTabsAlignment, IgxTabsComponent, IgxTabsDirective, IgxTabsModule, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToastPosition, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridAPIService, IgxTreeGridComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectMarkerDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowEditPositionStrategy, RowPinningPosition, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, WEEKDAYS, blink, changei18n, fadeIn, fadeOut, filteringStateDefaults, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, flipVerBck, flipVerFwd, getCurrentResourceStrings, getTypeNameForDebugging, growVerIn, growVerOut, heartbeat, hierarchicalTransactionServiceFactory, isDateInRanges, isLeap, monthRange, pulsateBck, pulsateFwd, range, rotateInBl, rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd, toPercent, valueInRange, weekDay, ɵ1, ɵ2, IgxActionStripMenuItemDirective as ɵa, IGX_DROPDOWN_BASE as ɵb, IgxGridActionButtonComponent as ɵba, ToggleAnimationPlayer as ɵbb, IgxExpansionPanelTitleDirective as ɵbc, IgxExpansionPanelDescriptionDirective as ɵbd, IgxExpansionPanelIconDirective as ɵbe, IgxBannerActionsDirective as ɵbf, IgxDaysViewNavigationService as ɵbg, IgxDayItemComponent as ɵbh, IgxMonthViewSlotsCalendar as ɵbi, IgxGetViewDateCalendar as ɵbj, IgxCarouselIndicatorDirective as ɵbk, IgxCarouselNextButtonDirective as ɵbl, IgxCarouselPrevButtonDirective as ɵbm, IgxComboAPIService as ɵbn, IGX_COMBO_COMPONENT as ɵbo, IgxComboDropDownComponent as ɵbq, IgxComboItemComponent as ɵbr, IgxComboHeaderDirective as ɵbs, IgxComboFooterDirective as ɵbt, IgxComboItemDirective as ɵbu, IgxComboEmptyDirective as ɵbv, IgxComboHeaderItemDirective as ɵbw, IgxComboAddItemDirective as ɵbx, IgxComboToggleIconDirective as ɵby, IgxComboClearIconDirective as ɵbz, IgxComboFilteringPipe as ɵca, IgxComboGroupingPipe as ɵcb, IgxComboAddItemComponent as ɵcc, PickerBaseDirective as ɵcd, IgxCalendarContainerComponent as ɵce, IgxCalendarContainerModule as ɵcf, IgxDialogTitleDirective as ɵcg, IgxDialogActionsDirective as ɵch, IgxCellCrudState as ɵci, IgxRowCrudState as ɵcj, IgxRowAddCrudState as ɵck, IgxGridCRUDService as ɵcl, IgxColumnMovingService as ɵcm, IgxExcelStyleCustomDialogComponent as ɵcn, IgxExcelStyleDefaultExpressionComponent as ɵco, IgxExcelStyleDateExpressionComponent as ɵcp, HammerGesturesManager as ɵcq, WatchChanges as ɵcr, WatchColumnChanges as ɵcs, notifyChanges as ɵct, IgxNotificationsDirective as ɵcu, IgxGridColumnResizerComponent as ɵcv, IgxColumnResizerDirective as ɵcw, IgxColumnResizingService as ɵcx, IgxRowSelectorDirective as ɵcy, IgxGroupByRowSelectorDirective as ɵcz, IgxGridSelectionService as ɵd, IgxHeadSelectorDirective as ɵda, IgxRowDragDirective as ɵdb, IgxDragIndicatorIconDirective as ɵdc, IgxRowDragGhostDirective as ɵdd, IgxRowDragModule as ɵde, IgxGridHeaderRowComponent as ɵdf, IgxGridHeaderGroupComponent as ɵdg, IgxGridHeaderComponent as ɵdh, IgxGridFilteringCellComponent as ɵdi, IgxFilteringService as ɵdj, IgxGridFilteringRowComponent as ɵdk, IgxGridGroupByAreaComponent as ɵdl, IgxGroupByAreaDirective as ɵdm, IgxGroupByMetaPipe as ɵdn, IgxTemplateOutletDirective as ɵdo, IgxTemplateOutletModule as ɵdp, IgxRowEditTemplateDirective as ɵdq, IgxRowEditTextDirective as ɵdr, IgxRowAddTextDirective as ɵds, IgxRowEditActionsDirective as ɵdt, IgxRowEditTabStopDirective as ɵdu, IgxSummaryRowComponent as ɵdv, IgxSummaryCellComponent as ɵdw, IgxRowDirective as ɵdx, IgxGridNavigationService as ɵdy, IgxGridSummaryService as ɵdz, ConnectedPositioningStrategy as ɵea, IgxGridGroupByRowComponent as ɵeb, IgxTreeGridSelectionService as ɵec, IgxTreeGridGroupByAreaComponent as ɵed, IgxRowLoadingIndicatorTemplateDirective as ɵee, IgxHierarchicalGridNavigationService as ɵef, IgxChildGridRowComponent as ɵeg, IgxGridCellComponent as ɵeh, IgxGridFooterComponent as ɵei, IgxAdvancedFilteringDialogComponent as ɵej, IgxColumnHidingDirective as ɵek, IgxColumnPinningDirective as ɵel, IgxGridSharedModules as ɵem, IgxProcessBarTextTemplateDirective as ɵen, IgxProgressBarGradientDirective as ɵeo, DIR_DOCUMENT_FACTORY as ɵep, DIR_DOCUMENT as ɵeq, IgxDirectionality as ɵer, IgxSelectItemNavigationDirective as ɵes, IGX_TIME_PICKER_COMPONENT as ɵet, IgxItemListDirective as ɵev, IgxTimeItemDirective as ɵew, IgxTimePickerTemplateDirective as ɵex, IgxTimePickerActionsDirective as ɵey, TimeFormatPipe as ɵez, IGX_EXPANSION_PANEL_COMPONENT as ɵf, TimeItemPipe as ɵfa, IgxGridPipesModule as ɵfb, IgxGridCellStyleClassesPipe as ɵfc, IgxGridCellStylesPipe as ɵfd, IgxGridRowClassesPipe as ɵfe, IgxGridRowStylesPipe as ɵff, IgxGridNotGroupedPipe as ɵfg, IgxGridTopLevelColumns as ɵfh, IgxGridFilterConditionPipe as ɵfi, IgxGridTransactionPipe as ɵfj, IgxGridPaginatorOptionsPipe as ɵfk, IgxHasVisibleColumnsPipe as ɵfl, IgxGridRowPinningPipe as ɵfm, IgxColumnActionEnabledPipe as ɵfn, IgxFilterActionColumnsPipe as ɵfo, IgxSortActionColumnsPipe as ɵfp, IgxGridDataMapperPipe as ɵfq, IgxStringReplacePipe as ɵfr, IgxGridTransactionStatePipe as ɵfs, IgxColumnFormatterPipe as ɵft, IgxSummaryFormatterPipe as ɵfu, IgxGridAddRowPipe as ɵfv, IgxHeaderGroupWidthPipe as ɵfw, IgxHeaderGroupStylePipe as ɵfx, IgxGridColumnModule as ɵfy, IgxGridHeadersModule as ɵfz, IGX_TREE_COMPONENT as ɵg, SortingIndexPipe as ɵga, IgxGridFilteringModule as ɵgb, IgxColumnMovingModule as ɵgc, IgxColumnMovingDropDirective as ɵgd, IgxColumnMovingDragDirective as ɵge, IgxGridResizingModule as ɵgf, IgxResizeHandleDirective as ɵgg, IgxGridExcelStyleFilteringModule as ɵgh, IgxGridSelectionModule as ɵgi, IgxGridDragSelectDirective as ɵgj, IgxGridSummaryModule as ɵgk, IgxSummaryDataPipe as ɵgl, IgxGridToolbarModule as ɵgm, BaseToolbarDirective as ɵgn, BaseToolbarColumnActionsDirective as ɵgo, IgxGridRowComponent as ɵgp, IgxGridSortingPipe as ɵgq, IgxGridGroupingPipe as ɵgr, IgxGridPagingPipe as ɵgs, IgxGridFilteringPipe as ɵgt, IgxGridSummaryPipe as ɵgu, IgxGridDetailsPipe as ɵgv, IgxGridExpandableCellComponent as ɵgw, IgxTreeGridRowComponent as ɵgx, IgxTreeGridCellComponent as ɵgy, IgxTreeGridHierarchizingPipe as ɵgz, IGX_TREE_NODE_COMPONENT as ɵh, IgxTreeGridFlatteningPipe as ɵha, IgxTreeGridSortingPipe as ɵhb, IgxTreeGridPagingPipe as ɵhc, IgxTreeGridTransactionPipe as ɵhd, IgxTreeGridNormalizeRecordsPipe as ɵhe, IgxTreeGridAddRowPipe as ɵhf, IgxTreeGridFilteringPipe as ɵhg, IgxTreeGridSummaryPipe as ɵhh, IgxHierarchicalRowComponent as ɵhi, IgxHierarchicalGridCellComponent as ɵhj, IgxSliderThumbComponent as ɵhk, IgxThumbLabelComponent as ɵhl, IgxTicksComponent as ɵhm, IgxTickLabelsPipe as ɵhn, IgxTabsBase as ɵho, IgxTabHeaderBase as ɵhp, IgxTabContentBase as ɵhq, IgxSplitBarComponent as ɵhr, IgxTreeService as ɵhs, IgxTreeSelectionService as ɵht, IgxTreeNavigationService as ɵhu, PlatformUtil as ɵi, EaseIn as ɵj, EaseOut as ɵk, IgxInputGroupBase as ɵl, IgxSelectionAPIService as ɵm, IgxForOfSyncService as ɵn, IgxForOfScrollSyncService as ɵo, DisplayContainerComponent as ɵp, IgxScrollInertiaDirective as ɵq, IgxScrollInertiaModule as ɵr, VirtualHelperComponent as ɵs, VirtualHelperBaseDirective as ɵt, HVirtualHelperComponent as ɵu, MaskParsingService as ɵv, DeprecateMethod as ɵw, DeprecateProperty as ɵx, isHierarchyMatch as ɵy, getHierarchy as ɵz };
+export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BaseProgressDirective, BlockScrollStrategy, ButtonGroupAlignment, Calendar, CalendarHammerConfig, CalendarSelection, CalendarView, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultDataCloneStrategy, DefaultSortingStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportRecordType, FilterListItem, FilterMode, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GlobalPositionStrategy, GridBaseAPIService, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupedRecords, HeaderType, HorizontalAlignment, IGX_CHECKBOX_REQUIRED_VALIDATOR, IGX_INPUT_GROUP_TYPE, IGX_SWITCH_REQUIRED_VALIDATOR, ITreeGridAggregation, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripModule, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarBaseDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollMonthDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCardType, IgxCarouselComponent, IgxCarouselComponentBase, IgxCarouselModule, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxCheckboxRequiredDirective, IgxChipComponent, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnActionsModule, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxComboComponent, IgxComboModule, IgxComboState, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogComponent, IgxDialogModule, IgxDisplayDensityModule, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragLocation, IgxDropDirective, IgxDropDownBaseDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemBaseDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelModule, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridAPIService, IgxGridActionsBaseDirective, IgxGridBaseDirective, IgxGridBodyDirective, IgxGridCell, IgxGridCommonModule, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridForOfDirective, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalPipe, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridStateModule, IgxGridToolbarActionsDirective, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleDirective, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHierarchicalGridAPIService, IgxHierarchicalGridBaseDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHierarchicalTransactionServiceFactory, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerBaseDirective, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorDirective, IgxPaginatorModule, IgxPaginatorTemplateDirective, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPickersCommonModule, IgxPrefixDirective, IgxPrefixModule, IgxPrependDropStrategy, IgxProgressBarModule, IgxProgressType, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandAPIService, IgxRowIslandComponent, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSorting, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStringFilteringOperand, IgxSuffixDirective, IgxSuffixModule, IgxSummaryOperand, IgxSummaryRow, IgxSwitchComponent, IgxSwitchModule, IgxSwitchRequiredDirective, IgxTabContentComponent, IgxTabContentDirective, IgxTabHeaderComponent, IgxTabHeaderDirective, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabItemDirective, IgxTabsAlignment, IgxTabsComponent, IgxTabsDirective, IgxTabsModule, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToastPosition, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridAPIService, IgxTreeGridComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectMarkerDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowEditPositionStrategy, RowPinningPosition, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, WEEKDAYS, blink, changei18n, fadeIn, fadeOut, filteringStateDefaults, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, flipVerBck, flipVerFwd, getCurrentResourceStrings, getTypeNameForDebugging, growVerIn, growVerOut, heartbeat, hierarchicalTransactionServiceFactory, isDateInRanges, isLeap, monthRange, pulsateBck, pulsateFwd, range, rotateInBl, rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd, toPercent, valueInRange, weekDay, ɵ1, ɵ2, IgxActionStripMenuItemDirective as ɵa, IGX_DROPDOWN_BASE as ɵb, IgxExpansionPanelTitleDirective as ɵba, IgxExpansionPanelDescriptionDirective as ɵbb, IgxExpansionPanelIconDirective as ɵbc, IgxBannerActionsDirective as ɵbd, IgxDaysViewNavigationService as ɵbe, IgxDayItemComponent as ɵbf, IgxMonthViewSlotsCalendar as ɵbg, IgxGetViewDateCalendar as ɵbh, IgxCarouselIndicatorDirective as ɵbi, IgxCarouselNextButtonDirective as ɵbj, IgxCarouselPrevButtonDirective as ɵbk, IgxComboAPIService as ɵbl, IGX_COMBO_COMPONENT as ɵbm, IgxComboDropDownComponent as ɵbo, IgxComboItemComponent as ɵbp, IgxComboHeaderDirective as ɵbq, IgxComboFooterDirective as ɵbr, IgxComboItemDirective as ɵbs, IgxComboEmptyDirective as ɵbt, IgxComboHeaderItemDirective as ɵbu, IgxComboAddItemDirective as ɵbv, IgxComboToggleIconDirective as ɵbw, IgxComboClearIconDirective as ɵbx, IgxComboFilteringPipe as ɵby, IgxComboGroupingPipe as ɵbz, IgxComboAddItemComponent as ɵca, PickerBaseDirective as ɵcb, IgxCalendarContainerComponent as ɵcc, IgxCalendarContainerModule as ɵcd, IgxDialogTitleDirective as ɵce, IgxDialogActionsDirective as ɵcf, IgxCellCrudState as ɵcg, IgxRowCrudState as ɵch, IgxRowAddCrudState as ɵci, IgxGridCRUDService as ɵcj, IgxColumnMovingService as ɵck, IgxExcelStyleCustomDialogComponent as ɵcl, IgxExcelStyleDefaultExpressionComponent as ɵcm, IgxExcelStyleDateExpressionComponent as ɵcn, HammerGesturesManager as ɵco, WatchChanges as ɵcp, WatchColumnChanges as ɵcq, notifyChanges as ɵcr, IgxNotificationsDirective as ɵcs, IgxGridColumnResizerComponent as ɵct, IgxColumnResizerDirective as ɵcu, IgxColumnResizingService as ɵcv, IgxRowSelectorDirective as ɵcw, IgxGroupByRowSelectorDirective as ɵcx, IgxHeadSelectorDirective as ɵcy, IgxRowDragDirective as ɵcz, IgxGridSelectionService as ɵd, IgxDragIndicatorIconDirective as ɵda, IgxRowDragGhostDirective as ɵdb, IgxRowDragModule as ɵdc, IgxGridHeaderRowComponent as ɵdd, IgxGridHeaderGroupComponent as ɵde, IgxGridHeaderComponent as ɵdf, IgxGridFilteringCellComponent as ɵdg, IgxFilteringService as ɵdh, IgxGridFilteringRowComponent as ɵdi, IgxGridGroupByAreaComponent as ɵdj, IgxGroupByAreaDirective as ɵdk, IgxGroupByMetaPipe as ɵdl, IgxTemplateOutletDirective as ɵdm, IgxTemplateOutletModule as ɵdn, IgxRowEditTemplateDirective as ɵdo, IgxRowEditTextDirective as ɵdp, IgxRowAddTextDirective as ɵdq, IgxRowEditActionsDirective as ɵdr, IgxRowEditTabStopDirective as ɵds, IgxSummaryRowComponent as ɵdt, IgxSummaryCellComponent as ɵdu, IgxRowDirective as ɵdv, IgxGridNavigationService as ɵdw, IgxGridSummaryService as ɵdx, ConnectedPositioningStrategy as ɵdy, IgxGridGroupByRowComponent as ɵdz, IgxTreeGridSelectionService as ɵea, IgxTreeGridGroupByAreaComponent as ɵeb, IgxRowLoadingIndicatorTemplateDirective as ɵec, IgxHierarchicalGridNavigationService as ɵed, IgxChildGridRowComponent as ɵee, IgxGridCellComponent as ɵef, IgxGridFooterComponent as ɵeg, IgxAdvancedFilteringDialogComponent as ɵeh, IgxColumnHidingDirective as ɵei, IgxColumnPinningDirective as ɵej, IgxGridSharedModules as ɵek, IgxProcessBarTextTemplateDirective as ɵel, IgxProgressBarGradientDirective as ɵem, DIR_DOCUMENT_FACTORY as ɵen, DIR_DOCUMENT as ɵeo, IgxDirectionality as ɵep, IgxSelectItemNavigationDirective as ɵeq, IGX_TIME_PICKER_COMPONENT as ɵer, IgxItemListDirective as ɵet, IgxTimeItemDirective as ɵeu, IgxTimePickerTemplateDirective as ɵev, IgxTimePickerActionsDirective as ɵew, TimeFormatPipe as ɵex, TimeItemPipe as ɵey, IgxGridPipesModule as ɵez, IGX_EXPANSION_PANEL_COMPONENT as ɵf, IgxGridCellStyleClassesPipe as ɵfa, IgxGridCellStylesPipe as ɵfb, IgxGridRowClassesPipe as ɵfc, IgxGridRowStylesPipe as ɵfd, IgxGridNotGroupedPipe as ɵfe, IgxGridTopLevelColumns as ɵff, IgxGridFilterConditionPipe as ɵfg, IgxGridTransactionPipe as ɵfh, IgxGridPaginatorOptionsPipe as ɵfi, IgxHasVisibleColumnsPipe as ɵfj, IgxGridRowPinningPipe as ɵfk, IgxColumnActionEnabledPipe as ɵfl, IgxFilterActionColumnsPipe as ɵfm, IgxSortActionColumnsPipe as ɵfn, IgxGridDataMapperPipe as ɵfo, IgxStringReplacePipe as ɵfp, IgxGridTransactionStatePipe as ɵfq, IgxColumnFormatterPipe as ɵfr, IgxSummaryFormatterPipe as ɵfs, IgxGridAddRowPipe as ɵft, IgxHeaderGroupWidthPipe as ɵfu, IgxHeaderGroupStylePipe as ɵfv, IgxGridColumnModule as ɵfw, IgxGridHeadersModule as ɵfx, SortingIndexPipe as ɵfy, IgxGridFilteringModule as ɵfz, IGX_TREE_COMPONENT as ɵg, IgxColumnMovingModule as ɵga, IgxColumnMovingDropDirective as ɵgb, IgxColumnMovingDragDirective as ɵgc, IgxGridResizingModule as ɵgd, IgxResizeHandleDirective as ɵge, IgxGridExcelStyleFilteringModule as ɵgf, IgxGridSelectionModule as ɵgg, IgxGridDragSelectDirective as ɵgh, IgxGridSummaryModule as ɵgi, IgxSummaryDataPipe as ɵgj, IgxGridToolbarModule as ɵgk, BaseToolbarDirective as ɵgl, BaseToolbarColumnActionsDirective as ɵgm, IgxGridRowComponent as ɵgn, IgxGridSortingPipe as ɵgo, IgxGridGroupingPipe as ɵgp, IgxGridPagingPipe as ɵgq, IgxGridFilteringPipe as ɵgr, IgxGridSummaryPipe as ɵgs, IgxGridDetailsPipe as ɵgt, IgxGridExpandableCellComponent as ɵgu, IgxTreeGridRowComponent as ɵgv, IgxTreeGridCellComponent as ɵgw, IgxTreeGridHierarchizingPipe as ɵgx, IgxTreeGridFlatteningPipe as ɵgy, IgxTreeGridSortingPipe as ɵgz, IGX_TREE_NODE_COMPONENT as ɵh, IgxTreeGridPagingPipe as ɵha, IgxTreeGridTransactionPipe as ɵhb, IgxTreeGridNormalizeRecordsPipe as ɵhc, IgxTreeGridAddRowPipe as ɵhd, IgxTreeGridFilteringPipe as ɵhe, IgxTreeGridSummaryPipe as ɵhf, IgxHierarchicalRowComponent as ɵhg, IgxHierarchicalGridCellComponent as ɵhh, IgxSliderThumbComponent as ɵhi, IgxThumbLabelComponent as ɵhj, IgxTicksComponent as ɵhk, IgxTickLabelsPipe as ɵhl, IgxTabsBase as ɵhm, IgxTabHeaderBase as ɵhn, IgxTabContentBase as ɵho, IgxSplitBarComponent as ɵhp, IgxTreeService as ɵhq, IgxTreeSelectionService as ɵhr, IgxTreeNavigationService as ɵhs, PlatformUtil as ɵi, EaseIn as ɵj, EaseOut as ɵk, IgxInputGroupBase as ɵl, IgxSelectionAPIService as ɵm, IgxForOfSyncService as ɵn, IgxForOfScrollSyncService as ɵo, DisplayContainerComponent as ɵp, IgxScrollInertiaDirective as ɵq, IgxScrollInertiaModule as ɵr, VirtualHelperComponent as ɵs, VirtualHelperBaseDirective as ɵt, HVirtualHelperComponent as ɵu, MaskParsingService as ɵv, isHierarchyMatch as ɵw, getHierarchy as ɵx, IgxGridActionButtonComponent as ɵy, ToggleAnimationPlayer as ɵz };
 //# sourceMappingURL=igniteui-angular.js.map