igniteui-angular 13.0.0-alpha.6 → 13.0.0-alpha.7

package/fesm2020/igniteui-angular.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/animations';
 import { style, animate, animation, keyframes, useAnimation, trigger, transition } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, HostListener, NgModule, PLATFORM_ID, Inject, EventEmitter, ElementRef, Optional, Output, HostBinding, InjectionToken, isDevMode, Component, ViewContainerRef, ViewChild, ContentChildren, forwardRef, ContentChild, Self, SecurityContext, TemplateRef, Pipe, LOCALE_ID, QueryList, ViewChildren, Host, ChangeDetectionStrategy, inject, SimpleChange, CUSTOM_ELEMENTS_SCHEMA, SkipSelf } from '@angular/core';
+import { Injectable, Directive, Input, HostListener, NgModule, isDevMode, PLATFORM_ID, Inject, EventEmitter, ElementRef, Optional, Output, HostBinding, InjectionToken, Component, ViewContainerRef, ViewChild, ContentChildren, forwardRef, ContentChild, Self, SecurityContext, TemplateRef, Pipe, LOCALE_ID, QueryList, ViewChildren, Host, ChangeDetectionStrategy, inject, SimpleChange, CUSTOM_ELEMENTS_SCHEMA, SkipSelf } from '@angular/core';
 import * as i12 from '@angular/forms';
 import { NgModel, FormControlName, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, FormsModule, NgControl, ReactiveFormsModule } from '@angular/forms';
 import * as i4 from '@angular/common';
@@ -13,8 +13,8 @@ import * as JSZip from 'jszip';
 import * as i1$1 from '@angular/platform-browser';
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG, ɵgetDOM } from '@angular/platform-browser';
 import * as i2 from '@angular/common/http';
-import { __decorate, __param } from 'tslib';
 import { addRow, addChild, pinLeft, unpinLeft, jumpDown, jumpUp, caseSensitive, editor } from '@igniteui/material-icons-extended';
+import { __decorate, __param } from 'tslib';
 import 'igniteui-trial-watermark';
 import { v4 } from 'uuid';
 
@@ -1423,6 +1423,15 @@ function clearImmediate(id) {
     delete queue[id];
 }
 
+/**
+ * @hidden
+ */
+const showMessage = (message, isMessageShown) => {
+    if (!isMessageShown && isDevMode()) {
+        console.warn(message);
+    }
+    return true;
+};
 const mkenum = (x) => x;
 /**
  *
@@ -7993,104 +8002,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                 }]
         }] });
 
-/**
- * @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;
-};
-/**
- * @hidden
- */
-const showMessage = (message, isMessageShown) => {
-    if (!isMessageShown && isDevMode()) {
-        console.warn(message);
-    }
-    return true;
-};
-
 let NEXT_ID$u = 0;
 /**
  * The `<igx-drop-down-item>` is a container intended for row items in
@@ -8178,7 +8089,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
             }] } });
 
 let NEXT_ID$t = 0;
-let warningShown = false;
 /**
  * An abstract class defining a drop-down item:
  * With properties / styles for selection, highlight, height
@@ -8243,8 +8153,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;
@@ -9877,7 +9785,7 @@ class IgxForOfDirective {
                 this.dc.instance.scrollContainer = this.scrollComponent.nativeElement;
             });
             const destructor = takeUntil(this.destroy$);
-            this.contentResizeNotify.pipe(destructor, filter(() => this.igxForContainerSize && this.igxForOf && this.igxForOf.length > 0), throttleTime(40, undefined, { leading: true, trailing: true })).subscribe(() => this._zone.runTask(() => this.updateSizes()));
+            this.contentResizeNotify.pipe(filter(() => this.igxForContainerSize && this.igxForOf && this.igxForOf.length > 0), throttleTime(40, undefined, { leading: true, trailing: true }), destructor).subscribe(() => this._zone.runTask(() => this.updateSizes()));
         }
         if (this.igxForScrollOrientation === 'horizontal') {
             this.func = (evt) => this.onHScroll(evt);
@@ -16333,6 +16241,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                 }]
         }] });
 
+class IgxFocusTrapDirective {
+    /** @hidden */
+    constructor(elementRef, platformUtil) {
+        this.elementRef = elementRef;
+        this.platformUtil = platformUtil;
+        this.destroy$ = new Subject();
+        this._focusTrap = true;
+    }
+    /** @hidden */
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    /**
+     * Sets whether the Tab key focus is trapped within the element.
+     *
+     * @example
+     * ```html
+     * <div igxFocusTrap="true"></div>
+     * ```
+     */
+    set focusTrap(focusTrap) {
+        this._focusTrap = focusTrap;
+    }
+    /** @hidden */
+    get focusTrap() {
+        return this._focusTrap;
+    }
+    /** @hidden */
+    ngAfterViewInit() {
+        fromEvent(this.element, 'keydown')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            if (this._focusTrap && event.key === this.platformUtil.KEYMAP.TAB) {
+                this.handleTab(event);
+            }
+        });
+    }
+    /** @hidden */
+    ngOnDestroy() {
+        this.destroy$.complete();
+    }
+    handleTab(event) {
+        const elements = this.getFocusableElements(this.element);
+        if (elements.length > 0) {
+            const focusedElement = this.getFocusedElement();
+            const focusedElementIndex = elements.findIndex((element) => element === focusedElement);
+            const direction = event.shiftKey ? -1 : 1;
+            let nextFocusableElementIndex = focusedElementIndex + direction;
+            if (nextFocusableElementIndex < 0) {
+                nextFocusableElementIndex = elements.length - 1;
+            }
+            if (nextFocusableElementIndex >= elements.length) {
+                nextFocusableElementIndex = 0;
+            }
+            elements[nextFocusableElementIndex].focus();
+        }
+        else {
+            this.element.focus();
+        }
+        event.preventDefault();
+    }
+    getFocusableElements(element) {
+        return Array.from(element.querySelectorAll('a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')).filter(el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+    }
+    getFocusedElement() {
+        let activeElement = typeof document !== 'undefined' && document
+            ? document.activeElement
+            : null;
+        while (activeElement && activeElement.shadowRoot) {
+            const newActiveElement = activeElement.shadowRoot.activeElement;
+            if (newActiveElement === activeElement) {
+                break;
+            }
+            else {
+                activeElement = newActiveElement;
+            }
+        }
+        return activeElement;
+    }
+}
+IgxFocusTrapDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxFocusTrapDirective, deps: [{ token: i0.ElementRef }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive });
+IgxFocusTrapDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxFocusTrapDirective, selector: "[igxFocusTrap]", inputs: { focusTrap: ["igxFocusTrap", "focusTrap"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxFocusTrapDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[igxFocusTrap]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: PlatformUtil }]; }, propDecorators: { focusTrap: [{
+                type: Input,
+                args: ['igxFocusTrap']
+            }] } });
+/**
+ * @hidden
+ */
+class IgxFocusTrapModule {
+}
+IgxFocusTrapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxFocusTrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IgxFocusTrapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxFocusTrapModule, declarations: [IgxFocusTrapDirective], exports: [IgxFocusTrapDirective] });
+IgxFocusTrapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxFocusTrapModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxFocusTrapModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [IgxFocusTrapDirective],
+                    exports: [IgxFocusTrapDirective]
+                }]
+        }] });
+
 class IgxLayoutDirective {
     constructor() {
         /**
@@ -17903,10 +17918,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>
@@ -17920,10 +17935,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"`.
      *
@@ -18155,12 +18170,6 @@ class IgxRadioGroupDirective {
 }
 IgxRadioGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxRadioGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxRadioGroupDirective, selector: "igx-radio-group, [igxRadioGroup]", inputs: { value: "value", name: "name", required: "required", disabled: "disabled", labelPosition: "labelPosition", selected: "selected", alignment: "alignment" }, outputs: { change: "change" }, host: { properties: { "class.igx-radio-group": "this.cssClass", "class.igx-radio-group--vertical": "this.vertical" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxRadioGroupDirective, multi: true }], queries: [{ propertyName: "radioButtons", predicate: IgxRadioComponent, descendants: true }], exportAs: ["igxRadioGroup"], ngImport: i0 });
-__decorate([
-    DeprecateProperty('`disabled` is deprecated.')
-], IgxRadioGroupDirective.prototype, "disabled", null);
-__decorate([
-    DeprecateProperty('`labelPosition` is deprecated.')
-], IgxRadioGroupDirective.prototype, "labelPosition", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxRadioGroupDirective, decorators: [{
             type: Directive,
             args: [{
@@ -22202,7 +22211,7 @@ class IgxRowAddCrudState extends IgxRowCrudState {
      * @hidden @internal
      */
     createAddRowParent(row, newRowAsChild) {
-        const rowIndex = row ? row.index : this.grid.rowList.length - 1;
+        const rowIndex = row ? row.index : -1;
         const rowId = row ? row.rowID : (rowIndex >= 0 ? this.grid.rowList.last.rowID : null);
         const isInPinnedArea = this.grid.isRecordPinnedByViewIndex(rowIndex);
         const pinIndex = this.grid.pinnedRecords.findIndex(x => x[this.primaryKey] === rowId);
@@ -33372,9 +33381,7 @@ IgxComboHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 IgxComboHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboHeaderDirective, selector: "[igxComboHeader]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboHeaderDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[igxComboHeader]'
-                }]
+            args: [{ selector: '[igxComboHeader]' }]
         }] });
 /**
  * @hidden
@@ -33385,9 +33392,7 @@ IgxComboFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 IgxComboFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboFooterDirective, selector: "[igxComboFooter]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboFooterDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[igxComboFooter]'
-                }]
+            args: [{ selector: '[igxComboFooter]' }]
         }] });
 /**
  * @hidden
@@ -33398,9 +33403,7 @@ IgxComboItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 IgxComboItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboItemDirective, selector: "[igxComboItem]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboItemDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[igxComboItem]'
-                }]
+            args: [{ selector: '[igxComboItem]' }]
         }] });
 /**
  * @hidden
@@ -33411,9 +33414,7 @@ IgxComboEmptyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 IgxComboEmptyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboEmptyDirective, selector: "[igxComboEmpty]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboEmptyDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[igxComboEmpty]'
-                }]
+            args: [{ selector: '[igxComboEmpty]' }]
         }] });
 /**
  * @hidden
@@ -33424,9 +33425,7 @@ IgxComboHeaderItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.
 IgxComboHeaderItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboHeaderItemDirective, selector: "[igxComboHeaderItem]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboHeaderItemDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[igxComboHeaderItem]'
-                }]
+            args: [{ selector: '[igxComboHeaderItem]' }]
         }] });
 /**
  * @hidden
@@ -33437,9 +33436,7 @@ IgxComboAddItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 IgxComboAddItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboAddItemDirective, selector: "[igxComboAddItem]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboAddItemDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[igxComboAddItem]'
-                }]
+            args: [{ selector: '[igxComboAddItem]' }]
         }] });
 /**
  * @hidden
@@ -33450,9 +33447,7 @@ IgxComboToggleIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.
 IgxComboToggleIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboToggleIconDirective, selector: "[igxComboToggleIcon]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboToggleIconDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[igxComboToggleIcon]'
-                }]
+            args: [{ selector: '[igxComboToggleIcon]' }]
         }] });
 /**
  * @hidden
@@ -33463,9 +33458,7 @@ IgxComboClearIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0
 IgxComboClearIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboClearIconDirective, selector: "[igxComboClearIcon]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboClearIconDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[igxComboClearIcon]'
-                }]
+            args: [{ selector: '[igxComboClearIcon]' }]
         }] });
 
 /**
@@ -33505,10 +33498,10 @@ class IgxComboAPIService {
             return;
         }
         if (!selected) {
-            this.combo.selectItems([itemID], false, event);
+            this.combo.select([itemID], false, event);
         }
         else {
-            this.combo.deselectItems([itemID], event);
+            this.combo.deselect([itemID], event);
         }
     }
     is_item_selected(itemID) {
@@ -33604,10 +33597,10 @@ class IgxComboItemComponent extends IgxDropDownItemComponent {
     }
 }
 IgxComboItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboItemComponent, deps: [{ token: IgxComboAPIService }, { token: IGX_DROPDOWN_BASE }, { token: i0.ElementRef }, { token: IgxSelectionAPIService }], target: i0.ɵɵFactoryTarget.Component });
-IgxComboItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: { itemHeight: "itemHeight" }, host: { properties: { "style.height.px": "this.itemHeight" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isHeader\">\n    <igx-checkbox [checked]=\"selected\" [disableRipple]=\"true\" [disableTransitions]=\"disableTransitions\" [tabindex]=\"-1\" (click)=\"disableCheck($event)\" class=\"igx-combo__checkbox\"></igx-checkbox>\n</ng-container>\n<span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n", components: [{ type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+IgxComboItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: { itemHeight: "itemHeight", singleMode: "singleMode" }, host: { properties: { "style.height.px": "this.itemHeight" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isHeader && !singleMode\">\n    <igx-checkbox [checked]=\"selected\" [disableRipple]=\"true\" [disableTransitions]=\"disableTransitions\" [tabindex]=\"-1\" (click)=\"disableCheck($event)\" class=\"igx-combo__checkbox\"></igx-checkbox>\n</ng-container>\n<span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n", components: [{ type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-combo-item', template: "<ng-container *ngIf=\"!isHeader\">\n    <igx-checkbox [checked]=\"selected\" [disableRipple]=\"true\" [disableTransitions]=\"disableTransitions\" [tabindex]=\"-1\" (click)=\"disableCheck($event)\" class=\"igx-combo__checkbox\"></igx-checkbox>\n</ng-container>\n<span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n" }]
+            args: [{ selector: 'igx-combo-item', template: "<ng-container *ngIf=\"!isHeader && !singleMode\">\n    <igx-checkbox [checked]=\"selected\" [disableRipple]=\"true\" [disableTransitions]=\"disableTransitions\" [tabindex]=\"-1\" (click)=\"disableCheck($event)\" class=\"igx-combo__checkbox\"></igx-checkbox>\n</ng-container>\n<span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n" }]
         }], ctorParameters: function () { return [{ type: IgxComboAPIService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_DROPDOWN_BASE]
@@ -33619,316 +33612,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
             }, {
                 type: HostBinding,
                 args: ['style.height.px']
+            }], singleMode: [{
+                type: Input
             }] } });
 
 const IGX_COMBO_COMPONENT = new InjectionToken('IgxComboComponentToken');
-
-/**
- * @hidden
- */
-class IgxComboAddItemComponent extends IgxComboItemComponent {
-    get selected() {
-        return false;
-    }
-    set selected(value) {
-    }
-    /**
-     * @inheritdoc
-     */
-    clicked(event) {
-        this.comboAPI.disableTransitions = false;
-        this.comboAPI.add_custom_item();
-    }
-}
-IgxComboAddItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IgxComboAddItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboAddItemComponent, selector: "igx-combo-add-item", providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'igx-combo-add-item',
-                    template: '<ng-content></ng-content>',
-                    providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }]
-                }]
-        }] });
-
-/** @hidden */
-class IgxComboDropDownComponent extends IgxDropDownComponent {
-    constructor(elementRef, cdr, selection, combo, comboAPI, _displayDensityOptions) {
-        super(elementRef, cdr, selection, _displayDensityOptions);
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.selection = selection;
-        this.combo = combo;
-        this.comboAPI = comboAPI;
-        this._displayDensityOptions = _displayDensityOptions;
-        /**
-         * @hidden
-         * @internal
-         */
-        this.children = null;
-        this.scrollHandler = () => {
-            this.comboAPI.disableTransitions = true;
-        };
-    }
-    /** @hidden @internal */
-    get scrollContainer() {
-        return this.virtDir.dc.location.nativeElement;
-    }
-    get isScrolledToLast() {
-        const scrollTop = this.virtDir.scrollPosition;
-        const scrollHeight = this.virtDir.getScroll().scrollHeight;
-        return Math.floor(scrollTop + this.virtDir.igxForContainerSize) === scrollHeight;
-    }
-    get lastVisibleIndex() {
-        return this.combo.totalItemCount ?
-            Math.floor(this.combo.itemsMaxHeight / this.combo.itemHeight) :
-            this.items.length - 1;
-    }
-    get sortedChildren() {
-        if (this.children !== undefined) {
-            return this.children.toArray()
-                .sort((a, b) => a.index - b.index);
-        }
-        return null;
-    }
-    /**
-     * Get all non-header items
-     *
-     * ```typescript
-     * let myDropDownItems = this.dropdown.items;
-     * ```
-     */
-    get items() {
-        const items = [];
-        if (this.children !== undefined) {
-            const sortedChildren = this.sortedChildren;
-            for (const child of sortedChildren) {
-                if (!child.isHeader) {
-                    items.push(child);
-                }
-            }
-        }
-        return items;
-    }
-    /**
-     * @hidden @internal
-     */
-    onFocus() {
-        this.focusedItem = this._focusedItem || this.items[0];
-    }
-    /**
-     * @hidden @internal
-     */
-    onBlur(_evt) {
-        this.focusedItem = null;
-    }
-    /**
-     * @hidden @internal
-     */
-    onToggleOpened() {
-        this.opened.emit();
-    }
-    /**
-     * @hidden
-     */
-    navigateFirst() {
-        this.navigateItem(this.virtDir.igxForOf.findIndex(e => !e.isHeader));
-    }
-    /**
-     * @hidden
-     */
-    navigatePrev() {
-        if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
-            this.combo.focusSearchInput(false);
-        }
-        else {
-            super.navigatePrev();
-        }
-    }
-    /**
-     * @hidden
-     */
-    navigateNext() {
-        const lastIndex = this.combo.totalItemCount ? this.combo.totalItemCount - 1 : this.virtDir.igxForOf.length - 1;
-        if (this._focusedItem && this._focusedItem.index === lastIndex) {
-            this.focusAddItemButton();
-        }
-        else {
-            super.navigateNext();
-        }
-    }
-    /**
-     * @hidden @internal
-     */
-    selectItem(item) {
-        if (item === null || item === undefined) {
-            return;
-        }
-        this.comboAPI.set_selected_item(item.itemID);
-        this._focusedItem = item;
-    }
-    /**
-     * @hidden @internal
-     */
-    updateScrollPosition() {
-        this.virtDir.getScroll().scrollTop = this._scrollPosition;
-    }
-    /**
-     * @hidden @internal
-     */
-    onItemActionKey(key) {
-        switch (key) {
-            case DropDownActionKey.ENTER:
-                this.handleEnter();
-                break;
-            case DropDownActionKey.SPACE:
-                this.handleSpace();
-                break;
-            case DropDownActionKey.ESCAPE:
-                this.close();
-        }
-    }
-    ngAfterViewInit() {
-        this.virtDir.getScroll().addEventListener('scroll', this.scrollHandler);
-    }
-    /**
-     * @hidden @internal
-     */
-    ngOnDestroy() {
-        this.virtDir.getScroll().removeEventListener('scroll', this.scrollHandler);
-        this.destroy$.next(true);
-        this.destroy$.complete();
-    }
-    scrollToHiddenItem(_newItem) { }
-    handleEnter() {
-        if (this.isAddItemFocused()) {
-            this.combo.addItemToCollection();
-        }
-        else {
-            this.close();
-        }
-    }
-    handleSpace() {
-        if (this.isAddItemFocused()) {
-            return;
-        }
-        else {
-            this.selectItem(this.focusedItem);
-        }
-    }
-    isAddItemFocused() {
-        return this.focusedItem instanceof IgxComboAddItemComponent;
-    }
-    focusAddItemButton() {
-        if (this.combo.isAddButtonVisible()) {
-            this.focusedItem = this.items[this.items.length - 1];
-        }
-    }
-}
-IgxComboDropDownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboDropDownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: IGX_COMBO_COMPONENT }, { token: IgxComboAPIService }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-IgxComboDropDownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], queries: [{ propertyName: "children", predicate: IgxComboItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\nigxToggle\n(appended)=\"onToggleContentAppended($event)\"\n(opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n(closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-label]=\"this.listId\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n", directives: [{ type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboDropDownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'igx-combo-drop-down', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\nigxToggle\n(appended)=\"onToggleContentAppended($event)\"\n(opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n(closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-label]=\"this.listId\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [IGX_COMBO_COMPONENT]
-                }] }, { type: IgxComboAPIService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DisplayDensityToken]
-                }] }]; }, propDecorators: { children: [{
-                type: ContentChildren,
-                args: [IgxComboItemComponent, { descendants: true }]
-            }] } });
-
-/**
- * @hidden
- */
-class IgxComboFilteringPipe {
-    transform(collection, searchValue, displayKey, shouldFilter, filteringOptions) {
-        if (!collection) {
-            return [];
-        }
-        if (!searchValue || !shouldFilter) {
-            return collection;
-        }
-        else {
-            const searchTerm = filteringOptions.caseSensitive ? searchValue.trim() : searchValue.toLowerCase().trim();
-            if (displayKey != null) {
-                return collection.filter(e => filteringOptions.caseSensitive ? e[displayKey].includes(searchTerm) :
-                    e[displayKey].toString().toLowerCase().includes(searchTerm));
-            }
-            else {
-                return collection.filter(e => filteringOptions.caseSensitive ? e.includes(searchTerm) :
-                    e.toLowerCase().includes(searchTerm));
-            }
-        }
-    }
-}
-IgxComboFilteringPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-IgxComboFilteringPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboFilteringPipe, name: "comboFiltering" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboFilteringPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'comboFiltering'
-                }]
-        }] });
-/**
- * @hidden
- */
-class IgxComboGroupingPipe {
-    constructor(combo) {
-        this.combo = combo;
-    }
-    transform(collection, groupKey, valueKey, sortingDirection) {
-        this.combo.filteredData = collection;
-        if ((!groupKey && groupKey !== 0) || !collection.length) {
-            return collection;
-        }
-        const sorted = DataUtil.sort(cloneArray(collection), [{
-                fieldName: groupKey,
-                dir: sortingDirection,
-                ignoreCase: true,
-                strategy: DefaultSortingStrategy.instance()
-            }]);
-        const data = cloneArray(sorted);
-        let inserts = 0;
-        let currentHeader = null;
-        for (let i = 0; i < sorted.length; i++) {
-            let insertFlag = 0;
-            if (currentHeader !== sorted[i][groupKey]) {
-                currentHeader = sorted[i][groupKey];
-                insertFlag = 1;
-            }
-            if (insertFlag) {
-                data.splice(i + inserts, 0, {
-                    [valueKey]: currentHeader,
-                    [groupKey]: currentHeader,
-                    isHeader: true
-                });
-                inserts++;
-            }
-        }
-        return data;
-    }
-}
-IgxComboGroupingPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboGroupingPipe, deps: [{ token: IGX_COMBO_COMPONENT }], target: i0.ɵɵFactoryTarget.Pipe });
-IgxComboGroupingPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboGroupingPipe, name: "comboGrouping" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboGroupingPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'comboGrouping'
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [IGX_COMBO_COMPONENT]
-                }] }]; } });
-
+let NEXT_ID$d = 0;
 /**
  * @hidden
+ * The default number of items that should be in the combo's
+ * drop-down list if no `[itemsMaxHeight]` is specified
  */
