igniteui-angular 12.3.0-alpha.0 → 12.3.2

package/fesm2015/igniteui-angular.js

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/animations';
 import { style, animate, animation, keyframes, AnimationBuilder, useAnimation, trigger, transition } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, HostListener, NgModule, Inject, PLATFORM_ID, SimpleChange, InjectionToken, EventEmitter, Optional, Output, ElementRef, Renderer2, NgZone, Component, ViewChild, HostBinding, forwardRef, ChangeDetectorRef, ViewContainerRef, TemplateRef, IterableDiffers, ComponentFactoryResolver, QueryList, ViewChildren, ChangeDetectionStrategy, ContentChild, ContentChildren, ApplicationRef, Injector, isDevMode, Self, SecurityContext, Pipe, LOCALE_ID, Host, NgModuleRef, inject, CUSTOM_ELEMENTS_SCHEMA, SkipSelf } from '@angular/core';
+import { Injectable, Directive, Input, HostListener, NgModule, isDevMode, Inject, PLATFORM_ID, SimpleChange, InjectionToken, EventEmitter, Optional, Output, ElementRef, Renderer2, NgZone, Component, ViewChild, HostBinding, forwardRef, ChangeDetectorRef, ViewContainerRef, TemplateRef, IterableDiffers, ComponentFactoryResolver, QueryList, ViewChildren, ChangeDetectionStrategy, ContentChild, ContentChildren, ApplicationRef, Injector, Self, SecurityContext, Pipe, LOCALE_ID, Host, NgModuleRef, inject, CUSTOM_ELEMENTS_SCHEMA, SkipSelf } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, NgModel, FormControlName, FormsModule, NgControl, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule, DOCUMENT, DatePipe, formatDate, FormatWidth, getLocaleDateFormat, getLocaleCurrencyCode, DecimalPipe, CurrencyPipe, PercentPipe, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol } from '@angular/common';
@@ -892,7 +892,7 @@ const run = (id) => {
         fn();
     }
 };
-const ɵ0$5 = run;
+const ɵ0$4 = run;
 const listener = (event) => run(event.data);
 const ɵ1$1 = listener;
 // Use function instead of arrow function to workaround an issue in codesandbox
@@ -920,6 +920,15 @@ function clearImmediate(id) {
     delete queue[id];
 }
 
