igniteui-angular 12.3.0-alpha.0 → 12.3.2

package/bundles/igniteui-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/animations'), require('@angular/core'), require('@angular/forms'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('lodash.mergewith'), require('@juggle/resize-observer'), require('jszip'), require('@angular/platform-browser'), require('@angular/common/http'), require('@igniteui/material-icons-extended'), require('igniteui-trial-watermark'), require('uuid')) :
     typeof define === 'function' && define.amd ? define('igniteui-angular', ['exports', '@angular/animations', '@angular/core', '@angular/forms', '@angular/common', 'rxjs', 'rxjs/operators', 'lodash.mergewith', '@juggle/resize-observer', 'jszip', '@angular/platform-browser', '@angular/common/http', '@igniteui/material-icons-extended', 'igniteui-trial-watermark', 'uuid'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['igniteui-angular'] = {}, global.ng.animations, global.ng.core, global.ng.forms, global.ng.common, global.rxjs, global.rxjs.operators, global.mergeWith, global.ResizeObserver, global.JSZip, global.ng.platformBrowser, global.ng.common.http, global.materialIconsExtended, null, global.uuid));
-}(this, (function (exports, i1, i0, forms, i2, rxjs, operators, mergeWith, resizeObserver, JSZip, i1$1, i2$1, materialIconsExtended, igniteuiTrialWatermark, uuid) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["igniteui-angular"] = {}, global.ng.animations, global.ng.core, global.ng.forms, global.ng.common, global.rxjs, global.rxjs.operators, global.mergeWith, global.ResizeObserver, global.JSZip, global.ng.platformBrowser, global.ng.common.http, global.materialIconsExtended, null, global.uuid));
+})(this, (function (exports, i1, i0, forms, i2, rxjs, operators, mergeWith, resizeObserver, JSZip, i1$1, i2$1, materialIconsExtended, igniteuiTrialWatermark, uuid) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,14 +15,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -34,7 +32,7 @@
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
 
-    exports.ɵj = void 0;
+    exports["ɵj"] = void 0;
     (function (EaseIn) {
         EaseIn[EaseIn["Quad"] = "cubic-bezier(0.550, 0.085, 0.680, 0.530)"] = "Quad";
         EaseIn[EaseIn["Cubic"] = "cubic-bezier(0.550, 0.055, 0.675, 0.190)"] = "Cubic";
@@ -44,8 +42,8 @@
         EaseIn[EaseIn["Expo"] = "cubic-bezier(0.950, 0.050, 0.795, 0.035)"] = "Expo";
         EaseIn[EaseIn["Circ"] = "cubic-bezier(0.600, 0.040, 0.980, 0.335)"] = "Circ";
         EaseIn[EaseIn["Back"] = "cubic-bezier(0.600, -0.280, 0.735, 0.045)"] = "Back";
-    })(exports.ɵj || (exports.ɵj = {}));
-    exports.ɵk = void 0;
+    })(exports["ɵj"] || (exports["ɵj"] = {}));
+    exports["ɵk"] = void 0;
     (function (EaseOut) {
         EaseOut[EaseOut["Quad"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)"] = "Quad";
         EaseOut[EaseOut["Cubic"] = "cubic-bezier(0.215, 0.610, 0.355, 1.000)"] = "Cubic";
@@ -55,7 +53,7 @@
         EaseOut[EaseOut["Expo"] = "cubic-bezier(0.190, 1.000, 0.220, 1.000)"] = "Expo";
         EaseOut[EaseOut["Circ"] = "cubic-bezier(0.075, 0.820, 0.165, 1.000)"] = "Circ";
         EaseOut[EaseOut["Back"] = "cubic-bezier(0.175, 0.885, 0.320, 1.275)"] = "Back";
-    })(exports.ɵk || (exports.ɵk = {}));
+    })(exports["ɵk"] || (exports["ɵk"] = {}));
     var EaseInOut;
     (function (EaseInOut) {
         EaseInOut[EaseInOut["Quad"] = "cubic-bezier(0.455, 0.030, 0.515, 0.955)"] = "Quad";
@@ -79,7 +77,7 @@
     var baseParams$3 = {
         delay: '0s',
         duration: '350ms',
-        easing: exports.ɵk.Sine,
+        easing: exports["ɵk"].Sine,
         endOpacity: 1,
         startOpacity: 0
     };
@@ -90,7 +88,7 @@
         params: {
             delay: '0s',
             duration: '350ms',
-            easing: exports.ɵk.Sine,
+            easing: exports["ɵk"].Sine,
             endOpacity: 0,
             startOpacity: 1
         }
@@ -115,7 +113,7 @@
     var baseParams$2 = {
         delay: '0s',
         duration: '600ms',
-        easing: exports.ɵk.Quad,
+        easing: exports["ɵk"].Quad,
         endAngle: 180,
         endDistance: '0px',
         rotateX: 1,
@@ -165,7 +163,7 @@
     var baseInParams$2 = {
         delay: '0s',
         duration: '600ms',
-        easing: exports.ɵk.Quad,
+        easing: exports["ɵk"].Quad,
         endAngle: 0,
         endOpacity: 1,
         rotateX: 0,
@@ -176,7 +174,7 @@
         xPos: 'center',
         yPos: 'center'
     };
-    var baseOutParams$2 = Object.assign(Object.assign({}, baseInParams$2), { easing: exports.ɵj.Quad, endOpacity: 0, startOpacity: 1 });
+    var baseOutParams$2 = Object.assign(Object.assign({}, baseInParams$2), { easing: exports["ɵj"].Quad, endOpacity: 0, startOpacity: 1 });
     var rotateInCenter = i1.animation(baseRecipe$1, {
         params: Object.assign({}, baseInParams$2)
     });
@@ -465,7 +463,7 @@
         delay: '0s',
         direction: '',
         duration: '350ms',
-        easing: exports.ɵk.Quad,
+        easing: exports["ɵk"].Quad,
         endOpacity: 1,
         fromScale: .5,
         startOpacity: 0,
@@ -473,7 +471,7 @@
         xPos: '50%',
         yPos: '50%'
     };
-    var baseOutParams$1 = Object.assign(Object.assign({}, baseInParams$1), { easing: exports.ɵk.Sine, endOpacity: 0, fromScale: 1, startOpacity: 1, toScale: .5 });
+    var baseOutParams$1 = Object.assign(Object.assign({}, baseInParams$1), { easing: exports["ɵk"].Sine, endOpacity: 0, fromScale: 1, startOpacity: 1, toScale: .5 });
     var scaleInCenter = i1.animation(base$2, { params: baseInParams$1 });
     var scaleInBl = i1.animation(base$2, {
         params: Object.assign(Object.assign({}, baseInParams$1), { xPos: '0', yPos: '100%' })
@@ -574,7 +572,7 @@
     var baseInParams = {
         delay: '0s',
         duration: '350ms',
-        easing: exports.ɵk.Quad,
+        easing: exports["ɵk"].Quad,
         endOpacity: 1,
         fromPosition: 'translateY(-500px)',
         startOpacity: 0,
@@ -583,7 +581,7 @@
     var baseOutParams = {
         delay: '0s',
         duration: '350ms',
-        easing: exports.ɵj.Quad,
+        easing: exports["ɵj"].Quad,
         endOpacity: 0,
         fromPosition: 'translateY(0)',
         startOpacity: 1,
@@ -594,7 +592,7 @@
         params: {
             delay: '0s',
             duration: '350ms',
-            easing: exports.ɵk.Quad,
+            easing: exports["ɵk"].Quad,
             endOpacity: 1,
             fromPosition: 'translateX(-500px)',
             startOpacity: 0,
@@ -605,7 +603,7 @@
         params: {
             delay: '0s',
             duration: '350ms',
-            easing: exports.ɵk.Quad,
+            easing: exports["ɵk"].Quad,
             endOpacity: 1,
             fromPosition: 'translateX(500px)',
             startOpacity: 0,
@@ -616,7 +614,7 @@
         params: {
             delay: '0s',
             duration: '350ms',
-            easing: exports.ɵk.Quad,
+            easing: exports["ɵk"].Quad,
             endOpacity: 1,
             fromPosition: 'translateY(500px)',
             startOpacity: 0,
@@ -643,7 +641,7 @@
         params: {
             delay: '0s',
             duration: '350ms',
-            easing: exports.ɵj.Quad,
+            easing: exports["ɵj"].Quad,
             endOpacity: 0,
             fromPosition: 'translateY(0)',
             startOpacity: 1,
@@ -682,7 +680,7 @@
         delay: '0s',
         direction: 'X',
         duration: '.5s',
-        easing: exports.ɵk.Back,
+        easing: exports["ɵk"].Back,
         endAngle: 0,
         endOpacity: 1,
         startAngle: -100,
@@ -690,7 +688,7 @@
         xPos: 'top',
         yPos: 'center'
     };
-    var swingOutParams = Object.assign(Object.assign({}, swingParams), { duration: '.55s', easing: exports.ɵj.Back, endAngle: 70, endOpacity: 0, startAngle: 0, startOpacity: 1 });
+    var swingOutParams = Object.assign(Object.assign({}, swingParams), { duration: '.55s', easing: exports["ɵj"].Back, endAngle: 70, endOpacity: 0, startAngle: 0, startOpacity: 1 });
     var swingInTopFwd = i1.animation(swingBase, {
         params: Object.assign({}, swingParams)
     });
@@ -753,17 +751,17 @@
     var baseParams = {
         delay: '0s',
         duration: '350ms',
-        easing: exports.ɵj.Quad,
+        easing: exports["ɵj"].Quad,
         startOpacity: 0,
         endOpacity: 1,
         startHeight: '',
         endHeight: ''
     };
     var growVerIn = i1.animation(base, {
-        params: Object.assign(Object.assign({}, baseParams), { easing: exports.ɵk.Quad, startOpacity: 0, endOpacity: 1, startHeight: '0px', endHeight: '*' })
+        params: Object.assign(Object.assign({}, baseParams), { easing: exports["ɵk"].Quad, startOpacity: 0, endOpacity: 1, startHeight: '0px', endHeight: '*' })
     });
     var growVerOut = i1.animation(base, {
-        params: Object.assign(Object.assign({}, baseParams), { easing: exports.ɵk.Quad, startOpacity: 1, endOpacity: 0, startHeight: '*', endHeight: '0px' })
+        params: Object.assign(Object.assign({}, baseParams), { easing: exports["ɵk"].Quad, startOpacity: 1, endOpacity: 0, startHeight: '*', endHeight: '0px' })
     });
 
     /*! *****************************************************************************
@@ -1001,7 +999,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || from);
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -1244,7 +1242,7 @@
             fn();
         }
     };
-    var ɵ0$5 = run;
+    var ɵ0$4 = run;
     var listener = function (event) { return run(event.data); };
     var ɵ1$1 = listener;
     // Use function instead of arrow function to workaround an issue in codesandbox
@@ -1276,6 +1274,15 @@
         delete queue[id];
     }
 
+    /**
+     * @hidden
+     */
+    var showMessage = function (message, isMessageShown) {
+        if (!isMessageShown && i0.isDevMode()) {
+            console.warn(message);
+        }
+        return true;
+    };
     var mkenum = function (x) { return x; };
     /**
      * Returns the ResizeObserver type or the polyfilled version if not available.
@@ -1335,7 +1342,7 @@
      * @returns Obj1 with merged cloned keys from Obj2
      * @hidden
      */
-    var mergeObjects = function (obj1, obj2) { return mergeWith__default['default'](obj1, obj2, function (objValue, srcValue) {
+    var mergeObjects = function (obj1, obj2) { return mergeWith__default["default"](obj1, obj2, function (objValue, srcValue) {
         if (Array.isArray(srcValue)) {
             return objValue = srcValue;
         }
@@ -2112,8 +2119,17 @@
                         finally { if (e_1) throw e_1.error; }
                     }
                     if (expanded) {
-                        metadata.push.apply(metadata, __spreadArray([], __read(fullResult.metadata.slice(fullResult.metadata.length - group.length))));
-                        result.push.apply(result, __spreadArray([], __read(fullResult.data.slice(fullResult.data.length - group.length))));
+                        // Replaced object destructing as in a single big group scenario
+                        // it hits the max number of arguments for a function the underlying JS engine
+                        // supports.
+                        var j = fullResult.metadata.length - group.length;
+                        for (; j < fullResult.metadata.length; j++) {
+                            metadata.push(fullResult.metadata[j]);
+                        }
+                        j = fullResult.data.length - group.length;
+                        for (; j < fullResult.data.length; j++) {
+                            result.push(fullResult.data[j]);
+                        }
                     }
                 }
                 i += group.length;
@@ -8592,7 +8608,7 @@
              */
             get: function () {
                 if (this.inEditMode) {
-                    return mergeWith__default['default'](cloneValue(this._rowData), this.grid.transactions.getAggregatedValue(this.rowID, false), function (objValue, srcValue) {
+                    return mergeWith__default["default"](cloneValue(this._rowData), this.grid.transactions.getAggregatedValue(this.rowID, false), function (objValue, srcValue) {
                         if (Array.isArray(srcValue)) {
                             return objValue = srcValue;
                         }
@@ -9139,7 +9155,7 @@
     };
 
     var clear = function (el) { return el === 0 || Boolean(el); };
-    var ɵ0$4 = clear;
+    var ɵ0$3 = clear;
     var first = function (arr) { return arr[0]; };
     var ɵ1 = first;
     var last = function (arr) { return arr[arr.length - 1]; };
@@ -18299,124 +18315,6 @@
                 },] }
     ];
 
-    /**
-     * @hidden
-     */
-    var DeprecateClass = function (message) {
-        var isMessageShown = false;
-        return function (originalClass) { return /** @class */ (function (_super) {
-            __extends(class_1, _super);
-            function class_1() {
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i] = arguments[_i];
-                }
-                var _this = this;
-                var target = originalClass;
-                var targetName = typeof target === 'function' ? target.name : target.constructor.name;
-                isMessageShown = showMessage(targetName + ": " + message, isMessageShown);
-                _this = _super.apply(this, __spreadArray([], __read(args))) || this;
-                return _this;
-            }
-            return class_1;
-        }(originalClass)); };
-    };
-    /**
-     * @hidden
-     */
-    function DeprecateMethod(message) {
-        var isMessageShown = false;
-        return function (target, key, descriptor) {
-            if (descriptor && descriptor.value) {
-                var originalMethod_1 = descriptor.value;
-                descriptor.value = function () {
-                    var e_1, _a;
-                    var targetName = typeof target === 'function' ? target.name : target.constructor.name;
-                    isMessageShown = showMessage(targetName + "." + key + ": " + message, isMessageShown);
-                    var args = [];
-                    try {
-                        for (var arguments_1 = __values(arguments), arguments_1_1 = arguments_1.next(); !arguments_1_1.done; arguments_1_1 = arguments_1.next()) {
-                            var x = arguments_1_1.value;
-                            args.push(x);
-                        }
-                    }
-                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                    finally {
-                        try {
-                            if (arguments_1_1 && !arguments_1_1.done && (_a = arguments_1.return)) _a.call(arguments_1);
-                        }
-                        finally { if (e_1) throw e_1.error; }
-                    }
-                    return originalMethod_1.call.apply(originalMethod_1, __spreadArray([this], __read(args)));
-                };
-                return descriptor;
-            }
-        };
-    }
-    /**
-     * @hidden
-     */
-    function DeprecateProperty(message) {
-        return function (target, key) {
-            var isMessageShown = false;
-            var messageToDisplay = target.constructor.name + "." + key + ": " + message;
-            // if the target already has the property defined
-            var originalDescriptor = Object.getOwnPropertyDescriptor(target, key);
-            if (originalDescriptor) {
-                var getter_1 = originalDescriptor.get;
-                var setter_1 = originalDescriptor.set;
-                if (getter_1) {
-                    originalDescriptor.get = function () {
-                        isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                        return getter_1.call(this);
-                    };
-                }
-                if (setter_1) {
-                    originalDescriptor.set = function (value) {
-                        isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                        setter_1.call(this, value);
-                    };
-                }
-                return originalDescriptor;
-            }
-            // the target doesn't contain a descriptor for that property, so create one
-            // use backing field to set/get the value of the property to ensure there won't be infinite recursive calls
-            var newKey = generateUniqueKey(target, key);
-            Object.defineProperty(target, key, {
-                configurable: true,
-                enumerable: true,
-                set: function (value) {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    this[newKey] = value;
-                },
-                get: function () {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    return this[newKey];
-                }
-            });
-        };
-    }
-    /**
-     * @hidden
-     */
-    var generateUniqueKey = function (target, key) {
-        var newKey = '_' + key;
-        while (target.hasOwnProperty(newKey)) {
-            newKey = '_' + newKey;
-        }
-        return newKey;
-    };
-    var ɵ0$3 = generateUniqueKey;
-    /**
-     * @hidden
-     */
-    var showMessage = function (message, isMessageShown) {
-        if (!isMessageShown && i0.isDevMode()) {
-            console.warn(message);
-        }
-        return true;
-    };
-
     var NEXT_ID$t = 0;
     /**
      * The `<igx-drop-down-item>` is a container intended for row items in
@@ -18492,7 +18390,6 @@
     };
 
     var NEXT_ID$s = 0;
-    var warningShown = false;
     /**
      * An abstract class defining a drop-down item:
      * With properties / styles for selection, highlight, height
@@ -18566,8 +18463,6 @@
              */
             get: function () {
                 if (this._index === null) {
-                    warningShown = showMessage('IgxDropDownItemBaseDirective: Automatic index is deprecated.' +
-                        'Bind in the template instead using `<igx-drop-down-item [index]="i"` instead.`', warningShown);
                     return this.itemIndex;
                 }
                 return this._index;
@@ -20980,16 +20875,20 @@
      * ```
      */
     var IgxIconService = /** @class */ (function () {
-        function IgxIconService(_sanitizer, _httpClient, _document) {
+        function IgxIconService(_sanitizer, _httpClient, _platformUtil, _document) {
+            var _a;
             this._sanitizer = _sanitizer;
             this._httpClient = _httpClient;
+            this._platformUtil = _platformUtil;
             this._document = _document;
             this._family = 'material-icons';
             this._familyAliases = new Map();
             this._cachedSvgIcons = new Map();
             this._iconLoaded = new rxjs.Subject();
-            this._domParser = new DOMParser();
             this.iconLoaded = this._iconLoaded.asObservable();
+            if ((_a = this._platformUtil) === null || _a === void 0 ? void 0 : _a.isBrowser) {
+                this._domParser = new DOMParser();
+            }
         }
         Object.defineProperty(IgxIconService.prototype, "defaultFamily", {
             /**
@@ -21122,8 +21021,9 @@
          */
         IgxIconService.prototype.cacheSvgIcon = function (name, value, family, stripMeta) {
             if (family === void 0) { family = this._family; }
+            var _a;
             family = !!family ? family : this._family;
-            if (name && value) {
+            if (((_a = this._platformUtil) === null || _a === void 0 ? void 0 : _a.isBrowser) && name && value) {
                 var doc = this._domParser.parseFromString(value, 'image/svg+xml');
                 var svg = doc.querySelector('svg');
                 if (!this._cachedSvgIcons.has(family)) {
@@ -21149,7 +21049,7 @@
         };
         return IgxIconService;
     }());
-    IgxIconService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function IgxIconService_Factory() { return new IgxIconService(i0__namespace.ɵɵinject(i1__namespace$1.DomSanitizer, 8), i0__namespace.ɵɵinject(i2__namespace$1.HttpClient, 8), i0__namespace.ɵɵinject(i2__namespace.DOCUMENT, 8)); }, token: IgxIconService, providedIn: "root" });
+    IgxIconService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function IgxIconService_Factory() { return new IgxIconService(i0__namespace.ɵɵinject(i1__namespace$1.DomSanitizer, 8), i0__namespace.ɵɵinject(i2__namespace$1.HttpClient, 8), i0__namespace.ɵɵinject(PlatformUtil, 8), i0__namespace.ɵɵinject(i2__namespace.DOCUMENT, 8)); }, token: IgxIconService, providedIn: "root" });
     IgxIconService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root'
@@ -21158,6 +21058,7 @@
     IgxIconService.ctorParameters = function () { return [
         { type: i1$1.DomSanitizer, decorators: [{ type: i0.Optional }] },
         { type: i2$1.HttpClient, decorators: [{ type: i0.Optional }] },
+        { type: PlatformUtil, decorators: [{ type: i0.Optional }] },
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [i2.DOCUMENT,] }] }
     ]; };
 
@@ -21420,9 +21321,6 @@
         getInactive: [{ type: i0.HostBinding, args: ['class.igx-icon--inactive',] }],
         getColor: [{ type: i0.HostBinding, args: ['style.color',] }]
     };
-    __decorate([
-        DeprecateProperty('`color` is deprecated.')
-    ], IgxIconComponent.prototype, "color", void 0);
 
     /**
      * @hidden
@@ -21713,6 +21611,10 @@
         igx_collapse: 'Collapse',
     };
 
+    var ActionStripResourceStringsEN = {
+        igx_action_strip_button_more_title: 'More'
+    };
+
     /**
      * @hidden
      * IF YOU EDIT THIS OBJECT, DO NOT FORGET TO UPDATE
@@ -21736,7 +21638,8 @@
         CarouselResStrings: cloneValue(CarouselResourceStringsEN),
         ListResStrings: cloneValue(ListResourceStringsEN),
         InputResStrings: cloneValue(InputResourceStringsEN),
-        TreeResStrings: cloneValue(TreeResourceStringsEN)
+        TreeResStrings: cloneValue(TreeResourceStringsEN),
+        ActionStripResourceStrings: cloneValue(ActionStripResourceStringsEN)
     };
     var updateResourceStrings = function (currentStrings, newStrings) {
         var e_1, _a;
@@ -21781,7 +21684,7 @@
     /**
      * Returns current resource strings for all components
      */
-    var getCurrentResourceStrings = function () { return (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, CurrentResourceStrings.CalendarResStrings), CurrentResourceStrings.CarouselResStrings), CurrentResourceStrings.ChipResStrings), CurrentResourceStrings.DatePickerResourceStrings), CurrentResourceStrings.DateRangePickerResStrings), CurrentResourceStrings.GridResStrings), CurrentResourceStrings.InputResStrings), CurrentResourceStrings.ListResStrings), CurrentResourceStrings.PaginatorResStrings), CurrentResourceStrings.TimePickerResStrings), CurrentResourceStrings.TreeResStrings)); };
+    var getCurrentResourceStrings = function () { return (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, CurrentResourceStrings.CalendarResStrings), CurrentResourceStrings.CarouselResStrings), CurrentResourceStrings.ChipResStrings), CurrentResourceStrings.DatePickerResourceStrings), CurrentResourceStrings.DateRangePickerResStrings), CurrentResourceStrings.GridResStrings), CurrentResourceStrings.InputResStrings), CurrentResourceStrings.ListResStrings), CurrentResourceStrings.PaginatorResStrings), CurrentResourceStrings.TimePickerResStrings), CurrentResourceStrings.TreeResStrings), CurrentResourceStrings.ActionStripResourceStrings)); };
 
     var IgxInputGroupTheme = mkenum({
         Material: 'material',
@@ -26111,10 +26014,10 @@
         });
         Object.defineProperty(IgxRadioGroupDirective.prototype, "disabled", {
             /**
-             * An @Input property that allows you to disable the radio group. By default it's false.
-             *
              * @deprecated in version 12.2.0
              *
+             * An input property that allows you to disable the radio group. By default it's false.
+             *
              * @example
              *  ```html
              * <igx-radio-group disabled></igx-radio-group>
@@ -26132,10 +26035,10 @@
         });
         Object.defineProperty(IgxRadioGroupDirective.prototype, "labelPosition", {
             /**
-             * Sets/gets the position of the `label` in the child radio buttons.
-             *
              * @deprecated in version 12.2.0
              *
+             * Sets/gets the position of the `label` in the child radio buttons.
+             *
              * @remarks
              * If not set, `labelPosition` will have value `"after"`.
              *
@@ -26403,12 +26306,6 @@
         vertical: [{ type: i0.HostBinding, args: ['class.igx-radio-group--vertical',] }],
         alignment: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateProperty('`disabled` is deprecated.')
-    ], IgxRadioGroupDirective.prototype, "disabled", null);
-    __decorate([
-        DeprecateProperty('`labelPosition` is deprecated.')
-    ], IgxRadioGroupDirective.prototype, "labelPosition", null);
     /**
      * @hidden
      */
@@ -28827,7 +28724,7 @@
     IgxGridActionButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-grid-action-button',
-                    template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button igxButton=\"icon\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]='containerClass'>\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>"
+                    template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button [title]=\"labelText\" igxButton=\"icon\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]='containerClass'>\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>"
                 },] }
     ];
     IgxGridActionButtonComponent.propDecorators = {
@@ -29067,8 +28964,8 @@
          * @internal
          */
         IgxGridEditingActionsComponent.prototype.registerIcons = function () {
-            this.iconService.addSvgIconFromText(materialIconsExtended.addRow.name, materialIconsExtended.addRow.value, 'imx-icons');
-            this.iconService.addSvgIconFromText(materialIconsExtended.addChild.name, materialIconsExtended.addChild.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(materialIconsExtended.addRow.name, materialIconsExtended.addRow.value, 'imx-icons', true);
+            this.iconService.addSvgIconFromText(materialIconsExtended.addChild.name, materialIconsExtended.addChild.value, 'imx-icons', true);
         };
         return IgxGridEditingActionsComponent;
     }(IgxGridActionsBaseDirective));
@@ -29209,10 +29106,10 @@
             var context = this.strip.context;
             var grid = context.grid;
             if (grid) {
-                this.iconService.addSvgIconFromText(materialIconsExtended.pinLeft.name, materialIconsExtended.pinLeft.value, 'imx-icons');
-                this.iconService.addSvgIconFromText(materialIconsExtended.unpinLeft.name, materialIconsExtended.unpinLeft.value, 'imx-icons');
-                this.iconService.addSvgIconFromText(materialIconsExtended.jumpDown.name, materialIconsExtended.jumpDown.value, 'imx-icons');
-                this.iconService.addSvgIconFromText(materialIconsExtended.jumpUp.name, materialIconsExtended.jumpDown.value, 'imx-icons');
+                this.iconService.addSvgIconFromText(materialIconsExtended.pinLeft.name, materialIconsExtended.pinLeft.value, 'imx-icons', true);
+                this.iconService.addSvgIconFromText(materialIconsExtended.unpinLeft.name, materialIconsExtended.unpinLeft.value, 'imx-icons', true);
+                this.iconService.addSvgIconFromText(materialIconsExtended.jumpDown.name, materialIconsExtended.jumpDown.value, 'imx-icons', true);
+                this.iconService.addSvgIconFromText(materialIconsExtended.jumpUp.name, materialIconsExtended.jumpDown.value, 'imx-icons', true);
             }
         };
         return IgxGridPinningActionsComponent;
@@ -29300,6 +29197,25 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(IgxActionStripComponent.prototype, "resourceStrings", {
+            get: function () {
+                if (!this._resourceStrings) {
+                    this._resourceStrings = CurrentResourceStrings.ActionStripResourceStrings;
+                }
+                return this._resourceStrings;
+            },
+            /**
+             * Gets/Sets the resource strings.
+             *
+             * @remarks
+             * By default it uses EN resources.
+             */
+            set: function (value) {
+                this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgxActionStripComponent.prototype, "display", {
             /**
              * Getter for the 'display' property of the current `IgxActionStrip`
@@ -29444,7 +29360,7 @@
     IgxActionStripComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-action-strip',
-                    template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    <ng-container *ngIf=\"menuItems.length > 0\">\n        <button\n            igxButton=\"icon\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon>more_vert</igx-icon>\n        </button>\n    </ng-container>\n    <igx-drop-down #dropdown [displayDensity]=\"displayDensity\">\n        <igx-drop-down-item\n            *ngFor=\"let item of menuItems\"\n            class=\"igx-action-strip__menu-item\"\n        >\n            <div class=\"igx-drop-down__item-template\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        item.templateRef;\n                        context: { $implicit: item }\n                    \"\n                ></ng-container>\n            </div>\n        </igx-drop-down-item>\n    </igx-drop-down>\n</div>\n"
+                    template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    <ng-container *ngIf=\"menuItems.length > 0\">\n        <button\n            igxButton=\"icon\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [title]=\"resourceStrings.igx_action_strip_button_more_title\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon>more_vert</igx-icon>\n        </button>\n    </ng-container>\n    <igx-drop-down #dropdown [displayDensity]=\"displayDensity\">\n        <igx-drop-down-item\n            *ngFor=\"let item of menuItems\"\n            class=\"igx-action-strip__menu-item\"\n        >\n            <div class=\"igx-drop-down__item-template\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        item.templateRef;\n                        context: { $implicit: item }\n                    \"\n                ></ng-container>\n            </div>\n        </igx-drop-down-item>\n    </igx-drop-down>\n</div>\n"
                 },] }
     ];
     IgxActionStripComponent.ctorParameters = function () { return [
@@ -29459,6 +29375,7 @@
         actionButtons: [{ type: i0.ContentChildren, args: [IgxGridActionsBaseDirective,] }],
         hidden: [{ type: i0.Input }],
         hostClass: [{ type: i0.Input, args: ['class',] }],
+        resourceStrings: [{ type: i0.Input }],
         menu: [{ type: i0.ViewChild, args: ['dropdown',] }],
         display: [{ type: i0.HostBinding, args: ['style.display',] }],
         hostClasses: [{ type: i0.HostBinding, args: ['attr.class',] }]
@@ -30899,6 +30816,7 @@
         IgxAccordionComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             this._expandedPanels = new Set(this._panels.filter(function (panel) { return !panel.collapsed; }));
+            this._expandingPanels = new Set();
             this._panels.changes.pipe(operators.takeUntil(this._destroy$)).subscribe(function () {
                 _this.subToChanges();
             });
@@ -31003,6 +30921,7 @@
             this._panels.forEach(function (panel) {
                 panel.contentExpanded.pipe(operators.takeUntil(_this._unsubChildren$)).subscribe(function (args) {
                     _this._expandedPanels.add(args.owner);
+                    _this._expandingPanels.delete(args.owner);
                     var evArgs = Object.assign(Object.assign({}, args), { owner: _this, panel: args.owner });
                     _this.panelExpanded.emit(evArgs);
                 });
@@ -31010,21 +30929,36 @@
                     if (args.cancel) {
                         return;
                     }
+                    var evArgs = Object.assign(Object.assign({}, args), { owner: _this, panel: args.owner });
+                    _this.panelExpanding.emit(evArgs);
+                    if (evArgs.cancel) {
+                        args.cancel = true;
+                        return;
+                    }
                     if (_this.singleBranchExpand) {
                         _this._expandedPanels.forEach(function (p) {
                             if (!p.header.disabled) {
                                 p.collapse();
                             }
                         });
-                    }
-                    var evArgs = Object.assign(Object.assign({}, args), { owner: _this, panel: args.owner });
-                    _this.panelExpanding.emit(evArgs);
-                    if (evArgs.cancel) {
-                        args.cancel = true;
+                        _this._expandingPanels.forEach(function (p) {
+                            var _a, _b;
+                            if (!p.header.disabled) {
+                                if (!p.animationSettings.closeAnimation) {
+                                    (_a = p.openAnimationPlayer) === null || _a === void 0 ? void 0 : _a.reset();
+                                }
+                                if (!p.animationSettings.openAnimation) {
+                                    (_b = p.closeAnimationPlayer) === null || _b === void 0 ? void 0 : _b.reset();
+                                }
+                                p.collapse();
+                            }
+                        });
+                        _this._expandingPanels.add(args.owner);
                     }
                 });
                 panel.contentCollapsed.pipe(operators.takeUntil(_this._unsubChildren$)).subscribe(function (args) {
                     _this._expandedPanels.delete(args.owner);
+                    _this._expandingPanels.delete(args.owner);
                     var evArgs = Object.assign(Object.assign({}, args), { owner: _this, panel: args.owner });
                     _this.panelCollapsed.emit(evArgs);
                 });
@@ -39114,6 +39048,20 @@
             _this._displayDensityOptions = _displayDensityOptions;
             _this._inputGroupType = _inputGroupType;
             _this._injector = _injector;
+            /**
+             * Defines whether the caseSensitive icon should be shown in the search input
+             *
+             * ```typescript
+             * // get
+             * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
+             * ```
+             *
+             * ```html
+             * <!--set-->
+             * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
+             * ```
+             */
+            _this.showSearchCaseIcon = false;
             /**
              * Set custom overlay settings that control how the combo's list of items is displayed.
              * Set:
@@ -39173,6 +39121,13 @@
              * ```
              */
             _this.valueKey = null;
+            /**
+             * An @Input property that enabled/disables filtering in the list. The default is `true`.
+             * ```html
+             * <igx-combo [filterable]="false">
+             * ```
+             */
+            _this.filterable = true;
             /** @hidden @internal */
             _this.cssClass = 'igx-combo'; // Independent of display density for the time being
             /** @hidden @internal */
@@ -39184,15 +39139,6 @@
              * ```
              */
             _this.disabled = false;
-            /**
-             * Emitted when item selection is changing, before the selection completes
-             *
-             * ```html
-             * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
-             * ```
-             */
-            // TODO: any for old/new selection?
-            _this.selectionChanging = new i0.EventEmitter();
             /**
              * Emitted before the dropdown is opened
              *
@@ -40017,6 +39963,10 @@
                 }
             }
         };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.toggleCaseSensitive = function () {
+            this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
+        };
         /** if there is a valueKey - map the keys to data items, else - just return the keys */
         IgxComboBaseDirective.prototype.convertKeysToItems = function (keys) {
             var _this = this;
@@ -40115,6 +40065,7 @@
         { type: i0.Injector, decorators: [{ type: i0.Optional }] }
     ]; };
     IgxComboBaseDirective.propDecorators = {
+        showSearchCaseIcon: [{ type: i0.Input }],
         overlaySettings: [{ type: i0.Input }],
         id: [{ type: i0.HostBinding, args: ['attr.id',] }, { type: i0.Input }],
         width: [{ type: i0.HostBinding, args: ['style.width',] }, { type: i0.Input }],
@@ -40127,6 +40078,7 @@
         valueKey: [{ type: i0.Input }],
         displayKey: [{ type: i0.Input }],
         groupKey: [{ type: i0.Input }],
+        filterable: [{ type: i0.Input }],
         ariaLabelledBy: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.aria-labelledby',] }],
         cssClass: [{ type: i0.HostBinding, args: ['class.igx-combo',] }],
         role: [{ type: i0.HostBinding, args: ["attr.role",] }],
@@ -40135,7 +40087,6 @@
         ariaOwns: [{ type: i0.HostBinding, args: ['attr.aria-owns',] }],
         disabled: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
-        selectionChanging: [{ type: i0.Output }],
         opening: [{ type: i0.Output }],
         opened: [{ type: i0.Output }],
         closing: [{ type: i0.Output }],
@@ -40559,20 +40510,6 @@
             _this._displayDensityOptions = _displayDensityOptions;
             _this._inputGroupType = _inputGroupType;
             _this._injector = _injector;
-            /**
-             * Defines whether the caseSensitive icon should be shown in the search input
-             *
-             * ```typescript
-             * // get
-             * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
-             * ```
-             *
-             * ```html
-             * <!--set-->
-             * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
-             * ```
-             */
-            _this.showSearchCaseIcon = false;
             /**
              * An @Input property that controls whether the combo's search box
              * should be focused after the `opened` event is called
@@ -40600,6 +40537,14 @@
              * ```
              */
             _this.searchPlaceholder = 'Enter a Search Term';
+            /**
+             * Emitted when item selection is changing, before the selection completes
+             *
+             * ```html
+             * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
+             * ```
+             */
+            _this.selectionChanging = new i0.EventEmitter();
             /**
              * @hidden @internal
              */
@@ -40797,12 +40742,6 @@
                 this.deselect([itemID], event);
             }
         };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.toggleCaseSensitive = function () {
-            this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
-        };
         /** @hidden @internal */
         IgxComboComponent.prototype.handleOpened = function () {
             this.triggerCheck();
@@ -40878,7 +40817,7 @@
     IgxComboComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-combo',
-                    template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"value\" readonly [attr.placeholder]=\"placeholder\"\n        [disabled]=\"disabled\" (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" class=\"igx-combo__search\">\n        <input class=\"igx-combo-input\" igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n            [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n            (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n            aria-autocomplete=\"both\" [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" />\n        <igx-suffix *ngIf=\"showSearchCaseIcon\">\n            <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    </igx-input-group>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\">\n        <igx-combo-item role=\"option\" [itemHeight]='itemHeight' *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterable\n            | comboGrouping:groupKey:valueKey;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
+                    template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"value\" readonly [attr.placeholder]=\"placeholder\"\n        [disabled]=\"disabled\" (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" class=\"igx-combo__search\">\n        <input class=\"igx-combo-input\" igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n            [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n            (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n            aria-autocomplete=\"both\" [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" />\n        <igx-suffix *ngIf=\"showSearchCaseIcon\">\n            <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    </igx-input-group>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\">\n        <igx-combo-item role=\"option\" [itemHeight]='itemHeight' *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterable\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
                     providers: [
                         IgxComboAPIService,
                         { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
@@ -40897,10 +40836,10 @@
         { type: i0.Injector, decorators: [{ type: i0.Optional }] }
     ]; };
     IgxComboComponent.propDecorators = {
-        showSearchCaseIcon: [{ type: i0.Input }],
         autoFocusSearch: [{ type: i0.Input }],
         filterable: [{ type: i0.Input }],
         searchPlaceholder: [{ type: i0.Input }],
+        selectionChanging: [{ type: i0.Output }],
         dropdown: [{ type: i0.ViewChild, args: [IgxComboDropDownComponent, { static: true },] }]
     };
     /**
@@ -40982,7 +40921,7 @@
             _this.selectionChanging = new i0.EventEmitter();
             /** @hidden @internal */
             _this.composing = false;
-            _this._updateInput = false;
+            _this._updateInput = true;
             _this.findMatch = function (element) {
                 var value = _this.displayKey ? element[_this.displayKey] : element;
                 return value.toString().toLowerCase().includes(_this.searchValue.trim().toLowerCase());
@@ -41003,6 +40942,23 @@
             enumerable: false,
             configurable: true
         });
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.onArrowDown = function (event) {
+            if (this.collapsed) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.open();
+            }
+            else {
+                if (this.virtDir.igxForOf.length > 0) {
+                    this.dropdown.navigateFirst();
+                    this.dropdownContainer.nativeElement.focus();
+                }
+                else if (this.allowCustomValues) {
+                    this.addItem.element.nativeElement.focus();
+                }
+            }
+        };
         /**
          * Select a defined item
          *
@@ -41018,18 +40974,15 @@
             }
         };
         /**
-         * Deselect a defined item
+         * Deselect the currently selected item
          *
          * @param item the items to be deselected
          * ```typescript
          * this.combo.deselect("New York");
          * ```
          */
-        IgxSimpleComboComponent.prototype.deselect = function (item) {
-            if (item !== null && item !== undefined) {
-                var newSelection = this.selectionService.delete_items(this.id, item instanceof Array ? item : [item]);
-                this.setSelection(newSelection);
-            }
+        IgxSimpleComboComponent.prototype.deselect = function () {
+            this.clearSelection();
         };
         /** @hidden @internal */
         IgxSimpleComboComponent.prototype.writeValue = function (value) {
@@ -41041,33 +40994,51 @@
         /** @hidden @internal */
         IgxSimpleComboComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
+            this.virtDir.contentSizeChange.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+                if (_this.selection.length > 0) {
+                    var index = _this.virtDir.igxForOf.findIndex(function (e) {
+                        var current = e[_this.valueKey];
+                        if (_this.valueKey === null || _this.valueKey === undefined) {
+                            current = e;
+                        }
+                        return current === _this.selection[0];
+                    });
+                    _this.dropdown.navigateItem(index);
+                }
+            });
             this.dropdown.opened.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
                 if (_this.composing) {
                     _this.comboInput.focus();
                 }
             });
-            this.dropdown.closed.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
-                _this.composing = false;
-            });
-            this.dropdown.closing.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
-                var selection = _this.selectionService.first_item(_this.id);
-                _this.comboInput.value = selection !== undefined && selection !== null ? selection : '';
-            });
-            this.dropdown.opening.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
-                if (!_this.comboInput.value.length) {
-                    _this.clearSelection();
+            this.dropdown.closing.pipe(operators.takeUntil(this.destroy$)).subscribe(function (args) {
+                if (_this.getEditElement() && !args.event) {
+                    _this.comboInput.focus();
+                }
+                else {
+                    _this.clearOnBlur();
+                    _this._onTouchedCallback();
                 }
             });
             _super.prototype.ngAfterViewInit.call(this);
         };
         /** @hidden @internal */
         IgxSimpleComboComponent.prototype.handleInputChange = function (event) {
-            this.searchValue = event.target.value;
+            if (event !== undefined) {
+                this.searchValue = typeof event === 'string' ? event : event.target.value;
+            }
             this._onChangeCallback(this.searchValue);
-            if (this.collapsed) {
+            if (this.collapsed && this.comboInput.focused) {
                 this.open();
+                this.dropdown.navigateFirst();
+            }
+            if (!this.comboInput.value.trim()) {
+                // handle clearing of input by space
+                this.clearSelection();
+                this._onChangeCallback(null);
             }
             _super.prototype.handleInputChange.call(this, event);
+            this.composing = true;
         };
         /** @hidden @internal */
         IgxSimpleComboComponent.prototype.handleKeyDown = function (event) {
@@ -41076,10 +41047,12 @@
                 if (filtered === null || filtered === undefined) {
                     return;
                 }
-                this.select(this.dropdown.items[0].itemID);
+                this.select(this.dropdown.focusedItem.itemID);
                 event.preventDefault();
                 event.stopPropagation();
                 this.close();
+                // manually trigger text selection as it will not be triggered during editing
+                this.textSelection.trigger();
                 return;
             }
             if (event.key === this.platformUtil.KEYMAP.BACKSPACE
@@ -41087,11 +41060,12 @@
                 this._updateInput = false;
                 this.clearSelection();
             }
+            if (!this.collapsed && event.key === this.platformUtil.KEYMAP.TAB) {
+                this.close();
+                this.clearOnBlur();
+            }
+            this.composing = false;
             _super.prototype.handleKeyDown.call(this, event);
-            this.composing = event.key !== this.platformUtil.KEYMAP.ARROW_DOWN
-                && event.key !== this.platformUtil.KEYMAP.ARROW_LEFT
-                && event.key !== this.platformUtil.KEYMAP.ARROW_RIGHT
-                && event.key !== this.platformUtil.KEYMAP.TAB;
         };
         /** @hidden @internal */
         IgxSimpleComboComponent.prototype.handleKeyUp = function (event) {
@@ -41104,6 +41078,29 @@
             }
         };
         /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleItemKeyDown = function (event) {
+            if (event.key === this.platformUtil.KEYMAP.ARROW_UP && event.altKey) {
+                this.close();
+                this.comboInput.focus();
+                return;
+            }
+            if (event.key === this.platformUtil.KEYMAP.ENTER) {
+                this.comboInput.focus();
+            }
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleItemClick = function () {
+            this.close();
+            this.comboInput.focus();
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.onBlur = function () {
+            if (this.collapsed) {
+                this.clearOnBlur();
+            }
+            _super.prototype.onBlur.call(this);
+        };
+        /** @hidden @internal */
         IgxSimpleComboComponent.prototype.getEditElement = function () {
             return this.comboInput.nativeElement;
         };
@@ -41114,7 +41111,8 @@
             }
             this.clearSelection(true);
             if (this.collapsed) {
-                this.getEditElement().focus();
+                this.open();
+                this.dropdown.navigateFirst();
             }
             else {
                 this.focusSearchInput(true);
@@ -41122,6 +41120,7 @@
             event.stopPropagation();
             this.comboInput.value = this.filterValue = this.searchValue = '';
             this.dropdown.focusedItem = null;
+            this.composing = false;
             this.comboInput.focus();
         };
         /** @hidden @internal */
@@ -41131,6 +41130,19 @@
             this.opened.emit({ owner: this });
         };
         /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleClosing = function (e) {
+            var args = { owner: this, event: e.event, cancel: e.cancel };
+            this.closing.emit(args);
+            e.cancel = args.cancel;
+            if (e.cancel) {
+                return;
+            }
+            this.composing = false;
+            // explicitly update selection and trigger text selection so that we don't have to force CD
+            this.textSelection.selected = true;
+            this.textSelection.trigger();
+        };
+        /** @hidden @internal */
         IgxSimpleComboComponent.prototype.focusSearchInput = function (opening) {
             if (opening) {
                 this.dropdownContainer.nativeElement.focus();
@@ -41140,6 +41152,13 @@
                 this.toggle();
             }
         };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.onClick = function (event) {
+            _super.prototype.onClick.call(this, event);
+            if (this.comboInput.value.length === 0) {
+                this.virtDir.scrollTo(0);
+            }
+        };
         IgxSimpleComboComponent.prototype.setSelection = function (newSelection) {
             var newSelectionAsArray = newSelection ? Array.from(newSelection) : [];
             var oldSelectionAsArray = Array.from(this.selectionService.get(this.id) || []);
@@ -41155,13 +41174,14 @@
             if (!args.cancel) {
                 var argsSelection = args.newSelection !== undefined
                     && args.newSelection !== null
-                    ? [args.newSelection]
+                    ? args.newSelection
                     : [];
+                argsSelection = Array.isArray(argsSelection) ? argsSelection : [argsSelection];
                 this.selectionService.select_items(this.id, argsSelection, true);
                 if (this._updateInput) {
-                    this._value = displayText !== args.displayText
+                    this.comboInput.value = this._value = displayText !== args.displayText
                         ? args.displayText
-                        : this.createDisplayText([args.newSelection], [args.oldSelection]);
+                        : this.createDisplayText(argsSelection, [args.oldSelection]);
                 }
                 this._onChangeCallback(args.newSelection);
                 this._updateInput = true;
@@ -41172,9 +41192,11 @@
             if (this.isRemote) {
                 return this.getRemoteSelection(newSelection, oldSelection);
             }
-            return this.displayKey !== null && this.displayKey !== undefined
-                ? this.convertKeysToItems(newSelection).map(function (e) { return e[_this.displayKey]; })[0]
-                : newSelection[0];
+            if (this.displayKey !== null && this.displayKey !== undefined
+                && newSelection.length > 0) {
+                return this.convertKeysToItems(newSelection).map(function (e) { return e[_this.displayKey]; })[0];
+            }
+            return newSelection[0] || '';
         };
         IgxSimpleComboComponent.prototype.clearSelection = function (ignoreFilter) {
             var newSelection = this.selectionService.get_empty();
@@ -41183,12 +41205,20 @@
             }
             this.setSelection(newSelection);
         };
+        IgxSimpleComboComponent.prototype.clearOnBlur = function () {
+            var filtered = this.filteredData.find(this.findMatch);
+            if ((filtered === undefined || filtered === null)) {
+                this.close();
+                this.clearSelection();
+                this.searchValue = '';
+            }
+        };
         return IgxSimpleComboComponent;
     }(IgxComboBaseDirective));
     IgxSimpleComboComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-simple-combo',