+const itemsInContainer = 10; // TODO: make private readonly
+/** @hidden @internal */
+const ItemHeights = {
+    comfortable: 40,
+    cosy: 32,
+    compact: 28,
+};
+/** @hidden @internal */
 var DataTypes;
 (function (DataTypes) {
     DataTypes["EMPTY"] = "empty";
@@ -33936,20 +33638,6 @@ var DataTypes;
     DataTypes["COMPLEX"] = "complex";
     DataTypes["PRIMARYKEY"] = "valueKey";
 })(DataTypes || (DataTypes = {}));
-/**
- * @hidden
- */
-const ItemHeights = {
-    comfortable: 40,
-    cosy: 32,
-    compact: 28,
-};
-/**
- * @hidden
- * The default number of items that should be in the combo's
- * drop-down list if no `[itemsMaxHeight]` is specified
- */
-const itemsInContainer = 10;
 var IgxComboState;
 (function (IgxComboState) {
     /**
@@ -33965,46 +33653,12 @@ var IgxComboState;
      */
     IgxComboState[IgxComboState["INVALID"] = 2] = "INVALID";
 })(IgxComboState || (IgxComboState = {}));
-/**
- * When called with sets A & B, returns A - B (as array);
- *
- * @hidden
- */
-const diffInSets = (set1, set2) => {
-    const results = [];
-    set1.forEach(entry => {
-        if (!set2.has(entry)) {
-            results.push(entry);
-        }
-    });
-    return results;
-};
-let NEXT_ID$d = 0;
-/**
- *  Represents a drop-down list that provides editable functionalities, allowing users to choose an option from a predefined list.
- *
- * @igxModule IgxComboModule
- * @igxTheme igx-combo-theme
- * @igxKeywords combobox, combo selection
- * @igxGroup Grids & Lists
- *
- * @remarks
- * It provides the ability to filter items as well as perform single or multiple seleciton with the provided data.
- * Additionally, it exposes keyboard navigation and custom styling capabilities.
- * @example
- * ```html
- * <igx-combo [itemsMaxHeight]="250" [data]="locationData"
- *  [displayKey]="'field'" [valueKey]="'field'"
- *  placeholder="Location(s)" searchPlaceholder="Search...">
- * </igx-combo>
- * ```
- */
-class IgxComboComponent extends DisplayDensityBase {
-    constructor(elementRef, cdr, selection, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) {
+class IgxComboBaseDirective extends DisplayDensityBase {
+    constructor(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) {
         super(_displayDensityOptions);
         this.elementRef = elementRef;
         this.cdr = cdr;
-        this.selection = selection;
+        this.selectionService = selectionService;
         this.comboAPI = comboAPI;
         this._iconService = _iconService;
         this._displayDensityOptions = _displayDensityOptions;
@@ -34028,9 +33682,123 @@ class IgxComboComponent extends DisplayDensityBase {
          */
         this.overlaySettings = null;
         /**
-         * @hidden @internal
+         * Gets/gets combo id.
+         *
+         * ```typescript
+         * // get
+         * let id = this.combo.id;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [id]='combo1'></igx-combo>
+         * ```
          */
-        this.searchInput = null;
+        this.id = `igx-combo-${NEXT_ID$d++}`;
+        /**
+         * Controls whether custom values can be added to the collection
+         *
+         * ```typescript
+         * // get
+         * let comboAllowsCustomValues = this.combo.allowCustomValues;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [allowCustomValues]='true'></igx-combo>
+         * ```
+         */
+        this.allowCustomValues = false;
+        /**
+         * Determines which column in the data source is used to determine the value.
+         *
+         * ```typescript
+         * // get
+         * let myComboValueKey = this.combo.valueKey;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [valueKey]='myKey'></igx-combo>
+         * ```
+         */
+        this.valueKey = null;
+        /** @hidden @internal */
+        this.cssClass = 'igx-combo'; // Independent of display density for the time being
+        /** @hidden @internal */
+        this.role = 'combobox';
+        /**
+         * An @Input property that enabled/disables combo. The default is `false`.
+         * ```html
+         * <igx-combo [disabled]="'true'">
+         * ```
+         */
+        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
+         *
+         * ```html
+         * <igx-combo opening='handleOpening($event)'></igx-combo>
+         * ```
+         */
+        this.opening = new EventEmitter();
+        /**
+         * Emitted after the dropdown is opened
+         *
+         * ```html
+         * <igx-combo (opened)='handleOpened($event)'></igx-combo>
+         * ```
+         */
+        this.opened = new EventEmitter();
+        /**
+         * Emitted before the dropdown is closed
+         *
+         * ```html
+         * <igx-combo (closing)='handleClosing($event)'></igx-combo>
+         * ```
+         */
+        this.closing = new EventEmitter();
+        /**
+         * Emitted after the dropdown is closed
+         *
+         * ```html
+         * <igx-combo (closed)='handleClosed($event)'></igx-combo>
+         * ```
+         */
+        this.closed = new EventEmitter();
+        /**
+         * Emitted when an item is being added to the data collection
+         *
+         * ```html
+         * <igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
+         * ```
+         */
+        this.addition = new EventEmitter();
+        /**
+         * Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)
+         *
+         * ```html
+         * <igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
+         * ```
+         */
+        this.searchInputUpdate = new EventEmitter();
+        /**
+         * Emitted when new chunk of data is loaded from the virtualization
+         *
+         * ```html
+         * <igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
+         * ```
+         */
+        this.dataPreLoad = new EventEmitter();
         /**
          * The custom template, if any, that should be used when rendering ITEMS in the combo list
          *
@@ -34194,207 +33962,34 @@ class IgxComboComponent extends DisplayDensityBase {
          * ```
          */
         this.clearIconTemplate = null;
-        /**
-         * Emitted when item selection is changing, before the selection completes
-         *
-         * ```html
-         * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
-         * ```
-         */
-        this.selectionChanging = new EventEmitter();
-        /**
-         * Emitted before the dropdown is opened
-         *
-         * ```html
-         * <igx-combo opening='handleOpening($event)'></igx-combo>
-         * ```
-         */
-        this.opening = new EventEmitter();
-        /**
-         * Emitted after the dropdown is opened
-         *
-         * ```html
-         * <igx-combo (opened)='handleOpened($event)'></igx-combo>
-         * ```
-         */
-        this.opened = new EventEmitter();
-        /**
-         * Emitted before the dropdown is closed
-         *
-         * ```html
-         * <igx-combo (closing)='handleClosing($event)'></igx-combo>
-         * ```
-         */
-        this.closing = new EventEmitter();
-        /**
-         * Emitted after the dropdown is closed
-         *
-         * ```html
-         * <igx-combo (closed)='handleClosed($event)'></igx-combo>
-         * ```
-         */
-        this.closed = new EventEmitter();
-        /**
-         * Emitted when an item is being added to the data collection
-         *
-         * ```html
-         * <igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
-         * ```
-         */
-        this.addition = new EventEmitter();
-        /**
-         * Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)
-         *
-         * ```html
-         * <igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
-         * ```
-         */
-        this.searchInputUpdate = new EventEmitter();
-        /**
-         * Emitted when new chunk of data is loaded from the virtualization
-         *
-         * ```html
-         * <igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
-         * ```
-         */
-        this.dataPreLoad = new EventEmitter();
-        /**
-         * Gets/gets combo id.
-         *
-         * ```typescript
-         * // get
-         * let id = this.combo.id;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [id]='combo1'></igx-combo>
-         * ```
-         */
-        this.id = `igx-combo-${NEXT_ID$d++}`;
-        /**
-         * @hidden @internal
-         */
-        this.cssClass = 'igx-combo'; // Independent of display density, at the time being
-        /**
-         * @hidden @internal
-         */
-        this.role = 'combobox';
-        /**
-         * Controls whether custom values can be added to the collection
-         *
-         * ```typescript
-         * // get
-         * let comboAllowsCustomValues = this.combo.allowCustomValues;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [allowCustomValues]='true'></igx-combo>
-         * ```
-         */
-        this.allowCustomValues = false;
-        /**
-         * Defines the placeholder value for the combo dropdown search field
-         *
-         * ```typescript
-         * // get
-         * let myComboSearchPlaceholder = this.combo.searchPlaceholder;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
-         * ```
-         */
-        this.searchPlaceholder = 'Enter a Search Term';
-        /**
-         * 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;
-        /**
-         * Combo value data source property.
-         *
-         * ```typescript
-         * // get
-         * let myComboValueKey = this.combo.valueKey;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [valueKey]='myKey'></igx-combo>
-         * ```
-         */
-        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;
-        /**
-         * An @Input property that enabled/disables combo. The default is `false`.
-         * ```html
-         * <igx-combo [disabled]="'true'">
-         * ```
-         */
-        this.disabled = false;
-        /**
-         * An @Input property that controls whether the combo's search box
-         * should be focused after the `opened` event is called
-         * When `false`, the combo's list item container will be focused instead
-         */
-        this.autoFocusSearch = true;
+        /** @hidden @internal */
+        this.searchInput = null;
         this.dropdownContainer = null;
-        /**
-         * @hidden @internal
-         */
+        /** @hidden @internal */
         this.customValueFlag = true;
-        /**
-         * @hidden @internal
-         */
+        /** @hidden @internal */
+        this.filterValue = '';
+        /** @hidden @internal */
         this.defaultFallbackGroup = 'Other';
-        /**
-         * @hidden @internal
-         */
+        /** @hidden @internal */
         this.filteringOptions = {
             caseSensitive: false
         };
-        /**
-         * @hidden @internal
-         */
-        this.filteringLogic = FilteringLogic.Or;
-        /** @hidden @internal */
-        this.filterValue = '';
-        this.stringFilters = IgxStringFilteringOperand;
-        this.booleanFilters = IgxBooleanFilteringOperand;
+        this._data = [];
+        this._value = '';
         this._groupKey = '';
-        this._prevInputValue = '';
-        this._dataType = '';
-        this._searchValue = '';
-        this._type = null;
+        this._filteredData = [];
+        this._remoteSelection = {};
+        this._valid = IgxComboState.INITIAL;
         this.ngControl = null;
         this.destroy$ = new Subject();
-        this._data = [];
-        this._filteredData = [];
+        this._onTouchedCallback = noop;
+        this._onChangeCallback = noop;
+        this._type = null;
+        this._dataType = '';
+        this._searchValue = '';
         this._itemHeight = null;
         this._itemsMaxHeight = null;
-        this._remoteSelection = {};
-        this._onChangeCallback = noop;
-        this._onTouchedCallback = noop;
-        this._value = '';
-        this._valid = IgxComboState.INITIAL;
         this._groupSortingDirection = SortingDirection.Asc;
         this.onStatusChanged = () => {
             if ((this.ngControl.control.touched || this.ngControl.control.dirty) &&
@@ -34412,31 +34007,10 @@ class IgxComboComponent extends DisplayDensityBase {
             }
             this.manageRequiredAsterisk();
         };
-        this.comboAPI.register(this);
-    }
-    /**
-     * @hidden @internal
-     */
-    get displaySearchInput() {
-        return this.filterable || this.allowCustomValues;
-    }
-    /**
-     * @hidden @internal
-     */
-    get ariaExpanded() {
-        return !this.dropdown.collapsed;
-    }
-    /**
-     * @hidden @internal
-     */
-    get hasPopUp() {
-        return 'listbox';
-    }
-    /**
-     * @hidden @internal
-     */
-    get ariaOwns() {
-        return this.dropdown.id;
+        this.findMatch = (element) => {
+            const value = this.displayKey ? element[this.displayKey] : element;
+            return value.toString().toLowerCase() === this.searchValue.trim().toLowerCase();
+        };
     }
     /**
      * Configures the drop down list height
@@ -34482,12 +34056,6 @@ class IgxComboComponent extends DisplayDensityBase {
     set itemHeight(val) {
         this._itemHeight = val;
     }
-    /**
-     * @hidden @internal
-     */
-    get inputEmpty() {
-        return !this.value && !this.placeholder;
-    }
     /**
      * Combo data source.
      *
@@ -34506,7 +34074,7 @@ class IgxComboComponent extends DisplayDensityBase {
         this._displayKey = val;
     }
     /**
-     * Combo text data source property.
+     * Determines which column in the data source is used to determine the display value.
      *
      * ```typescript
      * // get
@@ -34564,6 +34132,18 @@ class IgxComboComponent extends DisplayDensityBase {
     set groupSortingDirection(val) {
         this._groupSortingDirection = val;
     }
+    /** @hidden @internal */
+    get ariaExpanded() {
+        return !this.dropdown.collapsed;
+    }
+    /** @hidden @internal */
+    get hasPopUp() {
+        return 'listbox';
+    }
+    /** @hidden @internal */
+    get ariaOwns() {
+        return this.dropdown.id;
+    }
     /**
      * An @Input property that sets how the combo will be styled.
      * The allowed values are `line`, `box`, `border` and `search`. The default is `box`.
@@ -34577,6 +34157,27 @@ class IgxComboComponent extends DisplayDensityBase {
     set type(val) {
         this._type = val;
     }
+    /** @hidden @internal */
+    get searchValue() {
+        return this._searchValue;
+    }
+    set searchValue(val) {
+        this.filterValue = val;
+        this._searchValue = val;
+    }
+    /** @hidden @internal */
+    get isRemote() {
+        return this.totalItemCount > 0 &&
+            this.valueKey &&
+            this.dataType === DataTypes.COMPLEX;
+    }
+    /** @hidden @internal */
+    get dataType() {
+        if (this.displayKey) {
+            return DataTypes.COMPLEX;
+        }
+        return DataTypes.PRIMITIVE;
+    }
     /**
      * Gets if control is valid, when used in a form
      *
@@ -34601,32 +34202,15 @@ class IgxComboComponent extends DisplayDensityBase {
         this.comboInput.valid = IgxInputState[IgxComboState[valid]];
     }
     /**
-     * @hidden @internal
-     */
-    get searchValue() {
-        return this._searchValue;
-    }
-    set searchValue(val) {
-        this.filterValue = val;
-        this._searchValue = val;
-    }
-    /**
-     * @hidden @internal
-     */
-    onArrowDown(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.open();
-    }
-    /**
-     * @hidden @internal
+     * The text displayed in the combo input
+     *
+     * ```typescript
+     * // get
+     * let comboValue = this.combo.value;
+     * ```
      */
-    onInputClick(event) {
-        event.stopPropagation();
-        event.preventDefault();
-        if (!this.disabled) {
-            this.toggle();
-        }
+    get value() {
+        return this._value;
     }
     /**
      * Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize`
@@ -34650,6 +34234,16 @@ class IgxComboComponent extends DisplayDensityBase {
     set virtualizationState(state) {
         this.virtDir.state = state;
     }
+    /**
+     * Gets drop down state.
+     *
+     * ```typescript
+     * let state = this.combo.collapsed;
+     * ```
+     */
+    get collapsed() {
+        return this.dropdown.collapsed;
+    }
     /**
      * Gets total count of the virtual data items, when using remote service.
      *
@@ -34672,34 +34266,865 @@ class IgxComboComponent extends DisplayDensityBase {
     set totalItemCount(count) {
         this.virtDir.totalItemCount = count;
     }
+    /** @hidden @internal */
+    get template() {
+        this._dataType = this.dataType;
+        if (this.itemTemplate) {
+            return this.itemTemplate;
+        }
+        if (this._dataType === DataTypes.COMPLEX) {
+            return this.complexTemplate;
+        }
+        return this.primitiveTemplate;
+    }
+    /** @hidden @internal */
+    onArrowDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open();
+    }
+    /** @hidden @internal */
+    ngOnInit() {
+        this.ngControl = this._injector.get(NgControl, null);
+        const targetElement = this.elementRef.nativeElement;
+        this._overlaySettings = {
+            target: targetElement,
+            scrollStrategy: new AbsoluteScrollStrategy(),
+            positionStrategy: new AutoPositionStrategy(),
+            modal: false,
+            closeOnOutsideClick: true,
+            excludeFromOutsideClick: [targetElement]
+        };
+        this.selectionService.set(this.id, new Set());
+        this._iconService.addSvgIconFromText(caseSensitive.name, caseSensitive.value, 'imx-icons');
+    }
+    /** @hidden @internal */
+    ngAfterViewInit() {
+        this.filteredData = [...this.data];
+        if (this.ngControl) {
+            this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
+            this.manageRequiredAsterisk();
+            this.cdr.detectChanges();
+        }
+        this.virtDir.chunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e) => {
+            const eventArgs = Object.assign({}, e, { owner: this });
+            this.dataPreLoad.emit(eventArgs);
+        });
+    }
+    /** @hidden @internal */
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.comboAPI.clear();
+        this.selectionService.clear(this.id);
+    }
     /**
-     * The text displayed in the combo input
+     * A method that opens/closes the combo.
      *
-     * ```typescript
-     * // get
-     * let comboValue = this.combo.value;
+     * ```html
+     * <button (click)="combo.toggle()">Toggle Combo</button>
+     * <igx-combo #combo></igx-combo>
      * ```
      */
-    get value() {
-        return this._value;
+    toggle() {
+        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+        this.dropdown.toggle(overlaySettings);
     }
     /**
-     * @hidden @internal
+     * A method that opens the combo.
+     *
+     * ```html
+     * <button (click)="combo.open()">Open Combo</button>
+     * <igx-combo #combo></igx-combo>
+     * ```
      */
-    get filteredData() {
-        return this.filterable ? this._filteredData : this.data;
+    open() {
+        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+        this.dropdown.open(overlaySettings);
     }
     /**
-     * @hidden @internal
+     * A method that closes the combo.
+     *
+     * ```html
+     * <button (click)="combo.close()">Close Combo</button>
+     * <igx-combo #combo></igx-combo>
+     * ```
      */
-    set filteredData(val) {
-        this._filteredData = this.groupKey ? (val || []).filter((e) => e.isHeader !== true) : val;
+    close() {
+        this.dropdown.close();
+    }
+    /**
+     * Triggers change detection on the combo view
+     */
+    triggerCheck() {
+        this.cdr.detectChanges();
+    }
+    /**
+     * Get current selection state
+     *
+     * @returns Array of selected items
+     * ```typescript
+     * let selectedItems = this.combo.selectedItems();
+     * ```
+     */
+    get selection() {
+        const items = Array.from(this.selectionService.get(this.id));
+        return items;
+    }
+    /**
+     * Returns if the specified itemID is selected
+     *
+     * @hidden
+     * @internal
+     */
+    isItemSelected(item) {
+        return this.selectionService.is_item_selected(this.id, item);
+    }
+    /** @hidden @internal */
+    addItemToCollection() {
+        if (!this.searchValue) {
+            return;
+        }
+        const newValue = this.searchValue.trim();
+        const addedItem = this.displayKey ? {
+            [this.valueKey]: newValue,
+            [this.displayKey]: newValue
+        } : newValue;
+        if (this.groupKey) {
+            Object.assign(addedItem, { [this.groupKey]: this.defaultFallbackGroup });
+        }
+        // expose shallow copy instead of this.data in event args so this.data can't be mutated
+        const oldCollection = [...this.data];
+        const newCollection = [...this.data, addedItem];
+        const args = {
+            oldCollection, addedItem, newCollection, owner: this, cancel: false
+        };
+        this.addition.emit(args);
+        if (args.cancel) {
+            return;
+        }
+        this.data.push(args.addedItem);
+        // trigger re-render
+        this.data = cloneArray(this.data);
+        this.select(this.valueKey !== null && this.valueKey !== undefined ?
+            [args.addedItem[this.valueKey]] : [args.addedItem], false);
+        this.customValueFlag = false;
+        this.searchInput?.nativeElement.focus();
+        this.dropdown.focusedItem = null;
+        this.virtDir.scrollTo(0);
+    }
+    /** @hidden @internal */
+    isAddButtonVisible() {
+        // This should always return a boolean value. If this.searchValue was '', it returns '' instead of false;
+        return this.searchValue !== '' && this.customValueFlag;
+    }
+    /** @hidden @internal */
+    handleInputChange(event) {
+        if (event !== undefined) {
+            const args = {
+                searchText: typeof event === 'string' ? event : event.target.value,
+                owner: this,
+                cancel: false
+            };
+            this.searchInputUpdate.emit(args);
+            if (args.cancel) {
+                this.filterValue = null;
+            }
+        }
+        this.checkMatch();
+    }
+    /**
+     * Event handlers
+     *
+     * @hidden
+     * @internal
+     */
+    handleOpening(e) {
+        const args = { owner: this, event: e.event, cancel: e.cancel };
+        this.opening.emit(args);
+        e.cancel = args.cancel;
+    }
+    /** @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.searchValue = '';
+        if (!e.event) {
+            this.comboInput?.nativeElement.focus();
+        }
+    }
+    /** @hidden @internal */
+    handleClosed() {
+        this.closed.emit({ owner: this });
+    }
+    /** @hidden @internal */
+    handleKeyDown(event) {
+        if (event.key === 'ArrowUp' || event.key === 'Up') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+        }
+    }
+    /** @hidden @internal */
+    registerOnChange(fn) {
+        this._onChangeCallback = fn;
+    }
+    /** @hidden @internal */
+    registerOnTouched(fn) {
+        this._onTouchedCallback = fn;
+    }
+    /** @hidden @internal */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /** @hidden @internal */
+    onClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (!this.disabled) {
+            this.toggle();
+        }
+    }
+    /** @hidden @internal */
+    onBlur() {
+        if (this.collapsed) {
+            this._onTouchedCallback();
+            if (this.ngControl && this.ngControl.invalid) {
+                this.valid = IgxComboState.INVALID;
+            }
+            else {
+                this.valid = IgxComboState.INITIAL;
+            }
+        }
+    }
+    /** if there is a valueKey - map the keys to data items, else - just return the keys */
+    convertKeysToItems(keys) {
+        if (this.comboAPI.valueKey === null) {
+            return keys;
+        }
+        // map keys vs. filter data to retain the order of the selected items
+        return keys.map(key => this.data.find(entry => entry[this.valueKey] === key)).filter(e => e !== undefined);
+    }
+    checkMatch() {
+        const itemMatch = this.filteredData.some(this.findMatch);
+        this.customValueFlag = this.allowCustomValues && !itemMatch;
+    }
+    manageRequiredAsterisk() {
+        if (this.ngControl && this.ngControl.control.validator) {
+            // Run the validation with empty object to check if required is enabled.
+            const error = this.ngControl.control.validator({});
+            this.inputGroup.isRequired = error && error.required;
+        }
+    }
+    /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
+    registerRemoteEntries(ids, add = true) {
+        if (add) {
+            const selection = this.getValueDisplayPairs(ids);
+            for (const entry of selection) {
+                this._remoteSelection[entry[this.valueKey]] = entry[this.displayKey];
+            }
+        }
+        else {
+            for (const entry of ids) {
+                delete this._remoteSelection[entry];
+            }
+        }
+    }
+    /**
+     * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]`
+     */
+    getValueDisplayPairs(ids) {
+        return this.data.filter(entry => ids.indexOf(entry[this.valueKey]) > -1).map(e => ({
+            [this.valueKey]: e[this.valueKey],
+            [this.displayKey]: e[this.displayKey]
+        }));
+    }
+    getRemoteSelection(newSelection, oldSelection) {
+        if (!newSelection.length) {
+            // If new selection is empty, clear all items
+            this.registerRemoteEntries(oldSelection, false);
+            return '';
+        }
+        const removedItems = oldSelection.filter(e => newSelection.indexOf(e) < 0);
+        const addedItems = newSelection.filter(e => oldSelection.indexOf(e) < 0);
+        this.registerRemoteEntries(addedItems);
+        this.registerRemoteEntries(removedItems, false);
+        return Object.keys(this._remoteSelection).map(e => this._remoteSelection[e]).join(', ');
+    }
+}
+IgxComboBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: IgxComboAPIService }, { token: IgxIconService }, { token: DisplayDensityToken, optional: true }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: i0.Injector, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+IgxComboBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboBaseDirective, inputs: { overlaySettings: "overlaySettings", id: "id", width: "width", allowCustomValues: "allowCustomValues", itemsMaxHeight: "itemsMaxHeight", itemHeight: "itemHeight", itemsWidth: "itemsWidth", placeholder: "placeholder", data: "data", valueKey: "valueKey", displayKey: "displayKey", groupKey: "groupKey", groupSortingDirection: "groupSortingDirection", ariaLabelledBy: "ariaLabelledBy", disabled: "disabled", type: "type" }, outputs: { selectionChanging: "selectionChanging", opening: "opening", opened: "opened", closing: "closing", closed: "closed", addition: "addition", searchInputUpdate: "searchInputUpdate", dataPreLoad: "dataPreLoad" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)" }, properties: { "attr.id": "this.id", "style.width": "this.width", "attr.aria-labelledby": "this.ariaLabelledBy", "class.igx-combo": "this.cssClass", "attr.role": "this.role", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-haspopup": "this.hasPopUp", "attr.aria-owns": "this.ariaOwns" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: IgxComboItemDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxComboHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxComboFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "headerItemTemplate", first: true, predicate: IgxComboHeaderItemDirective, descendants: true, read: TemplateRef }, { propertyName: "addItemTemplate", first: true, predicate: IgxComboAddItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: IgxComboEmptyDirective, descendants: true, read: TemplateRef }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxComboToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "clearIconTemplate", first: true, predicate: IgxComboClearIconDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "comboInput", first: true, predicate: ["comboInput"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "virtualScrollContainer", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, read: IgxForOfDirective, static: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownItemContainer"], descendants: true, static: true }, { propertyName: "primitiveTemplate", first: true, predicate: ["primitive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexTemplate", first: true, predicate: ["complex"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboBaseDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DisplayDensityToken]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IGX_INPUT_GROUP_TYPE]
+                }] }, { type: i0.Injector, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { overlaySettings: [{
+                type: Input
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width']
+            }, {
+                type: Input
+            }], allowCustomValues: [{
+                type: Input
+            }], itemsMaxHeight: [{
+                type: Input
+            }], itemHeight: [{
+                type: Input
+            }], itemsWidth: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], valueKey: [{
+                type: Input
+            }], displayKey: [{
+                type: Input
+            }], groupKey: [{
+                type: Input
+            }], groupSortingDirection: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], cssClass: [{
+                type: HostBinding,
+                args: ['class.igx-combo']
+            }], role: [{
+                type: HostBinding,
+                args: [`attr.role`]
+            }], ariaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], hasPopUp: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], 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
+            }], closed: [{
+                type: Output
+            }], addition: [{
+                type: Output
+            }], searchInputUpdate: [{
+                type: Output
+            }], dataPreLoad: [{
+                type: Output
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [IgxComboItemDirective, { read: TemplateRef }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [IgxComboHeaderDirective, { read: TemplateRef }]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [IgxComboFooterDirective, { read: TemplateRef }]
+            }], headerItemTemplate: [{
+                type: ContentChild,
+                args: [IgxComboHeaderItemDirective, { read: TemplateRef }]
+            }], addItemTemplate: [{
+                type: ContentChild,
+                args: [IgxComboAddItemDirective, { read: TemplateRef }]
+            }], emptyTemplate: [{
+                type: ContentChild,
+                args: [IgxComboEmptyDirective, { read: TemplateRef }]
+            }], toggleIconTemplate: [{
+                type: ContentChild,
+                args: [IgxComboToggleIconDirective, { read: TemplateRef }]
+            }], clearIconTemplate: [{
+                type: ContentChild,
+                args: [IgxComboClearIconDirective, { read: TemplateRef }]
+            }], inputGroup: [{
+                type: ViewChild,
+                args: ['inputGroup', { read: IgxInputGroupComponent, static: true }]
+            }], comboInput: [{
+                type: ViewChild,
+                args: ['comboInput', { read: IgxInputDirective, static: true }]
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], virtualScrollContainer: [{
+                type: ViewChild,
+                args: [IgxForOfDirective, { static: true }]
+            }], virtDir: [{
+                type: ViewChild,
+                args: [IgxForOfDirective, { read: IgxForOfDirective, static: true }]
+            }], dropdownContainer: [{
+                type: ViewChild,
+                args: ['dropdownItemContainer', { static: true }]
+            }], primitiveTemplate: [{
+                type: ViewChild,
+                args: ['primitive', { read: TemplateRef, static: true }]
+            }], complexTemplate: [{
+                type: ViewChild,
+                args: ['complex', { read: TemplateRef, static: true }]
+            }], onArrowDown: [{
+                type: HostListener,
+                args: ['keydown.ArrowDown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.Alt.ArrowDown', ['$event']]
+            }] } });
+
+/**
+ * @hidden
+ */
+class IgxComboAddItemComponent extends IgxComboItemComponent {
+    get selected() {
+        return false;
+    }
+    set selected(value) {
+    }
+    /**
+     * @inheritdoc
+     */
+    clicked(event) {
+        this.comboAPI.disableTransitions = false;
+        this.comboAPI.add_custom_item();
+    }
+}
+IgxComboAddItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+IgxComboAddItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboAddItemComponent, selector: "igx-combo-add-item", providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'igx-combo-add-item',
+                    template: '<ng-content></ng-content>',
+                    providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }]
+                }]
+        }] });
+
+/** @hidden */
+class IgxComboDropDownComponent extends IgxDropDownComponent {
+    constructor(elementRef, cdr, selection, combo, comboAPI, _displayDensityOptions) {
+        super(elementRef, cdr, selection, _displayDensityOptions);
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.selection = selection;
+        this.combo = combo;
+        this.comboAPI = comboAPI;
+        this._displayDensityOptions = _displayDensityOptions;
+        /** @hidden @internal */
+        this.singleMode = false;
+        /**
+         * @hidden
+         * @internal
+         */
+        this.children = null;
+        this.scrollHandler = () => {
+            this.comboAPI.disableTransitions = true;
+        };
+    }
+    /** @hidden @internal */
+    get scrollContainer() {
+        return this.virtDir.dc.location.nativeElement;
+    }
+    get isScrolledToLast() {
+        const scrollTop = this.virtDir.scrollPosition;
+        const scrollHeight = this.virtDir.getScroll().scrollHeight;
+        return Math.floor(scrollTop + this.virtDir.igxForContainerSize) === scrollHeight;
+    }
+    get lastVisibleIndex() {
+        return this.combo.totalItemCount ?
+            Math.floor(this.combo.itemsMaxHeight / this.combo.itemHeight) :
+            this.items.length - 1;
+    }
+    get sortedChildren() {
+        if (this.children !== undefined) {
+            return this.children.toArray()
+                .sort((a, b) => a.index - b.index);
+        }
+        return null;
+    }
+    /**
+     * Get all non-header items
+     *
+     * ```typescript
+     * let myDropDownItems = this.dropdown.items;
+     * ```
+     */
+    get items() {
+        const items = [];
+        if (this.children !== undefined) {
+            const sortedChildren = this.sortedChildren;
+            for (const child of sortedChildren) {
+                if (!child.isHeader) {
+                    items.push(child);
+                }
+            }
+        }
+        return items;
+    }
+    /**
+     * @hidden @internal
+     */
+    onFocus() {
+        this.focusedItem = this._focusedItem || this.items[0];
+    }
+    /**
+     * @hidden @internal
+     */
+    onBlur(_evt) {
+        this.focusedItem = null;
+    }
+    /**
+     * @hidden @internal
+     */
+    onToggleOpened() {
+        this.opened.emit();
+    }
+    /**
+     * @hidden
+     */
+    navigateFirst() {
+        this.navigateItem(this.virtDir.igxForOf.findIndex(e => !e.isHeader));
+    }
+    /**
+     * @hidden
+     */
+    navigatePrev() {
+        if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
+            this.combo.focusSearchInput(false);
+        }
+        else {
+            super.navigatePrev();
+        }
+    }
+    /**
+     * @hidden
+     */
+    navigateNext() {
+        const lastIndex = this.combo.totalItemCount ? this.combo.totalItemCount - 1 : this.virtDir.igxForOf.length - 1;
+        if (this._focusedItem && this._focusedItem.index === lastIndex) {
+            this.focusAddItemButton();
+        }
+        else {
+            super.navigateNext();
+        }
+    }
+    /**
+     * @hidden @internal
+     */
+    selectItem(item) {
+        if (item === null || item === undefined) {
+            return;
+        }
+        this.comboAPI.set_selected_item(item.itemID);
+        this._focusedItem = item;
+    }
+    /**
+     * @hidden @internal
+     */
+    updateScrollPosition() {
+        this.virtDir.getScroll().scrollTop = this._scrollPosition;
+    }
+    /**
+     * @hidden @internal
+     */
+    onItemActionKey(key) {
+        switch (key) {
+            case DropDownActionKey.ENTER:
+                this.handleEnter();
+                break;
+            case DropDownActionKey.SPACE:
+                this.handleSpace();
+                break;
+            case DropDownActionKey.ESCAPE:
+                this.close();
+        }
+    }
+    ngAfterViewInit() {
+        this.virtDir.getScroll().addEventListener('scroll', this.scrollHandler);
+    }
+    /**
+     * @hidden @internal
+     */
+    ngOnDestroy() {
+        this.virtDir.getScroll().removeEventListener('scroll', this.scrollHandler);
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    scrollToHiddenItem(_newItem) { }
+    handleEnter() {
+        if (this.isAddItemFocused()) {
+            this.combo.addItemToCollection();
+            return;
+        }
+        if (this.singleMode && this.focusedItem) {
+            this.combo.select(this.focusedItem.itemID);
+        }
+        this.close();
+    }
+    handleSpace() {
+        if (this.isAddItemFocused()) {
+            return;
+        }
+        else {
+            this.selectItem(this.focusedItem);
+        }
+    }
+    isAddItemFocused() {
+        return this.focusedItem instanceof IgxComboAddItemComponent;
+    }
+    focusAddItemButton() {
+        if (this.combo.isAddButtonVisible()) {
+            this.focusedItem = this.items[this.items.length - 1];
+        }
+    }
+}
+IgxComboDropDownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboDropDownComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: IGX_COMBO_COMPONENT }, { token: IgxComboAPIService }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+IgxComboDropDownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: { singleMode: "singleMode" }, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], queries: [{ propertyName: "children", predicate: IgxComboItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\nigxToggle\n(appended)=\"onToggleContentAppended($event)\"\n(opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n(closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-label]=\"this.listId\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n", directives: [{ type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboDropDownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igx-combo-drop-down', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\nigxToggle\n(appended)=\"onToggleContentAppended($event)\"\n(opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n(closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-label]=\"this.listId\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [IGX_COMBO_COMPONENT]
+                }] }, { type: IgxComboAPIService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DisplayDensityToken]
+                }] }]; }, propDecorators: { singleMode: [{
+                type: Input
+            }], children: [{
+                type: ContentChildren,
+                args: [IgxComboItemComponent, { descendants: true }]
+            }] } });
+
+/**
+ * @hidden
+ */
+class IgxComboFilteringPipe {
+    transform(collection, searchValue, displayKey, filteringOptions, shouldFilter = false) {
+        if (!collection) {
+            return [];
+        }
+        if (!searchValue || !shouldFilter) {
+            return collection;
+        }
+        else {
+            const searchTerm = filteringOptions.caseSensitive ? searchValue.trim() : searchValue.toLowerCase().trim();
+            if (displayKey != null) {
+                return collection.filter(e => filteringOptions.caseSensitive ? e[displayKey].includes(searchTerm) :
+                    e[displayKey].toString().toLowerCase().includes(searchTerm));
+            }
+            else {
+                return collection.filter(e => filteringOptions.caseSensitive ? e.includes(searchTerm) :
+                    e.toString().toLowerCase().includes(searchTerm));
+            }
+        }
+    }
+}
+IgxComboFilteringPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+IgxComboFilteringPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboFilteringPipe, name: "comboFiltering" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboFilteringPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'comboFiltering'
+                }]
+        }] });
+/**
+ * @hidden
+ */
+class IgxComboGroupingPipe {
+    constructor(combo) {
+        this.combo = combo;
+    }
+    transform(collection, groupKey, valueKey, sortingDirection) {
+        this.combo.filteredData = collection;
+        if ((!groupKey && groupKey !== 0) || !collection.length) {
+            return collection;
+        }
+        const sorted = DataUtil.sort(cloneArray(collection), [{
+                fieldName: groupKey,
+                dir: sortingDirection,
+                ignoreCase: true,
+                strategy: DefaultSortingStrategy.instance()
+            }]);
+        const data = cloneArray(sorted);
+        let inserts = 0;
+        let currentHeader = null;
+        for (let i = 0; i < sorted.length; i++) {
+            let insertFlag = 0;
+            if (currentHeader !== sorted[i][groupKey]) {
+                currentHeader = sorted[i][groupKey];
+                insertFlag = 1;
+            }
+            if (insertFlag) {
+                data.splice(i + inserts, 0, {
+                    [valueKey]: currentHeader,
+                    [groupKey]: currentHeader,
+                    isHeader: true
+                });
+                inserts++;
+            }
+        }
+        return data;
+    }
+}
+IgxComboGroupingPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboGroupingPipe, deps: [{ token: IGX_COMBO_COMPONENT }], target: i0.ɵɵFactoryTarget.Pipe });
+IgxComboGroupingPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboGroupingPipe, name: "comboGrouping" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboGroupingPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'comboGrouping' }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [IGX_COMBO_COMPONENT]
+                }] }]; } });
+
+/**
+ * When called with sets A & B, returns A - B (as array);
+ *
+ * @hidden
+ */
+const diffInSets = (set1, set2) => {
+    const results = [];
+    set1.forEach(entry => {
+        if (!set2.has(entry)) {
+            results.push(entry);
+        }
+    });
+    return results;
+};
+/**
+ *  Represents a drop-down list that provides editable functionalities, allowing users to choose an option from a predefined list.
+ *
+ * @igxModule IgxComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @remarks
+ * It provides the ability to filter items as well as perform selection with the provided data.
+ * Additionally, it exposes keyboard navigation and custom styling capabilities.
+ * @example
+ * ```html
+ * <igx-combo [itemsMaxHeight]="250" [data]="locationData"
+ *  [displayKey]="'field'" [valueKey]="'field'"
+ *  placeholder="Location(s)" searchPlaceholder="Search...">
+ * </igx-combo>
+ * ```
+ */
+class IgxComboComponent extends IgxComboBaseDirective {
+    constructor(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) {
+        super(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector);
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.selectionService = selectionService;
+        this.comboAPI = comboAPI;
+        this._iconService = _iconService;
+        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
+         * When `false`, the combo's list item container will be focused instead
+         */
+        this.autoFocusSearch = true;
+        /**
+         * An @Input property that enabled/disables filtering in the list. The default is `true`.
+         * ```html
+         * <igx-combo [filterable]="false">
+         * ```
+         */
+        this.filterable = true;
+        /**
+         * Defines the placeholder value for the combo dropdown search field
+         *
+         * ```typescript
+         * // get
+         * let myComboSearchPlaceholder = this.combo.searchPlaceholder;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
+         * ```
+         */
+        this.searchPlaceholder = 'Enter a Search Term';
+        /**
+         * @hidden @internal
+         */
+        this.filteringLogic = FilteringLogic.Or;
+        this.stringFilters = IgxStringFilteringOperand;
+        this.booleanFilters = IgxBooleanFilteringOperand;
+        this._prevInputValue = '';
+        this.comboAPI.register(this);
+    }
+    /**
+     * @hidden @internal
+     */
+    get inputEmpty() {
+        return !this.value && !this.placeholder;
+    }
+    /** @hidden @internal */
+    get filteredData() {
+        return this.filterable ? this._filteredData : this.data;
+    }
+    /** @hidden @internal */
+    set filteredData(val) {
+        this._filteredData = this.groupKey ? (val || []).filter((e) => e.isHeader !== true) : val;
         this.checkMatch();
     }
+    /** @hidden @internal */
+    get displaySearchInput() {
+        return this.filterable || this.allowCustomValues;
+    }
     /**
      * @hidden @internal
      */
     handleKeyUp(event) {
+        // TODO: use PlatformUtil for keyboard navigation
         if (event.key === 'ArrowDown' || event.key === 'Down') {
             this.dropdown.focusedItem = this.dropdown.items[0];
             this.dropdownContainer.nativeElement.focus();
@@ -34708,72 +35133,6 @@ class IgxComboComponent extends DisplayDensityBase {
             this.toggle();
         }
     }
-    /**
-     * @hidden @internal
-     */
-    handleKeyDown(event) {
-        if (event.key === 'ArrowUp' || event.key === 'Up') {
-            event.preventDefault();
-            event.stopPropagation();
-            this.close();
-        }
-    }
-    /**
-     * @hidden @internal
-     */
-    handleInputChange(event) {
-        if (event !== undefined) {
-            const args = {
-                searchText: event,
-                owner: this,
-                cancel: false
-            };
-            this.searchInputUpdate.emit(args);
-            if (args.cancel) {
-                this.filterValue = null;
-            }
-        }
-        this.checkMatch();
-    }
-    /**
-     * @hidden @internal
-     */
-    get dataType() {
-        if (this.displayKey) {
-            return DataTypes.COMPLEX;
-        }
-        return DataTypes.PRIMITIVE;
-    }
-    /**
-     * @hidden @internal
-     */
-    get isRemote() {
-        return this.totalItemCount > 0 &&
-            this.valueKey &&
-            this.dataType === DataTypes.COMPLEX;
-    }
-    /**
-     * Returns if the specified itemID is selected
-     *
-     * @hidden
-     * @internal
-     */
-    isItemSelected(item) {
-        return this.selection.is_item_selected(this.id, item);
-    }
-    /**
-     * Triggers change detection on the combo view
-     */
-    triggerCheck() {
-        this.cdr.detectChanges();
-    }
-    /**
-     * @hidden @internal
-     */
-    isAddButtonVisible() {
-        // This should always return a boolean value. If this.searchValue was '', it returns '' instead of false;
-        return this.searchValue !== '' && this.customValueFlag;
-    }
     /**
      * @hidden @internal
      */
@@ -34785,140 +35144,15 @@ class IgxComboComponent extends DisplayDensityBase {
             this.deselectAllItems();
         }
     }
-    /**
-     * @hidden @internal
-     */
-    addItemToCollection() {
-        if (!this.searchValue) {
-            return;
-        }
-        const newValue = this.searchValue.trim();
-        const addedItem = this.displayKey ? {
-            [this.valueKey]: newValue,
-            [this.displayKey]: newValue
-        } : newValue;
-        if (this.groupKey) {
-            Object.assign(addedItem, { [this.groupKey]: this.defaultFallbackGroup });
-        }
-        // expose shallow copy instead of this.data in event args so this.data can't be mutated
-        const oldCollection = [...this.data];
-        const newCollection = [...this.data, addedItem];
-        const args = {
-            oldCollection, addedItem, newCollection, owner: this, cancel: false
-        };
-        this.addition.emit(args);
-        if (args.cancel) {
-            return;
-        }
-        this.data.push(args.addedItem);
-        // trigger re-render
-        this.data = cloneArray(this.data);
-        this.selectItems(this.valueKey !== null && this.valueKey !== undefined ?
-            [args.addedItem[this.valueKey]] : [args.addedItem], false);
-        this.customValueFlag = false;
-        this.searchInput.nativeElement.focus();
-        this.dropdown.focusedItem = null;
-        this.virtDir.scrollTo(0);
-    }
-    /**
-     * @hidden @internal
-     */
-    focusSearchInput(opening) {
-        if (this.displaySearchInput && this.searchInput) {
-            this.searchInput.nativeElement.focus();
-        }
-        else {
-            if (opening) {
-                this.dropdownContainer.nativeElement.focus();
-            }
-            else {
-                this.comboInput.nativeElement.focus();
-                this.toggle();
-            }
-        }
-    }
-    /**
-     * @hidden @internal
-     */
-    onBlur() {
-        if (this.collapsed) {
-            this._onTouchedCallback();
-            if (this.ngControl && this.ngControl.invalid) {
-                this.valid = IgxComboState.INVALID;
-            }
-            else {
-                this.valid = IgxComboState.INITIAL;
-            }
-        }
-    }
-    /**
-     * @hidden @internal
-     */
-    ngOnInit() {
-        this.ngControl = this._injector.get(NgControl, null);
-        const targetElement = this.elementRef.nativeElement;
-        this._overlaySettings = {
-            target: targetElement,
-            scrollStrategy: new AbsoluteScrollStrategy(),
-            positionStrategy: new AutoPositionStrategy(),
-            modal: false,
-            closeOnOutsideClick: true,
-            excludeFromOutsideClick: [targetElement]
-        };
-        this.selection.set(this.id, new Set());
-        this._iconService.addSvgIconFromText(caseSensitive.name, caseSensitive.value, 'imx-icons');
-    }
-    /**
-     * @hidden @internal
-     */
-    ngAfterViewInit() {
-        this.filteredData = [...this.data];
-        if (this.ngControl) {
-            this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
-            this.manageRequiredAsterisk();
-            this.cdr.detectChanges();
-        }
-        this.virtDir.chunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e) => {
-            const eventArgs = Object.assign({}, e, { owner: this });
-            this.dataPreLoad.emit(eventArgs);
-        });
-    }
-    /**
-     * @hidden @internal
-     */
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.comboAPI.clear();
-        this.selection.clear(this.id);
-    }
     /**
      * @hidden @internal
      */
     writeValue(value) {
         const selection = Array.isArray(value) ? value : [];
-        const oldSelection = this.selectedItems();
-        this.selection.select_items(this.id, selection, true);
+        const oldSelection = this.selection;
+        this.selectionService.select_items(this.id, selection, true);
         this.cdr.markForCheck();
-        this._value = this.createDisplayText(this.selectedItems(), oldSelection);
-    }
-    /**
-     * @hidden @internal
-     */
-    registerOnChange(fn) {
-        this._onChangeCallback = fn;
-    }
-    /**
-     * @hidden @internal
-     */
-    registerOnTouched(fn) {
-        this._onTouchedCallback = fn;
-    }
-    /**
-     * @hidden @internal
-     */
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this._value = this.createDisplayText(this.selection, oldSelection);
     }
     /**
      * @hidden
@@ -34926,19 +35160,6 @@ class IgxComboComponent extends DisplayDensityBase {
     getEditElement() {
         return this.comboInput.nativeElement;
     }
-    /**
-     * @hidden @internal
-     */
-    get template() {
-        this._dataType = this.dataType;
-        if (this.itemTemplate) {
-            return this.itemTemplate;
-        }
-        if (this._dataType === DataTypes.COMPLEX) {
-            return this.complexTemplate;
-        }
-        return this.primitiveTemplate;
-    }
     /**
      * @hidden @internal
      */