+/**
+ * @hidden
+ */
+const showMessage = (message, isMessageShown) => {
+    if (!isMessageShown && isDevMode()) {
+        console.warn(message);
+    }
+    return true;
+};
 const mkenum = (x) => x;
 /**
  * Returns the ResizeObserver type or the polyfilled version if not available.
@@ -1702,8 +1711,17 @@ class IgxSorting {
                     fullResult.data.push(groupItem);
                 }
                 if (expanded) {
-                    metadata.push(...fullResult.metadata.slice(fullResult.metadata.length - group.length));
-                    result.push(...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.
+                    let 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;
@@ -8198,7 +8216,7 @@ IgxRowDirective.propDecorators = {
 };
 
 const clear = (el) => el === 0 || Boolean(el);
-const ɵ0$4 = clear;
+const ɵ0$3 = clear;
 const first = (arr) => arr[0];
 const ɵ1 = first;
 const last = (arr) => arr[arr.length - 1];
@@ -16382,105 +16400,6 @@ IgxSelectionAPIService.decorators = [
             },] }
 ];
 
-/**
- * @hidden
- */
-const DeprecateClass = (message) => {
-    let isMessageShown = false;
-    return (originalClass) => class extends originalClass {
-        constructor(...args) {
-            const target = originalClass;
-            const targetName = typeof target === 'function' ? target.name : target.constructor.name;
-            isMessageShown = showMessage(`${targetName}: ${message}`, isMessageShown);
-            super(...args);
-        }
-    };
-};
-/**
- * @hidden
- */
-function DeprecateMethod(message) {
-    let isMessageShown = false;
-    return function (target, key, descriptor) {
-        if (descriptor && descriptor.value) {
-            const originalMethod = descriptor.value;
-            descriptor.value = function () {
-                const targetName = typeof target === 'function' ? target.name : target.constructor.name;
-                isMessageShown = showMessage(`${targetName}.${key}: ${message}`, isMessageShown);
-                const args = [];
-                for (const x of arguments) {
-                    args.push(x);
-                }
-                return originalMethod.call(this, ...args);
-            };
-            return descriptor;
-        }
-    };
-}
-/**
- * @hidden
- */
-function DeprecateProperty(message) {
-    return function (target, key) {
-        let isMessageShown = false;
-        const messageToDisplay = `${target.constructor.name}.${key}: ${message}`;
-        // if the target already has the property defined
-        const originalDescriptor = Object.getOwnPropertyDescriptor(target, key);
-        if (originalDescriptor) {
-            const getter = originalDescriptor.get;
-            const setter = originalDescriptor.set;
-            if (getter) {
-                originalDescriptor.get = function () {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    return getter.call(this);
-                };
-            }
-            if (setter) {
-                originalDescriptor.set = function (value) {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    setter.call(this, value);
-                };
-            }
-            return originalDescriptor;
-        }
-        // the target doesn't contain a descriptor for that property, so create one
-        // use backing field to set/get the value of the property to ensure there won't be infinite recursive calls
-        const newKey = generateUniqueKey(target, key);
-        Object.defineProperty(target, key, {
-            configurable: true,
-            enumerable: true,
-            set(value) {
-                isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                this[newKey] = value;
-            },
-            get() {
-                isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                return this[newKey];
-            }
-        });
-    };
-}
-/**
- * @hidden
- */
-const generateUniqueKey = (target, key) => {
-    let newKey = '_' + key;
-    while (target.hasOwnProperty(newKey)) {
-        newKey = '_' + newKey;
-    }
-    return newKey;
-};
-const ɵ0$3 = generateUniqueKey;
-/**
- * @hidden
- */
-const showMessage = (message, isMessageShown) => {
-    if (!isMessageShown && isDevMode()) {
-        console.warn(message);
-    }
-    return true;
-};
-
 let NEXT_ID$t = 0;
 /**
  * The `<igx-drop-down-item>` is a container intended for row items in
@@ -16550,7 +16469,6 @@ IgxDropDownGroupComponent.propDecorators = {
 };
 
 let NEXT_ID$s = 0;
-let warningShown = false;
 /**
  * An abstract class defining a drop-down item:
  * With properties / styles for selection, highlight, height
@@ -16615,8 +16533,6 @@ class IgxDropDownItemBaseDirective {
      */
     get index() {
         if (this._index === null) {
-            warningShown = showMessage('IgxDropDownItemBaseDirective: Automatic index is deprecated.' +
-                'Bind in the template instead using `<igx-drop-down-item [index]="i"` instead.`', warningShown);
             return this.itemIndex;
         }
         return this._index;
@@ -18719,16 +18635,20 @@ IgxButtonModule.decorators = [
  * ```
  */
 class IgxIconService {
-    constructor(_sanitizer, _httpClient, _document) {
+    constructor(_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 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();
+        }
     }
     /**
      *  Returns the default font-family.
@@ -18848,8 +18768,9 @@ class IgxIconService {
      * @hidden
      */
     cacheSvgIcon(name, value, family = this._family, stripMeta) {
+        var _a;
         family = !!family ? family : this._family;
-        if (name && value) {
+        if (((_a = this._platformUtil) === null || _a === void 0 ? void 0 : _a.isBrowser) && name && value) {
             const doc = this._domParser.parseFromString(value, 'image/svg+xml');
             const svg = doc.querySelector('svg');
             if (!this._cachedSvgIcons.has(family)) {
@@ -18874,7 +18795,7 @@ class IgxIconService {
         }
     }
 }
-IgxIconService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IgxIconService_Factory() { return new IgxIconService(i0.ɵɵinject(i1$1.DomSanitizer, 8), i0.ɵɵinject(i2$1.HttpClient, 8), i0.ɵɵinject(i2.DOCUMENT, 8)); }, token: IgxIconService, providedIn: "root" });
+IgxIconService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IgxIconService_Factory() { return new IgxIconService(i0.ɵɵinject(i1$1.DomSanitizer, 8), i0.ɵɵinject(i2$1.HttpClient, 8), i0.ɵɵinject(PlatformUtil, 8), i0.ɵɵinject(i2.DOCUMENT, 8)); }, token: IgxIconService, providedIn: "root" });
 IgxIconService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
@@ -18883,6 +18804,7 @@ IgxIconService.decorators = [
 IgxIconService.ctorParameters = () => [
     { type: DomSanitizer, decorators: [{ type: Optional }] },
     { type: HttpClient, decorators: [{ type: Optional }] },
+    { type: PlatformUtil, decorators: [{ type: Optional }] },
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] }
 ];
 
@@ -19115,9 +19037,6 @@ IgxIconComponent.propDecorators = {
     getInactive: [{ type: HostBinding, args: ['class.igx-icon--inactive',] }],
     getColor: [{ type: HostBinding, args: ['style.color',] }]
 };
-__decorate([
-    DeprecateProperty('`color` is deprecated.')
-], IgxIconComponent.prototype, "color", void 0);
 
 /**
  * @hidden
@@ -19393,6 +19312,10 @@ const TreeResourceStringsEN = {
     igx_collapse: 'Collapse',
 };
 
+const ActionStripResourceStringsEN = {
+    igx_action_strip_button_more_title: 'More'
+};
+
 /**
  * @hidden
  * IF YOU EDIT THIS OBJECT, DO NOT FORGET TO UPDATE
@@ -19416,7 +19339,8 @@ const CurrentResourceStrings = {
     CarouselResStrings: cloneValue(CarouselResourceStringsEN),
     ListResStrings: cloneValue(ListResourceStringsEN),
     InputResStrings: cloneValue(InputResourceStringsEN),
-    TreeResStrings: cloneValue(TreeResourceStringsEN)
+    TreeResStrings: cloneValue(TreeResourceStringsEN),
+    ActionStripResourceStrings: cloneValue(ActionStripResourceStringsEN)
 };
 const updateResourceStrings = (currentStrings, newStrings) => {
     for (const key of Object.keys(newStrings)) {
@@ -19439,7 +19363,7 @@ const changei18n = (resourceStrings) => {
 /**
  * Returns current resource strings for all components
  */
-const getCurrentResourceStrings = () => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, CurrentResourceStrings.CalendarResStrings), CurrentResourceStrings.CarouselResStrings), CurrentResourceStrings.ChipResStrings), CurrentResourceStrings.DatePickerResourceStrings), CurrentResourceStrings.DateRangePickerResStrings), CurrentResourceStrings.GridResStrings), CurrentResourceStrings.InputResStrings), CurrentResourceStrings.ListResStrings), CurrentResourceStrings.PaginatorResStrings), CurrentResourceStrings.TimePickerResStrings), CurrentResourceStrings.TreeResStrings));
+const getCurrentResourceStrings = () => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, CurrentResourceStrings.CalendarResStrings), CurrentResourceStrings.CarouselResStrings), CurrentResourceStrings.ChipResStrings), CurrentResourceStrings.DatePickerResourceStrings), CurrentResourceStrings.DateRangePickerResStrings), CurrentResourceStrings.GridResStrings), CurrentResourceStrings.InputResStrings), CurrentResourceStrings.ListResStrings), CurrentResourceStrings.PaginatorResStrings), CurrentResourceStrings.TimePickerResStrings), CurrentResourceStrings.TreeResStrings), CurrentResourceStrings.ActionStripResourceStrings));
 
 const IgxInputGroupTheme = mkenum({
     Material: 'material',
@@ -23283,10 +23207,10 @@ class IgxRadioGroupDirective {
         this._setRadioButtonsRequired();
     }
     /**
-     * An @Input property that allows you to disable the radio group. By default it's false.
-     *
      * @deprecated in version 12.2.0
      *
+     * An input property that allows you to disable the radio group. By default it's false.
+     *
      * @example
      *  ```html
      * <igx-radio-group disabled></igx-radio-group>
@@ -23300,10 +23224,10 @@ class IgxRadioGroupDirective {
         this.setDisabledState(value);
     }
     /**
-     * Sets/gets the position of the `label` in the child radio buttons.
-     *
      * @deprecated in version 12.2.0
      *
+     * Sets/gets the position of the `label` in the child radio buttons.
+     *
      * @remarks
      * If not set, `labelPosition` will have value `"after"`.
      *
@@ -23553,12 +23477,6 @@ IgxRadioGroupDirective.propDecorators = {
     vertical: [{ type: HostBinding, args: ['class.igx-radio-group--vertical',] }],
     alignment: [{ type: Input }]
 };
-__decorate([
-    DeprecateProperty('`disabled` is deprecated.')
-], IgxRadioGroupDirective.prototype, "disabled", null);
-__decorate([
-    DeprecateProperty('`labelPosition` is deprecated.')
-], IgxRadioGroupDirective.prototype, "labelPosition", null);
 /**
  * @hidden
  */
@@ -25782,7 +25700,7 @@ class IgxGridActionButtonComponent {
 IgxGridActionButtonComponent.decorators = [
     { type: Component, args: [{
                 selector: 'igx-grid-action-button',
-                template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button igxButton=\"icon\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]='containerClass'>\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>"
+                template: "<ng-container *ngIf=\"!asMenuItem\">\n    <button [title]=\"labelText\" igxButton=\"icon\" igxRipple (click)=\"handleClick($event)\" (mousedown)=\"preventEvent($event)\">\n        <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n        <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n    </button>\n</ng-container>\n\n<ng-template #menuItemTemplate>\n    <ng-container *ngIf=\"asMenuItem\">\n        <div #container [className]='containerClass'>\n            <igx-icon *ngIf=\"iconSet\" [family]=\"iconSet\" [name]=\"iconName\">{{iconName}}</igx-icon>\n            <igx-icon *ngIf=\"!iconSet\" >{{iconName}}</igx-icon>\n            <label igxLabel>{{labelText}}</label>\n        </div>\n    </ng-container>\n</ng-template>"
             },] }
 ];
 IgxGridActionButtonComponent.propDecorators = {
@@ -25994,8 +25912,8 @@ class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective {
      * @internal
      */
     registerIcons() {
-        this.iconService.addSvgIconFromText(addRow.name, addRow.value, 'imx-icons');
-        this.iconService.addSvgIconFromText(addChild.name, addChild.value, 'imx-icons');
+        this.iconService.addSvgIconFromText(addRow.name, addRow.value, 'imx-icons', true);
+        this.iconService.addSvgIconFromText(addChild.name, addChild.value, 'imx-icons', true);
     }
 }
 IgxGridEditingActionsComponent.decorators = [
@@ -26121,10 +26039,10 @@ class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective {
         const context = this.strip.context;
         const grid = context.grid;
         if (grid) {
-            this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons');
-            this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons');
-            this.iconService.addSvgIconFromText(jumpDown.name, jumpDown.value, 'imx-icons');
-            this.iconService.addSvgIconFromText(jumpUp.name, jumpDown.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons', true);
+            this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons', true);
+            this.iconService.addSvgIconFromText(jumpDown.name, jumpDown.value, 'imx-icons', true);
+            this.iconService.addSvgIconFromText(jumpUp.name, jumpDown.value, 'imx-icons', true);
         }
     }
 }
@@ -26204,6 +26122,21 @@ class IgxActionStripComponent extends DisplayDensityBase {
     get hidden() {
         return this._hidden;
     }
+    /**
+     * Gets/Sets the resource strings.
+     *
+     * @remarks
+     * By default it uses EN resources.
+     */
+    set resourceStrings(value) {
+        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+    }
+    get resourceStrings() {
+        if (!this._resourceStrings) {
+            this._resourceStrings = CurrentResourceStrings.ActionStripResourceStrings;
+        }
+        return this._resourceStrings;
+    }
     /**
      * Getter for the 'display' property of the current `IgxActionStrip`
      *
@@ -26333,7 +26266,7 @@ class IgxActionStripComponent extends DisplayDensityBase {
 IgxActionStripComponent.decorators = [
     { type: Component, args: [{
                 selector: 'igx-action-strip',
-                template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    <ng-container *ngIf=\"menuItems.length > 0\">\n        <button\n            igxButton=\"icon\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon>more_vert</igx-icon>\n        </button>\n    </ng-container>\n    <igx-drop-down #dropdown [displayDensity]=\"displayDensity\">\n        <igx-drop-down-item\n            *ngFor=\"let item of menuItems\"\n            class=\"igx-action-strip__menu-item\"\n        >\n            <div class=\"igx-drop-down__item-template\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        item.templateRef;\n                        context: { $implicit: item }\n                    \"\n                ></ng-container>\n            </div>\n        </igx-drop-down-item>\n    </igx-drop-down>\n</div>\n"
+                template: "<div class=\"igx-action-strip__actions\">\n    <ng-content #content></ng-content>\n    <ng-container *ngIf=\"menuItems.length > 0\">\n        <button\n            igxButton=\"icon\"\n            igxRipple\n            [igxToggleAction]=\"dropdown\"\n            [overlaySettings]=\"menuOverlaySettings\"\n            (click)=\"$event.stopPropagation()\"\n            [title]=\"resourceStrings.igx_action_strip_button_more_title\"\n            [igxDropDownItemNavigation]=\"dropdown\"\n        >\n            <igx-icon>more_vert</igx-icon>\n        </button>\n    </ng-container>\n    <igx-drop-down #dropdown [displayDensity]=\"displayDensity\">\n        <igx-drop-down-item\n            *ngFor=\"let item of menuItems\"\n            class=\"igx-action-strip__menu-item\"\n        >\n            <div class=\"igx-drop-down__item-template\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        item.templateRef;\n                        context: { $implicit: item }\n                    \"\n                ></ng-container>\n            </div>\n        </igx-drop-down-item>\n    </igx-drop-down>\n</div>\n"
             },] }
 ];
 IgxActionStripComponent.ctorParameters = () => [
@@ -26348,6 +26281,7 @@ IgxActionStripComponent.propDecorators = {
     actionButtons: [{ type: ContentChildren, args: [IgxGridActionsBaseDirective,] }],
     hidden: [{ type: Input }],
     hostClass: [{ type: Input, args: ['class',] }],
+    resourceStrings: [{ type: Input }],
     menu: [{ type: ViewChild, args: ['dropdown',] }],
     display: [{ type: HostBinding, args: ['style.display',] }],
     hostClasses: [{ type: HostBinding, args: ['attr.class',] }]
@@ -27658,6 +27592,7 @@ class IgxAccordionComponent {
     /** @hidden @internal **/
     ngAfterViewInit() {
         this._expandedPanels = new Set(this._panels.filter(panel => !panel.collapsed));
+        this._expandingPanels = new Set();
         this._panels.changes.pipe(takeUntil(this._destroy$)).subscribe(() => {
             this.subToChanges();
         });
@@ -27760,6 +27695,7 @@ class IgxAccordionComponent {
         this._panels.forEach(panel => {
             panel.contentExpanded.pipe(takeUntil(this._unsubChildren$)).subscribe((args) => {
                 this._expandedPanels.add(args.owner);
+                this._expandingPanels.delete(args.owner);
                 const evArgs = Object.assign(Object.assign({}, args), { owner: this, panel: args.owner });
                 this.panelExpanded.emit(evArgs);
             });
@@ -27767,21 +27703,36 @@ class IgxAccordionComponent {
                 if (args.cancel) {
                     return;
                 }
+                const 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(p => {
                         if (!p.header.disabled) {
                             p.collapse();
                         }
                     });
-                }
-                const evArgs = Object.assign(Object.assign({}, args), { owner: this, panel: args.owner });
-                this.panelExpanding.emit(evArgs);
-                if (evArgs.cancel) {
-                    args.cancel = true;
+                    this._expandingPanels.forEach(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(takeUntil(this._unsubChildren$)).subscribe((args) => {
                 this._expandedPanels.delete(args.owner);
+                this._expandingPanels.delete(args.owner);
                 const evArgs = Object.assign(Object.assign({}, args), { owner: this, panel: args.owner });
                 this.panelCollapsed.emit(evArgs);
             });
@@ -35115,6 +35066,20 @@ class IgxComboBaseDirective extends DisplayDensityBase {
         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:
@@ -35174,6 +35139,13 @@ class IgxComboBaseDirective extends DisplayDensityBase {
          * ```
          */
         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 */
@@ -35185,15 +35157,6 @@ class IgxComboBaseDirective extends DisplayDensityBase {
          * ```
          */
         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 EventEmitter();
         /**
          * Emitted before the dropdown is opened
          *
@@ -35936,6 +35899,10 @@ class IgxComboBaseDirective extends DisplayDensityBase {
             }
         }
     }
+    /** @hidden @internal */
+    toggleCaseSensitive() {
+        this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
+    }
     /** if there is a valueKey - map the keys to data items, else - just return the keys */
     convertKeysToItems(keys) {
         if (this.comboAPI.valueKey === null) {
@@ -36005,6 +35972,7 @@ IgxComboBaseDirective.ctorParameters = () => [
     { type: Injector, decorators: [{ type: Optional }] }
 ];
 IgxComboBaseDirective.propDecorators = {
+    showSearchCaseIcon: [{ type: Input }],
     overlaySettings: [{ type: Input }],
     id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
     width: [{ type: HostBinding, args: ['style.width',] }, { type: Input }],
@@ -36017,6 +35985,7 @@ IgxComboBaseDirective.propDecorators = {
     valueKey: [{ type: Input }],
     displayKey: [{ type: Input }],
     groupKey: [{ type: Input }],
+    filterable: [{ type: Input }],
     ariaLabelledBy: [{ type: Input }, { type: HostBinding, args: ['attr.aria-labelledby',] }],
     cssClass: [{ type: HostBinding, args: ['class.igx-combo',] }],
     role: [{ type: HostBinding, args: [`attr.role`,] }],
@@ -36025,7 +35994,6 @@ IgxComboBaseDirective.propDecorators = {
     ariaOwns: [{ type: HostBinding, args: ['attr.aria-owns',] }],
     disabled: [{ type: Input }],
     type: [{ type: Input }],
-    selectionChanging: [{ type: Output }],
     opening: [{ type: Output }],
     opened: [{ type: Output }],
     closing: [{ type: Output }],
@@ -36399,20 +36367,6 @@ class IgxComboComponent extends IgxComboBaseDirective {
         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
@@ -36440,6 +36394,14 @@ class IgxComboComponent extends IgxComboBaseDirective {
          * ```
          */
         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 EventEmitter();
         /**
          * @hidden @internal
          */
@@ -36619,12 +36581,6 @@ class IgxComboComponent extends IgxComboBaseDirective {
             this.deselect([itemID], event);
         }
     }
-    /**
-     * @hidden @internal
-     */
-    toggleCaseSensitive() {
-        this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
-    }
     /** @hidden @internal */
     handleOpened() {
         this.triggerCheck();
@@ -36698,7 +36654,7 @@ class IgxComboComponent extends IgxComboBaseDirective {
 IgxComboComponent.decorators = [
     { type: 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 },
@@ -36717,10 +36673,10 @@ IgxComboComponent.ctorParameters = () => [
     { type: Injector, decorators: [{ type: Optional }] }
 ];
 IgxComboComponent.propDecorators = {
-    showSearchCaseIcon: [{ type: Input }],
     autoFocusSearch: [{ type: Input }],
     filterable: [{ type: Input }],
     searchPlaceholder: [{ type: Input }],
+    selectionChanging: [{ type: Output }],
     dropdown: [{ type: ViewChild, args: [IgxComboDropDownComponent, { static: true },] }]
 };
 /**
@@ -36798,7 +36754,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         this.selectionChanging = new EventEmitter();
         /** @hidden @internal */
         this.composing = false;
-        this._updateInput = false;
+        this._updateInput = true;
         this.findMatch = (element) => {
             const value = this.displayKey ? element[this.displayKey] : element;
             return value.toString().toLowerCase().includes(this.searchValue.trim().toLowerCase());
@@ -36814,6 +36770,23 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         this._filteredData = this.groupKey ? (val || []).filter((e) => e.isHeader !== true) : val;
         this.checkMatch();
     }
+    /** @hidden @internal */
+    onArrowDown(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
      *
@@ -36829,18 +36802,15 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         }
     }
     /**
-     * Deselect a defined item
+     * Deselect the currently selected item
      *
      * @param item the items to be deselected
      * ```typescript
      * this.combo.deselect("New York");
      * ```
      */
-    deselect(item) {
-        if (item !== null && item !== undefined) {
-            const newSelection = this.selectionService.delete_items(this.id, item instanceof Array ? item : [item]);
-            this.setSelection(newSelection);
-        }
+    deselect() {
+        this.clearSelection();
     }
     /** @hidden @internal */
     writeValue(value) {
@@ -36851,33 +36821,51 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
     }
     /** @hidden @internal */
     ngAfterViewInit() {
+        this.virtDir.contentSizeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.selection.length > 0) {
+                const index = this.virtDir.igxForOf.findIndex(e => {
+                    let 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(takeUntil(this.destroy$)).subscribe(() => {
             if (this.composing) {
                 this.comboInput.focus();
             }
         });
-        this.dropdown.closed.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            this.composing = false;
-        });
-        this.dropdown.closing.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            const selection = this.selectionService.first_item(this.id);
-            this.comboInput.value = selection !== undefined && selection !== null ? selection : '';
-        });
-        this.dropdown.opening.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            if (!this.comboInput.value.length) {
-                this.clearSelection();
+        this.dropdown.closing.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+            if (this.getEditElement() && !args.event) {
+                this.comboInput.focus();
+            }
+            else {
+                this.clearOnBlur();
+                this._onTouchedCallback();
             }
         });
         super.ngAfterViewInit();
     }
     /** @hidden @internal */
     handleInputChange(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.handleInputChange(event);
+        this.composing = true;
     }
     /** @hidden @internal */
     handleKeyDown(event) {
@@ -36886,10 +36874,12 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             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
@@ -36897,11 +36887,12 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             this._updateInput = false;
             this.clearSelection();
         }
+        if (!this.collapsed && event.key === this.platformUtil.KEYMAP.TAB) {
+            this.close();
+            this.clearOnBlur();
+        }
+        this.composing = false;
         super.handleKeyDown(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 */
     handleKeyUp(event) {
@@ -36914,6 +36905,29 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         }
     }
     /** @hidden @internal */
+    handleItemKeyDown(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 */
+    handleItemClick() {
+        this.close();
+        this.comboInput.focus();
+    }
+    /** @hidden @internal */
+    onBlur() {
+        if (this.collapsed) {
+            this.clearOnBlur();
+        }
+        super.onBlur();
+    }
+    /** @hidden @internal */
     getEditElement() {
         return this.comboInput.nativeElement;
     }
@@ -36924,7 +36938,8 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         }
         this.clearSelection(true);
         if (this.collapsed) {
-            this.getEditElement().focus();
+            this.open();
+            this.dropdown.navigateFirst();
         }
         else {
             this.focusSearchInput(true);
@@ -36932,6 +36947,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         event.stopPropagation();
         this.comboInput.value = this.filterValue = this.searchValue = '';
         this.dropdown.focusedItem = null;
+        this.composing = false;
         this.comboInput.focus();
     }
     /** @hidden @internal */
@@ -36941,6 +36957,19 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         this.opened.emit({ owner: this });
     }
     /** @hidden @internal */
+    handleClosing(e) {
+        const 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 */
     focusSearchInput(opening) {
         if (opening) {
             this.dropdownContainer.nativeElement.focus();
@@ -36950,6 +36979,13 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
             this.toggle();
         }
     }
+    /** @hidden @internal */
+    onClick(event) {
+        super.onClick(event);
+        if (this.comboInput.value.length === 0) {
+            this.virtDir.scrollTo(0);
+        }
+    }
     setSelection(newSelection) {
         const newSelectionAsArray = newSelection ? Array.from(newSelection) : [];
         const oldSelectionAsArray = Array.from(this.selectionService.get(this.id) || []);
@@ -36963,15 +36999,16 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         };
         this.selectionChanging.emit(args);
         if (!args.cancel) {
-            const argsSelection = args.newSelection !== undefined
+            let 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;
@@ -36981,9 +37018,11 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         if (this.isRemote) {
             return this.getRemoteSelection(newSelection, oldSelection);
         }
-        return this.displayKey !== null && this.displayKey !== undefined
-            ? this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0]
-            : newSelection[0];
+        if (this.displayKey !== null && this.displayKey !== undefined
+            && newSelection.length > 0) {
+            return this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0];
+        }
+        return newSelection[0] || '';
     }
     clearSelection(ignoreFilter) {
         let newSelection = this.selectionService.get_empty();
@@ -36992,11 +37031,19 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         }
         this.setSelection(newSelection);
     }
+    clearOnBlur() {
+        const filtered = this.filteredData.find(this.findMatch);
+        if ((filtered === undefined || filtered === null)) {
+            this.close();
+            this.clearSelection();
+            this.searchValue = '';
+        }
+    }
 }
 IgxSimpleComboComponent.decorators = [
     { type: 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 },
@@ -37017,7 +37064,10 @@ IgxSimpleComboComponent.ctorParameters = () => [
 ];
 IgxSimpleComboComponent.propDecorators = {
     dropdown: [{ type: ViewChild, args: [IgxComboDropDownComponent, { static: true },] }],
-    selectionChanging: [{ type: Output }]
+    addItem: [{ type: ViewChild, args: [IgxComboAddItemComponent,] }],
+    selectionChanging: [{ type: Output }],
+    textSelection: [{ type: ViewChild, args: [IgxTextSelectionDirective, { static: true },] }],
+    onArrowDown: [{ type: HostListener, args: ['keydown.ArrowDown', ['$event'],] }, { type: HostListener, args: ['keydown.Alt.ArrowDown', ['$event'],] }]
 };
 class IgxSimpleComboModule {
 }
@@ -39411,7 +39461,7 @@ IgxGridExcelStyleFilteringComponent.decorators = [
     { type: Component, args: [{
                 changeDetection: 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 = () => [
@@ -40965,7 +41015,7 @@ IgxExcelStyleDateExpressionComponent.decorators = [
     { type: 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 = {
@@ -47201,15 +47251,23 @@ class IgxGridFilteringRowComponent {
     set value(val) {
         if (!val && val !== 0) {
             this.expression.searchVal = null;
-            this.showHideArrowButtons();
+            const index = this.expressionsList.findIndex(item => item.expression === this.expression);
+            if (index === 0 && this.expressionsList.length === 1) {
+                this.clearFiltering();
+                return;
+            }
         }
         else {
+            const oldValue = this.expression.searchVal;
+            if (isEqual(oldValue, val)) {
+                return;
+            }
             this.expression.searchVal = DataUtil.parseValue(this.column.dataType, val);
             if (this.expressionsList.find(item => item.expression === this.expression) === undefined) {
                 this.addExpression(true);
             }
+            this.filter();
         }
-        this.filter();
     }
     get displayDensity() {
         return this.column.grid.displayDensity === DisplayDensity.comfortable ? DisplayDensity.cosy : this.column.grid.displayDensity;
@@ -48640,7 +48698,7 @@ IgxGridHeaderRowComponent.decorators = [
     { type: Component, args: [{
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 selector: 'igx-grid-header-row',
-                template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n"
+                template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n"
             },] }
 ];
 IgxGridHeaderRowComponent.ctorParameters = () => [
@@ -48820,9 +48878,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.gridScroll = new EventEmitter();
         /**
+         * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+         *
          * Emitted after the current page is changed.
          *
-         * @deprecated in version 12.1.0
          * @example
          * ```html
          * <igx-grid (pageChange)="onPageChange($event)"></igx-grid>
@@ -48835,10 +48894,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.pageChange = new EventEmitter();
         /**
+         * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+         *
          * Emitted when `perPage` property value of the grid is changed.
          *
-         * @deprecated in version 12.1.0
-         * @example
          * ```html
          * <igx-grid #grid (perPageChange)="onPerPageChange($event)" [autoGenerate]="true"></igx-grid>
          * ```
@@ -48855,6 +48914,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.class = '';
         /**
+         * @deprecated in version 12.2.0. We suggest using `rowClasses` property instead
+         *
          * Gets/Sets the styling classes applied to all even `IgxGridRowComponent`s in the grid.
          *
          * @example
@@ -48864,6 +48925,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.evenRowCSS = 'igx-grid__tr--even';
         /**
+         * @deprecated in version 12.2.0. We suggest using `rowClasses` property instead
+         *
          * Gets/Sets the styling classes applied to all odd `IgxGridRowComponent`s in the grid.
          *
          * @example
@@ -49118,9 +49181,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.filteringDone = new EventEmitter();
         /**
+         * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+         *
          * Emitted after paging is performed.
          *
-         * @deprecated in version 12.1.x
          * @remarks
          * Returns an object consisting of the previous and next pages.
          * @example
@@ -49773,9 +49837,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges(true);
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+     *
      * Gets/Sets whether the paging feature is enabled.
      *
-     * @deprecated in version 12.1.x
      * @remarks
      * The default state is disabled (false).
      * @example
@@ -49793,9 +49858,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.pipeTrigger++;
     }
     /**
+     * @deprecated in version 12.1.0. Use `page` property form `paginator` component instead
+     *
      * Gets/Sets the current page index.
      *
-     * @deprecated in version 12.1.x
      * @example
      * ```html
      * <igx-grid #grid [data]="Data" [autoGenerate]="true">
@@ -49815,9 +49881,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
     }
     /**
+     * @deprecated in version 12.1.0. Use `perPage` property from `paginator` component instead
+     *
      * Gets/Sets the number of visible items per page.
      *
-     * @deprecated in version 12.1.x
      * @remarks
      * The default is 15.
      * @example
@@ -49838,9 +49905,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
     }
     /**
+     * @deprecated in version 10.1.0
+     *
      * Gets/Sets whether the column hiding UI is enabled.
      *
-     * @deprecated
      * @remarks
      * By default it is disabled (false). In order for the UI to work, you need to enable the toolbar as shown in the example below.
      * @example
@@ -50038,9 +50106,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this._emptyFilteredGridMessage || this.resourceStrings.igx_grid_emptyFilteredGrid_message;
     }
     /**
-     * Gets/Sets the title to be displayed in the built-in column hiding UI.
+     * @deprecated in version 10.1.0
      *
-     * @deprecated
+     * Gets/Sets the title to be displayed in the built-in column hiding UI.
      *
      * @example
      * ```html
@@ -50078,9 +50146,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this._pinning = value;
     }
     /**
-     * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
+     * @deprecated in version 10.1.0
      *
-     * @deprecated
+     * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
      *
      * @example
      * ```html
@@ -50095,9 +50163,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets the title to be displayed in the UI of the column pinning.
+     * @deprecated in version 10.1.0
      *
-     * @deprecated
+     * Gets/Sets the title to be displayed in the UI of the column pinning.
      *
      * @example
      * ```html
@@ -50544,9 +50612,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this.pinnedColumns.filter(col => !col.columnLayout).length;
     }
     /**
-     * Gets/Sets the text to be displayed inside the toggle button.
+     * @deprecated in version 10.1.0
      *
-     * @deprecated
+     * Gets/Sets the text to be displayed inside the toggle button.
      *
      * @remarks
      * Used for the built-in column hiding UI of the`IgxColumnComponent`.
@@ -50555,7 +50623,6 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * <igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>
      * ```
      */
-    // @DeprecateProperty('`hiddenColumnsText` is deprecated')
     get hiddenColumnsText() {
         return this._hiddenColumnsText;
     }
@@ -50564,9 +50631,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets the text to be displayed inside the toggle button.
+     * @deprecated in version 10.1.0
      *
-     * @deprecated
+     * Gets/Sets the text to be displayed inside the toggle button.
      *
      * @remarks
      * Used for the built-in column pinning UI of the`IgxColumnComponent`.
@@ -50636,9 +50703,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this._currencyPositionLeft = i < 1;
     }
     /**
-     * Gets/Sets whether the toolbar is shown.
+     * @deprecated in version 11.0.0
      *
-     * @deprecated
+     * Gets/Sets whether the toolbar is shown.
      *
      * @example
      * ```html
@@ -50652,9 +50719,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this._showToolbar = newValue;
     }
     /**
-     * Gets/Sets the toolbar's title.
+     * @deprecated in version 11.0.0
      *
-     * @deprecated
+     * Gets/Sets the toolbar's title.
      *
      * @example
      * ```html
@@ -50669,9 +50736,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets whether exporting to MS Excel is enabled or disabled.
+     * @deprecated `exportExcel` is deprecated
      *
-     * @deprecated
+     * Gets/Sets whether exporting to MS Excel is enabled or disabled.
      *
      * @example
      * ```html
@@ -50686,9 +50753,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets whether the option for exporting to CSV is enabled or disabled.
+     * @deprecated `exportCsv` is deprecated
      *
-     * @deprecated
+     * Gets/Sets whether the option for exporting to CSV is enabled or disabled.
      *
      * ```html
      * <igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportCsv]="true"></igx-grid>
@@ -50702,9 +50769,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets the textual content for the main export button.
+     * @deprecated `exportText` is deprecated
      *
-     * @deprecated
+     * Gets/Sets the textual content for the main export button.
      *
      * @example
      * ```html
@@ -50719,9 +50786,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets the textual content for the MS Excel export button.
+     * @deprecated `exportExcelText` is deprecated
      *
-     * @deprecated
+     * Gets/Sets the textual content for the MS Excel export button.
      *
      * ```html
      * <igx-grid [exportExcelText]="'My Excel Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>
@@ -50735,9 +50802,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets the textual content for the CSV export button.
+     * @deprecated `exportCsvText` is deprecated
      *
-     * @deprecated
+     * Gets/Sets the textual content for the CSV export button.
      *
      * @example
      * ```html
@@ -51404,7 +51471,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.rendered$.pipe(takeUntil(this.destroy$)).subscribe(() => {
             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;
@@ -51831,9 +51898,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this._visibleColumns;
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+     *
      * Gets the total number of pages.
      *
-     * @deprecated in version 12.1.0
      * @example
      * ```typescript
      * const totalPages = this.grid.totalPages;
@@ -51844,9 +51912,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return (_a = this.paginator) === null || _a === void 0 ? void 0 : _a.totalPages;
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+     *
      * Gets if the current page is the first page.
      *
-     * @deprecated in version 12.1.0
      * @example
      * ```typescript
      * const firstPage = this.grid.isFirstPage;
@@ -51856,9 +51925,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this.paginator.isLastPage;
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+     *
      * Goes to the next page, if the grid is not already at the last page.
      *
-     * @deprecated in version 12.1.0
      * @example
      * ```typescript
      * this.grid1.nextPage();
@@ -51870,9 +51940,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         (_a = this.paginator) === null || _a === void 0 ? void 0 : _a.nextPage();
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+     *
      * Goes to the previous page, if the grid is not already at the first page.
      *
-     * @deprecated in version 12.1.0
      * @example
      * ```typescript
      * this.grid1.previousPage();
@@ -51908,9 +51979,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+     *
      * Returns if the current page is the last page.
      *
-     * @deprecated in version 12.1.0
      * @example
      * ```typescript
      * const lastPage = this.grid.isLastPage;
@@ -52007,6 +52079,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this._columnsReordered(column);
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+     *
      * Goes to the desired page index.
      *
      * @example
@@ -53196,6 +53270,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (!this.clipboardOptions.copyHeaders) {
             result = result.substring(result.indexOf('\n') + 1);
         }
+        if (Object.values(data[0]).length === 1) {
+            result = result.slice(0, -2);
+        }
         event.preventDefault();
         /* Necessary for the hiearachical case but will probably have to
            change how getSelectedData is propagated in the hiearachical grid
@@ -55018,24 +55095,9 @@ IgxGridBaseDirective.propDecorators = {
     totalRecords: [{ type: Input }],
     selectRowOnClick: [{ type: Input }]
 };
-__decorate([
-    DeprecateProperty('`pageChange` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-], IgxGridBaseDirective.prototype, "pageChange", void 0);
-__decorate([
-    DeprecateProperty('`perPageChange` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-], IgxGridBaseDirective.prototype, "perPageChange", void 0);
-__decorate([
-    DeprecateProperty('`evenRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
-], IgxGridBaseDirective.prototype, "evenRowCSS", void 0);
-__decorate([
-    DeprecateProperty('`oddRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
-], IgxGridBaseDirective.prototype, "oddRowCSS", void 0);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "primaryKey", void 0);
-__decorate([
-    DeprecateProperty('`pagingDone` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-], IgxGridBaseDirective.prototype, "pagingDone", void 0);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "filteringLogic", null);
@@ -55045,18 +55107,6 @@ __decorate([
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "advancedFilteringExpressionsTree", null);
-__decorate([
-    DeprecateProperty('`paging` is deprecated')
-], IgxGridBaseDirective.prototype, "paging", null);
-__decorate([
-    DeprecateProperty('`page` is deprecated. Use `page` property form `paginator` component instead.')
-], IgxGridBaseDirective.prototype, "page", null);
-__decorate([
-    DeprecateProperty('`perPage` is deprecated. Use `perPage` property from `paginator` component instead.')
-], IgxGridBaseDirective.prototype, "perPage", null);
-__decorate([
-    DeprecateProperty('`columnHiding` is deprecated.')
-], IgxGridBaseDirective.prototype, "columnHiding", null);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "hideRowSelectors", null);
@@ -55078,42 +55128,9 @@ __decorate([
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "isLoading", null);
-__decorate([
-    DeprecateProperty('`columnHidingTitle` is deprecated')
-], IgxGridBaseDirective.prototype, "columnHidingTitle", null);
-__decorate([
-    DeprecateProperty('`columnPinning` is deprecated')
-], IgxGridBaseDirective.prototype, "columnPinning", null);
-__decorate([
-    DeprecateProperty('`columnPinningTitle` is deprecated')
-], IgxGridBaseDirective.prototype, "columnPinningTitle", null);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "sortingExpressions", null);
-__decorate([
-    DeprecateProperty('`pinnedColumnsText` is deprecated')
-], IgxGridBaseDirective.prototype, "pinnedColumnsText", null);
-__decorate([
-    DeprecateProperty('`showToolbar` is deprecated')
-], IgxGridBaseDirective.prototype, "showToolbar", null);
-__decorate([
-    DeprecateProperty('`toolbarTitle` is deprecated')
-], IgxGridBaseDirective.prototype, "toolbarTitle", null);
-__decorate([
-    DeprecateProperty('`exportExcel` is deprecated')
-], IgxGridBaseDirective.prototype, "exportExcel", null);
-__decorate([
-    DeprecateProperty('`exportCsv` is deprecated')
-], IgxGridBaseDirective.prototype, "exportCsv", null);
-__decorate([
-    DeprecateProperty('`exportText` is deprecated')
-], IgxGridBaseDirective.prototype, "exportText", null);
-__decorate([
-    DeprecateProperty('`exportExcelText` is deprecated')
-], IgxGridBaseDirective.prototype, "exportExcelText", null);
-__decorate([
-    DeprecateProperty('`exportCsvText` is deprecated')
-], IgxGridBaseDirective.prototype, "exportCsvText", null);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "cellSelection", null);
@@ -55123,24 +55140,6 @@ __decorate([
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "columnSelection", null);
-__decorate([
-    DeprecateProperty('`totalPages` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "totalPages", null);
-__decorate([
-    DeprecateProperty('`isFirstPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "isFirstPage", null);
-__decorate([
-    DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "nextPage", null);
-__decorate([
-    DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "previousPage", null);
-__decorate([
-    DeprecateProperty('`isLastPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "isLastPage", null);
-__decorate([
-    DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "paginate", null);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "selectRowOnClick", null);
@@ -55188,7 +55187,7 @@ class BaseRow {
         return (_b = this._data) !== null && _b !== void 0 ? _b : this.grid.dataView[this.index];
     }
     /**
-     * @deprecated Use 'data' instead.
+     * @deprecated Use 'data' instead
      *
      * The data record that populates the row
      */
@@ -55196,8 +55195,7 @@ class BaseRow {
         return this.data;
     }
     /**
-     * @deprecated Use 'key' instead.
-     *
+     * @deprecated Use 'key' instead
      */
     get rowID() {
         return this.key;
@@ -55366,12 +55364,6 @@ class BaseRow {
         this.grid.deleteRowById(this.key);
     }
 }
-__decorate([
-    DeprecateProperty(`'rowData' property is deprecated. Use 'data' instead.`)
-], BaseRow.prototype, "rowData", null);
-__decorate([
-    DeprecateProperty(`'rowID' property is deprecated. Use 'key' instead.`)
-], BaseRow.prototype, "rowID", null);
 class IgxGridRow extends BaseRow {
     /**
      * @hidden
@@ -56368,17 +56360,6 @@ class IgxGridCellComponent {
     get currencyCodeSymbol() {
         return getCurrencySymbol(this.currencyCode, 'wide', this.grid.locale);
     }
-    /**
-     * @deprecated
-     * Gets whether the cell is selected.
-     * ```typescript
-     * let isCellSelected = thid.cell.isCellSelected();
-     * ```
-     * @memberof IgxGridCellComponent
-     */
-    isCellSelected() {
-        return this.selectionService.selected(this.selectionNode);
-    }
     /**
      * @hidden
      * @internal
@@ -56683,9 +56664,6 @@ IgxGridCellComponent.propDecorators = {
     onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
     onContextMenu: [{ type: HostListener, args: ['contextmenu', ['$event'],] }]
 };
-__decorate([
-    DeprecateMethod(`'isCellSelected' is deprecated. Use 'selected' property instead.`)
-], IgxGridCellComponent.prototype, "isCellSelected", null);
 
 class IgxGridFooterComponent {
 }
@@ -57064,9 +57042,10 @@ class IgxColumnActionsComponent {
         this._differ = this.differs.find([]).create(this.trackChanges);
     }
     /**
+     * @deprecated Use grid input instead.
+     *
      * Gets the grid columns to provide an action for.
      *
-     * @deprecated
      * @example
      * ```typescript
      * let gridColumns = this.columnActions.columns;
@@ -57306,9 +57285,6 @@ IgxColumnActionsComponent.propDecorators = {
     checkAllText: [{ type: Input }],
     id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }]
 };
-__decorate([
-    DeprecateProperty(`Deprecated. Use 'grid' input instead.`)
-], IgxColumnActionsComponent.prototype, "columns", null);
 
 /**
  * @hidden
@@ -59992,7 +59968,7 @@ IgxTimePickerComponent.decorators = [
                     }
                 ],
                 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 {
             display: block;
         }`]
@@ -61601,7 +61577,8 @@ class IgxGridComponent extends IgxGridBaseDirective {
         return this._dropAreaMessage || this.resourceStrings.igx_grid_groupByArea_message;
     }
     /**
-     * @deprecated
+     * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+     *
      * Returns a `CellType` object that matches the conditions.
      *
      * @example
@@ -62363,9 +62340,6 @@ IgxGridComponent.propDecorators = {
     dropAreaMessage: [{ type: Input }],
     showGroupArea: [{ type: Input }]
 };
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
 class IgxGridStateDirective {
     /**
@@ -65168,7 +65142,8 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         return this.gridAPI;
     }
     /**
-     * @deprecated
+     * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+     *
      * Returns a `CellType` object that matches the conditions.
      *
      * @example
@@ -65224,7 +65199,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
                     // if a row has been added and before commiting the transaction deleted
                     const leafRowsDirectParents = new Set();
                     this.records.forEach(record => {
-                        if (record && !record.children && record.parent) {
+                        if (record && (!record.children || record.children.length === 0) && record.parent) {
                             leafRowsDirectParents.add(record.parent);
                         }
                     });
@@ -65240,7 +65215,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
             if (this.rowSelection === GridSelectionMode.multipleCascade) {
                 const leafRowsDirectParents = new Set();
                 this.records.forEach(record => {
-                    if (record && !record.children && record.parent) {
+                    if (record && (!record.children || record.children.length === 0) && record.parent) {
                         leafRowsDirectParents.add(record.parent);
                     }
                 });
@@ -65828,9 +65803,6 @@ IgxTreeGridComponent.propDecorators = {
     expansionDepth: [{ type: Input }],
     rowLoadingIndicatorTemplate: [{ type: Input }]
 };
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxTreeGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
 class IgxTreeGridRowComponent extends IgxRowDirective {
     /**
@@ -68031,7 +68003,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         return this._defaultExpandState;
     }
     /**
-     * @deprecated
+     * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+     *
      * Returns a `CellType` object that matches the conditions.
      *
      * @example
@@ -68676,9 +68649,6 @@ IgxHierarchicalGridComponent.propDecorators = {
     data: [{ type: Input }],
     expandChildren: [{ type: Input }]
 };
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxHierarchicalGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
 class IgxHierarchicalGridCellComponent extends IgxGridCellComponent {
     constructor(selectionService, gridAPI, cdr, helement, zone, touchManager, platformUtil) {
@@ -73115,6 +73085,8 @@ class IgxToastComponent extends IgxNotificationsDirective {
         };
     }
     /**
+     * @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
@@ -73258,9 +73230,6 @@ IgxToastComponent.propDecorators = {
     position: [{ type: Input }],
     positionSettings: [{ type: Input }]
 };
-__decorate([
-    DeprecateProperty('`position` is deprecated. We suggest using `positionSettings` property instead.')
-], IgxToastComponent.prototype, "position", null);
 /**
  * @hidden
  */
@@ -76654,5 +76623,5 @@ IgxTreeModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BaseProgressDirective, BlockScrollStrategy, ButtonGroupAlignment, Calendar, CalendarHammerConfig, CalendarSelection, CalendarView, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultSortingStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportRecordType, FilterListItem, FilterMode, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GlobalPositionStrategy, GridBaseAPIService, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupedRecords, HeaderType, HorizontalAlignment, IGX_CHECKBOX_REQUIRED_VALIDATOR, IGX_INPUT_GROUP_TYPE, IGX_SWITCH_REQUIRED_VALIDATOR, ITreeGridAggregation, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripModule, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarBaseDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollMonthDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCardType, IgxCarouselComponent, IgxCarouselComponentBase, IgxCarouselModule, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxCheckboxRequiredDirective, IgxChipComponent, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnActionsModule, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxComboComponent, IgxComboModule, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogComponent, IgxDialogModule, IgxDisplayDensityModule, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragLocation, IgxDropDirective, IgxDropDownBaseDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemBaseDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelModule, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridAPIService, IgxGridActionsBaseDirective, IgxGridBaseDirective, IgxGridBodyDirective, IgxGridCell, IgxGridCommonModule, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridForOfDirective, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalPipe, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridStateModule, IgxGridToolbarActionsDirective, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleDirective, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHierarchicalGridAPIService, IgxHierarchicalGridBaseDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHierarchicalTransactionServiceFactory, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerBaseDirective, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorDirective, IgxPaginatorModule, IgxPaginatorTemplateDirective, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPickersCommonModule, IgxPrefixDirective, IgxPrefixModule, IgxPrependDropStrategy, IgxProgressBarModule, IgxProgressType, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandAPIService, IgxRowIslandComponent, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSorting, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStringFilteringOperand, IgxSuffixDirective, IgxSuffixModule, IgxSummaryOperand, IgxSummaryRow, IgxSwitchComponent, IgxSwitchModule, IgxSwitchRequiredDirective, IgxTabContentComponent, IgxTabContentDirective, IgxTabHeaderComponent, IgxTabHeaderDirective, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabItemDirective, IgxTabsAlignment, IgxTabsComponent, IgxTabsDirective, IgxTabsModule, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToastPosition, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridAPIService, IgxTreeGridComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectMarkerDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowEditPositionStrategy, RowPinningPosition, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, WEEKDAYS, blink, changei18n, fadeIn, fadeOut, filteringStateDefaults, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, flipVerBck, flipVerFwd, getCurrentResourceStrings, getTypeNameForDebugging, growVerIn, growVerOut, heartbeat, hierarchicalTransactionServiceFactory, isDateInRanges, isLeap, monthRange, pulsateBck, pulsateFwd, range, rotateInBl, rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd, toPercent, valueInRange, weekDay, ɵ1, ɵ2, IgxActionStripMenuItemDirective as ɵa, IGX_DROPDOWN_BASE as ɵb, IgxGridActionButtonComponent as ɵba, ToggleAnimationPlayer as ɵbb, IgxExpansionPanelTitleDirective as ɵbc, IgxExpansionPanelDescriptionDirective as ɵbd, IgxExpansionPanelIconDirective as ɵbe, IgxBannerActionsDirective as ɵbf, IgxDaysViewNavigationService as ɵbg, IgxDayItemComponent as ɵbh, IgxMonthViewSlotsCalendar as ɵbi, IgxGetViewDateCalendar as ɵbj, IgxCarouselIndicatorDirective as ɵbk, IgxCarouselNextButtonDirective as ɵbl, IgxCarouselPrevButtonDirective as ɵbm, IGX_COMBO_COMPONENT as ɵbn, IgxComboBaseDirective as ɵbp, IgxComboHeaderDirective as ɵbq, IgxComboFooterDirective as ɵbr, IgxComboItemDirective as ɵbs, IgxComboEmptyDirective as ɵbt, IgxComboHeaderItemDirective as ɵbu, IgxComboAddItemDirective as ɵbv, IgxComboToggleIconDirective as ɵbw, IgxComboClearIconDirective as ɵbx, IgxComboAPIService as ɵby, IgxComboDropDownComponent as ɵbz, IgxComboItemComponent as ɵca, IgxComboFilteringPipe as ɵcb, IgxComboGroupingPipe as ɵcc, IgxComboAddItemComponent as ɵcd, PickerBaseDirective as ɵce, IgxCalendarContainerComponent as ɵcf, IgxCalendarContainerModule as ɵcg, IgxDialogTitleDirective as ɵch, IgxDialogActionsDirective as ɵci, IgxCellCrudState as ɵcj, IgxRowCrudState as ɵck, IgxRowAddCrudState as ɵcl, IgxGridCRUDService as ɵcm, IgxColumnMovingService as ɵcn, IgxExcelStyleCustomDialogComponent as ɵco, IgxExcelStyleDefaultExpressionComponent as ɵcp, IgxExcelStyleDateExpressionComponent as ɵcq, HammerGesturesManager as ɵcr, WatchChanges as ɵcs, WatchColumnChanges as ɵct, notifyChanges as ɵcu, IgxNotificationsDirective as ɵcv, IgxGridColumnResizerComponent as ɵcw, IgxColumnResizerDirective as ɵcx, IgxColumnResizingService as ɵcy, IgxRowSelectorDirective as ɵcz, IgxGridSelectionService as ɵd, IgxGroupByRowSelectorDirective as ɵda, IgxHeadSelectorDirective as ɵdb, IgxRowDragDirective as ɵdc, IgxDragIndicatorIconDirective as ɵdd, IgxRowDragGhostDirective as ɵde, IgxRowDragModule as ɵdf, IgxGridHeaderRowComponent as ɵdg, IgxGridHeaderGroupComponent as ɵdh, IgxGridHeaderComponent as ɵdi, IgxGridFilteringCellComponent as ɵdj, IgxFilteringService as ɵdk, IgxGridFilteringRowComponent as ɵdl, IgxGridGroupByAreaComponent as ɵdm, IgxGroupByAreaDirective as ɵdn, IgxGroupByMetaPipe as ɵdo, IgxTemplateOutletDirective as ɵdp, IgxTemplateOutletModule as ɵdq, IgxRowEditTemplateDirective as ɵdr, IgxRowEditTextDirective as ɵds, IgxRowAddTextDirective as ɵdt, IgxRowEditActionsDirective as ɵdu, IgxRowEditTabStopDirective as ɵdv, IgxSummaryRowComponent as ɵdw, IgxSummaryCellComponent as ɵdx, IgxRowDirective as ɵdy, IgxGridNavigationService as ɵdz, IgxGridSummaryService as ɵea, ConnectedPositioningStrategy as ɵeb, IgxGridGroupByRowComponent as ɵec, IgxTreeGridSelectionService as ɵed, IgxTreeGridGroupByAreaComponent as ɵee, IgxRowLoadingIndicatorTemplateDirective as ɵef, IgxHierarchicalGridNavigationService as ɵeg, IgxChildGridRowComponent as ɵeh, IgxGridCellComponent as ɵei, IgxGridFooterComponent as ɵej, IgxAdvancedFilteringDialogComponent as ɵek, IgxColumnHidingDirective as ɵel, IgxColumnPinningDirective as ɵem, IgxGridSharedModules as ɵen, IgxProcessBarTextTemplateDirective as ɵeo, IgxProgressBarGradientDirective as ɵep, DIR_DOCUMENT_FACTORY as ɵeq, DIR_DOCUMENT as ɵer, IgxDirectionality as ɵes, IgxSelectItemNavigationDirective as ɵet, IGX_TIME_PICKER_COMPONENT as ɵeu, IgxItemListDirective as ɵew, IgxTimeItemDirective as ɵex, IgxTimePickerTemplateDirective as ɵey, IgxTimePickerActionsDirective as ɵez, IGX_EXPANSION_PANEL_COMPONENT as ɵf, TimeFormatPipe as ɵfa, TimeItemPipe as ɵfb, IgxGridPipesModule as ɵfc, IgxGridCellStyleClassesPipe as ɵfd, IgxGridCellStylesPipe as ɵfe, IgxGridRowClassesPipe as ɵff, IgxGridRowStylesPipe as ɵfg, IgxGridNotGroupedPipe as ɵfh, IgxGridTopLevelColumns as ɵfi, IgxGridFilterConditionPipe as ɵfj, IgxGridTransactionPipe as ɵfk, IgxGridPaginatorOptionsPipe as ɵfl, IgxHasVisibleColumnsPipe as ɵfm, IgxGridRowPinningPipe as ɵfn, IgxColumnActionEnabledPipe as ɵfo, IgxFilterActionColumnsPipe as ɵfp, IgxSortActionColumnsPipe as ɵfq, IgxGridDataMapperPipe as ɵfr, IgxStringReplacePipe as ɵfs, IgxGridTransactionStatePipe as ɵft, IgxColumnFormatterPipe as ɵfu, IgxSummaryFormatterPipe as ɵfv, IgxGridAddRowPipe as ɵfw, IgxHeaderGroupWidthPipe as ɵfx, IgxHeaderGroupStylePipe as ɵfy, IgxGridColumnModule as ɵfz, IGX_TREE_COMPONENT as ɵg, IgxGridHeadersModule as ɵga, SortingIndexPipe as ɵgb, IgxGridFilteringModule as ɵgc, IgxColumnMovingModule as ɵgd, IgxColumnMovingDropDirective as ɵge, IgxColumnMovingDragDirective as ɵgf, IgxGridResizingModule as ɵgg, IgxResizeHandleDirective as ɵgh, IgxGridExcelStyleFilteringModule as ɵgi, IgxGridSelectionModule as ɵgj, IgxGridDragSelectDirective as ɵgk, IgxGridSummaryModule as ɵgl, IgxSummaryDataPipe as ɵgm, IgxGridToolbarModule as ɵgn, BaseToolbarDirective as ɵgo, BaseToolbarColumnActionsDirective as ɵgp, IgxGridRowComponent as ɵgq, IgxGridSortingPipe as ɵgr, IgxGridGroupingPipe as ɵgs, IgxGridPagingPipe as ɵgt, IgxGridFilteringPipe as ɵgu, IgxGridSummaryPipe as ɵgv, IgxGridDetailsPipe as ɵgw, IgxGridExpandableCellComponent as ɵgx, IgxTreeGridRowComponent as ɵgy, IgxTreeGridCellComponent as ɵgz, IGX_TREE_NODE_COMPONENT as ɵh, IgxTreeGridHierarchizingPipe as ɵha, IgxTreeGridFlatteningPipe as ɵhb, IgxTreeGridSortingPipe as ɵhc, IgxTreeGridPagingPipe as ɵhd, IgxTreeGridTransactionPipe as ɵhe, IgxTreeGridNormalizeRecordsPipe as ɵhf, IgxTreeGridAddRowPipe as ɵhg, IgxTreeGridFilteringPipe as ɵhh, IgxTreeGridSummaryPipe as ɵhi, IgxHierarchicalRowComponent as ɵhj, IgxHierarchicalGridCellComponent as ɵhk, IgxSliderThumbComponent as ɵhl, IgxThumbLabelComponent as ɵhm, IgxTicksComponent as ɵhn, IgxTickLabelsPipe as ɵho, IgxTabsBase as ɵhp, IgxTabHeaderBase as ɵhq, IgxTabContentBase as ɵhr, IgxSplitBarComponent as ɵhs, IgxTreeService as ɵht, IgxTreeSelectionService as ɵhu, IgxTreeNavigationService as ɵhv, PlatformUtil as ɵi, EaseIn as ɵj, EaseOut as ɵk, IgxInputGroupBase as ɵl, IgxSelectionAPIService as ɵm, IgxForOfSyncService as ɵn, IgxForOfScrollSyncService as ɵo, DisplayContainerComponent as ɵp, IgxScrollInertiaDirective as ɵq, IgxScrollInertiaModule as ɵr, VirtualHelperComponent as ɵs, VirtualHelperBaseDirective as ɵt, HVirtualHelperComponent as ɵu, MaskParsingService as ɵv, DeprecateMethod as ɵw, DeprecateProperty as ɵx, isHierarchyMatch as ɵy, getHierarchy as ɵz };
+export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BaseProgressDirective, BlockScrollStrategy, ButtonGroupAlignment, Calendar, CalendarHammerConfig, CalendarSelection, CalendarView, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultSortingStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportRecordType, FilterListItem, FilterMode, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GlobalPositionStrategy, GridBaseAPIService, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupedRecords, HeaderType, HorizontalAlignment, IGX_CHECKBOX_REQUIRED_VALIDATOR, IGX_INPUT_GROUP_TYPE, IGX_SWITCH_REQUIRED_VALIDATOR, ITreeGridAggregation, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripModule, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarBaseDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollMonthDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCardType, IgxCarouselComponent, IgxCarouselComponentBase, IgxCarouselModule, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxCheckboxRequiredDirective, IgxChipComponent, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnActionsModule, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxComboComponent, IgxComboModule, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogComponent, IgxDialogModule, IgxDisplayDensityModule, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragLocation, IgxDropDirective, IgxDropDownBaseDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemBaseDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelModule, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridAPIService, IgxGridActionsBaseDirective, IgxGridBaseDirective, IgxGridBodyDirective, IgxGridCell, IgxGridCommonModule, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridForOfDirective, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalPipe, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridStateModule, IgxGridToolbarActionsDirective, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleDirective, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHierarchicalGridAPIService, IgxHierarchicalGridBaseDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHierarchicalTransactionServiceFactory, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerBaseDirective, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorDirective, IgxPaginatorModule, IgxPaginatorTemplateDirective, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPickersCommonModule, IgxPrefixDirective, IgxPrefixModule, IgxPrependDropStrategy, IgxProgressBarModule, IgxProgressType, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandAPIService, IgxRowIslandComponent, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSorting, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStringFilteringOperand, IgxSuffixDirective, IgxSuffixModule, IgxSummaryOperand, IgxSummaryRow, IgxSwitchComponent, IgxSwitchModule, IgxSwitchRequiredDirective, IgxTabContentComponent, IgxTabContentDirective, IgxTabHeaderComponent, IgxTabHeaderDirective, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabItemDirective, IgxTabsAlignment, IgxTabsComponent, IgxTabsDirective, IgxTabsModule, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToastPosition, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridAPIService, IgxTreeGridComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectMarkerDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowEditPositionStrategy, RowPinningPosition, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, WEEKDAYS, blink, changei18n, fadeIn, fadeOut, filteringStateDefaults, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, flipVerBck, flipVerFwd, getCurrentResourceStrings, getTypeNameForDebugging, growVerIn, growVerOut, heartbeat, hierarchicalTransactionServiceFactory, isDateInRanges, isLeap, monthRange, pulsateBck, pulsateFwd, range, rotateInBl, rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd, toPercent, valueInRange, weekDay, ɵ1, ɵ2, IgxActionStripMenuItemDirective as ɵa, IGX_DROPDOWN_BASE as ɵb, IgxExpansionPanelTitleDirective as ɵba, IgxExpansionPanelDescriptionDirective as ɵbb, IgxExpansionPanelIconDirective as ɵbc, IgxBannerActionsDirective as ɵbd, IgxDaysViewNavigationService as ɵbe, IgxDayItemComponent as ɵbf, IgxMonthViewSlotsCalendar as ɵbg, IgxGetViewDateCalendar as ɵbh, IgxCarouselIndicatorDirective as ɵbi, IgxCarouselNextButtonDirective as ɵbj, IgxCarouselPrevButtonDirective as ɵbk, IGX_COMBO_COMPONENT as ɵbl, IgxComboBaseDirective as ɵbn, IgxComboHeaderDirective as ɵbo, IgxComboFooterDirective as ɵbp, IgxComboItemDirective as ɵbq, IgxComboEmptyDirective as ɵbr, IgxComboHeaderItemDirective as ɵbs, IgxComboAddItemDirective as ɵbt, IgxComboToggleIconDirective as ɵbu, IgxComboClearIconDirective as ɵbv, IgxComboAPIService as ɵbw, IgxComboDropDownComponent as ɵbx, IgxComboItemComponent as ɵby, IgxComboFilteringPipe as ɵbz, IgxComboGroupingPipe as ɵca, IgxComboAddItemComponent as ɵcb, PickerBaseDirective as ɵcc, IgxCalendarContainerComponent as ɵcd, IgxCalendarContainerModule as ɵce, IgxDialogTitleDirective as ɵcf, IgxDialogActionsDirective as ɵcg, IgxCellCrudState as ɵch, IgxRowCrudState as ɵci, IgxRowAddCrudState as ɵcj, IgxGridCRUDService as ɵck, IgxColumnMovingService as ɵcl, IgxExcelStyleCustomDialogComponent as ɵcm, IgxExcelStyleDefaultExpressionComponent as ɵcn, IgxExcelStyleDateExpressionComponent as ɵco, HammerGesturesManager as ɵcp, WatchChanges as ɵcq, WatchColumnChanges as ɵcr, notifyChanges as ɵcs, IgxNotificationsDirective as ɵct, IgxGridColumnResizerComponent as ɵcu, IgxColumnResizerDirective as ɵcv, IgxColumnResizingService as ɵcw, IgxRowSelectorDirective as ɵcx, IgxGroupByRowSelectorDirective as ɵcy, IgxHeadSelectorDirective as ɵcz, IgxGridSelectionService as ɵd, IgxRowDragDirective as ɵda, IgxDragIndicatorIconDirective as ɵdb, IgxRowDragGhostDirective as ɵdc, IgxRowDragModule as ɵdd, IgxGridHeaderRowComponent as ɵde, IgxGridHeaderGroupComponent as ɵdf, IgxGridHeaderComponent as ɵdg, IgxGridFilteringCellComponent as ɵdh, IgxFilteringService as ɵdi, IgxGridFilteringRowComponent as ɵdj, IgxGridGroupByAreaComponent as ɵdk, IgxGroupByAreaDirective as ɵdl, IgxGroupByMetaPipe as ɵdm, IgxTemplateOutletDirective as ɵdn, IgxTemplateOutletModule as ɵdo, IgxRowEditTemplateDirective as ɵdp, IgxRowEditTextDirective as ɵdq, IgxRowAddTextDirective as ɵdr, IgxRowEditActionsDirective as ɵds, IgxRowEditTabStopDirective as ɵdt, IgxSummaryRowComponent as ɵdu, IgxSummaryCellComponent as ɵdv, IgxRowDirective as ɵdw, IgxGridNavigationService as ɵdx, IgxGridSummaryService as ɵdy, ConnectedPositioningStrategy as ɵdz, IgxGridGroupByRowComponent as ɵea, IgxTreeGridSelectionService as ɵeb, IgxTreeGridGroupByAreaComponent as ɵec, IgxRowLoadingIndicatorTemplateDirective as ɵed, IgxHierarchicalGridNavigationService as ɵee, IgxChildGridRowComponent as ɵef, IgxGridCellComponent as ɵeg, IgxGridFooterComponent as ɵeh, IgxAdvancedFilteringDialogComponent as ɵei, IgxColumnHidingDirective as ɵej, IgxColumnPinningDirective as ɵek, IgxGridSharedModules as ɵel, IgxProcessBarTextTemplateDirective as ɵem, IgxProgressBarGradientDirective as ɵen, DIR_DOCUMENT_FACTORY as ɵeo, DIR_DOCUMENT as ɵep, IgxDirectionality as ɵeq, IgxSelectItemNavigationDirective as ɵer, IGX_TIME_PICKER_COMPONENT as ɵes, IgxItemListDirective as ɵeu, IgxTimeItemDirective as ɵev, IgxTimePickerTemplateDirective as ɵew, IgxTimePickerActionsDirective as ɵex, TimeFormatPipe as ɵey, TimeItemPipe as ɵez, IGX_EXPANSION_PANEL_COMPONENT as ɵf, IgxGridPipesModule as ɵfa, IgxGridCellStyleClassesPipe as ɵfb, IgxGridCellStylesPipe as ɵfc, IgxGridRowClassesPipe as ɵfd, IgxGridRowStylesPipe as ɵfe, IgxGridNotGroupedPipe as ɵff, IgxGridTopLevelColumns as ɵfg, IgxGridFilterConditionPipe as ɵfh, IgxGridTransactionPipe as ɵfi, IgxGridPaginatorOptionsPipe as ɵfj, IgxHasVisibleColumnsPipe as ɵfk, IgxGridRowPinningPipe as ɵfl, IgxColumnActionEnabledPipe as ɵfm, IgxFilterActionColumnsPipe as ɵfn, IgxSortActionColumnsPipe as ɵfo, IgxGridDataMapperPipe as ɵfp, IgxStringReplacePipe as ɵfq, IgxGridTransactionStatePipe as ɵfr, IgxColumnFormatterPipe as ɵfs, IgxSummaryFormatterPipe as ɵft, IgxGridAddRowPipe as ɵfu, IgxHeaderGroupWidthPipe as ɵfv, IgxHeaderGroupStylePipe as ɵfw, IgxGridColumnModule as ɵfx, IgxGridHeadersModule as ɵfy, SortingIndexPipe as ɵfz, IGX_TREE_COMPONENT as ɵg, IgxGridFilteringModule as ɵga, IgxColumnMovingModule as ɵgb, IgxColumnMovingDropDirective as ɵgc, IgxColumnMovingDragDirective as ɵgd, IgxGridResizingModule as ɵge, IgxResizeHandleDirective as ɵgf, IgxGridExcelStyleFilteringModule as ɵgg, IgxGridSelectionModule as ɵgh, IgxGridDragSelectDirective as ɵgi, IgxGridSummaryModule as ɵgj, IgxSummaryDataPipe as ɵgk, IgxGridToolbarModule as ɵgl, BaseToolbarDirective as ɵgm, BaseToolbarColumnActionsDirective as ɵgn, IgxGridRowComponent as ɵgo, IgxGridSortingPipe as ɵgp, IgxGridGroupingPipe as ɵgq, IgxGridPagingPipe as ɵgr, IgxGridFilteringPipe as ɵgs, IgxGridSummaryPipe as ɵgt, IgxGridDetailsPipe as ɵgu, IgxGridExpandableCellComponent as ɵgv, IgxTreeGridRowComponent as ɵgw, IgxTreeGridCellComponent as ɵgx, IgxTreeGridHierarchizingPipe as ɵgy, IgxTreeGridFlatteningPipe as ɵgz, IGX_TREE_NODE_COMPONENT as ɵh, IgxTreeGridSortingPipe as ɵha, IgxTreeGridPagingPipe as ɵhb, IgxTreeGridTransactionPipe as ɵhc, IgxTreeGridNormalizeRecordsPipe as ɵhd, IgxTreeGridAddRowPipe as ɵhe, IgxTreeGridFilteringPipe as ɵhf, IgxTreeGridSummaryPipe as ɵhg, IgxHierarchicalRowComponent as ɵhh, IgxHierarchicalGridCellComponent as ɵhi, IgxSliderThumbComponent as ɵhj, IgxThumbLabelComponent as ɵhk, IgxTicksComponent as ɵhl, IgxTickLabelsPipe as ɵhm, IgxTabsBase as ɵhn, IgxTabHeaderBase as ɵho, IgxTabContentBase as ɵhp, IgxSplitBarComponent as ɵhq, IgxTreeService as ɵhr, IgxTreeSelectionService as ɵhs, IgxTreeNavigationService as ɵht, PlatformUtil as ɵi, EaseIn as ɵj, EaseOut as ɵk, IgxInputGroupBase as ɵl, IgxSelectionAPIService as ɵm, IgxForOfSyncService as ɵn, IgxForOfScrollSyncService as ɵo, DisplayContainerComponent as ɵp, IgxScrollInertiaDirective as ɵq, IgxScrollInertiaModule as ɵr, VirtualHelperComponent as ɵs, VirtualHelperBaseDirective as ɵt, HVirtualHelperComponent as ɵu, MaskParsingService as ɵv, isHierarchyMatch as ɵw, getHierarchy as ɵx, IgxGridActionButtonComponent as ɵy, ToggleAnimationPlayer as ɵz };
 //# sourceMappingURL=igniteui-angular.js.map