-                    template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\"\n        aria-autocomplete=\"both\" [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [disabled]=\"disabled\" [igxTextSelection]=\"!composing\" />\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\">\n        <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"close()\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:true\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
+                    template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\" aria-autocomplete=\"both\"\n        [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" [disabled]=\"disabled\"\n        [igxTextSelection]=\"!composing\" />\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\"\n        (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"handleItemClick()\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:true\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
                     providers: [
                         IgxComboAPIService,
                         { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
@@ -41209,7 +41239,10 @@
     ]; };
     IgxSimpleComboComponent.propDecorators = {
         dropdown: [{ type: i0.ViewChild, args: [IgxComboDropDownComponent, { static: true },] }],
-        selectionChanging: [{ type: i0.Output }]
+        addItem: [{ type: i0.ViewChild, args: [IgxComboAddItemComponent,] }],
+        selectionChanging: [{ type: i0.Output }],
+        textSelection: [{ type: i0.ViewChild, args: [IgxTextSelectionDirective, { static: true },] }],
+        onArrowDown: [{ type: i0.HostListener, args: ['keydown.ArrowDown', ['$event'],] }, { type: i0.HostListener, args: ['keydown.Alt.ArrowDown', ['$event'],] }]
     };
     var IgxSimpleComboModule = /** @class */ (function () {
         function IgxSimpleComboModule() {
@@ -43830,7 +43863,7 @@
         { type: i0.Component, args: [{
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     selector: 'igx-grid-excel-style-filtering',
-                    template: "<ng-template #defaultExcelColumnOperations>\n    <igx-excel-style-header\n        [showHiding]=\"displayDensity !== 'comfortable' && !column?.disableHiding\"\n        [showPinning]=\"displayDensity !== 'comfortable' && !column?.disablePinning\"\n        [showSelecting]=\"displayDensity !== 'comfortable' && columnSelectable()\"\n    >\n    </igx-excel-style-header>\n\n    <igx-excel-style-sorting *ngIf=\"column?.sortable\">\n    </igx-excel-style-sorting>\n\n    <igx-excel-style-moving *ngIf=\"column?.movable\">\n    </igx-excel-style-moving>\n\n    <igx-excel-style-pinning *ngIf=\"!column?.disablePinning && displayDensity==='comfortable'\">\n    </igx-excel-style-pinning>\n\n    <igx-excel-style-hiding *ngIf=\"!column?.disableHiding && displayDensity==='comfortable'\">\n    </igx-excel-style-hiding>\n\n    <igx-excel-style-selecting *ngIf=\"columnSelectable() && displayDensity==='comfortable'\">\n    </igx-excel-style-selecting>\n</ng-template>\n\n<ng-template #defaultExcelFilterOperations>\n    <igx-excel-style-clear-filters>\n    </igx-excel-style-clear-filters>\n\n    <igx-excel-style-conditional-filter>\n    </igx-excel-style-conditional-filter>\n\n    <igx-excel-style-search>\n    </igx-excel-style-search>\n</ng-template>\n\n<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',\n        'igx-excel-filter__menu--compact': displayDensity === 'compact'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\">\n\n    <ng-container *ngIf=\"this.excelColumnOperationsDirective; else defaultExcelColumnOperations\">\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.excelFilterOperationsDirective; else defaultExcelFilterOperations\">\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    </ng-container>\n</article>\n"
+                    template: "<ng-template #defaultExcelColumnOperations>\n    <igx-excel-style-header\n        [showHiding]=\"displayDensity !== 'comfortable' && !column?.disableHiding\"\n        [showPinning]=\"displayDensity !== 'comfortable' && !column?.disablePinning\"\n        [showSelecting]=\"displayDensity !== 'comfortable' && columnSelectable()\"\n    >\n    </igx-excel-style-header>\n\n    <igx-excel-style-sorting *ngIf=\"column?.sortable\">\n    </igx-excel-style-sorting>\n\n    <igx-excel-style-moving *ngIf=\"column?.movable\">\n    </igx-excel-style-moving>\n\n    <igx-excel-style-pinning *ngIf=\"!column?.disablePinning && displayDensity==='comfortable'\">\n    </igx-excel-style-pinning>\n\n    <igx-excel-style-hiding *ngIf=\"!column?.disableHiding && displayDensity==='comfortable'\">\n    </igx-excel-style-hiding>\n\n    <igx-excel-style-selecting *ngIf=\"columnSelectable() && displayDensity==='comfortable'\">\n    </igx-excel-style-selecting>\n</ng-template>\n\n<ng-template #defaultExcelFilterOperations>\n    <igx-excel-style-clear-filters>\n    </igx-excel-style-clear-filters>\n\n    <igx-excel-style-conditional-filter>\n    </igx-excel-style-conditional-filter>\n\n    <igx-excel-style-search>\n    </igx-excel-style-search>\n</ng-template>\n\n<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',\n        'igx-excel-filter__menu--compact': displayDensity === 'compact'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    role=\"menu\">\n\n    <ng-container *ngIf=\"this.excelColumnOperationsDirective; else defaultExcelColumnOperations\">\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.excelFilterOperationsDirective; else defaultExcelFilterOperations\">\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    </ng-container>\n</article>\n"
                 },] }
     ];
     IgxGridExcelStyleFilteringComponent.ctorParameters = function () { return [
@@ -45566,7 +45599,7 @@
         { type: i0.Component, args: [{
                     preserveWhitespaces: false,
                     selector: 'igx-excel-style-date-expression',
-                    template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n"
+                    template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n"
                 },] }
     ];
     IgxExcelStyleDateExpressionComponent.propDecorators = {
@@ -46281,7 +46314,7 @@
          * @param target Target name
          */
         HammerGesturesManager.prototype.getGlobalEventTarget = function (target) {
-            return i1$1.ɵgetDOM().getGlobalEventTarget(this.doc, target);
+            return i1$1["ɵgetDOM"]().getGlobalEventTarget(this.doc, target);
         };
         /**
          * Set HammerManager options.
@@ -52638,15 +52671,23 @@
                 var _this = this;
                 if (!val && val !== 0) {
                     this.expression.searchVal = null;
-                    this.showHideArrowButtons();
+                    var index = this.expressionsList.findIndex(function (item) { return item.expression === _this.expression; });
+                    if (index === 0 && this.expressionsList.length === 1) {
+                        this.clearFiltering();
+                        return;
+                    }
                 }
                 else {
+                    var oldValue = this.expression.searchVal;
+                    if (isEqual(oldValue, val)) {
+                        return;
+                    }
                     this.expression.searchVal = DataUtil.parseValue(this.column.dataType, val);
                     if (this.expressionsList.find(function (item) { return item.expression === _this.expression; }) === undefined) {
                         this.addExpression(true);
                     }
+                    this.filter();
                 }
-                this.filter();
             },
             enumerable: false,
             configurable: true
@@ -54441,7 +54482,7 @@
         { type: i0.Component, args: [{
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     selector: 'igx-grid-header-row',
-                    template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n"
+                    template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n"
                 },] }
     ];
     IgxGridHeaderRowComponent.ctorParameters = function () { return [
@@ -54625,9 +54666,10 @@
              */
             _this.gridScroll = new i0.EventEmitter();
             /**
+             * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+             *
              * Emitted after the current page is changed.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```html
              * <igx-grid (pageChange)="onPageChange($event)"></igx-grid>
@@ -54640,10 +54682,10 @@
              */
             _this.pageChange = new i0.EventEmitter();
             /**
+             * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+             *
              * Emitted when `perPage` property value of the grid is changed.
              *
-             * @deprecated in version 12.1.0
-             * @example
              * ```html
              * <igx-grid #grid (perPageChange)="onPerPageChange($event)" [autoGenerate]="true"></igx-grid>
              * ```
@@ -54660,6 +54702,8 @@
              */
             _this.class = '';
             /**
+             * @deprecated in version 12.2.0. We suggest using `rowClasses` property instead
+             *
              * Gets/Sets the styling classes applied to all even `IgxGridRowComponent`s in the grid.
              *
              * @example
@@ -54669,6 +54713,8 @@
              */
             _this.evenRowCSS = 'igx-grid__tr--even';
             /**
+             * @deprecated in version 12.2.0. We suggest using `rowClasses` property instead
+             *
              * Gets/Sets the styling classes applied to all odd `IgxGridRowComponent`s in the grid.
              *
              * @example
@@ -54923,9 +54969,10 @@
              */
             _this.filteringDone = new i0.EventEmitter();
             /**
+             * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+             *
              * Emitted after paging is performed.
              *
-             * @deprecated in version 12.1.x
              * @remarks
              * Returns an object consisting of the previous and next pages.
              * @example
@@ -55629,9 +55676,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "paging", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+             *
              * Gets/Sets whether the paging feature is enabled.
              *
-             * @deprecated in version 12.1.x
              * @remarks
              * The default state is disabled (false).
              * @example
@@ -55653,9 +55701,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "page", {
             /**
+             * @deprecated in version 12.1.0. Use `page` property form `paginator` component instead
+             *
              * Gets/Sets the current page index.
              *
-             * @deprecated in version 12.1.x
              * @example
              * ```html
              * <igx-grid #grid [data]="Data" [autoGenerate]="true">
@@ -55679,9 +55728,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "perPage", {
             /**
+             * @deprecated in version 12.1.0. Use `perPage` property from `paginator` component instead
+             *
              * Gets/Sets the number of visible items per page.
              *
-             * @deprecated in version 12.1.x
              * @remarks
              * The default is 15.
              * @example
@@ -55706,9 +55756,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnHiding", {
             /**
+             * @deprecated in version 10.1.0
+             *
              * Gets/Sets whether the column hiding UI is enabled.
              *
-             * @deprecated
              * @remarks
              * By default it is disabled (false). In order for the UI to work, you need to enable the toolbar as shown in the example below.
              * @example
@@ -55959,9 +56010,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnHidingTitle", {
             /**
-             * Gets/Sets the title to be displayed in the built-in column hiding UI.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the title to be displayed in the built-in column hiding UI.
              *
              * @example
              * ```html
@@ -56011,9 +56062,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnPinning", {
             /**
-             * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
              *
              * @example
              * ```html
@@ -56032,9 +56083,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnPinningTitle", {
             /**
-             * Gets/Sets the title to be displayed in the UI of the column pinning.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the title to be displayed in the UI of the column pinning.
              *
              * @example
              * ```html
@@ -56637,9 +56688,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "hiddenColumnsText", {
             /**
-             * Gets/Sets the text to be displayed inside the toggle button.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the text to be displayed inside the toggle button.
              *
              * @remarks
              * Used for the built-in column hiding UI of the`IgxColumnComponent`.
@@ -56648,7 +56699,6 @@
              * <igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>
              * ```
              */
-            // @DeprecateProperty('`hiddenColumnsText` is deprecated')
             get: function () {
                 return this._hiddenColumnsText;
             },
@@ -56661,9 +56711,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "pinnedColumnsText", {
             /**
-             * Gets/Sets the text to be displayed inside the toggle button.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the text to be displayed inside the toggle button.
              *
              * @remarks
              * Used for the built-in column pinning UI of the`IgxColumnComponent`.
@@ -56757,9 +56807,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "showToolbar", {
             /**
-             * Gets/Sets whether the toolbar is shown.
+             * @deprecated in version 11.0.0
              *
-             * @deprecated
+             * Gets/Sets whether the toolbar is shown.
              *
              * @example
              * ```html
@@ -56777,9 +56827,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "toolbarTitle", {
             /**
-             * Gets/Sets the toolbar's title.
+             * @deprecated in version 11.0.0
              *
-             * @deprecated
+             * Gets/Sets the toolbar's title.
              *
              * @example
              * ```html
@@ -56798,9 +56848,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportExcel", {
             /**
-             * Gets/Sets whether exporting to MS Excel is enabled or disabled.
+             * @deprecated `exportExcel` is deprecated
              *
-             * @deprecated
+             * Gets/Sets whether exporting to MS Excel is enabled or disabled.
              *
              * @example
              * ```html
@@ -56819,9 +56869,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportCsv", {
             /**
-             * Gets/Sets whether the option for exporting to CSV is enabled or disabled.
+             * @deprecated `exportCsv` is deprecated
              *
-             * @deprecated
+             * Gets/Sets whether the option for exporting to CSV is enabled or disabled.
              *
              * ```html
              * <igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportCsv]="true"></igx-grid>
@@ -56839,9 +56889,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportText", {
             /**
-             * Gets/Sets the textual content for the main export button.
+             * @deprecated `exportText` is deprecated
              *
-             * @deprecated
+             * Gets/Sets the textual content for the main export button.
              *
              * @example
              * ```html
@@ -56860,9 +56910,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportExcelText", {
             /**
-             * Gets/Sets the textual content for the MS Excel export button.
+             * @deprecated `exportExcelText` is deprecated
              *
-             * @deprecated
+             * Gets/Sets the textual content for the MS Excel export button.
              *
              * ```html
              * <igx-grid [exportExcelText]="'My Excel Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>
@@ -56880,9 +56930,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportCsvText", {
             /**
-             * Gets/Sets the textual content for the CSV export button.
+             * @deprecated `exportCsvText` is deprecated
              *
-             * @deprecated
+             * Gets/Sets the textual content for the CSV export button.
              *
              * @example
              * ```html
@@ -57654,7 +57704,7 @@
             this.rendered$.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
                 if (_this.paginator) {
                     _this.paginator.perPage = _this._perPage !== DEFAULT_ITEMS_PER_PAGE ? _this._perPage : _this.paginator.perPage;
-                    _this.paginator.totalRecords = _this.totalRecords;
+                    _this.paginator.totalRecords = _this.totalRecords ? _this.totalRecords : _this.paginator.totalRecords;
                     _this.paginator.overlaySettings = { outlet: _this.outlet };
                 }
                 _this._rendered = true;
@@ -58148,9 +58198,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "totalPages", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+             *
              * Gets the total number of pages.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```typescript
              * const totalPages = this.grid.totalPages;
@@ -58165,9 +58216,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "isFirstPage", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+             *
              * Gets if the current page is the first page.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```typescript
              * const firstPage = this.grid.isFirstPage;
@@ -58180,9 +58232,10 @@
             configurable: true
         });
         /**
+         * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+         *
          * Goes to the next page, if the grid is not already at the last page.
          *
-         * @deprecated in version 12.1.0
          * @example
          * ```typescript
          * this.grid1.nextPage();
@@ -58194,9 +58247,10 @@
             (_a = this.paginator) === null || _a === void 0 ? void 0 : _a.nextPage();
         };
         /**
+         * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+         *
          * Goes to the previous page, if the grid is not already at the first page.
          *
-         * @deprecated in version 12.1.0
          * @example
          * ```typescript
          * this.grid1.previousPage();
@@ -58237,9 +58291,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "isLastPage", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+             *
              * Returns if the current page is the last page.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```typescript
              * const lastPage = this.grid.isLastPage;
@@ -58356,6 +58411,8 @@
             this._columnsReordered(column);
         };
         /**
+         * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+         *
          * Goes to the desired page index.
          *
          * @example
@@ -59685,6 +59742,9 @@
             if (!this.clipboardOptions.copyHeaders) {
                 result = result.substring(result.indexOf('\n') + 1);
             }
+            if (Object.values(data[0]).length === 1) {
+                result = result.slice(0, -2);
+            }
             event.preventDefault();
             /* Necessary for the hiearachical case but will probably have to
                change how getSelectedData is propagated in the hiearachical grid
@@ -61643,24 +61703,9 @@
         totalRecords: [{ type: i0.Input }],
         selectRowOnClick: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateProperty('`pageChange` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "pageChange", void 0);
-    __decorate([
-        DeprecateProperty('`perPageChange` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "perPageChange", void 0);
-    __decorate([
-        DeprecateProperty('`evenRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
-    ], IgxGridBaseDirective.prototype, "evenRowCSS", void 0);
-    __decorate([
-        DeprecateProperty('`oddRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
-    ], IgxGridBaseDirective.prototype, "oddRowCSS", void 0);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "primaryKey", void 0);
-    __decorate([
-        DeprecateProperty('`pagingDone` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "pagingDone", void 0);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "filteringLogic", null);
@@ -61670,18 +61715,6 @@
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "advancedFilteringExpressionsTree", null);
-    __decorate([
-        DeprecateProperty('`paging` is deprecated')
-    ], IgxGridBaseDirective.prototype, "paging", null);
-    __decorate([
-        DeprecateProperty('`page` is deprecated. Use `page` property form `paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "page", null);
-    __decorate([
-        DeprecateProperty('`perPage` is deprecated. Use `perPage` property from `paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "perPage", null);
-    __decorate([
-        DeprecateProperty('`columnHiding` is deprecated.')
-    ], IgxGridBaseDirective.prototype, "columnHiding", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "hideRowSelectors", null);
@@ -61703,42 +61736,9 @@
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "isLoading", null);
-    __decorate([
-        DeprecateProperty('`columnHidingTitle` is deprecated')
-    ], IgxGridBaseDirective.prototype, "columnHidingTitle", null);
-    __decorate([
-        DeprecateProperty('`columnPinning` is deprecated')
-    ], IgxGridBaseDirective.prototype, "columnPinning", null);
-    __decorate([
-        DeprecateProperty('`columnPinningTitle` is deprecated')
-    ], IgxGridBaseDirective.prototype, "columnPinningTitle", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "sortingExpressions", null);
-    __decorate([
-        DeprecateProperty('`pinnedColumnsText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "pinnedColumnsText", null);
-    __decorate([
-        DeprecateProperty('`showToolbar` is deprecated')
-    ], IgxGridBaseDirective.prototype, "showToolbar", null);
-    __decorate([
-        DeprecateProperty('`toolbarTitle` is deprecated')
-    ], IgxGridBaseDirective.prototype, "toolbarTitle", null);
-    __decorate([
-        DeprecateProperty('`exportExcel` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportExcel", null);
-    __decorate([
-        DeprecateProperty('`exportCsv` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportCsv", null);
-    __decorate([
-        DeprecateProperty('`exportText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportText", null);
-    __decorate([
-        DeprecateProperty('`exportExcelText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportExcelText", null);
-    __decorate([
-        DeprecateProperty('`exportCsvText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportCsvText", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "cellSelection", null);
@@ -61748,24 +61748,6 @@
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "columnSelection", null);
-    __decorate([
-        DeprecateProperty('`totalPages` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "totalPages", null);
-    __decorate([
-        DeprecateProperty('`isFirstPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "isFirstPage", null);
-    __decorate([
-        DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "nextPage", null);
-    __decorate([
-        DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "previousPage", null);
-    __decorate([
-        DeprecateProperty('`isLastPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "isLastPage", null);
-    __decorate([
-        DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "paginate", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "selectRowOnClick", null);
@@ -61815,7 +61797,7 @@
             get: function () {
                 var _a, _b;
                 if (this.inEditMode) {
-                    return mergeWith__default['default'](cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
+                    return mergeWith__default["default"](cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
                         if (Array.isArray(srcValue)) {
                             return objValue = srcValue;
                         }
@@ -61828,7 +61810,7 @@
         });
         Object.defineProperty(BaseRow.prototype, "rowData", {
             /**
-             * @deprecated Use 'data' instead.
+             * @deprecated Use 'data' instead
              *
              * The data record that populates the row
              */
@@ -61840,8 +61822,7 @@
         });
         Object.defineProperty(BaseRow.prototype, "rowID", {
             /**
-             * @deprecated Use 'key' instead.
-             *
+             * @deprecated Use 'key' instead
              */
             get: function () {
                 return this.key;
@@ -62047,12 +62028,6 @@
         };
         return BaseRow;
     }());
-    __decorate([
-        DeprecateProperty("'rowData' property is deprecated. Use 'data' instead.")
-    ], BaseRow.prototype, "rowData", null);
-    __decorate([
-        DeprecateProperty("'rowID' property is deprecated. Use 'key' instead.")
-    ], BaseRow.prototype, "rowID", null);
     var IgxGridRow = /** @class */ (function (_super) {
         __extends(IgxGridRow, _super);
         /**
@@ -62182,7 +62157,7 @@
             get: function () {
                 var _a;
                 if (this.inEditMode) {
-                    return mergeWith__default['default'](cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
+                    return mergeWith__default["default"](cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
                         if (Array.isArray(srcValue)) {
                             return objValue = srcValue;
                         }
@@ -63295,17 +63270,6 @@
             enumerable: false,
             configurable: true
         });
-        /**
-         * @deprecated
-         * Gets whether the cell is selected.
-         * ```typescript
-         * let isCellSelected = thid.cell.isCellSelected();
-         * ```
-         * @memberof IgxGridCellComponent
-         */
-        IgxGridCellComponent.prototype.isCellSelected = function () {
-            return this.selectionService.selected(this.selectionNode);
-        };
         /**
          * @hidden
          * @internal
@@ -63617,9 +63581,6 @@
         onClick: [{ type: i0.HostListener, args: ['click', ['$event'],] }],
         onContextMenu: [{ type: i0.HostListener, args: ['contextmenu', ['$event'],] }]
     };
-    __decorate([
-        DeprecateMethod("'isCellSelected' is deprecated. Use 'selected' property instead.")
-    ], IgxGridCellComponent.prototype, "isCellSelected", null);
 
     var IgxGridFooterComponent = /** @class */ (function () {
         function IgxGridFooterComponent() {
@@ -64022,9 +63983,10 @@
         }
         Object.defineProperty(IgxColumnActionsComponent.prototype, "columns", {
             /**
+             * @deprecated Use grid input instead.
+             *
              * Gets the grid columns to provide an action for.
              *
-             * @deprecated
              * @example
              * ```typescript
              * let gridColumns = this.columnActions.columns;
@@ -64304,9 +64266,6 @@
         checkAllText: [{ type: i0.Input }],
         id: [{ type: i0.HostBinding, args: ['attr.id',] }, { type: i0.Input }]
     };
-    __decorate([
-        DeprecateProperty("Deprecated. Use 'grid' input instead.")
-    ], IgxColumnActionsComponent.prototype, "columns", null);
 
     /**
      * @hidden
@@ -67345,7 +67304,7 @@
                         }
                     ],
                     selector: 'igx-time-picker',
-                    template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\" [suppressInputAutofocus]=\"this.isDropdown\"\n    (click)=\"!this.isDropdown && this.toggle()\">\n    <input [displayValuePipe]=\"this.formatter ? displayValue : null\" igxInput [igxDateTimeEditor]=\"this.inputFormat\"\n        type=\"text\" [readonly]=\"!this.isDropdown || this.readOnly\" [minValue]=\"this.minValue\" [maxValue]=\"this.maxValue\"\n        [locale]=\"this.locale\" [spinDelta]=\"this.itemsDelta\" [spinLoop]=\"this.spinLoop\" [placeholder]=\"this.placeholder\"\n        [disabled]=\"this.disabled\" [displayFormat]=\"this.displayFormat\"\n        [igxTextSelection]=\"this.isDropdown && !this.readOnly\" role=\"combobox\" aria-haspopup=\"dialog\"\n        [attr.aria-expanded]=\"!this.toggleDirective.collapsed\" [attr.aria-labelledby]=\"this.label?.id\" />\n\n    <igx-prefix *ngIf=\"!this.toggleComponents.length\" (click)=\"this.toggle()\">\n        <igx-icon [title]=\"this.value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time\">access_time</igx-icon>\n    </igx-prefix>\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"this.showClearButton\" (click)=\"this.clear(); $event.stopPropagation()\">\n        <igx-icon>clear</igx-icon>\n    </igx-suffix>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint\">\n        <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n\n<ng-template #defaultTimePickerActions>\n    <div *ngIf=\"this.cancelButtonLabel || this.okButtonLabel\" class=\"igx-time-picker__buttons\">\n        <button *ngIf=\"this.cancelButtonLabel\" igxButton=\"flat\" (click)=\"this.cancelButtonClick()\">\n            {{this.cancelButtonLabel}}\n        </button>\n        <button *ngIf=\"this.okButtonLabel\" igxButton=\"flat\" (click)=\"this.okButtonClick()\">\n            {{this.okButtonLabel}}\n        </button>\n    </div>\n</ng-template>\n\n<div #toggleDirective=\"toggle\" igxToggle role=\"dialog\" class=\"igx-time-picker\"\n    [ngClass]=\"{'igx-time-picker--dropdown': this.isDropdown, 'igx-time-picker--vertical': this.isVertical && !this.isDropdown}\">\n    <div *ngIf=\"!this.isDropdown\" class=\"igx-time-picker__header\">\n        <h2 class=\"igx-time-picker__header-hour\">\n            <span>{{ this.selectedDate | timeFormatPipe }}</span>\n        </h2>\n    </div>\n    <div class=\"igx-time-picker__main\">\n        <div class=\"igx-time-picker__body\">\n            <div *ngIf=\"this.showHoursList\" #hourList [igxItemList]=\"'hourList'\">\n                <span [igxTimeItem]=\"hour\" #timeItem=\"timeItem\" aria-label=\"hour\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? timeItem.hourValue : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let hour of hourItems | timeItemPipe:'hour':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ hour }}</span>\n            </div>\n            <div *ngIf=\"this.showMinutesList\" #minuteList [igxItemList]=\"'minuteList'\">\n                <span [igxTimeItem]=\"minute\" #timeItem=\"timeItem\" aria-label=\"minutes\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? minute : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let minute of minuteItems | timeItemPipe:'minutes':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ minute }}</span>\n            </div>\n            <div *ngIf=\"this.showSecondsList\" #secondsList [igxItemList]=\"'secondsList'\">\n                <span [igxTimeItem]=\"seconds\" #timeItem=\"timeItem\" aria-label=\"seconds\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? seconds : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let seconds of secondsItems | timeItemPipe:'seconds':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ seconds }}</span>\n            </div>\n            <div *ngIf=\"this.showAmPmList\" #ampmList [igxItemList]=\"'ampmList'\">\n                <span [igxTimeItem]=\"ampm\" #timeItem=\"timeItem\" aria-label=\"ampm\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? ampm : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let ampm of ampmItems | timeItemPipe:'ampm':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ ampm }}</span>\n            </div>\n        </div>\n        <ng-container\n            *ngTemplateOutlet=\"timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions\">\n        </ng-container>\n    </div>\n</div>\n",
+                    template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\" [suppressInputAutofocus]=\"this.isDropdown\">\n    <input [displayValuePipe]=\"this.formatter ? displayValue : null\" igxInput [igxDateTimeEditor]=\"this.inputFormat\"\n        type=\"text\" [readonly]=\"!this.isDropdown || this.readOnly\" [minValue]=\"this.minValue\" [maxValue]=\"this.maxValue\"\n        [locale]=\"this.locale\" [spinDelta]=\"this.itemsDelta\" [spinLoop]=\"this.spinLoop\" [placeholder]=\"this.placeholder\"\n        [disabled]=\"this.disabled\" [displayFormat]=\"this.displayFormat\"\n        [igxTextSelection]=\"this.isDropdown && !this.readOnly\" role=\"combobox\" aria-haspopup=\"dialog\"\n        [attr.aria-expanded]=\"!this.toggleDirective.collapsed\" [attr.aria-labelledby]=\"this.label?.id\"\n        (click)=\"!this.isDropdown && this.toggle()\"/>\n\n    <igx-prefix *ngIf=\"!this.toggleComponents.length\" (click)=\"this.toggle()\">\n        <igx-icon [title]=\"this.value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time\">access_time</igx-icon>\n    </igx-prefix>\n\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </ng-container>\n\n    <igx-suffix *ngIf=\"this.showClearButton\" (click)=\"this.clear(); $event.stopPropagation()\">\n        <igx-icon>clear</igx-icon>\n    </igx-suffix>\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint\">\n        <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n    </ng-container>\n</igx-input-group>\n\n<ng-template #defaultTimePickerActions>\n    <div *ngIf=\"this.cancelButtonLabel || this.okButtonLabel\" class=\"igx-time-picker__buttons\">\n        <button *ngIf=\"this.cancelButtonLabel\" igxButton=\"flat\" (click)=\"this.cancelButtonClick()\">\n            {{this.cancelButtonLabel}}\n        </button>\n        <button *ngIf=\"this.okButtonLabel\" igxButton=\"flat\" (click)=\"this.okButtonClick()\">\n            {{this.okButtonLabel}}\n        </button>\n    </div>\n</ng-template>\n\n<div #toggleDirective=\"toggle\" igxToggle role=\"dialog\" class=\"igx-time-picker\"\n    [ngClass]=\"{'igx-time-picker--dropdown': this.isDropdown, 'igx-time-picker--vertical': this.isVertical && !this.isDropdown}\">\n    <div *ngIf=\"!this.isDropdown\" class=\"igx-time-picker__header\">\n        <h2 class=\"igx-time-picker__header-hour\">\n            <span>{{ this.selectedDate | timeFormatPipe }}</span>\n        </h2>\n    </div>\n    <div class=\"igx-time-picker__main\">\n        <div class=\"igx-time-picker__body\">\n            <div *ngIf=\"this.showHoursList\" #hourList [igxItemList]=\"'hourList'\">\n                <span [igxTimeItem]=\"hour\" #timeItem=\"timeItem\" aria-label=\"hour\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? timeItem.hourValue : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let hour of hourItems | timeItemPipe:'hour':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ hour }}</span>\n            </div>\n            <div *ngIf=\"this.showMinutesList\" #minuteList [igxItemList]=\"'minuteList'\">\n                <span [igxTimeItem]=\"minute\" #timeItem=\"timeItem\" aria-label=\"minutes\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? minute : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let minute of minuteItems | timeItemPipe:'minutes':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ minute }}</span>\n            </div>\n            <div *ngIf=\"this.showSecondsList\" #secondsList [igxItemList]=\"'secondsList'\">\n                <span [igxTimeItem]=\"seconds\" #timeItem=\"timeItem\" aria-label=\"seconds\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? seconds : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let seconds of secondsItems | timeItemPipe:'seconds':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ seconds }}</span>\n            </div>\n            <div *ngIf=\"this.showAmPmList\" #ampmList [igxItemList]=\"'ampmList'\">\n                <span [igxTimeItem]=\"ampm\" #timeItem=\"timeItem\" aria-label=\"ampm\"\n                    [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n                    [attr.aria-valuenow]=\"timeItem.isSelectedTime ? ampm : null\"\n                    [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n                    [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n                    *ngFor=\"let ampm of ampmItems | timeItemPipe:'ampm':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ ampm }}</span>\n            </div>\n        </div>\n        <ng-container\n            *ngTemplateOutlet=\"timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions\">\n        </ng-container>\n    </div>\n</div>\n",
                     styles: [":host {\n            display: block;\n        }"]
                 },] }
     ];
@@ -69178,7 +69137,8 @@
             configurable: true
         });
         /**
-         * @deprecated
+         * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+         *
          * Returns a `CellType` object that matches the conditions.
          *
          * @example
@@ -70005,9 +69965,6 @@
         dropAreaMessage: [{ type: i0.Input }],
         showGroupArea: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-    ], IgxGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
     var IgxGridStateDirective = /** @class */ (function () {
         /**
@@ -73183,7 +73140,8 @@
             configurable: true
         });
         /**
-         * @deprecated
+         * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+         *
          * Returns a `CellType` object that matches the conditions.
          *
          * @example
@@ -73240,7 +73198,7 @@
                         // if a row has been added and before commiting the transaction deleted
                         var leafRowsDirectParents_1 = new Set();
                         _this.records.forEach(function (record) {
-                            if (record && !record.children && record.parent) {
+                            if (record && (!record.children || record.children.length === 0) && record.parent) {
                                 leafRowsDirectParents_1.add(record.parent);
                             }
                         });
@@ -73256,7 +73214,7 @@
                 if (_this.rowSelection === GridSelectionMode.multipleCascade) {
                     var leafRowsDirectParents_2 = new Set();
                     _this.records.forEach(function (record) {
-                        if (record && !record.children && record.parent) {
+                        if (record && (!record.children || record.children.length === 0) && record.parent) {
                             leafRowsDirectParents_2.add(record.parent);
                         }
                     });
@@ -73895,9 +73853,6 @@
         expansionDepth: [{ type: i0.Input }],
         rowLoadingIndicatorTemplate: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-    ], IgxTreeGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
     var IgxTreeGridRowComponent = /** @class */ (function (_super) {
         __extends(IgxTreeGridRowComponent, _super);
@@ -76395,7 +76350,8 @@
             configurable: true
         });
         /**
-         * @deprecated
+         * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+         *
          * Returns a `CellType` object that matches the conditions.
          *
          * @example
@@ -77091,9 +77047,6 @@
         data: [{ type: i0.Input }],
         expandChildren: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-    ], IgxHierarchicalGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
     var IgxHierarchicalGridCellComponent = /** @class */ (function (_super) {
         __extends(IgxHierarchicalGridCellComponent, _super);
@@ -82091,6 +82044,8 @@
         }
         Object.defineProperty(IgxToastComponent.prototype, "position", {
             /**
+             * @deprecated in version 12.2.3. We suggest using `positionSettings` property instead
+             *
              * Sets/gets the position of the toast.
              * If not set, the `position` attribute will have value `IgxToastPosition.Bottom`.
              * ```html
@@ -82247,9 +82202,6 @@
         position: [{ type: i0.Input }],
         positionSettings: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateProperty('`position` is deprecated. We suggest using `positionSettings` property instead.')
-    ], IgxToastComponent.prototype, "position", null);
     /**
      * @hidden
      */
@@ -86504,208 +86456,206 @@
     exports.toPercent = toPercent;
     exports.valueInRange = valueInRange;
     exports.weekDay = weekDay;
-    exports.ɵ1 = ɵ1;
-    exports.ɵ2 = ɵ2;
-    exports.ɵa = IgxActionStripMenuItemDirective;
-    exports.ɵb = IGX_DROPDOWN_BASE;
-    exports.ɵba = IgxGridActionButtonComponent;
-    exports.ɵbb = ToggleAnimationPlayer;
-    exports.ɵbc = IgxExpansionPanelTitleDirective;
-    exports.ɵbd = IgxExpansionPanelDescriptionDirective;
-    exports.ɵbe = IgxExpansionPanelIconDirective;
-    exports.ɵbf = IgxBannerActionsDirective;
-    exports.ɵbg = IgxDaysViewNavigationService;
-    exports.ɵbh = IgxDayItemComponent;
-    exports.ɵbi = IgxMonthViewSlotsCalendar;
-    exports.ɵbj = IgxGetViewDateCalendar;
-    exports.ɵbk = IgxCarouselIndicatorDirective;
-    exports.ɵbl = IgxCarouselNextButtonDirective;
-    exports.ɵbm = IgxCarouselPrevButtonDirective;
-    exports.ɵbn = IGX_COMBO_COMPONENT;
-    exports.ɵbp = IgxComboBaseDirective;
-    exports.ɵbq = IgxComboHeaderDirective;
-    exports.ɵbr = IgxComboFooterDirective;
-    exports.ɵbs = IgxComboItemDirective;
-    exports.ɵbt = IgxComboEmptyDirective;
-    exports.ɵbu = IgxComboHeaderItemDirective;
-    exports.ɵbv = IgxComboAddItemDirective;
-    exports.ɵbw = IgxComboToggleIconDirective;
-    exports.ɵbx = IgxComboClearIconDirective;
-    exports.ɵby = IgxComboAPIService;
-    exports.ɵbz = IgxComboDropDownComponent;
-    exports.ɵca = IgxComboItemComponent;
-    exports.ɵcb = IgxComboFilteringPipe;
-    exports.ɵcc = IgxComboGroupingPipe;
-    exports.ɵcd = IgxComboAddItemComponent;
-    exports.ɵce = PickerBaseDirective;
-    exports.ɵcf = IgxCalendarContainerComponent;
-    exports.ɵcg = IgxCalendarContainerModule;
-    exports.ɵch = IgxDialogTitleDirective;
-    exports.ɵci = IgxDialogActionsDirective;
-    exports.ɵcj = IgxCellCrudState;
-    exports.ɵck = IgxRowCrudState;
-    exports.ɵcl = IgxRowAddCrudState;
-    exports.ɵcm = IgxGridCRUDService;
-    exports.ɵcn = IgxColumnMovingService;
-    exports.ɵco = IgxExcelStyleCustomDialogComponent;
-    exports.ɵcp = IgxExcelStyleDefaultExpressionComponent;
-    exports.ɵcq = IgxExcelStyleDateExpressionComponent;
-    exports.ɵcr = HammerGesturesManager;
-    exports.ɵcs = WatchChanges;
-    exports.ɵct = WatchColumnChanges;
-    exports.ɵcu = notifyChanges;
-    exports.ɵcv = IgxNotificationsDirective;
-    exports.ɵcw = IgxGridColumnResizerComponent;
-    exports.ɵcx = IgxColumnResizerDirective;
-    exports.ɵcy = IgxColumnResizingService;
-    exports.ɵcz = IgxRowSelectorDirective;
-    exports.ɵd = IgxGridSelectionService;
-    exports.ɵda = IgxGroupByRowSelectorDirective;
-    exports.ɵdb = IgxHeadSelectorDirective;
-    exports.ɵdc = IgxRowDragDirective;
-    exports.ɵdd = IgxDragIndicatorIconDirective;
-    exports.ɵde = IgxRowDragGhostDirective;
-    exports.ɵdf = IgxRowDragModule;
-    exports.ɵdg = IgxGridHeaderRowComponent;
-    exports.ɵdh = IgxGridHeaderGroupComponent;
-    exports.ɵdi = IgxGridHeaderComponent;
-    exports.ɵdj = IgxGridFilteringCellComponent;
-    exports.ɵdk = IgxFilteringService;
-    exports.ɵdl = IgxGridFilteringRowComponent;
-    exports.ɵdm = IgxGridGroupByAreaComponent;
-    exports.ɵdn = IgxGroupByAreaDirective;
-    exports.ɵdo = IgxGroupByMetaPipe;
-    exports.ɵdp = IgxTemplateOutletDirective;
-    exports.ɵdq = IgxTemplateOutletModule;
-    exports.ɵdr = IgxRowEditTemplateDirective;
-    exports.ɵds = IgxRowEditTextDirective;
-    exports.ɵdt = IgxRowAddTextDirective;
-    exports.ɵdu = IgxRowEditActionsDirective;
-    exports.ɵdv = IgxRowEditTabStopDirective;
-    exports.ɵdw = IgxSummaryRowComponent;
-    exports.ɵdx = IgxSummaryCellComponent;
-    exports.ɵdy = IgxRowDirective;
-    exports.ɵdz = IgxGridNavigationService;
-    exports.ɵea = IgxGridSummaryService;
-    exports.ɵeb = ConnectedPositioningStrategy;
-    exports.ɵec = IgxGridGroupByRowComponent;
-    exports.ɵed = IgxTreeGridSelectionService;
-    exports.ɵee = IgxTreeGridGroupByAreaComponent;
-    exports.ɵef = IgxRowLoadingIndicatorTemplateDirective;
-    exports.ɵeg = IgxHierarchicalGridNavigationService;
-    exports.ɵeh = IgxChildGridRowComponent;
-    exports.ɵei = IgxGridCellComponent;
-    exports.ɵej = IgxGridFooterComponent;
-    exports.ɵek = IgxAdvancedFilteringDialogComponent;
-    exports.ɵel = IgxColumnHidingDirective;
-    exports.ɵem = IgxColumnPinningDirective;
-    exports.ɵen = IgxGridSharedModules;
-    exports.ɵeo = IgxProcessBarTextTemplateDirective;
-    exports.ɵep = IgxProgressBarGradientDirective;
-    exports.ɵeq = DIR_DOCUMENT_FACTORY;
-    exports.ɵer = DIR_DOCUMENT;
-    exports.ɵes = IgxDirectionality;
-    exports.ɵet = IgxSelectItemNavigationDirective;
-    exports.ɵeu = IGX_TIME_PICKER_COMPONENT;
-    exports.ɵew = IgxItemListDirective;
-    exports.ɵex = IgxTimeItemDirective;
-    exports.ɵey = IgxTimePickerTemplateDirective;
-    exports.ɵez = IgxTimePickerActionsDirective;
-    exports.ɵf = IGX_EXPANSION_PANEL_COMPONENT;
-    exports.ɵfa = TimeFormatPipe;
-    exports.ɵfb = TimeItemPipe;
-    exports.ɵfc = IgxGridPipesModule;
-    exports.ɵfd = IgxGridCellStyleClassesPipe;
-    exports.ɵfe = IgxGridCellStylesPipe;
-    exports.ɵff = IgxGridRowClassesPipe;
-    exports.ɵfg = IgxGridRowStylesPipe;
-    exports.ɵfh = IgxGridNotGroupedPipe;
-    exports.ɵfi = IgxGridTopLevelColumns;
-    exports.ɵfj = IgxGridFilterConditionPipe;
-    exports.ɵfk = IgxGridTransactionPipe;
-    exports.ɵfl = IgxGridPaginatorOptionsPipe;
-    exports.ɵfm = IgxHasVisibleColumnsPipe;
-    exports.ɵfn = IgxGridRowPinningPipe;
-    exports.ɵfo = IgxColumnActionEnabledPipe;
-    exports.ɵfp = IgxFilterActionColumnsPipe;
-    exports.ɵfq = IgxSortActionColumnsPipe;
-    exports.ɵfr = IgxGridDataMapperPipe;
-    exports.ɵfs = IgxStringReplacePipe;
-    exports.ɵft = IgxGridTransactionStatePipe;
-    exports.ɵfu = IgxColumnFormatterPipe;
-    exports.ɵfv = IgxSummaryFormatterPipe;
-    exports.ɵfw = IgxGridAddRowPipe;
-    exports.ɵfx = IgxHeaderGroupWidthPipe;
-    exports.ɵfy = IgxHeaderGroupStylePipe;
-    exports.ɵfz = IgxGridColumnModule;
-    exports.ɵg = IGX_TREE_COMPONENT;
-    exports.ɵga = IgxGridHeadersModule;
-    exports.ɵgb = SortingIndexPipe;
-    exports.ɵgc = IgxGridFilteringModule;
-    exports.ɵgd = IgxColumnMovingModule;
-    exports.ɵge = IgxColumnMovingDropDirective;
-    exports.ɵgf = IgxColumnMovingDragDirective;
-    exports.ɵgg = IgxGridResizingModule;
-    exports.ɵgh = IgxResizeHandleDirective;
-    exports.ɵgi = IgxGridExcelStyleFilteringModule;
-    exports.ɵgj = IgxGridSelectionModule;
-    exports.ɵgk = IgxGridDragSelectDirective;
-    exports.ɵgl = IgxGridSummaryModule;
-    exports.ɵgm = IgxSummaryDataPipe;
-    exports.ɵgn = IgxGridToolbarModule;
-    exports.ɵgo = BaseToolbarDirective;
-    exports.ɵgp = BaseToolbarColumnActionsDirective;
-    exports.ɵgq = IgxGridRowComponent;
-    exports.ɵgr = IgxGridSortingPipe;
-    exports.ɵgs = IgxGridGroupingPipe;
-    exports.ɵgt = IgxGridPagingPipe;
-    exports.ɵgu = IgxGridFilteringPipe;
-    exports.ɵgv = IgxGridSummaryPipe;
-    exports.ɵgw = IgxGridDetailsPipe;
-    exports.ɵgx = IgxGridExpandableCellComponent;
-    exports.ɵgy = IgxTreeGridRowComponent;
-    exports.ɵgz = IgxTreeGridCellComponent;
-    exports.ɵh = IGX_TREE_NODE_COMPONENT;
-    exports.ɵha = IgxTreeGridHierarchizingPipe;
-    exports.ɵhb = IgxTreeGridFlatteningPipe;
-    exports.ɵhc = IgxTreeGridSortingPipe;
-    exports.ɵhd = IgxTreeGridPagingPipe;
-    exports.ɵhe = IgxTreeGridTransactionPipe;
-    exports.ɵhf = IgxTreeGridNormalizeRecordsPipe;
-    exports.ɵhg = IgxTreeGridAddRowPipe;
-    exports.ɵhh = IgxTreeGridFilteringPipe;
-    exports.ɵhi = IgxTreeGridSummaryPipe;
-    exports.ɵhj = IgxHierarchicalRowComponent;
-    exports.ɵhk = IgxHierarchicalGridCellComponent;
-    exports.ɵhl = IgxSliderThumbComponent;
-    exports.ɵhm = IgxThumbLabelComponent;
-    exports.ɵhn = IgxTicksComponent;
-    exports.ɵho = IgxTickLabelsPipe;
-    exports.ɵhp = IgxTabsBase;
-    exports.ɵhq = IgxTabHeaderBase;
-    exports.ɵhr = IgxTabContentBase;
-    exports.ɵhs = IgxSplitBarComponent;
-    exports.ɵht = IgxTreeService;
-    exports.ɵhu = IgxTreeSelectionService;
-    exports.ɵhv = IgxTreeNavigationService;
-    exports.ɵi = PlatformUtil;
-    exports.ɵl = IgxInputGroupBase;
-    exports.ɵm = IgxSelectionAPIService;
-    exports.ɵn = IgxForOfSyncService;
-    exports.ɵo = IgxForOfScrollSyncService;
-    exports.ɵp = DisplayContainerComponent;
-    exports.ɵq = IgxScrollInertiaDirective;
-    exports.ɵr = IgxScrollInertiaModule;
-    exports.ɵs = VirtualHelperComponent;
-    exports.ɵt = VirtualHelperBaseDirective;
-    exports.ɵu = HVirtualHelperComponent;
-    exports.ɵv = MaskParsingService;
-    exports.ɵw = DeprecateMethod;
-    exports.ɵx = DeprecateProperty;
-    exports.ɵy = isHierarchyMatch;
-    exports.ɵz = getHierarchy;
+    exports["ɵ1"] = ɵ1;
+    exports["ɵ2"] = ɵ2;
+    exports["ɵa"] = IgxActionStripMenuItemDirective;
+    exports["ɵb"] = IGX_DROPDOWN_BASE;
+    exports["ɵba"] = IgxExpansionPanelTitleDirective;
+    exports["ɵbb"] = IgxExpansionPanelDescriptionDirective;
+    exports["ɵbc"] = IgxExpansionPanelIconDirective;
+    exports["ɵbd"] = IgxBannerActionsDirective;
+    exports["ɵbe"] = IgxDaysViewNavigationService;
+    exports["ɵbf"] = IgxDayItemComponent;
+    exports["ɵbg"] = IgxMonthViewSlotsCalendar;
+    exports["ɵbh"] = IgxGetViewDateCalendar;
+    exports["ɵbi"] = IgxCarouselIndicatorDirective;
+    exports["ɵbj"] = IgxCarouselNextButtonDirective;
+    exports["ɵbk"] = IgxCarouselPrevButtonDirective;
+    exports["ɵbl"] = IGX_COMBO_COMPONENT;
+    exports["ɵbn"] = IgxComboBaseDirective;
+    exports["ɵbo"] = IgxComboHeaderDirective;
+    exports["ɵbp"] = IgxComboFooterDirective;
+    exports["ɵbq"] = IgxComboItemDirective;
+    exports["ɵbr"] = IgxComboEmptyDirective;
+    exports["ɵbs"] = IgxComboHeaderItemDirective;
+    exports["ɵbt"] = IgxComboAddItemDirective;
+    exports["ɵbu"] = IgxComboToggleIconDirective;
+    exports["ɵbv"] = IgxComboClearIconDirective;
+    exports["ɵbw"] = IgxComboAPIService;
+    exports["ɵbx"] = IgxComboDropDownComponent;
+    exports["ɵby"] = IgxComboItemComponent;
+    exports["ɵbz"] = IgxComboFilteringPipe;
+    exports["ɵca"] = IgxComboGroupingPipe;
+    exports["ɵcb"] = IgxComboAddItemComponent;
+    exports["ɵcc"] = PickerBaseDirective;
+    exports["ɵcd"] = IgxCalendarContainerComponent;
+    exports["ɵce"] = IgxCalendarContainerModule;
+    exports["ɵcf"] = IgxDialogTitleDirective;
+    exports["ɵcg"] = IgxDialogActionsDirective;
+    exports["ɵch"] = IgxCellCrudState;
+    exports["ɵci"] = IgxRowCrudState;
+    exports["ɵcj"] = IgxRowAddCrudState;
+    exports["ɵck"] = IgxGridCRUDService;
+    exports["ɵcl"] = IgxColumnMovingService;
+    exports["ɵcm"] = IgxExcelStyleCustomDialogComponent;
+    exports["ɵcn"] = IgxExcelStyleDefaultExpressionComponent;
+    exports["ɵco"] = IgxExcelStyleDateExpressionComponent;
+    exports["ɵcp"] = HammerGesturesManager;
+    exports["ɵcq"] = WatchChanges;
+    exports["ɵcr"] = WatchColumnChanges;
+    exports["ɵcs"] = notifyChanges;
+    exports["ɵct"] = IgxNotificationsDirective;
+    exports["ɵcu"] = IgxGridColumnResizerComponent;
+    exports["ɵcv"] = IgxColumnResizerDirective;
+    exports["ɵcw"] = IgxColumnResizingService;
+    exports["ɵcx"] = IgxRowSelectorDirective;
+    exports["ɵcy"] = IgxGroupByRowSelectorDirective;
+    exports["ɵcz"] = IgxHeadSelectorDirective;
+    exports["ɵd"] = IgxGridSelectionService;
+    exports["ɵda"] = IgxRowDragDirective;
+    exports["ɵdb"] = IgxDragIndicatorIconDirective;
+    exports["ɵdc"] = IgxRowDragGhostDirective;
+    exports["ɵdd"] = IgxRowDragModule;
+    exports["ɵde"] = IgxGridHeaderRowComponent;
+    exports["ɵdf"] = IgxGridHeaderGroupComponent;
+    exports["ɵdg"] = IgxGridHeaderComponent;
+    exports["ɵdh"] = IgxGridFilteringCellComponent;
+    exports["ɵdi"] = IgxFilteringService;
+    exports["ɵdj"] = IgxGridFilteringRowComponent;
+    exports["ɵdk"] = IgxGridGroupByAreaComponent;
+    exports["ɵdl"] = IgxGroupByAreaDirective;
+    exports["ɵdm"] = IgxGroupByMetaPipe;
+    exports["ɵdn"] = IgxTemplateOutletDirective;
+    exports["ɵdo"] = IgxTemplateOutletModule;
+    exports["ɵdp"] = IgxRowEditTemplateDirective;
+    exports["ɵdq"] = IgxRowEditTextDirective;
+    exports["ɵdr"] = IgxRowAddTextDirective;
+    exports["ɵds"] = IgxRowEditActionsDirective;
+    exports["ɵdt"] = IgxRowEditTabStopDirective;
+    exports["ɵdu"] = IgxSummaryRowComponent;
+    exports["ɵdv"] = IgxSummaryCellComponent;
+    exports["ɵdw"] = IgxRowDirective;
+    exports["ɵdx"] = IgxGridNavigationService;
+    exports["ɵdy"] = IgxGridSummaryService;
+    exports["ɵdz"] = ConnectedPositioningStrategy;
+    exports["ɵea"] = IgxGridGroupByRowComponent;
+    exports["ɵeb"] = IgxTreeGridSelectionService;
+    exports["ɵec"] = IgxTreeGridGroupByAreaComponent;
+    exports["ɵed"] = IgxRowLoadingIndicatorTemplateDirective;
+    exports["ɵee"] = IgxHierarchicalGridNavigationService;
+    exports["ɵef"] = IgxChildGridRowComponent;
+    exports["ɵeg"] = IgxGridCellComponent;
+    exports["ɵeh"] = IgxGridFooterComponent;
+    exports["ɵei"] = IgxAdvancedFilteringDialogComponent;
+    exports["ɵej"] = IgxColumnHidingDirective;
+    exports["ɵek"] = IgxColumnPinningDirective;
+    exports["ɵel"] = IgxGridSharedModules;
+    exports["ɵem"] = IgxProcessBarTextTemplateDirective;
+    exports["ɵen"] = IgxProgressBarGradientDirective;
+    exports["ɵeo"] = DIR_DOCUMENT_FACTORY;
+    exports["ɵep"] = DIR_DOCUMENT;
+    exports["ɵeq"] = IgxDirectionality;
+    exports["ɵer"] = IgxSelectItemNavigationDirective;
+    exports["ɵes"] = IGX_TIME_PICKER_COMPONENT;
+    exports["ɵeu"] = IgxItemListDirective;
+    exports["ɵev"] = IgxTimeItemDirective;
+    exports["ɵew"] = IgxTimePickerTemplateDirective;
+    exports["ɵex"] = IgxTimePickerActionsDirective;
+    exports["ɵey"] = TimeFormatPipe;
+    exports["ɵez"] = TimeItemPipe;
+    exports["ɵf"] = IGX_EXPANSION_PANEL_COMPONENT;
+    exports["ɵfa"] = IgxGridPipesModule;
+    exports["ɵfb"] = IgxGridCellStyleClassesPipe;
+    exports["ɵfc"] = IgxGridCellStylesPipe;
+    exports["ɵfd"] = IgxGridRowClassesPipe;
+    exports["ɵfe"] = IgxGridRowStylesPipe;
+    exports["ɵff"] = IgxGridNotGroupedPipe;
+    exports["ɵfg"] = IgxGridTopLevelColumns;
+    exports["ɵfh"] = IgxGridFilterConditionPipe;
+    exports["ɵfi"] = IgxGridTransactionPipe;
+    exports["ɵfj"] = IgxGridPaginatorOptionsPipe;
+    exports["ɵfk"] = IgxHasVisibleColumnsPipe;
+    exports["ɵfl"] = IgxGridRowPinningPipe;
+    exports["ɵfm"] = IgxColumnActionEnabledPipe;
+    exports["ɵfn"] = IgxFilterActionColumnsPipe;
+    exports["ɵfo"] = IgxSortActionColumnsPipe;
+    exports["ɵfp"] = IgxGridDataMapperPipe;
+    exports["ɵfq"] = IgxStringReplacePipe;
+    exports["ɵfr"] = IgxGridTransactionStatePipe;
+    exports["ɵfs"] = IgxColumnFormatterPipe;
+    exports["ɵft"] = IgxSummaryFormatterPipe;
+    exports["ɵfu"] = IgxGridAddRowPipe;
+    exports["ɵfv"] = IgxHeaderGroupWidthPipe;
+    exports["ɵfw"] = IgxHeaderGroupStylePipe;
+    exports["ɵfx"] = IgxGridColumnModule;
+    exports["ɵfy"] = IgxGridHeadersModule;
+    exports["ɵfz"] = SortingIndexPipe;
+    exports["ɵg"] = IGX_TREE_COMPONENT;
+    exports["ɵga"] = IgxGridFilteringModule;
+    exports["ɵgb"] = IgxColumnMovingModule;
+    exports["ɵgc"] = IgxColumnMovingDropDirective;
+    exports["ɵgd"] = IgxColumnMovingDragDirective;
+    exports["ɵge"] = IgxGridResizingModule;
+    exports["ɵgf"] = IgxResizeHandleDirective;
+    exports["ɵgg"] = IgxGridExcelStyleFilteringModule;
+    exports["ɵgh"] = IgxGridSelectionModule;
+    exports["ɵgi"] = IgxGridDragSelectDirective;
+    exports["ɵgj"] = IgxGridSummaryModule;
+    exports["ɵgk"] = IgxSummaryDataPipe;
+    exports["ɵgl"] = IgxGridToolbarModule;
+    exports["ɵgm"] = BaseToolbarDirective;
+    exports["ɵgn"] = BaseToolbarColumnActionsDirective;
+    exports["ɵgo"] = IgxGridRowComponent;
+    exports["ɵgp"] = IgxGridSortingPipe;
+    exports["ɵgq"] = IgxGridGroupingPipe;
+    exports["ɵgr"] = IgxGridPagingPipe;
+    exports["ɵgs"] = IgxGridFilteringPipe;
+    exports["ɵgt"] = IgxGridSummaryPipe;
+    exports["ɵgu"] = IgxGridDetailsPipe;
+    exports["ɵgv"] = IgxGridExpandableCellComponent;
+    exports["ɵgw"] = IgxTreeGridRowComponent;
+    exports["ɵgx"] = IgxTreeGridCellComponent;
+    exports["ɵgy"] = IgxTreeGridHierarchizingPipe;
+    exports["ɵgz"] = IgxTreeGridFlatteningPipe;
+    exports["ɵh"] = IGX_TREE_NODE_COMPONENT;
+    exports["ɵha"] = IgxTreeGridSortingPipe;
+    exports["ɵhb"] = IgxTreeGridPagingPipe;
+    exports["ɵhc"] = IgxTreeGridTransactionPipe;
+    exports["ɵhd"] = IgxTreeGridNormalizeRecordsPipe;
+    exports["ɵhe"] = IgxTreeGridAddRowPipe;
+    exports["ɵhf"] = IgxTreeGridFilteringPipe;
+    exports["ɵhg"] = IgxTreeGridSummaryPipe;
+    exports["ɵhh"] = IgxHierarchicalRowComponent;
+    exports["ɵhi"] = IgxHierarchicalGridCellComponent;
+    exports["ɵhj"] = IgxSliderThumbComponent;
+    exports["ɵhk"] = IgxThumbLabelComponent;
+    exports["ɵhl"] = IgxTicksComponent;
+    exports["ɵhm"] = IgxTickLabelsPipe;
+    exports["ɵhn"] = IgxTabsBase;
+    exports["ɵho"] = IgxTabHeaderBase;
+    exports["ɵhp"] = IgxTabContentBase;
+    exports["ɵhq"] = IgxSplitBarComponent;
+    exports["ɵhr"] = IgxTreeService;
+    exports["ɵhs"] = IgxTreeSelectionService;
+    exports["ɵht"] = IgxTreeNavigationService;
+    exports["ɵi"] = PlatformUtil;
+    exports["ɵl"] = IgxInputGroupBase;
+    exports["ɵm"] = IgxSelectionAPIService;
+    exports["ɵn"] = IgxForOfSyncService;
+    exports["ɵo"] = IgxForOfScrollSyncService;
+    exports["ɵp"] = DisplayContainerComponent;
+    exports["ɵq"] = IgxScrollInertiaDirective;
+    exports["ɵr"] = IgxScrollInertiaModule;
+    exports["ɵs"] = VirtualHelperComponent;
+    exports["ɵt"] = VirtualHelperBaseDirective;
+    exports["ɵu"] = HVirtualHelperComponent;
+    exports["ɵv"] = MaskParsingService;
+    exports["ɵw"] = isHierarchyMatch;
+    exports["ɵx"] = getHierarchy;
+    exports["ɵy"] = IgxGridActionButtonComponent;
+    exports["ɵz"] = ToggleAnimationPlayer;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=igniteui-angular.umd.js.map