@@ -34963,75 +35184,18 @@ class IgxComboComponent extends DisplayDensityBase {
         }
         event.stopPropagation();
     }
-    /**
-     * A method that opens/closes the combo.
-     *
-     * ```html
-     * <button (click)="combo.toggle()">Toggle Combo</button>
-     * <igx-combo #combo></igx-combo>
-     * ```
-     */
-    toggle() {
-        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
-        this.dropdown.toggle(overlaySettings);
-    }
-    /**
-     * A method that opens the combo.
-     *
-     * ```html
-     * <button (click)="combo.open()">Open Combo</button>
-     * <igx-combo #combo></igx-combo>
-     * ```
-     */
-    open() {
-        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
-        this.dropdown.open(overlaySettings);
-    }
-    /**
-     * A method that closes the combo.
-     *
-     * ```html
-     * <button (click)="combo.close()">Close Combo</button>
-     * <igx-combo #combo></igx-combo>
-     * ```
-     */
-    close() {
-        this.dropdown.close();
-    }
-    /**
-     * Gets drop down state.
-     *
-     * ```typescript
-     * let state = this.combo.collapsed;
-     * ```
-     */
-    get collapsed() {
-        return this.dropdown.collapsed;
-    }
-    /**
-     * Get current selection state
-     *
-     * @returns Array of selected items
-     * ```typescript
-     * let selectedItems = this.combo.selectedItems();
-     * ```
-     */
-    selectedItems() {
-        const items = Array.from(this.selection.get(this.id));
-        return items;
-    }
     /**
      * Select defined items
      *
      * @param newItems new items to be selected
      * @param clearCurrentSelection if true clear previous selected items
      * ```typescript
-     * this.combo.selectItems(["New York", "New Jersey"]);
+     * this.combo.select(["New York", "New Jersey"]);
      * ```
      */
