igniteui-angular 12.2.5 → 12.3.0

package/bundles/igniteui-angular.umd.js

@@ -1244,7 +1244,7 @@
             fn();
         }
     };
-    var ɵ0$5 = run;
+    var ɵ0$4 = run;
     var listener = function (event) { return run(event.data); };
     var ɵ1$1 = listener;
     // Use function instead of arrow function to workaround an issue in codesandbox
@@ -1276,6 +1276,15 @@
         delete queue[id];
     }
 
+    /**
+     * @hidden
+     */
+    var showMessage = function (message, isMessageShown) {
+        if (!isMessageShown && i0.isDevMode()) {
+            console.warn(message);
+        }
+        return true;
+    };
     var mkenum = function (x) { return x; };
     /**
      * Returns the ResizeObserver type or the polyfilled version if not available.
@@ -2112,8 +2121,17 @@
                         finally { if (e_1) throw e_1.error; }
                     }
                     if (expanded) {
-                        metadata.push.apply(metadata, __spreadArray([], __read(fullResult.metadata.slice(fullResult.metadata.length - group.length))));
-                        result.push.apply(result, __spreadArray([], __read(fullResult.data.slice(fullResult.data.length - group.length))));
+                        // Replaced object destructing as in a single big group scenario
+                        // it hits the max number of arguments for a function the underlying JS engine
+                        // supports.
+                        var j = fullResult.metadata.length - group.length;
+                        for (; j < fullResult.metadata.length; j++) {
+                            metadata.push(fullResult.metadata[j]);
+                        }
+                        j = fullResult.data.length - group.length;
+                        for (; j < fullResult.data.length; j++) {
+                            result.push(fullResult.data[j]);
+                        }
                     }
                 }
                 i += group.length;
@@ -9139,7 +9157,7 @@
     };
 
     var clear = function (el) { return el === 0 || Boolean(el); };
-    var ɵ0$4 = clear;
+    var ɵ0$3 = clear;
     var first = function (arr) { return arr[0]; };
     var ɵ1 = first;
     var last = function (arr) { return arr[arr.length - 1]; };
@@ -18299,124 +18317,6 @@
                 },] }
     ];
 
-    /**
-     * @hidden
-     */
-    var DeprecateClass = function (message) {
-        var isMessageShown = false;
-        return function (originalClass) { return /** @class */ (function (_super) {
-            __extends(class_1, _super);
-            function class_1() {
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i] = arguments[_i];
-                }
-                var _this = this;
-                var target = originalClass;
-                var targetName = typeof target === 'function' ? target.name : target.constructor.name;
-                isMessageShown = showMessage(targetName + ": " + message, isMessageShown);
-                _this = _super.apply(this, __spreadArray([], __read(args))) || this;
-                return _this;
-            }
-            return class_1;
-        }(originalClass)); };
-    };
-    /**
-     * @hidden
-     */
-    function DeprecateMethod(message) {
-        var isMessageShown = false;
-        return function (target, key, descriptor) {
-            if (descriptor && descriptor.value) {
-                var originalMethod_1 = descriptor.value;
-                descriptor.value = function () {
-                    var e_1, _a;
-                    var targetName = typeof target === 'function' ? target.name : target.constructor.name;
-                    isMessageShown = showMessage(targetName + "." + key + ": " + message, isMessageShown);
-                    var args = [];
-                    try {
-                        for (var arguments_1 = __values(arguments), arguments_1_1 = arguments_1.next(); !arguments_1_1.done; arguments_1_1 = arguments_1.next()) {
-                            var x = arguments_1_1.value;
-                            args.push(x);
-                        }
-                    }
-                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                    finally {
-                        try {
-                            if (arguments_1_1 && !arguments_1_1.done && (_a = arguments_1.return)) _a.call(arguments_1);
-                        }
-                        finally { if (e_1) throw e_1.error; }
-                    }
-                    return originalMethod_1.call.apply(originalMethod_1, __spreadArray([this], __read(args)));
-                };
-                return descriptor;
-            }
-        };
-    }
-    /**
-     * @hidden
-     */
-    function DeprecateProperty(message) {
-        return function (target, key) {
-            var isMessageShown = false;
-            var messageToDisplay = target.constructor.name + "." + key + ": " + message;
-            // if the target already has the property defined
-            var originalDescriptor = Object.getOwnPropertyDescriptor(target, key);
-            if (originalDescriptor) {
-                var getter_1 = originalDescriptor.get;
-                var setter_1 = originalDescriptor.set;
-                if (getter_1) {
-                    originalDescriptor.get = function () {
-                        isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                        return getter_1.call(this);
-                    };
-                }
-                if (setter_1) {
-                    originalDescriptor.set = function (value) {
-                        isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                        setter_1.call(this, value);
-                    };
-                }
-                return originalDescriptor;
-            }
-            // the target doesn't contain a descriptor for that property, so create one
-            // use backing field to set/get the value of the property to ensure there won't be infinite recursive calls
-            var newKey = generateUniqueKey(target, key);
-            Object.defineProperty(target, key, {
-                configurable: true,
-                enumerable: true,
-                set: function (value) {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    this[newKey] = value;
-                },
-                get: function () {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    return this[newKey];
-                }
-            });
-        };
-    }
-    /**
-     * @hidden
-     */
-    var generateUniqueKey = function (target, key) {
-        var newKey = '_' + key;
-        while (target.hasOwnProperty(newKey)) {
-            newKey = '_' + newKey;
-        }
-        return newKey;
-    };
-    var ɵ0$3 = generateUniqueKey;
-    /**
-     * @hidden
-     */
-    var showMessage = function (message, isMessageShown) {
-        if (!isMessageShown && i0.isDevMode()) {
-            console.warn(message);
-        }
-        return true;
-    };
-
     var NEXT_ID$t = 0;
     /**
      * The `<igx-drop-down-item>` is a container intended for row items in
@@ -18492,7 +18392,6 @@
     };
 
     var NEXT_ID$s = 0;
-    var warningShown = false;
     /**
      * An abstract class defining a drop-down item:
      * With properties / styles for selection, highlight, height
@@ -18566,8 +18465,6 @@
              */
             get: function () {
                 if (this._index === null) {
-                    warningShown = showMessage('IgxDropDownItemBaseDirective: Automatic index is deprecated.' +
-                        'Bind in the template instead using `<igx-drop-down-item [index]="i"` instead.`', warningShown);
                     return this.itemIndex;
                 }
                 return this._index;
@@ -21420,9 +21317,6 @@
         getInactive: [{ type: i0.HostBinding, args: ['class.igx-icon--inactive',] }],
         getColor: [{ type: i0.HostBinding, args: ['style.color',] }]
     };
-    __decorate([
-        DeprecateProperty('`color` is deprecated.')
-    ], IgxIconComponent.prototype, "color", void 0);
 
     /**
      * @hidden
@@ -26116,10 +26010,10 @@
         });
         Object.defineProperty(IgxRadioGroupDirective.prototype, "disabled", {
             /**
-             * An @Input property that allows you to disable the radio group. By default it's false.
-             *
              * @deprecated in version 12.2.0
              *
+             * An input property that allows you to disable the radio group. By default it's false.
+             *
              * @example
              *  ```html
              * <igx-radio-group disabled></igx-radio-group>
@@ -26137,10 +26031,10 @@
         });
         Object.defineProperty(IgxRadioGroupDirective.prototype, "labelPosition", {
             /**
-             * Sets/gets the position of the `label` in the child radio buttons.
-             *
              * @deprecated in version 12.2.0
              *
+             * Sets/gets the position of the `label` in the child radio buttons.
+             *
              * @remarks
              * If not set, `labelPosition` will have value `"after"`.
              *
@@ -26408,12 +26302,6 @@
         vertical: [{ type: i0.HostBinding, args: ['class.igx-radio-group--vertical',] }],
         alignment: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateProperty('`disabled` is deprecated.')
-    ], IgxRadioGroupDirective.prototype, "disabled", null);
-    __decorate([
-        DeprecateProperty('`labelPosition` is deprecated.')
-    ], IgxRadioGroupDirective.prototype, "labelPosition", null);
     /**
      * @hidden
      */
@@ -38955,10 +38843,10 @@
                 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);
             }
         };
         IgxComboAPIService.prototype.is_item_selected = function (itemID) {
@@ -39076,7 +38964,7 @@
     IgxComboItemComponent.decorators = [
         { type: i0.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"
+                    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"
                 },] }
     ];
     IgxComboItemComponent.ctorParameters = function () { return [
@@ -39086,359 +38974,25 @@
         { type: IgxSelectionAPIService, decorators: [{ type: i0.Inject, args: [IgxSelectionAPIService,] }] }
     ]; };
     IgxComboItemComponent.propDecorators = {
-        itemHeight: [{ type: i0.Input }, { type: i0.HostBinding, args: ['style.height.px',] }]
+        itemHeight: [{ type: i0.Input }, { type: i0.HostBinding, args: ['style.height.px',] }],
+        singleMode: [{ type: i0.Input }]
     };
 
     var IGX_COMBO_COMPONENT = new i0.InjectionToken('IgxComboComponentToken');
-
+    var NEXT_ID$c = 0;
     /**
      * @hidden
+     * The default number of items that should be in the combo's
+     * drop-down list if no `[itemsMaxHeight]` is specified
      */
-    var IgxComboAddItemComponent = /** @class */ (function (_super) {
-        __extends(IgxComboAddItemComponent, _super);
-        function IgxComboAddItemComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(IgxComboAddItemComponent.prototype, "selected", {
-            get: function () {
-                return false;
-            },
-            set: function (value) {
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * @inheritdoc
-         */
-        IgxComboAddItemComponent.prototype.clicked = function (event) {
-            this.comboAPI.disableTransitions = false;
-            this.comboAPI.add_custom_item();
-        };
-        return IgxComboAddItemComponent;
-    }(IgxComboItemComponent));
-    IgxComboAddItemComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'igx-combo-add-item',
-                    template: '<ng-content></ng-content>',
-                    providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }]
-                },] }
-    ];
-
-    /** @hidden */
-    var IgxComboDropDownComponent = /** @class */ (function (_super) {
-        __extends(IgxComboDropDownComponent, _super);
-        function IgxComboDropDownComponent(elementRef, cdr, platform, selection, combo, comboAPI, _displayDensityOptions) {
-            var _this = _super.call(this, elementRef, cdr, platform, selection, _displayDensityOptions) || this;
-            _this.elementRef = elementRef;
-            _this.cdr = cdr;
-            _this.platform = platform;
-            _this.selection = selection;
-            _this.combo = combo;
-            _this.comboAPI = comboAPI;
-            _this._displayDensityOptions = _displayDensityOptions;
-            /**
-             * @hidden
-             * @internal
-             */
-            _this.children = null;
-            _this.scrollHandler = function () {
-                _this.comboAPI.disableTransitions = true;
-            };
-            return _this;
-        }
-        Object.defineProperty(IgxComboDropDownComponent.prototype, "scrollContainer", {
-            /** @hidden @internal */
-            get: function () {
-                return this.virtDir.dc.location.nativeElement;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboDropDownComponent.prototype, "isScrolledToLast", {
-            get: function () {
-                var scrollTop = this.virtDir.scrollPosition;
-                var scrollHeight = this.virtDir.getScroll().scrollHeight;
-                return Math.floor(scrollTop + this.virtDir.igxForContainerSize) === scrollHeight;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboDropDownComponent.prototype, "lastVisibleIndex", {
-            get: function () {
-                return this.combo.totalItemCount ?
-                    Math.floor(this.combo.itemsMaxHeight / this.combo.itemHeight) :
-                    this.items.length - 1;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboDropDownComponent.prototype, "sortedChildren", {
-            get: function () {
-                if (this.children !== undefined) {
-                    return this.children.toArray()
-                        .sort(function (a, b) { return a.index - b.index; });
-                }
-                return null;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboDropDownComponent.prototype, "items", {
-            /**
-             * Get all non-header items
-             *
-             * ```typescript
-             * let myDropDownItems = this.dropdown.items;
-             * ```
-             */
-            get: function () {
-                var e_1, _a;
-                var items = [];
-                if (this.children !== undefined) {
-                    var sortedChildren = this.sortedChildren;
-                    try {
-                        for (var sortedChildren_1 = __values(sortedChildren), sortedChildren_1_1 = sortedChildren_1.next(); !sortedChildren_1_1.done; sortedChildren_1_1 = sortedChildren_1.next()) {
-                            var child = sortedChildren_1_1.value;
-                            if (!child.isHeader) {
-                                items.push(child);
-                            }
-                        }
-                    }
-                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                    finally {
-                        try {
-                            if (sortedChildren_1_1 && !sortedChildren_1_1.done && (_a = sortedChildren_1.return)) _a.call(sortedChildren_1);
-                        }
-                        finally { if (e_1) throw e_1.error; }
-                    }
-                }
-                return items;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * @hidden @internal
-         */
-        IgxComboDropDownComponent.prototype.onFocus = function () {
-            this.focusedItem = this._focusedItem || this.items[0];
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboDropDownComponent.prototype.onBlur = function (_evt) {
-            this.focusedItem = null;
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboDropDownComponent.prototype.onToggleOpened = function () {
-            this.opened.emit();
-        };
-        /**
-         * @hidden
-         */
-        IgxComboDropDownComponent.prototype.navigateFirst = function () {
-            this.navigateItem(this.virtDir.igxForOf.findIndex(function (e) { return !e.isHeader; }));
-        };
-        /**
-         * @hidden
-         */
-        IgxComboDropDownComponent.prototype.navigatePrev = function () {
-            if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
-                this.combo.focusSearchInput(false);
-            }
-            else {
-                _super.prototype.navigatePrev.call(this);
-            }
-        };
-        /**
-         * @hidden
-         */
-        IgxComboDropDownComponent.prototype.navigateNext = function () {
-            var lastIndex = this.combo.totalItemCount ? this.combo.totalItemCount - 1 : this.virtDir.igxForOf.length - 1;
-            if (this._focusedItem && this._focusedItem.index === lastIndex) {
-                this.focusAddItemButton();
-            }
-            else {
-                _super.prototype.navigateNext.call(this);
-            }
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboDropDownComponent.prototype.selectItem = function (item) {
-            if (item === null || item === undefined) {
-                return;
-            }
-            this.comboAPI.set_selected_item(item.itemID);
-            this._focusedItem = item;
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboDropDownComponent.prototype.updateScrollPosition = function () {
-            this.virtDir.getScroll().scrollTop = this._scrollPosition;
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboDropDownComponent.prototype.onItemActionKey = function (key) {
-            switch (key) {
-                case DropDownActionKey.ENTER:
-                    this.handleEnter();
-                    break;
-                case DropDownActionKey.SPACE:
-                    this.handleSpace();
-                    break;
-                case DropDownActionKey.ESCAPE:
-                    this.close();
-            }
-        };
-        IgxComboDropDownComponent.prototype.ngAfterViewInit = function () {
-            this.virtDir.getScroll().addEventListener('scroll', this.scrollHandler);
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboDropDownComponent.prototype.ngOnDestroy = function () {
-            this.virtDir.getScroll().removeEventListener('scroll', this.scrollHandler);
-            this.destroy$.next(true);
-            this.destroy$.complete();
-        };
-        IgxComboDropDownComponent.prototype.scrollToHiddenItem = function (_newItem) { };
-        IgxComboDropDownComponent.prototype.handleEnter = function () {
-            if (this.isAddItemFocused()) {
-                this.combo.addItemToCollection();
-            }
-            else {
-                this.close();
-            }
-        };
-        IgxComboDropDownComponent.prototype.handleSpace = function () {
-            if (this.isAddItemFocused()) {
-                return;
-            }
-            else {
-                this.selectItem(this.focusedItem);
-            }
-        };
-        IgxComboDropDownComponent.prototype.isAddItemFocused = function () {
-            return this.focusedItem instanceof IgxComboAddItemComponent;
-        };
-        IgxComboDropDownComponent.prototype.focusAddItemButton = function () {
-            if (this.combo.isAddButtonVisible()) {
-                this.focusedItem = this.items[this.items.length - 1];
-            }
-        };
-        return IgxComboDropDownComponent;
-    }(IgxDropDownComponent));
-    IgxComboDropDownComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'igx-combo-drop-down',
-                    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",
-                    providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }]
-                },] }
-    ];
-    IgxComboDropDownComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.ChangeDetectorRef },
-        { type: PlatformUtil },
-        { type: IgxSelectionAPIService },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [IGX_COMBO_COMPONENT,] }] },
-        { type: IgxComboAPIService },
-        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [DisplayDensityToken,] }] }
-    ]; };
-    IgxComboDropDownComponent.propDecorators = {
-        children: [{ type: i0.ContentChildren, args: [IgxComboItemComponent, { descendants: true },] }]
+    var itemsInContainer = 10; // TODO: make private readonly
+    /** @hidden @internal */
+    var ItemHeights = {
+        comfortable: 40,
+        cosy: 32,
+        compact: 28,
     };
-
-    /**
-     * @hidden
-     */
-    var IgxComboFilteringPipe = /** @class */ (function () {
-        function IgxComboFilteringPipe() {
-        }
-        IgxComboFilteringPipe.prototype.transform = function (collection, searchValue, displayKey, shouldFilter, filteringOptions) {
-            if (!collection) {
-                return [];
-            }
-            if (!searchValue || !shouldFilter) {
-                return collection;
-            }
-            else {
-                var searchTerm_1 = filteringOptions.caseSensitive ? searchValue.trim() : searchValue.toLowerCase().trim();
-                if (displayKey != null) {
-                    return collection.filter(function (e) { return filteringOptions.caseSensitive ? e[displayKey].includes(searchTerm_1) :
-                        e[displayKey].toString().toLowerCase().includes(searchTerm_1); });
-                }
-                else {
-                    return collection.filter(function (e) { return filteringOptions.caseSensitive ? e.includes(searchTerm_1) :
-                        e.toLowerCase().includes(searchTerm_1); });
-                }
-            }
-        };
-        return IgxComboFilteringPipe;
-    }());
-    IgxComboFilteringPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'comboFiltering'
-                },] }
-    ];
-    /**
-     * @hidden
-     */
-    var IgxComboGroupingPipe = /** @class */ (function () {
-        function IgxComboGroupingPipe(combo) {
-            this.combo = combo;
-        }
-        IgxComboGroupingPipe.prototype.transform = function (collection, groupKey, valueKey) {
-            var _a;
-            this.combo.filteredData = collection;
-            if ((!groupKey && groupKey !== 0) || !collection.length) {
-                return collection;
-            }
-            var sorted = DataUtil.sort(cloneArray(collection), [{
-                    fieldName: groupKey,
-                    dir: exports.SortingDirection.Asc,
-                    ignoreCase: true,
-                    strategy: DefaultSortingStrategy.instance()
-                }]);
-            var data = cloneArray(sorted);
-            var inserts = 0;
-            var currentHeader = null;
-            for (var i = 0; i < sorted.length; i++) {
-                var insertFlag = 0;
-                if (currentHeader !== sorted[i][groupKey]) {
-                    currentHeader = sorted[i][groupKey];
-                    insertFlag = 1;
-                }
-                if (insertFlag) {
-                    data.splice(i + inserts, 0, (_a = {},
-                        _a[valueKey] = currentHeader,
-                        _a[groupKey] = currentHeader,
-                        _a.isHeader = true,
-                        _a));
-                    inserts++;
-                }
-            }
-            return data;
-        };
-        return IgxComboGroupingPipe;
-    }());
-    IgxComboGroupingPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'comboGrouping'
-                },] }
-    ];
-    IgxComboGroupingPipe.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [IGX_COMBO_COMPONENT,] }] }
-    ]; };
-
-    /**
-     * @hidden
-     */
+    /** @hidden @internal */
     var DataTypes;
     (function (DataTypes) {
         DataTypes["EMPTY"] = "empty";
@@ -39446,21 +39000,7 @@
         DataTypes["COMPLEX"] = "complex";
         DataTypes["PRIMARYKEY"] = "valueKey";
     })(DataTypes || (DataTypes = {}));
