igniteui-angular 12.2.6 → 12.3.1

package/bundles/igniteui-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/animations'), require('@angular/core'), require('@angular/forms'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('lodash.mergewith'), require('@juggle/resize-observer'), require('jszip'), require('@angular/platform-browser'), require('@angular/common/http'), require('@igniteui/material-icons-extended'), require('igniteui-trial-watermark'), require('uuid')) :
     typeof define === 'function' && define.amd ? define('igniteui-angular', ['exports', '@angular/animations', '@angular/core', '@angular/forms', '@angular/common', 'rxjs', 'rxjs/operators', 'lodash.mergewith', '@juggle/resize-observer', 'jszip', '@angular/platform-browser', '@angular/common/http', '@igniteui/material-icons-extended', 'igniteui-trial-watermark', 'uuid'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['igniteui-angular'] = {}, global.ng.animations, global.ng.core, global.ng.forms, global.ng.common, global.rxjs, global.rxjs.operators, global.mergeWith, global.ResizeObserver, global.JSZip, global.ng.platformBrowser, global.ng.common.http, global.materialIconsExtended, null, global.uuid));
-}(this, (function (exports, i1, i0, forms, i2, rxjs, operators, mergeWith, resizeObserver, JSZip, i1$1, i2$1, materialIconsExtended, igniteuiTrialWatermark, uuid) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["igniteui-angular"] = {}, global.ng.animations, global.ng.core, global.ng.forms, global.ng.common, global.rxjs, global.rxjs.operators, global.mergeWith, global.ResizeObserver, global.JSZip, global.ng.platformBrowser, global.ng.common.http, global.materialIconsExtended, null, global.uuid));
+})(this, (function (exports, i1, i0, forms, i2, rxjs, operators, mergeWith, resizeObserver, JSZip, i1$1, i2$1, materialIconsExtended, igniteuiTrialWatermark, uuid) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,14 +15,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -34,7 +32,7 @@
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
 
-    exports.ɵj = void 0;
+    exports["ɵj"] = void 0;
     (function (EaseIn) {
         EaseIn[EaseIn["Quad"] = "cubic-bezier(0.550, 0.085, 0.680, 0.530)"] = "Quad";
         EaseIn[EaseIn["Cubic"] = "cubic-bezier(0.550, 0.055, 0.675, 0.190)"] = "Cubic";
@@ -44,8 +42,8 @@
         EaseIn[EaseIn["Expo"] = "cubic-bezier(0.950, 0.050, 0.795, 0.035)"] = "Expo";
         EaseIn[EaseIn["Circ"] = "cubic-bezier(0.600, 0.040, 0.980, 0.335)"] = "Circ";
         EaseIn[EaseIn["Back"] = "cubic-bezier(0.600, -0.280, 0.735, 0.045)"] = "Back";
-    })(exports.ɵj || (exports.ɵj = {}));
-    exports.ɵk = void 0;
+    })(exports["ɵj"] || (exports["ɵj"] = {}));
+    exports["ɵk"] = void 0;
     (function (EaseOut) {
         EaseOut[EaseOut["Quad"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)"] = "Quad";
         EaseOut[EaseOut["Cubic"] = "cubic-bezier(0.215, 0.610, 0.355, 1.000)"] = "Cubic";
@@ -55,7 +53,7 @@
         EaseOut[EaseOut["Expo"] = "cubic-bezier(0.190, 1.000, 0.220, 1.000)"] = "Expo";
         EaseOut[EaseOut["Circ"] = "cubic-bezier(0.075, 0.820, 0.165, 1.000)"] = "Circ";
         EaseOut[EaseOut["Back"] = "cubic-bezier(0.175, 0.885, 0.320, 1.275)"] = "Back";
-    })(exports.ɵk || (exports.ɵk = {}));
+    })(exports["ɵk"] || (exports["ɵk"] = {}));
     var EaseInOut;
     (function (EaseInOut) {
         EaseInOut[EaseInOut["Quad"] = "cubic-bezier(0.455, 0.030, 0.515, 0.955)"] = "Quad";
@@ -79,7 +77,7 @@
     var baseParams$3 = {
         delay: '0s',
         duration: '350ms',
-        easing: exports.ɵk.Sine,
+        easing: exports["ɵk"].Sine,
         endOpacity: 1,
         startOpacity: 0
     };
@@ -90,7 +88,7 @@
         params: {
             delay: '0s',
             duration: '350ms',
-            easing: exports.ɵk.Sine,
+            easing: exports["ɵk"].Sine,
             endOpacity: 0,
             startOpacity: 1
         }
@@ -115,7 +113,7 @@
     var baseParams$2 = {
         delay: '0s',
         duration: '600ms',
-        easing: exports.ɵk.Quad,
+        easing: exports["ɵk"].Quad,
         endAngle: 180,
         endDistance: '0px',
         rotateX: 1,
@@ -165,7 +163,7 @@
     var baseInParams$2 = {
         delay: '0s',
         duration: '600ms',
-        easing: exports.ɵk.Quad,
+        easing: exports["ɵk"].Quad,
         endAngle: 0,
         endOpacity: 1,
         rotateX: 0,
@@ -176,7 +174,7 @@
         xPos: 'center',
         yPos: 'center'
     };
-    var baseOutParams$2 = Object.assign(Object.assign({}, baseInParams$2), { easing: exports.ɵj.Quad, endOpacity: 0, startOpacity: 1 });
+    var baseOutParams$2 = Object.assign(Object.assign({}, baseInParams$2), { easing: exports["ɵj"].Quad, endOpacity: 0, startOpacity: 1 });
     var rotateInCenter = i1.animation(baseRecipe$1, {
         params: Object.assign({}, baseInParams$2)
     });
@@ -465,7 +463,7 @@
         delay: '0s',
         direction: '',
         duration: '350ms',
-        easing: exports.ɵk.Quad,
+        easing: exports["ɵk"].Quad,
         endOpacity: 1,
         fromScale: .5,
         startOpacity: 0,
@@ -473,7 +471,7 @@
         xPos: '50%',
         yPos: '50%'
     };
-    var baseOutParams$1 = Object.assign(Object.assign({}, baseInParams$1), { easing: exports.ɵk.Sine, endOpacity: 0, fromScale: 1, startOpacity: 1, toScale: .5 });
+    var baseOutParams$1 = Object.assign(Object.assign({}, baseInParams$1), { easing: exports["ɵk"].Sine, endOpacity: 0, fromScale: 1, startOpacity: 1, toScale: .5 });
     var scaleInCenter = i1.animation(base$2, { params: baseInParams$1 });
     var scaleInBl = i1.animation(base$2, {
         params: Object.assign(Object.assign({}, baseInParams$1), { xPos: '0', yPos: '100%' })
@@ -574,7 +572,7 @@
     var baseInParams = {
         delay: '0s',
         duration: '350ms',
-        easing: exports.ɵk.Quad,
+        easing: exports["ɵk"].Quad,
         endOpacity: 1,
         fromPosition: 'translateY(-500px)',
         startOpacity: 0,
@@ -583,7 +581,7 @@
     var baseOutParams = {
         delay: '0s',
         duration: '350ms',
-        easing: exports.ɵj.Quad,
+        easing: exports["ɵj"].Quad,
         endOpacity: 0,
         fromPosition: 'translateY(0)',
         startOpacity: 1,
@@ -594,7 +592,7 @@
         params: {
             delay: '0s',
             duration: '350ms',
-            easing: exports.ɵk.Quad,
+            easing: exports["ɵk"].Quad,
             endOpacity: 1,
             fromPosition: 'translateX(-500px)',
             startOpacity: 0,
@@ -605,7 +603,7 @@
         params: {
             delay: '0s',
             duration: '350ms',
-            easing: exports.ɵk.Quad,
+            easing: exports["ɵk"].Quad,
             endOpacity: 1,
             fromPosition: 'translateX(500px)',
             startOpacity: 0,
@@ -616,7 +614,7 @@
         params: {
             delay: '0s',
             duration: '350ms',
-            easing: exports.ɵk.Quad,
+            easing: exports["ɵk"].Quad,
             endOpacity: 1,
             fromPosition: 'translateY(500px)',
             startOpacity: 0,
@@ -643,7 +641,7 @@
         params: {
             delay: '0s',
             duration: '350ms',
-            easing: exports.ɵj.Quad,
+            easing: exports["ɵj"].Quad,
             endOpacity: 0,
             fromPosition: 'translateY(0)',
             startOpacity: 1,
@@ -682,7 +680,7 @@
         delay: '0s',
         direction: 'X',
         duration: '.5s',
-        easing: exports.ɵk.Back,
+        easing: exports["ɵk"].Back,
         endAngle: 0,
         endOpacity: 1,
         startAngle: -100,
@@ -690,7 +688,7 @@
         xPos: 'top',
         yPos: 'center'
     };
-    var swingOutParams = Object.assign(Object.assign({}, swingParams), { duration: '.55s', easing: exports.ɵj.Back, endAngle: 70, endOpacity: 0, startAngle: 0, startOpacity: 1 });
+    var swingOutParams = Object.assign(Object.assign({}, swingParams), { duration: '.55s', easing: exports["ɵj"].Back, endAngle: 70, endOpacity: 0, startAngle: 0, startOpacity: 1 });
     var swingInTopFwd = i1.animation(swingBase, {
         params: Object.assign({}, swingParams)
     });
@@ -753,17 +751,17 @@
     var baseParams = {
         delay: '0s',
         duration: '350ms',
-        easing: exports.ɵj.Quad,
+        easing: exports["ɵj"].Quad,
         startOpacity: 0,
         endOpacity: 1,
         startHeight: '',
         endHeight: ''
     };
     var growVerIn = i1.animation(base, {
-        params: Object.assign(Object.assign({}, baseParams), { easing: exports.ɵk.Quad, startOpacity: 0, endOpacity: 1, startHeight: '0px', endHeight: '*' })
+        params: Object.assign(Object.assign({}, baseParams), { easing: exports["ɵk"].Quad, startOpacity: 0, endOpacity: 1, startHeight: '0px', endHeight: '*' })
     });
     var growVerOut = i1.animation(base, {
-        params: Object.assign(Object.assign({}, baseParams), { easing: exports.ɵk.Quad, startOpacity: 1, endOpacity: 0, startHeight: '*', endHeight: '0px' })
+        params: Object.assign(Object.assign({}, baseParams), { easing: exports["ɵk"].Quad, startOpacity: 1, endOpacity: 0, startHeight: '*', endHeight: '0px' })
     });
 
     /*! *****************************************************************************
@@ -1001,7 +999,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || from);
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -1344,7 +1342,7 @@
      * @returns Obj1 with merged cloned keys from Obj2
      * @hidden
      */
-    var mergeObjects = function (obj1, obj2) { return mergeWith__default['default'](obj1, obj2, function (objValue, srcValue) {
+    var mergeObjects = function (obj1, obj2) { return mergeWith__default["default"](obj1, obj2, function (objValue, srcValue) {
         if (Array.isArray(srcValue)) {
             return objValue = srcValue;
         }
@@ -2121,8 +2119,17 @@
                         finally { if (e_1) throw e_1.error; }
                     }
                     if (expanded) {
-                        metadata.push.apply(metadata, __spreadArray([], __read(fullResult.metadata.slice(fullResult.metadata.length - group.length))));
-                        result.push.apply(result, __spreadArray([], __read(fullResult.data.slice(fullResult.data.length - group.length))));
+                        // Replaced object destructing as in a single big group scenario
+                        // it hits the max number of arguments for a function the underlying JS engine
+                        // supports.
+                        var j = fullResult.metadata.length - group.length;
+                        for (; j < fullResult.metadata.length; j++) {
+                            metadata.push(fullResult.metadata[j]);
+                        }
+                        j = fullResult.data.length - group.length;
+                        for (; j < fullResult.data.length; j++) {
+                            result.push(fullResult.data[j]);
+                        }
                     }
                 }
                 i += group.length;
@@ -8601,7 +8608,7 @@
              */
             get: function () {
                 if (this.inEditMode) {
-                    return mergeWith__default['default'](cloneValue(this._rowData), this.grid.transactions.getAggregatedValue(this.rowID, false), function (objValue, srcValue) {
+                    return mergeWith__default["default"](cloneValue(this._rowData), this.grid.transactions.getAggregatedValue(this.rowID, false), function (objValue, srcValue) {
                         if (Array.isArray(srcValue)) {
                             return objValue = srcValue;
                         }
@@ -30803,6 +30810,7 @@
         IgxAccordionComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             this._expandedPanels = new Set(this._panels.filter(function (panel) { return !panel.collapsed; }));
+            this._expandingPanels = new Set();
             this._panels.changes.pipe(operators.takeUntil(this._destroy$)).subscribe(function () {
                 _this.subToChanges();
             });
@@ -30907,6 +30915,7 @@
             this._panels.forEach(function (panel) {
                 panel.contentExpanded.pipe(operators.takeUntil(_this._unsubChildren$)).subscribe(function (args) {
                     _this._expandedPanels.add(args.owner);
+                    _this._expandingPanels.delete(args.owner);
                     var evArgs = Object.assign(Object.assign({}, args), { owner: _this, panel: args.owner });
                     _this.panelExpanded.emit(evArgs);
                 });
@@ -30914,21 +30923,36 @@
                     if (args.cancel) {
                         return;
                     }
+                    var evArgs = Object.assign(Object.assign({}, args), { owner: _this, panel: args.owner });
+                    _this.panelExpanding.emit(evArgs);
+                    if (evArgs.cancel) {
+                        args.cancel = true;
+                        return;
+                    }
                     if (_this.singleBranchExpand) {
                         _this._expandedPanels.forEach(function (p) {
                             if (!p.header.disabled) {
                                 p.collapse();
                             }
                         });
-                    }
-                    var evArgs = Object.assign(Object.assign({}, args), { owner: _this, panel: args.owner });
-                    _this.panelExpanding.emit(evArgs);
-                    if (evArgs.cancel) {
-                        args.cancel = true;
+                        _this._expandingPanels.forEach(function (p) {
+                            var _a, _b;
+                            if (!p.header.disabled) {
+                                if (!p.animationSettings.closeAnimation) {
+                                    (_a = p.openAnimationPlayer) === null || _a === void 0 ? void 0 : _a.reset();
+                                }
+                                if (!p.animationSettings.openAnimation) {
+                                    (_b = p.closeAnimationPlayer) === null || _b === void 0 ? void 0 : _b.reset();
+                                }
+                                p.collapse();
+                            }
+                        });
+                        _this._expandingPanels.add(args.owner);
                     }
                 });
                 panel.contentCollapsed.pipe(operators.takeUntil(_this._unsubChildren$)).subscribe(function (args) {
                     _this._expandedPanels.delete(args.owner);
+                    _this._expandingPanels.delete(args.owner);
                     var evArgs = Object.assign(Object.assign({}, args), { owner: _this, panel: args.owner });
                     _this.panelCollapsed.emit(evArgs);
                 });
@@ -38834,10 +38858,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) {
@@ -38955,7 +38979,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 [
@@ -38965,359 +38989,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";
@@ -39325,21 +39015,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.
@@ -39353,54 +39029,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:
@@ -39419,180 +39074,65 @@
              */
             _this.overlaySettings = null;
             /**
-             * @hidden @internal
-             */
-            _this.searchInput = null;
-            /**
-             * The custom template, if any, that should be used when rendering ITEMS in the combo list
+             * Gets/gets combo id.
              *
              * ```typescript
-             * // Set in typescript
-             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-             * myComponent.combo.itemTemplate = myCustomTemplate;
+             * // get
+             * let id = this.combo.id;
              * ```
+             *
              * ```html
-             * <!-- Set in markup -->
-             *  <igx-combo #combo>
-             *      ...
-             *      <ng-template igxComboItem>
-             *          <div class="custom-item" let-item let-key="valueKey">
-             *              <div class="custom-item__name">{{ item[key] }}</div>
-             *              <div class="custom-item__cost">{{ item.cost }}</div>
-             *          </div>
-             *      </ng-template>
-             *  </igx-combo>
+             * <!--set-->
+             * <igx-combo [id]='combo1'></igx-combo>
              * ```
              */
-            _this.itemTemplate = null;
+            _this.id = "igx-combo-" + NEXT_ID$c++;
             /**
-             * The custom template, if any, that should be used when rendering the HEADER for the combo items list
+             * Controls whether custom values can be added to the collection
              *
              * ```typescript
-             * // Set in typescript
-             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-             * myComponent.combo.headerTemplate = myCustomTemplate;
+             * // get
+             * let comboAllowsCustomValues = this.combo.allowCustomValues;
              * ```
+             *
              * ```html
-             * <!-- Set in markup -->
-             *  <igx-combo #combo>
-             *      ...
-             *      <ng-template igxComboHeader>
-             *          <div class="combo__header">
-             *              This is a custom header
-             *          </div>
-             *      </ng-template>
-             *  </igx-combo>
+             * <!--set-->
+             * <igx-combo [allowCustomValues]='true'></igx-combo>
              * ```
              */
-            _this.headerTemplate = null;
+            _this.allowCustomValues = false;
             /**
-             * The custom template, if any, that should be used when rendering the FOOTER for the combo items list
+             * Determines which column in the data source is used to determine the value.
              *
              * ```typescript
-             * // Set in typescript
-             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-             * myComponent.combo.footerTemplate = myCustomTemplate;
+             * // get
+             * let myComboValueKey = this.combo.valueKey;
              * ```
+             *
              * ```html
-             * <!-- Set in markup -->
-             *  <igx-combo #combo>
-             *      ...
-             *      <ng-template igxComboFooter>
-             *          <div class="combo__footer">
-             *              This is a custom footer
-             *          </div>
-             *      </ng-template>
-             *  </igx-combo>
+             * <!--set-->
+             * <igx-combo [valueKey]='myKey'></igx-combo>
              * ```
              */
-            _this.footerTemplate = null;
+            _this.valueKey = null;
             /**
-             * The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list
-             *
-             * ```typescript
-             * // Set in typescript
-             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-             * myComponent.combo.headerItemTemplate = myCustomTemplate;
-             * ```
+             * An @Input property that enabled/disables filtering in the list. The default is `true`.
              * ```html
-             * <!-- Set in markup -->
-             *  <igx-combo #combo>
-             *      ...
-             *      <ng-template igxComboHeaderItem let-item let-key="groupKey">
-             *          <div class="custom-item--group">Group header for {{ item[key] }}</div>
-             *      </ng-template>
-             *  </igx-combo>
-             * ```
-             */
-            _this.headerItemTemplate = null;
-            /**
-             * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
-             *
-             * ```typescript
-             * // Set in typescript
-             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-             * myComponent.combo.addItemTemplate = myCustomTemplate;
-             * ```
-             * ```html
-             * <!-- Set in markup -->
-             *  <igx-combo #combo>
-             *      ...
-             *      <ng-template igxComboAddItem>
-             *          <button class="combo__add-button">
-             *              Click to add item
-             *          </button>
-             *      </ng-template>
-             *  </igx-combo>
-             * ```
-             */
-            _this.addItemTemplate = null;
-            /**
-             * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
-             *
-             * ```typescript
-             * // Set in typescript
-             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-             * myComponent.combo.emptyTemplate = myCustomTemplate;
-             * ```
-             * ```html
-             * <!-- Set in markup -->
-             *  <igx-combo #combo>
-             *      ...
-             *      <ng-template igxComboEmpty>
-             *          <div class="combo--empty">
-             *              There are no items to display
-             *          </div>
-             *      </ng-template>
-             *  </igx-combo>
-             * ```
-             */
-            _this.emptyTemplate = null;
-            /**
-             * The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button
-             *
-             * ```typescript
-             * // Set in typescript
-             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-             * myComponent.combo.toggleIconTemplate = myCustomTemplate;
-             * ```
-             * ```html
-             * <!-- Set in markup -->
-             *  <igx-combo #combo>
-             *      ...
-             *      <ng-template igxComboToggleIcon let-collapsed>
-             *          <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
-             *      </ng-template>
-             *  </igx-combo>
-             * ```
-             */
-            _this.toggleIconTemplate = null;
-            /**
-             * The custom template, if any, that should be used when rendering the combo CLEAR button
-             *
-             * ```typescript
-             * // Set in typescript
-             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-             * myComponent.combo.clearIconTemplate = myCustomTemplate;
-             * ```
-             * ```html
-             * <!-- Set in markup -->
-             *  <igx-combo #combo>
-             *      ...
-             *      <ng-template igxComboClearIcon>
-             *          <igx-icon>clear</igx-icon>
-             *      </ng-template>
-             *  </igx-combo>
+             * <igx-combo [filterable]="false">
              * ```
              */
-            _this.clearIconTemplate = null;
+            _this.filterable = true;
+            /** @hidden @internal */
+            _this.cssClass = 'igx-combo'; // Independent of display density for the time being
+            /** @hidden @internal */
+            _this.role = 'combobox';
             /**
-             * Emitted when item selection is changing, before the selection completes
-             *
+             * An @Input property that enabled/disables combo. The default is `false`.
              * ```html
-             * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
+             * <igx-combo [disabled]="'true'">
              * ```
              */
-            _this.selectionChanging = new i0.EventEmitter();
+            _this.disabled = false;
             /**
              * Emitted before the dropdown is opened
              *
@@ -39650,202 +39190,219 @@
              */
             _this.dataPreLoad = new i0.EventEmitter();
             /**
-             * Gets/gets combo id.
+             * The custom template, if any, that should be used when rendering ITEMS in the combo list
              *
              * ```typescript
-             * // get
-             * let id = this.combo.id;
+             * // Set in typescript
+             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+             * myComponent.combo.itemTemplate = myCustomTemplate;
              * ```
-             *
              * ```html
-             * <!--set-->
-             * <igx-combo [id]='combo1'></igx-combo>
+             * <!-- Set in markup -->
+             *  <igx-combo #combo>
+             *      ...
+             *      <ng-template igxComboItem>
+             *          <div class="custom-item" let-item let-key="valueKey">
+             *              <div class="custom-item__name">{{ item[key] }}</div>
+             *              <div class="custom-item__cost">{{ item.cost }}</div>
+             *          </div>
+             *      </ng-template>
+             *  </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';
+            _this.itemTemplate = null;
             /**
-             * Controls whether custom values can be added to the collection
+             * The custom template, if any, that should be used when rendering the HEADER for the combo items list
              *
              * ```typescript
-             * // get
-             * let comboAllowsCustomValues = this.combo.allowCustomValues;
+             * // Set in typescript
+             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+             * myComponent.combo.headerTemplate = myCustomTemplate;
              * ```
-             *
              * ```html
-             * <!--set-->
-             * <igx-combo [allowCustomValues]='true'></igx-combo>
+             * <!-- Set in markup -->
+             *  <igx-combo #combo>
+             *      ...
+             *      <ng-template igxComboHeader>
+             *          <div class="combo__header">
+             *              This is a custom header
+             *          </div>
+             *      </ng-template>
+             *  </igx-combo>
              * ```
              */
-            _this.allowCustomValues = false;
+            _this.headerTemplate = null;
             /**
-             * Defines the placeholder value for the combo dropdown search field
+             * The custom template, if any, that should be used when rendering the FOOTER for the combo items list
              *
              * ```typescript
-             * // get
-             * let myComboSearchPlaceholder = this.combo.searchPlaceholder;
+             * // Set in typescript
+             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+             * myComponent.combo.footerTemplate = myCustomTemplate;
              * ```
-             *
              * ```html
-             * <!--set-->
-             * <igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
+             * <!-- Set in markup -->
+             *  <igx-combo #combo>
+             *      ...
+             *      <ng-template igxComboFooter>
+             *          <div class="combo__footer">
+             *              This is a custom footer
+             *          </div>
+             *      </ng-template>
+             *  </igx-combo>
              * ```
              */
-            _this.searchPlaceholder = 'Enter a Search Term';
+            _this.footerTemplate = null;
             /**
-             * Defines whether the caseSensitive icon should be shown in the search input
+             * The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list
              *
              * ```typescript
-             * // get
-             * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
+             * // Set in typescript
+             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+             * myComponent.combo.headerItemTemplate = myCustomTemplate;
              * ```
-             *
              * ```html
-             * <!--set-->
-             * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
+             * <!-- Set in markup -->
+             *  <igx-combo #combo>
+             *      ...
+             *      <ng-template igxComboHeaderItem let-item let-key="groupKey">
+             *          <div class="custom-item--group">Group header for {{ item[key] }}</div>
+             *      </ng-template>
+             *  </igx-combo>
              * ```
              */
-            _this.showSearchCaseIcon = false;
+            _this.headerItemTemplate = null;
             /**
-             * Combo value data source property.
+             * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
              *
              * ```typescript
-             * // get
-             * let myComboValueKey = this.combo.valueKey;
+             * // Set in typescript
+             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+             * myComponent.combo.addItemTemplate = myCustomTemplate;
              * ```
-             *
              * ```html
-             * <!--set-->
-             * <igx-combo [valueKey]='myKey'></igx-combo>
+             * <!-- Set in markup -->
+             *  <igx-combo #combo>
+             *      ...
+             *      <ng-template igxComboAddItem>
+             *          <button class="combo__add-button">
+             *              Click to add item
+             *          </button>
+             *      </ng-template>
+             *  </igx-combo>
              * ```
              */
-            _this.valueKey = null;
+            _this.addItemTemplate = null;
             /**
-             * An @Input property that enabled/disables filtering in the list. The default is `true`.
+             * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
+             *
+             * ```typescript
+             * // Set in typescript
+             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+             * myComponent.combo.emptyTemplate = myCustomTemplate;
+             * ```
              * ```html
-             * <igx-combo [filterable]="false">
+             * <!-- Set in markup -->
+             *  <igx-combo #combo>
+             *      ...
+             *      <ng-template igxComboEmpty>
+             *          <div class="combo--empty">
+             *              There are no items to display
+             *          </div>
+             *      </ng-template>
+             *  </igx-combo>
              * ```
              */
-            _this.filterable = true;
+            _this.emptyTemplate = null;
             /**
-             * An @Input property that enabled/disables combo. The default is `false`.
+             * The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button
+             *
+             * ```typescript
+             * // Set in typescript
+             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+             * myComponent.combo.toggleIconTemplate = myCustomTemplate;
+             * ```
              * ```html
-             * <igx-combo [disabled]="'true'">
+             * <!-- Set in markup -->
+             *  <igx-combo #combo>
+             *      ...
+             *      <ng-template igxComboToggleIcon let-collapsed>
+             *          <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
+             *      </ng-template>
+             *  </igx-combo>
              * ```
              */
-            _this.disabled = false;
+            _this.toggleIconTemplate = null;
             /**
-             * 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
+             * The custom template, if any, that should be used when rendering the combo CLEAR button
+             *
+             * ```typescript
+             * // Set in typescript
+             * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+             * myComponent.combo.clearIconTemplate = myCustomTemplate;
+             * ```
+             * ```html
+             * <!-- Set in markup -->
+             *  <igx-combo #combo>
+             *      ...
+             *      <ng-template igxComboClearIcon>
+             *          <igx-icon>clear</igx-icon>
+             *      </ng-template>
+             *  </igx-combo>
+             * ```
              */
-            _this.autoFocusSearch = true;
+            _this.clearIconTemplate = null;
+            /** @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
              *
@@ -39871,7 +39428,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "itemHeight", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "itemHeight", {
             /**
              * Configures the drop down list item height
              *
@@ -39897,17 +39454,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.
              *
@@ -39925,9 +39472,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
@@ -39952,7 +39499,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[].
              *
@@ -39978,7 +39525,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`.
@@ -39995,7 +39566,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
              *
@@ -40017,44 +39621,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`
              *
@@ -40080,7 +39667,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.
              *
@@ -40106,98 +39707,116 @@
             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 */
+        IgxComboBaseDirective.prototype.onArrowDown = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.open();
         };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.handleKeyDown = function (event) {
-            if (event.key === 'ArrowUp' || event.key === 'Up') {
-                event.preventDefault();
-                event.stopPropagation();
-                this.close();
+        /** @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);
         };
         /**
-         * @hidden @internal
+         * A method that opens/closes the combo.
+         *
+         * ```html
+         * <button (click)="combo.toggle()">Toggle Combo</button>
+         * <igx-combo #combo></igx-combo>
+         * ```
          */
-        IgxComboComponent.prototype.handleInputChange = function (event) {
-            if (event !== undefined) {
-                var args = {
-                    searchText: event,
-                    owner: this,
-                    cancel: false
-                };
-                this.searchInputUpdate.emit(args);
-                if (args.cancel) {
-                    this.filterValue = null;
-                }
-            }
-            this.checkMatch();
+        IgxComboBaseDirective.prototype.toggle = function () {
+            var overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+            this.dropdown.toggle(overlaySettings);
         };
-        Object.defineProperty(IgxComboComponent.prototype, "dataType", {
-            /**
-             * @hidden @internal
-             */
-            get: function () {
-                if (this.displayKey) {
-                    return DataTypes.COMPLEX;
-                }
-                return DataTypes.PRIMITIVE;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboComponent.prototype, "isRemote", {
+        /**
+         * 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", {
             /**
-             * @hidden @internal
+             * Get current selection state
+             *
+             * @returns Array of selected items
+             * ```typescript
+             * let selectedItems = this.combo.selectedItems();
+             * ```
              */
             get: function () {
-                return this.totalItemCount > 0 &&
-                    this.valueKey &&
-                    this.dataType === DataTypes.COMPLEX;
+                var items = Array.from(this.selectionService.get(this.id));
+                return items;
             },
             enumerable: false,
             configurable: true
@@ -40208,48 +39827,23 @@
          * @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;
+        IgxComboBaseDirective.prototype.isItemSelected = function (item) {
+            return this.selectionService.is_item_selected(this.id, item);
         };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.handleSelectAll = function (evt) {
-            if (evt.checked) {
-                this.selectAllItems();
-            }
-            else {
-                this.deselectAllItems();
-            }
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.addItemToCollection = function () {
-            var _a, _b;
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.addItemToCollection = function () {
+            var _b, _c;
+            var _a;
             if (!this.searchValue) {
                 return;
             }
             var newValue = this.searchValue.trim();
-            var addedItem = this.displayKey ? (_a = {},
-                _a[this.valueKey] = newValue,
-                _a[this.displayKey] = newValue,
-                _a) : newValue;
+            var addedItem = this.displayKey ? (_b = {},
+                _b[this.valueKey] = newValue,
+                _b[this.displayKey] = newValue,
+                _b) : newValue;
             if (this.groupKey) {
-                Object.assign(addedItem, (_b = {}, _b[this.groupKey] = this.defaultFallbackGroup, _b));
+                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));
@@ -40267,145 +39861,721 @@
             this.data.push(args.addedItem);
             // trigger re-render
             this.data = cloneArray(this.data);
-            this.selectItems(this.valueKey !== null && this.valueKey !== undefined ?
+            this.select(this.valueKey !== null && this.valueKey !== undefined ?
                 [args.addedItem[this.valueKey]] : [args.addedItem], false);
             this.customValueFlag = false;
-            this.searchInput.nativeElement.focus();
+            (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.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 */
+        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);
+                if (args.cancel) {
+                    this.filterValue = null;
                 }
             }
+            this.checkMatch();
         };
         /**
-         * @hidden @internal
+         * Event handlers
+         *
+         * @hidden
+         * @internal
          */
-        IgxComboComponent.prototype.onBlur = function () {
+        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 = exports.IgxComboState.INVALID;
+                    this.valid = IgxComboState.INVALID;
                 }
                 else {
-                    this.valid = exports.IgxComboState.INITIAL;
+                    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; }
                 }
             }
         };
         /**
-         * @hidden @internal
+         * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]`
          */
-        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');
+        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
          */
-        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);
-            });
+        IgxComboDropDownComponent.prototype.onFocus = function () {
+            this.focusedItem = this._focusedItem || this.items[0];
         };
         /**
          * @hidden @internal
          */
-        IgxComboComponent.prototype.ngOnDestroy = function () {
-            this.destroy$.next();
-            this.destroy$.complete();
-            this.comboAPI.clear();
-            this.selection.clear(this.id);
+        IgxComboDropDownComponent.prototype.onBlur = function (_evt) {
+            this.focusedItem = null;
         };
         /**
          * @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);
-            this.cdr.markForCheck();
-            this._value = this.createDisplayText(this.selectedItems(), oldSelection);
+        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
          */
-        IgxComboComponent.prototype.registerOnChange = function (fn) {
-            this._onChangeCallback = fn;
+        IgxComboDropDownComponent.prototype.selectItem = function (item) {
+            if (item === null || item === undefined) {
+                return;
+            }
+            this.comboAPI.set_selected_item(item.itemID);
+            this._focusedItem = item;
         };
         /**
          * @hidden @internal
          */
-        IgxComboComponent.prototype.registerOnTouched = function (fn) {
-            this._onTouchedCallback = fn;
+        IgxComboDropDownComponent.prototype.updateScrollPosition = function () {
+            this.virtDir.getScroll().scrollTop = this._scrollPosition;
         };
         /**
          * @hidden @internal
          */
-        IgxComboComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
+        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
+         * @hidden @internal
          */
-        IgxComboComponent.prototype.getEditElement = function () {
-            return this.comboInput.nativeElement;
+        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, "template", {
+        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 () {
-                this._dataType = this.dataType;
-                if (this.itemTemplate) {
-                    return this.itemTemplate;
-                }
-                if (this._dataType === DataTypes.COMPLEX) {
-                    return this.complexTemplate;
-                }
-                return this.primitiveTemplate;
+                return !this.value && !this.placeholder;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "context", {
-            /**
-             * @hidden @internal
-             */
+        Object.defineProperty(IgxComboComponent.prototype, "filteredData", {
+            /** @hidden @internal */
             get: function () {
-                return {
-                    $implicit: this
-                };
+                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
@@ -40413,79 +40583,70 @@
         /**
          * @hidden @internal
          */
-        IgxComboComponent.prototype.handleClearItems = function (event) {
-            if (this.disabled) {
-                return;
-            }
-            this.deselectAllItems(true, event);
-            if (this.collapsed) {
-                this.getEditElement().focus();
+        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 {
-                this.focusSearchInput(true);
+            else if (event.key === 'Escape' || event.key === 'Esc') {
+                this.toggle();
             }
-            event.stopPropagation();
         };
         /**
-         * A method that opens/closes the combo.
-         *
-         * ```html
-         * <button (click)="combo.toggle()">Toggle Combo</button>
-         * <igx-combo #combo></igx-combo>
-         * ```
+         * @hidden @internal
          */
-        IgxComboComponent.prototype.toggle = function () {
-            var overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
-            this.dropdown.toggle(overlaySettings);
+        IgxComboComponent.prototype.handleSelectAll = function (evt) {
+            if (evt.checked) {
+                this.selectAllItems();
+            }
+            else {
+                this.deselectAllItems();
+            }
         };
         /**
-         * A method that opens the combo.
-         *
-         * ```html
-         * <button (click)="combo.open()">Open Combo</button>
-         * <igx-combo #combo></igx-combo>
-         * ```
+         * @hidden @internal
          */
-        IgxComboComponent.prototype.open = function () {
-            var overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
-            this.dropdown.open(overlaySettings);
+        IgxComboComponent.prototype.writeValue = function (value) {
+            var selection = Array.isArray(value) ? value : [];
+            var oldSelection = this.selection;
+            this.selectionService.select_items(this.id, selection, true);
+            this.cdr.markForCheck();
+            this._value = this.createDisplayText(this.selection, oldSelection);
         };
         /**
-         * A method that closes the combo.
-         *
-         * ```html
-         * <button (click)="combo.close()">Close Combo</button>
-         * <igx-combo #combo></igx-combo>
-         * ```
+         * @hidden
          */
-        IgxComboComponent.prototype.close = function () {
-            this.dropdown.close();
+        IgxComboComponent.prototype.getEditElement = function () {
+            return this.comboInput.nativeElement;
         };
-        Object.defineProperty(IgxComboComponent.prototype, "collapsed", {
+        Object.defineProperty(IgxComboComponent.prototype, "context", {
             /**
-             * Gets drop down state.
-             *
-             * ```typescript
-             * let state = this.combo.collapsed;
-             * ```
+             * @hidden @internal
              */
             get: function () {
-                return this.dropdown.collapsed;
+                return {
+                    $implicit: this
+                };
             },
             enumerable: false,
             configurable: true
         });
         /**
-         * Get current selection state
-         *
-         * @returns Array of selected items
-         * ```typescript
-         * let selectedItems = this.combo.selectedItems();
-         * ```
+         * @hidden @internal
          */
-        IgxComboComponent.prototype.selectedItems = function () {
-            var items = Array.from(this.selection.get(this.id));
-            return items;
+        IgxComboComponent.prototype.handleClearItems = function (event) {
+            if (this.disabled) {
+                return;
+            }
+            this.deselectAllItems(true, event);
+            if (this.collapsed) {
+                this.getEditElement().focus();
+            }
+            else {
+                this.focusSearchInput(true);
+            }
+            event.stopPropagation();
         };
         /**
          * Select defined items
@@ -40493,12 +40654,12 @@
          * @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);
             }
         };
@@ -40507,12 +40668,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);
             }
         };
@@ -40525,8 +40686,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);
         };
         /**
@@ -40538,9 +40699,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);
         };
@@ -40569,26 +40730,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.
@@ -40602,36 +40750,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,
@@ -40645,7 +40783,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;
                 }
@@ -40655,71 +40793,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) {
@@ -40729,47 +40806,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 },
@@ -40788,56 +40830,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
@@ -40860,6 +40857,8 @@
                         IgxComboToggleIconDirective,
                         IgxComboClearIconDirective],
                     exports: [IgxComboComponent, IgxComboItemComponent, IgxComboDropDownComponent, IgxComboAddItemComponent,
+                        IgxComboGroupingPipe,
+                        IgxComboFilteringPipe,
                         IgxComboItemDirective,
                         IgxComboEmptyDirective,
                         IgxComboHeaderItemDirective,
@@ -40874,6 +40873,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',
@@ -43474,7 +43854,7 @@
         { type: i0.Component, args: [{
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     selector: 'igx-grid-excel-style-filtering',
-                    template: "<ng-template #defaultExcelColumnOperations>\n    <igx-excel-style-header\n        [showHiding]=\"displayDensity !== 'comfortable' && !column?.disableHiding\"\n        [showPinning]=\"displayDensity !== 'comfortable' && !column?.disablePinning\"\n        [showSelecting]=\"displayDensity !== 'comfortable' && columnSelectable()\"\n    >\n    </igx-excel-style-header>\n\n    <igx-excel-style-sorting *ngIf=\"column?.sortable\">\n    </igx-excel-style-sorting>\n\n    <igx-excel-style-moving *ngIf=\"column?.movable\">\n    </igx-excel-style-moving>\n\n    <igx-excel-style-pinning *ngIf=\"!column?.disablePinning && displayDensity==='comfortable'\">\n    </igx-excel-style-pinning>\n\n    <igx-excel-style-hiding *ngIf=\"!column?.disableHiding && displayDensity==='comfortable'\">\n    </igx-excel-style-hiding>\n\n    <igx-excel-style-selecting *ngIf=\"columnSelectable() && displayDensity==='comfortable'\">\n    </igx-excel-style-selecting>\n</ng-template>\n\n<ng-template #defaultExcelFilterOperations>\n    <igx-excel-style-clear-filters>\n    </igx-excel-style-clear-filters>\n\n    <igx-excel-style-conditional-filter>\n    </igx-excel-style-conditional-filter>\n\n    <igx-excel-style-search>\n    </igx-excel-style-search>\n</ng-template>\n\n<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',\n        'igx-excel-filter__menu--compact': displayDensity === 'compact'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\">\n\n    <ng-container *ngIf=\"this.excelColumnOperationsDirective; else defaultExcelColumnOperations\">\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.excelFilterOperationsDirective; else defaultExcelFilterOperations\">\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    </ng-container>\n</article>\n"
+                    template: "<ng-template #defaultExcelColumnOperations>\n    <igx-excel-style-header\n        [showHiding]=\"displayDensity !== 'comfortable' && !column?.disableHiding\"\n        [showPinning]=\"displayDensity !== 'comfortable' && !column?.disablePinning\"\n        [showSelecting]=\"displayDensity !== 'comfortable' && columnSelectable()\"\n    >\n    </igx-excel-style-header>\n\n    <igx-excel-style-sorting *ngIf=\"column?.sortable\">\n    </igx-excel-style-sorting>\n\n    <igx-excel-style-moving *ngIf=\"column?.movable\">\n    </igx-excel-style-moving>\n\n    <igx-excel-style-pinning *ngIf=\"!column?.disablePinning && displayDensity==='comfortable'\">\n    </igx-excel-style-pinning>\n\n    <igx-excel-style-hiding *ngIf=\"!column?.disableHiding && displayDensity==='comfortable'\">\n    </igx-excel-style-hiding>\n\n    <igx-excel-style-selecting *ngIf=\"columnSelectable() && displayDensity==='comfortable'\">\n    </igx-excel-style-selecting>\n</ng-template>\n\n<ng-template #defaultExcelFilterOperations>\n    <igx-excel-style-clear-filters>\n    </igx-excel-style-clear-filters>\n\n    <igx-excel-style-conditional-filter>\n    </igx-excel-style-conditional-filter>\n\n    <igx-excel-style-search>\n    </igx-excel-style-search>\n</ng-template>\n\n<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',\n        'igx-excel-filter__menu--compact': displayDensity === 'compact'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    role=\"menu\">\n\n    <ng-container *ngIf=\"this.excelColumnOperationsDirective; else defaultExcelColumnOperations\">\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.excelFilterOperationsDirective; else defaultExcelFilterOperations\">\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    </ng-container>\n</article>\n"
                 },] }
     ];
     IgxGridExcelStyleFilteringComponent.ctorParameters = function () { return [
@@ -45210,7 +45590,7 @@
         { type: i0.Component, args: [{
                     preserveWhitespaces: false,
                     selector: 'igx-excel-style-date-expression',
-                    template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n"
+                    template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n"
                 },] }
     ];
     IgxExcelStyleDateExpressionComponent.propDecorators = {
@@ -45925,7 +46305,7 @@
          * @param target Target name
          */
         HammerGesturesManager.prototype.getGlobalEventTarget = function (target) {
-            return i1$1.ɵgetDOM().getGlobalEventTarget(this.doc, target);
+            return i1$1["ɵgetDOM"]().getGlobalEventTarget(this.doc, target);
         };
         /**
          * Set HammerManager options.
@@ -52282,15 +52662,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
@@ -57307,7 +57695,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;
@@ -61400,7 +61788,7 @@
             get: function () {
                 var _a, _b;
                 if (this.inEditMode) {
-                    return mergeWith__default['default'](cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
+                    return mergeWith__default["default"](cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
                         if (Array.isArray(srcValue)) {
                             return objValue = srcValue;
                         }
@@ -61760,7 +62148,7 @@
             get: function () {
                 var _a;
                 if (this.inEditMode) {
-                    return mergeWith__default['default'](cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
+                    return mergeWith__default["default"](cloneValue((_a = this._data) !== null && _a !== void 0 ? _a : this.grid.dataView[this.index]), this.grid.transactions.getAggregatedValue(this.key, false), function (objValue, srcValue) {
                         if (Array.isArray(srcValue)) {
                             return objValue = srcValue;
                         }
@@ -72801,7 +73189,7 @@
                         // if a row has been added and before commiting the transaction deleted
                         var leafRowsDirectParents_1 = new Set();
                         _this.records.forEach(function (record) {
-                            if (record && !record.children && record.parent) {
+                            if (record && (!record.children || record.children.length === 0) && record.parent) {
                                 leafRowsDirectParents_1.add(record.parent);
                             }
                         });
@@ -72817,7 +73205,7 @@
                 if (_this.rowSelection === GridSelectionMode.multipleCascade) {
                     var leafRowsDirectParents_2 = new Set();
                     _this.records.forEach(function (record) {
-                        if (record && !record.children && record.parent) {
+                        if (record && (!record.children || record.children.length === 0) && record.parent) {
                             leafRowsDirectParents_2.add(record.parent);
                         }
                     });
@@ -85848,6 +86236,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;
@@ -86057,205 +86447,206 @@
     exports.toPercent = toPercent;
     exports.valueInRange = valueInRange;
     exports.weekDay = weekDay;
-    exports.ɵ1 = ɵ1;
-    exports.ɵ2 = ɵ2;
-    exports.ɵa = IgxActionStripMenuItemDirective;
-    exports.ɵb = IGX_DROPDOWN_BASE;
-    exports.ɵba = 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 = IgxComboAPIService;
-    exports.ɵbm = IGX_COMBO_COMPONENT;
-    exports.ɵbo = IgxComboDropDownComponent;
-    exports.ɵbp = IgxComboItemComponent;
-    exports.ɵbq = IgxComboHeaderDirective;
-    exports.ɵbr = IgxComboFooterDirective;
-    exports.ɵbs = IgxComboItemDirective;
-    exports.ɵbt = IgxComboEmptyDirective;
-    exports.ɵbu = IgxComboHeaderItemDirective;
-    exports.ɵbv = IgxComboAddItemDirective;
-    exports.ɵbw = IgxComboToggleIconDirective;
-    exports.ɵbx = IgxComboClearIconDirective;
-    exports.ɵby = IgxComboFilteringPipe;
-    exports.ɵbz = IgxComboGroupingPipe;
-    exports.ɵca = IgxComboAddItemComponent;
-    exports.ɵcb = PickerBaseDirective;
-    exports.ɵcc = IgxCalendarContainerComponent;
-    exports.ɵcd = IgxCalendarContainerModule;
-    exports.ɵce = IgxDialogTitleDirective;
-    exports.ɵcf = IgxDialogActionsDirective;
-    exports.ɵcg = IgxCellCrudState;
-    exports.ɵch = IgxRowCrudState;
-    exports.ɵci = IgxRowAddCrudState;
-    exports.ɵcj = IgxGridCRUDService;
-    exports.ɵck = IgxColumnMovingService;
-    exports.ɵcl = IgxExcelStyleCustomDialogComponent;
-    exports.ɵcm = IgxExcelStyleDefaultExpressionComponent;
-    exports.ɵcn = IgxExcelStyleDateExpressionComponent;
-    exports.ɵco = HammerGesturesManager;
-    exports.ɵcp = WatchChanges;
-    exports.ɵcq = WatchColumnChanges;
-    exports.ɵcr = notifyChanges;
-    exports.ɵcs = IgxNotificationsDirective;
-    exports.ɵct = IgxGridColumnResizerComponent;
-    exports.ɵcu = IgxColumnResizerDirective;
-    exports.ɵcv = IgxColumnResizingService;
-    exports.ɵcw = IgxRowSelectorDirective;
-    exports.ɵcx = IgxGroupByRowSelectorDirective;
-    exports.ɵcy = IgxHeadSelectorDirective;
-    exports.ɵcz = IgxRowDragDirective;
-    exports.ɵd = IgxGridSelectionService;
-    exports.ɵda = IgxDragIndicatorIconDirective;
-    exports.ɵdb = IgxRowDragGhostDirective;
-    exports.ɵdc = IgxRowDragModule;
-    exports.ɵdd = IgxGridHeaderRowComponent;
-    exports.ɵde = IgxGridHeaderGroupComponent;
-    exports.ɵdf = IgxGridHeaderComponent;
-    exports.ɵdg = IgxGridFilteringCellComponent;
-    exports.ɵdh = IgxFilteringService;
-    exports.ɵdi = IgxGridFilteringRowComponent;
-    exports.ɵdj = IgxGridGroupByAreaComponent;
-    exports.ɵdk = IgxGroupByAreaDirective;
-    exports.ɵdl = IgxGroupByMetaPipe;
-    exports.ɵdm = IgxTemplateOutletDirective;
-    exports.ɵdn = IgxTemplateOutletModule;
-    exports.ɵdo = IgxRowEditTemplateDirective;
-    exports.ɵdp = IgxRowEditTextDirective;
-    exports.ɵdq = IgxRowAddTextDirective;
-    exports.ɵdr = IgxRowEditActionsDirective;
-    exports.ɵds = IgxRowEditTabStopDirective;
-    exports.ɵdt = IgxSummaryRowComponent;
-    exports.ɵdu = IgxSummaryCellComponent;
-    exports.ɵdv = IgxRowDirective;
-    exports.ɵdw = IgxGridNavigationService;
-    exports.ɵdx = IgxGridSummaryService;
-    exports.ɵdy = ConnectedPositioningStrategy;
-    exports.ɵdz = IgxGridGroupByRowComponent;
-    exports.ɵea = IgxTreeGridSelectionService;
-    exports.ɵeb = IgxTreeGridGroupByAreaComponent;
-    exports.ɵec = IgxRowLoadingIndicatorTemplateDirective;
-    exports.ɵed = IgxHierarchicalGridNavigationService;
-    exports.ɵee = IgxChildGridRowComponent;
-    exports.ɵef = IgxGridCellComponent;
-    exports.ɵeg = IgxGridFooterComponent;
-    exports.ɵeh = IgxAdvancedFilteringDialogComponent;
-    exports.ɵei = IgxColumnHidingDirective;
-    exports.ɵej = IgxColumnPinningDirective;
-    exports.ɵek = IgxGridSharedModules;
-    exports.ɵel = IgxProcessBarTextTemplateDirective;
-    exports.ɵem = IgxProgressBarGradientDirective;
-    exports.ɵen = DIR_DOCUMENT_FACTORY;
-    exports.ɵeo = DIR_DOCUMENT;
-    exports.ɵep = IgxDirectionality;
-    exports.ɵeq = IgxSelectItemNavigationDirective;
-    exports.ɵer = IGX_TIME_PICKER_COMPONENT;
-    exports.ɵet = IgxItemListDirective;
-    exports.ɵeu = IgxTimeItemDirective;
-    exports.ɵev = IgxTimePickerTemplateDirective;
-    exports.ɵew = IgxTimePickerActionsDirective;
-    exports.ɵex = TimeFormatPipe;
-    exports.ɵey = TimeItemPipe;
-    exports.ɵez = IgxGridPipesModule;
-    exports.ɵf = IGX_EXPANSION_PANEL_COMPONENT;
-    exports.ɵfa = IgxGridCellStyleClassesPipe;
-    exports.ɵfb = IgxGridCellStylesPipe;
-    exports.ɵfc = IgxGridRowClassesPipe;
-    exports.ɵfd = IgxGridRowStylesPipe;
-    exports.ɵfe = IgxGridNotGroupedPipe;
-    exports.ɵff = IgxGridTopLevelColumns;
-    exports.ɵfg = IgxGridFilterConditionPipe;
-    exports.ɵfh = IgxGridTransactionPipe;
-    exports.ɵfi = IgxGridPaginatorOptionsPipe;
-    exports.ɵfj = IgxHasVisibleColumnsPipe;
-    exports.ɵfk = IgxGridRowPinningPipe;
-    exports.ɵfl = IgxColumnActionEnabledPipe;
-    exports.ɵfm = IgxFilterActionColumnsPipe;
-    exports.ɵfn = IgxSortActionColumnsPipe;
-    exports.ɵfo = IgxGridDataMapperPipe;
-    exports.ɵfp = IgxStringReplacePipe;
-    exports.ɵfq = IgxGridTransactionStatePipe;
-    exports.ɵfr = IgxColumnFormatterPipe;
-    exports.ɵfs = IgxSummaryFormatterPipe;
-    exports.ɵft = IgxGridAddRowPipe;
-    exports.ɵfu = IgxHeaderGroupWidthPipe;
-    exports.ɵfv = IgxHeaderGroupStylePipe;
-    exports.ɵfw = IgxGridColumnModule;
-    exports.ɵfx = IgxGridHeadersModule;
-    exports.ɵfy = SortingIndexPipe;
-    exports.ɵfz = IgxGridFilteringModule;
-    exports.ɵg = IGX_TREE_COMPONENT;
-    exports.ɵga = IgxColumnMovingModule;
-    exports.ɵgb = IgxColumnMovingDropDirective;
-    exports.ɵgc = IgxColumnMovingDragDirective;
-    exports.ɵgd = IgxGridResizingModule;
-    exports.ɵge = IgxResizeHandleDirective;
-    exports.ɵgf = IgxGridExcelStyleFilteringModule;
-    exports.ɵgg = IgxGridSelectionModule;
-    exports.ɵgh = IgxGridDragSelectDirective;
-    exports.ɵgi = IgxGridSummaryModule;
-    exports.ɵgj = IgxSummaryDataPipe;
-    exports.ɵgk = IgxGridToolbarModule;
-    exports.ɵgl = BaseToolbarDirective;
-    exports.ɵgm = BaseToolbarColumnActionsDirective;
-    exports.ɵgn = IgxGridRowComponent;
-    exports.ɵgo = IgxGridSortingPipe;
-    exports.ɵgp = IgxGridGroupingPipe;
-    exports.ɵgq = IgxGridPagingPipe;
-    exports.ɵgr = IgxGridFilteringPipe;
-    exports.ɵgs = IgxGridSummaryPipe;
-    exports.ɵgt = IgxGridDetailsPipe;
-    exports.ɵgu = IgxGridExpandableCellComponent;
-    exports.ɵgv = IgxTreeGridRowComponent;
-    exports.ɵgw = IgxTreeGridCellComponent;
-    exports.ɵgx = IgxTreeGridHierarchizingPipe;
-    exports.ɵgy = IgxTreeGridFlatteningPipe;
-    exports.ɵgz = IgxTreeGridSortingPipe;
-    exports.ɵh = IGX_TREE_NODE_COMPONENT;
-    exports.ɵha = IgxTreeGridPagingPipe;
-    exports.ɵhb = IgxTreeGridTransactionPipe;
-    exports.ɵhc = IgxTreeGridNormalizeRecordsPipe;
-    exports.ɵhd = IgxTreeGridAddRowPipe;
-    exports.ɵhe = IgxTreeGridFilteringPipe;
-    exports.ɵhf = IgxTreeGridSummaryPipe;
-    exports.ɵhg = IgxHierarchicalRowComponent;
-    exports.ɵhh = IgxHierarchicalGridCellComponent;
-    exports.ɵhi = IgxSliderThumbComponent;
-    exports.ɵhj = IgxThumbLabelComponent;
-    exports.ɵhk = IgxTicksComponent;
-    exports.ɵhl = IgxTickLabelsPipe;
-    exports.ɵhm = IgxTabsBase;
-    exports.ɵhn = IgxTabHeaderBase;
-    exports.ɵho = IgxTabContentBase;
-    exports.ɵhp = IgxSplitBarComponent;
-    exports.ɵhq = IgxTreeService;
-    exports.ɵhr = IgxTreeSelectionService;
-    exports.ɵhs = IgxTreeNavigationService;
-    exports.ɵi = PlatformUtil;
-    exports.ɵl = IgxInputGroupBase;
-    exports.ɵm = IgxSelectionAPIService;
-    exports.ɵn = IgxForOfSyncService;
-    exports.ɵo = IgxForOfScrollSyncService;
-    exports.ɵp = DisplayContainerComponent;
-    exports.ɵq = IgxScrollInertiaDirective;
-    exports.ɵr = IgxScrollInertiaModule;
-    exports.ɵs = VirtualHelperComponent;
-    exports.ɵt = VirtualHelperBaseDirective;
-    exports.ɵu = HVirtualHelperComponent;
-    exports.ɵv = MaskParsingService;
-    exports.ɵw = isHierarchyMatch;
-    exports.ɵx = getHierarchy;
-    exports.ɵy = IgxGridActionButtonComponent;
-    exports.ɵz = ToggleAnimationPlayer;
+    exports["ɵ1"] = ɵ1;
+    exports["ɵ2"] = ɵ2;
+    exports["ɵa"] = IgxActionStripMenuItemDirective;
+    exports["ɵb"] = IGX_DROPDOWN_BASE;
+    exports["ɵba"] = IgxExpansionPanelTitleDirective;
+    exports["ɵbb"] = IgxExpansionPanelDescriptionDirective;
+    exports["ɵbc"] = IgxExpansionPanelIconDirective;
+    exports["ɵbd"] = IgxBannerActionsDirective;
+    exports["ɵbe"] = IgxDaysViewNavigationService;
+    exports["ɵbf"] = IgxDayItemComponent;
+    exports["ɵbg"] = IgxMonthViewSlotsCalendar;
+    exports["ɵbh"] = IgxGetViewDateCalendar;
+    exports["ɵbi"] = IgxCarouselIndicatorDirective;
+    exports["ɵbj"] = IgxCarouselNextButtonDirective;
+    exports["ɵbk"] = IgxCarouselPrevButtonDirective;
+    exports["ɵbl"] = IGX_COMBO_COMPONENT;
+    exports["ɵbn"] = IgxComboBaseDirective;
+    exports["ɵbo"] = IgxComboHeaderDirective;
+    exports["ɵbp"] = IgxComboFooterDirective;
+    exports["ɵbq"] = IgxComboItemDirective;
+    exports["ɵbr"] = IgxComboEmptyDirective;
+    exports["ɵbs"] = IgxComboHeaderItemDirective;
+    exports["ɵbt"] = IgxComboAddItemDirective;
+    exports["ɵbu"] = IgxComboToggleIconDirective;
+    exports["ɵbv"] = IgxComboClearIconDirective;
+    exports["ɵbw"] = IgxComboAPIService;
+    exports["ɵbx"] = IgxComboDropDownComponent;
+    exports["ɵby"] = IgxComboItemComponent;
+    exports["ɵbz"] = IgxComboFilteringPipe;
+    exports["ɵca"] = IgxComboGroupingPipe;
+    exports["ɵcb"] = IgxComboAddItemComponent;
+    exports["ɵcc"] = PickerBaseDirective;
+    exports["ɵcd"] = IgxCalendarContainerComponent;
+    exports["ɵce"] = IgxCalendarContainerModule;
+    exports["ɵcf"] = IgxDialogTitleDirective;
+    exports["ɵcg"] = IgxDialogActionsDirective;
+    exports["ɵch"] = IgxCellCrudState;
+    exports["ɵci"] = IgxRowCrudState;
+    exports["ɵcj"] = IgxRowAddCrudState;
+    exports["ɵck"] = IgxGridCRUDService;
+    exports["ɵcl"] = IgxColumnMovingService;
+    exports["ɵcm"] = IgxExcelStyleCustomDialogComponent;
+    exports["ɵcn"] = IgxExcelStyleDefaultExpressionComponent;
+    exports["ɵco"] = IgxExcelStyleDateExpressionComponent;
+    exports["ɵcp"] = HammerGesturesManager;
+    exports["ɵcq"] = WatchChanges;
+    exports["ɵcr"] = WatchColumnChanges;
+    exports["ɵcs"] = notifyChanges;
+    exports["ɵct"] = IgxNotificationsDirective;
+    exports["ɵcu"] = IgxGridColumnResizerComponent;
+    exports["ɵcv"] = IgxColumnResizerDirective;
+    exports["ɵcw"] = IgxColumnResizingService;
+    exports["ɵcx"] = IgxRowSelectorDirective;
+    exports["ɵcy"] = IgxGroupByRowSelectorDirective;
+    exports["ɵcz"] = IgxHeadSelectorDirective;
+    exports["ɵd"] = IgxGridSelectionService;
+    exports["ɵda"] = IgxRowDragDirective;
+    exports["ɵdb"] = IgxDragIndicatorIconDirective;
+    exports["ɵdc"] = IgxRowDragGhostDirective;
+    exports["ɵdd"] = IgxRowDragModule;
+    exports["ɵde"] = IgxGridHeaderRowComponent;
+    exports["ɵdf"] = IgxGridHeaderGroupComponent;
+    exports["ɵdg"] = IgxGridHeaderComponent;
+    exports["ɵdh"] = IgxGridFilteringCellComponent;
+    exports["ɵdi"] = IgxFilteringService;
+    exports["ɵdj"] = IgxGridFilteringRowComponent;
+    exports["ɵdk"] = IgxGridGroupByAreaComponent;
+    exports["ɵdl"] = IgxGroupByAreaDirective;
+    exports["ɵdm"] = IgxGroupByMetaPipe;
+    exports["ɵdn"] = IgxTemplateOutletDirective;
+    exports["ɵdo"] = IgxTemplateOutletModule;
+    exports["ɵdp"] = IgxRowEditTemplateDirective;
+    exports["ɵdq"] = IgxRowEditTextDirective;
+    exports["ɵdr"] = IgxRowAddTextDirective;
+    exports["ɵds"] = IgxRowEditActionsDirective;
+    exports["ɵdt"] = IgxRowEditTabStopDirective;
+    exports["ɵdu"] = IgxSummaryRowComponent;
+    exports["ɵdv"] = IgxSummaryCellComponent;
+    exports["ɵdw"] = IgxRowDirective;
+    exports["ɵdx"] = IgxGridNavigationService;
+    exports["ɵdy"] = IgxGridSummaryService;
+    exports["ɵdz"] = ConnectedPositioningStrategy;
+    exports["ɵea"] = IgxGridGroupByRowComponent;
+    exports["ɵeb"] = IgxTreeGridSelectionService;
+    exports["ɵec"] = IgxTreeGridGroupByAreaComponent;
+    exports["ɵed"] = IgxRowLoadingIndicatorTemplateDirective;
+    exports["ɵee"] = IgxHierarchicalGridNavigationService;
+    exports["ɵef"] = IgxChildGridRowComponent;
+    exports["ɵeg"] = IgxGridCellComponent;
+    exports["ɵeh"] = IgxGridFooterComponent;
+    exports["ɵei"] = IgxAdvancedFilteringDialogComponent;
+    exports["ɵej"] = IgxColumnHidingDirective;
+    exports["ɵek"] = IgxColumnPinningDirective;
+    exports["ɵel"] = IgxGridSharedModules;
+    exports["ɵem"] = IgxProcessBarTextTemplateDirective;
+    exports["ɵen"] = IgxProgressBarGradientDirective;
+    exports["ɵeo"] = DIR_DOCUMENT_FACTORY;
+    exports["ɵep"] = DIR_DOCUMENT;
+    exports["ɵeq"] = IgxDirectionality;
+    exports["ɵer"] = IgxSelectItemNavigationDirective;
+    exports["ɵes"] = IGX_TIME_PICKER_COMPONENT;
+    exports["ɵeu"] = IgxItemListDirective;
+    exports["ɵev"] = IgxTimeItemDirective;
+    exports["ɵew"] = IgxTimePickerTemplateDirective;
+    exports["ɵex"] = IgxTimePickerActionsDirective;
+    exports["ɵey"] = TimeFormatPipe;
+    exports["ɵez"] = TimeItemPipe;
+    exports["ɵf"] = IGX_EXPANSION_PANEL_COMPONENT;
+    exports["ɵfa"] = IgxGridPipesModule;
+    exports["ɵfb"] = IgxGridCellStyleClassesPipe;
+    exports["ɵfc"] = IgxGridCellStylesPipe;
+    exports["ɵfd"] = IgxGridRowClassesPipe;
+    exports["ɵfe"] = IgxGridRowStylesPipe;
+    exports["ɵff"] = IgxGridNotGroupedPipe;
+    exports["ɵfg"] = IgxGridTopLevelColumns;
+    exports["ɵfh"] = IgxGridFilterConditionPipe;
+    exports["ɵfi"] = IgxGridTransactionPipe;
+    exports["ɵfj"] = IgxGridPaginatorOptionsPipe;
+    exports["ɵfk"] = IgxHasVisibleColumnsPipe;
+    exports["ɵfl"] = IgxGridRowPinningPipe;
+    exports["ɵfm"] = IgxColumnActionEnabledPipe;
+    exports["ɵfn"] = IgxFilterActionColumnsPipe;
+    exports["ɵfo"] = IgxSortActionColumnsPipe;
+    exports["ɵfp"] = IgxGridDataMapperPipe;
+    exports["ɵfq"] = IgxStringReplacePipe;
+    exports["ɵfr"] = IgxGridTransactionStatePipe;
+    exports["ɵfs"] = IgxColumnFormatterPipe;
+    exports["ɵft"] = IgxSummaryFormatterPipe;
+    exports["ɵfu"] = IgxGridAddRowPipe;
+    exports["ɵfv"] = IgxHeaderGroupWidthPipe;
+    exports["ɵfw"] = IgxHeaderGroupStylePipe;
+    exports["ɵfx"] = IgxGridColumnModule;
+    exports["ɵfy"] = IgxGridHeadersModule;
+    exports["ɵfz"] = SortingIndexPipe;
+    exports["ɵg"] = IGX_TREE_COMPONENT;
+    exports["ɵga"] = IgxGridFilteringModule;
+    exports["ɵgb"] = IgxColumnMovingModule;
+    exports["ɵgc"] = IgxColumnMovingDropDirective;
+    exports["ɵgd"] = IgxColumnMovingDragDirective;
+    exports["ɵge"] = IgxGridResizingModule;
+    exports["ɵgf"] = IgxResizeHandleDirective;
+    exports["ɵgg"] = IgxGridExcelStyleFilteringModule;
+    exports["ɵgh"] = IgxGridSelectionModule;
+    exports["ɵgi"] = IgxGridDragSelectDirective;
+    exports["ɵgj"] = IgxGridSummaryModule;
+    exports["ɵgk"] = IgxSummaryDataPipe;
+    exports["ɵgl"] = IgxGridToolbarModule;
+    exports["ɵgm"] = BaseToolbarDirective;
+    exports["ɵgn"] = BaseToolbarColumnActionsDirective;
+    exports["ɵgo"] = IgxGridRowComponent;
+    exports["ɵgp"] = IgxGridSortingPipe;
+    exports["ɵgq"] = IgxGridGroupingPipe;
+    exports["ɵgr"] = IgxGridPagingPipe;
+    exports["ɵgs"] = IgxGridFilteringPipe;
+    exports["ɵgt"] = IgxGridSummaryPipe;
+    exports["ɵgu"] = IgxGridDetailsPipe;
+    exports["ɵgv"] = IgxGridExpandableCellComponent;
+    exports["ɵgw"] = IgxTreeGridRowComponent;
+    exports["ɵgx"] = IgxTreeGridCellComponent;
+    exports["ɵgy"] = IgxTreeGridHierarchizingPipe;
+    exports["ɵgz"] = IgxTreeGridFlatteningPipe;
+    exports["ɵh"] = IGX_TREE_NODE_COMPONENT;
+    exports["ɵha"] = IgxTreeGridSortingPipe;
+    exports["ɵhb"] = IgxTreeGridPagingPipe;
+    exports["ɵhc"] = IgxTreeGridTransactionPipe;
+    exports["ɵhd"] = IgxTreeGridNormalizeRecordsPipe;
+    exports["ɵhe"] = IgxTreeGridAddRowPipe;
+    exports["ɵhf"] = IgxTreeGridFilteringPipe;
+    exports["ɵhg"] = IgxTreeGridSummaryPipe;
+    exports["ɵhh"] = IgxHierarchicalRowComponent;
+    exports["ɵhi"] = IgxHierarchicalGridCellComponent;
+    exports["ɵhj"] = IgxSliderThumbComponent;
+    exports["ɵhk"] = IgxThumbLabelComponent;
+    exports["ɵhl"] = IgxTicksComponent;
+    exports["ɵhm"] = IgxTickLabelsPipe;
+    exports["ɵhn"] = IgxTabsBase;
+    exports["ɵho"] = IgxTabHeaderBase;
+    exports["ɵhp"] = IgxTabContentBase;
+    exports["ɵhq"] = IgxSplitBarComponent;
+    exports["ɵhr"] = IgxTreeService;
+    exports["ɵhs"] = IgxTreeSelectionService;
+    exports["ɵht"] = IgxTreeNavigationService;
+    exports["ɵi"] = PlatformUtil;
+    exports["ɵl"] = IgxInputGroupBase;
+    exports["ɵm"] = IgxSelectionAPIService;
+    exports["ɵn"] = IgxForOfSyncService;
+    exports["ɵo"] = IgxForOfScrollSyncService;
+    exports["ɵp"] = DisplayContainerComponent;
+    exports["ɵq"] = IgxScrollInertiaDirective;
+    exports["ɵr"] = IgxScrollInertiaModule;
+    exports["ɵs"] = VirtualHelperComponent;
+    exports["ɵt"] = VirtualHelperBaseDirective;
+    exports["ɵu"] = HVirtualHelperComponent;
+    exports["ɵv"] = MaskParsingService;
+    exports["ɵw"] = isHierarchyMatch;
+    exports["ɵx"] = getHierarchy;
+    exports["ɵy"] = IgxGridActionButtonComponent;
+    exports["ɵz"] = ToggleAnimationPlayer;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=igniteui-angular.umd.js.map