-    selectItems(newItems, clearCurrentSelection, event) {
+    select(newItems, clearCurrentSelection, event) {
         if (newItems) {
-            const newSelection = this.selection.add_items(this.id, newItems, clearCurrentSelection);
+            const newSelection = this.selectionService.add_items(this.id, newItems, clearCurrentSelection);
             this.setSelection(newSelection, event);
         }
     }
@@ -35040,12 +35204,12 @@ class IgxComboComponent extends DisplayDensityBase {
      *
      * @param items items to deselected
      * ```typescript
-     * this.combo.deselectItems(["New York", "New Jersey"]);
+     * this.combo.deselect(["New York", "New Jersey"]);
      * ```
      */
-    deselectItems(items, event) {
+    deselect(items, event) {
         if (items) {
-            const newSelection = this.selection.delete_items(this.id, items);
+            const newSelection = this.selectionService.delete_items(this.id, items);
             this.setSelection(newSelection, event);
         }
     }
@@ -35058,8 +35222,8 @@ class IgxComboComponent extends DisplayDensityBase {
      * ```
      */
     selectAllItems(ignoreFilter, event) {
-        const allVisible = this.selection.get_all_ids(ignoreFilter ? this.data : this.filteredData, this.valueKey);
-        const newSelection = this.selection.add_items(this.id, allVisible);
+        const allVisible = this.selectionService.get_all_ids(ignoreFilter ? this.data : this.filteredData, this.valueKey);
+        const newSelection = this.selectionService.add_items(this.id, allVisible);
         this.setSelection(newSelection, event);
     }
     /**
@@ -35071,9 +35235,9 @@ class IgxComboComponent extends DisplayDensityBase {
      * ```
      */
     deselectAllItems(ignoreFilter, event) {
-        let newSelection = this.selection.get_empty();
+        let newSelection = this.selectionService.get_empty();
         if (this.filteredData.length !== this.data.length && !ignoreFilter) {
-            newSelection = this.selection.delete_items(this.id, this.selection.get_all_ids(this.filteredData, this.valueKey));
+            newSelection = this.selectionService.delete_items(this.id, this.selectionService.get_all_ids(this.filteredData, this.valueKey));
         }
         this.setSelection(newSelection, event);
     }
@@ -35101,26 +35265,19 @@ class IgxComboComponent extends DisplayDensityBase {
             return;
         }
         if (select) {
-            this.selectItems([itemID], false, event);
+            this.select([itemID], false, event);
         }
         else {
-            this.deselectItems([itemID], event);
+            this.deselect([itemID], event);
         }
     }
-    /**
-     * Event handlers
-     *
-     * @hidden
-     * @internal
-     */
-    handleOpening(e) {
-        const args = { owner: this, event: e.event, cancel: e.cancel };
-        this.opening.emit(args);
-        e.cancel = args.cancel;
-    }
     /**
      * @hidden @internal
      */
+    toggleCaseSensitive() {
+        this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
+    }
+    /** @hidden @internal */
     handleOpened() {
         this.triggerCheck();
         // Disabling focus of the search input should happen only when drop down opens.
@@ -35134,36 +35291,26 @@ class IgxComboComponent extends DisplayDensityBase {
         }
         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;
+    /** @hidden @internal */
+    focusSearchInput(opening) {
+        if (this.displaySearchInput && this.searchInput) {
+            this.searchInput.nativeElement.focus();
+        }
+        else {
+            if (opening) {
+                this.dropdownContainer.nativeElement.focus();
+            }
+            else {
+                this.comboInput.nativeElement.focus();
+                this.toggle();
+            }
         }
-        this.searchValue = '';
-        this.comboInput.nativeElement.focus();
-    }
-    /**
-     * @hidden @internal
-     */
-    handleClosed() {
-        this.closed.emit({ owner: this });
-    }
-    /**
-     * @hidden @internal
-     */
-    toggleCaseSensitive() {
-        this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
     }
     setSelection(newSelection, event) {
-        const removed = diffInSets(this.selection.get(this.id), newSelection);
-        const added = diffInSets(newSelection, this.selection.get(this.id));
+        const removed = diffInSets(this.selectionService.get(this.id), newSelection);
+        const added = diffInSets(newSelection, this.selectionService.get(this.id));
         const newSelectionAsArray = Array.from(newSelection);
-        const oldSelectionAsArray = Array.from(this.selection.get(this.id) || []);
+        const oldSelectionAsArray = Array.from(this.selectionService.get(this.id) || []);
         const displayText = this.createDisplayText(newSelectionAsArray, oldSelectionAsArray);
         const args = {
             newSelection: newSelectionAsArray,
@@ -35177,7 +35324,7 @@ class IgxComboComponent extends DisplayDensityBase {
         };
         this.selectionChanging.emit(args);
         if (!args.cancel) {
-            this.selection.select_items(this.id, args.newSelection, true);
+            this.selectionService.select_items(this.id, args.newSelection, true);
             if (displayText !== args.displayText) {
                 this._value = args.displayText;
             }
@@ -35187,44 +35334,10 @@ class IgxComboComponent extends DisplayDensityBase {
             this._onChangeCallback(args.newSelection);
         }
     }
-    manageRequiredAsterisk() {
-        if (this.ngControl && this.ngControl.control.validator) {
-            // Run the validation with empty object to check if required is enabled.
-            const error = this.ngControl.control.validator({});
-            this.inputGroup.isRequired = error && error.required;
-        }
-    }
-    /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
-    registerRemoteEntries(ids, add = true) {
-        if (add) {
-            const selection = this.getValueDisplayPairs(ids);
-            for (const entry of selection) {
-                this._remoteSelection[entry[this.valueKey]] = entry[this.displayKey];
-            }
-        }
-        else {
-            for (const entry of ids) {
-                delete this._remoteSelection[entry];
-            }
-        }
-    }
-    /**
-     * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]`
-     */
-    getValueDisplayPairs(ids) {
-        return this.data.filter(entry => ids.indexOf(entry[this.valueKey]) > -1).map(e => ({
-            [this.valueKey]: e[this.valueKey],
-            [this.displayKey]: e[this.displayKey]
-        }));
-    }
-    checkMatch() {
-        const displayKey = this.displayKey;
-        const matchFn = (e) => {
-            const value = displayKey ? e[displayKey] : e;
-            return value.toString().toLowerCase() === this.searchValue.trim().toLowerCase();
-        };
-        const itemMatch = this.filteredData.some(matchFn);
-        this.customValueFlag = this.allowCustomValues && !itemMatch;
+    createDisplayText(newSelection, oldSelection) {
+        return this.isRemote
+            ? this.getRemoteSelection(newSelection, oldSelection)
+            : this.concatDisplayText(newSelection);
     }
     /** Returns a string that should be populated in the combo's text box */
     concatDisplayText(selection) {
@@ -35233,53 +35346,20 @@ class IgxComboComponent extends DisplayDensityBase {
             selection.join(', ');
         return value;
     }
-    /**
-     * Constructs the combo display value
-     * If remote, caches the key displayText
-     * If not, just combine the object.displayKeys
-     */
-    createDisplayText(newSelection, oldSelection) {
-        let value = '';
-        if (this.isRemote) {
-            if (newSelection.length) {
-                const removedItems = oldSelection.filter(e => newSelection.indexOf(e) < 0);
-                const addedItems = newSelection.filter(e => oldSelection.indexOf(e) < 0);
-                this.registerRemoteEntries(addedItems);
-                this.registerRemoteEntries(removedItems, false);
-                value = Object.keys(this._remoteSelection).map(e => this._remoteSelection[e]).join(', ');
-            }
-            else {
-                // If new selection is empty, clear all items
-                this.registerRemoteEntries(oldSelection, false);
-            }
-        }
-        else {
-            value = this.concatDisplayText(newSelection);
-        }
-        return value;
-    }
-    /** if there is a valueKey - map the keys to data items, else - just return the keys */
-    convertKeysToItems(keys) {
-        if (this.comboAPI.valueKey === null) {
-            return keys;
-        }
-        // map keys vs. filter data to retain the order of the selected items
-        return keys.map(key => this.data.find(entry => entry[this.valueKey] === key)).filter(e => e !== undefined);
-    }
 }
 IgxComboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: IgxComboAPIService }, { token: IgxIconService }, { token: DisplayDensityToken, optional: true }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: i0.Injector, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-IgxComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboComponent, selector: "igx-combo", inputs: { overlaySettings: "overlaySettings", id: "id", width: "width", allowCustomValues: "allowCustomValues", itemsMaxHeight: "itemsMaxHeight", itemsWidth: "itemsWidth", itemHeight: "itemHeight", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", showSearchCaseIcon: "showSearchCaseIcon", data: "data", valueKey: "valueKey", displayKey: "displayKey", groupKey: "groupKey", filterable: "filterable", groupSortingDirection: "groupSortingDirection", ariaLabelledBy: "ariaLabelledBy", disabled: "disabled", type: "type", autoFocusSearch: "autoFocusSearch" }, outputs: { selectionChanging: "selectionChanging", opening: "opening", opened: "opened", closing: "closing", closed: "closed", addition: "addition", searchInputUpdate: "searchInputUpdate", dataPreLoad: "dataPreLoad" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)" }, properties: { "attr.id": "this.id", "style.width": "this.width", "class.igx-combo": "this.cssClass", "attr.role": "this.role", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-haspopup": "this.hasPopUp", "attr.aria-owns": "this.ariaOwns", "attr.aria-labelledby": "this.ariaLabelledBy" } }, providers: [
+IgxComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxComboComponent, selector: "igx-combo", inputs: { showSearchCaseIcon: "showSearchCaseIcon", autoFocusSearch: "autoFocusSearch", filterable: "filterable", searchPlaceholder: "searchPlaceholder" }, providers: [
         IgxComboAPIService,
         { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
         { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: IgxComboItemDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxComboHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxComboFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "headerItemTemplate", first: true, predicate: IgxComboHeaderItemDirective, descendants: true, read: TemplateRef }, { propertyName: "addItemTemplate", first: true, predicate: IgxComboAddItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: IgxComboEmptyDirective, descendants: true, read: TemplateRef }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxComboToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "clearIconTemplate", first: true, predicate: IgxComboClearIconDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "comboInput", first: true, predicate: ["comboInput"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, read: IgxComboDropDownComponent, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "virtualScrollContainer", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownItemContainer"], descendants: true, static: true }, { propertyName: "primitiveTemplate", first: true, predicate: ["primitive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexTemplate", first: true, predicate: ["complex"], descendants: true, read: TemplateRef, static: true }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, read: IgxForOfDirective, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onInputClick($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:filterable:filteringOptions\n            | comboGrouping:groupKey:valueKey:groupSortingDirection;\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", components: [{ type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: i0.forwardRef(function () { return IgxIconComponent; }), selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i0.forwardRef(function () { return IgxComboDropDownComponent; }), selector: "igx-combo-drop-down" }, { type: i0.forwardRef(function () { return IgxComboItemComponent; }), selector: "igx-combo-item", inputs: ["itemHeight"] }, { type: i0.forwardRef(function () { return IgxComboAddItemComponent; }), selector: "igx-combo-add-item" }], directives: [{ type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i0.forwardRef(function () { return i4.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return IgxSuffixDirective; }), selector: "igx-suffix,[igxSuffix]" }, { type: i0.forwardRef(function () { return i4.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i0.forwardRef(function () { return i12.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i12.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i12.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i0.forwardRef(function () { return IgxDropDownItemNavigationDirective; }), selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: i0.forwardRef(function () { return IgxForOfDirective; }), selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: i0.forwardRef(function () { return IgxRippleDirective; }), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], pipes: { "comboGrouping": i0.forwardRef(function () { return IgxComboGroupingPipe; }), "comboFiltering": i0.forwardRef(function () { return IgxComboFilteringPipe; }) } });
+    ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, 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:groupSortingDirection;\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", components: [{ type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: i0.forwardRef(function () { return IgxIconComponent; }), selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: i0.forwardRef(function () { return IgxComboDropDownComponent; }), selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { type: i0.forwardRef(function () { return IgxComboItemComponent; }), selector: "igx-combo-item", inputs: ["itemHeight", "singleMode"] }, { type: i0.forwardRef(function () { return IgxComboAddItemComponent; }), selector: "igx-combo-add-item" }], directives: [{ type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i0.forwardRef(function () { return i4.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return IgxSuffixDirective; }), selector: "igx-suffix,[igxSuffix]" }, { type: i0.forwardRef(function () { return i4.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i0.forwardRef(function () { return i12.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i12.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i12.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i0.forwardRef(function () { return IgxDropDownItemNavigationDirective; }), selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: i0.forwardRef(function () { return IgxForOfDirective; }), selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: i0.forwardRef(function () { return IgxRippleDirective; }), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], pipes: { "comboGrouping": i0.forwardRef(function () { return IgxComboGroupingPipe; }), "comboFiltering": i0.forwardRef(function () { return IgxComboFilteringPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxComboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-combo', providers: [
                         IgxComboAPIService,
                         { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
                         { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
-                    ], template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onInputClick($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:filterable:filteringOptions\n            | comboGrouping:groupKey:valueKey:groupSortingDirection;\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:groupSortingDirection;\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" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -35292,143 +35372,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                     args: [IGX_INPUT_GROUP_TYPE]
                 }] }, { type: i0.Injector, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { overlaySettings: [{
-                type: Input
-            }], inputGroup: [{
-                type: ViewChild,
-                args: ['inputGroup', { read: IgxInputGroupComponent, static: true }]
-            }], comboInput: [{
-                type: ViewChild,
-                args: ['comboInput', { read: IgxInputDirective, static: true }]
-            }], dropdown: [{
-                type: ViewChild,
-                args: [IgxComboDropDownComponent, { read: IgxComboDropDownComponent, static: true }]
-            }], searchInput: [{
-                type: ViewChild,
-                args: ['searchInput']
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [IgxComboItemDirective, { read: TemplateRef }]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: [IgxComboHeaderDirective, { read: TemplateRef }]
-            }], footerTemplate: [{
-                type: ContentChild,
-                args: [IgxComboFooterDirective, { read: TemplateRef }]
-            }], headerItemTemplate: [{
-                type: ContentChild,
-                args: [IgxComboHeaderItemDirective, { read: TemplateRef }]
-            }], addItemTemplate: [{
-                type: ContentChild,
-                args: [IgxComboAddItemDirective, { read: TemplateRef }]
-            }], emptyTemplate: [{
-                type: ContentChild,
-                args: [IgxComboEmptyDirective, { read: TemplateRef }]
-            }], toggleIconTemplate: [{
-                type: ContentChild,
-                args: [IgxComboToggleIconDirective, { read: TemplateRef }]
-            }], clearIconTemplate: [{
-                type: ContentChild,
-                args: [IgxComboClearIconDirective, { read: TemplateRef }]
-            }], virtualScrollContainer: [{
-                type: ViewChild,
-                args: [IgxForOfDirective, { static: true }]
-            }], selectionChanging: [{
-                type: Output
-            }], opening: [{
-                type: Output
-            }], opened: [{
-                type: Output
-            }], closing: [{
-                type: Output
-            }], closed: [{
-                type: Output
-            }], addition: [{
-                type: Output
-            }], searchInputUpdate: [{
-                type: Output
-            }], dataPreLoad: [{
-                type: Output
-            }], id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }, {
-                type: Input
-            }], width: [{
-                type: HostBinding,
-                args: ['style.width']
-            }, {
-                type: Input
-            }], cssClass: [{
-                type: HostBinding,
-                args: ['class.igx-combo']
-            }], role: [{
-                type: HostBinding,
-                args: [`attr.role`]
-            }], ariaExpanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
-            }], hasPopUp: [{
-                type: HostBinding,
-                args: ['attr.aria-haspopup']
-            }], ariaOwns: [{
-                type: HostBinding,
-                args: ['attr.aria-owns']
-            }], allowCustomValues: [{
-                type: Input
-            }], itemsMaxHeight: [{
-                type: Input
-            }], itemsWidth: [{
-                type: Input
-            }], itemHeight: [{
-                type: Input
-            }], placeholder: [{
+                }] }]; }, propDecorators: { showSearchCaseIcon: [{
                 type: Input
-            }], searchPlaceholder: [{
-                type: Input
-            }], showSearchCaseIcon: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], valueKey: [{
-                type: Input
-            }], displayKey: [{
-                type: Input
-            }], groupKey: [{
+            }], autoFocusSearch: [{
                 type: Input
             }], filterable: [{
                 type: Input
-            }], groupSortingDirection: [{
-                type: Input
-            }], ariaLabelledBy: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-labelledby']
-            }], disabled: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], autoFocusSearch: [{
+            }], searchPlaceholder: [{
                 type: Input
-            }], dropdownContainer: [{
-                type: ViewChild,
-                args: ['dropdownItemContainer', { static: true }]
-            }], primitiveTemplate: [{
-                type: ViewChild,
-                args: ['primitive', { read: TemplateRef, static: true }]
-            }], complexTemplate: [{
-                type: ViewChild,
-                args: ['complex', { read: TemplateRef, static: true }]
-            }], virtDir: [{
+            }], dropdown: [{
                 type: ViewChild,
-                args: [IgxForOfDirective, { read: IgxForOfDirective, static: true }]
-            }], onArrowDown: [{
-                type: HostListener,
-                args: ['keydown.ArrowDown', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.Alt.ArrowDown', ['$event']]
+                args: [IgxComboDropDownComponent, { static: true }]
             }] } });
 /**
  * @hidden
@@ -35457,11 +35411,16 @@ IgxComboModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         IgxInputGroupModule,
         IgxRippleModule,
         IgxToggleModule,
-        ReactiveFormsModule], exports: [IgxComboAddItemDirective,
-        IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective,
+        ReactiveFormsModule], exports: [IgxComboAddItemComponent,
+        IgxComboAddItemDirective,
+        IgxComboClearIconDirective, IgxComboComponent, IgxComboDropDownComponent,
+        IgxComboEmptyDirective,
+        IgxComboFilteringPipe,
         IgxComboFooterDirective,
+        IgxComboGroupingPipe,
         IgxComboHeaderDirective,
         IgxComboHeaderItemDirective,
+        IgxComboItemComponent,
         IgxComboItemDirective,
         IgxComboToggleIconDirective,
         IgxInputGroupModule] });
@@ -35498,13 +35457,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                         IgxComboToggleIconDirective
                     ],
                     exports: [
+                        IgxComboAddItemComponent,
                         IgxComboAddItemDirective,
                         IgxComboClearIconDirective,
                         IgxComboComponent,
+                        IgxComboDropDownComponent,
                         IgxComboEmptyDirective,
+                        IgxComboFilteringPipe,
                         IgxComboFooterDirective,
+                        IgxComboGroupingPipe,
                         IgxComboHeaderDirective,
                         IgxComboHeaderItemDirective,
+                        IgxComboItemComponent,
                         IgxComboItemDirective,
                         IgxComboToggleIconDirective,
                         IgxInputGroupModule
@@ -35525,6 +35489,344 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                 }]
         }] });
 
+/**
+ * Represents a drop-down list that provides filtering functionality, allowing users to choose a single option from a predefined list.
+ *
+ * @igxModule IgxSimpleComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, single combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @remarks
+ * It provides the ability to filter items as well as perform single selection on the provided data.
+ * Additionally, it exposes keyboard navigation and custom styling capabilities.
+ * @example
+ * ```html
+ * <igx-simple-combo [itemsMaxHeight]="250" [data]="locationData"
+ *  [displayKey]="'field'" [valueKey]="'field'"
+ *  placeholder="Location" searchPlaceholder="Search...">
+ * </igx-simple-combo>
+ * ```
+ */
+class IgxSimpleComboComponent extends IgxComboBaseDirective {
+    constructor(elementRef, cdr, selectionService, comboAPI, _iconService, platformUtil, _displayDensityOptions, _inputGroupType, _injector) {
+        super(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector);
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.selectionService = selectionService;
+        this.comboAPI = comboAPI;
+        this._iconService = _iconService;
+        this.platformUtil = platformUtil;
+        this._displayDensityOptions = _displayDensityOptions;
+        this._inputGroupType = _inputGroupType;
+        this._injector = _injector;
+        /**
+         * Emitted when item selection is changing, before the selection completes
+         *
+         * ```html
+         * <igx-simple-combo (selectionChanging)='handleSelection()'></igx-simple-combo>
+         * ```
+         */
+        this.selectionChanging = new EventEmitter();
+        /** @hidden @internal */
+        this.composing = false;
+        this._updateInput = true;
+        this.findMatch = (element) => {
+            const value = this.displayKey ? element[this.displayKey] : element;
+            return value.toString().toLowerCase().includes(this.searchValue.trim().toLowerCase());
+        };
+        this.comboAPI.register(this);
+    }
+    /** @hidden @internal */
+    get filteredData() {
+        return this._filteredData;
+    }
+    /** @hidden @internal */
+    set filteredData(val) {
+        this._filteredData = this.groupKey ? (val || []).filter((e) => e.isHeader !== true) : val;
+        this.checkMatch();
+    }
+    /**
+     * Select a defined item
+     *
+     * @param item the item to be selected
+     * ```typescript
+     * this.combo.select("New York");
+     * ```
+     */
+    select(item) {
+        if (item !== null && item !== undefined) {
+            const newSelection = this.selectionService.add_items(this.id, item instanceof Array ? item : [item], true);
+            this.setSelection(newSelection);
+        }
+    }
+    /**
+     * Deselect the currently selected item
+     *
+     * @param item the items to be deselected
+     * ```typescript
+     * this.combo.deselect("New York");
+     * ```
+     */
+    deselect() {
+        this.clearSelection();
+    }
+    /** @hidden @internal */
+    writeValue(value) {
+        const oldSelection = this.selection;
+        this.selectionService.select_items(this.id, value ? [value] : [], true);
+        this.cdr.markForCheck();
+        this._value = this.createDisplayText(this.selection, oldSelection);
+    }
+    /** @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();
+            }
+            if (this.comboInput.value.length === 0) {
+                this.dropdown.navigateFirst();
+                this.dropdownContainer.nativeElement.focus();
+            }
+        });
+        super.ngAfterViewInit();
+    }
+    /** @hidden @internal */
+    handleInputChange(event) {
+        this.searchValue = event.target.value;
+        this._onChangeCallback(this.searchValue);
+        if (this.collapsed) {
+            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) {
+        if (event.key === this.platformUtil.KEYMAP.ENTER) {
+            const filtered = this.filteredData.find(this.findMatch);
+            if (filtered === null || filtered === undefined) {
+                return;
+            }
+            this.select(this.dropdown.items[0].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
+            || event.key === this.platformUtil.KEYMAP.DELETE) {
+            this._updateInput = false;
+            this.clearSelection();
+        }
+        super.handleKeyDown(event);
+    }
+    /** @hidden @internal */
+    handleKeyUp(event) {
+        if (event.key === this.platformUtil.KEYMAP.ARROW_DOWN) {
+            const firstItem = this.selectionService.first_item(this.id);
+            this.dropdown.focusedItem = firstItem && this.filteredData.length > 0
+                ? this.dropdown.items.find(i => i.itemID === firstItem)
+                : this.dropdown.items[0];
+            this.dropdownContainer.nativeElement.focus();
+        }
+    }
+    /** @hidden @internal */
+    handleItemKeyDown(event) {
+        if (event.key === this.platformUtil.KEYMAP.ARROW_UP && event.altKey) {
+            this.close();
+        }
+    }
+    /** @hidden @internal */
+    getEditElement() {
+        return this.comboInput.nativeElement;
+    }
+    /** @hidden @internal */
+    handleClear(event) {
+        if (this.disabled) {
+            return;
+        }
+        this.clearSelection(true);
+        if (this.collapsed) {
+            this.open();
+            this.dropdown.navigateFirst();
+        }
+        else {
+            this.focusSearchInput(true);
+        }
+        event.stopPropagation();
+        this.comboInput.value = this.filterValue = this.searchValue = '';
+        this.dropdown.focusedItem = null;
+        this.composing = false;
+        this.comboInput.focus();
+    }
+    /** @hidden @internal */
+    handleOpened() {
+        this.triggerCheck();
+        this.dropdownContainer.nativeElement.focus();
+        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();
+        const selection = this.selectionService.first_item(this.id);
+        this._value = selection !== undefined && selection !== null ? selection : '';
+        this.comboInput.focus();
+        this._onChangeCallback(selection);
+    }
+    /** @hidden @internal */
+    focusSearchInput(opening) {
+        if (opening) {
+            this.dropdownContainer.nativeElement.focus();
+        }
+        else {
+            this.comboInput.nativeElement.focus();
+            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) || []);
+        const displayText = this.createDisplayText(newSelectionAsArray, oldSelectionAsArray);
+        const args = {
+            newSelection: newSelectionAsArray[0],
+            oldSelection: oldSelectionAsArray[0],
+            displayText,
+            owner: this,
+            cancel: false
+        };
+        this.selectionChanging.emit(args);
+        if (!args.cancel) {
+            const argsSelection = args.newSelection !== undefined
+                && args.newSelection !== null
+                ? [args.newSelection]
+                : [];
+            this.selectionService.select_items(this.id, argsSelection, true);
+            if (this._updateInput) {
+                this.comboInput.value = this._value = displayText !== args.displayText
+                    ? args.displayText
+                    : this.createDisplayText([args.newSelection], [args.oldSelection]);
+            }
+            this._onChangeCallback(args.newSelection);
+            this._updateInput = true;
+        }
+    }
+    createDisplayText(newSelection, oldSelection) {
+        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];
+    }
+    clearSelection(ignoreFilter) {
+        let newSelection = this.selectionService.get_empty();
+        if (this.filteredData.length !== this.data.length && !ignoreFilter) {
+            newSelection = this.selectionService.delete_items(this.id, this.selectionService.get_all_ids(this.filteredData, this.valueKey));
+        }
+        this.setSelection(newSelection);
+    }
+}
+IgxSimpleComboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSimpleComboComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: IgxComboAPIService }, { token: IgxIconService }, { token: PlatformUtil }, { token: DisplayDensityToken, optional: true }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: i0.Injector, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+IgxSimpleComboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxSimpleComboComponent, selector: "igx-simple-combo", outputs: { selectionChanging: "selectionChanging" }, providers: [
+        IgxComboAPIService,
+        { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
+        { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
+    ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }, { propertyName: "textSelection", first: true, predicate: IgxTextSelectionDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, 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\" (keydown)=\"handleItemKeyDown($event)\">\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:groupSortingDirection;\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", components: [{ type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "singleMode"] }, { type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }], directives: [{ type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], pipes: { "comboGrouping": IgxComboGroupingPipe, "comboFiltering": IgxComboFilteringPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSimpleComboComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igx-simple-combo', providers: [
+                        IgxComboAPIService,
+                        { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
+                    ], 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\" (keydown)=\"handleItemKeyDown($event)\">\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:groupSortingDirection;\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" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: IgxIconService }, { type: PlatformUtil }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DisplayDensityToken]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IGX_INPUT_GROUP_TYPE]
+                }] }, { type: i0.Injector, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { dropdown: [{
+                type: ViewChild,
+                args: [IgxComboDropDownComponent, { static: true }]
+            }], selectionChanging: [{
+                type: Output
+            }], textSelection: [{
+                type: ViewChild,
+                args: [IgxTextSelectionDirective, { static: true }]
+            }] } });
+class IgxSimpleComboModule {
+}
+IgxSimpleComboModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSimpleComboModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IgxSimpleComboModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSimpleComboModule, declarations: [IgxSimpleComboComponent], imports: [IgxComboModule, IgxRippleModule, CommonModule,
+        IgxInputGroupModule, FormsModule, ReactiveFormsModule,
+        IgxForOfModule, IgxToggleModule, IgxCheckboxModule,
+        IgxDropDownModule, IgxButtonModule, IgxIconModule,
+        IgxTextSelectionModule], exports: [IgxSimpleComboComponent, IgxComboModule] });
+IgxSimpleComboModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSimpleComboModule, imports: [[
+            IgxComboModule, IgxRippleModule, CommonModule,
+            IgxInputGroupModule, FormsModule, ReactiveFormsModule,
+            IgxForOfModule, IgxToggleModule, IgxCheckboxModule,
+            IgxDropDownModule, IgxButtonModule, IgxIconModule,
+            IgxTextSelectionModule
+        ], IgxComboModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxSimpleComboModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [IgxSimpleComboComponent],
+                    imports: [
+                        IgxComboModule, IgxRippleModule, CommonModule,
+                        IgxInputGroupModule, FormsModule, ReactiveFormsModule,
+                        IgxForOfModule, IgxToggleModule, IgxCheckboxModule,
+                        IgxDropDownModule, IgxButtonModule, IgxIconModule,
+                        IgxTextSelectionModule
+                    ],
+                    exports: [IgxSimpleComboComponent, IgxComboModule]
+                }]
+        }] });
+
 /** Header orientation in `dialog` mode. */
 const PickerHeaderOrientation = mkenum({
     Horizontal: 'horizontal',
@@ -36812,6 +37114,14 @@ class IgxDialogComponent {
          * ```
          */
         this.id = `igx-dialog-${DIALOG_ID++}`;
+        /**
+         * An @Input property to set whether the Tab key focus is trapped within the dialog when opened.
+         * Defaults to `true`.
+         * ```html
+         * <igx-dialog focusTrap="false""></igx-dialog>
+         * ```
+         */
+        this.focusTrap = true;
         /**
          * An @Input property controlling the `title` of the dialog.
          * ```html
@@ -37259,10 +37569,10 @@ class IgxDialogComponent {
 IgxDialogComponent.NEXT_ID = 1;
 IgxDialogComponent.DIALOG_CLASS = 'igx-dialog';
 IgxDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxDialogComponent, deps: [{ token: i0.ElementRef }, { token: IgxNavigationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-IgxDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxDialogComponent, selector: "igx-dialog", inputs: { id: "id", isModal: "isModal", closeOnEscape: "closeOnEscape", title: "title", message: "message", leftButtonLabel: "leftButtonLabel", leftButtonType: "leftButtonType", leftButtonColor: "leftButtonColor", leftButtonBackgroundColor: "leftButtonBackgroundColor", leftButtonRipple: "leftButtonRipple", rightButtonLabel: "rightButtonLabel", rightButtonType: "rightButtonType", rightButtonColor: "rightButtonColor", rightButtonBackgroundColor: "rightButtonBackgroundColor", rightButtonRipple: "rightButtonRipple", closeOnOutsideSelect: "closeOnOutsideSelect", positionSettings: "positionSettings", isOpen: "isOpen", role: "role", titleId: "titleId" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", leftButtonSelect: "leftButtonSelect", rightButtonSelect: "rightButtonSelect", isOpenChange: "isOpenChange" }, host: { properties: { "attr.id": "this.id", "attr.tabindex": "this.tabindex", "class.igx-dialog--hidden": "this.isCollapsed" } }, viewQueries: [{ propertyName: "toggleRef", first: true, predicate: IgxToggleDirective, descendants: true, static: true }], ngImport: i0, template: "<div tabindex=\"0\" #dialog class=\"igx-dialog\" igxToggle (click)=\"onDialogSelected($event)\">\n    <div #dialogWindow class=\"igx-dialog__window\"  [attr.role]=\"role\" [attr.aria-labelledby]=\"titleId\">\n\n        <div *ngIf=\"title\" [attr.id]=\"titleId\" class=\"igx-dialog__window-title\">\n            {{ title }}\n        </div>\n        <ng-content *ngIf=\"!title\" select=\"igx-dialog-title,[igxDialogTitle]\"></ng-content>\n\n        <div class=\"igx-dialog__window-content\">\n            <span *ngIf=\"message\" class=\"igx-dialog__window-message\">{{ message }}</span>\n            <ng-content *ngIf=\"!message\"></ng-content>\n        </div>\n\n        <div *ngIf=\"leftButtonLabel || rightButtonLabel\" class=\"igx-dialog__window-actions\">\n            <button *ngIf=\"leftButtonLabel\" type=\"button\" [igxFocus]=\"isOpen\" [igxButton]=\"leftButtonType\" igxButtonColor=\"{{ leftButtonColor }}\" igxButtonBackground=\"{{ leftButtonBackgroundColor }}\"\n                igxRipple=\"{{ leftButtonRipple }}\" (click)=\"onInternalLeftButtonSelect($event)\">\n                {{ leftButtonLabel }}\n            </button>\n            <button *ngIf=\"rightButtonLabel\" type=\"button\" [igxFocus]=\"isOpen\" [igxButton]=\"rightButtonType\" igxButtonColor=\"{{ rightButtonColor }}\" igxButtonBackground=\"{{ rightButtonBackgroundColor }}\"\n                igxRipple=\"{{ rightButtonRipple }}\" (click)=\"onInternalRightButtonSelect($event)\">\n                {{ rightButtonLabel }}\n            </button>\n        </div>\n        <ng-content *ngIf=\"!leftButtonLabel && !rightButtonLabel\" select=\"igx-dialog-actions,[igxDialogActions]\"></ng-content>\n\n    </div>\n</div>\n", directives: [{ type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
+IgxDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxDialogComponent, selector: "igx-dialog", inputs: { id: "id", isModal: "isModal", closeOnEscape: "closeOnEscape", focusTrap: "focusTrap", title: "title", message: "message", leftButtonLabel: "leftButtonLabel", leftButtonType: "leftButtonType", leftButtonColor: "leftButtonColor", leftButtonBackgroundColor: "leftButtonBackgroundColor", leftButtonRipple: "leftButtonRipple", rightButtonLabel: "rightButtonLabel", rightButtonType: "rightButtonType", rightButtonColor: "rightButtonColor", rightButtonBackgroundColor: "rightButtonBackgroundColor", rightButtonRipple: "rightButtonRipple", closeOnOutsideSelect: "closeOnOutsideSelect", positionSettings: "positionSettings", isOpen: "isOpen", role: "role", titleId: "titleId" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", leftButtonSelect: "leftButtonSelect", rightButtonSelect: "rightButtonSelect", isOpenChange: "isOpenChange" }, host: { properties: { "attr.id": "this.id", "attr.tabindex": "this.tabindex", "class.igx-dialog--hidden": "this.isCollapsed" } }, viewQueries: [{ propertyName: "toggleRef", first: true, predicate: IgxToggleDirective, descendants: true, static: true }], ngImport: i0, template: "<div tabindex=\"0\" #dialog class=\"igx-dialog\" igxToggle [igxFocusTrap]=\"focusTrap\" (click)=\"onDialogSelected($event)\">\n    <div #dialogWindow class=\"igx-dialog__window\"  [attr.role]=\"role\" [attr.aria-labelledby]=\"titleId\">\n\n        <div *ngIf=\"title\" [attr.id]=\"titleId\" class=\"igx-dialog__window-title\">\n            {{ title }}\n        </div>\n        <ng-content *ngIf=\"!title\" select=\"igx-dialog-title,[igxDialogTitle]\"></ng-content>\n\n        <div class=\"igx-dialog__window-content\">\n            <span *ngIf=\"message\" class=\"igx-dialog__window-message\">{{ message }}</span>\n            <ng-content *ngIf=\"!message\"></ng-content>\n        </div>\n\n        <div *ngIf=\"leftButtonLabel || rightButtonLabel\" class=\"igx-dialog__window-actions\">\n            <button *ngIf=\"leftButtonLabel\" type=\"button\" [igxFocus]=\"isOpen\" [igxButton]=\"leftButtonType\" igxButtonColor=\"{{ leftButtonColor }}\" igxButtonBackground=\"{{ leftButtonBackgroundColor }}\"\n                igxRipple=\"{{ leftButtonRipple }}\" (click)=\"onInternalLeftButtonSelect($event)\">\n                {{ leftButtonLabel }}\n            </button>\n            <button *ngIf=\"rightButtonLabel\" type=\"button\" [igxFocus]=\"isOpen\" [igxButton]=\"rightButtonType\" igxButtonColor=\"{{ rightButtonColor }}\" igxButtonBackground=\"{{ rightButtonBackgroundColor }}\"\n                igxRipple=\"{{ rightButtonRipple }}\" (click)=\"onInternalRightButtonSelect($event)\">\n                {{ rightButtonLabel }}\n            </button>\n        </div>\n        <ng-content *ngIf=\"!leftButtonLabel && !rightButtonLabel\" select=\"igx-dialog-actions,[igxDialogActions]\"></ng-content>\n\n    </div>\n</div>\n", directives: [{ type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: IgxFocusTrapDirective, selector: "[igxFocusTrap]", inputs: ["igxFocusTrap"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-dialog', template: "<div tabindex=\"0\" #dialog class=\"igx-dialog\" igxToggle (click)=\"onDialogSelected($event)\">\n    <div #dialogWindow class=\"igx-dialog__window\"  [attr.role]=\"role\" [attr.aria-labelledby]=\"titleId\">\n\n        <div *ngIf=\"title\" [attr.id]=\"titleId\" class=\"igx-dialog__window-title\">\n            {{ title }}\n        </div>\n        <ng-content *ngIf=\"!title\" select=\"igx-dialog-title,[igxDialogTitle]\"></ng-content>\n\n        <div class=\"igx-dialog__window-content\">\n            <span *ngIf=\"message\" class=\"igx-dialog__window-message\">{{ message }}</span>\n            <ng-content *ngIf=\"!message\"></ng-content>\n        </div>\n\n        <div *ngIf=\"leftButtonLabel || rightButtonLabel\" class=\"igx-dialog__window-actions\">\n            <button *ngIf=\"leftButtonLabel\" type=\"button\" [igxFocus]=\"isOpen\" [igxButton]=\"leftButtonType\" igxButtonColor=\"{{ leftButtonColor }}\" igxButtonBackground=\"{{ leftButtonBackgroundColor }}\"\n                igxRipple=\"{{ leftButtonRipple }}\" (click)=\"onInternalLeftButtonSelect($event)\">\n                {{ leftButtonLabel }}\n            </button>\n            <button *ngIf=\"rightButtonLabel\" type=\"button\" [igxFocus]=\"isOpen\" [igxButton]=\"rightButtonType\" igxButtonColor=\"{{ rightButtonColor }}\" igxButtonBackground=\"{{ rightButtonBackgroundColor }}\"\n                igxRipple=\"{{ rightButtonRipple }}\" (click)=\"onInternalRightButtonSelect($event)\">\n                {{ rightButtonLabel }}\n            </button>\n        </div>\n        <ng-content *ngIf=\"!leftButtonLabel && !rightButtonLabel\" select=\"igx-dialog-actions,[igxDialogActions]\"></ng-content>\n\n    </div>\n</div>\n" }]
+            args: [{ selector: 'igx-dialog', template: "<div tabindex=\"0\" #dialog class=\"igx-dialog\" igxToggle [igxFocusTrap]=\"focusTrap\" (click)=\"onDialogSelected($event)\">\n    <div #dialogWindow class=\"igx-dialog__window\"  [attr.role]=\"role\" [attr.aria-labelledby]=\"titleId\">\n\n        <div *ngIf=\"title\" [attr.id]=\"titleId\" class=\"igx-dialog__window-title\">\n            {{ title }}\n        </div>\n        <ng-content *ngIf=\"!title\" select=\"igx-dialog-title,[igxDialogTitle]\"></ng-content>\n\n        <div class=\"igx-dialog__window-content\">\n            <span *ngIf=\"message\" class=\"igx-dialog__window-message\">{{ message }}</span>\n            <ng-content *ngIf=\"!message\"></ng-content>\n        </div>\n\n        <div *ngIf=\"leftButtonLabel || rightButtonLabel\" class=\"igx-dialog__window-actions\">\n            <button *ngIf=\"leftButtonLabel\" type=\"button\" [igxFocus]=\"isOpen\" [igxButton]=\"leftButtonType\" igxButtonColor=\"{{ leftButtonColor }}\" igxButtonBackground=\"{{ leftButtonBackgroundColor }}\"\n                igxRipple=\"{{ leftButtonRipple }}\" (click)=\"onInternalLeftButtonSelect($event)\">\n                {{ leftButtonLabel }}\n            </button>\n            <button *ngIf=\"rightButtonLabel\" type=\"button\" [igxFocus]=\"isOpen\" [igxButton]=\"rightButtonType\" igxButtonColor=\"{{ rightButtonColor }}\" igxButtonBackground=\"{{ rightButtonBackgroundColor }}\"\n                igxRipple=\"{{ rightButtonRipple }}\" (click)=\"onInternalRightButtonSelect($event)\">\n                {{ rightButtonLabel }}\n            </button>\n        </div>\n        <ng-content *ngIf=\"!leftButtonLabel && !rightButtonLabel\" select=\"igx-dialog-actions,[igxDialogActions]\"></ng-content>\n\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: IgxNavigationService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { toggleRef: [{
@@ -37277,6 +37587,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                 type: Input
             }], closeOnEscape: [{
                 type: Input
+            }], focusTrap: [{
+                type: Input
             }], title: [{
                 type: Input
             }], message: [{
@@ -37338,14 +37650,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
 class IgxDialogModule {
 }
 IgxDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-IgxDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxDialogModule, declarations: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective], imports: [CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule], exports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective] });
-IgxDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxDialogModule, imports: [[CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule]] });
+IgxDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxDialogModule, declarations: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective], imports: [CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule, IgxFocusTrapModule], exports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective] });
+IgxDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxDialogModule, imports: [[CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule, IgxFocusTrapModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective],
                     exports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective],
-                    imports: [CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule]
+                    imports: [CommonModule, IgxToggleModule, IgxButtonModule, IgxRippleModule, IgxFocusModule, IgxFocusTrapModule]
                 }]
         }] });
 