-    /**
-     * @hidden
-     */
-    var 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
-     */
-    var itemsInContainer = 10;
-    exports.IgxComboState = void 0;
+    var IgxComboState;
     (function (IgxComboState) {
         /**
          * Combo with initial state.
@@ -39474,54 +39014,33 @@
          * Combo with invalid state.
          */
         IgxComboState[IgxComboState["INVALID"] = 2] = "INVALID";
-    })(exports.IgxComboState || (exports.IgxComboState = {}));
-    /**
-     * When called with sets A & B, returns A - B (as array);
-     *
-     * @hidden
-     */
-    var diffInSets = function (set1, set2) {
-        var results = [];
-        set1.forEach(function (entry) {
-            if (!set2.has(entry)) {
-                results.push(entry);
-            }
-        });
-        return results;
-    };
-    var ɵ0$1 = diffInSets;
-    var NEXT_ID$c = 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>
-     * ```
-     */
-    var IgxComboComponent = /** @class */ (function (_super) {
-        __extends(IgxComboComponent, _super);
-        function IgxComboComponent(elementRef, cdr, selection, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) {
+    })(IgxComboState || (IgxComboState = {}));
+    var IgxComboBaseDirective = /** @class */ (function (_super) {
+        __extends(IgxComboBaseDirective, _super);
+        function IgxComboBaseDirective(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) {
             var _this = _super.call(this, _displayDensityOptions) || this;
             _this.elementRef = elementRef;
             _this.cdr = cdr;
-            _this.selection = selection;
+            _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;
             /**
              * Set custom overlay settings that control how the combo's list of items is displayed.
              * Set:
@@ -39540,19 +39059,131 @@
              */
             _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$c++;
             /**
-             * The custom template, if any, that should be used when rendering ITEMS in the combo list
+             * Controls whether custom values can be added to the collection
              *
              * ```typescript
-             * // Set in typescript
-             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-             * myComponent.combo.itemTemplate = myCustomTemplate;
+             * // get
+             * let comboAllowsCustomValues = this.combo.allowCustomValues;
              * ```
+             *
              * ```html
-             * <!-- Set in markup -->
+             * <!--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;
+            /**
+             * An @Input property that enabled/disables filtering in the list. The default is `true`.
+             * ```html
+             * <igx-combo [filterable]="false">
+             * ```
+             */
+            _this.filterable = true;
+            /** @hidden @internal */
+            _this.cssClass = 'igx-combo'; // Independent of display density for the time being
+            /** @hidden @internal */
+            _this.role = 'combobox';
+            /**
+             * An @Input property that enabled/disables combo. The default is `false`.
+             * ```html
+             * <igx-combo [disabled]="'true'">
+             * ```
+             */
+            _this.disabled = false;
+            /**
+             * Emitted before the dropdown is opened
+             *
+             * ```html
+             * <igx-combo opening='handleOpening($event)'></igx-combo>
+             * ```
+             */
+            _this.opening = new i0.EventEmitter();
+            /**
+             * Emitted after the dropdown is opened
+             *
+             * ```html
+             * <igx-combo (opened)='handleOpened($event)'></igx-combo>
+             * ```
+             */
+            _this.opened = new i0.EventEmitter();
+            /**
+             * Emitted before the dropdown is closed
+             *
+             * ```html
+             * <igx-combo (closing)='handleClosing($event)'></igx-combo>
+             * ```
+             */
+            _this.closing = new i0.EventEmitter();
+            /**
+             * Emitted after the dropdown is closed
+             *
+             * ```html
+             * <igx-combo (closed)='handleClosed($event)'></igx-combo>
+             * ```
+             */
+            _this.closed = new i0.EventEmitter();
+            /**
+             * Emitted when an item is being added to the data collection
+             *
+             * ```html
+             * <igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
+             * ```
+             */
+            _this.addition = new i0.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 i0.EventEmitter();
+            /**
+             * Emitted when new chunk of data is loaded from the virtualization
+             *
+             * ```html
+             * <igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
+             * ```
+             */
+            _this.dataPreLoad = new i0.EventEmitter();
+            /**
+             * The custom template, if any, that should be used when rendering ITEMS in the combo list
+             *
+             * ```typescript
+             * // Set in typescript
+             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+             * myComponent.combo.itemTemplate = myCustomTemplate;
+             * ```
+             * ```html
+             * <!-- Set in markup -->
              *  <igx-combo #combo>
              *      ...
              *      <ng-template igxComboItem>
@@ -39706,267 +39337,57 @@
              * ```
              */
             _this.clearIconTemplate = null;
