igniteui-angular 12.2.4 → 12.3.0-alpha.0

package/bundles/igniteui-angular.umd.js

@@ -2537,11 +2537,11 @@
             };
             return rec;
         };
-        DataUtil.group = function (data, state, grid, groupsRecords, fullResult) {
+        DataUtil.group = function (data, state, grouping, grid, groupsRecords, fullResult) {
+            if (grouping === void 0) { grouping = new IgxGrouping(); }
             if (grid === void 0) { grid = null; }
             if (groupsRecords === void 0) { groupsRecords = []; }
             if (fullResult === void 0) { fullResult = { data: [], metadata: [] }; }
-            var grouping = new IgxGrouping();
             groupsRecords.splice(0, groupsRecords.length);
             return grouping.groupBy(data, state, grid, groupsRecords, fullResult);
         };
@@ -13147,7 +13147,7 @@
                 }
                 if (hasGrouping && !this.options.ignoreGrouping) {
                     var groupsRecords = [];
-                    DataUtil.group(cloneArray(gridData), groupedGridGroupingState, grid, groupsRecords);
+                    DataUtil.group(cloneArray(gridData), groupedGridGroupingState, grid.groupStrategy, grid, groupsRecords);
                     gridData = groupsRecords;
                 }
                 if (hasGrouping && !this.options.ignoreGrouping) {
@@ -38930,10 +38930,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) {
@@ -39051,7 +39051,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 [
@@ -39061,359 +39061,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";
@@ -39421,21 +39087,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.
@@ -39449,49 +39101,14 @@
          * 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;
@@ -39515,182 +39132,69 @@
              */
             _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;
+            /** @hidden @internal */
+            _this.cssClass = 'igx-combo'; // Independent of display density for the time being
+            /** @hidden @internal */
+            _this.role = 'combobox';
             /**
-             * 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 combo. The default is `false`.
              * ```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>
+             * <igx-combo [disabled]="'true'">
              * ```
              */
-            _this.headerItemTemplate = null;
+            _this.disabled = false;
             /**
-             * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
+             * Emitted when item selection is changing, before the selection completes
              *
-             * ```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>
+             * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
              * ```
              */
-            _this.addItemTemplate = null;
+            // TODO: any for old/new selection?
+            _this.selectionChanging = new i0.EventEmitter();
             /**
-             * 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>
-             * ```
-             */
-            _this.clearIconTemplate = null;
-            /**
-             * Emitted when item selection is changing, before the selection completes
-             *
-             * ```html
-             * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
-             * ```
-             */
-            _this.selectionChanging = new i0.EventEmitter();
-            /**
-             * Emitted before the dropdown is opened
+             * Emitted before the dropdown is opened
              *
              * ```html
              * <igx-combo opening='handleOpening($event)'></igx-combo>
@@ -39746,202 +39250,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
              *
@@ -39967,7 +39488,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IgxComboComponent.prototype, "itemHeight", {
+        Object.defineProperty(IgxComboBaseDirective.prototype, "itemHeight", {
             /**
              * Configures the drop down list item height
              *
@@ -39993,17 +39514,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.
              *
@@ -40021,9 +39532,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
@@ -40048,7 +39559,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[].
              *
@@ -40074,7 +39585,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`.
@@ -40091,142 +39626,1006 @@
             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
+             *
+             * ```typescript
+             * // get
+             * let valid = this.combo.valid;
+             * ```
+             */
+            get: function () {
+                return this._valid;
+            },
+            /**
+             * Sets if control is valid, when used in a form
+             *
+             * ```typescript
+             * // set
+             * this.combo.valid = IgxComboState.INVALID;
+             * ```
+             */
+            set: function (valid) {
+                this._valid = valid;
+                this.comboInput.valid = exports.IgxInputState[IgxComboState[valid]];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboBaseDirective.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(IgxComboBaseDirective.prototype, "virtualizationState", {
+            /**
+             * Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize`
+             *
+             * ```typescript
+             * // get
+             * let state = this.combo.virtualizationState;
+             * ```
+             */
+            get: function () {
+                return this.virtDir.state;
+            },
+            /**
+             * Sets the current state of the virtualized data.
+             *
+             * ```typescript
+             * // set
+             * this.combo.virtualizationState(state);
+             * ```
+             */
+            set: function (state) {
+                this.virtDir.state = state;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        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.
+             *
+             * ```typescript
+             * // get
+             * let count = this.combo.totalItemCount;
+             * ```
+             */
+            get: function () {
+                return this.virtDir.totalItemCount;
+            },
+            /**
+             * Sets total count of the virtual data items, when using remote service.
+             *
+             * ```typescript
+             * // set
+             * this.combo.totalItemCount(remoteService.count);
+             * ```
+             */
+            set: function (count) {
+                this.virtDir.totalItemCount = count;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboBaseDirective.prototype, "template", {
+            /** @hidden @internal */
+            get: function () {
+                this._dataType = this.dataType;
+                if (this.itemTemplate) {
+                    return this.itemTemplate;
+                }
+                if (this._dataType === DataTypes.COMPLEX) {
+                    return this.complexTemplate;
+                }
+                return this.primitiveTemplate;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.onArrowDown = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.open();
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.ngOnInit = function () {
+            this.ngControl = this._injector.get(forms.NgControl, null);
+            var targetElement = this.elementRef.nativeElement;
+            this._overlaySettings = {
+                target: targetElement,
+                scrollStrategy: new AbsoluteScrollStrategy(),
+                positionStrategy: new AutoPositionStrategy(),
+                modal: false,
+                closeOnOutsideClick: true,
+                excludeFromOutsideClick: [targetElement]
+            };
+            this.selectionService.set(this.id, new Set());
+            this._iconService.addSvgIconFromText(materialIconsExtended.caseSensitive.name, materialIconsExtended.caseSensitive.value, 'imx-icons');
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.filteredData = __spreadArray([], __read(this.data));
+            if (this.ngControl) {
+                this.ngControl.statusChanges.pipe(operators.takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
+                this.manageRequiredAsterisk();
+                this.cdr.detectChanges();
+            }
+            this.virtDir.chunkPreload.pipe(operators.takeUntil(this.destroy$)).subscribe(function (e) {
+                var eventArgs = Object.assign({}, e, { owner: _this });
+                _this.dataPreLoad.emit(eventArgs);
+            });
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+            this.comboAPI.clear();
+            this.selectionService.clear(this.id);
+        };
+        /**
+         * A method that opens/closes the combo.
+         *
+         * ```html
+         * <button (click)="combo.toggle()">Toggle Combo</button>
+         * <igx-combo #combo></igx-combo>
+         * ```
+         */
+        IgxComboBaseDirective.prototype.toggle = function () {
+            var overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+            this.dropdown.toggle(overlaySettings);
+        };
+        /**
+         * A method that opens the combo.
+         *
+         * ```html
+         * <button (click)="combo.open()">Open Combo</button>
+         * <igx-combo #combo></igx-combo>
+         * ```
+         */
+        IgxComboBaseDirective.prototype.open = function () {
+            var overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+            this.dropdown.open(overlaySettings);
+        };
+        /**
+         * A method that closes the combo.
+         *
+         * ```html
+         * <button (click)="combo.close()">Close Combo</button>
+         * <igx-combo #combo></igx-combo>
+         * ```
+         */
+        IgxComboBaseDirective.prototype.close = function () {
+            this.dropdown.close();
+        };
+        /**
+         * Triggers change detection on the combo view
+         */
+        IgxComboBaseDirective.prototype.triggerCheck = function () {
+            this.cdr.detectChanges();
+        };
+        Object.defineProperty(IgxComboBaseDirective.prototype, "selection", {
+            /**
+             * Get current selection state
+             *
+             * @returns Array of selected items
+             * ```typescript
+             * let selectedItems = this.combo.selectedItems();
+             * ```
+             */
+            get: function () {
+                var items = Array.from(this.selectionService.get(this.id));
+                return items;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Returns if the specified itemID is selected
+         *
+         * @hidden
+         * @internal
+         */
+        IgxComboBaseDirective.prototype.isItemSelected = function (item) {
+            return this.selectionService.is_item_selected(this.id, item);
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.addItemToCollection = function () {
+            var _b, _c;
+            var _a;
+            if (!this.searchValue) {
+                return;
+            }
+            var newValue = this.searchValue.trim();
+            var addedItem = this.displayKey ? (_b = {},
+                _b[this.valueKey] = newValue,
+                _b[this.displayKey] = newValue,
+                _b) : newValue;
+            if (this.groupKey) {
+                Object.assign(addedItem, (_c = {}, _c[this.groupKey] = this.defaultFallbackGroup, _c));
+            }
+            // expose shallow copy instead of this.data in event args so this.data can't be mutated
+            var oldCollection = __spreadArray([], __read(this.data));
+            var newCollection = __spreadArray(__spreadArray([], __read(this.data)), [addedItem]);
+            var args = {
+                oldCollection: oldCollection,
+                addedItem: addedItem,
+                newCollection: newCollection,
+                owner: this, cancel: false
+            };
+            this.addition.emit(args);
+            if (args.cancel) {
+                return;
+            }
+            this.data.push(args.addedItem);
+            // trigger re-render
+            this.data = cloneArray(this.data);
+            this.select(this.valueKey !== null && this.valueKey !== undefined ?
+                [args.addedItem[this.valueKey]] : [args.addedItem], false);
+            this.customValueFlag = false;
+            (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+            this.dropdown.focusedItem = null;
+            this.virtDir.scrollTo(0);
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.isAddButtonVisible = function () {
+            // This should always return a boolean value. If this.searchValue was '', it returns '' instead of false;
+            return this.searchValue !== '' && this.customValueFlag;
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.handleInputChange = function (event) {
+            if (event !== undefined) {
+                var args = {
+                    searchText: typeof event === 'string' ? event : event.target.value,
+                    owner: this,
+                    cancel: false
+                };
+                this.searchInputUpdate.emit(args);
+                if (args.cancel) {
+                    this.filterValue = null;
+                }
+            }
+            this.checkMatch();
+        };
+        /**
+         * Event handlers
+         *
+         * @hidden
+         * @internal
+         */
+        IgxComboBaseDirective.prototype.handleOpening = function (e) {
+            var args = { owner: this, event: e.event, cancel: e.cancel };
+            this.opening.emit(args);
+            e.cancel = args.cancel;
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.handleClosing = function (e) {
+            var _a;
+            var args = { owner: this, event: e.event, cancel: e.cancel };
+            this.closing.emit(args);
+            e.cancel = args.cancel;
+            if (e.cancel) {
+                return;
+            }
+            this.searchValue = '';
+            if (!e.event) {
+                (_a = this.comboInput) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+            }
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.handleClosed = function () {
+            this.closed.emit({ owner: this });
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.handleKeyDown = function (event) {
+            if (event.key === 'ArrowUp' || event.key === 'Up') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.close();
+            }
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.registerOnChange = function (fn) {
+            this._onChangeCallback = fn;
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.registerOnTouched = function (fn) {
+            this._onTouchedCallback = fn;
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.onClick = function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+            if (!this.disabled) {
+                this.toggle();
+            }
+        };
+        /** @hidden @internal */
+        IgxComboBaseDirective.prototype.onBlur = function () {
+            if (this.collapsed) {
+                this._onTouchedCallback();
+                if (this.ngControl && this.ngControl.invalid) {
+                    this.valid = IgxComboState.INVALID;
+                }
+                else {
+                    this.valid = IgxComboState.INITIAL;
+                }
+            }
+        };
+        /** if there is a valueKey - map the keys to data items, else - just return the keys */
+        IgxComboBaseDirective.prototype.convertKeysToItems = function (keys) {
+            var _this = this;
+            if (this.comboAPI.valueKey === null) {
+                return keys;
+            }
+            // map keys vs. filter data to retain the order of the selected items
+            return keys.map(function (key) { return _this.data.find(function (entry) { return entry[_this.valueKey] === key; }); }).filter(function (e) { return e !== undefined; });
+        };
+        IgxComboBaseDirective.prototype.checkMatch = function () {
+            var itemMatch = this.filteredData.some(this.findMatch);
+            this.customValueFlag = this.allowCustomValues && !itemMatch;
+        };
+        IgxComboBaseDirective.prototype.manageRequiredAsterisk = function () {
+            if (this.ngControl && this.ngControl.control.validator) {
+                // Run the validation with empty object to check if required is enabled.
+                var error = this.ngControl.control.validator({});
+                this.inputGroup.isRequired = error && error.required;
+            }
+        };
+        /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
+        IgxComboBaseDirective.prototype.registerRemoteEntries = function (ids, add) {
+            var e_1, _b, e_2, _c;
+            if (add === void 0) { add = true; }
+            if (add) {
+                var selection = this.getValueDisplayPairs(ids);
+                try {
+                    for (var selection_1 = __values(selection), selection_1_1 = selection_1.next(); !selection_1_1.done; selection_1_1 = selection_1.next()) {
+                        var entry = selection_1_1.value;
+                        this._remoteSelection[entry[this.valueKey]] = entry[this.displayKey];
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (selection_1_1 && !selection_1_1.done && (_b = selection_1.return)) _b.call(selection_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            else {
+                try {
+                    for (var ids_1 = __values(ids), ids_1_1 = ids_1.next(); !ids_1_1.done; ids_1_1 = ids_1.next()) {
+                        var entry = ids_1_1.value;
+                        delete this._remoteSelection[entry];
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (ids_1_1 && !ids_1_1.done && (_c = ids_1.return)) _c.call(ids_1);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+            }
+        };
+        /**
+         * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]`
+         */
+        IgxComboBaseDirective.prototype.getValueDisplayPairs = function (ids) {
+            var _this = this;
+            return this.data.filter(function (entry) { return ids.indexOf(entry[_this.valueKey]) > -1; }).map(function (e) {
+                var _b;
+                return (_b = {},
+                    _b[_this.valueKey] = e[_this.valueKey],
+                    _b[_this.displayKey] = e[_this.displayKey],
+                    _b);
+            });
+        };
+        IgxComboBaseDirective.prototype.getRemoteSelection = function (newSelection, oldSelection) {
+            var _this = this;
+            if (!newSelection.length) {
+                // If new selection is empty, clear all items
+                this.registerRemoteEntries(oldSelection, false);
+                return '';
+            }
+            var removedItems = oldSelection.filter(function (e) { return newSelection.indexOf(e) < 0; });
+            var addedItems = newSelection.filter(function (e) { return oldSelection.indexOf(e) < 0; });
+            this.registerRemoteEntries(addedItems);
+            this.registerRemoteEntries(removedItems, false);
+            return Object.keys(this._remoteSelection).map(function (e) { return _this._remoteSelection[e]; }).join(', ');
+        };
+        return IgxComboBaseDirective;
+    }(DisplayDensityBase));
+    IgxComboBaseDirective.decorators = [
+        { type: i0.Directive }
+    ];
+    IgxComboBaseDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef },
+        { type: IgxSelectionAPIService },
+        { type: IgxComboAPIService },
+        { type: IgxIconService },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [DisplayDensityToken,] }] },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [IGX_INPUT_GROUP_TYPE,] }] },
+        { type: i0.Injector, decorators: [{ type: i0.Optional }] }
+    ]; };
+    IgxComboBaseDirective.propDecorators = {
+        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 }],
+        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 }],
+        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 }],
+        itemTemplate: [{ type: i0.ContentChild, args: [IgxComboItemDirective, { read: i0.TemplateRef },] }],
+        headerTemplate: [{ type: i0.ContentChild, args: [IgxComboHeaderDirective, { read: i0.TemplateRef },] }],
+        footerTemplate: [{ type: i0.ContentChild, args: [IgxComboFooterDirective, { read: i0.TemplateRef },] }],
+        headerItemTemplate: [{ type: i0.ContentChild, args: [IgxComboHeaderItemDirective, { read: i0.TemplateRef },] }],
+        addItemTemplate: [{ type: i0.ContentChild, args: [IgxComboAddItemDirective, { read: i0.TemplateRef },] }],
+        emptyTemplate: [{ type: i0.ContentChild, args: [IgxComboEmptyDirective, { read: i0.TemplateRef },] }],
+        toggleIconTemplate: [{ type: i0.ContentChild, args: [IgxComboToggleIconDirective, { read: i0.TemplateRef },] }],
+        clearIconTemplate: [{ type: i0.ContentChild, args: [IgxComboClearIconDirective, { read: i0.TemplateRef },] }],
+        inputGroup: [{ type: i0.ViewChild, args: ['inputGroup', { read: IgxInputGroupComponent, static: true },] }],
+        comboInput: [{ type: i0.ViewChild, args: ['comboInput', { read: IgxInputDirective, static: true },] }],
+        searchInput: [{ type: i0.ViewChild, args: ['searchInput',] }],
+        virtualScrollContainer: [{ type: i0.ViewChild, args: [IgxForOfDirective, { static: true },] }],
+        virtDir: [{ type: i0.ViewChild, args: [IgxForOfDirective, { read: IgxForOfDirective, static: true },] }],
+        dropdownContainer: [{ type: i0.ViewChild, args: ['dropdownItemContainer', { static: true },] }],
+        primitiveTemplate: [{ type: i0.ViewChild, args: ['primitive', { read: i0.TemplateRef, static: true },] }],
+        complexTemplate: [{ type: i0.ViewChild, args: ['complex', { read: i0.TemplateRef, static: true },] }],
+        onArrowDown: [{ type: i0.HostListener, args: ['keydown.ArrowDown', ['$event'],] }, { type: i0.HostListener, args: ['keydown.Alt.ArrowDown', ['$event'],] }]
+    };
+
+    /**
+     * @hidden
+     */
+    var IgxComboAddItemComponent = /** @class */ (function (_super) {
+        __extends(IgxComboAddItemComponent, _super);
+        function IgxComboAddItemComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(IgxComboAddItemComponent.prototype, "selected", {
+            get: function () {
+                return false;
+            },
+            set: function (value) {
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @inheritdoc
+         */
+        IgxComboAddItemComponent.prototype.clicked = function (event) {
+            this.comboAPI.disableTransitions = false;
+            this.comboAPI.add_custom_item();
+        };
+        return IgxComboAddItemComponent;
+    }(IgxComboItemComponent));
+    IgxComboAddItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'igx-combo-add-item',
+                    template: '<ng-content></ng-content>',
+                    providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }]
+                },] }
+    ];
+
+    /** @hidden */
+    var IgxComboDropDownComponent = /** @class */ (function (_super) {
+        __extends(IgxComboDropDownComponent, _super);
+        function IgxComboDropDownComponent(elementRef, cdr, platform, selection, combo, comboAPI, _displayDensityOptions) {
+            var _this = _super.call(this, elementRef, cdr, platform, selection, _displayDensityOptions) || this;
+            _this.elementRef = elementRef;
+            _this.cdr = cdr;
+            _this.platform = platform;
+            _this.selection = selection;
+            _this.combo = combo;
+            _this.comboAPI = comboAPI;
+            _this._displayDensityOptions = _displayDensityOptions;
+            /** @hidden @internal */
+            _this.singleMode = false;
+            /**
+             * @hidden
+             * @internal
+             */
+            _this.children = null;
+            _this.scrollHandler = function () {
+                _this.comboAPI.disableTransitions = true;
+            };
+            return _this;
+        }
+        Object.defineProperty(IgxComboDropDownComponent.prototype, "scrollContainer", {
+            /** @hidden @internal */
+            get: function () {
+                return this.virtDir.dc.location.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboDropDownComponent.prototype, "isScrolledToLast", {
+            get: function () {
+                var scrollTop = this.virtDir.scrollPosition;
+                var scrollHeight = this.virtDir.getScroll().scrollHeight;
+                return Math.floor(scrollTop + this.virtDir.igxForContainerSize) === scrollHeight;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboDropDownComponent.prototype, "lastVisibleIndex", {
+            get: function () {
+                return this.combo.totalItemCount ?
+                    Math.floor(this.combo.itemsMaxHeight / this.combo.itemHeight) :
+                    this.items.length - 1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboDropDownComponent.prototype, "sortedChildren", {
+            get: function () {
+                if (this.children !== undefined) {
+                    return this.children.toArray()
+                        .sort(function (a, b) { return a.index - b.index; });
+                }
+                return null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgxComboDropDownComponent.prototype, "items", {
+            /**
+             * Get all non-header items
+             *
+             * ```typescript
+             * let myDropDownItems = this.dropdown.items;
+             * ```
+             */
+            get: function () {
+                var e_1, _a;
+                var items = [];
+                if (this.children !== undefined) {
+                    var sortedChildren = this.sortedChildren;
+                    try {
+                        for (var sortedChildren_1 = __values(sortedChildren), sortedChildren_1_1 = sortedChildren_1.next(); !sortedChildren_1_1.done; sortedChildren_1_1 = sortedChildren_1.next()) {
+                            var child = sortedChildren_1_1.value;
+                            if (!child.isHeader) {
+                                items.push(child);
+                            }
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (sortedChildren_1_1 && !sortedChildren_1_1.done && (_a = sortedChildren_1.return)) _a.call(sortedChildren_1);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                }
+                return items;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.onFocus = function () {
+            this.focusedItem = this._focusedItem || this.items[0];
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.onBlur = function (_evt) {
+            this.focusedItem = null;
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.onToggleOpened = function () {
+            this.opened.emit();
+        };
+        /**
+         * @hidden
+         */
+        IgxComboDropDownComponent.prototype.navigateFirst = function () {
+            this.navigateItem(this.virtDir.igxForOf.findIndex(function (e) { return !e.isHeader; }));
+        };
+        /**
+         * @hidden
+         */
+        IgxComboDropDownComponent.prototype.navigatePrev = function () {
+            if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
+                this.combo.focusSearchInput(false);
+            }
+            else {
+                _super.prototype.navigatePrev.call(this);
+            }
+        };
+        /**
+         * @hidden
+         */
+        IgxComboDropDownComponent.prototype.navigateNext = function () {
+            var lastIndex = this.combo.totalItemCount ? this.combo.totalItemCount - 1 : this.virtDir.igxForOf.length - 1;
+            if (this._focusedItem && this._focusedItem.index === lastIndex) {
+                this.focusAddItemButton();
+            }
+            else {
+                _super.prototype.navigateNext.call(this);
+            }
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.selectItem = function (item) {
+            if (item === null || item === undefined) {
+                return;
+            }
+            this.comboAPI.set_selected_item(item.itemID);
+            this._focusedItem = item;
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.updateScrollPosition = function () {
+            this.virtDir.getScroll().scrollTop = this._scrollPosition;
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.onItemActionKey = function (key) {
+            switch (key) {
+                case DropDownActionKey.ENTER:
+                    this.handleEnter();
+                    break;
+                case DropDownActionKey.SPACE:
+                    this.handleSpace();
+                    break;
+                case DropDownActionKey.ESCAPE:
+                    this.close();
+            }
+        };
+        IgxComboDropDownComponent.prototype.ngAfterViewInit = function () {
+            this.virtDir.getScroll().addEventListener('scroll', this.scrollHandler);
+        };
+        /**
+         * @hidden @internal
+         */
+        IgxComboDropDownComponent.prototype.ngOnDestroy = function () {
+            this.virtDir.getScroll().removeEventListener('scroll', this.scrollHandler);
+            this.destroy$.next(true);
+            this.destroy$.complete();
+        };
+        IgxComboDropDownComponent.prototype.scrollToHiddenItem = function (_newItem) { };
+        IgxComboDropDownComponent.prototype.handleEnter = function () {
+            if (this.isAddItemFocused()) {
+                this.combo.addItemToCollection();
+                return;
+            }
+            if (this.singleMode && this.focusedItem) {
+                this.combo.select(this.focusedItem.itemID);
+            }
+            this.close();
+        };
+        IgxComboDropDownComponent.prototype.handleSpace = function () {
+            if (this.isAddItemFocused()) {
+                return;
+            }
+            else {
+                this.selectItem(this.focusedItem);
+            }
+        };
+        IgxComboDropDownComponent.prototype.isAddItemFocused = function () {
+            return this.focusedItem instanceof IgxComboAddItemComponent;
+        };
+        IgxComboDropDownComponent.prototype.focusAddItemButton = function () {
+            if (this.combo.isAddButtonVisible()) {
+                this.focusedItem = this.items[this.items.length - 1];
+            }
+        };
+        return IgxComboDropDownComponent;
+    }(IgxDropDownComponent));
+    IgxComboDropDownComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'igx-combo-drop-down',
+                    template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\nigxToggle\n(appended)=\"onToggleContentAppended($event)\"\n(opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n(closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-label]=\"this.listId\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n",
+                    providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }]
+                },] }
+    ];
+    IgxComboDropDownComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.ChangeDetectorRef },
+        { type: PlatformUtil },
+        { type: IgxSelectionAPIService },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [IGX_COMBO_COMPONENT,] }] },
+        { type: IgxComboAPIService },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [DisplayDensityToken,] }] }
+    ]; };
+    IgxComboDropDownComponent.propDecorators = {
+        singleMode: [{ type: i0.Input }],
+        children: [{ type: i0.ContentChildren, args: [IgxComboItemComponent, { descendants: true },] }]
+    };
+
+    /**
+     * @hidden
+     */
+    var IgxComboFilteringPipe = /** @class */ (function () {
+        function IgxComboFilteringPipe() {
+        }
+        IgxComboFilteringPipe.prototype.transform = function (collection, searchValue, displayKey, filteringOptions, shouldFilter) {
+            if (shouldFilter === void 0) { shouldFilter = false; }
+            if (!collection) {
+                return [];
+            }
+            if (!searchValue || !shouldFilter) {
+                return collection;
+            }
+            else {
+                var searchTerm_1 = filteringOptions.caseSensitive ? searchValue.trim() : searchValue.toLowerCase().trim();
+                if (displayKey != null) {
+                    return collection.filter(function (e) { return filteringOptions.caseSensitive ? e[displayKey].includes(searchTerm_1) :
+                        e[displayKey].toString().toLowerCase().includes(searchTerm_1); });
+                }
+                else {
+                    return collection.filter(function (e) { return filteringOptions.caseSensitive ? e.includes(searchTerm_1) :
+                        e.toString().toLowerCase().includes(searchTerm_1); });
+                }
+            }
+        };
+        return IgxComboFilteringPipe;
+    }());
+    IgxComboFilteringPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'comboFiltering'
+                },] }
+    ];
+    /**
+     * @hidden
+     */
+    var IgxComboGroupingPipe = /** @class */ (function () {
+        function IgxComboGroupingPipe(combo) {
+            this.combo = combo;
+        }
+        IgxComboGroupingPipe.prototype.transform = function (collection, groupKey, valueKey) {
+            var _a;
+            this.combo.filteredData = collection;
+            if ((!groupKey && groupKey !== 0) || !collection.length) {
+                return collection;
+            }
+            var sorted = DataUtil.sort(cloneArray(collection), [{
+                    fieldName: groupKey,
+                    dir: exports.SortingDirection.Asc,
+                    ignoreCase: true,
+                    strategy: DefaultSortingStrategy.instance()
+                }]);
+            var data = cloneArray(sorted);
+            var inserts = 0;
+            var currentHeader = null;
+            for (var i = 0; i < sorted.length; i++) {
+                var insertFlag = 0;
+                if (currentHeader !== sorted[i][groupKey]) {
+                    currentHeader = sorted[i][groupKey];
+                    insertFlag = 1;
+                }
+                if (insertFlag) {
+                    data.splice(i + inserts, 0, (_a = {},
+                        _a[valueKey] = currentHeader,
+                        _a[groupKey] = currentHeader,
+                        _a.isHeader = true,
+                        _a));
+                    inserts++;
+                }
+            }
+            return data;
+        };
+        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;
             /**
-             * Gets if control is valid, when used in a form
+             * Defines whether the caseSensitive icon should be shown in the search input
              *
              * ```typescript
              * // get
-             * let valid = this.combo.valid;
+             * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
              * ```
-             */
-            get: function () {
-                return this._valid;
-            },
-            /**
-             * Sets if control is valid, when used in a form
              *
-             * ```typescript
-             * // set
-             * this.combo.valid = IgxComboState.INVALID;
+             * ```html
+             * <!--set-->
+             * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
              * ```
              */
-            set: function (valid) {
-                this._valid = valid;
-                this.comboInput.valid = exports.IgxInputState[exports.IgxComboState[valid]];
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboComponent.prototype, "searchValue", {
+            _this.showSearchCaseIcon = false;
             /**
-             * @hidden @internal
+             * 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
              */
-            get: function () {
-                return this._searchValue;
-            },
-            set: function (val) {
-                this.filterValue = val;
-                this._searchValue = val;
-            },
-            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", {
+            _this.autoFocusSearch = true;
             /**
-             * Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize`
-             *
-             * ```typescript
-             * // get
-             * let state = this.combo.virtualizationState;
+             * An @Input property that enabled/disables filtering in the list. The default is `true`.
+             * ```html
+             * <igx-combo [filterable]="false">
              * ```
              */
-            get: function () {
-                return this.virtDir.state;
-            },
+            _this.filterable = true;
             /**
-             * Sets the current state of the virtualized data.
+             * Defines the placeholder value for the combo dropdown search field
              *
              * ```typescript
-             * // set
-             * this.combo.virtualizationState(state);
+             * // get
+             * let myComboSearchPlaceholder = this.combo.searchPlaceholder;
              * ```
-             */
-            set: function (state) {
-                this.virtDir.state = state;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboComponent.prototype, "totalItemCount", {
-            /**
-             * Gets total count of the virtual data items, when using remote service.
              *
-             * ```typescript
-             * // get
-             * let count = this.combo.totalItemCount;
+             * ```html
+             * <!--set-->
+             * <igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
              * ```
              */
-            get: function () {
-                return this.virtDir.totalItemCount;
-            },
+            _this.searchPlaceholder = 'Enter a Search Term';
             /**
-             * Sets total count of the virtual data items, when using remote service.
-             *
-             * ```typescript
-             * // set
-             * this.combo.totalItemCount(remoteService.count);
-             * ```
+             * @hidden @internal
              */
-            set: function (count) {
-                this.virtDir.totalItemCount = count;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxComboComponent.prototype, "value", {
+            _this.filteringLogic = exports.FilteringLogic.Or;
+            _this.stringFilters = IgxStringFilteringOperand;
+            _this.booleanFilters = IgxBooleanFilteringOperand;
+            _this._prevInputValue = '';
+            _this.comboAPI.register(_this);
+            return _this;
+        }
+        Object.defineProperty(IgxComboComponent.prototype, "inputEmpty", {
             /**
-             * The text displayed in the combo input
-             *
-             * ```typescript
-             * // get
-             * let comboValue = this.combo.value;
-             * ```
+             * @hidden @internal
              */
             get: function () {
-                return this._value;
+                return !this.value && !this.placeholder;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(IgxComboComponent.prototype, "filteredData", {
-            /**
-             * @hidden @internal
-             */
+            /** @hidden @internal */
             get: function () {
                 return this.filterable ? this._filteredData : this.data;
             },
-            /**
-             * @hidden @internal
-             */
+            /** @hidden @internal */
             set: function (val) {
                 this._filteredData = this.groupKey ? (val || []).filter(function (e) { return e.isHeader !== true; }) : val;
                 this.checkMatch();
@@ -40234,10 +40633,19 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(IgxComboComponent.prototype, "displaySearchInput", {
+            /** @hidden @internal */
+            get: function () {
+                return this.filterable || this.allowCustomValues;
+            },
+            enumerable: false,
+            configurable: true
+        });
         /**
          * @hidden @internal
          */
         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();
@@ -40246,80 +40654,6 @@
                 this.toggle();
             }
         };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.handleKeyDown = function (event) {
-            if (event.key === 'ArrowUp' || event.key === 'Up') {
-                event.preventDefault();
-                event.stopPropagation();
-                this.close();
-            }
-        };
-        /**
-         * @hidden @internal
-         */
-        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();
-        };
-        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", {
-            /**
-             * @hidden @internal
-             */
-            get: function () {
-                return this.totalItemCount > 0 &&
-                    this.valueKey &&
-                    this.dataType === DataTypes.COMPLEX;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Returns if the specified itemID is selected
-         *
-         * @hidden
-         * @internal
-         */
-        IgxComboComponent.prototype.isItemSelected = function (item) {
-            return this.selection.is_item_selected(this.id, item);
-        };
-        /**
-         * Triggers change detection on the combo view
-         */
-        IgxComboComponent.prototype.triggerCheck = function () {
-            this.cdr.detectChanges();
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.isAddButtonVisible = function () {
-            // This should always return a boolean value. If this.searchValue was '', it returns '' instead of false;
-            return this.searchValue !== '' && this.customValueFlag;
-        };
         /**
          * @hidden @internal
          */
@@ -40331,145 +40665,15 @@
                 this.deselectAllItems();
             }
         };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.addItemToCollection = function () {
-            var _a, _b;
-            if (!this.searchValue) {
-                return;
-            }
-            var newValue = this.searchValue.trim();
-            var addedItem = this.displayKey ? (_a = {},
-                _a[this.valueKey] = newValue,
-                _a[this.displayKey] = newValue,
-                _a) : newValue;
-            if (this.groupKey) {
-                Object.assign(addedItem, (_b = {}, _b[this.groupKey] = this.defaultFallbackGroup, _b));
-            }
-            // expose shallow copy instead of this.data in event args so this.data can't be mutated
-            var oldCollection = __spreadArray([], __read(this.data));
-            var newCollection = __spreadArray(__spreadArray([], __read(this.data)), [addedItem]);
-            var args = {
-                oldCollection: oldCollection,
-                addedItem: addedItem,
-                newCollection: newCollection,
-                owner: this, cancel: false
-            };
-            this.addition.emit(args);
-            if (args.cancel) {
-                return;
-            }
-            this.data.push(args.addedItem);
-            // trigger re-render
-            this.data = cloneArray(this.data);
-            this.selectItems(this.valueKey !== null && this.valueKey !== undefined ?
-                [args.addedItem[this.valueKey]] : [args.addedItem], false);
-            this.customValueFlag = false;
-            this.searchInput.nativeElement.focus();
-            this.dropdown.focusedItem = null;
-            this.virtDir.scrollTo(0);
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.focusSearchInput = function (opening) {
-            if (this.displaySearchInput && this.searchInput) {
-                this.searchInput.nativeElement.focus();
-            }
-            else {
-                if (opening) {
-                    this.dropdownContainer.nativeElement.focus();
-                }
-                else {
-                    this.comboInput.nativeElement.focus();
-                    this.toggle();
-                }
-            }
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.onBlur = function () {
-            if (this.collapsed) {
-                this._onTouchedCallback();
-                if (this.ngControl && this.ngControl.invalid) {
-                    this.valid = exports.IgxComboState.INVALID;
-                }
-                else {
-                    this.valid = exports.IgxComboState.INITIAL;
-                }
-            }
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.ngOnInit = function () {
-            this.ngControl = this._injector.get(forms.NgControl, null);
-            var targetElement = this.elementRef.nativeElement;
-            this._overlaySettings = {
-                target: targetElement,
-                scrollStrategy: new AbsoluteScrollStrategy(),
-                positionStrategy: new AutoPositionStrategy(),
-                modal: false,
-                closeOnOutsideClick: true,
-                excludeFromOutsideClick: [targetElement]
-            };
-            this.selection.set(this.id, new Set());
-            this._iconService.addSvgIconFromText(materialIconsExtended.caseSensitive.name, materialIconsExtended.caseSensitive.value, 'imx-icons');
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            this.filteredData = __spreadArray([], __read(this.data));
-            if (this.ngControl) {
-                this.ngControl.statusChanges.pipe(operators.takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
-                this.manageRequiredAsterisk();
-                this.cdr.detectChanges();
-            }
-            this.virtDir.chunkPreload.pipe(operators.takeUntil(this.destroy$)).subscribe(function (e) {
-                var eventArgs = Object.assign({}, e, { owner: _this });
-                _this.dataPreLoad.emit(eventArgs);
-            });
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.ngOnDestroy = function () {
-            this.destroy$.next();
-            this.destroy$.complete();
-            this.comboAPI.clear();
-            this.selection.clear(this.id);
-        };
         /**
          * @hidden @internal
          */
         IgxComboComponent.prototype.writeValue = function (value) {
             var selection = Array.isArray(value) ? value : [];
-            var oldSelection = this.selectedItems();
-            this.selection.select_items(this.id, selection, true);
+            var oldSelection = this.selection;
+            this.selectionService.select_items(this.id, selection, true);
             this.cdr.markForCheck();
-            this._value = this.createDisplayText(this.selectedItems(), oldSelection);
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.registerOnChange = function (fn) {
-            this._onChangeCallback = fn;
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.registerOnTouched = function (fn) {
-            this._onTouchedCallback = fn;
-        };
-        /**
-         * @hidden @internal
-         */
-        IgxComboComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
+            this._value = this.createDisplayText(this.selection, oldSelection);
         };
         /**
          * @hidden
@@ -40477,23 +40681,6 @@
         IgxComboComponent.prototype.getEditElement = function () {
             return this.comboInput.nativeElement;
         };
-        Object.defineProperty(IgxComboComponent.prototype, "template", {
-            /**
-             * @hidden @internal
-             */
-            get: function () {
-                this._dataType = this.dataType;
-                if (this.itemTemplate) {
-                    return this.itemTemplate;
-                }
-                if (this._dataType === DataTypes.COMPLEX) {
-                    return this.complexTemplate;
-                }
-                return this.primitiveTemplate;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(IgxComboComponent.prototype, "context", {
             /**
              * @hidden @internal
@@ -40522,79 +40709,18 @@
             }
             event.stopPropagation();
         };
-        /**
-         * A method that opens/closes the combo.
-         *
-         * ```html
-         * <button (click)="combo.toggle()">Toggle Combo</button>
-         * <igx-combo #combo></igx-combo>
-         * ```
-         */
-        IgxComboComponent.prototype.toggle = function () {
-            var overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
-            this.dropdown.toggle(overlaySettings);
-        };
-        /**
-         * A method that opens the combo.
-         *
-         * ```html
-         * <button (click)="combo.open()">Open Combo</button>
-         * <igx-combo #combo></igx-combo>
-         * ```
-         */
-        IgxComboComponent.prototype.open = function () {
-            var overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
-            this.dropdown.open(overlaySettings);
-        };
-        /**
-         * A method that closes the combo.
-         *
-         * ```html
-         * <button (click)="combo.close()">Close Combo</button>
-         * <igx-combo #combo></igx-combo>
-         * ```
-         */
-        IgxComboComponent.prototype.close = function () {
-            this.dropdown.close();
-        };
-        Object.defineProperty(IgxComboComponent.prototype, "collapsed", {
-            /**
-             * Gets drop down state.
-             *
-             * ```typescript
-             * let state = this.combo.collapsed;
-             * ```
-             */
-            get: function () {
-                return this.dropdown.collapsed;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Get current selection state
-         *
-         * @returns Array of selected items
-         * ```typescript
-         * let selectedItems = this.combo.selectedItems();
-         * ```
-         */
-        IgxComboComponent.prototype.selectedItems = function () {
-            var items = Array.from(this.selection.get(this.id));
-            return items;
-        };
         /**
          * Select defined items
          *
          * @param newItems new items to be selected
          * @param clearCurrentSelection if true clear previous selected items
          * ```typescript
-         * this.combo.selectItems(["New York", "New Jersey"]);
+         * this.combo.select(["New York", "New Jersey"]);
          * ```
          */
-        IgxComboComponent.prototype.selectItems = function (newItems, clearCurrentSelection, event) {
+        IgxComboComponent.prototype.select = function (newItems, clearCurrentSelection, event) {
             if (newItems) {
-                var newSelection = this.selection.add_items(this.id, newItems, clearCurrentSelection);
+                var newSelection = this.selectionService.add_items(this.id, newItems, clearCurrentSelection);
                 this.setSelection(newSelection, event);
             }
         };
@@ -40603,12 +40729,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);
             }
         };
@@ -40621,8 +40747,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);
         };
         /**
@@ -40634,9 +40760,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);
         };
@@ -40665,26 +40791,19 @@
                 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
          */
+        IgxComboComponent.prototype.toggleCaseSensitive = function () {
+            this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
+        };
+        /** @hidden @internal */
         IgxComboComponent.prototype.handleOpened = function () {
             this.triggerCheck();
             // Disabling focus of the search input should happen only when drop down opens.
@@ -40698,36 +40817,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,
@@ -40741,7 +40850,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;
                 }
@@ -40751,71 +40860,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) {
@@ -40825,47 +40873,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 },
@@ -40884,56 +40897,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 }],
+        dropdown: [{ type: i0.ViewChild, args: [IgxComboDropDownComponent, { static: true },] }]
     };
     /**
      * @hidden
@@ -40956,6 +40924,8 @@
                         IgxComboToggleIconDirective,
                         IgxComboClearIconDirective],
                     exports: [IgxComboComponent, IgxComboItemComponent, IgxComboDropDownComponent, IgxComboAddItemComponent,
+                        IgxComboGroupingPipe,
+                        IgxComboFilteringPipe,
                         IgxComboItemDirective,
                         IgxComboEmptyDirective,
                         IgxComboHeaderItemDirective,
@@ -40970,6 +40940,296 @@
                 },] }
     ];
 
+    /**
+     * 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 = false;
+            _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
+        });
+        /**
+         * 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 a defined item
+         *
+         * @param item the items to be deselected
+         * ```typescript
+         * this.combo.deselect("New York");
+         * ```
+         */
+        IgxSimpleComboComponent.prototype.deselect = function (item) {
+            if (item !== null && item !== undefined) {
+                var newSelection = this.selectionService.delete_items(this.id, item instanceof Array ? item : [item]);
+                this.setSelection(newSelection);
+            }
+        };
+        /** @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.dropdown.opened.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+                if (_this.composing) {
+                    _this.comboInput.focus();
+                }
+            });
+            this.dropdown.closed.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+                _this.composing = false;
+            });
+            this.dropdown.closing.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+                var selection = _this.selectionService.first_item(_this.id);
+                _this.comboInput.value = selection !== undefined && selection !== null ? selection : '';
+            });
+            this.dropdown.opening.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+                if (!_this.comboInput.value.length) {
+                    _this.clearSelection();
+                }
+            });
+            _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.open();
+            }
+            _super.prototype.handleInputChange.call(this, event);
+        };
+        /** @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.items[0].itemID);
+                event.preventDefault();
+                event.stopPropagation();
+                this.close();
+                return;
+            }
+            if (event.key === this.platformUtil.KEYMAP.BACKSPACE
+                || event.key === this.platformUtil.KEYMAP.DELETE) {
+                this._updateInput = false;
+                this.clearSelection();
+            }
+            _super.prototype.handleKeyDown.call(this, event);
+            this.composing = event.key !== this.platformUtil.KEYMAP.ARROW_DOWN
+                && event.key !== this.platformUtil.KEYMAP.ARROW_LEFT
+                && event.key !== this.platformUtil.KEYMAP.ARROW_RIGHT
+                && event.key !== this.platformUtil.KEYMAP.TAB;
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleKeyUp = function (event) {
+            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.getEditElement = function () {
+            return this.comboInput.nativeElement;
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleClear = function (event) {
+            if (this.disabled) {
+                return;
+            }
+            this.clearSelection(true);
+            if (this.collapsed) {
+                this.getEditElement().focus();
+            }
+            else {
+                this.focusSearchInput(true);
+            }
+            event.stopPropagation();
+            this.comboInput.value = this.filterValue = this.searchValue = '';
+            this.dropdown.focusedItem = null;
+            this.comboInput.focus();
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.handleOpened = function () {
+            this.triggerCheck();
+            this.dropdownContainer.nativeElement.focus();
+            this.opened.emit({ owner: this });
+        };
+        /** @hidden @internal */
+        IgxSimpleComboComponent.prototype.focusSearchInput = function (opening) {
+            if (opening) {
+                this.dropdownContainer.nativeElement.focus();
+            }
+            else {
+                this.comboInput.nativeElement.focus();
+                this.toggle();
+            }
+        };
+        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._value = displayText !== args.displayText
+                        ? args.displayText
+                        : this.createDisplayText([args.newSelection], [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);
+            }
+            return this.displayKey !== null && this.displayKey !== undefined
+                ? this.convertKeysToItems(newSelection).map(function (e) { return e[_this.displayKey]; })[0]
+                : 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);
+        };
+        return IgxSimpleComboComponent;
+    }(IgxComboBaseDirective));
+    IgxSimpleComboComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'igx-simple-combo',
+                    template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\"\n        aria-autocomplete=\"both\" [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [disabled]=\"disabled\" [igxTextSelection]=\"!composing\" />\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\">\n        <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"close()\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:true\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
+                    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 },] }],
+        selectionChanging: [{ type: i0.Output }]
+    };
+    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',
@@ -68874,6 +69134,26 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(IgxGridComponent.prototype, "groupStrategy", {
+            /**
+             * Gets/Sets the grouping strategy of the grid.
+             *
+             * @remarks The default IgxGrouping extends from IgxSorting and a custom one can be used as a `sortStrategy` as well.
+             *
+             * @example
+             * ```html
+             *  <igx-grid #grid [data]="localData" [groupStrategy]="groupStrategy"></igx-grid>
+             * ```
+             */
+            get: function () {
+                return this._groupStrategy;
+            },
+            set: function (value) {
+                this._groupStrategy = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgxGridComponent.prototype, "dropAreaMessage", {
             get: function () {
                 return this._dropAreaMessage || this.resourceStrings.igx_grid_groupByArea_message;
@@ -69695,7 +69975,7 @@
                         IgxForOfScrollSyncService
                     ],
                     selector: 'igx-grid',
-                    template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]='outerWidth'\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [density]=\"displayDensity\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)='preventContainerScroll($event)'\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf='data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>\n            <div #pinContainer *ngIf='pinnedData.length > 0'\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:paginator?.page:paginator?.perPage:id:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight'\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\">\n            <ng-template\n                [igxTemplateOutlet]='getRowTemplate(rowData)'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'\n                (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail='true' style=\"overflow: auto; width: 100%;\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)='detailsViewFocused(detailsContainer, rowIndex)' #detailsContainer [attr.data-rowindex]='rowIndex'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\" style='display: flex;'>\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]='detailTemplate'\n                    [ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth'  [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-container *ngIf=\"totalRecords || pagingMode === 1\">\n        <ng-content select=\"igx-paginator\"></ng-content>\n    </ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n   [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_less</igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n    [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_more</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n"
+                    template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]='outerWidth'\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [density]=\"displayDensity\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [density]=\"displayDensity\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)='preventContainerScroll($event)'\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"hasMovableColumns && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf='data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>\n            <div #pinContainer *ngIf='pinnedData.length > 0'\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class='igx-grid__tr--pinned' [style.width.px]='calcWidth'>\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:paginator?.page:paginator?.perPage:id:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight'\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]='trackChanges'\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\">\n            <ng-template\n                [igxTemplateOutlet]='getRowTemplate(rowData)'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'\n                (viewCreated)='viewCreatedHandler($event)'\n                (viewMoved)='viewMovedHandler($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [rowData]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail='true' style=\"overflow: auto; width: 100%;\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)='detailsViewFocused(detailsContainer, rowIndex)' #detailsContainer [attr.data-rowindex]='rowIndex'\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\" style='display: flex;'>\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]='detailTemplate'\n                    [ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"hasMovableColumns && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summariesHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth'  [style.height.px]='summariesHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summariesHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]='\"right\"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer\"></ng-content>\n    <ng-container *ngIf=\"totalRecords || pagingMode === 1\">\n        <ng-content select=\"igx-paginator\"></ng-content>\n    </ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button igxButton=\"raised\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n   [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_less</igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon role=\"button\" class=\"igx-grid__group-expand-btn\"\n    [ngClass]=\"{\n    'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n}\">unfold_more</igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddText : rowEditText ? rowEditText : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActions ? rowEditActions : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon>drag_indicator</igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n"
                 },] }
     ];
     IgxGridComponent.propDecorators = {
@@ -69721,6 +70001,7 @@
         groupingExpressions: [{ type: i0.Input }],
         groupingExpansionState: [{ type: i0.Input }],
         hideGroupedColumns: [{ type: i0.Input }],
+        groupStrategy: [{ type: i0.Input }],
         dropAreaMessage: [{ type: i0.Input }],
         showGroupArea: [{ type: i0.Input }]
     };
@@ -71459,7 +71740,7 @@
         function IgxGridGroupingPipe(gridAPI) {
             this.gridAPI = gridAPI;
         }
-        IgxGridGroupingPipe.prototype.transform = function (collection, expression, expansion, defaultExpanded, id, groupsRecords, _pipeTrigger) {
+        IgxGridGroupingPipe.prototype.transform = function (collection, expression, expansion, groupingStrategy, defaultExpanded, id, groupsRecords, _pipeTrigger) {
             var state = { expressions: [], expansion: [], defaultExpanded: defaultExpanded };
             var grid = this.gridAPI.grid;
             state.expressions = grid.groupingExpressions;
@@ -71476,7 +71757,7 @@
             else {
                 state.expansion = grid.groupingExpansionState;
                 state.defaultExpanded = grid.groupsExpanded;
-                result = DataUtil.group(cloneArray(collection), state, grid, groupsRecords, fullResult);
+                result = DataUtil.group(cloneArray(collection), state, groupingStrategy, grid, groupsRecords, fullResult);
             }
             grid.groupingFlatResult = result.data;
             grid.groupingResult = fullResult.data;
@@ -81799,6 +82080,16 @@
              * @hidden
              */
             _this.isVisibleChange = new i0.EventEmitter();
+            _this._position = 'bottom';
+            _this._positionSettings = {
+                horizontalDirection: exports.HorizontalAlignment.Center,
+                verticalDirection: exports.VerticalAlignment.Bottom,
+                openAnimation: i1.useAnimation(fadeIn),
+                closeAnimation: i1.useAnimation(fadeOut),
+            };
+            return _this;
+        }
+        Object.defineProperty(IgxToastComponent.prototype, "position", {
             /**
              * Sets/gets the position of the toast.
              * If not set, the `position` attribute will have value `IgxToastPosition.Bottom`.
@@ -81811,19 +82102,18 @@
              *
              * @memberof IgxToastComponent
              */
-            _this.position = 'bottom';
-            _this._positionSettings = {
-                horizontalDirection: exports.HorizontalAlignment.Center,
-                verticalDirection: _this.position === 'bottom'
-                    ? exports.VerticalAlignment.Bottom
-                    : _this.position === 'middle'
-                        ? exports.VerticalAlignment.Middle
-                        : exports.VerticalAlignment.Top,
-                openAnimation: i1.useAnimation(fadeIn),
-                closeAnimation: i1.useAnimation(fadeOut),
-            };
-            return _this;
-        }
+            get: function () {
+                return this._position;
+            },
+            set: function (position) {
+                if (position) {
+                    this._position = position;
+                    this._positionSettings.verticalDirection = this.calculatePosition();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgxToastComponent.prototype, "positionSettings", {
             /**
              * Get the position and animation settings used by the toast.
@@ -81884,10 +82174,13 @@
          * this.toast.open();
          * ```
          */
-        IgxToastComponent.prototype.open = function (message) {
+        IgxToastComponent.prototype.open = function (message, settings) {
             if (message !== undefined) {
                 this.textMessage = message;
             }
+            if (settings !== undefined) {
+                this.positionSettings = settings;
+            }
             this.strategy = new GlobalPositionStrategy(this.positionSettings);
             _super.prototype.open.call(this);
         };
@@ -81920,6 +82213,18 @@
                 _this.isVisibleChange.emit(closedEventArgs);
             });
         };
+        IgxToastComponent.prototype.ngOnChanges = function (changes) {
+            if (changes['position'] && this._positionSettings) {
+                this._positionSettings.verticalDirection = this.calculatePosition();
+            }
+        };
+        IgxToastComponent.prototype.calculatePosition = function () {
+            return this.position === 'bottom'
+                ? exports.VerticalAlignment.Bottom
+                : this.position === 'middle'
+                    ? exports.VerticalAlignment.Middle
+                    : exports.VerticalAlignment.Top;
+        };
         return IgxToastComponent;
     }(IgxNotificationsDirective));
     IgxToastComponent.decorators = [
@@ -81942,6 +82247,9 @@
         position: [{ type: i0.Input }],
         positionSettings: [{ type: i0.Input }]
     };
+    __decorate([
+        DeprecateProperty('`position` is deprecated. We suggest using `positionSettings` property instead.')
+    ], IgxToastComponent.prototype, "position", null);
     /**
      * @hidden
      */
@@ -85985,6 +86293,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;
@@ -86211,172 +86521,173 @@
     exports.ɵbk = IgxCarouselIndicatorDirective;
     exports.ɵbl = IgxCarouselNextButtonDirective;
     exports.ɵbm = IgxCarouselPrevButtonDirective;
-    exports.ɵbn = IgxComboAPIService;
-    exports.ɵbo = IGX_COMBO_COMPONENT;
-    exports.ɵbq = IgxComboDropDownComponent;
-    exports.ɵbr = IgxComboItemComponent;
-    exports.ɵbs = IgxComboHeaderDirective;
-    exports.ɵbt = IgxComboFooterDirective;
-    exports.ɵbu = IgxComboItemDirective;
-    exports.ɵbv = IgxComboEmptyDirective;
-    exports.ɵbw = IgxComboHeaderItemDirective;
-    exports.ɵbx = IgxComboAddItemDirective;
-    exports.ɵby = IgxComboToggleIconDirective;
-    exports.ɵbz = IgxComboClearIconDirective;
-    exports.ɵca = IgxComboFilteringPipe;
-    exports.ɵcb = IgxComboGroupingPipe;
-    exports.ɵcc = IgxComboAddItemComponent;
-    exports.ɵcd = PickerBaseDirective;
-    exports.ɵce = IgxCalendarContainerComponent;
-    exports.ɵcf = IgxCalendarContainerModule;
-    exports.ɵcg = IgxDialogTitleDirective;
-    exports.ɵch = IgxDialogActionsDirective;
-    exports.ɵci = IgxCellCrudState;
-    exports.ɵcj = IgxRowCrudState;
-    exports.ɵck = IgxRowAddCrudState;
-    exports.ɵcl = IgxGridCRUDService;
-    exports.ɵcm = IgxColumnMovingService;
-    exports.ɵcn = IgxExcelStyleCustomDialogComponent;
-    exports.ɵco = IgxExcelStyleDefaultExpressionComponent;
-    exports.ɵcp = IgxExcelStyleDateExpressionComponent;
-    exports.ɵcq = HammerGesturesManager;
-    exports.ɵcr = WatchChanges;
-    exports.ɵcs = WatchColumnChanges;
-    exports.ɵct = notifyChanges;
-    exports.ɵcu = IgxNotificationsDirective;
-    exports.ɵcv = IgxGridColumnResizerComponent;
-    exports.ɵcw = IgxColumnResizerDirective;
-    exports.ɵcx = IgxColumnResizingService;
-    exports.ɵcy = IgxRowSelectorDirective;
-    exports.ɵcz = IgxGroupByRowSelectorDirective;
+    exports.ɵbn = IGX_COMBO_COMPONENT;
+    exports.ɵbp = IgxComboBaseDirective;
+    exports.ɵbq = IgxComboHeaderDirective;
+    exports.ɵbr = IgxComboFooterDirective;
+    exports.ɵbs = IgxComboItemDirective;
+    exports.ɵbt = IgxComboEmptyDirective;
+    exports.ɵbu = IgxComboHeaderItemDirective;
+    exports.ɵbv = IgxComboAddItemDirective;
+    exports.ɵbw = IgxComboToggleIconDirective;
+    exports.ɵbx = IgxComboClearIconDirective;
+    exports.ɵby = IgxComboAPIService;
+    exports.ɵbz = IgxComboDropDownComponent;
+    exports.ɵca = IgxComboItemComponent;
+    exports.ɵcb = IgxComboFilteringPipe;
+    exports.ɵcc = IgxComboGroupingPipe;
+    exports.ɵcd = IgxComboAddItemComponent;
+    exports.ɵce = PickerBaseDirective;
+    exports.ɵcf = IgxCalendarContainerComponent;
+    exports.ɵcg = IgxCalendarContainerModule;
+    exports.ɵch = IgxDialogTitleDirective;
+    exports.ɵci = IgxDialogActionsDirective;
+    exports.ɵcj = IgxCellCrudState;
+    exports.ɵck = IgxRowCrudState;
+    exports.ɵcl = IgxRowAddCrudState;
+    exports.ɵcm = IgxGridCRUDService;
+    exports.ɵcn = IgxColumnMovingService;
+    exports.ɵco = IgxExcelStyleCustomDialogComponent;
+    exports.ɵcp = IgxExcelStyleDefaultExpressionComponent;
+    exports.ɵcq = IgxExcelStyleDateExpressionComponent;
+    exports.ɵcr = HammerGesturesManager;
+    exports.ɵcs = WatchChanges;
+    exports.ɵct = WatchColumnChanges;
+    exports.ɵcu = notifyChanges;
+    exports.ɵcv = IgxNotificationsDirective;
+    exports.ɵcw = IgxGridColumnResizerComponent;
+    exports.ɵcx = IgxColumnResizerDirective;
+    exports.ɵcy = IgxColumnResizingService;
+    exports.ɵcz = IgxRowSelectorDirective;
     exports.ɵd = IgxGridSelectionService;
-    exports.ɵda = IgxHeadSelectorDirective;
-    exports.ɵdb = IgxRowDragDirective;
-    exports.ɵdc = IgxDragIndicatorIconDirective;
-    exports.ɵdd = IgxRowDragGhostDirective;
-    exports.ɵde = IgxRowDragModule;
-    exports.ɵdf = IgxGridHeaderRowComponent;
-    exports.ɵdg = IgxGridHeaderGroupComponent;
-    exports.ɵdh = IgxGridHeaderComponent;
-    exports.ɵdi = IgxGridFilteringCellComponent;
-    exports.ɵdj = IgxFilteringService;
-    exports.ɵdk = IgxGridFilteringRowComponent;
-    exports.ɵdl = IgxGridGroupByAreaComponent;
-    exports.ɵdm = IgxGroupByAreaDirective;
-    exports.ɵdn = IgxGroupByMetaPipe;
-    exports.ɵdo = IgxTemplateOutletDirective;
-    exports.ɵdp = IgxTemplateOutletModule;
-    exports.ɵdq = IgxRowEditTemplateDirective;
-    exports.ɵdr = IgxRowEditTextDirective;
-    exports.ɵds = IgxRowAddTextDirective;
-    exports.ɵdt = IgxRowEditActionsDirective;
-    exports.ɵdu = IgxRowEditTabStopDirective;
-    exports.ɵdv = IgxSummaryRowComponent;
-    exports.ɵdw = IgxSummaryCellComponent;
-    exports.ɵdx = IgxRowDirective;
-    exports.ɵdy = IgxGridNavigationService;
-    exports.ɵdz = IgxGridSummaryService;
-    exports.ɵea = ConnectedPositioningStrategy;
-    exports.ɵeb = IgxGridGroupByRowComponent;
-    exports.ɵec = IgxTreeGridSelectionService;
-    exports.ɵed = IgxTreeGridGroupByAreaComponent;
-    exports.ɵee = IgxRowLoadingIndicatorTemplateDirective;
-    exports.ɵef = IgxHierarchicalGridNavigationService;
-    exports.ɵeg = IgxChildGridRowComponent;
-    exports.ɵeh = IgxGridCellComponent;
-    exports.ɵei = IgxGridFooterComponent;
-    exports.ɵej = IgxAdvancedFilteringDialogComponent;
-    exports.ɵek = IgxColumnHidingDirective;
-    exports.ɵel = IgxColumnPinningDirective;
-    exports.ɵem = IgxGridSharedModules;
-    exports.ɵen = IgxProcessBarTextTemplateDirective;
-    exports.ɵeo = IgxProgressBarGradientDirective;
-    exports.ɵep = DIR_DOCUMENT_FACTORY;
-    exports.ɵeq = DIR_DOCUMENT;
-    exports.ɵer = IgxDirectionality;
-    exports.ɵes = IgxSelectItemNavigationDirective;
-    exports.ɵet = IGX_TIME_PICKER_COMPONENT;
-    exports.ɵev = IgxItemListDirective;
-    exports.ɵew = IgxTimeItemDirective;
-    exports.ɵex = IgxTimePickerTemplateDirective;
-    exports.ɵey = IgxTimePickerActionsDirective;
-    exports.ɵez = TimeFormatPipe;
+    exports.ɵda = IgxGroupByRowSelectorDirective;
+    exports.ɵdb = IgxHeadSelectorDirective;
+    exports.ɵdc = IgxRowDragDirective;
+    exports.ɵdd = IgxDragIndicatorIconDirective;
+    exports.ɵde = IgxRowDragGhostDirective;
+    exports.ɵdf = IgxRowDragModule;
+    exports.ɵdg = IgxGridHeaderRowComponent;
+    exports.ɵdh = IgxGridHeaderGroupComponent;
+    exports.ɵdi = IgxGridHeaderComponent;
+    exports.ɵdj = IgxGridFilteringCellComponent;
+    exports.ɵdk = IgxFilteringService;
+    exports.ɵdl = IgxGridFilteringRowComponent;
+    exports.ɵdm = IgxGridGroupByAreaComponent;
+    exports.ɵdn = IgxGroupByAreaDirective;
+    exports.ɵdo = IgxGroupByMetaPipe;
+    exports.ɵdp = IgxTemplateOutletDirective;
+    exports.ɵdq = IgxTemplateOutletModule;
+    exports.ɵdr = IgxRowEditTemplateDirective;
+    exports.ɵds = IgxRowEditTextDirective;
+    exports.ɵdt = IgxRowAddTextDirective;
+    exports.ɵdu = IgxRowEditActionsDirective;
+    exports.ɵdv = IgxRowEditTabStopDirective;
+    exports.ɵdw = IgxSummaryRowComponent;
+    exports.ɵdx = IgxSummaryCellComponent;
+    exports.ɵdy = IgxRowDirective;
+    exports.ɵdz = IgxGridNavigationService;
+    exports.ɵea = IgxGridSummaryService;
+    exports.ɵeb = ConnectedPositioningStrategy;
+    exports.ɵec = IgxGridGroupByRowComponent;
+    exports.ɵed = IgxTreeGridSelectionService;
+    exports.ɵee = IgxTreeGridGroupByAreaComponent;
+    exports.ɵef = IgxRowLoadingIndicatorTemplateDirective;
+    exports.ɵeg = IgxHierarchicalGridNavigationService;
+    exports.ɵeh = IgxChildGridRowComponent;
+    exports.ɵei = IgxGridCellComponent;
+    exports.ɵej = IgxGridFooterComponent;
+    exports.ɵek = IgxAdvancedFilteringDialogComponent;
+    exports.ɵel = IgxColumnHidingDirective;
+    exports.ɵem = IgxColumnPinningDirective;
+    exports.ɵen = IgxGridSharedModules;
+    exports.ɵeo = IgxProcessBarTextTemplateDirective;
+    exports.ɵep = IgxProgressBarGradientDirective;
+    exports.ɵeq = DIR_DOCUMENT_FACTORY;
+    exports.ɵer = DIR_DOCUMENT;
+    exports.ɵes = IgxDirectionality;
+    exports.ɵet = IgxSelectItemNavigationDirective;
+    exports.ɵeu = IGX_TIME_PICKER_COMPONENT;
+    exports.ɵew = IgxItemListDirective;
+    exports.ɵex = IgxTimeItemDirective;
+    exports.ɵey = IgxTimePickerTemplateDirective;
+    exports.ɵez = IgxTimePickerActionsDirective;
     exports.ɵf = IGX_EXPANSION_PANEL_COMPONENT;
-    exports.ɵfa = TimeItemPipe;
-    exports.ɵfb = IgxGridPipesModule;
-    exports.ɵfc = IgxGridCellStyleClassesPipe;
-    exports.ɵfd = IgxGridCellStylesPipe;
-    exports.ɵfe = IgxGridRowClassesPipe;
-    exports.ɵff = IgxGridRowStylesPipe;
-    exports.ɵfg = IgxGridNotGroupedPipe;
-    exports.ɵfh = IgxGridTopLevelColumns;
-    exports.ɵfi = IgxGridFilterConditionPipe;
-    exports.ɵfj = IgxGridTransactionPipe;
-    exports.ɵfk = IgxGridPaginatorOptionsPipe;
-    exports.ɵfl = IgxHasVisibleColumnsPipe;
-    exports.ɵfm = IgxGridRowPinningPipe;
-    exports.ɵfn = IgxColumnActionEnabledPipe;
-    exports.ɵfo = IgxFilterActionColumnsPipe;
-    exports.ɵfp = IgxSortActionColumnsPipe;
-    exports.ɵfq = IgxGridDataMapperPipe;
-    exports.ɵfr = IgxStringReplacePipe;
-    exports.ɵfs = IgxGridTransactionStatePipe;
-    exports.ɵft = IgxColumnFormatterPipe;
-    exports.ɵfu = IgxSummaryFormatterPipe;
-    exports.ɵfv = IgxGridAddRowPipe;
-    exports.ɵfw = IgxHeaderGroupWidthPipe;
-    exports.ɵfx = IgxHeaderGroupStylePipe;
-    exports.ɵfy = IgxGridColumnModule;
-    exports.ɵfz = IgxGridHeadersModule;
+    exports.ɵfa = TimeFormatPipe;
+    exports.ɵfb = TimeItemPipe;
+    exports.ɵfc = IgxGridPipesModule;
+    exports.ɵfd = IgxGridCellStyleClassesPipe;
+    exports.ɵfe = IgxGridCellStylesPipe;
+    exports.ɵff = IgxGridRowClassesPipe;
+    exports.ɵfg = IgxGridRowStylesPipe;
+    exports.ɵfh = IgxGridNotGroupedPipe;
+    exports.ɵfi = IgxGridTopLevelColumns;
+    exports.ɵfj = IgxGridFilterConditionPipe;
+    exports.ɵfk = IgxGridTransactionPipe;
+    exports.ɵfl = IgxGridPaginatorOptionsPipe;
+    exports.ɵfm = IgxHasVisibleColumnsPipe;
+    exports.ɵfn = IgxGridRowPinningPipe;
+    exports.ɵfo = IgxColumnActionEnabledPipe;
+    exports.ɵfp = IgxFilterActionColumnsPipe;
+    exports.ɵfq = IgxSortActionColumnsPipe;
+    exports.ɵfr = IgxGridDataMapperPipe;
+    exports.ɵfs = IgxStringReplacePipe;
+    exports.ɵft = IgxGridTransactionStatePipe;
+    exports.ɵfu = IgxColumnFormatterPipe;
+    exports.ɵfv = IgxSummaryFormatterPipe;
+    exports.ɵfw = IgxGridAddRowPipe;
+    exports.ɵfx = IgxHeaderGroupWidthPipe;
+    exports.ɵfy = IgxHeaderGroupStylePipe;
+    exports.ɵfz = IgxGridColumnModule;
     exports.ɵg = IGX_TREE_COMPONENT;
-    exports.ɵga = SortingIndexPipe;
-    exports.ɵgb = IgxGridFilteringModule;
-    exports.ɵgc = IgxColumnMovingModule;
-    exports.ɵgd = IgxColumnMovingDropDirective;
-    exports.ɵge = IgxColumnMovingDragDirective;
-    exports.ɵgf = IgxGridResizingModule;
-    exports.ɵgg = IgxResizeHandleDirective;
-    exports.ɵgh = IgxGridExcelStyleFilteringModule;
-    exports.ɵgi = IgxGridSelectionModule;
-    exports.ɵgj = IgxGridDragSelectDirective;
-    exports.ɵgk = IgxGridSummaryModule;
-    exports.ɵgl = IgxSummaryDataPipe;
-    exports.ɵgm = IgxGridToolbarModule;
-    exports.ɵgn = BaseToolbarDirective;
-    exports.ɵgo = BaseToolbarColumnActionsDirective;
-    exports.ɵgp = IgxGridRowComponent;
-    exports.ɵgq = IgxGridSortingPipe;
-    exports.ɵgr = IgxGridGroupingPipe;
-    exports.ɵgs = IgxGridPagingPipe;
-    exports.ɵgt = IgxGridFilteringPipe;
-    exports.ɵgu = IgxGridSummaryPipe;
-    exports.ɵgv = IgxGridDetailsPipe;
-    exports.ɵgw = IgxGridExpandableCellComponent;
-    exports.ɵgx = IgxTreeGridRowComponent;
-    exports.ɵgy = IgxTreeGridCellComponent;
-    exports.ɵgz = IgxTreeGridHierarchizingPipe;
+    exports.ɵga = IgxGridHeadersModule;
+    exports.ɵgb = SortingIndexPipe;
+    exports.ɵgc = IgxGridFilteringModule;
+    exports.ɵgd = IgxColumnMovingModule;
+    exports.ɵge = IgxColumnMovingDropDirective;
+    exports.ɵgf = IgxColumnMovingDragDirective;
+    exports.ɵgg = IgxGridResizingModule;
+    exports.ɵgh = IgxResizeHandleDirective;
+    exports.ɵgi = IgxGridExcelStyleFilteringModule;
+    exports.ɵgj = IgxGridSelectionModule;
+    exports.ɵgk = IgxGridDragSelectDirective;
+    exports.ɵgl = IgxGridSummaryModule;
+    exports.ɵgm = IgxSummaryDataPipe;
+    exports.ɵgn = IgxGridToolbarModule;
+    exports.ɵgo = BaseToolbarDirective;
+    exports.ɵgp = BaseToolbarColumnActionsDirective;
+    exports.ɵgq = IgxGridRowComponent;
+    exports.ɵgr = IgxGridSortingPipe;
+    exports.ɵgs = IgxGridGroupingPipe;
+    exports.ɵgt = IgxGridPagingPipe;
+    exports.ɵgu = IgxGridFilteringPipe;
+    exports.ɵgv = IgxGridSummaryPipe;
+    exports.ɵgw = IgxGridDetailsPipe;
+    exports.ɵgx = IgxGridExpandableCellComponent;
+    exports.ɵgy = IgxTreeGridRowComponent;
+    exports.ɵgz = IgxTreeGridCellComponent;
     exports.ɵh = IGX_TREE_NODE_COMPONENT;
-    exports.ɵha = IgxTreeGridFlatteningPipe;
-    exports.ɵhb = IgxTreeGridSortingPipe;
-    exports.ɵhc = IgxTreeGridPagingPipe;
-    exports.ɵhd = IgxTreeGridTransactionPipe;
-    exports.ɵhe = IgxTreeGridNormalizeRecordsPipe;
-    exports.ɵhf = IgxTreeGridAddRowPipe;
-    exports.ɵhg = IgxTreeGridFilteringPipe;
-    exports.ɵhh = IgxTreeGridSummaryPipe;
-    exports.ɵhi = IgxHierarchicalRowComponent;
-    exports.ɵhj = IgxHierarchicalGridCellComponent;
-    exports.ɵhk = IgxSliderThumbComponent;
-    exports.ɵhl = IgxThumbLabelComponent;
-    exports.ɵhm = IgxTicksComponent;
-    exports.ɵhn = IgxTickLabelsPipe;
-    exports.ɵho = IgxTabsBase;
-    exports.ɵhp = IgxTabHeaderBase;
-    exports.ɵhq = IgxTabContentBase;
-    exports.ɵhr = IgxSplitBarComponent;
-    exports.ɵhs = IgxTreeService;
-    exports.ɵht = IgxTreeSelectionService;
-    exports.ɵhu = IgxTreeNavigationService;
+    exports.ɵha = IgxTreeGridHierarchizingPipe;
+    exports.ɵhb = IgxTreeGridFlatteningPipe;
+    exports.ɵhc = IgxTreeGridSortingPipe;
+    exports.ɵhd = IgxTreeGridPagingPipe;
+    exports.ɵhe = IgxTreeGridTransactionPipe;
+    exports.ɵhf = IgxTreeGridNormalizeRecordsPipe;
+    exports.ɵhg = IgxTreeGridAddRowPipe;
+    exports.ɵhh = IgxTreeGridFilteringPipe;
+    exports.ɵhi = IgxTreeGridSummaryPipe;
+    exports.ɵhj = IgxHierarchicalRowComponent;
+    exports.ɵhk = IgxHierarchicalGridCellComponent;
+    exports.ɵhl = IgxSliderThumbComponent;
+    exports.ɵhm = IgxThumbLabelComponent;
+    exports.ɵhn = IgxTicksComponent;
+    exports.ɵho = IgxTickLabelsPipe;
+    exports.ɵhp = IgxTabsBase;
+    exports.ɵhq = IgxTabHeaderBase;
+    exports.ɵhr = IgxTabContentBase;
+    exports.ɵhs = IgxSplitBarComponent;
+    exports.ɵht = IgxTreeService;
+    exports.ɵhu = IgxTreeSelectionService;
+    exports.ɵhv = IgxTreeNavigationService;
     exports.ɵi = PlatformUtil;
     exports.ɵl = IgxInputGroupBase;
     exports.ɵm = IgxSelectionAPIService;