@@ -45646,7 +45958,7 @@ class IgxColumnComponent {
      * @memberof IgxColumnComponent
      */
     get index() {
-        return this.grid.columns.indexOf(this);
+        return this.grid.columnsCollection.indexOf(this);
     }
     /**
      * Gets whether the column is `pinned`.
@@ -45933,7 +46245,7 @@ class IgxColumnComponent {
     /**
      * Gets the cells of the column.
      * ```typescript
-     * let columnCells = this.column._cells;
+     * let columnCells = this.column.cells;
      * ```
      *
      */
@@ -46479,7 +46791,7 @@ class IgxColumnComponent {
         grid.resetCaches();
         grid.notifyChanges();
         if (this.columnLayoutChild) {
-            this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
         this.grid.filteringService.refreshExpressions();
         const eventArgs = { column: this, insertAtIndex: index, isPinned: true };
@@ -46546,7 +46858,7 @@ class IgxColumnComponent {
         grid.resetCaches();
         grid.notifyChanges();
         if (this.columnLayoutChild) {
-            this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
         this.grid.filteringService.refreshExpressions();
         this.grid.columnPinned.emit({ column: this, insertAtIndex: index, isPinned: false });
@@ -48040,7 +48352,7 @@ class IgxColumnActionsComponent {
      */
     ngDoCheck() {
         if (this._differ) {
-            const changes = this._differ.diff(this.grid?.columns);
+            const changes = this._differ.diff(this.grid?.columnList);
             if (changes) {
                 this.pipeTrigger++;
             }
@@ -48077,10 +48389,10 @@ class IgxColumnActionsComponent {
     }
 }
 IgxColumnActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxColumnActionsComponent, deps: [{ token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-IgxColumnActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: { grid: "grid", indentation: "indentation", columnsAreaMaxHeight: "columnsAreaMaxHeight", hideFilter: "hideFilter", title: "title", filterColumnsPrompt: "filterColumnsPrompt", filterCriteria: "filterCriteria", columnDisplayOrder: "columnDisplayOrder", uncheckAllText: "uncheckAllText", checkAllText: "checkAllText", id: "id" }, outputs: { columnToggled: "columnToggled" }, host: { properties: { "attr.class": "this.cssClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "columnItems", predicate: IgxCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-column-actions__header\">\n    <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\" *ngIf=\"title\">{{ title }}</h4>\n\n    <igx-input-group class=\"igx-column-actions__header-input\" *ngIf=\"!hideFilter\">\n        <input igxInput\n            type=\"text\"\n            [attr.aria-describedby]='titleID'\n            [(ngModel)]=\"filterCriteria\"\n            [placeholder]=\"filterColumnsPrompt\"\n            autocomplete=\"off\" />\n    </igx-input-group>\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    <igx-checkbox\n        *ngFor=\"let column of grid?.columns\n            | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n            | filterActionColumns:filterCriteria:pipeTrigger\n            | sortActionColumns:columnDisplayOrder:pipeTrigger;\"\n        class=\"igx-column-actions__columns-item\"\n        [readonly]=\"true\"\n        (click)=\"toggleColumn(column)\"\n        [checked]=\"actionsDirective.columnChecked(column)\"\n        [style.margin-left.px]=\"column.level * indentation\">\n        {{ column.header || column.field }}\n    </igx-checkbox>\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n", components: [{ type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: i0.forwardRef(function () { return IgxCheckboxComponent; }), selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }], directives: [{ type: i0.forwardRef(function () { return i4.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i12.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i0.forwardRef(function () { return i12.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i12.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i0.forwardRef(function () { return i4.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: i0.forwardRef(function () { return IgxRippleDirective; }), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], pipes: { "sortActionColumns": i0.forwardRef(function () { return IgxSortActionColumnsPipe; }), "filterActionColumns": i0.forwardRef(function () { return IgxFilterActionColumnsPipe; }), "columnActionEnabled": i0.forwardRef(function () { return IgxColumnActionEnabledPipe; }) } });
+IgxColumnActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: { grid: "grid", indentation: "indentation", columnsAreaMaxHeight: "columnsAreaMaxHeight", hideFilter: "hideFilter", title: "title", filterColumnsPrompt: "filterColumnsPrompt", filterCriteria: "filterCriteria", columnDisplayOrder: "columnDisplayOrder", uncheckAllText: "uncheckAllText", checkAllText: "checkAllText", id: "id" }, outputs: { columnToggled: "columnToggled" }, host: { properties: { "attr.class": "this.cssClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "columnItems", predicate: IgxCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-column-actions__header\">\n    <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\" *ngIf=\"title\">{{ title }}</h4>\n\n    <igx-input-group class=\"igx-column-actions__header-input\" *ngIf=\"!hideFilter\">\n        <input igxInput\n            type=\"text\"\n            [attr.aria-describedby]='titleID'\n            [(ngModel)]=\"filterCriteria\"\n            [placeholder]=\"filterColumnsPrompt\"\n            autocomplete=\"off\" />\n    </igx-input-group>\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    <igx-checkbox\n        *ngFor=\"let column of $any(grid)?.columnsCollection\n            | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n            | filterActionColumns:filterCriteria:pipeTrigger\n            | sortActionColumns:columnDisplayOrder:pipeTrigger;\"\n        class=\"igx-column-actions__columns-item\"\n        [readonly]=\"true\"\n        (click)=\"toggleColumn(column)\"\n        [checked]=\"actionsDirective.columnChecked(column)\"\n        [style.margin-left.px]=\"column.level * indentation\">\n        {{ column.header || column.field }}\n    </igx-checkbox>\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n", components: [{ type: i0.forwardRef(function () { return IgxInputGroupComponent; }), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { type: i0.forwardRef(function () { return IgxCheckboxComponent; }), selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }], directives: [{ type: i0.forwardRef(function () { return i4.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i12.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return IgxInputDirective; }), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { type: i0.forwardRef(function () { return i12.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i12.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i0.forwardRef(function () { return i4.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return IgxButtonDirective; }), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: i0.forwardRef(function () { return IgxRippleDirective; }), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], pipes: { "sortActionColumns": i0.forwardRef(function () { return IgxSortActionColumnsPipe; }), "filterActionColumns": i0.forwardRef(function () { return IgxFilterActionColumnsPipe; }), "columnActionEnabled": i0.forwardRef(function () { return IgxColumnActionEnabledPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxColumnActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-column-actions', template: "<div class=\"igx-column-actions__header\">\n    <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\" *ngIf=\"title\">{{ title }}</h4>\n\n    <igx-input-group class=\"igx-column-actions__header-input\" *ngIf=\"!hideFilter\">\n        <input igxInput\n            type=\"text\"\n            [attr.aria-describedby]='titleID'\n            [(ngModel)]=\"filterCriteria\"\n            [placeholder]=\"filterColumnsPrompt\"\n            autocomplete=\"off\" />\n    </igx-input-group>\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    <igx-checkbox\n        *ngFor=\"let column of grid?.columns\n            | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n            | filterActionColumns:filterCriteria:pipeTrigger\n            | sortActionColumns:columnDisplayOrder:pipeTrigger;\"\n        class=\"igx-column-actions__columns-item\"\n        [readonly]=\"true\"\n        (click)=\"toggleColumn(column)\"\n        [checked]=\"actionsDirective.columnChecked(column)\"\n        [style.margin-left.px]=\"column.level * indentation\">\n        {{ column.header || column.field }}\n    </igx-checkbox>\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n" }]
+            args: [{ selector: 'igx-column-actions', template: "<div class=\"igx-column-actions__header\">\n    <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\" *ngIf=\"title\">{{ title }}</h4>\n\n    <igx-input-group class=\"igx-column-actions__header-input\" *ngIf=\"!hideFilter\">\n        <input igxInput\n            type=\"text\"\n            [attr.aria-describedby]='titleID'\n            [(ngModel)]=\"filterCriteria\"\n            [placeholder]=\"filterColumnsPrompt\"\n            autocomplete=\"off\" />\n    </igx-input-group>\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    <igx-checkbox\n        *ngFor=\"let column of $any(grid)?.columnsCollection\n            | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n            | filterActionColumns:filterCriteria:pipeTrigger\n            | sortActionColumns:columnDisplayOrder:pipeTrigger;\"\n        class=\"igx-column-actions__columns-item\"\n        [readonly]=\"true\"\n        (click)=\"toggleColumn(column)\"\n        [checked]=\"actionsDirective.columnChecked(column)\"\n        [style.margin-left.px]=\"column.level * indentation\">\n        {{ column.header || column.field }}\n    </igx-checkbox>\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.IterableDiffers }]; }, propDecorators: { grid: [{
                 type: Input
             }], indentation: [{
@@ -48887,7 +49199,7 @@ class BaseRow {
         return this._data ?? this.grid.dataView[this.index];
     }
     /**
-     * @deprecated Use 'data' instead.
+     * @deprecated Use 'data' instead
      *
      * The data record that populates the row
      */
@@ -48895,8 +49207,7 @@ class BaseRow {
         return this.data;
     }
     /**
-     * @deprecated Use 'key' instead.
-     *
+     * @deprecated Use 'key' instead
      */
     get rowID() {
         return this.key;
@@ -49065,12 +49376,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
@@ -50586,7 +50891,7 @@ class IgxGroupByAreaDirective {
         const drag = event.detail.owner;
         if (drag instanceof IgxColumnMovingDragDirective) {
             const column = drag.column;
-            if (this.grid.columns.indexOf(column) < 0) {
+            if (!this.grid.columnList.find(c => c === column)) {
                 return;
             }
             const isGrouped = this.expressions.findIndex((item) => item.fieldName === column.field) !== -1;
@@ -51047,7 +51352,7 @@ class IgxAdvancedFilteringDialogComponent {
      * @hidden @internal
      */
     get filterableColumns() {
-        return this.grid.columns.filter((col) => !col.columnGroup && col.filterable);
+        return this.grid.columnList.filter((col) => !col.columnGroup && col.filterable);
     }
     /**
      * @hidden @internal
@@ -52747,10 +53052,10 @@ class IgxFilteringService {
             ...{ target: filterIconTarget }
         });
         this._overlayService.opening
-            .pipe(takeUntil(this.destroy$), first$1(overlay => overlay.id === id))
+            .pipe(first$1(overlay => overlay.id === id), takeUntil(this.destroy$))
             .subscribe(() => this.lastActiveNode = this.grid.navigation.activeNode);
         this._overlayService.closed
-            .pipe(takeUntil(this.destroy$), first$1(overlay => overlay.id === id))
+            .pipe(first$1(overlay => overlay.id === id), takeUntil(this.destroy$))
             .subscribe(() => {
             this._overlayService.detach(id);
             ref?.destroy();
@@ -52867,7 +53172,7 @@ class IgxFilteringService {
             grid.paginator.page = 0;
         }
         filteringTree.filteringOperands = [];
-        for (const column of grid.columns) {
+        for (const column of grid.columnList) {
             this.prepare_filtering_expression(filteringTree, column.field, term, condition, ignoreCase || column.filteringIgnoreCase);
         }
         grid.filteringExpressionsTree = filteringTree;
@@ -52901,7 +53206,7 @@ class IgxFilteringService {
             expressions.length = 0;
         }
         else {
-            this.grid.columns.forEach(c => {
+            this.grid.columnList.forEach(c => {
                 const expressions = this.getExpressions(c.field);
                 expressions.length = 0;
             });
@@ -52931,7 +53236,7 @@ class IgxFilteringService {
         const grid = this.grid;
         const filteringTree = grid.filteringExpressionsTree;
         const newFilteringTree = new FilteringExpressionsTree(filteringTree.operator, filteringTree.fieldName);
-        for (const column of grid.columns) {
+        for (const column of grid.columnList) {
             this.prepare_filtering_expression(newFilteringTree, column.field, value, condition, ignoreCase || column.filteringIgnoreCase);
         }
         const eventArgs = { owner: grid, filteringExpressions: newFilteringTree, cancel: false };
@@ -52961,7 +53266,7 @@ class IgxFilteringService {
      */
     getExpressions(columnId) {
         if (!this.columnToExpressionsMap.has(columnId)) {
-            const column = this.grid.columns.find((col) => col.field === columnId);
+            const column = this.grid.columnList.find((col) => col.field === columnId);
             const expressionUIs = new Array();
             if (column) {
                 this.generateExpressionsList(column.filteringExpressionsTree, this.grid.filteringExpressionsTree.operator, expressionUIs);
@@ -52978,7 +53283,7 @@ class IgxFilteringService {
         if (!this.isFiltering) {
             this.columnsWithComplexFilter.clear();
             this.columnToExpressionsMap.forEach((value, key) => {
-                const column = this.grid.columns.find((col) => col.field === key);
+                const column = this.grid.columnList.find((col) => col.field === key);
                 if (column) {
                     value.length = 0;
                     this.generateExpressionsList(column.filteringExpressionsTree, this.grid.filteringExpressionsTree.operator, value);
@@ -53051,7 +53356,7 @@ class IgxFilteringService {
         if (this.columnsWithComplexFilter.has(columnId)) {
             return true;
         }
-        const column = this.grid.columns.find((col) => col.field === columnId);
+        const column = this.grid.columnList.find((col) => col.field === columnId);
         const isComplex = column && this.isFilteringTreeComplex(column.filteringExpressionsTree);
         if (isComplex) {
             this.columnsWithComplexFilter.add(columnId);
@@ -55049,10 +55354,10 @@ class IgxGridHeaderRowComponent {
     }
 }
 IgxGridHeaderRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxGridHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: "hasMRL", width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, 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", components: [{ type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf"], outputs: ["dataChanging"] }], pipes: { "igxTopLevel": IgxGridTopLevelColumns, "igxHeaderGroupStyle": IgxHeaderGroupStylePipe, "igxHeaderGroupWidth": IgxHeaderGroupWidthPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IgxGridHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: "hasMRL", width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, 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", components: [{ type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf"], outputs: ["dataChanging"] }], pipes: { "igxTopLevel": IgxGridTopLevelColumns, "igxHeaderGroupStyle": IgxHeaderGroupStylePipe, "igxHeaderGroupWidth": IgxHeaderGroupWidthPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: 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" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', 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" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { grid: [{
                 type: Input
             }], pinnedColumnCollection: [{
@@ -56191,9 +56496,13 @@ 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
+         * Use the corresponding output exposed by the `igx-paginator` component instead.
+         *
          * @example
          * ```html
          * <igx-grid (pageChange)="onPageChange($event)"></igx-grid>
@@ -56206,9 +56515,13 @@ 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
+         * Use the corresponding output exposed by the `igx-paginator` component instead.
+         *
          * @example
          * ```html
          * <igx-grid #grid (perPageChange)="onPerPageChange($event)" [autoGenerate]="true"></igx-grid>
@@ -56226,8 +56539,13 @@ 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.
          *
+         * @deprecated
+         * `evenRowCSS` is deprecated. We suggest using `rowClasses` property instead.
+         *
          * @example
          * ```html
          * <igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-even-class'" [autoGenerate]="true"></igx-grid>
@@ -56235,8 +56553,13 @@ 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.
          *
+         * @deprecated
+         * `oddRowCSS` is deprecated. We suggest using `rowClasses` property instead.
+         *
          * @example
          * ```html
          * <igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>
@@ -56489,9 +56812,13 @@ 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
+         * `pagingDone` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.
+         *
          * @remarks
          * Returns an object consisting of the previous and next pages.
          * @example
@@ -56816,7 +57143,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          * @hidden @internal
          */
         this.columnWidthSetByUser = false;
-        this.rendered$ = this.rendered.asObservable().pipe(shareReplay(1));
+        this.rendered$ = this.rendered.asObservable().pipe(shareReplay({ bufferSize: 1, refCount: true }));
         /** @hidden @internal */
         this.resizeNotify = new Subject();
         /** @hidden @internal */
@@ -57137,9 +57464,13 @@ 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
+     * `paging` is deprecated
+     *
      * @remarks
      * The default state is disabled (false).
      * @example
@@ -57157,9 +57488,13 @@ 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
+     * `page` is deprecated. Use the `page` property from the `igx-paginator` component instead.
+     *
      * @example
      * ```html
      * <igx-grid #grid [data]="Data" [autoGenerate]="true">
@@ -57178,9 +57513,13 @@ 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
+     * `perPage` is deprecated. Use the `perPage` property from the `igx-paginator` component instead.
+     *
      * @remarks
      * The default is 15.
      * @example
@@ -58229,7 +58568,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             this.summaryService.clearSummaryCache(args);
         });
         this.subscribeToTransactions();
-        this.resizeNotify.pipe(destructor, filter(() => !this._init), throttleTime(0, animationFrameScheduler, { leading: true, trailing: true }))
+        this.resizeNotify.pipe(filter(() => !this._init), throttleTime(0, animationFrameScheduler, { leading: true, trailing: true }), destructor)
             .subscribe(() => {
             this.zone.run(() => {
                 this.notifyChanges(true);
@@ -58264,7 +58603,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
                 this.overlayIDs.push(event.id);
             }
         });
-        this.overlayService.closed.pipe(destructor, filter(() => !this._init)).subscribe((event) => {
+        this.overlayService.closed.pipe(filter(() => !this._init), destructor).subscribe((event) => {
             if (this._advancedFilteringOverlayId === event.id) {
                 this.overlayService.detach(this._advancedFilteringOverlayId);
                 this._advancedFilteringOverlayId = null;
@@ -58275,7 +58614,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
                 this.overlayIDs.splice(ind, 1);
             }
         });
-        this.verticalScrollContainer.dataChanging.pipe(destructor, filter(() => !this._init)).subscribe(($event) => {
+        this.verticalScrollContainer.dataChanging.pipe(filter(() => !this._init), destructor).subscribe(($event) => {
             const shouldRecalcSize = this.isPercentHeight &&
                 (!this.calcHeight || this.calcHeight === this.getDataBasedBodyHeight() ||
                     this.calcHeight === this.renderedRowHeight * this._defaultTargetRecordNumber);
@@ -58285,12 +58624,12 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             }
             this.evaluateLoadingState();
         });
-        this.verticalScrollContainer.scrollbarVisibilityChanged.pipe(destructor, filter(() => !this._init)).subscribe(() => {
+        this.verticalScrollContainer.scrollbarVisibilityChanged.pipe(filter(() => !this._init), destructor).subscribe(() => {
             // called to recalc all widths that may have changes as a result of
             // the vert. scrollbar showing/hiding
             this.notifyChanges(true);
         });
-        this.verticalScrollContainer.contentSizeChange.pipe(destructor, filter(() => !this._init)).subscribe(() => {
+        this.verticalScrollContainer.contentSizeChange.pipe(filter(() => !this._init), destructor).subscribe(() => {
             this.calculateGridSizes(false);
         });
         this.onDensityChanged.pipe(destructor).subscribe(() => {
@@ -58396,7 +58735,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     ngAfterContentInit() {
         this.setupColumns();
-        this.toolbar.changes.pipe(takeUntil(this.destroy$), filter(() => !this._init)).subscribe(() => this.notifyChanges(true));
+        this.toolbar.changes.pipe(filter(() => !this._init), takeUntil(this.destroy$)).subscribe(() => this.notifyChanges(true));
         this.setUpPaginator();
         this.paginationComponents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.setUpPaginator();
@@ -58853,24 +59192,24 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     get summariesMargin() {
         return this.featureColumnsWidth();
     }
-    /**
-     * @hidden
-     * @internal
-     */
-    get columns() {
-        return this._columns;
-    }
     /**
      * Gets an array of `IgxColumnComponent`s.
      *
      * @example
      * ```typescript
-     * const colums = this.grid.columnsCollection.
+     * const colums = this.grid.columns.
      * ```
      */
-    get columnsCollection() {
+    get columns() {
         return this._rendered ? this._columns : [];
     }
+    /**
+     * @hidden
+     * @internal
+     */
+    get columnsCollection() {
+        return this._columns;
+    }
     /**
      * Gets an array of the pinned `IgxColumnComponent`s.
      *
@@ -58952,9 +59291,13 @@ 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
+     * `totalPages` is deprecated. Use the corresponding property exposed by the `igx-paginator`.
+     *
      * @example
      * ```typescript
      * const totalPages = this.grid.totalPages;
@@ -58964,9 +59307,13 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this.paginator?.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
+     * `isFirstPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.'
+     *
      * @example
      * ```typescript
      * const firstPage = this.grid.isFirstPage;
@@ -58976,9 +59323,13 @@ 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
+     * 'Use the corresponding method exposed by the `igx-paginator`.'
+     *
      * @example
      * ```typescript
      * this.grid1.nextPage();
@@ -58989,12 +59340,13 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.paginator?.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
+     * 'Use the corresponding method exposed by the `igx-paginator`.'
      * @example
-     * ```typescript
-     * this.grid1.previousPage();
      * ```
      */
     // eslint-disable-next-line @typescript-eslint/member-ordering
@@ -59025,9 +59377,13 @@ 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
+     * `isLastPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.'
+     *
      * @example
      * ```typescript
      * const lastPage = this.grid.isLastPage;
@@ -59070,14 +59426,14 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @internal
      */
     get showAddButton() {
-        return this.rowEditable && this.dataView.length === 0 && this.columns.length > 0;
+        return this.rowEditable && this.dataView.length === 0 && this.columnList.length > 0;
     }
     /**
      * @hidden
      * @internal
      */
     get showDragIcons() {
-        return this.rowDraggable && this.columns.length > this.hiddenColumnsCount;
+        return this.rowDraggable && this.columnList.length > this.hiddenColumnsCount;
     }
     /**
      * Places a column before or after the specified target column.
@@ -59124,8 +59480,13 @@ 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.
      *
+     * @deprecated in version 12.1.x
+     * 'Use the corresponding method exposed by the `igx-paginator`.'
+     *
      * @example
      * ```typescript
      * this.grid1.paginate(1);
@@ -60304,7 +60665,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (!this.clipboardOptions.copyHeaders) {
             result = result.substring(result.indexOf('\n') + 1);
         }
-        if (Object.values(data[0]).length === 1) {
+        if (data && data.length > 0 && Object.values(data[0]).length === 1) {
             result = result.slice(0, -2);
         }
         event.preventDefault();
@@ -61532,7 +61893,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         // Make sure we don't exceed unpinned area min width and get pinned and unpinned col collections.
         // We take into account top level columns (top level groups and non groups).
         // If top level is unpinned the pinning handles all children to be unpinned as well.
-        for (const column of this._columns) {
+        for (const column of this.columnList) {
             if (column.pinned && !column.parent) {
                 pinnedColumns.push(column);
             }
@@ -61625,7 +61986,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     _columnsReordered(column) {
         this.notifyChanges();
         if (this.hasColumnLayouts) {
-            this.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
         // after reordering is done reset cached column collections.
         this.resetColumnCollections();
@@ -61920,24 +62281,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
 }
 IgxGridBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridBaseDirective, deps: [{ token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: IgxGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 IgxGridBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: IgxGridBaseDirective, inputs: { snackbarDisplayTime: "snackbarDisplayTime", autoGenerate: "autoGenerate", emptyGridTemplate: "emptyGridTemplate", addRowEmptyTemplate: "addRowEmptyTemplate", loadingGridTemplate: "loadingGridTemplate", clipboardOptions: "clipboardOptions", class: "class", evenRowCSS: "evenRowCSS", oddRowCSS: "oddRowCSS", rowClasses: "rowClasses", rowStyles: "rowStyles", primaryKey: "primaryKey", uniqueColumnValuesStrategy: "uniqueColumnValuesStrategy", resourceStrings: "resourceStrings", filteringLogic: "filteringLogic", filteringExpressionsTree: "filteringExpressionsTree", advancedFilteringExpressionsTree: "advancedFilteringExpressionsTree", locale: "locale", pagingMode: "pagingMode", paging: "paging", page: "page", perPage: "perPage", hideRowSelectors: "hideRowSelectors", rowDraggable: "rowDraggable", rowEditable: "rowEditable", height: "height", width: "width", rowHeight: "rowHeight", columnWidth: "columnWidth", emptyGridMessage: "emptyGridMessage", isLoading: "isLoading", emptyFilteredGridMessage: "emptyFilteredGridMessage", pinning: "pinning", allowFiltering: "allowFiltering", allowAdvancedFiltering: "allowAdvancedFiltering", filterMode: "filterMode", summaryPosition: "summaryPosition", summaryCalculationMode: "summaryCalculationMode", showSummaryOnCollapse: "showSummaryOnCollapse", filterStrategy: "filterStrategy", sortStrategy: "sortStrategy", selectedRows: "selectedRows", sortingExpressions: "sortingExpressions", batchEditing: "batchEditing", cellSelection: "cellSelection", rowSelection: "rowSelection", columnSelection: "columnSelection", expansionStates: "expansionStates", outlet: "outlet", totalRecords: "totalRecords", selectRowOnClick: "selectRowOnClick" }, outputs: { filteringExpressionsTreeChange: "filteringExpressionsTreeChange", advancedFilteringExpressionsTreeChange: "advancedFilteringExpressionsTreeChange", gridScroll: "gridScroll", pageChange: "pageChange", perPageChange: "perPageChange", cellClick: "cellClick", selected: "selected", rowSelected: "rowSelected", columnSelected: "columnSelected", columnPin: "columnPin", columnPinned: "columnPinned", cellEditEnter: "cellEditEnter", cellEditExit: "cellEditExit", cellEdit: "cellEdit", cellEditDone: "cellEditDone", rowEditEnter: "rowEditEnter", rowEdit: "rowEdit", rowEditDone: "rowEditDone", rowEditExit: "rowEditExit", columnInit: "columnInit", sorting: "sorting", sortingDone: "sortingDone", filtering: "filtering", filteringDone: "filteringDone", pagingDone: "pagingDone", rowAdded: "rowAdded", rowDeleted: "rowDeleted", rowDelete: "rowDelete", rowAdd: "rowAdd", columnResized: "columnResized", contextMenu: "contextMenu", doubleClick: "doubleClick", columnVisibilityChanging: "columnVisibilityChanging", columnVisibilityChanged: "columnVisibilityChanged", columnMovingStart: "columnMovingStart", columnMoving: "columnMoving", columnMovingEnd: "columnMovingEnd", gridKeydown: "gridKeydown", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", gridCopy: "gridCopy", expansionStatesChange: "expansionStatesChange", rowToggle: "rowToggle", rowPinning: "rowPinning", rowPinned: "rowPinned", activeNodeChange: "activeNodeChange", sortingExpressionsChange: "sortingExpressionsChange", toolbarExporting: "toolbarExporting", rangeSelected: "rangeSelected", rendered: "rendered", localeChange: "localeChange" }, host: { listeners: { "mouseleave": "hideActionStrip()" }, properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.hostRole", "style.height": "this.height", "style.width": "this.hostWidth", "attr.class": "this.hostClass" } }, queries: [{ propertyName: "actionStrip", first: true, predicate: IgxActionStripComponent, descendants: true }, { propertyName: "excelStyleLoadingValuesTemplateDirective", first: true, predicate: IgxExcelStyleLoadingValuesTemplateDirective, descendants: true, read: IgxExcelStyleLoadingValuesTemplateDirective, static: true }, { propertyName: "rowAddText", first: true, predicate: IgxRowAddTextDirective, descendants: true, read: TemplateRef }, { propertyName: "rowExpandedIndicatorTemplate", first: true, predicate: IgxRowExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowCollapsedIndicatorTemplate", first: true, predicate: IgxRowCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerExpandIndicatorTemplate", first: true, predicate: IgxHeaderExpandIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerCollapseIndicatorTemplate", first: true, predicate: IgxHeaderCollapseIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleHeaderIconTemplate", first: true, predicate: IgxExcelStyleHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "columnList", predicate: IgxColumnComponent, descendants: true, read: IgxColumnComponent }, { propertyName: "headSelectorsTemplates", predicate: IgxHeadSelectorDirective, read: IgxHeadSelectorDirective }, { propertyName: "rowSelectorsTemplates", predicate: IgxRowSelectorDirective, read: IgxRowSelectorDirective }, { propertyName: "dragGhostCustomTemplates", predicate: IgxRowDragGhostDirective, read: TemplateRef }, { propertyName: "rowEditCustomDirectives", predicate: IgxRowEditTemplateDirective, read: TemplateRef }, { propertyName: "rowEditTextDirectives", predicate: IgxRowEditTextDirective, read: TemplateRef }, { propertyName: "rowEditActionsDirectives", predicate: IgxRowEditActionsDirective, read: TemplateRef }, { propertyName: "dragIndicatorIconTemplates", predicate: IgxDragIndicatorIconDirective, read: TemplateRef }, { propertyName: "rowEditTabsCUSTOM", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "toolbar", predicate: IgxGridToolbarComponent }, { propertyName: "paginationComponents", predicate: IgxPaginatorComponent }], viewQueries: [{ propertyName: "addRowSnackbar", first: true, predicate: IgxSnackbarComponent, descendants: true }, { propertyName: "resizeLine", first: true, predicate: IgxGridColumnResizerComponent, descendants: true }, { propertyName: "loadingOverlay", first: true, predicate: ["loadingOverlay"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "loadingOutlet", first: true, predicate: ["igxLoadingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "emptyFilteredGridTemplate", first: true, predicate: ["emptyFilteredGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyGridDefaultTemplate", first: true, predicate: ["defaultEmptyGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "loadingGridDefaultTemplate", first: true, predicate: ["defaultLoadingGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "parentVirtDir", first: true, predicate: ["scrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScrollContainer", first: true, predicate: ["verticalScrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScroll", first: true, predicate: ["verticalScrollHolder"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "scr", first: true, predicate: ["scr"], descendants: true, read: ElementRef, static: true }, { propertyName: "headerSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, read: ElementRef }, { propertyName: "theadRow", first: true, predicate: IgxGridHeaderRowComponent, descendants: true, static: true }, { propertyName: "groupArea", first: true, predicate: IgxGridGroupByAreaComponent, descendants: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, static: true }, { propertyName: "pinContainer", first: true, predicate: ["pinContainer"], descendants: true, read: ElementRef }, { propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true, static: true }, { propertyName: "rowEditingOutletDirective", first: true, predicate: ["igxRowEditingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dragIndicatorIconBase", first: true, predicate: ["dragIndicatorIconBase"], descendants: true, read: TemplateRef, static: true }, { propertyName: "rowEditingOverlay", first: true, predicate: ["rowEditingOverlay"], descendants: true, read: IgxToggleDirective }, { propertyName: "_outletDirective", first: true, predicate: ["igxFilteringOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultRowEditTemplate", first: true, predicate: ["defaultRowEditTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tmpOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "rowEditTabsDEFAULT", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "_summaryRowList", predicate: ["summaryRow"], descendants: true, read: IgxSummaryRowComponent }, { propertyName: "_rowList", predicate: ["row"], descendants: true }, { propertyName: "_pinnedRowList", predicate: ["pinnedRow"], descendants: true }, { propertyName: "_dataRowList", predicate: IgxRowDirective, descendants: true, read: IgxRowDirective }], usesInheritance: true, ngImport: i0 });
-__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);
@@ -61947,15 +62293,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([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "hideRowSelectors", null);
@@ -61989,24 +62326,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);
@@ -62408,9 +62727,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                 type: Input
             }], outlet: [{
                 type: Input
-            }], totalPages: [], isFirstPage: [], nextPage: [], previousPage: [], totalRecords: [{
+            }], totalRecords: [{
                 type: Input
-            }], isLastPage: [], paginate: [], selectRowOnClick: [{
+            }], selectRowOnClick: [{
                 type: Input
             }] } });
 
@@ -64880,7 +65199,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
@@ -65605,9 +65925,6 @@ IgxGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         IgxForOfSyncService,
         IgxForOfScrollSyncService
     ], queries: [{ propertyName: "detailTemplate", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "gridDetailsTemplate", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: IgxGridDetailTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: IgxGroupByRowSelectorDirective }], viewQueries: [{ propertyName: "groupArea", first: true, predicate: IgxGridGroupByAreaComponent, descendants: true }, { propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]='outerWidth'\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [density]=\"displayDensity\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)='preventContainerScroll($event)'\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf='data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>\n            <div #pinContainer *ngIf='pinnedData.length > 0'\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:paginator?.page:paginator?.perPage:id:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight'\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\">\n            <ng-template\n                [igxTemplateOutlet]='getRowTemplate(rowData)'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'\n                (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail='true' style=\"overflow: auto; width: 100%;\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)='detailsViewFocused(detailsContainer, rowIndex)' #detailsContainer [attr.data-rowindex]='rowIndex'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\" style='display: flex;'>\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]='detailTemplate'\n                    [ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth'  [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-container *ngIf=\"totalRecords || pagingMode === 1\">\n        <ng-content select=\"igx-paginator\"></ng-content>\n    </ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n   [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_less</igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n    [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_more</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", components: [{ type: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { type: IgxGridRowComponent, selector: "igx-grid-row" }, { type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "indeterminate", "textVisibility", "text", "value"] }, { type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf"], outputs: ["dataChanging"] }, { type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }], pipes: { "gridSort": IgxGridSortingPipe, "gridFiltering": IgxGridFilteringPipe, "gridRowPinning": IgxGridRowPinningPipe, "gridAddRow": IgxGridAddRowPipe, "visibleColumns": IgxHasVisibleColumnsPipe, "gridTransaction": IgxGridTransactionPipe, "gridDetails": IgxGridDetailsPipe, "gridSummary": IgxGridSummaryPipe, "gridPaging": IgxGridPagingPipe, "gridGroupBy": IgxGridGroupingPipe, "igxGridRowClasses": IgxGridRowClassesPipe, "igxGridRowStyles": IgxGridRowStylesPipe, "igxGridSummaryDataPipe": IgxSummaryDataPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxGridComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -65685,7 +66002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                 type: Input
             }], dropAreaMessage: [{
                 type: Input
-            }], getCellByColumnVisibleIndex: [], showGroupArea: [{
+            }], showGroupArea: [{
                 type: Input
             }] } });
 
@@ -65765,7 +66082,7 @@ class IgxGridStateDirective {
             },
             columns: {
                 getFeatureState: (context) => {
-                    const gridColumns = context.currGrid.columns.map((c) => ({
+                    const gridColumns = context.currGrid.columnList.map((c) => ({
                         pinned: c.pinned,
                         sortable: c.sortable,
                         filterable: c.filterable,
@@ -66454,14 +66771,14 @@ class IgxColumnLayoutComponent extends IgxColumnGroupComponent {
     set hidden(value) {
         this._hidden = value;
         this.children.forEach(child => child.hidden = value);
-        if (this.grid && this.grid.columns && this.grid.columns.length > 0) {
+        if (this.grid && this.grid.columnList && this.grid.columnList.length > 0) {
             // reset indexes in case columns are hidden/shown runtime
             const columns = this.grid && this.grid.pinnedColumns && this.grid.unpinnedColumns ?
                 this.grid.pinnedColumns.concat(this.grid.unpinnedColumns) : [];
             if (!this._hidden && !columns.find(c => c.field === this.field)) {
                 this.grid.resetColumnCollections();
             }
-            this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
     }
     /**
@@ -68970,7 +69287,8 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         this.notifyChanges();
     }
     /**
-     * @deprecated
+     * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+     *
      * Returns a `CellType` object that matches the conditions.
      *
      * @example
@@ -69586,9 +69904,6 @@ IgxTreeGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         IgxForOfSyncService,
         IgxForOfScrollSyncService
     ], queries: [{ propertyName: "groupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "dragIndicatorIconBase", first: true, predicate: ["dragIndicatorIconBase"], descendants: true, read: TemplateRef, static: true }, { propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf='data\n            | treeGridTransaction:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | treeGridNormalizeRecord:pipeTrigger\n            | treeGridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n            | treeGridSorting:sortingExpressions:sortStrategy:pipeTrigger:true as pinnedData'>\n                <div #pinContainer *ngIf='pinnedData.length > 0'\n                    [ngClass]=\"{\n                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                        'igx-grid__tr--pinned-top': isRowPinningToTop\n                    }\"\n                    class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData;let rowIndex = index;\">\n                        <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:paginator?.page:paginator?.perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer>\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n            [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-container *ngIf=\"totalRecords || pagingMode === 1\">\n        <ng-content select=\"igx-paginator\"></ng-content>\n    </ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", components: [{ type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "indeterminate", "textVisibility", "text", "value"] }, { type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer" }], directives: [{ type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf"], outputs: ["dataChanging"] }, { type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }], pipes: { "treeGridSorting": IgxTreeGridSortingPipe, "treeGridFiltering": IgxTreeGridFilteringPipe, "gridRowPinning": IgxGridRowPinningPipe, "treeGridAddRow": IgxTreeGridAddRowPipe, "treeGridNormalizeRecord": IgxTreeGridNormalizeRecordsPipe, "visibleColumns": IgxHasVisibleColumnsPipe, "treeGridTransaction": IgxTreeGridTransactionPipe, "treeGridSummary": IgxTreeGridSummaryPipe, "treeGridPaging": IgxTreeGridPagingPipe, "treeGridFlattening": IgxTreeGridFlatteningPipe, "treeGridHierarchizing": IgxTreeGridHierarchizingPipe, "igxGridRowClasses": IgxGridRowClassesPipe, "igxGridRowStyles": IgxGridRowStylesPipe, "igxGridSummaryDataPipe": IgxSummaryDataPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxTreeGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxTreeGridComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid', providers: [
@@ -69664,7 +69979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                 type: Input
             }], rowLoadingIndicatorTemplate: [{
                 type: Input
-            }], getCellByColumnVisibleIndex: [] } });
+            }] } });
 
 const HIDDEN_FIELD_NAME = '_Igx_Hidden_Data_';
 /**
@@ -71539,7 +71854,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
@@ -72157,9 +72473,6 @@ IgxHierarchicalGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         IgxForOfScrollSyncService,
         IgxRowIslandAPIService
     ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: IgxGridToolbarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "childLayoutList", predicate: IgxRowIslandComponent, read: IgxRowIslandComponent }, { propertyName: "allLayoutList", predicate: IgxRowIslandComponent, descendants: true, read: IgxRowIslandComponent }, { propertyName: "paginatorList", predicate: IgxPaginatorComponent, descendants: true }], viewQueries: [{ propertyName: "toolbarOutlet", first: true, predicate: ["toolbarOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "paginatorOutlet", first: true, predicate: ["paginatorOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "hierarchicalRecordTemplate", first: true, predicate: ["hierarchical_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childTemplate", first: true, predicate: ["child_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "templateOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "hierarchicalRows", predicate: IgxChildGridRowComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n     (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | gridTransaction:id:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | gridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n            | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'\n                    [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                    [style.width.px]='calcWidth'>\n                    <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                        <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:paginator?.page:paginator?.perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\">\n            <ng-template\n                [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)' (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)' (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div style=\"overflow: auto; width: 100%;\" [attr.data-rowindex]='rowIndex' (scroll)='onContainerScroll()'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n                    [rowData]=\"rowData\" [layout]='layout' #row>\n                </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n     (keydown)=\"navigation.summaryNav($event)\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\"  (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-content *ngIf=\"totalRecords || pagingMode === 1\"  select=\"igx-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\">unfold_more</igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" [active]='hasExpandedRecords() && hasExpandableChildren'>unfold_less</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n", components: [{ type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width", "density"] }, { type: IgxHierarchicalRowComponent, selector: "igx-hierarchical-grid-row" }, { type: IgxChildGridRowComponent, selector: "igx-child-grid-row", inputs: ["layout", "parentGridID", "rowData", "index"] }, { type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "indeterminate", "textVisibility", "text", "value"] }, { type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer" }], directives: [{ type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf"], outputs: ["dataChanging"] }, { type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }], pipes: { "gridSort": IgxGridSortingPipe, "gridFiltering": IgxGridFilteringPipe, "gridRowPinning": IgxGridRowPinningPipe, "gridAddRow": IgxGridAddRowPipe, "visibleColumns": IgxHasVisibleColumnsPipe, "gridTransaction": IgxGridTransactionPipe, "gridHierarchical": IgxGridHierarchicalPipe, "gridHierarchicalPaging": IgxGridHierarchicalPagingPipe, "igxGridRowClasses": IgxGridRowClassesPipe, "igxGridRowStyles": IgxGridRowStylesPipe, "igxGridSummaryDataPipe": IgxSummaryDataPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxHierarchicalGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxHierarchicalGridComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid', providers: [
@@ -72216,7 +72529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                 type: Input
             }], expandChildren: [{
                 type: Input
-            }], getCellByColumnVisibleIndex: [] } });
+            }] } });
 
 /**
  * @hidden
@@ -76712,6 +77025,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
@@ -76837,9 +77152,6 @@ class IgxToastComponent extends IgxNotificationsDirective {
 }
 IgxToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxToastComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxNavigationService, optional: true }, { token: IgxOverlayService }], target: i0.ɵɵFactoryTarget.Component });
 IgxToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: IgxToastComponent, selector: "igx-toast", inputs: { id: "id", role: "role", position: "position", positionSettings: "positionSettings" }, outputs: { isVisibleChange: "isVisibleChange" }, host: { properties: { "class.igx-toast": "this.cssClass", "attr.id": "this.id", "attr.role": "this.role" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n" });
-__decorate([
-    DeprecateProperty('`position` is deprecated. We suggest using `positionSettings` property instead.')
-], IgxToastComponent.prototype, "position", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: IgxToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-toast', template: "<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n" }]
@@ -81804,5 +82116,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BaseProgressDirective, BlockScrollStrategy, ButtonGroupAlignment, Calendar, CalendarHammerConfig, CalendarSelection, CalendarView, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultSortingStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportRecordType, FilterMode, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GlobalPositionStrategy, GridBaseAPIService, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupedRecords, HeaderType, HorizontalAlignment, HorizontalAnimationType, IGX_CHECKBOX_REQUIRED_VALIDATOR, IGX_INPUT_GROUP_TYPE, IGX_STEPPER_COMPONENT, IGX_STEP_COMPONENT, IGX_SWITCH_REQUIRED_VALIDATOR, ITreeGridAggregation, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule, IgxAdvancedFilteringDialogComponent, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerActionsDirective, 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, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxCheckboxRequiredDirective, IgxChildGridRowComponent, IgxChipComponent, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionEnabledPipe, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnActionsModule, IgxColumnComponent, IgxColumnFormatterPipe, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxColumnMovingModule, IgxColumnPinningDirective, IgxColumnResizerDirective, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboModule, IgxComboState, IgxComboToggleIconDirective, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective, IgxDisplayDensityModule, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragIndicatorIconDirective, IgxDragLocation, IgxDropDirective, IgxDropDownBaseDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemBaseDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, IgxExporterOptionsBase, IgxFilterActionColumnsPipe, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridAPIService, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridAddRowPipe, IgxGridBaseDirective, IgxGridBodyDirective, IgxGridCell, IgxGridCellStyleClassesPipe, IgxGridCellStylesPipe, IgxGridColumnModule, IgxGridColumnResizerComponent, IgxGridCommonModule, IgxGridComponent, IgxGridDataMapperPipe, IgxGridDetailTemplateDirective, IgxGridDetailsPipe, IgxGridDragSelectDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridExcelStyleFilteringModule, IgxGridExpandableCellComponent, IgxGridFilterConditionPipe, IgxGridFilteringModule, IgxGridFilteringPipe, IgxGridFooterComponent, IgxGridForOfDirective, IgxGridGroupByAreaComponent, IgxGridGroupByRowComponent, IgxGridGroupingPipe, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridHeadersModule, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalPipe, IgxGridModule, IgxGridNotGroupedPipe, IgxGridPaginatorOptionsPipe, IgxGridPagingPipe, IgxGridPinningActionsComponent, IgxGridPipesModule, IgxGridResizingModule, IgxGridRow, IgxGridRowClassesPipe, IgxGridRowPinningPipe, IgxGridRowStylesPipe, IgxGridSelectionModule, IgxGridSharedModules, IgxGridSortingPipe, IgxGridStateDirective, IgxGridStateModule, IgxGridSummaryModule, IgxGridSummaryPipe, IgxGridToolbarActionsDirective, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarModule, IgxGridToolbarPinningComponent, IgxGridToolbarTitleDirective, IgxGridTopLevelColumns, IgxGridTransactionPipe, IgxGridTransactionStatePipe, IgxGroupAreaDropDirective, IgxGroupByAreaDirective, IgxGroupByMetaPipe, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHasVisibleColumnsPipe, IgxHeadSelectorDirective, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHeaderGroupStylePipe, IgxHeaderGroupWidthPipe, IgxHierarchicalGridAPIService, IgxHierarchicalGridBaseDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalRowComponent, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHierarchicalTransactionServiceFactory, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxItemListDirective, 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, IgxProcessBarTextTemplateDirective, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressType, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxResizeHandleDirective, IgxRippleDirective, IgxRippleModule, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDragDirective, IgxRowDragGhostDirective, IgxRowDragModule, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandAPIService, IgxRowIslandComponent, IgxRowLoadingIndicatorTemplateDirective, IgxRowSelectorDirective, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectItemNavigationDirective, IgxSelectModule, IgxSelectToggleIconDirective, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSortActionColumnsPipe, IgxSorting, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubTitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, IgxStringFilteringOperand, IgxStringReplacePipe, IgxSuffixDirective, IgxSuffixModule, IgxSummaryCellComponent, IgxSummaryDataPipe, IgxSummaryFormatterPipe, IgxSummaryOperand, IgxSummaryRow, IgxSummaryRowComponent, IgxSwitchComponent, IgxSwitchModule, IgxSwitchRequiredDirective, IgxTabContentComponent, IgxTabContentDirective, IgxTabHeaderComponent, IgxTabHeaderDirective, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabItemDirective, IgxTabsAlignment, IgxTabsComponent, IgxTabsDirective, IgxTabsModule, IgxTemplateOutletDirective, IgxTemplateOutletModule, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimeItemDirective, IgxTimePickerActionsDirective, IgxTimePickerComponent, IgxTimePickerModule, IgxTimePickerTemplateDirective, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToastPosition, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridAPIService, IgxTreeGridAddRowPipe, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectMarkerDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowEditPositionStrategy, RowPinningPosition, SPLITTER_INTERACTION_KEYS, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SortingIndexPipe, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, VerticalAnimationType, 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, IgxGridFilteringCellComponent as θIgxGridFilteringCellComponent, IgxGridFilteringRowComponent as θIgxGridFilteringRowComponent, IgxHierarchicalGridCellComponent as θIgxHierarchicalGridCellComponent, IgxTreeGridCellComponent as θIgxTreeGridCellComponent, IgxTreeGridRowComponent as θIgxTreeGridRowComponent, IgxGridCellComponent as ϴIgxGridCellComponent, IgxGridRowComponent as ϴIgxGridRowComponent };
+export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BaseProgressDirective, BlockScrollStrategy, ButtonGroupAlignment, Calendar, CalendarHammerConfig, CalendarSelection, CalendarView, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultSortingStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportRecordType, FilterMode, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GlobalPositionStrategy, GridBaseAPIService, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupedRecords, HeaderType, HorizontalAlignment, HorizontalAnimationType, IGX_CHECKBOX_REQUIRED_VALIDATOR, IGX_INPUT_GROUP_TYPE, IGX_STEPPER_COMPONENT, IGX_STEP_COMPONENT, IGX_SWITCH_REQUIRED_VALIDATOR, ITreeGridAggregation, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule, IgxAdvancedFilteringDialogComponent, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerActionsDirective, 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, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxCheckboxRequiredDirective, IgxChildGridRowComponent, IgxChipComponent, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionEnabledPipe, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnActionsModule, IgxColumnComponent, IgxColumnFormatterPipe, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxColumnMovingModule, IgxColumnPinningDirective, IgxColumnResizerDirective, IgxComboAddItemComponent, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboDropDownComponent, IgxComboEmptyDirective, IgxComboFilteringPipe, IgxComboFooterDirective, IgxComboGroupingPipe, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemComponent, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective, IgxDisplayDensityModule, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragIndicatorIconDirective, IgxDragLocation, IgxDropDirective, IgxDropDownBaseDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemBaseDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, IgxExporterOptionsBase, IgxFilterActionColumnsPipe, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxFocusTrapDirective, IgxFocusTrapModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridAPIService, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridAddRowPipe, IgxGridBaseDirective, IgxGridBodyDirective, IgxGridCell, IgxGridCellStyleClassesPipe, IgxGridCellStylesPipe, IgxGridColumnModule, IgxGridColumnResizerComponent, IgxGridCommonModule, IgxGridComponent, IgxGridDataMapperPipe, IgxGridDetailTemplateDirective, IgxGridDetailsPipe, IgxGridDragSelectDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridExcelStyleFilteringModule, IgxGridExpandableCellComponent, IgxGridFilterConditionPipe, IgxGridFilteringModule, IgxGridFilteringPipe, IgxGridFooterComponent, IgxGridForOfDirective, IgxGridGroupByAreaComponent, IgxGridGroupByRowComponent, IgxGridGroupingPipe, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridHeadersModule, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalPipe, IgxGridModule, IgxGridNotGroupedPipe, IgxGridPaginatorOptionsPipe, IgxGridPagingPipe, IgxGridPinningActionsComponent, IgxGridPipesModule, IgxGridResizingModule, IgxGridRow, IgxGridRowClassesPipe, IgxGridRowPinningPipe, IgxGridRowStylesPipe, IgxGridSelectionModule, IgxGridSharedModules, IgxGridSortingPipe, IgxGridStateDirective, IgxGridStateModule, IgxGridSummaryModule, IgxGridSummaryPipe, IgxGridToolbarActionsDirective, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarModule, IgxGridToolbarPinningComponent, IgxGridToolbarTitleDirective, IgxGridTopLevelColumns, IgxGridTransactionPipe, IgxGridTransactionStatePipe, IgxGroupAreaDropDirective, IgxGroupByAreaDirective, IgxGroupByMetaPipe, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHasVisibleColumnsPipe, IgxHeadSelectorDirective, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHeaderGroupStylePipe, IgxHeaderGroupWidthPipe, IgxHierarchicalGridAPIService, IgxHierarchicalGridBaseDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalRowComponent, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHierarchicalTransactionServiceFactory, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxItemListDirective, 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, IgxProcessBarTextTemplateDirective, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressType, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxResizeHandleDirective, IgxRippleDirective, IgxRippleModule, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDragDirective, IgxRowDragGhostDirective, IgxRowDragModule, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandAPIService, IgxRowIslandComponent, IgxRowLoadingIndicatorTemplateDirective, IgxRowSelectorDirective, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectItemNavigationDirective, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSortActionColumnsPipe, IgxSorting, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubTitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, IgxStringFilteringOperand, IgxStringReplacePipe, IgxSuffixDirective, IgxSuffixModule, IgxSummaryCellComponent, IgxSummaryDataPipe, IgxSummaryFormatterPipe, IgxSummaryOperand, IgxSummaryRow, IgxSummaryRowComponent, IgxSwitchComponent, IgxSwitchModule, IgxSwitchRequiredDirective, IgxTabContentComponent, IgxTabContentDirective, IgxTabHeaderComponent, IgxTabHeaderDirective, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabItemDirective, IgxTabsAlignment, IgxTabsComponent, IgxTabsDirective, IgxTabsModule, IgxTemplateOutletDirective, IgxTemplateOutletModule, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimeItemDirective, IgxTimePickerActionsDirective, IgxTimePickerComponent, IgxTimePickerModule, IgxTimePickerTemplateDirective, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToastPosition, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridAPIService, IgxTreeGridAddRowPipe, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectMarkerDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowEditPositionStrategy, RowPinningPosition, SPLITTER_INTERACTION_KEYS, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SortingIndexPipe, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, VerticalAnimationType, 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, IgxGridFilteringCellComponent as θIgxGridFilteringCellComponent, IgxGridFilteringRowComponent as θIgxGridFilteringRowComponent, IgxHierarchicalGridCellComponent as θIgxHierarchicalGridCellComponent, IgxTreeGridCellComponent as θIgxTreeGridCellComponent, IgxTreeGridRowComponent as θIgxTreeGridRowComponent, IgxGridCellComponent as ϴIgxGridCellComponent, IgxGridRowComponent as ϴIgxGridRowComponent };
 //# sourceMappingURL=igniteui-angular.mjs.map