-            /**
-             * Emitted when item selection is changing, before the selection completes
-             *
-             * ```html
-             * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
-             * ```
-             */
-            _this.selectionChanging = new i0.EventEmitter();
-            /**
-             * Emitted before the dropdown is opened
-             *
-             * ```html
-             * <igx-combo opening='handleOpening($event)'></igx-combo>
-             * ```
-             */
-            _this.opening = new i0.EventEmitter();
-            /**
-             * Emitted after the dropdown is opened
-             *
-             * ```html
-             * <igx-combo (opened)='handleOpened($event)'></igx-combo>
-             * ```
-             */
-            _this.opened = new i0.EventEmitter();
-            /**
-             * Emitted before the dropdown is closed
-             *
-             * ```html
-             * <igx-combo (closing)='handleClosing($event)'></igx-combo>
-             * ```
-             */
-            _this.closing = new i0.EventEmitter();
-            /**
-             * Emitted after the dropdown is closed
-             *
-             * ```html
-             * <igx-combo (closed)='handleClosed($event)'></igx-combo>
-             * ```
-             */
-            _this.closed = new i0.EventEmitter();
-            /**
-             * Emitted when an item is being added to the data collection
-             *
-             * ```html
-             * <igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
-             * ```
-             */
-            _this.addition = new i0.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 i0.EventEmitter();
-            /**
-             * Emitted when new chunk of data is loaded from the virtualization
-             *
-             * ```html
-             * <igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
-             * ```
-             */
-            _this.dataPreLoad = new i0.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$c++;
-            /**
-             * @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 = exports.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 rxjs.Subject();
-            _this._data = [];
-            _this._filteredData = [];
+            _this._onTouchedCallback = rxjs.noop;
+            _this._onChangeCallback = rxjs.noop;
+            _this._type = null;
+            _this._dataType = '';
+            _this._searchValue = '';
             _this._itemHeight = null;
             _this._itemsMaxHeight = null;
-            _this._remoteSelection = {};
-            _this._onChangeCallback = rxjs.noop;
-            _this._onTouchedCallback = rxjs.noop;
-            _this._value = '';
-            _this._valid = exports.IgxComboState.INITIAL;
             _this.onStatusChanged = function () {
                 if ((_this.ngControl.control.touched || _this.ngControl.control.dirty) &&
                     (_this.ngControl.control.validator || _this.ngControl.control.asyncValidator)) {
                     if (!_this.collapsed || _this.inputGroup.isFocused) {
-                        _this.valid = _this.ngControl.invalid ? exports.IgxComboState.INVALID : exports.IgxComboState.VALID;
+                        _this.valid = _this.ngControl.invalid ? IgxComboState.INVALID : IgxComboState.VALID;
                     }
                     else {
-                        _this.valid = _this.ngControl.invalid ? exports.IgxComboState.INVALID : exports.IgxComboState.INITIAL;
+                        _this.valid = _this.ngControl.invalid ? IgxComboState.INVALID : IgxComboState.INITIAL;
                     }
                 }
                 else {
                     // B.P. 18 May 2021: IgxDatePicker does not reset its state upon resetForm #9526
-                    _this.valid = exports.IgxComboState.INITIAL;
+                    _this.valid = IgxComboState.INITIAL;
                 }
                 _this.manageRequiredAsterisk();
             };
-            _this.comboAPI.register(_this);
+            _this.findMatch = function (element) {
+                var value = _this.displayKey ? element[_this.displayKey] : element;
+                return value.toString().toLowerCase() === _this.searchValue.trim().toLowerCase();
+            };
             return _this;
         }
-        Object.defineProperty(IgxComboComponent.prototype, "displaySearchInput", {
-            /**
-             * @hidden @internal
-             */
-            get: function () {
-                return this.filterable || this.allowCustomValues;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboComponent.prototype, "ariaExpanded", {
-            /**
-             * @hidden @internal
-             */
-            get: function () {
-                return !this.dropdown.collapsed;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboComponent.prototype, "hasPopUp", {
-            /**
-             * @hidden @internal
-             */
-            get: function () {
-                return 'listbox';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboComponent.prototype, "ariaOwns", {
-            /**
-             * @hidden @internal
-             */
-            get: function () {
-                return this.dropdown.id;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboComponent.prototype, "itemsMaxHeight", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "itemsMaxHeight", {
             /**
              * Configures the drop down list height
              *
@@ -39992,7 +39413,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "itemHeight", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "itemHeight", {
             /**
              * Configures the drop down list item height
              *
@@ -40018,17 +39439,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "inputEmpty", {
-            /**
-             * @hidden @internal
-             */
-            get: function () {
-                return !this.value && !this.placeholder;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboComponent.prototype, "data", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "data", {
             /**
              * Combo data source.
              *
@@ -40046,9 +39457,9 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "displayKey", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "displayKey", {
             /**
-             * Combo text data source property.
+             * Determines which column in the data source is used to determine the display value.
              *
              * ```typescript
              * // get
@@ -40073,7 +39484,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "groupKey", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "groupKey", {
             /**
              * The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[].
              *
@@ -40099,7 +39510,31 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "type", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "ariaExpanded", {
+            /** @hidden @internal */
+            get: function () {
+                return !this.dropdown.collapsed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboBaseDirective.prototype, "hasPopUp", {
+            /** @hidden @internal */
+            get: function () {
+                return 'listbox';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboBaseDirective.prototype, "ariaOwns", {
+            /** @hidden @internal */
+            get: function () {
+                return this.dropdown.id;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboBaseDirective.prototype, "type", {
             /**
              * An @Input property that sets how the combo will be styled.
              * The allowed values are `line`, `box`, `border` and `search`. The default is `box`.
@@ -40116,7 +39551,40 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "valid", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "searchValue", {
+            /** @hidden @internal */
+            get: function () {
+                return this._searchValue;
+            },
+            set: function (val) {
+                this.filterValue = val;
+                this._searchValue = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboBaseDirective.prototype, "isRemote", {
+            /** @hidden @internal */
+            get: function () {
+                return this.totalItemCount > 0 &&
+                    this.valueKey &&
+                    this.dataType === DataTypes.COMPLEX;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboBaseDirective.prototype, "dataType", {
+            /** @hidden @internal */
+            get: function () {
+                if (this.displayKey) {
+                    return DataTypes.COMPLEX;
+                }
+                return DataTypes.PRIMITIVE;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboBaseDirective.prototype, "valid", {
             /**
              * Gets if control is valid, when used in a form
              *
@@ -40138,44 +39606,27 @@
              */
             set: function (valid) {
                 this._valid = valid;
-                this.comboInput.valid = exports.IgxInputState[exports.IgxComboState[valid]];
+                this.comboInput.valid = exports.IgxInputState[IgxComboState[valid]];
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "searchValue", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "value", {
             /**
-             * @hidden @internal
+             * The text displayed in the combo input
+             *
+             * ```typescript
+             * // get
+             * let comboValue = this.combo.value;
+             * ```
              */
             get: function () {
-                return this._searchValue;
-            },
-            set: function (val) {
-                this.filterValue = val;
-                this._searchValue = val;
+                return this._value;
             },
             enumerable: false,
             configurable: true
         });
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.onArrowDown = function (event) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.open();
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.onInputClick = function (event) {
-            event.stopPropagation();
-            event.preventDefault();
-            if (!this.disabled) {
-                this.toggle();
-            }
-        };
-        Object.defineProperty(IgxComboComponent.prototype, "virtualizationState", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "virtualizationState", {
             /**
              * Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize`
              *
@@ -40201,7 +39652,21 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "totalItemCount", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "collapsed", {
+            /**
+             * Gets drop down state.
+             *
+             * ```typescript
+             * let state = this.combo.collapsed;
+             * ```
+             */
+            get: function () {
+                return this.dropdown.collapsed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboBaseDirective.prototype, "totalItemCount", {
             /**
              * Gets total count of the virtual data items, when using remote service.
              *
@@ -40227,68 +39692,178 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "value", {
-            /**
-             * The text displayed in the combo input
-             *
-             * ```typescript
-             * // get
-             * let comboValue = this.combo.value;
-             * ```
-             */
-            get: function () {
-                return this._value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboComponent.prototype, "filteredData", {
-            /**
-             * @hidden @internal
-             */
+        Object.defineProperty(IgxComboBaseDirective.prototype, "template", {
+            /** @hidden @internal */
             get: function () {
-                return this.filterable ? this._filteredData : this.data;
-            },
-            /**
-             * @hidden @internal
-             */
-            set: function (val) {
-                this._filteredData = this.groupKey ? (val || []).filter(function (e) { return e.isHeader !== true; }) : val;
-                this.checkMatch();
+                this._dataType = this.dataType;
+                if (this.itemTemplate) {
+                    return this.itemTemplate;
+                }
+                if (this._dataType === DataTypes.COMPLEX) {
+                    return this.complexTemplate;
+                }
+                return this.primitiveTemplate;
             },
             enumerable: false,
             configurable: true
         });
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.handleKeyUp = function (event) {
-            if (event.key === 'ArrowDown' || event.key === 'Down') {
-                this.dropdown.focusedItem = this.dropdown.items[0];
-                this.dropdownContainer.nativeElement.focus();
-            }
-            else if (event.key === 'Escape' || event.key === 'Esc') {
-                this.toggle();
-            }
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.handleKeyDown = function (event) {
-            if (event.key === 'ArrowUp' || event.key === 'Up') {
-                event.preventDefault();
-                event.stopPropagation();
-                this.close();
-            }
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.onArrowDown = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.open();
         };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.handleInputChange = function (event) {
-            if (event !== undefined) {
-                var args = {
-                    searchText: event,
-                    owner: this,
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.ngOnInit = function () {
+            this.ngControl = this._injector.get(forms.NgControl, null);
+            var 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(materialIconsExtended.caseSensitive.name, materialIconsExtended.caseSensitive.value, 'imx-icons');
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.filteredData = __spreadArray([], __read(this.data));
+            if (this.ngControl) {
+                this.ngControl.statusChanges.pipe(operators.takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
+                this.manageRequiredAsterisk();
+                this.cdr.detectChanges();
+            }
+            this.virtDir.chunkPreload.pipe(operators.takeUntil(this.destroy$)).subscribe(function (e) {
+                var eventArgs = Object.assign({}, e, { owner: _this });
+                _this.dataPreLoad.emit(eventArgs);
+            });
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+            this.comboAPI.clear();
+            this.selectionService.clear(this.id);
+        };
+        /**
+         * A method that opens/closes the combo.
+         *
+         * ```html
+         * <button (click)="combo.toggle()">Toggle Combo</button>
+         * <igx-combo #combo></igx-combo>
+         * ```
+         */
+        IgxComboBaseDirective.prototype.toggle = function () {
+            var 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>
+         * ```
+         */
+        IgxComboBaseDirective.prototype.open = function () {
+            var 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>
+         * ```
+         */
+        IgxComboBaseDirective.prototype.close = function () {
+            this.dropdown.close();
+        };
+        /**
+         * Triggers change detection on the combo view
+         */
+        IgxComboBaseDirective.prototype.triggerCheck = function () {
+            this.cdr.detectChanges();
+        };
+        Object.defineProperty(IgxComboBaseDirective.prototype, "selection", {
+            /**
+             * Get current selection state
+             *
+             * @returns Array of selected items
+             * ```typescript
+             * let selectedItems = this.combo.selectedItems();
+             * ```
+             */
+            get: function () {
+                var items = Array.from(this.selectionService.get(this.id));
+                return items;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Returns if the specified itemID is selected
+         *
+         * @hidden
+         * @internal
+         */
+        IgxComboBaseDirective.prototype.isItemSelected = function (item) {
+            return this.selectionService.is_item_selected(this.id, item);
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.addItemToCollection = function () {
+            var _b, _c;
+            var _a;
+            if (!this.searchValue) {
+                return;
+            }
+            var newValue = this.searchValue.trim();
+            var addedItem = this.displayKey ? (_b = {},
+                _b[this.valueKey] = newValue,
+                _b[this.displayKey] = newValue,
+                _b) : newValue;
+            if (this.groupKey) {
+                Object.assign(addedItem, (_c = {}, _c[this.groupKey] = this.defaultFallbackGroup, _c));
+            }
+            // expose shallow copy instead of this.data in event args so this.data can't be mutated
+            var oldCollection = __spreadArray([], __read(this.data));
+            var newCollection = __spreadArray(__spreadArray([], __read(this.data)), [addedItem]);
+            var args = {
+                oldCollection: oldCollection,
+                addedItem: addedItem,
+                newCollection: 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;
+            (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+            this.dropdown.focusedItem = null;
+            this.virtDir.scrollTo(0);
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.isAddButtonVisible = function () {
+            // This should always return a boolean value. If this.searchValue was '', it returns '' instead of false;
+            return this.searchValue !== '' && this.customValueFlag;
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.handleInputChange = function (event) {
+            if (event !== undefined) {
+                var args = {
+                    searchText: typeof event === 'string' ? event : event.target.value,
+                    owner: this,
                     cancel: false
                 };
                 this.searchInputUpdate.emit(args);
@@ -40296,54 +39871,712 @@
                     this.filterValue = null;
                 }
             }
-            this.checkMatch();
+            this.checkMatch();
+        };
+        /**
+         * Event handlers
+         *
+         * @hidden
+         * @internal
+         */
+        IgxComboBaseDirective.prototype.handleOpening = function (e) {
+            var args = { owner: this, event: e.event, cancel: e.cancel };
+            this.opening.emit(args);
+            e.cancel = args.cancel;
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.handleClosing = function (e) {
+            var _a;
+            var 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) {
+                (_a = this.comboInput) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+            }
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.handleClosed = function () {
+            this.closed.emit({ owner: this });
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.handleKeyDown = function (event) {
+            if (event.key === 'ArrowUp' || event.key === 'Up') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.close();
+            }
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.registerOnChange = function (fn) {
+            this._onChangeCallback = fn;
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.registerOnTouched = function (fn) {
+            this._onTouchedCallback = fn;
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.onClick = function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+            if (!this.disabled) {
+                this.toggle();
+            }
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.onBlur = function () {
+            if (this.collapsed) {
+                this._onTouchedCallback();
+                if (this.ngControl && this.ngControl.invalid) {
+                    this.valid = IgxComboState.INVALID;
+                }
+                else {
+                    this.valid = IgxComboState.INITIAL;
+                }
+            }
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.toggleCaseSensitive = function () {
+            this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
+        };
+        /** if there is a valueKey - map the keys to data items, else - just return the keys */
+        IgxComboBaseDirective.prototype.convertKeysToItems = function (keys) {
+            var _this = this;
+            if (this.comboAPI.valueKey === null) {
+                return keys;
+            }
+            // map keys vs. filter data to retain the order of the selected items
+            return keys.map(function (key) { return _this.data.find(function (entry) { return entry[_this.valueKey] === key; }); }).filter(function (e) { return e !== undefined; });
+        };
+        IgxComboBaseDirective.prototype.checkMatch = function () {
+            var itemMatch = this.filteredData.some(this.findMatch);
+            this.customValueFlag = this.allowCustomValues && !itemMatch;
+        };
+        IgxComboBaseDirective.prototype.manageRequiredAsterisk = function () {
+            if (this.ngControl && this.ngControl.control.validator) {
+                // Run the validation with empty object to check if required is enabled.
+                var error = this.ngControl.control.validator({});
+                this.inputGroup.isRequired = error && error.required;
+            }
+        };
+        /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
+        IgxComboBaseDirective.prototype.registerRemoteEntries = function (ids, add) {
+            var e_1, _b, e_2, _c;
+            if (add === void 0) { add = true; }
+            if (add) {
+                var selection = this.getValueDisplayPairs(ids);
+                try {
+                    for (var selection_1 = __values(selection), selection_1_1 = selection_1.next(); !selection_1_1.done; selection_1_1 = selection_1.next()) {
+                        var entry = selection_1_1.value;
+                        this._remoteSelection[entry[this.valueKey]] = entry[this.displayKey];
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (selection_1_1 && !selection_1_1.done && (_b = selection_1.return)) _b.call(selection_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            else {
+                try {
+                    for (var ids_1 = __values(ids), ids_1_1 = ids_1.next(); !ids_1_1.done; ids_1_1 = ids_1.next()) {
+                        var entry = ids_1_1.value;
+                        delete this._remoteSelection[entry];
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (ids_1_1 && !ids_1_1.done && (_c = ids_1.return)) _c.call(ids_1);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+            }
+        };
+        /**
+         * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]`
+         */
+        IgxComboBaseDirective.prototype.getValueDisplayPairs = function (ids) {
+            var _this = this;
+            return this.data.filter(function (entry) { return ids.indexOf(entry[_this.valueKey]) > -1; }).map(function (e) {
+                var _b;
+                return (_b = {},
+                    _b[_this.valueKey] = e[_this.valueKey],
+                    _b[_this.displayKey] = e[_this.displayKey],
+                    _b);
+            });
+        };
+        IgxComboBaseDirective.prototype.getRemoteSelection = function (newSelection, oldSelection) {
+            var _this = this;
+            if (!newSelection.length) {
+                // If new selection is empty, clear all items
+                this.registerRemoteEntries(oldSelection, false);
+                return '';
+            }
+            var removedItems = oldSelection.filter(function (e) { return newSelection.indexOf(e) < 0; });
+            var addedItems = newSelection.filter(function (e) { return oldSelection.indexOf(e) < 0; });
+            this.registerRemoteEntries(addedItems);
+            this.registerRemoteEntries(removedItems, false);
+            return Object.keys(this._remoteSelection).map(function (e) { return _this._remoteSelection[e]; }).join(', ');
+        };
+        return IgxComboBaseDirective;
+    }(DisplayDensityBase));
+    IgxComboBaseDirective.decorators = [
+        { type: i0.Directive }
+    ];
+    IgxComboBaseDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef },
+        { type: IgxSelectionAPIService },
+        { type: IgxComboAPIService },
+        { type: IgxIconService },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [DisplayDensityToken,] }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [IGX_INPUT_GROUP_TYPE,] }] },
+        { type: i0.Injector, decorators: [{ type: i0.Optional }] }
+    ]; };
+    IgxComboBaseDirective.propDecorators = {
+        showSearchCaseIcon: [{ type: i0.Input }],
+        overlaySettings: [{ type: i0.Input }],
+        id: [{ type: i0.HostBinding, args: ['attr.id',] }, { type: i0.Input }],
+        width: [{ type: i0.HostBinding, args: ['style.width',] }, { type: i0.Input }],
+        allowCustomValues: [{ type: i0.Input }],
+        itemsMaxHeight: [{ type: i0.Input }],
+        itemHeight: [{ type: i0.Input }],
+        itemsWidth: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        data: [{ type: i0.Input }],
+        valueKey: [{ type: i0.Input }],
+        displayKey: [{ type: i0.Input }],
+        groupKey: [{ type: i0.Input }],
+        filterable: [{ type: i0.Input }],
+        ariaLabelledBy: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.aria-labelledby',] }],
+        cssClass: [{ type: i0.HostBinding, args: ['class.igx-combo',] }],
+        role: [{ type: i0.HostBinding, args: ["attr.role",] }],
+        ariaExpanded: [{ type: i0.HostBinding, args: ['attr.aria-expanded',] }],
+        hasPopUp: [{ type: i0.HostBinding, args: ['attr.aria-haspopup',] }],
+        ariaOwns: [{ type: i0.HostBinding, args: ['attr.aria-owns',] }],
+        disabled: [{ type: i0.Input }],
+        type: [{ type: i0.Input }],
+        opening: [{ type: i0.Output }],
+        opened: [{ type: i0.Output }],
+        closing: [{ type: i0.Output }],
+        closed: [{ type: i0.Output }],
+        addition: [{ type: i0.Output }],
+        searchInputUpdate: [{ type: i0.Output }],
+        dataPreLoad: [{ type: i0.Output }],
+        itemTemplate: [{ type: i0.ContentChild, args: [IgxComboItemDirective, { read: i0.TemplateRef },] }],
+        headerTemplate: [{ type: i0.ContentChild, args: [IgxComboHeaderDirective, { read: i0.TemplateRef },] }],
+        footerTemplate: [{ type: i0.ContentChild, args: [IgxComboFooterDirective, { read: i0.TemplateRef },] }],
+        headerItemTemplate: [{ type: i0.ContentChild, args: [IgxComboHeaderItemDirective, { read: i0.TemplateRef },] }],
+        addItemTemplate: [{ type: i0.ContentChild, args: [IgxComboAddItemDirective, { read: i0.TemplateRef },] }],
+        emptyTemplate: [{ type: i0.ContentChild, args: [IgxComboEmptyDirective, { read: i0.TemplateRef },] }],
+        toggleIconTemplate: [{ type: i0.ContentChild, args: [IgxComboToggleIconDirective, { read: i0.TemplateRef },] }],
+        clearIconTemplate: [{ type: i0.ContentChild, args: [IgxComboClearIconDirective, { read: i0.TemplateRef },] }],
+        inputGroup: [{ type: i0.ViewChild, args: ['inputGroup', { read: IgxInputGroupComponent, static: true },] }],
+        comboInput: [{ type: i0.ViewChild, args: ['comboInput', { read: IgxInputDirective, static: true },] }],
+        searchInput: [{ type: i0.ViewChild, args: ['searchInput',] }],
+        virtualScrollContainer: [{ type: i0.ViewChild, args: [IgxForOfDirective, { static: true },] }],
+        virtDir: [{ type: i0.ViewChild, args: [IgxForOfDirective, { read: IgxForOfDirective, static: true },] }],
+        dropdownContainer: [{ type: i0.ViewChild, args: ['dropdownItemContainer', { static: true },] }],
+        primitiveTemplate: [{ type: i0.ViewChild, args: ['primitive', { read: i0.TemplateRef, static: true },] }],
+        complexTemplate: [{ type: i0.ViewChild, args: ['complex', { read: i0.TemplateRef, static: true },] }],
+        onArrowDown: [{ type: i0.HostListener, args: ['keydown.ArrowDown', ['$event'],] }, { type: i0.HostListener, args: ['keydown.Alt.ArrowDown', ['$event'],] }]
+    };
+
+    /**
+     * @hidden
+     */
+    var IgxComboAddItemComponent = /** @class */ (function (_super) {
+        __extends(IgxComboAddItemComponent, _super);
+        function IgxComboAddItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(IgxComboAddItemComponent.prototype, "selected", {
+            get: function () {
+                return false;
+            },
+            set: function (value) {
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @inheritdoc
+         */
+        IgxComboAddItemComponent.prototype.clicked = function (event) {
+            this.comboAPI.disableTransitions = false;
+            this.comboAPI.add_custom_item();
+        };
+        return IgxComboAddItemComponent;
+    }(IgxComboItemComponent));
+    IgxComboAddItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'igx-combo-add-item',
+                    template: '<ng-content></ng-content>',
+                    providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }]
+                },] }
+    ];
+
+    /** @hidden */
+    var IgxComboDropDownComponent = /** @class */ (function (_super) {
+        __extends(IgxComboDropDownComponent, _super);
+        function IgxComboDropDownComponent(elementRef, cdr, platform, selection, combo, comboAPI, _displayDensityOptions) {
+            var _this = _super.call(this, elementRef, cdr, platform, selection, _displayDensityOptions) || this;
+            _this.elementRef = elementRef;
+            _this.cdr = cdr;
+            _this.platform = platform;
+            _this.selection = selection;
+            _this.combo = combo;
+            _this.comboAPI = comboAPI;
+            _this._displayDensityOptions = _displayDensityOptions;
+            /** @hidden @internal */
+            _this.singleMode = false;
+            /**
+             * @hidden
+             * @internal
+             */
+            _this.children = null;
+            _this.scrollHandler = function () {
+                _this.comboAPI.disableTransitions = true;
+            };
+            return _this;
+        }
+        Object.defineProperty(IgxComboDropDownComponent.prototype, "scrollContainer", {
+            /** @hidden @internal */
+            get: function () {
+                return this.virtDir.dc.location.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboDropDownComponent.prototype, "isScrolledToLast", {
+            get: function () {
+                var scrollTop = this.virtDir.scrollPosition;
+                var scrollHeight = this.virtDir.getScroll().scrollHeight;
+                return Math.floor(scrollTop + this.virtDir.igxForContainerSize) === scrollHeight;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboDropDownComponent.prototype, "lastVisibleIndex", {
+            get: function () {
+                return this.combo.totalItemCount ?
+                    Math.floor(this.combo.itemsMaxHeight / this.combo.itemHeight) :
+                    this.items.length - 1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboDropDownComponent.prototype, "sortedChildren", {
+            get: function () {
+                if (this.children !== undefined) {
+                    return this.children.toArray()
+                        .sort(function (a, b) { return a.index - b.index; });
+                }
+                return null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboDropDownComponent.prototype, "items", {
+            /**
+             * Get all non-header items
+             *
+             * ```typescript
+             * let myDropDownItems = this.dropdown.items;
+             * ```
+             */
+            get: function () {
+                var e_1, _a;
+                var items = [];
+                if (this.children !== undefined) {
+                    var sortedChildren = this.sortedChildren;
+                    try {
+                        for (var sortedChildren_1 = __values(sortedChildren), sortedChildren_1_1 = sortedChildren_1.next(); !sortedChildren_1_1.done; sortedChildren_1_1 = sortedChildren_1.next()) {
+                            var child = sortedChildren_1_1.value;
+                            if (!child.isHeader) {
+                                items.push(child);
+                            }
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (sortedChildren_1_1 && !sortedChildren_1_1.done && (_a = sortedChildren_1.return)) _a.call(sortedChildren_1);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                }
+                return items;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.onFocus = function () {
+            this.focusedItem = this._focusedItem || this.items[0];
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.onBlur = function (_evt) {
+            this.focusedItem = null;
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.onToggleOpened = function () {
+            this.opened.emit();
+        };
+        /**
+         * @hidden
+         */
+        IgxComboDropDownComponent.prototype.navigateFirst = function () {
+            this.navigateItem(this.virtDir.igxForOf.findIndex(function (e) { return !e.isHeader; }));
+        };
+        /**
+         * @hidden
+         */
+        IgxComboDropDownComponent.prototype.navigatePrev = function () {
+            if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
+                this.combo.focusSearchInput(false);
+            }
+            else {
+                _super.prototype.navigatePrev.call(this);
+            }
+        };
+        /**
+         * @hidden
+         */
+        IgxComboDropDownComponent.prototype.navigateNext = function () {
+            var lastIndex = this.combo.totalItemCount ? this.combo.totalItemCount - 1 : this.virtDir.igxForOf.length - 1;
+            if (this._focusedItem && this._focusedItem.index === lastIndex) {
+                this.focusAddItemButton();
+            }
+            else {
+                _super.prototype.navigateNext.call(this);
+            }
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.selectItem = function (item) {
+            if (item === null || item === undefined) {
+                return;
+            }
+            this.comboAPI.set_selected_item(item.itemID);
+            this._focusedItem = item;
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.updateScrollPosition = function () {
+            this.virtDir.getScroll().scrollTop = this._scrollPosition;
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.onItemActionKey = function (key) {
+            switch (key) {
+                case DropDownActionKey.ENTER:
+                    this.handleEnter();
+                    break;
+                case DropDownActionKey.SPACE:
+                    this.handleSpace();
+                    break;
+                case DropDownActionKey.ESCAPE:
+                    this.close();
+            }
+        };
+        IgxComboDropDownComponent.prototype.ngAfterViewInit = function () {
+            this.virtDir.getScroll().addEventListener('scroll', this.scrollHandler);
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.ngOnDestroy = function () {
+            this.virtDir.getScroll().removeEventListener('scroll', this.scrollHandler);
+            this.destroy$.next(true);
+            this.destroy$.complete();
+        };
+        IgxComboDropDownComponent.prototype.scrollToHiddenItem = function (_newItem) { };
+        IgxComboDropDownComponent.prototype.handleEnter = function () {
+            if (this.isAddItemFocused()) {
+                this.combo.addItemToCollection();
+                return;
+            }
+            if (this.singleMode && this.focusedItem) {
+                this.combo.select(this.focusedItem.itemID);
+            }
+            this.close();
+        };
+        IgxComboDropDownComponent.prototype.handleSpace = function () {
+            if (this.isAddItemFocused()) {
+                return;
+            }
+            else {
+                this.selectItem(this.focusedItem);
+            }
+        };
+        IgxComboDropDownComponent.prototype.isAddItemFocused = function () {
+            return this.focusedItem instanceof IgxComboAddItemComponent;
+        };
+        IgxComboDropDownComponent.prototype.focusAddItemButton = function () {
+            if (this.combo.isAddButtonVisible()) {
+                this.focusedItem = this.items[this.items.length - 1];
+            }
+        };
+        return IgxComboDropDownComponent;
+    }(IgxDropDownComponent));
+    IgxComboDropDownComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'igx-combo-drop-down',
+                    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",
+                    providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }]
+                },] }
+    ];
+    IgxComboDropDownComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef },
+        { type: PlatformUtil },
+        { type: IgxSelectionAPIService },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [IGX_COMBO_COMPONENT,] }] },
+        { type: IgxComboAPIService },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [DisplayDensityToken,] }] }
+    ]; };
+    IgxComboDropDownComponent.propDecorators = {
+        singleMode: [{ type: i0.Input }],
+        children: [{ type: i0.ContentChildren, args: [IgxComboItemComponent, { descendants: true },] }]
+    };
+
+    /**
+     * @hidden
+     */
+    var IgxComboFilteringPipe = /** @class */ (function () {
+        function IgxComboFilteringPipe() {
+        }
+        IgxComboFilteringPipe.prototype.transform = function (collection, searchValue, displayKey, filteringOptions, shouldFilter) {
+            if (shouldFilter === void 0) { shouldFilter = false; }
+            if (!collection) {
+                return [];
+            }
+            if (!searchValue || !shouldFilter) {
+                return collection;
+            }
+            else {
+                var searchTerm_1 = filteringOptions.caseSensitive ? searchValue.trim() : searchValue.toLowerCase().trim();
+                if (displayKey != null) {
+                    return collection.filter(function (e) { return filteringOptions.caseSensitive ? e[displayKey].includes(searchTerm_1) :
+                        e[displayKey].toString().toLowerCase().includes(searchTerm_1); });
+                }
+                else {
+                    return collection.filter(function (e) { return filteringOptions.caseSensitive ? e.includes(searchTerm_1) :
+                        e.toString().toLowerCase().includes(searchTerm_1); });
+                }
+            }
+        };
+        return IgxComboFilteringPipe;
+    }());
+    IgxComboFilteringPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'comboFiltering'
+                },] }
+    ];
+    /**
+     * @hidden
+     */
+    var IgxComboGroupingPipe = /** @class */ (function () {
+        function IgxComboGroupingPipe(combo) {
+            this.combo = combo;
+        }
+        IgxComboGroupingPipe.prototype.transform = function (collection, groupKey, valueKey) {
+            var _a;
+            this.combo.filteredData = collection;
+            if ((!groupKey && groupKey !== 0) || !collection.length) {
+                return collection;
+            }
+            var sorted = DataUtil.sort(cloneArray(collection), [{
+                    fieldName: groupKey,
+                    dir: exports.SortingDirection.Asc,
+                    ignoreCase: true,
+                    strategy: DefaultSortingStrategy.instance()
+                }]);
+            var data = cloneArray(sorted);
+            var inserts = 0;
+            var currentHeader = null;
+            for (var i = 0; i < sorted.length; i++) {
+                var insertFlag = 0;
+                if (currentHeader !== sorted[i][groupKey]) {
+                    currentHeader = sorted[i][groupKey];
+                    insertFlag = 1;
+                }
+                if (insertFlag) {
+                    data.splice(i + inserts, 0, (_a = {},
+                        _a[valueKey] = currentHeader,
+                        _a[groupKey] = currentHeader,
+                        _a.isHeader = true,
+                        _a));
+                    inserts++;
+                }
+            }
+            return data;
         };
-        Object.defineProperty(IgxComboComponent.prototype, "dataType", {
+        return IgxComboGroupingPipe;
+    }());
+    IgxComboGroupingPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'comboGrouping'
+                },] }
+    ];
+    IgxComboGroupingPipe.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [IGX_COMBO_COMPONENT,] }] }
+    ]; };
+
+    /**
+     * When called with sets A & B, returns A - B (as array);
+     *
+     * @hidden
+     */
+    var diffInSets = function (set1, set2) {
+        var results = [];
+        set1.forEach(function (entry) {
+            if (!set2.has(entry)) {
+                results.push(entry);
+            }
+        });
+        return results;
+    };
+    var ɵ0$1 = diffInSets;
+    /**
+     *  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>
+     * ```
+     */
+    var IgxComboComponent = /** @class */ (function (_super) {
+        __extends(IgxComboComponent, _super);
+        function IgxComboComponent(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) {
+            var _this = _super.call(this, elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) || this;
+            _this.elementRef = elementRef;
+            _this.cdr = cdr;
+            _this.selectionService = selectionService;
+            _this.comboAPI = comboAPI;
+            _this._iconService = _iconService;
+            _this._displayDensityOptions = _displayDensityOptions;
+            _this._inputGroupType = _inputGroupType;
+            _this._injector = _injector;
+            /**
+             * 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';
+            /**
+             * Emitted when item selection is changing, before the selection completes
+             *
+             * ```html
+             * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
+             * ```
+             */
+            _this.selectionChanging = new i0.EventEmitter();
+            /**
+             * @hidden @internal
+             */
+            _this.filteringLogic = exports.FilteringLogic.Or;
+            _this.stringFilters = IgxStringFilteringOperand;
+            _this.booleanFilters = IgxBooleanFilteringOperand;
+            _this._prevInputValue = '';
+            _this.comboAPI.register(_this);
+            return _this;
+        }
+        Object.defineProperty(IgxComboComponent.prototype, "inputEmpty", {
             /**
              * @hidden @internal
              */
             get: function () {
-                if (this.displayKey) {
-                    return DataTypes.COMPLEX;
-                }
-                return DataTypes.PRIMITIVE;
+                return !this.value && !this.placeholder;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "isRemote", {
-            /**
-             * @hidden @internal
-             */
+        Object.defineProperty(IgxComboComponent.prototype, "filteredData", {
+            /** @hidden @internal */
             get: function () {
-                return this.totalItemCount > 0 &&
-                    this.valueKey &&
-                    this.dataType === DataTypes.COMPLEX;
+                return this.filterable ? this._filteredData : this.data;
+            },
+            /** @hidden @internal */
+            set: function (val) {
+                this._filteredData = this.groupKey ? (val || []).filter(function (e) { return e.isHeader !== true; }) : val;
+                this.checkMatch();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboComponent.prototype, "displaySearchInput", {
+            /** @hidden @internal */
+            get: function () {
+                return this.filterable || this.allowCustomValues;
             },
             enumerable: false,
             configurable: true
         });
-        /**
-         * Returns if the specified itemID is selected
-         *
-         * @hidden
-         * @internal
-         */
-        IgxComboComponent.prototype.isItemSelected = function (item) {
-            return this.selection.is_item_selected(this.id, item);
-        };
-        /**
-         * Triggers change detection on the combo view
-         */
-        IgxComboComponent.prototype.triggerCheck = function () {
-            this.cdr.detectChanges();
-        };
         /**
          * @hidden @internal
          */
-        IgxComboComponent.prototype.isAddButtonVisible = function () {
-            // This should always return a boolean value. If this.searchValue was '', it returns '' instead of false;
-            return this.searchValue !== '' && this.customValueFlag;
+        IgxComboComponent.prototype.handleKeyUp = function (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();
+            }
+            else if (event.key === 'Escape' || event.key === 'Esc') {
+                this.toggle();
+            }
         };
         /**
          * @hidden @internal
@@ -40356,145 +40589,15 @@
                 this.deselectAllItems();
             }
         };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.addItemToCollection = function () {
-            var _a, _b;
-            if (!this.searchValue) {
-                return;
-            }
-            var newValue = this.searchValue.trim();
-            var addedItem = this.displayKey ? (_a = {},
-                _a[this.valueKey] = newValue,
-                _a[this.displayKey] = newValue,
-                _a) : newValue;
-            if (this.groupKey) {
-                Object.assign(addedItem, (_b = {}, _b[this.groupKey] = this.defaultFallbackGroup, _b));
-            }
-            // expose shallow copy instead of this.data in event args so this.data can't be mutated
-            var oldCollection = __spreadArray([], __read(this.data));
-            var newCollection = __spreadArray(__spreadArray([], __read(this.data)), [addedItem]);
-            var args = {
-                oldCollection: oldCollection,
-                addedItem: addedItem,
-                newCollection: 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
-         */
-        IgxComboComponent.prototype.focusSearchInput = function (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
-         */
-        IgxComboComponent.prototype.onBlur = function () {
-            if (this.collapsed) {
-                this._onTouchedCallback();
-                if (this.ngControl && this.ngControl.invalid) {
-                    this.valid = exports.IgxComboState.INVALID;
-                }
-                else {
-                    this.valid = exports.IgxComboState.INITIAL;
-                }
-            }
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.ngOnInit = function () {
-            this.ngControl = this._injector.get(forms.NgControl, null);
-            var 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(materialIconsExtended.caseSensitive.name, materialIconsExtended.caseSensitive.value, 'imx-icons');
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            this.filteredData = __spreadArray([], __read(this.data));
-            if (this.ngControl) {
-                this.ngControl.statusChanges.pipe(operators.takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
-                this.manageRequiredAsterisk();
-                this.cdr.detectChanges();
-            }
-            this.virtDir.chunkPreload.pipe(operators.takeUntil(this.destroy$)).subscribe(function (e) {
-                var eventArgs = Object.assign({}, e, { owner: _this });
-                _this.dataPreLoad.emit(eventArgs);
-            });
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.ngOnDestroy = function () {
-            this.destroy$.next();
-            this.destroy$.complete();
-            this.comboAPI.clear();
-            this.selection.clear(this.id);
-        };
         /**
          * @hidden @internal
          */
         IgxComboComponent.prototype.writeValue = function (value) {
             var selection = Array.isArray(value) ? value : [];
-            var oldSelection = this.selectedItems();
-            this.selection.select_items(this.id, selection, true);
+            var oldSelection = this.selection;
+            this.selectionService.select_items(this.id, selection, true);
             this.cdr.markForCheck();
-            this._value = this.createDisplayText(this.selectedItems(), oldSelection);
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.registerOnChange = function (fn) {
-            this._onChangeCallback = fn;
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.registerOnTouched = function (fn) {
-            this._onTouchedCallback = fn;
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
+            this._value = this.createDisplayText(this.selection, oldSelection);
         };
         /**
          * @hidden
@@ -40502,23 +40605,6 @@
         IgxComboComponent.prototype.getEditElement = function () {
             return this.comboInput.nativeElement;
         };
-        Object.defineProperty(IgxComboComponent.prototype, "template", {
-            /**
-             * @hidden @internal
-             */
-            get: function () {
-                this._dataType = this.dataType;
-                if (this.itemTemplate) {
-                    return this.itemTemplate;
-                }
-                if (this._dataType === DataTypes.COMPLEX) {
-                    return this.complexTemplate;
-                }
-                return this.primitiveTemplate;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(IgxComboComponent.prototype, "context", {
             /**
              * @hidden @internal
@@ -40547,79 +40633,18 @@
             }
             event.stopPropagation();
         };
-        /**
-         * A method that opens/closes the combo.
-         *
-         * ```html
-         * <button (click)="combo.toggle()">Toggle Combo</button>
-         * <igx-combo #combo></igx-combo>
-         * ```
-         */
-        IgxComboComponent.prototype.toggle = function () {
-            var 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>
-         * ```
-         */
-        IgxComboComponent.prototype.open = function () {
-            var 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>
-         * ```
-         */
-        IgxComboComponent.prototype.close = function () {
-            this.dropdown.close();
-        };
-        Object.defineProperty(IgxComboComponent.prototype, "collapsed", {
-            /**
-             * Gets drop down state.
-             *
-             * ```typescript
-             * let state = this.combo.collapsed;
-             * ```
-             */
-            get: function () {
-                return this.dropdown.collapsed;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Get current selection state
-         *
-         * @returns Array of selected items
-         * ```typescript
-         * let selectedItems = this.combo.selectedItems();
-         * ```
-         */
-        IgxComboComponent.prototype.selectedItems = function () {
-            var 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"]);
          * ```
          */
-        IgxComboComponent.prototype.selectItems = function (newItems, clearCurrentSelection, event) {
+        IgxComboComponent.prototype.select = function (newItems, clearCurrentSelection, event) {
             if (newItems) {
-                var newSelection = this.selection.add_items(this.id, newItems, clearCurrentSelection);
+                var newSelection = this.selectionService.add_items(this.id, newItems, clearCurrentSelection);
                 this.setSelection(newSelection, event);
             }
         };
@@ -40628,12 +40653,12 @@
          *
          * @param items items to deselected
          * ```typescript
-         * this.combo.deselectItems(["New York", "New Jersey"]);
+         * this.combo.deselect(["New York", "New Jersey"]);
          * ```
          */
-        IgxComboComponent.prototype.deselectItems = function (items, event) {
+        IgxComboComponent.prototype.deselect = function (items, event) {
             if (items) {
-                var newSelection = this.selection.delete_items(this.id, items);
+                var newSelection = this.selectionService.delete_items(this.id, items);
                 this.setSelection(newSelection, event);
             }
         };
@@ -40646,8 +40671,8 @@
          * ```
          */
         IgxComboComponent.prototype.selectAllItems = function (ignoreFilter, event) {
-            var allVisible = this.selection.get_all_ids(ignoreFilter ? this.data : this.filteredData, this.valueKey);
-            var newSelection = this.selection.add_items(this.id, allVisible);
+            var allVisible = this.selectionService.get_all_ids(ignoreFilter ? this.data : this.filteredData, this.valueKey);
+            var newSelection = this.selectionService.add_items(this.id, allVisible);
             this.setSelection(newSelection, event);
         };
         /**
@@ -40659,9 +40684,9 @@
          * ```
          */
         IgxComboComponent.prototype.deselectAllItems = function (ignoreFilter, event) {
-            var newSelection = this.selection.get_empty();
+            var 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);
         };
@@ -40690,26 +40715,13 @@
                 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
-         */
-        IgxComboComponent.prototype.handleOpening = function (e) {
-            var args = { owner: this, event: e.event, cancel: e.cancel };
-            this.opening.emit(args);
-            e.cancel = args.cancel;
-        };
-        /**
-         * @hidden @internal
-         */
+        /** @hidden @internal */
         IgxComboComponent.prototype.handleOpened = function () {
             this.triggerCheck();
             // Disabling focus of the search input should happen only when drop down opens.
@@ -40723,36 +40735,26 @@
             }
             this.opened.emit({ owner: this });
         };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.handleClosing = function (e) {
-            var args = { owner: this, event: e.event, cancel: e.cancel };
-            this.closing.emit(args);
-            e.cancel = args.cancel;
-            if (e.cancel) {
-                return;
+        /** @hidden @internal */
+        IgxComboComponent.prototype.focusSearchInput = function (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
-         */
-        IgxComboComponent.prototype.handleClosed = function () {
-            this.closed.emit({ owner: this });
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.toggleCaseSensitive = function () {
-            this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
         };
         IgxComboComponent.prototype.setSelection = function (newSelection, event) {
-            var removed = diffInSets(this.selection.get(this.id), newSelection);
-            var added = diffInSets(newSelection, this.selection.get(this.id));
+            var removed = diffInSets(this.selectionService.get(this.id), newSelection);
+            var added = diffInSets(newSelection, this.selectionService.get(this.id));
             var newSelectionAsArray = Array.from(newSelection);
-            var oldSelectionAsArray = Array.from(this.selection.get(this.id) || []);
+            var oldSelectionAsArray = Array.from(this.selectionService.get(this.id) || []);
             var displayText = this.createDisplayText(newSelectionAsArray, oldSelectionAsArray);
             var args = {
                 newSelection: newSelectionAsArray,
@@ -40766,7 +40768,7 @@
             };
             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;
                 }
@@ -40776,71 +40778,10 @@
                 this._onChangeCallback(args.newSelection);
             }
         };
-        IgxComboComponent.prototype.manageRequiredAsterisk = function () {
-            if (this.ngControl && this.ngControl.control.validator) {
-                // Run the validation with empty object to check if required is enabled.
-                var error = this.ngControl.control.validator({});
-                this.inputGroup.isRequired = error && error.required;
-            }
-        };
-        /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
-        IgxComboComponent.prototype.registerRemoteEntries = function (ids, add) {
-            var e_1, _a, e_2, _b;
-            if (add === void 0) { add = true; }
-            if (add) {
-                var selection = this.getValueDisplayPairs(ids);
-                try {
-                    for (var selection_1 = __values(selection), selection_1_1 = selection_1.next(); !selection_1_1.done; selection_1_1 = selection_1.next()) {
-                        var entry = selection_1_1.value;
-                        this._remoteSelection[entry[this.valueKey]] = entry[this.displayKey];
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (selection_1_1 && !selection_1_1.done && (_a = selection_1.return)) _a.call(selection_1);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-            }
-            else {
-                try {
-                    for (var ids_1 = __values(ids), ids_1_1 = ids_1.next(); !ids_1_1.done; ids_1_1 = ids_1.next()) {
-                        var entry = ids_1_1.value;
-                        delete this._remoteSelection[entry];
-                    }
-                }
-                catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                finally {
-                    try {
-                        if (ids_1_1 && !ids_1_1.done && (_b = ids_1.return)) _b.call(ids_1);
-                    }
-                    finally { if (e_2) throw e_2.error; }
-                }
-            }
-        };
-        /**
-         * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]`
-         */
-        IgxComboComponent.prototype.getValueDisplayPairs = function (ids) {
-            var _this = this;
-            return this.data.filter(function (entry) { return ids.indexOf(entry[_this.valueKey]) > -1; }).map(function (e) {
-                var _a;
-                return (_a = {},
-                    _a[_this.valueKey] = e[_this.valueKey],
-                    _a[_this.displayKey] = e[_this.displayKey],
-                    _a);
-            });
-        };
-        IgxComboComponent.prototype.checkMatch = function () {
-            var _this = this;
-            var displayKey = this.displayKey;
-            var matchFn = function (e) {
-                var value = displayKey ? e[displayKey] : e;
-                return value.toString().toLowerCase() === _this.searchValue.trim().toLowerCase();
-            };
-            var itemMatch = this.filteredData.some(matchFn);
-            this.customValueFlag = this.allowCustomValues && !itemMatch;
+        IgxComboComponent.prototype.createDisplayText = function (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 */
         IgxComboComponent.prototype.concatDisplayText = function (selection) {
@@ -40850,47 +40791,12 @@
                 selection.join(', ');
             return value;
         };
-        /**
-         * Constructs the combo display value
-         * If remote, caches the key displayText
-         * If not, just combine the object.displayKeys
-         */
-        IgxComboComponent.prototype.createDisplayText = function (newSelection, oldSelection) {
-            var _this = this;
-            var value = '';
-            if (this.isRemote) {
-                if (newSelection.length) {
-                    var removedItems = oldSelection.filter(function (e) { return newSelection.indexOf(e) < 0; });
-                    var addedItems = newSelection.filter(function (e) { return oldSelection.indexOf(e) < 0; });
-                    this.registerRemoteEntries(addedItems);
-                    this.registerRemoteEntries(removedItems, false);
-                    value = Object.keys(this._remoteSelection).map(function (e) { return _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 */
-        IgxComboComponent.prototype.convertKeysToItems = function (keys) {
-            var _this = this;
-            if (this.comboAPI.valueKey === null) {
-                return keys;
-            }
-            // map keys vs. filter data to retain the order of the selected items
-            return keys.map(function (key) { return _this.data.find(function (entry) { return entry[_this.valueKey] === key; }); }).filter(function (e) { return e !== undefined; });
-        };
         return IgxComboComponent;
-    }(DisplayDensityBase));
+    }(IgxComboBaseDirective));
     IgxComboComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'igx-combo',
-                    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;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
+                    template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"value\" readonly [attr.placeholder]=\"placeholder\"\n        [disabled]=\"disabled\" (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: this.collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <igx-input-group *ngIf=\"displaySearchInput\" [displayDensity]=\"displayDensity\" theme=\"material\" class=\"igx-combo__search\">\n        <input class=\"igx-combo-input\" igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n            [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n            (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n            aria-autocomplete=\"both\" [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" />\n        <igx-suffix *ngIf=\"showSearchCaseIcon\">\n            <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n                (click)=\"toggleCaseSensitive()\">\n            </igx-icon>\n        </igx-suffix>\n    </igx-input-group>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\">\n        <igx-combo-item role=\"option\" [itemHeight]='itemHeight' *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterable\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
                     providers: [
                         IgxComboAPIService,
                         { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
@@ -40909,56 +40815,11 @@
         { type: i0.Injector, decorators: [{ type: i0.Optional }] }
     ]; };
     IgxComboComponent.propDecorators = {
-        overlaySettings: [{ type: i0.Input }],
-        inputGroup: [{ type: i0.ViewChild, args: ['inputGroup', { read: IgxInputGroupComponent, static: true },] }],
-        comboInput: [{ type: i0.ViewChild, args: ['comboInput', { read: IgxInputDirective, static: true },] }],
-        dropdown: [{ type: i0.ViewChild, args: [IgxComboDropDownComponent, { read: IgxComboDropDownComponent, static: true },] }],
-        searchInput: [{ type: i0.ViewChild, args: ['searchInput',] }],
-        itemTemplate: [{ type: i0.ContentChild, args: [IgxComboItemDirective, { read: i0.TemplateRef },] }],
-        headerTemplate: [{ type: i0.ContentChild, args: [IgxComboHeaderDirective, { read: i0.TemplateRef },] }],
-        footerTemplate: [{ type: i0.ContentChild, args: [IgxComboFooterDirective, { read: i0.TemplateRef },] }],
-        headerItemTemplate: [{ type: i0.ContentChild, args: [IgxComboHeaderItemDirective, { read: i0.TemplateRef },] }],
-        addItemTemplate: [{ type: i0.ContentChild, args: [IgxComboAddItemDirective, { read: i0.TemplateRef },] }],
-        emptyTemplate: [{ type: i0.ContentChild, args: [IgxComboEmptyDirective, { read: i0.TemplateRef },] }],
-        toggleIconTemplate: [{ type: i0.ContentChild, args: [IgxComboToggleIconDirective, { read: i0.TemplateRef },] }],
-        clearIconTemplate: [{ type: i0.ContentChild, args: [IgxComboClearIconDirective, { read: i0.TemplateRef },] }],
-        virtualScrollContainer: [{ type: i0.ViewChild, args: [IgxForOfDirective, { static: true },] }],
-        selectionChanging: [{ type: i0.Output }],
-        opening: [{ type: i0.Output }],
-        opened: [{ type: i0.Output }],
-        closing: [{ type: i0.Output }],
-        closed: [{ type: i0.Output }],
-        addition: [{ type: i0.Output }],
-        searchInputUpdate: [{ type: i0.Output }],
-        dataPreLoad: [{ type: i0.Output }],
-        id: [{ type: i0.HostBinding, args: ['attr.id',] }, { type: i0.Input }],
-        width: [{ type: i0.HostBinding, args: ['style.width',] }, { type: i0.Input }],
-        cssClass: [{ type: i0.HostBinding, args: ['class.igx-combo',] }],
-        role: [{ type: i0.HostBinding, args: ["attr.role",] }],
-        ariaExpanded: [{ type: i0.HostBinding, args: ['attr.aria-expanded',] }],
-        hasPopUp: [{ type: i0.HostBinding, args: ['attr.aria-haspopup',] }],
-        ariaOwns: [{ type: i0.HostBinding, args: ['attr.aria-owns',] }],
-        allowCustomValues: [{ type: i0.Input }],
-        itemsMaxHeight: [{ type: i0.Input }],
-        itemsWidth: [{ type: i0.Input }],
-        itemHeight: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
-        searchPlaceholder: [{ type: i0.Input }],
-        showSearchCaseIcon: [{ type: i0.Input }],
-        data: [{ type: i0.Input }],
-        valueKey: [{ type: i0.Input }],
-        displayKey: [{ type: i0.Input }],
-        groupKey: [{ type: i0.Input }],
-        filterable: [{ type: i0.Input }],
-        ariaLabelledBy: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.aria-labelledby',] }],
-        disabled: [{ type: i0.Input }],
-        type: [{ type: i0.Input }],
         autoFocusSearch: [{ type: i0.Input }],
-        dropdownContainer: [{ type: i0.ViewChild, args: ['dropdownItemContainer', { static: true },] }],
-        primitiveTemplate: [{ type: i0.ViewChild, args: ['primitive', { read: i0.TemplateRef, static: true },] }],
-        complexTemplate: [{ type: i0.ViewChild, args: ['complex', { read: i0.TemplateRef, static: true },] }],
-        virtDir: [{ type: i0.ViewChild, args: [IgxForOfDirective, { read: IgxForOfDirective, static: true },] }],
-        onArrowDown: [{ type: i0.HostListener, args: ['keydown.ArrowDown', ['$event'],] }, { type: i0.HostListener, args: ['keydown.Alt.ArrowDown', ['$event'],] }]
+        filterable: [{ type: i0.Input }],
+        searchPlaceholder: [{ type: i0.Input }],
+        selectionChanging: [{ type: i0.Output }],
+        dropdown: [{ type: i0.ViewChild, args: [IgxComboDropDownComponent, { static: true },] }]
     };
     /**
      * @hidden
@@ -40981,6 +40842,8 @@
                         IgxComboToggleIconDirective,
                         IgxComboClearIconDirective],
                     exports: [IgxComboComponent, IgxComboItemComponent, IgxComboDropDownComponent, IgxComboAddItemComponent,
+                        IgxComboGroupingPipe,
+                        IgxComboFilteringPipe,
                         IgxComboItemDirective,
                         IgxComboEmptyDirective,
                         IgxComboHeaderItemDirective,
@@ -40995,6 +40858,387 @@
                 },] }
     ];
 
+    /**
+     * 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>
+     * ```
+     */
+    var IgxSimpleComboComponent = /** @class */ (function (_super) {
+        __extends(IgxSimpleComboComponent, _super);
+        function IgxSimpleComboComponent(elementRef, cdr, selectionService, comboAPI, _iconService, platformUtil, _displayDensityOptions, _inputGroupType, _injector) {
+            var _this = _super.call(this, elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) || this;
+            _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 i0.EventEmitter();
+            /** @hidden @internal */
+            _this.composing = false;
+            _this._updateInput = true;
+            _this.findMatch = function (element) {
+                var value = _this.displayKey ? element[_this.displayKey] : element;
+                return value.toString().toLowerCase().includes(_this.searchValue.trim().toLowerCase());
+            };
+            _this.comboAPI.register(_this);
+            return _this;
+        }
+        Object.defineProperty(IgxSimpleComboComponent.prototype, "filteredData", {
+            /** @hidden @internal */
+            get: function () {
+                return this._filteredData;
+            },
+            /** @hidden @internal */
+            set: function (val) {
+                this._filteredData = this.groupKey ? (val || []).filter(function (e) { return e.isHeader !== true; }) : val;
+                this.checkMatch();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.onArrowDown = function (event) {
+            if (this.collapsed) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.open();
+            }
+            else {
+                if (this.virtDir.igxForOf.length > 0) {
+                    this.dropdown.navigateFirst();
+                    this.dropdownContainer.nativeElement.focus();
+                }
+                else if (this.allowCustomValues) {
+                    this.addItem.element.nativeElement.focus();
+                }
+            }
+        };
+        /**
+         * Select a defined item
+         *
+         * @param item the item to be selected
+         * ```typescript
+         * this.combo.select("New York");
+         * ```
+         */
+        IgxSimpleComboComponent.prototype.select = function (item) {
+            if (item !== null && item !== undefined) {
+                var 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");
+         * ```
+         */
+        IgxSimpleComboComponent.prototype.deselect = function () {
+            this.clearSelection();
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.writeValue = function (value) {
+            var oldSelection = this.selection;
+            this.selectionService.select_items(this.id, value ? [value] : [], true);
+            this.cdr.markForCheck();
+            this._value = this.createDisplayText(this.selection, oldSelection);
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.virtDir.contentSizeChange.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+                if (_this.selection.length > 0) {
+                    var index = _this.virtDir.igxForOf.findIndex(function (e) {
+                        var current = e[_this.valueKey];
+                        if (_this.valueKey === null || _this.valueKey === undefined) {
+                            current = e;
+                        }
+                        return current === _this.selection[0];
+                    });
+                    _this.dropdown.navigateItem(index);
+                }
+            });
+            this.dropdown.opened.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+                if (_this.composing) {
+                    _this.comboInput.focus();
+                }
+            });
+            this.dropdown.closing.pipe(operators.takeUntil(this.destroy$)).subscribe(function (args) {
+                if (_this.getEditElement() && !args.event) {
+                    _this.comboInput.focus();
+                }
+                else {
+                    _this.clearOnBlur();
+                    _this._onTouchedCallback();
+                }
+            });
+            _super.prototype.ngAfterViewInit.call(this);
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleInputChange = function (event) {
+            this.searchValue = event.target.value;
+            this._onChangeCallback(this.searchValue);
+            if (this.collapsed && this.comboInput.focused) {
+                this.open();
+                this.dropdown.navigateFirst();
+            }
+            if (!this.comboInput.value.trim()) {
+                // handle clearing of input by space
+                this.clearSelection();
+                this._onChangeCallback(null);
+            }
+            _super.prototype.handleInputChange.call(this, event);
+            this.composing = true;
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleKeyDown = function (event) {
+            if (event.key === this.platformUtil.KEYMAP.ENTER) {
+                var filtered = this.filteredData.find(this.findMatch);
+                if (filtered === null || filtered === undefined) {
+                    return;
+                }
+                this.select(this.dropdown.focusedItem.itemID);
+                event.preventDefault();
+                event.stopPropagation();
+                this.close();
+                // manually trigger text selection as it will not be triggered during editing
+                this.textSelection.trigger();
+                return;
+            }
+            if (event.key === this.platformUtil.KEYMAP.BACKSPACE
+                || event.key === this.platformUtil.KEYMAP.DELETE) {
+                this._updateInput = false;
+                this.clearSelection();
+            }
+            if (!this.collapsed && event.key === this.platformUtil.KEYMAP.TAB) {
+                this.close();
+                this.clearOnBlur();
+            }
+            this.composing = false;
+            _super.prototype.handleKeyDown.call(this, event);
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleKeyUp = function (event) {
+            if (event.key === this.platformUtil.KEYMAP.ARROW_DOWN) {
+                var firstItem_1 = this.selectionService.first_item(this.id);
+                this.dropdown.focusedItem = firstItem_1 && this.filteredData.length > 0
+                    ? this.dropdown.items.find(function (i) { return i.itemID === firstItem_1; })
+                    : this.dropdown.items[0];
+                this.dropdownContainer.nativeElement.focus();
+            }
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleItemKeyDown = function (event) {
+            if (event.key === this.platformUtil.KEYMAP.ARROW_UP && event.altKey) {
+                this.close();
+                this.comboInput.focus();
+                return;
+            }
+            if (event.key === this.platformUtil.KEYMAP.ENTER) {
+                this.comboInput.focus();
+            }
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleItemClick = function () {
+            this.close();
+            this.comboInput.focus();
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.onBlur = function () {
+            if (this.collapsed) {
+                this.clearOnBlur();
+            }
+            _super.prototype.onBlur.call(this);
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.getEditElement = function () {
+            return this.comboInput.nativeElement;
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleClear = function (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 */
+        IgxSimpleComboComponent.prototype.handleOpened = function () {
+            this.triggerCheck();
+            this.dropdownContainer.nativeElement.focus();
+            this.opened.emit({ owner: this });
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleClosing = function (e) {
+            var args = { owner: this, event: e.event, cancel: e.cancel };
+            this.closing.emit(args);
+            e.cancel = args.cancel;
+            if (e.cancel) {
+                return;
+            }
+            this.composing = false;
+            // explicitly update selection and trigger text selection so that we don't have to force CD
+            this.textSelection.selected = true;
+            this.textSelection.trigger();
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.focusSearchInput = function (opening) {
+            if (opening) {
+                this.dropdownContainer.nativeElement.focus();
+            }
+            else {
+                this.comboInput.nativeElement.focus();
+                this.toggle();
+            }
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.onClick = function (event) {
+            _super.prototype.onClick.call(this, event);
+            if (this.comboInput.value.length === 0) {
+                this.virtDir.scrollTo(0);
+            }
+        };
+        IgxSimpleComboComponent.prototype.setSelection = function (newSelection) {
+            var newSelectionAsArray = newSelection ? Array.from(newSelection) : [];
+            var oldSelectionAsArray = Array.from(this.selectionService.get(this.id) || []);
+            var displayText = this.createDisplayText(newSelectionAsArray, oldSelectionAsArray);
+            var args = {
+                newSelection: newSelectionAsArray[0],
+                oldSelection: oldSelectionAsArray[0],
+                displayText: displayText,
+                owner: this,
+                cancel: false
+            };
+            this.selectionChanging.emit(args);
+            if (!args.cancel) {
+                var 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(argsSelection, [args.oldSelection]);
+                }
+                this._onChangeCallback(args.newSelection);
+                this._updateInput = true;
+            }
+        };
+        IgxSimpleComboComponent.prototype.createDisplayText = function (newSelection, oldSelection) {
+            var _this = this;
+            if (this.isRemote) {
+                return this.getRemoteSelection(newSelection, oldSelection);
+            }
+            if (this.displayKey !== null && this.displayKey !== undefined
+                && newSelection.length > 0) {
+                return this.convertKeysToItems(newSelection).map(function (e) { return e[_this.displayKey]; })[0];
+            }
+            return newSelection[0] || '';
+        };
+        IgxSimpleComboComponent.prototype.clearSelection = function (ignoreFilter) {
+            var newSelection = this.selectionService.get_empty();
+            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.prototype.clearOnBlur = function () {
+            var filtered = this.filteredData.find(this.findMatch);
+            if ((filtered === undefined || filtered === null)) {
+                this.close();
+                this.clearSelection();
+                this.searchValue = '';
+            }
+        };
+        return IgxSimpleComboComponent;
+    }(IgxComboBaseDirective));
+    IgxSimpleComboComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'igx-simple-combo',
+                    template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\" aria-autocomplete=\"both\"\n        [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" [disabled]=\"disabled\"\n        [igxTextSelection]=\"!composing\" />\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\"\n        (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"handleItemClick()\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:true\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
+                    providers: [
+                        IgxComboAPIService,
+                        { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
+                        { provide: forms.NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
+                    ]
+                },] }
+    ];
+    IgxSimpleComboComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef },
+        { type: IgxSelectionAPIService },
+        { type: IgxComboAPIService },
+        { type: IgxIconService },
+        { type: PlatformUtil },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [DisplayDensityToken,] }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [IGX_INPUT_GROUP_TYPE,] }] },
+        { type: i0.Injector, decorators: [{ type: i0.Optional }] }
+    ]; };
+    IgxSimpleComboComponent.propDecorators = {
+        dropdown: [{ type: i0.ViewChild, args: [IgxComboDropDownComponent, { static: true },] }],
+        addItem: [{ type: i0.ViewChild, args: [IgxComboAddItemComponent,] }],
+        selectionChanging: [{ type: i0.Output }],
+        textSelection: [{ type: i0.ViewChild, args: [IgxTextSelectionDirective, { static: true },] }],
+        onArrowDown: [{ type: i0.HostListener, args: ['keydown.ArrowDown', ['$event'],] }, { type: i0.HostListener, args: ['keydown.Alt.ArrowDown', ['$event'],] }]
+    };
+    var IgxSimpleComboModule = /** @class */ (function () {
+        function IgxSimpleComboModule() {
+        }
+        return IgxSimpleComboModule;
+    }());
+    IgxSimpleComboModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [IgxSimpleComboComponent],
+                    imports: [
+                        IgxComboModule, IgxRippleModule, i2.CommonModule,
+                        IgxInputGroupModule, forms.FormsModule, forms.ReactiveFormsModule,
+                        IgxForOfModule, IgxToggleModule, IgxCheckboxModule,
+                        IgxDropDownModule, IgxButtonModule, IgxIconModule,
+                        IgxTextSelectionModule
+                    ],
+                    exports: [IgxSimpleComboComponent, IgxComboModule]
+                },] }
+    ];
+
     /** Header orientation in `dialog` mode. */
     var PickerHeaderOrientation = mkenum({
         Horizontal: 'horizontal',
@@ -52403,15 +52647,23 @@
                 var _this = this;
                 if (!val && val !== 0) {
                     this.expression.searchVal = null;
-                    this.showHideArrowButtons();
+                    var index = this.expressionsList.findIndex(function (item) { return item.expression === _this.expression; });
+                    if (index === 0 && this.expressionsList.length === 1) {
+                        this.clearFiltering();
+                        return;
+                    }
                 }
                 else {
+                    var oldValue = this.expression.searchVal;
+                    if (isEqual(oldValue, val)) {
+                        return;
+                    }
                     this.expression.searchVal = DataUtil.parseValue(this.column.dataType, val);
                     if (this.expressionsList.find(function (item) { return item.expression === _this.expression; }) === undefined) {
                         this.addExpression(true);
                     }
+                    this.filter();
                 }
-                this.filter();
             },
             enumerable: false,
             configurable: true
@@ -54206,7 +54458,7 @@
         { type: i0.Component, args: [{
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     selector: 'igx-grid-header-row',
-                    template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n"
+                    template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n"
                 },] }
     ];
     IgxGridHeaderRowComponent.ctorParameters = function () { return [
@@ -54390,9 +54642,10 @@
              */
             _this.gridScroll = new i0.EventEmitter();
             /**
+             * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+             *
              * Emitted after the current page is changed.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```html
              * <igx-grid (pageChange)="onPageChange($event)"></igx-grid>
@@ -54405,10 +54658,10 @@
              */
             _this.pageChange = new i0.EventEmitter();
             /**
+             * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+             *
              * Emitted when `perPage` property value of the grid is changed.
              *
-             * @deprecated in version 12.1.0
-             * @example
              * ```html
              * <igx-grid #grid (perPageChange)="onPerPageChange($event)" [autoGenerate]="true"></igx-grid>
              * ```
@@ -54425,6 +54678,8 @@
              */
             _this.class = '';
             /**
+             * @deprecated in version 12.2.0. We suggest using `rowClasses` property instead
+             *
              * Gets/Sets the styling classes applied to all even `IgxGridRowComponent`s in the grid.
              *
              * @example
@@ -54434,6 +54689,8 @@
              */
             _this.evenRowCSS = 'igx-grid__tr--even';
             /**
+             * @deprecated in version 12.2.0. We suggest using `rowClasses` property instead
+             *
              * Gets/Sets the styling classes applied to all odd `IgxGridRowComponent`s in the grid.
              *
              * @example
@@ -54688,9 +54945,10 @@
              */
             _this.filteringDone = new i0.EventEmitter();
             /**
+             * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+             *
              * Emitted after paging is performed.
              *
-             * @deprecated in version 12.1.x
              * @remarks
              * Returns an object consisting of the previous and next pages.
              * @example
@@ -55394,9 +55652,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "paging", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+             *
              * Gets/Sets whether the paging feature is enabled.
              *
-             * @deprecated in version 12.1.x
              * @remarks
              * The default state is disabled (false).
              * @example
@@ -55418,9 +55677,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "page", {
             /**
+             * @deprecated in version 12.1.0. Use `page` property form `paginator` component instead
+             *
              * Gets/Sets the current page index.
              *
-             * @deprecated in version 12.1.x
              * @example
              * ```html
              * <igx-grid #grid [data]="Data" [autoGenerate]="true">
@@ -55444,9 +55704,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "perPage", {
             /**
+             * @deprecated in version 12.1.0. Use `perPage` property from `paginator` component instead
+             *
              * Gets/Sets the number of visible items per page.
              *
-             * @deprecated in version 12.1.x
              * @remarks
              * The default is 15.
              * @example
@@ -55471,9 +55732,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnHiding", {
             /**
+             * @deprecated in version 10.1.0
+             *
              * Gets/Sets whether the column hiding UI is enabled.
              *
-             * @deprecated
              * @remarks
              * By default it is disabled (false). In order for the UI to work, you need to enable the toolbar as shown in the example below.
              * @example
@@ -55724,9 +55986,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnHidingTitle", {
             /**
-             * Gets/Sets the title to be displayed in the built-in column hiding UI.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the title to be displayed in the built-in column hiding UI.
              *
              * @example
              * ```html
@@ -55776,9 +56038,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnPinning", {
             /**
-             * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
              *
              * @example
              * ```html
@@ -55797,9 +56059,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columnPinningTitle", {
             /**
-             * Gets/Sets the title to be displayed in the UI of the column pinning.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the title to be displayed in the UI of the column pinning.
              *
              * @example
              * ```html
@@ -56402,9 +56664,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "hiddenColumnsText", {
             /**
-             * Gets/Sets the text to be displayed inside the toggle button.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the text to be displayed inside the toggle button.
              *
              * @remarks
              * Used for the built-in column hiding UI of the`IgxColumnComponent`.
@@ -56413,7 +56675,6 @@
              * <igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>
              * ```
              */
-            // @DeprecateProperty('`hiddenColumnsText` is deprecated')
             get: function () {
                 return this._hiddenColumnsText;
             },
@@ -56426,9 +56687,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "pinnedColumnsText", {
             /**
-             * Gets/Sets the text to be displayed inside the toggle button.
+             * @deprecated in version 10.1.0
              *
-             * @deprecated
+             * Gets/Sets the text to be displayed inside the toggle button.
              *
              * @remarks
              * Used for the built-in column pinning UI of the`IgxColumnComponent`.
@@ -56522,9 +56783,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "showToolbar", {
             /**
-             * Gets/Sets whether the toolbar is shown.
+             * @deprecated in version 11.0.0
              *
-             * @deprecated
+             * Gets/Sets whether the toolbar is shown.
              *
              * @example
              * ```html
@@ -56542,9 +56803,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "toolbarTitle", {
             /**
-             * Gets/Sets the toolbar's title.
+             * @deprecated in version 11.0.0
              *
-             * @deprecated
+             * Gets/Sets the toolbar's title.
              *
              * @example
              * ```html
@@ -56563,9 +56824,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportExcel", {
             /**
-             * Gets/Sets whether exporting to MS Excel is enabled or disabled.
+             * @deprecated `exportExcel` is deprecated
              *
-             * @deprecated
+             * Gets/Sets whether exporting to MS Excel is enabled or disabled.
              *
              * @example
              * ```html
@@ -56584,9 +56845,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportCsv", {
             /**
-             * Gets/Sets whether the option for exporting to CSV is enabled or disabled.
+             * @deprecated `exportCsv` is deprecated
              *
-             * @deprecated
+             * Gets/Sets whether the option for exporting to CSV is enabled or disabled.
              *
              * ```html
              * <igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportCsv]="true"></igx-grid>
@@ -56604,9 +56865,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportText", {
             /**
-             * Gets/Sets the textual content for the main export button.
+             * @deprecated `exportText` is deprecated
              *
-             * @deprecated
+             * Gets/Sets the textual content for the main export button.
              *
              * @example
              * ```html
@@ -56625,9 +56886,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportExcelText", {
             /**
-             * Gets/Sets the textual content for the MS Excel export button.
+             * @deprecated `exportExcelText` is deprecated
              *
-             * @deprecated
+             * Gets/Sets the textual content for the MS Excel export button.
              *
              * ```html
              * <igx-grid [exportExcelText]="'My Excel Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>
@@ -56645,9 +56906,9 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "exportCsvText", {
             /**
-             * Gets/Sets the textual content for the CSV export button.
+             * @deprecated `exportCsvText` is deprecated
              *
-             * @deprecated
+             * Gets/Sets the textual content for the CSV export button.
              *
              * @example
              * ```html
@@ -57419,7 +57680,7 @@
             this.rendered$.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
                 if (_this.paginator) {
                     _this.paginator.perPage = _this._perPage !== DEFAULT_ITEMS_PER_PAGE ? _this._perPage : _this.paginator.perPage;
-                    _this.paginator.totalRecords = _this.totalRecords;
+                    _this.paginator.totalRecords = _this.totalRecords ? _this.totalRecords : _this.paginator.totalRecords;
                     _this.paginator.overlaySettings = { outlet: _this.outlet };
                 }
                 _this._rendered = true;
@@ -57913,9 +58174,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "totalPages", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+             *
              * Gets the total number of pages.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```typescript
              * const totalPages = this.grid.totalPages;
@@ -57930,9 +58192,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "isFirstPage", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+             *
              * Gets if the current page is the first page.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```typescript
              * const firstPage = this.grid.isFirstPage;
@@ -57945,9 +58208,10 @@
             configurable: true
         });
         /**
+         * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+         *
          * Goes to the next page, if the grid is not already at the last page.
          *
-         * @deprecated in version 12.1.0
          * @example
          * ```typescript
          * this.grid1.nextPage();
@@ -57959,9 +58223,10 @@
             (_a = this.paginator) === null || _a === void 0 ? void 0 : _a.nextPage();
         };
         /**
+         * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+         *
          * Goes to the previous page, if the grid is not already at the first page.
          *
-         * @deprecated in version 12.1.0
          * @example
          * ```typescript
          * this.grid1.previousPage();
@@ -58002,9 +58267,10 @@
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "isLastPage", {
             /**
+             * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+             *
              * Returns if the current page is the last page.
              *
-             * @deprecated in version 12.1.0
              * @example
              * ```typescript
              * const lastPage = this.grid.isLastPage;
@@ -58121,6 +58387,8 @@
             this._columnsReordered(column);
         };
         /**
+         * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+         *
          * Goes to the desired page index.
          *
          * @example
@@ -61411,24 +61679,9 @@
         totalRecords: [{ type: i0.Input }],
         selectRowOnClick: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateProperty('`pageChange` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "pageChange", void 0);
-    __decorate([
-        DeprecateProperty('`perPageChange` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "perPageChange", void 0);
-    __decorate([
-        DeprecateProperty('`evenRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
-    ], IgxGridBaseDirective.prototype, "evenRowCSS", void 0);
-    __decorate([
-        DeprecateProperty('`oddRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
-    ], IgxGridBaseDirective.prototype, "oddRowCSS", void 0);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "primaryKey", void 0);
-    __decorate([
-        DeprecateProperty('`pagingDone` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "pagingDone", void 0);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "filteringLogic", null);
@@ -61438,18 +61691,6 @@
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "advancedFilteringExpressionsTree", null);
-    __decorate([
-        DeprecateProperty('`paging` is deprecated')
-    ], IgxGridBaseDirective.prototype, "paging", null);
-    __decorate([
-        DeprecateProperty('`page` is deprecated. Use `page` property form `paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "page", null);
-    __decorate([
-        DeprecateProperty('`perPage` is deprecated. Use `perPage` property from `paginator` component instead.')
-    ], IgxGridBaseDirective.prototype, "perPage", null);
-    __decorate([
-        DeprecateProperty('`columnHiding` is deprecated.')
-    ], IgxGridBaseDirective.prototype, "columnHiding", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "hideRowSelectors", null);
@@ -61471,42 +61712,9 @@
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "isLoading", null);
-    __decorate([
-        DeprecateProperty('`columnHidingTitle` is deprecated')
-    ], IgxGridBaseDirective.prototype, "columnHidingTitle", null);
-    __decorate([
-        DeprecateProperty('`columnPinning` is deprecated')
-    ], IgxGridBaseDirective.prototype, "columnPinning", null);
-    __decorate([
-        DeprecateProperty('`columnPinningTitle` is deprecated')
-    ], IgxGridBaseDirective.prototype, "columnPinningTitle", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "sortingExpressions", null);
-    __decorate([
-        DeprecateProperty('`pinnedColumnsText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "pinnedColumnsText", null);
-    __decorate([
-        DeprecateProperty('`showToolbar` is deprecated')
-    ], IgxGridBaseDirective.prototype, "showToolbar", null);
-    __decorate([
-        DeprecateProperty('`toolbarTitle` is deprecated')
-    ], IgxGridBaseDirective.prototype, "toolbarTitle", null);
-    __decorate([
-        DeprecateProperty('`exportExcel` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportExcel", null);
-    __decorate([
-        DeprecateProperty('`exportCsv` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportCsv", null);
-    __decorate([
-        DeprecateProperty('`exportText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportText", null);
-    __decorate([
-        DeprecateProperty('`exportExcelText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportExcelText", null);
-    __decorate([
-        DeprecateProperty('`exportCsvText` is deprecated')
-    ], IgxGridBaseDirective.prototype, "exportCsvText", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "cellSelection", null);
@@ -61516,24 +61724,6 @@
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "columnSelection", null);
-    __decorate([
-        DeprecateProperty('`totalPages` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "totalPages", null);
-    __decorate([
-        DeprecateProperty('`isFirstPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "isFirstPage", null);
-    __decorate([
-        DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "nextPage", null);
-    __decorate([
-        DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "previousPage", null);
-    __decorate([
-        DeprecateProperty('`isLastPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "isLastPage", null);
-    __decorate([
-        DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-    ], IgxGridBaseDirective.prototype, "paginate", null);
     __decorate([
         WatchChanges()
     ], IgxGridBaseDirective.prototype, "selectRowOnClick", null);
@@ -61596,7 +61786,7 @@
         });
         Object.defineProperty(BaseRow.prototype, "rowData", {
             /**
-             * @deprecated Use 'data' instead.
+             * @deprecated Use 'data' instead
              *
              * The data record that populates the row
              */
@@ -61608,8 +61798,7 @@
         });
         Object.defineProperty(BaseRow.prototype, "rowID", {
             /**
-             * @deprecated Use 'key' instead.
-             *
+             * @deprecated Use 'key' instead
              */
             get: function () {
                 return this.key;
@@ -61815,12 +62004,6 @@
         };
         return BaseRow;
     }());
-    __decorate([
-        DeprecateProperty("'rowData' property is deprecated. Use 'data' instead.")
-    ], BaseRow.prototype, "rowData", null);
-    __decorate([
-        DeprecateProperty("'rowID' property is deprecated. Use 'key' instead.")
-    ], BaseRow.prototype, "rowID", null);
     var IgxGridRow = /** @class */ (function (_super) {
         __extends(IgxGridRow, _super);
         /**
@@ -63063,17 +63246,6 @@
             enumerable: false,
             configurable: true
         });
-        /**
-         * @deprecated
-         * Gets whether the cell is selected.
-         * ```typescript
-         * let isCellSelected = thid.cell.isCellSelected();
-         * ```
-         * @memberof IgxGridCellComponent
-         */
-        IgxGridCellComponent.prototype.isCellSelected = function () {
-            return this.selectionService.selected(this.selectionNode);
-        };
         /**
          * @hidden
          * @internal
@@ -63385,9 +63557,6 @@
         onClick: [{ type: i0.HostListener, args: ['click', ['$event'],] }],
         onContextMenu: [{ type: i0.HostListener, args: ['contextmenu', ['$event'],] }]
     };
-    __decorate([
-        DeprecateMethod("'isCellSelected' is deprecated. Use 'selected' property instead.")
-    ], IgxGridCellComponent.prototype, "isCellSelected", null);
 
     var IgxGridFooterComponent = /** @class */ (function () {
         function IgxGridFooterComponent() {
@@ -63790,9 +63959,10 @@
         }
         Object.defineProperty(IgxColumnActionsComponent.prototype, "columns", {
             /**
+             * @deprecated Use grid input instead.
+             *
              * Gets the grid columns to provide an action for.
              *
-             * @deprecated
              * @example
              * ```typescript
              * let gridColumns = this.columnActions.columns;
@@ -64072,9 +64242,6 @@
         checkAllText: [{ type: i0.Input }],
         id: [{ type: i0.HostBinding, args: ['attr.id',] }, { type: i0.Input }]
     };
-    __decorate([
-        DeprecateProperty("Deprecated. Use 'grid' input instead.")
-    ], IgxColumnActionsComponent.prototype, "columns", null);
 
     /**
      * @hidden
@@ -68946,7 +69113,8 @@
             configurable: true
         });
         /**
-         * @deprecated
+         * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+         *
          * Returns a `CellType` object that matches the conditions.
          *
          * @example
@@ -69773,9 +69941,6 @@
         dropAreaMessage: [{ type: i0.Input }],
         showGroupArea: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-    ], IgxGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
     var IgxGridStateDirective = /** @class */ (function () {
         /**
@@ -72951,7 +73116,8 @@
             configurable: true
         });
         /**
-         * @deprecated
+         * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+         *
          * Returns a `CellType` object that matches the conditions.
          *
          * @example
@@ -73663,9 +73829,6 @@
         expansionDepth: [{ type: i0.Input }],
         rowLoadingIndicatorTemplate: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-    ], IgxTreeGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
     var IgxTreeGridRowComponent = /** @class */ (function (_super) {
         __extends(IgxTreeGridRowComponent, _super);
@@ -76163,7 +76326,8 @@
             configurable: true
         });
         /**
-         * @deprecated
+         * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+         *
          * Returns a `CellType` object that matches the conditions.
          *
          * @example
@@ -76859,9 +77023,6 @@
         data: [{ type: i0.Input }],
         expandChildren: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-    ], IgxHierarchicalGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
     var IgxHierarchicalGridCellComponent = /** @class */ (function (_super) {
         __extends(IgxHierarchicalGridCellComponent, _super);
@@ -81859,6 +82020,8 @@
         }
         Object.defineProperty(IgxToastComponent.prototype, "position", {
             /**
+             * @deprecated in version 12.2.3. We suggest using `positionSettings` property instead
+             *
              * Sets/gets the position of the toast.
              * If not set, the `position` attribute will have value `IgxToastPosition.Bottom`.
              * ```html
@@ -82015,9 +82178,6 @@
         position: [{ type: i0.Input }],
         positionSettings: [{ type: i0.Input }]
     };
-    __decorate([
-        DeprecateProperty('`position` is deprecated. We suggest using `positionSettings` property instead.')
-    ], IgxToastComponent.prototype, "position", null);
     /**
      * @hidden
      */
@@ -86061,6 +86221,8 @@
     exports.IgxSelectItemComponent = IgxSelectItemComponent;
     exports.IgxSelectModule = IgxSelectModule;
     exports.IgxSelectToggleIconDirective = IgxSelectToggleIconDirective;
+    exports.IgxSimpleComboComponent = IgxSimpleComboComponent;
+    exports.IgxSimpleComboModule = IgxSimpleComboModule;
     exports.IgxSlideComponent = IgxSlideComponent;
     exports.IgxSliderComponent = IgxSliderComponent;
     exports.IgxSliderModule = IgxSliderModule;
@@ -86274,185 +86436,184 @@
     exports.ɵ2 = ɵ2;
     exports.ɵa = IgxActionStripMenuItemDirective;
     exports.ɵb = IGX_DROPDOWN_BASE;
-    exports.ɵba = IgxGridActionButtonComponent;
-    exports.ɵbb = ToggleAnimationPlayer;
-    exports.ɵbc = IgxExpansionPanelTitleDirective;
-    exports.ɵbd = IgxExpansionPanelDescriptionDirective;
-    exports.ɵbe = IgxExpansionPanelIconDirective;
-    exports.ɵbf = IgxBannerActionsDirective;
-    exports.ɵbg = IgxDaysViewNavigationService;
-    exports.ɵbh = IgxDayItemComponent;
-    exports.ɵbi = IgxMonthViewSlotsCalendar;
-    exports.ɵbj = IgxGetViewDateCalendar;
-    exports.ɵbk = IgxCarouselIndicatorDirective;
-    exports.ɵbl = IgxCarouselNextButtonDirective;
-    exports.ɵbm = IgxCarouselPrevButtonDirective;
-    exports.ɵbn = IgxComboAPIService;
-    exports.ɵbo = IGX_COMBO_COMPONENT;
-    exports.ɵbq = IgxComboDropDownComponent;
-    exports.ɵbr = IgxComboItemComponent;
-    exports.ɵbs = IgxComboHeaderDirective;
-    exports.ɵbt = IgxComboFooterDirective;
-    exports.ɵbu = IgxComboItemDirective;
-    exports.ɵbv = IgxComboEmptyDirective;
-    exports.ɵbw = IgxComboHeaderItemDirective;
-    exports.ɵbx = IgxComboAddItemDirective;
-    exports.ɵby = IgxComboToggleIconDirective;
-    exports.ɵbz = IgxComboClearIconDirective;
-    exports.ɵca = IgxComboFilteringPipe;
-    exports.ɵcb = IgxComboGroupingPipe;
-    exports.ɵcc = IgxComboAddItemComponent;
-    exports.ɵcd = PickerBaseDirective;
-    exports.ɵce = IgxCalendarContainerComponent;
-    exports.ɵcf = IgxCalendarContainerModule;
-    exports.ɵcg = IgxDialogTitleDirective;
-    exports.ɵch = IgxDialogActionsDirective;
-    exports.ɵci = IgxCellCrudState;
-    exports.ɵcj = IgxRowCrudState;
-    exports.ɵck = IgxRowAddCrudState;
-    exports.ɵcl = IgxGridCRUDService;
-    exports.ɵcm = IgxColumnMovingService;
-    exports.ɵcn = IgxExcelStyleCustomDialogComponent;
-    exports.ɵco = IgxExcelStyleDefaultExpressionComponent;
-    exports.ɵcp = IgxExcelStyleDateExpressionComponent;
-    exports.ɵcq = HammerGesturesManager;
-    exports.ɵcr = WatchChanges;
-    exports.ɵcs = WatchColumnChanges;
-    exports.ɵct = notifyChanges;
-    exports.ɵcu = IgxNotificationsDirective;
-    exports.ɵcv = IgxGridColumnResizerComponent;
-    exports.ɵcw = IgxColumnResizerDirective;
-    exports.ɵcx = IgxColumnResizingService;
-    exports.ɵcy = IgxRowSelectorDirective;
-    exports.ɵcz = IgxGroupByRowSelectorDirective;
+    exports.ɵba = IgxExpansionPanelTitleDirective;
+    exports.ɵbb = IgxExpansionPanelDescriptionDirective;
+    exports.ɵbc = IgxExpansionPanelIconDirective;
+    exports.ɵbd = IgxBannerActionsDirective;
+    exports.ɵbe = IgxDaysViewNavigationService;
+    exports.ɵbf = IgxDayItemComponent;
+    exports.ɵbg = IgxMonthViewSlotsCalendar;
+    exports.ɵbh = IgxGetViewDateCalendar;
+    exports.ɵbi = IgxCarouselIndicatorDirective;
+    exports.ɵbj = IgxCarouselNextButtonDirective;
+    exports.ɵbk = IgxCarouselPrevButtonDirective;
+    exports.ɵbl = IGX_COMBO_COMPONENT;
+    exports.ɵbn = IgxComboBaseDirective;
+    exports.ɵbo = IgxComboHeaderDirective;
+    exports.ɵbp = IgxComboFooterDirective;
+    exports.ɵbq = IgxComboItemDirective;
+    exports.ɵbr = IgxComboEmptyDirective;
+    exports.ɵbs = IgxComboHeaderItemDirective;
+    exports.ɵbt = IgxComboAddItemDirective;
+    exports.ɵbu = IgxComboToggleIconDirective;
+    exports.ɵbv = IgxComboClearIconDirective;
+    exports.ɵbw = IgxComboAPIService;
+    exports.ɵbx = IgxComboDropDownComponent;
+    exports.ɵby = IgxComboItemComponent;
+    exports.ɵbz = IgxComboFilteringPipe;
+    exports.ɵca = IgxComboGroupingPipe;
+    exports.ɵcb = IgxComboAddItemComponent;
+    exports.ɵcc = PickerBaseDirective;
+    exports.ɵcd = IgxCalendarContainerComponent;
+    exports.ɵce = IgxCalendarContainerModule;
+    exports.ɵcf = IgxDialogTitleDirective;
+    exports.ɵcg = IgxDialogActionsDirective;
+    exports.ɵch = IgxCellCrudState;
+    exports.ɵci = IgxRowCrudState;
+    exports.ɵcj = IgxRowAddCrudState;
+    exports.ɵck = IgxGridCRUDService;
+    exports.ɵcl = IgxColumnMovingService;
+    exports.ɵcm = IgxExcelStyleCustomDialogComponent;
+    exports.ɵcn = IgxExcelStyleDefaultExpressionComponent;
+    exports.ɵco = IgxExcelStyleDateExpressionComponent;
+    exports.ɵcp = HammerGesturesManager;
+    exports.ɵcq = WatchChanges;
+    exports.ɵcr = WatchColumnChanges;
+    exports.ɵcs = notifyChanges;
+    exports.ɵct = IgxNotificationsDirective;
+    exports.ɵcu = IgxGridColumnResizerComponent;
+    exports.ɵcv = IgxColumnResizerDirective;
+    exports.ɵcw = IgxColumnResizingService;
+    exports.ɵcx = IgxRowSelectorDirective;
+    exports.ɵcy = IgxGroupByRowSelectorDirective;
+    exports.ɵcz = IgxHeadSelectorDirective;
     exports.ɵd = IgxGridSelectionService;
-    exports.ɵda = IgxHeadSelectorDirective;
-    exports.ɵdb = IgxRowDragDirective;
-    exports.ɵdc = IgxDragIndicatorIconDirective;
-    exports.ɵdd = IgxRowDragGhostDirective;
-    exports.ɵde = IgxRowDragModule;
-    exports.ɵdf = IgxGridHeaderRowComponent;
-    exports.ɵdg = IgxGridHeaderGroupComponent;
-    exports.ɵdh = IgxGridHeaderComponent;
-    exports.ɵdi = IgxGridFilteringCellComponent;
-    exports.ɵdj = IgxFilteringService;
-    exports.ɵdk = IgxGridFilteringRowComponent;
-    exports.ɵdl = IgxGridGroupByAreaComponent;
-    exports.ɵdm = IgxGroupByAreaDirective;
-    exports.ɵdn = IgxGroupByMetaPipe;
-    exports.ɵdo = IgxTemplateOutletDirective;
-    exports.ɵdp = IgxTemplateOutletModule;
-    exports.ɵdq = IgxRowEditTemplateDirective;
-    exports.ɵdr = IgxRowEditTextDirective;
-    exports.ɵds = IgxRowAddTextDirective;
-    exports.ɵdt = IgxRowEditActionsDirective;
-    exports.ɵdu = IgxRowEditTabStopDirective;
-    exports.ɵdv = IgxSummaryRowComponent;
-    exports.ɵdw = IgxSummaryCellComponent;
-    exports.ɵdx = IgxRowDirective;
-    exports.ɵdy = IgxGridNavigationService;
-    exports.ɵdz = IgxGridSummaryService;
-    exports.ɵea = ConnectedPositioningStrategy;
-    exports.ɵeb = IgxGridGroupByRowComponent;
-    exports.ɵec = IgxTreeGridSelectionService;
-    exports.ɵed = IgxTreeGridGroupByAreaComponent;
-    exports.ɵee = IgxRowLoadingIndicatorTemplateDirective;
-    exports.ɵef = IgxHierarchicalGridNavigationService;
-    exports.ɵeg = IgxChildGridRowComponent;
-    exports.ɵeh = IgxGridCellComponent;
-    exports.ɵei = IgxGridFooterComponent;
-    exports.ɵej = IgxAdvancedFilteringDialogComponent;
-    exports.ɵek = IgxColumnHidingDirective;
-    exports.ɵel = IgxColumnPinningDirective;
-    exports.ɵem = IgxGridSharedModules;
-    exports.ɵen = IgxProcessBarTextTemplateDirective;
-    exports.ɵeo = IgxProgressBarGradientDirective;
-    exports.ɵep = DIR_DOCUMENT_FACTORY;
-    exports.ɵeq = DIR_DOCUMENT;
-    exports.ɵer = IgxDirectionality;
-    exports.ɵes = IgxSelectItemNavigationDirective;
-    exports.ɵet = IGX_TIME_PICKER_COMPONENT;
-    exports.ɵev = IgxItemListDirective;
-    exports.ɵew = IgxTimeItemDirective;
-    exports.ɵex = IgxTimePickerTemplateDirective;
-    exports.ɵey = IgxTimePickerActionsDirective;
-    exports.ɵez = TimeFormatPipe;
+    exports.ɵda = IgxRowDragDirective;
+    exports.ɵdb = IgxDragIndicatorIconDirective;
+    exports.ɵdc = IgxRowDragGhostDirective;
+    exports.ɵdd = IgxRowDragModule;
+    exports.ɵde = IgxGridHeaderRowComponent;
+    exports.ɵdf = IgxGridHeaderGroupComponent;
+    exports.ɵdg = IgxGridHeaderComponent;
+    exports.ɵdh = IgxGridFilteringCellComponent;
+    exports.ɵdi = IgxFilteringService;
+    exports.ɵdj = IgxGridFilteringRowComponent;
+    exports.ɵdk = IgxGridGroupByAreaComponent;
+    exports.ɵdl = IgxGroupByAreaDirective;
+    exports.ɵdm = IgxGroupByMetaPipe;
+    exports.ɵdn = IgxTemplateOutletDirective;
+    exports.ɵdo = IgxTemplateOutletModule;
+    exports.ɵdp = IgxRowEditTemplateDirective;
+    exports.ɵdq = IgxRowEditTextDirective;
+    exports.ɵdr = IgxRowAddTextDirective;
+    exports.ɵds = IgxRowEditActionsDirective;
+    exports.ɵdt = IgxRowEditTabStopDirective;
+    exports.ɵdu = IgxSummaryRowComponent;
+    exports.ɵdv = IgxSummaryCellComponent;
+    exports.ɵdw = IgxRowDirective;
+    exports.ɵdx = IgxGridNavigationService;
+    exports.ɵdy = IgxGridSummaryService;
+    exports.ɵdz = ConnectedPositioningStrategy;
+    exports.ɵea = IgxGridGroupByRowComponent;
+    exports.ɵeb = IgxTreeGridSelectionService;
+    exports.ɵec = IgxTreeGridGroupByAreaComponent;
+    exports.ɵed = IgxRowLoadingIndicatorTemplateDirective;
+    exports.ɵee = IgxHierarchicalGridNavigationService;
+    exports.ɵef = IgxChildGridRowComponent;
+    exports.ɵeg = IgxGridCellComponent;
+    exports.ɵeh = IgxGridFooterComponent;
+    exports.ɵei = IgxAdvancedFilteringDialogComponent;
+    exports.ɵej = IgxColumnHidingDirective;
+    exports.ɵek = IgxColumnPinningDirective;
+    exports.ɵel = IgxGridSharedModules;
+    exports.ɵem = IgxProcessBarTextTemplateDirective;
+    exports.ɵen = IgxProgressBarGradientDirective;
+    exports.ɵeo = DIR_DOCUMENT_FACTORY;
+    exports.ɵep = DIR_DOCUMENT;
+    exports.ɵeq = IgxDirectionality;
+    exports.ɵer = IgxSelectItemNavigationDirective;
+    exports.ɵes = IGX_TIME_PICKER_COMPONENT;
+    exports.ɵeu = IgxItemListDirective;
+    exports.ɵev = IgxTimeItemDirective;
+    exports.ɵew = IgxTimePickerTemplateDirective;
+    exports.ɵex = IgxTimePickerActionsDirective;
+    exports.ɵey = TimeFormatPipe;
+    exports.ɵez = TimeItemPipe;
     exports.ɵf = IGX_EXPANSION_PANEL_COMPONENT;
-    exports.ɵfa = TimeItemPipe;
-    exports.ɵfb = IgxGridPipesModule;
-    exports.ɵfc = IgxGridCellStyleClassesPipe;
-    exports.ɵfd = IgxGridCellStylesPipe;
-    exports.ɵfe = IgxGridRowClassesPipe;
-    exports.ɵff = IgxGridRowStylesPipe;
-    exports.ɵfg = IgxGridNotGroupedPipe;
-    exports.ɵfh = IgxGridTopLevelColumns;
-    exports.ɵfi = IgxGridFilterConditionPipe;
-    exports.ɵfj = IgxGridTransactionPipe;
-    exports.ɵfk = IgxGridPaginatorOptionsPipe;
-    exports.ɵfl = IgxHasVisibleColumnsPipe;
-    exports.ɵfm = IgxGridRowPinningPipe;
-    exports.ɵfn = IgxColumnActionEnabledPipe;
-    exports.ɵfo = IgxFilterActionColumnsPipe;
-    exports.ɵfp = IgxSortActionColumnsPipe;
-    exports.ɵfq = IgxGridDataMapperPipe;
-    exports.ɵfr = IgxStringReplacePipe;
-    exports.ɵfs = IgxGridTransactionStatePipe;
-    exports.ɵft = IgxColumnFormatterPipe;
-    exports.ɵfu = IgxSummaryFormatterPipe;
-    exports.ɵfv = IgxGridAddRowPipe;
-    exports.ɵfw = IgxHeaderGroupWidthPipe;
-    exports.ɵfx = IgxHeaderGroupStylePipe;
-    exports.ɵfy = IgxGridColumnModule;
-    exports.ɵfz = IgxGridHeadersModule;
+    exports.ɵfa = IgxGridPipesModule;
+    exports.ɵfb = IgxGridCellStyleClassesPipe;
+    exports.ɵfc = IgxGridCellStylesPipe;
+    exports.ɵfd = IgxGridRowClassesPipe;
+    exports.ɵfe = IgxGridRowStylesPipe;
+    exports.ɵff = IgxGridNotGroupedPipe;
+    exports.ɵfg = IgxGridTopLevelColumns;
+    exports.ɵfh = IgxGridFilterConditionPipe;
+    exports.ɵfi = IgxGridTransactionPipe;
+    exports.ɵfj = IgxGridPaginatorOptionsPipe;
+    exports.ɵfk = IgxHasVisibleColumnsPipe;
+    exports.ɵfl = IgxGridRowPinningPipe;
+    exports.ɵfm = IgxColumnActionEnabledPipe;
+    exports.ɵfn = IgxFilterActionColumnsPipe;
+    exports.ɵfo = IgxSortActionColumnsPipe;
+    exports.ɵfp = IgxGridDataMapperPipe;
+    exports.ɵfq = IgxStringReplacePipe;
+    exports.ɵfr = IgxGridTransactionStatePipe;
+    exports.ɵfs = IgxColumnFormatterPipe;
+    exports.ɵft = IgxSummaryFormatterPipe;
+    exports.ɵfu = IgxGridAddRowPipe;
+    exports.ɵfv = IgxHeaderGroupWidthPipe;
+    exports.ɵfw = IgxHeaderGroupStylePipe;
+    exports.ɵfx = IgxGridColumnModule;
+    exports.ɵfy = IgxGridHeadersModule;
+    exports.ɵfz = SortingIndexPipe;
     exports.ɵg = IGX_TREE_COMPONENT;
-    exports.ɵga = SortingIndexPipe;
-    exports.ɵgb = IgxGridFilteringModule;
-    exports.ɵgc = IgxColumnMovingModule;
-    exports.ɵgd = IgxColumnMovingDropDirective;
-    exports.ɵge = IgxColumnMovingDragDirective;
-    exports.ɵgf = IgxGridResizingModule;
-    exports.ɵgg = IgxResizeHandleDirective;
-    exports.ɵgh = IgxGridExcelStyleFilteringModule;
-    exports.ɵgi = IgxGridSelectionModule;
-    exports.ɵgj = IgxGridDragSelectDirective;
-    exports.ɵgk = IgxGridSummaryModule;
-    exports.ɵgl = IgxSummaryDataPipe;
-    exports.ɵgm = IgxGridToolbarModule;
-    exports.ɵgn = BaseToolbarDirective;
-    exports.ɵgo = BaseToolbarColumnActionsDirective;
-    exports.ɵgp = IgxGridRowComponent;
-    exports.ɵgq = IgxGridSortingPipe;
-    exports.ɵgr = IgxGridGroupingPipe;
-    exports.ɵgs = IgxGridPagingPipe;
-    exports.ɵgt = IgxGridFilteringPipe;
-    exports.ɵgu = IgxGridSummaryPipe;
-    exports.ɵgv = IgxGridDetailsPipe;
-    exports.ɵgw = IgxGridExpandableCellComponent;
-    exports.ɵgx = IgxTreeGridRowComponent;
-    exports.ɵgy = IgxTreeGridCellComponent;
-    exports.ɵgz = IgxTreeGridHierarchizingPipe;
+    exports.ɵga = IgxGridFilteringModule;
+    exports.ɵgb = IgxColumnMovingModule;
+    exports.ɵgc = IgxColumnMovingDropDirective;
+    exports.ɵgd = IgxColumnMovingDragDirective;
+    exports.ɵge = IgxGridResizingModule;
+    exports.ɵgf = IgxResizeHandleDirective;
+    exports.ɵgg = IgxGridExcelStyleFilteringModule;
+    exports.ɵgh = IgxGridSelectionModule;
+    exports.ɵgi = IgxGridDragSelectDirective;
+    exports.ɵgj = IgxGridSummaryModule;
+    exports.ɵgk = IgxSummaryDataPipe;
+    exports.ɵgl = IgxGridToolbarModule;
+    exports.ɵgm = BaseToolbarDirective;
+    exports.ɵgn = BaseToolbarColumnActionsDirective;
+    exports.ɵgo = IgxGridRowComponent;
+    exports.ɵgp = IgxGridSortingPipe;
+    exports.ɵgq = IgxGridGroupingPipe;
+    exports.ɵgr = IgxGridPagingPipe;
+    exports.ɵgs = IgxGridFilteringPipe;
+    exports.ɵgt = IgxGridSummaryPipe;
+    exports.ɵgu = IgxGridDetailsPipe;
+    exports.ɵgv = IgxGridExpandableCellComponent;
+    exports.ɵgw = IgxTreeGridRowComponent;
+    exports.ɵgx = IgxTreeGridCellComponent;
+    exports.ɵgy = IgxTreeGridHierarchizingPipe;
+    exports.ɵgz = IgxTreeGridFlatteningPipe;
     exports.ɵh = IGX_TREE_NODE_COMPONENT;
-    exports.ɵha = IgxTreeGridFlatteningPipe;
-    exports.ɵhb = IgxTreeGridSortingPipe;
-    exports.ɵhc = IgxTreeGridPagingPipe;
-    exports.ɵhd = IgxTreeGridTransactionPipe;
-    exports.ɵhe = IgxTreeGridNormalizeRecordsPipe;
-    exports.ɵhf = IgxTreeGridAddRowPipe;
-    exports.ɵhg = IgxTreeGridFilteringPipe;
-    exports.ɵhh = IgxTreeGridSummaryPipe;
-    exports.ɵhi = IgxHierarchicalRowComponent;
-    exports.ɵhj = IgxHierarchicalGridCellComponent;
-    exports.ɵhk = IgxSliderThumbComponent;
-    exports.ɵhl = IgxThumbLabelComponent;
-    exports.ɵhm = IgxTicksComponent;
-    exports.ɵhn = IgxTickLabelsPipe;
-    exports.ɵho = IgxTabsBase;
-    exports.ɵhp = IgxTabHeaderBase;
-    exports.ɵhq = IgxTabContentBase;
-    exports.ɵhr = IgxSplitBarComponent;
-    exports.ɵhs = IgxTreeService;
-    exports.ɵht = IgxTreeSelectionService;
-    exports.ɵhu = IgxTreeNavigationService;
+    exports.ɵha = IgxTreeGridSortingPipe;
+    exports.ɵhb = IgxTreeGridPagingPipe;
+    exports.ɵhc = IgxTreeGridTransactionPipe;
+    exports.ɵhd = IgxTreeGridNormalizeRecordsPipe;
+    exports.ɵhe = IgxTreeGridAddRowPipe;
+    exports.ɵhf = IgxTreeGridFilteringPipe;
+    exports.ɵhg = IgxTreeGridSummaryPipe;
+    exports.ɵhh = IgxHierarchicalRowComponent;
+    exports.ɵhi = IgxHierarchicalGridCellComponent;
+    exports.ɵhj = IgxSliderThumbComponent;
+    exports.ɵhk = IgxThumbLabelComponent;
+    exports.ɵhl = IgxTicksComponent;
+    exports.ɵhm = IgxTickLabelsPipe;
+    exports.ɵhn = IgxTabsBase;
+    exports.ɵho = IgxTabHeaderBase;
+    exports.ɵhp = IgxTabContentBase;
+    exports.ɵhq = IgxSplitBarComponent;
+    exports.ɵhr = IgxTreeService;
+    exports.ɵhs = IgxTreeSelectionService;
+    exports.ɵht = IgxTreeNavigationService;
     exports.ɵi = PlatformUtil;
     exports.ɵl = IgxInputGroupBase;
     exports.ɵm = IgxSelectionAPIService;
@@ -86465,10 +86626,10 @@
     exports.ɵt = VirtualHelperBaseDirective;
     exports.ɵu = HVirtualHelperComponent;
     exports.ɵv = MaskParsingService;
-    exports.ɵw = DeprecateMethod;
-    exports.ɵx = DeprecateProperty;
-    exports.ɵy = isHierarchyMatch;
-    exports.ɵz = getHierarchy;
+    exports.ɵw = isHierarchyMatch;
+    exports.ɵx = getHierarchy;
+    exports.ɵy = IgxGridActionButtonComponent;
+    exports.ɵz = ToggleAnimationPlayer;
 
     Object.defineProperty(exports, '__esModule', { value: true });