igniteui-angular 12.2.4 → 12.3.0-alpha.0

package/fesm2015/igniteui-angular.js

@@ -2064,8 +2064,7 @@ class DataUtil {
         };
         return rec;
     }
-    static group(data, state, grid = null, groupsRecords = [], fullResult = { data: [], metadata: [] }) {
-        const grouping = new IgxGrouping();
+    static group(data, state, grouping = new IgxGrouping(), grid = null, groupsRecords = [], fullResult = { data: [], metadata: [] }) {
         groupsRecords.splice(0, groupsRecords.length);
         return grouping.groupBy(data, state, grid, groupsRecords, fullResult);
     }
@@ -11752,7 +11751,7 @@ class IgxBaseExporter {
             }
             if (hasGrouping && !this.options.ignoreGrouping) {
                 const groupsRecords = [];
-                DataUtil.group(cloneArray(gridData), groupedGridGroupingState, grid, groupsRecords);
+                DataUtil.group(cloneArray(gridData), groupedGridGroupingState, grid.groupStrategy, grid, groupsRecords);
                 gridData = groupsRecords;
             }
             if (hasGrouping && !this.options.ignoreGrouping) {
@@ -34953,10 +34952,10 @@ class IgxComboAPIService {
             return;
         }
         if (!selected) {
-            this.combo.selectItems([itemID], false, event);
+            this.combo.select([itemID], false, event);
         }
         else {
-            this.combo.deselectItems([itemID], event);
+            this.combo.deselect([itemID], event);
         }
     }
     is_item_selected(itemID) {
@@ -35054,7 +35053,7 @@ class IgxComboItemComponent extends IgxDropDownItemComponent {
 IgxComboItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'igx-combo-item',
-                template: "<ng-container *ngIf=\"!isHeader\">\n    <igx-checkbox [checked]=\"selected\" [disableRipple]=\"true\" [disableTransitions]=\"disableTransitions\" [tabindex]=\"-1\" (click)=\"disableCheck($event)\" class=\"igx-combo__checkbox\"></igx-checkbox>\n</ng-container>\n<span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n"
+                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 = () => [
@@ -35064,311 +35063,25 @@ IgxComboItemComponent.ctorParameters = () => [
     { type: IgxSelectionAPIService, decorators: [{ type: Inject, args: [IgxSelectionAPIService,] }] }
 ];
 IgxComboItemComponent.propDecorators = {
-    itemHeight: [{ type: Input }, { type: HostBinding, args: ['style.height.px',] }]
+    itemHeight: [{ type: Input }, { type: HostBinding, args: ['style.height.px',] }],
+    singleMode: [{ type: Input }]
 };
 
 const IGX_COMBO_COMPONENT = new InjectionToken('IgxComboComponentToken');
-
+let 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
  */
-class IgxComboAddItemComponent extends IgxComboItemComponent {
-    get selected() {
-        return false;
-    }
-    set selected(value) {
-    }
-    /**
-     * @inheritdoc
-     */
-    clicked(event) {
-        this.comboAPI.disableTransitions = false;
-        this.comboAPI.add_custom_item();
-    }
-}
-IgxComboAddItemComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'igx-combo-add-item',
-                template: '<ng-content></ng-content>',
-                providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }]
-            },] }
-];
-
-/** @hidden */
-class IgxComboDropDownComponent extends IgxDropDownComponent {
-    constructor(elementRef, cdr, platform, selection, combo, comboAPI, _displayDensityOptions) {
-        super(elementRef, cdr, platform, selection, _displayDensityOptions);
-        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 = () => {
-            this.comboAPI.disableTransitions = true;
-        };
-    }
-    /** @hidden @internal */
-    get scrollContainer() {
-        return this.virtDir.dc.location.nativeElement;
-    }
-    get isScrolledToLast() {
-        const scrollTop = this.virtDir.scrollPosition;
-        const scrollHeight = this.virtDir.getScroll().scrollHeight;
-        return Math.floor(scrollTop + this.virtDir.igxForContainerSize) === scrollHeight;
-    }
-    get lastVisibleIndex() {
-        return this.combo.totalItemCount ?
-            Math.floor(this.combo.itemsMaxHeight / this.combo.itemHeight) :
-            this.items.length - 1;
-    }
-    get sortedChildren() {
-        if (this.children !== undefined) {
-            return this.children.toArray()
-                .sort((a, b) => a.index - b.index);
-        }
-        return null;
-    }
-    /**
-     * Get all non-header items
-     *
-     * ```typescript
-     * let myDropDownItems = this.dropdown.items;
-     * ```
-     */
-    get items() {
-        const items = [];
-        if (this.children !== undefined) {
-            const sortedChildren = this.sortedChildren;
-            for (const child of sortedChildren) {
-                if (!child.isHeader) {
-                    items.push(child);
-                }
-            }
-        }
-        return items;
-    }
-    /**
-     * @hidden @internal
-     */
-    onFocus() {
-        this.focusedItem = this._focusedItem || this.items[0];
-    }
-    /**
-     * @hidden @internal
-     */
-    onBlur(_evt) {
-        this.focusedItem = null;
-    }
-    /**
-     * @hidden @internal
-     */
-    onToggleOpened() {
-        this.opened.emit();
-    }
-    /**
-     * @hidden
-     */
-    navigateFirst() {
-        this.navigateItem(this.virtDir.igxForOf.findIndex(e => !e.isHeader));
-    }
-    /**
-     * @hidden
-     */
-    navigatePrev() {
-        if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
-            this.combo.focusSearchInput(false);
-        }
-        else {
-            super.navigatePrev();
-        }
-    }
-    /**
-     * @hidden
-     */
-    navigateNext() {
-        const lastIndex = this.combo.totalItemCount ? this.combo.totalItemCount - 1 : this.virtDir.igxForOf.length - 1;
-        if (this._focusedItem && this._focusedItem.index === lastIndex) {
-            this.focusAddItemButton();
-        }
-        else {
-            super.navigateNext();
-        }
-    }
-    /**
-     * @hidden @internal
-     */
-    selectItem(item) {
-        if (item === null || item === undefined) {
-            return;
-        }
-        this.comboAPI.set_selected_item(item.itemID);
-        this._focusedItem = item;
-    }
-    /**
-     * @hidden @internal
-     */
-    updateScrollPosition() {
-        this.virtDir.getScroll().scrollTop = this._scrollPosition;
-    }
-    /**
-     * @hidden @internal
-     */
-    onItemActionKey(key) {
-        switch (key) {
-            case DropDownActionKey.ENTER:
-                this.handleEnter();
-                break;
-            case DropDownActionKey.SPACE:
-                this.handleSpace();
-                break;
-            case DropDownActionKey.ESCAPE:
-                this.close();
-        }
-    }
-    ngAfterViewInit() {
-        this.virtDir.getScroll().addEventListener('scroll', this.scrollHandler);
-    }
-    /**
-     * @hidden @internal
-     */
-    ngOnDestroy() {
-        this.virtDir.getScroll().removeEventListener('scroll', this.scrollHandler);
-        this.destroy$.next(true);
-        this.destroy$.complete();
-    }
-    scrollToHiddenItem(_newItem) { }
-    handleEnter() {
-        if (this.isAddItemFocused()) {
-            this.combo.addItemToCollection();
-        }
-        else {
-            this.close();
-        }
-    }
-    handleSpace() {
-        if (this.isAddItemFocused()) {
-            return;
-        }
-        else {
-            this.selectItem(this.focusedItem);
-        }
-    }
-    isAddItemFocused() {
-        return this.focusedItem instanceof IgxComboAddItemComponent;
-    }
-    focusAddItemButton() {
-        if (this.combo.isAddButtonVisible()) {
-            this.focusedItem = this.items[this.items.length - 1];
-        }
-    }
-}
-IgxComboDropDownComponent.decorators = [
-    { type: 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 = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: PlatformUtil },
-    { type: IgxSelectionAPIService },
-    { type: undefined, decorators: [{ type: Inject, args: [IGX_COMBO_COMPONENT,] }] },
-    { type: IgxComboAPIService },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DisplayDensityToken,] }] }
-];
-IgxComboDropDownComponent.propDecorators = {
-    children: [{ type: ContentChildren, args: [IgxComboItemComponent, { descendants: true },] }]
+const itemsInContainer = 10; // TODO: make private readonly
+/** @hidden @internal */
+const ItemHeights = {
+    comfortable: 40,
+    cosy: 32,
+    compact: 28,
 };
-
-/**
- * @hidden
- */
-class IgxComboFilteringPipe {
-    transform(collection, searchValue, displayKey, shouldFilter, filteringOptions) {
-        if (!collection) {
-            return [];
-        }
-        if (!searchValue || !shouldFilter) {
-            return collection;
-        }
-        else {
-            const searchTerm = filteringOptions.caseSensitive ? searchValue.trim() : searchValue.toLowerCase().trim();
-            if (displayKey != null) {
-                return collection.filter(e => filteringOptions.caseSensitive ? e[displayKey].includes(searchTerm) :
-                    e[displayKey].toString().toLowerCase().includes(searchTerm));
-            }
-            else {
-                return collection.filter(e => filteringOptions.caseSensitive ? e.includes(searchTerm) :
-                    e.toLowerCase().includes(searchTerm));
-            }
-        }
-    }
-}
-IgxComboFilteringPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'comboFiltering'
-            },] }
-];
-/**
- * @hidden
- */
-class IgxComboGroupingPipe {
-    constructor(combo) {
-        this.combo = combo;
-    }
-    transform(collection, groupKey, valueKey) {
-        this.combo.filteredData = collection;
-        if ((!groupKey && groupKey !== 0) || !collection.length) {
-            return collection;
-        }
-        const sorted = DataUtil.sort(cloneArray(collection), [{
-                fieldName: groupKey,
-                dir: SortingDirection.Asc,
-                ignoreCase: true,
-                strategy: DefaultSortingStrategy.instance()
-            }]);
-        const data = cloneArray(sorted);
-        let inserts = 0;
-        let currentHeader = null;
-        for (let i = 0; i < sorted.length; i++) {
-            let insertFlag = 0;
-            if (currentHeader !== sorted[i][groupKey]) {
-                currentHeader = sorted[i][groupKey];
-                insertFlag = 1;
-            }
-            if (insertFlag) {
-                data.splice(i + inserts, 0, {
-                    [valueKey]: currentHeader,
-                    [groupKey]: currentHeader,
-                    isHeader: true
-                });
-                inserts++;
-            }
-        }
-        return data;
-    }
-}
-IgxComboGroupingPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'comboGrouping'
-            },] }
-];
-IgxComboGroupingPipe.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [IGX_COMBO_COMPONENT,] }] }
-];
-
-/**
- * @hidden
- */
+/** @hidden @internal */
 var DataTypes;
 (function (DataTypes) {
     DataTypes["EMPTY"] = "empty";
@@ -35376,20 +35089,6 @@ var DataTypes;
     DataTypes["COMPLEX"] = "complex";
     DataTypes["PRIMARYKEY"] = "valueKey";
 })(DataTypes || (DataTypes = {}));
-/**
- * @hidden
- */
-const ItemHeights = {
-    comfortable: 40,
-    cosy: 32,
-    compact: 28,
-};
-/**
- * @hidden
- * The default number of items that should be in the combo's
- * drop-down list if no `[itemsMaxHeight]` is specified
- */
-const itemsInContainer = 10;
 var IgxComboState;
 (function (IgxComboState) {
     /**
@@ -35405,47 +35104,12 @@ var IgxComboState;
      */
     IgxComboState[IgxComboState["INVALID"] = 2] = "INVALID";
 })(IgxComboState || (IgxComboState = {}));
-/**
- * When called with sets A & B, returns A - B (as array);
- *
- * @hidden
- */
-const diffInSets = (set1, set2) => {
-    const results = [];
-    set1.forEach(entry => {
-        if (!set2.has(entry)) {
-            results.push(entry);
-        }
-    });
-    return results;
-};
-const ɵ0$1 = diffInSets;
-let 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>
- * ```
- */
-class IgxComboComponent extends DisplayDensityBase {
-    constructor(elementRef, cdr, selection, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) {
+class IgxComboBaseDirective extends DisplayDensityBase {
+    constructor(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) {
         super(_displayDensityOptions);
         this.elementRef = elementRef;
         this.cdr = cdr;
-        this.selection = selection;
+        this.selectionService = selectionService;
         this.comboAPI = comboAPI;
         this._iconService = _iconService;
         this._displayDensityOptions = _displayDensityOptions;
@@ -35469,9 +35133,123 @@ class IgxComboComponent extends DisplayDensityBase {
          */
         this.overlaySettings = null;
         /**
-         * @hidden @internal
+         * Gets/gets combo id.
+         *
+         * ```typescript
+         * // get
+         * let id = this.combo.id;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [id]='combo1'></igx-combo>
+         * ```
          */
-        this.searchInput = null;
+        this.id = `igx-combo-${NEXT_ID$c++}`;
+        /**
+         * Controls whether custom values can be added to the collection
+         *
+         * ```typescript
+         * // get
+         * let comboAllowsCustomValues = this.combo.allowCustomValues;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [allowCustomValues]='true'></igx-combo>
+         * ```
+         */
+        this.allowCustomValues = false;
+        /**
+         * Determines which column in the data source is used to determine the value.
+         *
+         * ```typescript
+         * // get
+         * let myComboValueKey = this.combo.valueKey;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [valueKey]='myKey'></igx-combo>
+         * ```
+         */
+        this.valueKey = null;
+        /** @hidden @internal */
+        this.cssClass = 'igx-combo'; // Independent of display density for the time being
+        /** @hidden @internal */
+        this.role = 'combobox';
+        /**
+         * An @Input property that enabled/disables combo. The default is `false`.
+         * ```html
+         * <igx-combo [disabled]="'true'">
+         * ```
+         */
+        this.disabled = false;
+        /**
+         * Emitted when item selection is changing, before the selection completes
+         *
+         * ```html
+         * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
+         * ```
+         */
+        // TODO: any for old/new selection?
+        this.selectionChanging = new EventEmitter();
+        /**
+         * Emitted before the dropdown is opened
+         *
+         * ```html
+         * <igx-combo opening='handleOpening($event)'></igx-combo>
+         * ```
+         */
+        this.opening = new EventEmitter();
+        /**
+         * Emitted after the dropdown is opened
+         *
+         * ```html
+         * <igx-combo (opened)='handleOpened($event)'></igx-combo>
+         * ```
+         */
+        this.opened = new EventEmitter();
+        /**
+         * Emitted before the dropdown is closed
+         *
+         * ```html
+         * <igx-combo (closing)='handleClosing($event)'></igx-combo>
+         * ```
+         */
+        this.closing = new EventEmitter();
+        /**
+         * Emitted after the dropdown is closed
+         *
+         * ```html
+         * <igx-combo (closed)='handleClosed($event)'></igx-combo>
+         * ```
+         */
+        this.closed = new EventEmitter();
+        /**
+         * Emitted when an item is being added to the data collection
+         *
+         * ```html
+         * <igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
+         * ```
+         */
+        this.addition = new EventEmitter();
+        /**
+         * Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)
+         *
+         * ```html
+         * <igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
+         * ```
+         */
+        this.searchInputUpdate = new EventEmitter();
+        /**
+         * Emitted when new chunk of data is loaded from the virtualization
+         *
+         * ```html
+         * <igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
+         * ```
+         */
+        this.dataPreLoad = new EventEmitter();
         /**
          * The custom template, if any, that should be used when rendering ITEMS in the combo list
          *
@@ -35635,207 +35413,34 @@ class IgxComboComponent extends DisplayDensityBase {
          * ```
          */
         this.clearIconTemplate = null;
-        /**
-         * Emitted when item selection is changing, before the selection completes
-         *
-         * ```html
-         * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
-         * ```
-         */
-        this.selectionChanging = new EventEmitter();
-        /**
-         * Emitted before the dropdown is opened
-         *
-         * ```html
-         * <igx-combo opening='handleOpening($event)'></igx-combo>
-         * ```
-         */
-        this.opening = new EventEmitter();
-        /**
-         * Emitted after the dropdown is opened
-         *
-         * ```html
-         * <igx-combo (opened)='handleOpened($event)'></igx-combo>
-         * ```
-         */
-        this.opened = new EventEmitter();
-        /**
-         * Emitted before the dropdown is closed
-         *
-         * ```html
-         * <igx-combo (closing)='handleClosing($event)'></igx-combo>
-         * ```
-         */
-        this.closing = new EventEmitter();
-        /**
-         * Emitted after the dropdown is closed
-         *
-         * ```html
-         * <igx-combo (closed)='handleClosed($event)'></igx-combo>
-         * ```
-         */
-        this.closed = new EventEmitter();
-        /**
-         * Emitted when an item is being added to the data collection
-         *
-         * ```html
-         * <igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
-         * ```
-         */
-        this.addition = new EventEmitter();
-        /**
-         * Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)
-         *
-         * ```html
-         * <igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
-         * ```
-         */
-        this.searchInputUpdate = new EventEmitter();
-        /**
-         * Emitted when new chunk of data is loaded from the virtualization
-         *
-         * ```html
-         * <igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
-         * ```
-         */
-        this.dataPreLoad = new EventEmitter();
-        /**
-         * Gets/gets combo id.
-         *
-         * ```typescript
-         * // get
-         * let id = this.combo.id;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [id]='combo1'></igx-combo>
-         * ```
-         */
-        this.id = `igx-combo-${NEXT_ID$c++}`;
-        /**
-         * @hidden @internal
-         */
-        this.cssClass = 'igx-combo'; // Independent of display density, at the time being
-        /**
-         * @hidden @internal
-         */
-        this.role = 'combobox';
-        /**
-         * Controls whether custom values can be added to the collection
-         *
-         * ```typescript
-         * // get
-         * let comboAllowsCustomValues = this.combo.allowCustomValues;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [allowCustomValues]='true'></igx-combo>
-         * ```
-         */
-        this.allowCustomValues = false;
-        /**
-         * Defines the placeholder value for the combo dropdown search field
-         *
-         * ```typescript
-         * // get
-         * let myComboSearchPlaceholder = this.combo.searchPlaceholder;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
-         * ```
-         */
-        this.searchPlaceholder = 'Enter a Search Term';
-        /**
-         * Defines whether the caseSensitive icon should be shown in the search input
-         *
-         * ```typescript
-         * // get
-         * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
-         * ```
-         */
-        this.showSearchCaseIcon = false;
-        /**
-         * Combo value data source property.
-         *
-         * ```typescript
-         * // get
-         * let myComboValueKey = this.combo.valueKey;
-         * ```
-         *
-         * ```html
-         * <!--set-->
-         * <igx-combo [valueKey]='myKey'></igx-combo>
-         * ```
-         */
-        this.valueKey = null;
-        /**
-         * An @Input property that enabled/disables filtering in the list. The default is `true`.
-         * ```html
-         * <igx-combo [filterable]="false">
-         * ```
-         */
-        this.filterable = true;
-        /**
-         * An @Input property that enabled/disables combo. The default is `false`.
-         * ```html
-         * <igx-combo [disabled]="'true'">
-         * ```
-         */
-        this.disabled = false;
-        /**
-         * An @Input property that controls whether the combo's search box
-         * should be focused after the `opened` event is called
-         * When `false`, the combo's list item container will be focused instead
-         */
-        this.autoFocusSearch = true;
+        /** @hidden @internal */
+        this.searchInput = null;
         this.dropdownContainer = null;
-        /**
-         * @hidden @internal
-         */
+        /** @hidden @internal */
         this.customValueFlag = true;
-        /**
-         * @hidden @internal
-         */
+        /** @hidden @internal */
+        this.filterValue = '';
+        /** @hidden @internal */
         this.defaultFallbackGroup = 'Other';
-        /**
-         * @hidden @internal
-         */
+        /** @hidden @internal */
         this.filteringOptions = {
             caseSensitive: false
         };
-        /**
-         * @hidden @internal
-         */
-        this.filteringLogic = FilteringLogic.Or;
-        /** @hidden @internal */
-        this.filterValue = '';
-        this.stringFilters = IgxStringFilteringOperand;
-        this.booleanFilters = IgxBooleanFilteringOperand;
+        this._data = [];
+        this._value = '';
         this._groupKey = '';
-        this._prevInputValue = '';
-        this._dataType = '';
-        this._searchValue = '';
-        this._type = null;
+        this._filteredData = [];
+        this._remoteSelection = {};
+        this._valid = IgxComboState.INITIAL;
         this.ngControl = null;
         this.destroy$ = new Subject();
-        this._data = [];
-        this._filteredData = [];
+        this._onTouchedCallback = noop;
+        this._onChangeCallback = noop;
+        this._type = null;
+        this._dataType = '';
+        this._searchValue = '';
         this._itemHeight = null;
         this._itemsMaxHeight = null;
-        this._remoteSelection = {};
-        this._onChangeCallback = noop;
-        this._onTouchedCallback = noop;
-        this._value = '';
-        this._valid = IgxComboState.INITIAL;
         this.onStatusChanged = () => {
             if ((this.ngControl.control.touched || this.ngControl.control.dirty) &&
                 (this.ngControl.control.validator || this.ngControl.control.asyncValidator)) {
@@ -35852,31 +35457,10 @@ class IgxComboComponent extends DisplayDensityBase {
             }
             this.manageRequiredAsterisk();
         };
-        this.comboAPI.register(this);
-    }
-    /**
-     * @hidden @internal
-     */
-    get displaySearchInput() {
-        return this.filterable || this.allowCustomValues;
-    }
-    /**
-     * @hidden @internal
-     */
-    get ariaExpanded() {
-        return !this.dropdown.collapsed;
-    }
-    /**
-     * @hidden @internal
-     */
-    get hasPopUp() {
-        return 'listbox';
-    }
-    /**
-     * @hidden @internal
-     */
-    get ariaOwns() {
-        return this.dropdown.id;
+        this.findMatch = (element) => {
+            const value = this.displayKey ? element[this.displayKey] : element;
+            return value.toString().toLowerCase() === this.searchValue.trim().toLowerCase();
+        };
     }
     /**
      * Configures the drop down list height
@@ -35922,12 +35506,6 @@ class IgxComboComponent extends DisplayDensityBase {
     set itemHeight(val) {
         this._itemHeight = val;
     }
-    /**
-     * @hidden @internal
-     */
-    get inputEmpty() {
-        return !this.value && !this.placeholder;
-    }
     /**
      * Combo data source.
      *
@@ -35946,7 +35524,7 @@ class IgxComboComponent extends DisplayDensityBase {
         this._displayKey = val;
     }
     /**
-     * Combo text data source property.
+     * Determines which column in the data source is used to determine the display value.
      *
      * ```typescript
      * // get
@@ -35987,6 +35565,18 @@ class IgxComboComponent extends DisplayDensityBase {
     get groupKey() {
         return this._groupKey;
     }
+    /** @hidden @internal */
+    get ariaExpanded() {
+        return !this.dropdown.collapsed;
+    }
+    /** @hidden @internal */
+    get hasPopUp() {
+        return 'listbox';
+    }
+    /** @hidden @internal */
+    get ariaOwns() {
+        return this.dropdown.id;
+    }
     /**
      * An @Input property that sets how the combo will be styled.
      * The allowed values are `line`, `box`, `border` and `search`. The default is `box`.
@@ -36000,6 +35590,27 @@ class IgxComboComponent extends DisplayDensityBase {
     set type(val) {
         this._type = val;
     }
+    /** @hidden @internal */
+    get searchValue() {
+        return this._searchValue;
+    }
+    set searchValue(val) {
+        this.filterValue = val;
+        this._searchValue = val;
+    }
+    /** @hidden @internal */
+    get isRemote() {
+        return this.totalItemCount > 0 &&
+            this.valueKey &&
+            this.dataType === DataTypes.COMPLEX;
+    }
+    /** @hidden @internal */
+    get dataType() {
+        if (this.displayKey) {
+            return DataTypes.COMPLEX;
+        }
+        return DataTypes.PRIMITIVE;
+    }
     /**
      * Gets if control is valid, when used in a form
      *
@@ -36024,32 +35635,15 @@ class IgxComboComponent extends DisplayDensityBase {
         this.comboInput.valid = IgxInputState[IgxComboState[valid]];
     }
     /**
-     * @hidden @internal
-     */
-    get searchValue() {
-        return this._searchValue;
-    }
-    set searchValue(val) {
-        this.filterValue = val;
-        this._searchValue = val;
-    }
-    /**
-     * @hidden @internal
-     */
-    onArrowDown(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.open();
-    }
-    /**
-     * @hidden @internal
+     * The text displayed in the combo input
+     *
+     * ```typescript
+     * // get
+     * let comboValue = this.combo.value;
+     * ```
      */
-    onInputClick(event) {
-        event.stopPropagation();
-        event.preventDefault();
-        if (!this.disabled) {
-            this.toggle();
-        }
+    get value() {
+        return this._value;
     }
     /**
      * Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize`
@@ -36073,6 +35667,16 @@ class IgxComboComponent extends DisplayDensityBase {
     set virtualizationState(state) {
         this.virtDir.state = state;
     }
+    /**
+     * Gets drop down state.
+     *
+     * ```typescript
+     * let state = this.combo.collapsed;
+     * ```
+     */
+    get collapsed() {
+        return this.dropdown.collapsed;
+    }
     /**
      * Gets total count of the virtual data items, when using remote service.
      *
@@ -36095,94 +35699,92 @@ class IgxComboComponent extends DisplayDensityBase {
     set totalItemCount(count) {
         this.virtDir.totalItemCount = count;
     }
-    /**
-     * The text displayed in the combo input
-     *
-     * ```typescript
-     * // get
-     * let comboValue = this.combo.value;
-     * ```
-     */
-    get value() {
-        return this._value;
-    }
-    /**
-     * @hidden @internal
-     */
-    get filteredData() {
-        return this.filterable ? this._filteredData : this.data;
-    }
-    /**
-     * @hidden @internal
-     */
-    set filteredData(val) {
-        this._filteredData = this.groupKey ? (val || []).filter((e) => e.isHeader !== true) : val;
-        this.checkMatch();
-    }
-    /**
-     * @hidden @internal
-     */
-    handleKeyUp(event) {
-        if (event.key === 'ArrowDown' || event.key === 'Down') {
-            this.dropdown.focusedItem = this.dropdown.items[0];
-            this.dropdownContainer.nativeElement.focus();
+    /** @hidden @internal */
+    get template() {
+        this._dataType = this.dataType;
+        if (this.itemTemplate) {
+            return this.itemTemplate;
         }
-        else if (event.key === 'Escape' || event.key === 'Esc') {
-            this.toggle();
+        if (this._dataType === DataTypes.COMPLEX) {
+            return this.complexTemplate;
         }
+        return this.primitiveTemplate;
     }
-    /**
-     * @hidden @internal
-     */
-    handleKeyDown(event) {
-        if (event.key === 'ArrowUp' || event.key === 'Up') {
-            event.preventDefault();
-            event.stopPropagation();
-            this.close();
-        }
+    /** @hidden @internal */
+    onArrowDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open();
     }
-    /**
-     * @hidden @internal
-     */
-    handleInputChange(event) {
-        if (event !== undefined) {
-            const args = {
-                searchText: event,
-                owner: this,
-                cancel: false
-            };
-            this.searchInputUpdate.emit(args);
-            if (args.cancel) {
-                this.filterValue = null;
-            }
+    /** @hidden @internal */
+    ngOnInit() {
+        this.ngControl = this._injector.get(NgControl, null);
+        const targetElement = this.elementRef.nativeElement;
+        this._overlaySettings = {
+            target: targetElement,
+            scrollStrategy: new AbsoluteScrollStrategy(),
+            positionStrategy: new AutoPositionStrategy(),
+            modal: false,
+            closeOnOutsideClick: true,
+            excludeFromOutsideClick: [targetElement]
+        };
+        this.selectionService.set(this.id, new Set());
+        this._iconService.addSvgIconFromText(caseSensitive.name, caseSensitive.value, 'imx-icons');
+    }
+    /** @hidden @internal */
+    ngAfterViewInit() {
+        this.filteredData = [...this.data];
+        if (this.ngControl) {
+            this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
+            this.manageRequiredAsterisk();
+            this.cdr.detectChanges();
         }
-        this.checkMatch();
+        this.virtDir.chunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e) => {
+            const eventArgs = Object.assign({}, e, { owner: this });
+            this.dataPreLoad.emit(eventArgs);
+        });
+    }
+    /** @hidden @internal */
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.comboAPI.clear();
+        this.selectionService.clear(this.id);
     }
     /**
-     * @hidden @internal
+     * A method that opens/closes the combo.
+     *
+     * ```html
+     * <button (click)="combo.toggle()">Toggle Combo</button>
+     * <igx-combo #combo></igx-combo>
+     * ```
      */
-    get dataType() {
-        if (this.displayKey) {
-            return DataTypes.COMPLEX;
-        }
-        return DataTypes.PRIMITIVE;
+    toggle() {
+        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+        this.dropdown.toggle(overlaySettings);
     }
     /**
-     * @hidden @internal
+     * A method that opens the combo.
+     *
+     * ```html
+     * <button (click)="combo.open()">Open Combo</button>
+     * <igx-combo #combo></igx-combo>
+     * ```
      */
-    get isRemote() {
-        return this.totalItemCount > 0 &&
-            this.valueKey &&
-            this.dataType === DataTypes.COMPLEX;
+    open() {
+        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+        this.dropdown.open(overlaySettings);
     }
     /**
-     * Returns if the specified itemID is selected
+     * A method that closes the combo.
      *
-     * @hidden
-     * @internal
+     * ```html
+     * <button (click)="combo.close()">Close Combo</button>
+     * <igx-combo #combo></igx-combo>
+     * ```
      */
-    isItemSelected(item) {
-        return this.selection.is_item_selected(this.id, item);
+    close() {
+        this.dropdown.close();
     }
     /**
      * Triggers change detection on the combo view
@@ -36191,27 +35793,29 @@ class IgxComboComponent extends DisplayDensityBase {
         this.cdr.detectChanges();
     }
     /**
-     * @hidden @internal
+     * Get current selection state
+     *
+     * @returns Array of selected items
+     * ```typescript
+     * let selectedItems = this.combo.selectedItems();
+     * ```
      */
-    isAddButtonVisible() {
-        // This should always return a boolean value. If this.searchValue was '', it returns '' instead of false;
-        return this.searchValue !== '' && this.customValueFlag;
+    get selection() {
+        const items = Array.from(this.selectionService.get(this.id));
+        return items;
     }
     /**
-     * @hidden @internal
+     * Returns if the specified itemID is selected
+     *
+     * @hidden
+     * @internal
      */
-    handleSelectAll(evt) {
-        if (evt.checked) {
-            this.selectAllItems();
-        }
-        else {
-            this.deselectAllItems();
-        }
+    isItemSelected(item) {
+        return this.selectionService.is_item_selected(this.id, item);
     }
-    /**
-     * @hidden @internal
-     */
+    /** @hidden @internal */
     addItemToCollection() {
+        var _a;
         if (!this.searchValue) {
             return;
         }
@@ -36236,212 +35840,697 @@ class IgxComboComponent extends DisplayDensityBase {
         this.data.push(args.addedItem);
         // trigger re-render
         this.data = cloneArray(this.data);
-        this.selectItems(this.valueKey !== null && this.valueKey !== undefined ?
+        this.select(this.valueKey !== null && this.valueKey !== undefined ?
             [args.addedItem[this.valueKey]] : [args.addedItem], false);
         this.customValueFlag = false;
-        this.searchInput.nativeElement.focus();
+        (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
         this.dropdown.focusedItem = null;
         this.virtDir.scrollTo(0);
     }
-    /**
-     * @hidden @internal
-     */
-    focusSearchInput(opening) {
-        if (this.displaySearchInput && this.searchInput) {
-            this.searchInput.nativeElement.focus();
-        }
-        else {
-            if (opening) {
-                this.dropdownContainer.nativeElement.focus();
-            }
-            else {
-                this.comboInput.nativeElement.focus();
-                this.toggle();
-            }
-        }
+    /** @hidden @internal */
+    isAddButtonVisible() {
+        // This should always return a boolean value. If this.searchValue was '', it returns '' instead of false;
+        return this.searchValue !== '' && this.customValueFlag;
     }
-    /**
-     * @hidden @internal
-     */
-    onBlur() {
-        if (this.collapsed) {
-            this._onTouchedCallback();
-            if (this.ngControl && this.ngControl.invalid) {
-                this.valid = IgxComboState.INVALID;
-            }
-            else {
-                this.valid = IgxComboState.INITIAL;
+    /** @hidden @internal */
+    handleInputChange(event) {
+        if (event !== undefined) {
+            const args = {
+                searchText: typeof event === 'string' ? event : event.target.value,
+                owner: this,
+                cancel: false
+            };
+            this.searchInputUpdate.emit(args);
+            if (args.cancel) {
+                this.filterValue = null;
             }
         }
+        this.checkMatch();
     }
     /**
-     * @hidden @internal
+     * Event handlers
+     *
+     * @hidden
+     * @internal
      */
-    ngOnInit() {
-        this.ngControl = this._injector.get(NgControl, null);
-        const targetElement = this.elementRef.nativeElement;
-        this._overlaySettings = {
-            target: targetElement,
-            scrollStrategy: new AbsoluteScrollStrategy(),
-            positionStrategy: new AutoPositionStrategy(),
-            modal: false,
-            closeOnOutsideClick: true,
-            excludeFromOutsideClick: [targetElement]
-        };
-        this.selection.set(this.id, new Set());
-        this._iconService.addSvgIconFromText(caseSensitive.name, caseSensitive.value, 'imx-icons');
+    handleOpening(e) {
+        const args = { owner: this, event: e.event, cancel: e.cancel };
+        this.opening.emit(args);
+        e.cancel = args.cancel;
     }
-    /**
-     * @hidden @internal
-     */
-    ngAfterViewInit() {
-        this.filteredData = [...this.data];
-        if (this.ngControl) {
-            this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
-            this.manageRequiredAsterisk();
-            this.cdr.detectChanges();
-        }
-        this.virtDir.chunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e) => {
-            const eventArgs = Object.assign({}, e, { owner: this });
-            this.dataPreLoad.emit(eventArgs);
-        });
+    /** @hidden @internal */
+    handleClosing(e) {
+        var _a;
+        const args = { owner: this, event: e.event, cancel: e.cancel };
+        this.closing.emit(args);
+        e.cancel = args.cancel;
+        if (e.cancel) {
+            return;
+        }
+        this.searchValue = '';
+        if (!e.event) {
+            (_a = this.comboInput) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+        }
+    }
+    /** @hidden @internal */
+    handleClosed() {
+        this.closed.emit({ owner: this });
+    }
+    /** @hidden @internal */
+    handleKeyDown(event) {
+        if (event.key === 'ArrowUp' || event.key === 'Up') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+        }
+    }
+    /** @hidden @internal */
+    registerOnChange(fn) {
+        this._onChangeCallback = fn;
+    }
+    /** @hidden @internal */
+    registerOnTouched(fn) {
+        this._onTouchedCallback = fn;
+    }
+    /** @hidden @internal */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /** @hidden @internal */
+    onClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (!this.disabled) {
+            this.toggle();
+        }
+    }
+    /** @hidden @internal */
+    onBlur() {
+        if (this.collapsed) {
+            this._onTouchedCallback();
+            if (this.ngControl && this.ngControl.invalid) {
+                this.valid = IgxComboState.INVALID;
+            }
+            else {
+                this.valid = IgxComboState.INITIAL;
+            }
+        }
+    }
+    /** if there is a valueKey - map the keys to data items, else - just return the keys */
+    convertKeysToItems(keys) {
+        if (this.comboAPI.valueKey === null) {
+            return keys;
+        }
+        // map keys vs. filter data to retain the order of the selected items
+        return keys.map(key => this.data.find(entry => entry[this.valueKey] === key)).filter(e => e !== undefined);
+    }
+    checkMatch() {
+        const itemMatch = this.filteredData.some(this.findMatch);
+        this.customValueFlag = this.allowCustomValues && !itemMatch;
+    }
+    manageRequiredAsterisk() {
+        if (this.ngControl && this.ngControl.control.validator) {
+            // Run the validation with empty object to check if required is enabled.
+            const error = this.ngControl.control.validator({});
+            this.inputGroup.isRequired = error && error.required;
+        }
+    }
+    /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
+    registerRemoteEntries(ids, add = true) {
+        if (add) {
+            const selection = this.getValueDisplayPairs(ids);
+            for (const entry of selection) {
+                this._remoteSelection[entry[this.valueKey]] = entry[this.displayKey];
+            }
+        }
+        else {
+            for (const entry of ids) {
+                delete this._remoteSelection[entry];
+            }
+        }
     }
     /**
-     * @hidden @internal
+     * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]`
      */
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.comboAPI.clear();
-        this.selection.clear(this.id);
+    getValueDisplayPairs(ids) {
+        return this.data.filter(entry => ids.indexOf(entry[this.valueKey]) > -1).map(e => ({
+            [this.valueKey]: e[this.valueKey],
+            [this.displayKey]: e[this.displayKey]
+        }));
+    }
+    getRemoteSelection(newSelection, oldSelection) {
+        if (!newSelection.length) {
+            // If new selection is empty, clear all items
+            this.registerRemoteEntries(oldSelection, false);
+            return '';
+        }
+        const removedItems = oldSelection.filter(e => newSelection.indexOf(e) < 0);
+        const addedItems = newSelection.filter(e => oldSelection.indexOf(e) < 0);
+        this.registerRemoteEntries(addedItems);
+        this.registerRemoteEntries(removedItems, false);
+        return Object.keys(this._remoteSelection).map(e => this._remoteSelection[e]).join(', ');
+    }
+}
+IgxComboBaseDirective.decorators = [
+    { type: Directive }
+];
+IgxComboBaseDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ChangeDetectorRef },
+    { type: IgxSelectionAPIService },
+    { type: IgxComboAPIService },
+    { type: IgxIconService },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DisplayDensityToken,] }] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [IGX_INPUT_GROUP_TYPE,] }] },
+    { type: Injector, decorators: [{ type: Optional }] }
+];
+IgxComboBaseDirective.propDecorators = {
+    overlaySettings: [{ type: Input }],
+    id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
+    width: [{ type: HostBinding, args: ['style.width',] }, { type: Input }],
+    allowCustomValues: [{ type: Input }],
+    itemsMaxHeight: [{ type: Input }],
+    itemHeight: [{ type: Input }],
+    itemsWidth: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    data: [{ type: Input }],
+    valueKey: [{ type: Input }],
+    displayKey: [{ type: Input }],
+    groupKey: [{ type: Input }],
+    ariaLabelledBy: [{ type: Input }, { type: HostBinding, args: ['attr.aria-labelledby',] }],
+    cssClass: [{ type: HostBinding, args: ['class.igx-combo',] }],
+    role: [{ type: HostBinding, args: [`attr.role`,] }],
+    ariaExpanded: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
+    hasPopUp: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
+    ariaOwns: [{ type: HostBinding, args: ['attr.aria-owns',] }],
+    disabled: [{ type: Input }],
+    type: [{ type: Input }],
+    selectionChanging: [{ type: Output }],
+    opening: [{ type: Output }],
+    opened: [{ type: Output }],
+    closing: [{ type: Output }],
+    closed: [{ type: Output }],
+    addition: [{ type: Output }],
+    searchInputUpdate: [{ type: Output }],
+    dataPreLoad: [{ type: Output }],
+    itemTemplate: [{ type: ContentChild, args: [IgxComboItemDirective, { read: TemplateRef },] }],
+    headerTemplate: [{ type: ContentChild, args: [IgxComboHeaderDirective, { read: TemplateRef },] }],
+    footerTemplate: [{ type: ContentChild, args: [IgxComboFooterDirective, { read: TemplateRef },] }],
+    headerItemTemplate: [{ type: ContentChild, args: [IgxComboHeaderItemDirective, { read: TemplateRef },] }],
+    addItemTemplate: [{ type: ContentChild, args: [IgxComboAddItemDirective, { read: TemplateRef },] }],
+    emptyTemplate: [{ type: ContentChild, args: [IgxComboEmptyDirective, { read: TemplateRef },] }],
+    toggleIconTemplate: [{ type: ContentChild, args: [IgxComboToggleIconDirective, { read: TemplateRef },] }],
+    clearIconTemplate: [{ type: ContentChild, args: [IgxComboClearIconDirective, { read: TemplateRef },] }],
+    inputGroup: [{ type: ViewChild, args: ['inputGroup', { read: IgxInputGroupComponent, static: true },] }],
+    comboInput: [{ type: ViewChild, args: ['comboInput', { read: IgxInputDirective, static: true },] }],
+    searchInput: [{ type: ViewChild, args: ['searchInput',] }],
+    virtualScrollContainer: [{ type: ViewChild, args: [IgxForOfDirective, { static: true },] }],
+    virtDir: [{ type: ViewChild, args: [IgxForOfDirective, { read: IgxForOfDirective, static: true },] }],
+    dropdownContainer: [{ type: ViewChild, args: ['dropdownItemContainer', { static: true },] }],
+    primitiveTemplate: [{ type: ViewChild, args: ['primitive', { read: TemplateRef, static: true },] }],
+    complexTemplate: [{ type: ViewChild, args: ['complex', { read: TemplateRef, static: true },] }],
+    onArrowDown: [{ type: HostListener, args: ['keydown.ArrowDown', ['$event'],] }, { type: HostListener, args: ['keydown.Alt.ArrowDown', ['$event'],] }]
+};
+
+/**
+ * @hidden
+ */
+class IgxComboAddItemComponent extends IgxComboItemComponent {
+    get selected() {
+        return false;
+    }
+    set selected(value) {
     }
     /**
-     * @hidden @internal
+     * @inheritdoc
      */
-    writeValue(value) {
-        const selection = Array.isArray(value) ? value : [];
-        const oldSelection = this.selectedItems();
-        this.selection.select_items(this.id, selection, true);
-        this.cdr.markForCheck();
-        this._value = this.createDisplayText(this.selectedItems(), oldSelection);
+    clicked(event) {
+        this.comboAPI.disableTransitions = false;
+        this.comboAPI.add_custom_item();
+    }
+}
+IgxComboAddItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'igx-combo-add-item',
+                template: '<ng-content></ng-content>',
+                providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }]
+            },] }
+];
+
+/** @hidden */
+class IgxComboDropDownComponent extends IgxDropDownComponent {
+    constructor(elementRef, cdr, platform, selection, combo, comboAPI, _displayDensityOptions) {
+        super(elementRef, cdr, platform, selection, _displayDensityOptions);
+        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 = () => {
+            this.comboAPI.disableTransitions = true;
+        };
+    }
+    /** @hidden @internal */
+    get scrollContainer() {
+        return this.virtDir.dc.location.nativeElement;
+    }
+    get isScrolledToLast() {
+        const scrollTop = this.virtDir.scrollPosition;
+        const scrollHeight = this.virtDir.getScroll().scrollHeight;
+        return Math.floor(scrollTop + this.virtDir.igxForContainerSize) === scrollHeight;
+    }
+    get lastVisibleIndex() {
+        return this.combo.totalItemCount ?
+            Math.floor(this.combo.itemsMaxHeight / this.combo.itemHeight) :
+            this.items.length - 1;
+    }
+    get sortedChildren() {
+        if (this.children !== undefined) {
+            return this.children.toArray()
+                .sort((a, b) => a.index - b.index);
+        }
+        return null;
+    }
+    /**
+     * Get all non-header items
+     *
+     * ```typescript
+     * let myDropDownItems = this.dropdown.items;
+     * ```
+     */
+    get items() {
+        const items = [];
+        if (this.children !== undefined) {
+            const sortedChildren = this.sortedChildren;
+            for (const child of sortedChildren) {
+                if (!child.isHeader) {
+                    items.push(child);
+                }
+            }
+        }
+        return items;
     }
     /**
      * @hidden @internal
      */
-    registerOnChange(fn) {
-        this._onChangeCallback = fn;
+    onFocus() {
+        this.focusedItem = this._focusedItem || this.items[0];
     }
     /**
      * @hidden @internal
      */
-    registerOnTouched(fn) {
-        this._onTouchedCallback = fn;
+    onBlur(_evt) {
+        this.focusedItem = null;
     }
     /**
      * @hidden @internal
      */
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    onToggleOpened() {
+        this.opened.emit();
     }
     /**
      * @hidden
      */
-    getEditElement() {
-        return this.comboInput.nativeElement;
+    navigateFirst() {
+        this.navigateItem(this.virtDir.igxForOf.findIndex(e => !e.isHeader));
     }
     /**
-     * @hidden @internal
+     * @hidden
      */
-    get template() {
-        this._dataType = this.dataType;
-        if (this.itemTemplate) {
-            return this.itemTemplate;
+    navigatePrev() {
+        if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
+            this.combo.focusSearchInput(false);
         }
-        if (this._dataType === DataTypes.COMPLEX) {
-            return this.complexTemplate;
+        else {
+            super.navigatePrev();
+        }
+    }
+    /**
+     * @hidden
+     */
+    navigateNext() {
+        const lastIndex = this.combo.totalItemCount ? this.combo.totalItemCount - 1 : this.virtDir.igxForOf.length - 1;
+        if (this._focusedItem && this._focusedItem.index === lastIndex) {
+            this.focusAddItemButton();
+        }
+        else {
+            super.navigateNext();
         }
-        return this.primitiveTemplate;
     }
     /**
      * @hidden @internal
      */
-    get context() {
-        return {
-            $implicit: this
-        };
+    selectItem(item) {
+        if (item === null || item === undefined) {
+            return;
+        }
+        this.comboAPI.set_selected_item(item.itemID);
+        this._focusedItem = item;
     }
     /**
      * @hidden @internal
      */
-    handleClearItems(event) {
-        if (this.disabled) {
+    updateScrollPosition() {
+        this.virtDir.getScroll().scrollTop = this._scrollPosition;
+    }
+    /**
+     * @hidden @internal
+     */
+    onItemActionKey(key) {
+        switch (key) {
+            case DropDownActionKey.ENTER:
+                this.handleEnter();
+                break;
+            case DropDownActionKey.SPACE:
+                this.handleSpace();
+                break;
+            case DropDownActionKey.ESCAPE:
+                this.close();
+        }
+    }
+    ngAfterViewInit() {
+        this.virtDir.getScroll().addEventListener('scroll', this.scrollHandler);
+    }
+    /**
+     * @hidden @internal
+     */
+    ngOnDestroy() {
+        this.virtDir.getScroll().removeEventListener('scroll', this.scrollHandler);
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    scrollToHiddenItem(_newItem) { }
+    handleEnter() {
+        if (this.isAddItemFocused()) {
+            this.combo.addItemToCollection();
             return;
         }
-        this.deselectAllItems(true, event);
-        if (this.collapsed) {
-            this.getEditElement().focus();
+        if (this.singleMode && this.focusedItem) {
+            this.combo.select(this.focusedItem.itemID);
+        }
+        this.close();
+    }
+    handleSpace() {
+        if (this.isAddItemFocused()) {
+            return;
         }
         else {
-            this.focusSearchInput(true);
+            this.selectItem(this.focusedItem);
         }
-        event.stopPropagation();
+    }
+    isAddItemFocused() {
+        return this.focusedItem instanceof IgxComboAddItemComponent;
+    }
+    focusAddItemButton() {
+        if (this.combo.isAddButtonVisible()) {
+            this.focusedItem = this.items[this.items.length - 1];
+        }
+    }
+}
+IgxComboDropDownComponent.decorators = [
+    { type: 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 = () => [
+    { type: ElementRef },
+    { type: ChangeDetectorRef },
+    { type: PlatformUtil },
+    { type: IgxSelectionAPIService },
+    { type: undefined, decorators: [{ type: Inject, args: [IGX_COMBO_COMPONENT,] }] },
+    { type: IgxComboAPIService },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DisplayDensityToken,] }] }
+];
+IgxComboDropDownComponent.propDecorators = {
+    singleMode: [{ type: Input }],
+    children: [{ type: ContentChildren, args: [IgxComboItemComponent, { descendants: true },] }]
+};
+
+/**
+ * @hidden
+ */
+class IgxComboFilteringPipe {
+    transform(collection, searchValue, displayKey, filteringOptions, shouldFilter = false) {
+        if (!collection) {
+            return [];
+        }
+        if (!searchValue || !shouldFilter) {
+            return collection;
+        }
+        else {
+            const searchTerm = filteringOptions.caseSensitive ? searchValue.trim() : searchValue.toLowerCase().trim();
+            if (displayKey != null) {
+                return collection.filter(e => filteringOptions.caseSensitive ? e[displayKey].includes(searchTerm) :
+                    e[displayKey].toString().toLowerCase().includes(searchTerm));
+            }
+            else {
+                return collection.filter(e => filteringOptions.caseSensitive ? e.includes(searchTerm) :
+                    e.toString().toLowerCase().includes(searchTerm));
+            }
+        }
+    }
+}
+IgxComboFilteringPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'comboFiltering'
+            },] }
+];
+/**
+ * @hidden
+ */
+class IgxComboGroupingPipe {
+    constructor(combo) {
+        this.combo = combo;
+    }
+    transform(collection, groupKey, valueKey) {
+        this.combo.filteredData = collection;
+        if ((!groupKey && groupKey !== 0) || !collection.length) {
+            return collection;
+        }
+        const sorted = DataUtil.sort(cloneArray(collection), [{
+                fieldName: groupKey,
+                dir: SortingDirection.Asc,
+                ignoreCase: true,
+                strategy: DefaultSortingStrategy.instance()
+            }]);
+        const data = cloneArray(sorted);
+        let inserts = 0;
+        let currentHeader = null;
+        for (let i = 0; i < sorted.length; i++) {
+            let insertFlag = 0;
+            if (currentHeader !== sorted[i][groupKey]) {
+                currentHeader = sorted[i][groupKey];
+                insertFlag = 1;
+            }
+            if (insertFlag) {
+                data.splice(i + inserts, 0, {
+                    [valueKey]: currentHeader,
+                    [groupKey]: currentHeader,
+                    isHeader: true
+                });
+                inserts++;
+            }
+        }
+        return data;
+    }
+}
+IgxComboGroupingPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'comboGrouping'
+            },] }
+];
+IgxComboGroupingPipe.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [IGX_COMBO_COMPONENT,] }] }
+];
+
+/**
+ * When called with sets A & B, returns A - B (as array);
+ *
+ * @hidden
+ */
+const diffInSets = (set1, set2) => {
+    const results = [];
+    set1.forEach(entry => {
+        if (!set2.has(entry)) {
+            results.push(entry);
+        }
+    });
+    return results;
+};
+const ɵ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>
+ * ```
+ */
+class IgxComboComponent extends IgxComboBaseDirective {
+    constructor(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) {
+        super(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector);
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.selectionService = selectionService;
+        this.comboAPI = comboAPI;
+        this._iconService = _iconService;
+        this._displayDensityOptions = _displayDensityOptions;
+        this._inputGroupType = _inputGroupType;
+        this._injector = _injector;
+        /**
+         * Defines whether the caseSensitive icon should be shown in the search input
+         *
+         * ```typescript
+         * // get
+         * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
+         * ```
+         */
+        this.showSearchCaseIcon = false;
+        /**
+         * An @Input property that controls whether the combo's search box
+         * should be focused after the `opened` event is called
+         * When `false`, the combo's list item container will be focused instead
+         */
+        this.autoFocusSearch = true;
+        /**
+         * An @Input property that enabled/disables filtering in the list. The default is `true`.
+         * ```html
+         * <igx-combo [filterable]="false">
+         * ```
+         */
+        this.filterable = true;
+        /**
+         * Defines the placeholder value for the combo dropdown search field
+         *
+         * ```typescript
+         * // get
+         * let myComboSearchPlaceholder = this.combo.searchPlaceholder;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
+         * ```
+         */
+        this.searchPlaceholder = 'Enter a Search Term';
+        /**
+         * @hidden @internal
+         */
+        this.filteringLogic = FilteringLogic.Or;
+        this.stringFilters = IgxStringFilteringOperand;
+        this.booleanFilters = IgxBooleanFilteringOperand;
+        this._prevInputValue = '';
+        this.comboAPI.register(this);
     }
     /**
-     * A method that opens/closes the combo.
-     *
-     * ```html
-     * <button (click)="combo.toggle()">Toggle Combo</button>
-     * <igx-combo #combo></igx-combo>
-     * ```
+     * @hidden @internal
      */
-    toggle() {
-        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
-        this.dropdown.toggle(overlaySettings);
+    get inputEmpty() {
+        return !this.value && !this.placeholder;
+    }
+    /** @hidden @internal */
+    get filteredData() {
+        return this.filterable ? this._filteredData : this.data;
+    }
+    /** @hidden @internal */
+    set filteredData(val) {
+        this._filteredData = this.groupKey ? (val || []).filter((e) => e.isHeader !== true) : val;
+        this.checkMatch();
+    }
+    /** @hidden @internal */
+    get displaySearchInput() {
+        return this.filterable || this.allowCustomValues;
     }
     /**
-     * A method that opens the combo.
-     *
-     * ```html
-     * <button (click)="combo.open()">Open Combo</button>
-     * <igx-combo #combo></igx-combo>
-     * ```
+     * @hidden @internal
      */
-    open() {
-        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
-        this.dropdown.open(overlaySettings);
+    handleKeyUp(event) {
+        // TODO: use PlatformUtil for keyboard navigation
+        if (event.key === 'ArrowDown' || event.key === 'Down') {
+            this.dropdown.focusedItem = this.dropdown.items[0];
+            this.dropdownContainer.nativeElement.focus();
+        }
+        else if (event.key === 'Escape' || event.key === 'Esc') {
+            this.toggle();
+        }
     }
     /**
-     * A method that closes the combo.
-     *
-     * ```html
-     * <button (click)="combo.close()">Close Combo</button>
-     * <igx-combo #combo></igx-combo>
-     * ```
+     * @hidden @internal
      */
-    close() {
-        this.dropdown.close();
+    handleSelectAll(evt) {
+        if (evt.checked) {
+            this.selectAllItems();
+        }
+        else {
+            this.deselectAllItems();
+        }
     }
     /**
-     * Gets drop down state.
-     *
-     * ```typescript
-     * let state = this.combo.collapsed;
-     * ```
+     * @hidden @internal
      */
-    get collapsed() {
-        return this.dropdown.collapsed;
+    writeValue(value) {
+        const selection = Array.isArray(value) ? value : [];
+        const oldSelection = this.selection;
+        this.selectionService.select_items(this.id, selection, true);
+        this.cdr.markForCheck();
+        this._value = this.createDisplayText(this.selection, oldSelection);
     }
     /**
-     * Get current selection state
-     *
-     * @returns Array of selected items
-     * ```typescript
-     * let selectedItems = this.combo.selectedItems();
-     * ```
+     * @hidden
      */
-    selectedItems() {
-        const items = Array.from(this.selection.get(this.id));
-        return items;
+    getEditElement() {
+        return this.comboInput.nativeElement;
+    }
+    /**
+     * @hidden @internal
+     */
+    get context() {
+        return {
+            $implicit: this
+        };
+    }
+    /**
+     * @hidden @internal
+     */
+    handleClearItems(event) {
+        if (this.disabled) {
+            return;
+        }
+        this.deselectAllItems(true, event);
+        if (this.collapsed) {
+            this.getEditElement().focus();
+        }
+        else {
+            this.focusSearchInput(true);
+        }
+        event.stopPropagation();
     }
     /**
      * Select defined items
@@ -36449,12 +36538,12 @@ class IgxComboComponent extends DisplayDensityBase {
      * @param newItems new items to be selected
      * @param clearCurrentSelection if true clear previous selected items
      * ```typescript
-     * this.combo.selectItems(["New York", "New Jersey"]);
+     * this.combo.select(["New York", "New Jersey"]);
      * ```
      */
-    selectItems(newItems, clearCurrentSelection, event) {
+    select(newItems, clearCurrentSelection, event) {
         if (newItems) {
-            const newSelection = this.selection.add_items(this.id, newItems, clearCurrentSelection);
+            const newSelection = this.selectionService.add_items(this.id, newItems, clearCurrentSelection);
             this.setSelection(newSelection, event);
         }
     }
@@ -36463,12 +36552,12 @@ class IgxComboComponent extends DisplayDensityBase {
      *
      * @param items items to deselected
      * ```typescript
-     * this.combo.deselectItems(["New York", "New Jersey"]);
+     * this.combo.deselect(["New York", "New Jersey"]);
      * ```
      */
-    deselectItems(items, event) {
+    deselect(items, event) {
         if (items) {
-            const newSelection = this.selection.delete_items(this.id, items);
+            const newSelection = this.selectionService.delete_items(this.id, items);
             this.setSelection(newSelection, event);
         }
     }
@@ -36481,8 +36570,8 @@ class IgxComboComponent extends DisplayDensityBase {
      * ```
      */
     selectAllItems(ignoreFilter, event) {
-        const allVisible = this.selection.get_all_ids(ignoreFilter ? this.data : this.filteredData, this.valueKey);
-        const newSelection = this.selection.add_items(this.id, allVisible);
+        const allVisible = this.selectionService.get_all_ids(ignoreFilter ? this.data : this.filteredData, this.valueKey);
+        const newSelection = this.selectionService.add_items(this.id, allVisible);
         this.setSelection(newSelection, event);
     }
     /**
@@ -36494,9 +36583,9 @@ class IgxComboComponent extends DisplayDensityBase {
      * ```
      */
     deselectAllItems(ignoreFilter, event) {
-        let newSelection = this.selection.get_empty();
+        let newSelection = this.selectionService.get_empty();
         if (this.filteredData.length !== this.data.length && !ignoreFilter) {
-            newSelection = this.selection.delete_items(this.id, this.selection.get_all_ids(this.filteredData, this.valueKey));
+            newSelection = this.selectionService.delete_items(this.id, this.selectionService.get_all_ids(this.filteredData, this.valueKey));
         }
         this.setSelection(newSelection, event);
     }
@@ -36524,26 +36613,19 @@ class IgxComboComponent extends DisplayDensityBase {
             return;
         }
         if (select) {
-            this.selectItems([itemID], false, event);
+            this.select([itemID], false, event);
         }
         else {
-            this.deselectItems([itemID], event);
+            this.deselect([itemID], event);
         }
     }
-    /**
-     * Event handlers
-     *
-     * @hidden
-     * @internal
-     */
-    handleOpening(e) {
-        const args = { owner: this, event: e.event, cancel: e.cancel };
-        this.opening.emit(args);
-        e.cancel = args.cancel;
-    }
     /**
      * @hidden @internal
      */
+    toggleCaseSensitive() {
+        this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
+    }
+    /** @hidden @internal */
     handleOpened() {
         this.triggerCheck();
         // Disabling focus of the search input should happen only when drop down opens.
@@ -36557,36 +36639,26 @@ class IgxComboComponent extends DisplayDensityBase {
         }
         this.opened.emit({ owner: this });
     }
-    /**
-     * @hidden @internal
-     */
-    handleClosing(e) {
-        const args = { owner: this, event: e.event, cancel: e.cancel };
-        this.closing.emit(args);
-        e.cancel = args.cancel;
-        if (e.cancel) {
-            return;
+    /** @hidden @internal */
+    focusSearchInput(opening) {
+        if (this.displaySearchInput && this.searchInput) {
+            this.searchInput.nativeElement.focus();
+        }
+        else {
+            if (opening) {
+                this.dropdownContainer.nativeElement.focus();
+            }
+            else {
+                this.comboInput.nativeElement.focus();
+                this.toggle();
+            }
         }
-        this.searchValue = '';
-        this.comboInput.nativeElement.focus();
-    }
-    /**
-     * @hidden @internal
-     */
-    handleClosed() {
-        this.closed.emit({ owner: this });
-    }
-    /**
-     * @hidden @internal
-     */
-    toggleCaseSensitive() {
-        this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
     }
     setSelection(newSelection, event) {
-        const removed = diffInSets(this.selection.get(this.id), newSelection);
-        const added = diffInSets(newSelection, this.selection.get(this.id));
+        const removed = diffInSets(this.selectionService.get(this.id), newSelection);
+        const added = diffInSets(newSelection, this.selectionService.get(this.id));
         const newSelectionAsArray = Array.from(newSelection);
-        const oldSelectionAsArray = Array.from(this.selection.get(this.id) || []);
+        const oldSelectionAsArray = Array.from(this.selectionService.get(this.id) || []);
         const displayText = this.createDisplayText(newSelectionAsArray, oldSelectionAsArray);
         const args = {
             newSelection: newSelectionAsArray,
@@ -36600,7 +36672,7 @@ class IgxComboComponent extends DisplayDensityBase {
         };
         this.selectionChanging.emit(args);
         if (!args.cancel) {
-            this.selection.select_items(this.id, args.newSelection, true);
+            this.selectionService.select_items(this.id, args.newSelection, true);
             if (displayText !== args.displayText) {
                 this._value = args.displayText;
             }
@@ -36610,44 +36682,10 @@ class IgxComboComponent extends DisplayDensityBase {
             this._onChangeCallback(args.newSelection);
         }
     }
-    manageRequiredAsterisk() {
-        if (this.ngControl && this.ngControl.control.validator) {
-            // Run the validation with empty object to check if required is enabled.
-            const error = this.ngControl.control.validator({});
-            this.inputGroup.isRequired = error && error.required;
-        }
-    }
-    /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
-    registerRemoteEntries(ids, add = true) {
-        if (add) {
-            const selection = this.getValueDisplayPairs(ids);
-            for (const entry of selection) {
-                this._remoteSelection[entry[this.valueKey]] = entry[this.displayKey];
-            }
-        }
-        else {
-            for (const entry of ids) {
-                delete this._remoteSelection[entry];
-            }
-        }
-    }
-    /**
-     * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]`
-     */
-    getValueDisplayPairs(ids) {
-        return this.data.filter(entry => ids.indexOf(entry[this.valueKey]) > -1).map(e => ({
-            [this.valueKey]: e[this.valueKey],
-            [this.displayKey]: e[this.displayKey]
-        }));
-    }
-    checkMatch() {
-        const displayKey = this.displayKey;
-        const matchFn = (e) => {
-            const value = displayKey ? e[displayKey] : e;
-            return value.toString().toLowerCase() === this.searchValue.trim().toLowerCase();
-        };
-        const itemMatch = this.filteredData.some(matchFn);
-        this.customValueFlag = this.allowCustomValues && !itemMatch;
+    createDisplayText(newSelection, oldSelection) {
+        return this.isRemote
+            ? this.getRemoteSelection(newSelection, oldSelection)
+            : this.concatDisplayText(newSelection);
     }
     /** Returns a string that should be populated in the combo's text box */
     concatDisplayText(selection) {
@@ -36656,44 +36694,11 @@ class IgxComboComponent extends DisplayDensityBase {
             selection.join(', ');
         return value;
     }
-    /**
-     * Constructs the combo display value
-     * If remote, caches the key displayText
-     * If not, just combine the object.displayKeys
-     */
-    createDisplayText(newSelection, oldSelection) {
-        let value = '';
-        if (this.isRemote) {
-            if (newSelection.length) {
-                const removedItems = oldSelection.filter(e => newSelection.indexOf(e) < 0);
-                const addedItems = newSelection.filter(e => oldSelection.indexOf(e) < 0);
-                this.registerRemoteEntries(addedItems);
-                this.registerRemoteEntries(removedItems, false);
-                value = Object.keys(this._remoteSelection).map(e => this._remoteSelection[e]).join(', ');
-            }
-            else {
-                // If new selection is empty, clear all items
-                this.registerRemoteEntries(oldSelection, false);
-            }
-        }
-        else {
-            value = this.concatDisplayText(newSelection);
-        }
-        return value;
-    }
-    /** if there is a valueKey - map the keys to data items, else - just return the keys */
-    convertKeysToItems(keys) {
-        if (this.comboAPI.valueKey === null) {
-            return keys;
-        }
-        // map keys vs. filter data to retain the order of the selected items
-        return keys.map(key => this.data.find(entry => entry[this.valueKey] === key)).filter(e => e !== undefined);
-    }
 }
 IgxComboComponent.decorators = [
     { type: 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 },
@@ -36712,56 +36717,11 @@ IgxComboComponent.ctorParameters = () => [
     { type: Injector, decorators: [{ type: Optional }] }
 ];
 IgxComboComponent.propDecorators = {
-    overlaySettings: [{ type: Input }],
-    inputGroup: [{ type: ViewChild, args: ['inputGroup', { read: IgxInputGroupComponent, static: true },] }],
-    comboInput: [{ type: ViewChild, args: ['comboInput', { read: IgxInputDirective, static: true },] }],
-    dropdown: [{ type: ViewChild, args: [IgxComboDropDownComponent, { read: IgxComboDropDownComponent, static: true },] }],
-    searchInput: [{ type: ViewChild, args: ['searchInput',] }],
-    itemTemplate: [{ type: ContentChild, args: [IgxComboItemDirective, { read: TemplateRef },] }],
-    headerTemplate: [{ type: ContentChild, args: [IgxComboHeaderDirective, { read: TemplateRef },] }],
-    footerTemplate: [{ type: ContentChild, args: [IgxComboFooterDirective, { read: TemplateRef },] }],
-    headerItemTemplate: [{ type: ContentChild, args: [IgxComboHeaderItemDirective, { read: TemplateRef },] }],
-    addItemTemplate: [{ type: ContentChild, args: [IgxComboAddItemDirective, { read: TemplateRef },] }],
-    emptyTemplate: [{ type: ContentChild, args: [IgxComboEmptyDirective, { read: TemplateRef },] }],
-    toggleIconTemplate: [{ type: ContentChild, args: [IgxComboToggleIconDirective, { read: TemplateRef },] }],
-    clearIconTemplate: [{ type: ContentChild, args: [IgxComboClearIconDirective, { read: TemplateRef },] }],
-    virtualScrollContainer: [{ type: ViewChild, args: [IgxForOfDirective, { static: true },] }],
-    selectionChanging: [{ type: Output }],
-    opening: [{ type: Output }],
-    opened: [{ type: Output }],
-    closing: [{ type: Output }],
-    closed: [{ type: Output }],
-    addition: [{ type: Output }],
-    searchInputUpdate: [{ type: Output }],
-    dataPreLoad: [{ type: Output }],
-    id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
-    width: [{ type: HostBinding, args: ['style.width',] }, { type: Input }],
-    cssClass: [{ type: HostBinding, args: ['class.igx-combo',] }],
-    role: [{ type: HostBinding, args: [`attr.role`,] }],
-    ariaExpanded: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
-    hasPopUp: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
-    ariaOwns: [{ type: HostBinding, args: ['attr.aria-owns',] }],
-    allowCustomValues: [{ type: Input }],
-    itemsMaxHeight: [{ type: Input }],
-    itemsWidth: [{ type: Input }],
-    itemHeight: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    searchPlaceholder: [{ type: Input }],
     showSearchCaseIcon: [{ type: Input }],
-    data: [{ type: Input }],
-    valueKey: [{ type: Input }],
-    displayKey: [{ type: Input }],
-    groupKey: [{ type: Input }],
-    filterable: [{ type: Input }],
-    ariaLabelledBy: [{ type: Input }, { type: HostBinding, args: ['attr.aria-labelledby',] }],
-    disabled: [{ type: Input }],
-    type: [{ type: Input }],
     autoFocusSearch: [{ type: Input }],
-    dropdownContainer: [{ type: ViewChild, args: ['dropdownItemContainer', { static: true },] }],
-    primitiveTemplate: [{ type: ViewChild, args: ['primitive', { read: TemplateRef, static: true },] }],
-    complexTemplate: [{ type: ViewChild, args: ['complex', { read: TemplateRef, static: true },] }],
-    virtDir: [{ type: ViewChild, args: [IgxForOfDirective, { read: IgxForOfDirective, static: true },] }],
-    onArrowDown: [{ type: HostListener, args: ['keydown.ArrowDown', ['$event'],] }, { type: HostListener, args: ['keydown.Alt.ArrowDown', ['$event'],] }]
+    filterable: [{ type: Input }],
+    searchPlaceholder: [{ type: Input }],
+    dropdown: [{ type: ViewChild, args: [IgxComboDropDownComponent, { static: true },] }]
 };
 /**
  * @hidden
@@ -36781,6 +36741,8 @@ IgxComboModule.decorators = [
                     IgxComboToggleIconDirective,
                     IgxComboClearIconDirective],
                 exports: [IgxComboComponent, IgxComboItemComponent, IgxComboDropDownComponent, IgxComboAddItemComponent,
+                    IgxComboGroupingPipe,
+                    IgxComboFilteringPipe,
                     IgxComboItemDirective,
                     IgxComboEmptyDirective,
                     IgxComboHeaderItemDirective,
@@ -36795,6 +36757,284 @@ IgxComboModule.decorators = [
             },] }
 ];
 
+/**
+ * Represents a drop-down list that provides filtering functionality, allowing users to choose a single option from a predefined list.
+ *
+ * @igxModule IgxSimpleComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, single combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @remarks
+ * It provides the ability to filter items as well as perform single selection on the provided data.
+ * Additionally, it exposes keyboard navigation and custom styling capabilities.
+ * @example
+ * ```html
+ * <igx-simple-combo [itemsMaxHeight]="250" [data]="locationData"
+ *  [displayKey]="'field'" [valueKey]="'field'"
+ *  placeholder="Location" searchPlaceholder="Search...">
+ * </igx-simple-combo>
+ * ```
+ */
+class IgxSimpleComboComponent extends IgxComboBaseDirective {
+    constructor(elementRef, cdr, selectionService, comboAPI, _iconService, platformUtil, _displayDensityOptions, _inputGroupType, _injector) {
+        super(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector);
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.selectionService = selectionService;
+        this.comboAPI = comboAPI;
+        this._iconService = _iconService;
+        this.platformUtil = platformUtil;
+        this._displayDensityOptions = _displayDensityOptions;
+        this._inputGroupType = _inputGroupType;
+        this._injector = _injector;
+        /**
+         * Emitted when item selection is changing, before the selection completes
+         *
+         * ```html
+         * <igx-simple-combo (selectionChanging)='handleSelection()'></igx-simple-combo>
+         * ```
+         */
+        this.selectionChanging = new EventEmitter();
+        /** @hidden @internal */
+        this.composing = false;
+        this._updateInput = false;
+        this.findMatch = (element) => {
+            const value = this.displayKey ? element[this.displayKey] : element;
+            return value.toString().toLowerCase().includes(this.searchValue.trim().toLowerCase());
+        };
+        this.comboAPI.register(this);
+    }
+    /** @hidden @internal */
+    get filteredData() {
+        return this._filteredData;
+    }
+    /** @hidden @internal */
+    set filteredData(val) {
+        this._filteredData = this.groupKey ? (val || []).filter((e) => e.isHeader !== true) : val;
+        this.checkMatch();
+    }
+    /**
+     * Select a defined item
+     *
+     * @param item the item to be selected
+     * ```typescript
+     * this.combo.select("New York");
+     * ```
+     */
+    select(item) {
+        if (item !== null && item !== undefined) {
+            const newSelection = this.selectionService.add_items(this.id, item instanceof Array ? item : [item], true);
+            this.setSelection(newSelection);
+        }
+    }
+    /**
+     * Deselect a defined item
+     *
+     * @param item the items to be deselected
+     * ```typescript
+     * this.combo.deselect("New York");
+     * ```
+     */
+    deselect(item) {
+        if (item !== null && item !== undefined) {
+            const newSelection = this.selectionService.delete_items(this.id, item instanceof Array ? item : [item]);
+            this.setSelection(newSelection);
+        }
+    }
+    /** @hidden @internal */
+    writeValue(value) {
+        const oldSelection = this.selection;
+        this.selectionService.select_items(this.id, value ? [value] : [], true);
+        this.cdr.markForCheck();
+        this._value = this.createDisplayText(this.selection, oldSelection);
+    }
+    /** @hidden @internal */
+    ngAfterViewInit() {
+        this.dropdown.opened.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.composing) {
+                this.comboInput.focus();
+            }
+        });
+        this.dropdown.closed.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.composing = false;
+        });
+        this.dropdown.closing.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            const selection = this.selectionService.first_item(this.id);
+            this.comboInput.value = selection !== undefined && selection !== null ? selection : '';
+        });
+        this.dropdown.opening.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (!this.comboInput.value.length) {
+                this.clearSelection();
+            }
+        });
+        super.ngAfterViewInit();
+    }
+    /** @hidden @internal */
+    handleInputChange(event) {
+        this.searchValue = event.target.value;
+        this._onChangeCallback(this.searchValue);
+        if (this.collapsed) {
+            this.open();
+        }
+        super.handleInputChange(event);
+    }
+    /** @hidden @internal */
+    handleKeyDown(event) {
+        if (event.key === this.platformUtil.KEYMAP.ENTER) {
+            const filtered = this.filteredData.find(this.findMatch);
+            if (filtered === null || filtered === undefined) {
+                return;
+            }
+            this.select(this.dropdown.items[0].itemID);
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+            return;
+        }
+        if (event.key === this.platformUtil.KEYMAP.BACKSPACE
+            || event.key === this.platformUtil.KEYMAP.DELETE) {
+            this._updateInput = false;
+            this.clearSelection();
+        }
+        super.handleKeyDown(event);
+        this.composing = event.key !== this.platformUtil.KEYMAP.ARROW_DOWN
+            && event.key !== this.platformUtil.KEYMAP.ARROW_LEFT
+            && event.key !== this.platformUtil.KEYMAP.ARROW_RIGHT
+            && event.key !== this.platformUtil.KEYMAP.TAB;
+    }
+    /** @hidden @internal */
+    handleKeyUp(event) {
+        if (event.key === this.platformUtil.KEYMAP.ARROW_DOWN) {
+            const firstItem = this.selectionService.first_item(this.id);
+            this.dropdown.focusedItem = firstItem && this.filteredData.length > 0
+                ? this.dropdown.items.find(i => i.itemID === firstItem)
+                : this.dropdown.items[0];
+            this.dropdownContainer.nativeElement.focus();
+        }
+    }
+    /** @hidden @internal */
+    getEditElement() {
+        return this.comboInput.nativeElement;
+    }
+    /** @hidden @internal */
+    handleClear(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 */
+    handleOpened() {
+        this.triggerCheck();
+        this.dropdownContainer.nativeElement.focus();
+        this.opened.emit({ owner: this });
+    }
+    /** @hidden @internal */
+    focusSearchInput(opening) {
+        if (opening) {
+            this.dropdownContainer.nativeElement.focus();
+        }
+        else {
+            this.comboInput.nativeElement.focus();
+            this.toggle();
+        }
+    }
+    setSelection(newSelection) {
+        const newSelectionAsArray = newSelection ? Array.from(newSelection) : [];
+        const oldSelectionAsArray = Array.from(this.selectionService.get(this.id) || []);
+        const displayText = this.createDisplayText(newSelectionAsArray, oldSelectionAsArray);
+        const args = {
+            newSelection: newSelectionAsArray[0],
+            oldSelection: oldSelectionAsArray[0],
+            displayText,
+            owner: this,
+            cancel: false
+        };
+        this.selectionChanging.emit(args);
+        if (!args.cancel) {
+            const argsSelection = args.newSelection !== undefined
+                && args.newSelection !== null
+                ? [args.newSelection]
+                : [];
+            this.selectionService.select_items(this.id, argsSelection, true);
+            if (this._updateInput) {
+                this._value = displayText !== args.displayText
+                    ? args.displayText
+                    : this.createDisplayText([args.newSelection], [args.oldSelection]);
+            }
+            this._onChangeCallback(args.newSelection);
+            this._updateInput = true;
+        }
+    }
+    createDisplayText(newSelection, oldSelection) {
+        if (this.isRemote) {
+            return this.getRemoteSelection(newSelection, oldSelection);
+        }
+        return this.displayKey !== null && this.displayKey !== undefined
+            ? this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0]
+            : newSelection[0];
+    }
+    clearSelection(ignoreFilter) {
+        let newSelection = this.selectionService.get_empty();
+        if (this.filteredData.length !== this.data.length && !ignoreFilter) {
+            newSelection = this.selectionService.delete_items(this.id, this.selectionService.get_all_ids(this.filteredData, this.valueKey));
+        }
+        this.setSelection(newSelection);
+    }
+}
+IgxSimpleComboComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'igx-simple-combo',
+                template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\"\n        aria-autocomplete=\"both\" [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [disabled]=\"disabled\" [igxTextSelection]=\"!composing\" />\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\">\n        <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"close()\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:true\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
+                providers: [
+                    IgxComboAPIService,
+                    { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
+                    { provide: NG_VALUE_ACCESSOR, useExisting: IgxSimpleComboComponent, multi: true }
+                ]
+            },] }
+];
+IgxSimpleComboComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ChangeDetectorRef },
+    { type: IgxSelectionAPIService },
+    { type: IgxComboAPIService },
+    { type: IgxIconService },
+    { type: PlatformUtil },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DisplayDensityToken,] }] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [IGX_INPUT_GROUP_TYPE,] }] },
+    { type: Injector, decorators: [{ type: Optional }] }
+];
+IgxSimpleComboComponent.propDecorators = {
+    dropdown: [{ type: ViewChild, args: [IgxComboDropDownComponent, { static: true },] }],
+    selectionChanging: [{ type: Output }]
+};
+class IgxSimpleComboModule {
+}
+IgxSimpleComboModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [IgxSimpleComboComponent],
+                imports: [
+                    IgxComboModule, IgxRippleModule, CommonModule,
+                    IgxInputGroupModule, FormsModule, ReactiveFormsModule,
+                    IgxForOfModule, IgxToggleModule, IgxCheckboxModule,
+                    IgxDropDownModule, IgxButtonModule, IgxIconModule,
+                    IgxTextSelectionModule
+                ],
+                exports: [IgxSimpleComboComponent, IgxComboModule]
+            },] }
+];
+
 /** Header orientation in `dialog` mode. */
 const PickerHeaderOrientation = mkenum({
     Horizontal: 'horizontal',
@@ -61325,6 +61565,22 @@ class IgxGridComponent extends IgxGridBaseDirective {
         }
         this._hideGroupedColumns = value;
     }
+    /**
+     * 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 groupStrategy() {
+        return this._groupStrategy;
+    }
+    set groupStrategy(value) {
+        this._groupStrategy = value;
+    }
     /**
      * Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.
      *
@@ -62077,7 +62333,7 @@ IgxGridComponent.decorators = [
                     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 = {
@@ -62103,6 +62359,7 @@ IgxGridComponent.propDecorators = {
     groupingExpressions: [{ type: Input }],
     groupingExpansionState: [{ type: Input }],
     hideGroupedColumns: [{ type: Input }],
+    groupStrategy: [{ type: Input }],
     dropAreaMessage: [{ type: Input }],
     showGroupArea: [{ type: Input }]
 };
@@ -63625,7 +63882,7 @@ class IgxGridGroupingPipe {
     constructor(gridAPI) {
         this.gridAPI = gridAPI;
     }
-    transform(collection, expression, expansion, defaultExpanded, id, groupsRecords, _pipeTrigger) {
+    transform(collection, expression, expansion, groupingStrategy, defaultExpanded, id, groupsRecords, _pipeTrigger) {
         const state = { expressions: [], expansion: [], defaultExpanded };
         const grid = this.gridAPI.grid;
         state.expressions = grid.groupingExpressions;
@@ -63642,7 +63899,7 @@ class IgxGridGroupingPipe {
         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;
@@ -72849,30 +73106,35 @@ class IgxToastComponent extends IgxNotificationsDirective {
          * @hidden
          */
         this.isVisibleChange = new EventEmitter();
-        /**
-         * Sets/gets the position of the toast.
-         * If not set, the `position` attribute will have value `IgxToastPosition.Bottom`.
-         * ```html
-         * <igx-toast [position]="top"></igx-toast>
-         * ```
-         * ```typescript
-         * let toastPosition = this.toast.position;
-         * ```
-         *
-         * @memberof IgxToastComponent
-         */
-        this.position = 'bottom';
+        this._position = 'bottom';
         this._positionSettings = {
             horizontalDirection: HorizontalAlignment.Center,
-            verticalDirection: this.position === 'bottom'
-                ? VerticalAlignment.Bottom
-                : this.position === 'middle'
-                    ? VerticalAlignment.Middle
-                    : VerticalAlignment.Top,
+            verticalDirection: VerticalAlignment.Bottom,
             openAnimation: useAnimation(fadeIn),
             closeAnimation: useAnimation(fadeOut),
         };
     }
+    /**
+     * Sets/gets the position of the toast.
+     * If not set, the `position` attribute will have value `IgxToastPosition.Bottom`.
+     * ```html
+     * <igx-toast [position]="top"></igx-toast>
+     * ```
+     * ```typescript
+     * let toastPosition = this.toast.position;
+     * ```
+     *
+     * @memberof IgxToastComponent
+     */
+    get position() {
+        return this._position;
+    }
+    set position(position) {
+        if (position) {
+            this._position = position;
+            this._positionSettings.verticalDirection = this.calculatePosition();
+        }
+    }
     /**
      * Get the position and animation settings used by the toast.
      * ```typescript
@@ -72925,10 +73187,13 @@ class IgxToastComponent extends IgxNotificationsDirective {
      * this.toast.open();
      * ```
      */
-    open(message) {
+    open(message, settings) {
         if (message !== undefined) {
             this.textMessage = message;
         }
+        if (settings !== undefined) {
+            this.positionSettings = settings;
+        }
         this.strategy = new GlobalPositionStrategy(this.positionSettings);
         super.open();
     }
@@ -72960,6 +73225,18 @@ class IgxToastComponent extends IgxNotificationsDirective {
             this.isVisibleChange.emit(closedEventArgs);
         });
     }
+    ngOnChanges(changes) {
+        if (changes['position'] && this._positionSettings) {
+            this._positionSettings.verticalDirection = this.calculatePosition();
+        }
+    }
+    calculatePosition() {
+        return this.position === 'bottom'
+            ? VerticalAlignment.Bottom
+            : this.position === 'middle'
+                ? VerticalAlignment.Middle
+                : VerticalAlignment.Top;
+    }
 }
 IgxToastComponent.decorators = [
     { type: Component, args: [{
@@ -72981,6 +73258,9 @@ IgxToastComponent.propDecorators = {
     position: [{ type: Input }],
     positionSettings: [{ type: Input }]
 };
+__decorate([
+    DeprecateProperty('`position` is deprecated. We suggest using `positionSettings` property instead.')
+], IgxToastComponent.prototype, "position", null);
 /**
  * @hidden
  */
@@ -76374,5 +76654,5 @@ IgxTreeModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BaseProgressDirective, BlockScrollStrategy, ButtonGroupAlignment, Calendar, CalendarHammerConfig, CalendarSelection, CalendarView, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultSortingStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportRecordType, FilterListItem, FilterMode, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GlobalPositionStrategy, GridBaseAPIService, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupedRecords, HeaderType, HorizontalAlignment, IGX_CHECKBOX_REQUIRED_VALIDATOR, IGX_INPUT_GROUP_TYPE, IGX_SWITCH_REQUIRED_VALIDATOR, ITreeGridAggregation, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripModule, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarBaseDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollMonthDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCardType, IgxCarouselComponent, IgxCarouselComponentBase, IgxCarouselModule, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxCheckboxRequiredDirective, IgxChipComponent, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnActionsModule, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxComboComponent, IgxComboModule, IgxComboState, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogComponent, IgxDialogModule, IgxDisplayDensityModule, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragLocation, IgxDropDirective, IgxDropDownBaseDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemBaseDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelModule, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridAPIService, IgxGridActionsBaseDirective, IgxGridBaseDirective, IgxGridBodyDirective, IgxGridCell, IgxGridCommonModule, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridForOfDirective, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalPipe, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridStateModule, IgxGridToolbarActionsDirective, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleDirective, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHierarchicalGridAPIService, IgxHierarchicalGridBaseDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHierarchicalTransactionServiceFactory, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerBaseDirective, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorDirective, IgxPaginatorModule, IgxPaginatorTemplateDirective, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPickersCommonModule, IgxPrefixDirective, IgxPrefixModule, IgxPrependDropStrategy, IgxProgressBarModule, IgxProgressType, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandAPIService, IgxRowIslandComponent, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSorting, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStringFilteringOperand, IgxSuffixDirective, IgxSuffixModule, IgxSummaryOperand, IgxSummaryRow, IgxSwitchComponent, IgxSwitchModule, IgxSwitchRequiredDirective, IgxTabContentComponent, IgxTabContentDirective, IgxTabHeaderComponent, IgxTabHeaderDirective, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabItemDirective, IgxTabsAlignment, IgxTabsComponent, IgxTabsDirective, IgxTabsModule, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToastPosition, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridAPIService, IgxTreeGridComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectMarkerDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowEditPositionStrategy, RowPinningPosition, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, WEEKDAYS, blink, changei18n, fadeIn, fadeOut, filteringStateDefaults, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, flipVerBck, flipVerFwd, getCurrentResourceStrings, getTypeNameForDebugging, growVerIn, growVerOut, heartbeat, hierarchicalTransactionServiceFactory, isDateInRanges, isLeap, monthRange, pulsateBck, pulsateFwd, range, rotateInBl, rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd, toPercent, valueInRange, weekDay, ɵ1, ɵ2, IgxActionStripMenuItemDirective as ɵa, IGX_DROPDOWN_BASE as ɵb, IgxGridActionButtonComponent as ɵba, ToggleAnimationPlayer as ɵbb, IgxExpansionPanelTitleDirective as ɵbc, IgxExpansionPanelDescriptionDirective as ɵbd, IgxExpansionPanelIconDirective as ɵbe, IgxBannerActionsDirective as ɵbf, IgxDaysViewNavigationService as ɵbg, IgxDayItemComponent as ɵbh, IgxMonthViewSlotsCalendar as ɵbi, IgxGetViewDateCalendar as ɵbj, IgxCarouselIndicatorDirective as ɵbk, IgxCarouselNextButtonDirective as ɵbl, IgxCarouselPrevButtonDirective as ɵbm, IgxComboAPIService as ɵbn, IGX_COMBO_COMPONENT as ɵbo, IgxComboDropDownComponent as ɵbq, IgxComboItemComponent as ɵbr, IgxComboHeaderDirective as ɵbs, IgxComboFooterDirective as ɵbt, IgxComboItemDirective as ɵbu, IgxComboEmptyDirective as ɵbv, IgxComboHeaderItemDirective as ɵbw, IgxComboAddItemDirective as ɵbx, IgxComboToggleIconDirective as ɵby, IgxComboClearIconDirective as ɵbz, IgxComboFilteringPipe as ɵca, IgxComboGroupingPipe as ɵcb, IgxComboAddItemComponent as ɵcc, PickerBaseDirective as ɵcd, IgxCalendarContainerComponent as ɵce, IgxCalendarContainerModule as ɵcf, IgxDialogTitleDirective as ɵcg, IgxDialogActionsDirective as ɵch, IgxCellCrudState as ɵci, IgxRowCrudState as ɵcj, IgxRowAddCrudState as ɵck, IgxGridCRUDService as ɵcl, IgxColumnMovingService as ɵcm, IgxExcelStyleCustomDialogComponent as ɵcn, IgxExcelStyleDefaultExpressionComponent as ɵco, IgxExcelStyleDateExpressionComponent as ɵcp, HammerGesturesManager as ɵcq, WatchChanges as ɵcr, WatchColumnChanges as ɵcs, notifyChanges as ɵct, IgxNotificationsDirective as ɵcu, IgxGridColumnResizerComponent as ɵcv, IgxColumnResizerDirective as ɵcw, IgxColumnResizingService as ɵcx, IgxRowSelectorDirective as ɵcy, IgxGroupByRowSelectorDirective as ɵcz, IgxGridSelectionService as ɵd, IgxHeadSelectorDirective as ɵda, IgxRowDragDirective as ɵdb, IgxDragIndicatorIconDirective as ɵdc, IgxRowDragGhostDirective as ɵdd, IgxRowDragModule as ɵde, IgxGridHeaderRowComponent as ɵdf, IgxGridHeaderGroupComponent as ɵdg, IgxGridHeaderComponent as ɵdh, IgxGridFilteringCellComponent as ɵdi, IgxFilteringService as ɵdj, IgxGridFilteringRowComponent as ɵdk, IgxGridGroupByAreaComponent as ɵdl, IgxGroupByAreaDirective as ɵdm, IgxGroupByMetaPipe as ɵdn, IgxTemplateOutletDirective as ɵdo, IgxTemplateOutletModule as ɵdp, IgxRowEditTemplateDirective as ɵdq, IgxRowEditTextDirective as ɵdr, IgxRowAddTextDirective as ɵds, IgxRowEditActionsDirective as ɵdt, IgxRowEditTabStopDirective as ɵdu, IgxSummaryRowComponent as ɵdv, IgxSummaryCellComponent as ɵdw, IgxRowDirective as ɵdx, IgxGridNavigationService as ɵdy, IgxGridSummaryService as ɵdz, ConnectedPositioningStrategy as ɵea, IgxGridGroupByRowComponent as ɵeb, IgxTreeGridSelectionService as ɵec, IgxTreeGridGroupByAreaComponent as ɵed, IgxRowLoadingIndicatorTemplateDirective as ɵee, IgxHierarchicalGridNavigationService as ɵef, IgxChildGridRowComponent as ɵeg, IgxGridCellComponent as ɵeh, IgxGridFooterComponent as ɵei, IgxAdvancedFilteringDialogComponent as ɵej, IgxColumnHidingDirective as ɵek, IgxColumnPinningDirective as ɵel, IgxGridSharedModules as ɵem, IgxProcessBarTextTemplateDirective as ɵen, IgxProgressBarGradientDirective as ɵeo, DIR_DOCUMENT_FACTORY as ɵep, DIR_DOCUMENT as ɵeq, IgxDirectionality as ɵer, IgxSelectItemNavigationDirective as ɵes, IGX_TIME_PICKER_COMPONENT as ɵet, IgxItemListDirective as ɵev, IgxTimeItemDirective as ɵew, IgxTimePickerTemplateDirective as ɵex, IgxTimePickerActionsDirective as ɵey, TimeFormatPipe as ɵez, IGX_EXPANSION_PANEL_COMPONENT as ɵf, TimeItemPipe as ɵfa, IgxGridPipesModule as ɵfb, IgxGridCellStyleClassesPipe as ɵfc, IgxGridCellStylesPipe as ɵfd, IgxGridRowClassesPipe as ɵfe, IgxGridRowStylesPipe as ɵff, IgxGridNotGroupedPipe as ɵfg, IgxGridTopLevelColumns as ɵfh, IgxGridFilterConditionPipe as ɵfi, IgxGridTransactionPipe as ɵfj, IgxGridPaginatorOptionsPipe as ɵfk, IgxHasVisibleColumnsPipe as ɵfl, IgxGridRowPinningPipe as ɵfm, IgxColumnActionEnabledPipe as ɵfn, IgxFilterActionColumnsPipe as ɵfo, IgxSortActionColumnsPipe as ɵfp, IgxGridDataMapperPipe as ɵfq, IgxStringReplacePipe as ɵfr, IgxGridTransactionStatePipe as ɵfs, IgxColumnFormatterPipe as ɵft, IgxSummaryFormatterPipe as ɵfu, IgxGridAddRowPipe as ɵfv, IgxHeaderGroupWidthPipe as ɵfw, IgxHeaderGroupStylePipe as ɵfx, IgxGridColumnModule as ɵfy, IgxGridHeadersModule as ɵfz, IGX_TREE_COMPONENT as ɵg, SortingIndexPipe as ɵga, IgxGridFilteringModule as ɵgb, IgxColumnMovingModule as ɵgc, IgxColumnMovingDropDirective as ɵgd, IgxColumnMovingDragDirective as ɵge, IgxGridResizingModule as ɵgf, IgxResizeHandleDirective as ɵgg, IgxGridExcelStyleFilteringModule as ɵgh, IgxGridSelectionModule as ɵgi, IgxGridDragSelectDirective as ɵgj, IgxGridSummaryModule as ɵgk, IgxSummaryDataPipe as ɵgl, IgxGridToolbarModule as ɵgm, BaseToolbarDirective as ɵgn, BaseToolbarColumnActionsDirective as ɵgo, IgxGridRowComponent as ɵgp, IgxGridSortingPipe as ɵgq, IgxGridGroupingPipe as ɵgr, IgxGridPagingPipe as ɵgs, IgxGridFilteringPipe as ɵgt, IgxGridSummaryPipe as ɵgu, IgxGridDetailsPipe as ɵgv, IgxGridExpandableCellComponent as ɵgw, IgxTreeGridRowComponent as ɵgx, IgxTreeGridCellComponent as ɵgy, IgxTreeGridHierarchizingPipe as ɵgz, IGX_TREE_NODE_COMPONENT as ɵh, IgxTreeGridFlatteningPipe as ɵha, IgxTreeGridSortingPipe as ɵhb, IgxTreeGridPagingPipe as ɵhc, IgxTreeGridTransactionPipe as ɵhd, IgxTreeGridNormalizeRecordsPipe as ɵhe, IgxTreeGridAddRowPipe as ɵhf, IgxTreeGridFilteringPipe as ɵhg, IgxTreeGridSummaryPipe as ɵhh, IgxHierarchicalRowComponent as ɵhi, IgxHierarchicalGridCellComponent as ɵhj, IgxSliderThumbComponent as ɵhk, IgxThumbLabelComponent as ɵhl, IgxTicksComponent as ɵhm, IgxTickLabelsPipe as ɵhn, IgxTabsBase as ɵho, IgxTabHeaderBase as ɵhp, IgxTabContentBase as ɵhq, IgxSplitBarComponent as ɵhr, IgxTreeService as ɵhs, IgxTreeSelectionService as ɵht, IgxTreeNavigationService as ɵhu, PlatformUtil as ɵi, EaseIn as ɵj, EaseOut as ɵk, IgxInputGroupBase as ɵl, IgxSelectionAPIService as ɵm, IgxForOfSyncService as ɵn, IgxForOfScrollSyncService as ɵo, DisplayContainerComponent as ɵp, IgxScrollInertiaDirective as ɵq, IgxScrollInertiaModule as ɵr, VirtualHelperComponent as ɵs, VirtualHelperBaseDirective as ɵt, HVirtualHelperComponent as ɵu, MaskParsingService as ɵv, DeprecateMethod as ɵw, DeprecateProperty as ɵx, isHierarchyMatch as ɵy, getHierarchy as ɵz };
+export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BaseProgressDirective, BlockScrollStrategy, ButtonGroupAlignment, Calendar, CalendarHammerConfig, CalendarSelection, CalendarView, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultSortingStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportRecordType, FilterListItem, FilterMode, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GlobalPositionStrategy, GridBaseAPIService, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupedRecords, HeaderType, HorizontalAlignment, IGX_CHECKBOX_REQUIRED_VALIDATOR, IGX_INPUT_GROUP_TYPE, IGX_SWITCH_REQUIRED_VALIDATOR, ITreeGridAggregation, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripModule, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarBaseDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollMonthDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCardType, IgxCarouselComponent, IgxCarouselComponentBase, IgxCarouselModule, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxCheckboxRequiredDirective, IgxChipComponent, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnActionsModule, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxComboComponent, IgxComboModule, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogComponent, IgxDialogModule, IgxDisplayDensityModule, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragLocation, IgxDropDirective, IgxDropDownBaseDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemBaseDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelModule, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridAPIService, IgxGridActionsBaseDirective, IgxGridBaseDirective, IgxGridBodyDirective, IgxGridCell, IgxGridCommonModule, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridForOfDirective, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalPipe, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridStateModule, IgxGridToolbarActionsDirective, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleDirective, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHierarchicalGridAPIService, IgxHierarchicalGridBaseDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHierarchicalTransactionServiceFactory, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerBaseDirective, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorDirective, IgxPaginatorModule, IgxPaginatorTemplateDirective, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPickersCommonModule, IgxPrefixDirective, IgxPrefixModule, IgxPrependDropStrategy, IgxProgressBarModule, IgxProgressType, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandAPIService, IgxRowIslandComponent, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSorting, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStringFilteringOperand, IgxSuffixDirective, IgxSuffixModule, IgxSummaryOperand, IgxSummaryRow, IgxSwitchComponent, IgxSwitchModule, IgxSwitchRequiredDirective, IgxTabContentComponent, IgxTabContentDirective, IgxTabHeaderComponent, IgxTabHeaderDirective, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabItemDirective, IgxTabsAlignment, IgxTabsComponent, IgxTabsDirective, IgxTabsModule, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToastPosition, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridAPIService, IgxTreeGridComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectMarkerDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowEditPositionStrategy, RowPinningPosition, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, WEEKDAYS, blink, changei18n, fadeIn, fadeOut, filteringStateDefaults, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, flipVerBck, flipVerFwd, getCurrentResourceStrings, getTypeNameForDebugging, growVerIn, growVerOut, heartbeat, hierarchicalTransactionServiceFactory, isDateInRanges, isLeap, monthRange, pulsateBck, pulsateFwd, range, rotateInBl, rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd, toPercent, valueInRange, weekDay, ɵ1, ɵ2, IgxActionStripMenuItemDirective as ɵa, IGX_DROPDOWN_BASE as ɵb, IgxGridActionButtonComponent as ɵba, ToggleAnimationPlayer as ɵbb, IgxExpansionPanelTitleDirective as ɵbc, IgxExpansionPanelDescriptionDirective as ɵbd, IgxExpansionPanelIconDirective as ɵbe, IgxBannerActionsDirective as ɵbf, IgxDaysViewNavigationService as ɵbg, IgxDayItemComponent as ɵbh, IgxMonthViewSlotsCalendar as ɵbi, IgxGetViewDateCalendar as ɵbj, IgxCarouselIndicatorDirective as ɵbk, IgxCarouselNextButtonDirective as ɵbl, IgxCarouselPrevButtonDirective as ɵbm, IGX_COMBO_COMPONENT as ɵbn, IgxComboBaseDirective as ɵbp, IgxComboHeaderDirective as ɵbq, IgxComboFooterDirective as ɵbr, IgxComboItemDirective as ɵbs, IgxComboEmptyDirective as ɵbt, IgxComboHeaderItemDirective as ɵbu, IgxComboAddItemDirective as ɵbv, IgxComboToggleIconDirective as ɵbw, IgxComboClearIconDirective as ɵbx, IgxComboAPIService as ɵby, IgxComboDropDownComponent as ɵbz, IgxComboItemComponent as ɵca, IgxComboFilteringPipe as ɵcb, IgxComboGroupingPipe as ɵcc, IgxComboAddItemComponent as ɵcd, PickerBaseDirective as ɵce, IgxCalendarContainerComponent as ɵcf, IgxCalendarContainerModule as ɵcg, IgxDialogTitleDirective as ɵch, IgxDialogActionsDirective as ɵci, IgxCellCrudState as ɵcj, IgxRowCrudState as ɵck, IgxRowAddCrudState as ɵcl, IgxGridCRUDService as ɵcm, IgxColumnMovingService as ɵcn, IgxExcelStyleCustomDialogComponent as ɵco, IgxExcelStyleDefaultExpressionComponent as ɵcp, IgxExcelStyleDateExpressionComponent as ɵcq, HammerGesturesManager as ɵcr, WatchChanges as ɵcs, WatchColumnChanges as ɵct, notifyChanges as ɵcu, IgxNotificationsDirective as ɵcv, IgxGridColumnResizerComponent as ɵcw, IgxColumnResizerDirective as ɵcx, IgxColumnResizingService as ɵcy, IgxRowSelectorDirective as ɵcz, IgxGridSelectionService as ɵd, IgxGroupByRowSelectorDirective as ɵda, IgxHeadSelectorDirective as ɵdb, IgxRowDragDirective as ɵdc, IgxDragIndicatorIconDirective as ɵdd, IgxRowDragGhostDirective as ɵde, IgxRowDragModule as ɵdf, IgxGridHeaderRowComponent as ɵdg, IgxGridHeaderGroupComponent as ɵdh, IgxGridHeaderComponent as ɵdi, IgxGridFilteringCellComponent as ɵdj, IgxFilteringService as ɵdk, IgxGridFilteringRowComponent as ɵdl, IgxGridGroupByAreaComponent as ɵdm, IgxGroupByAreaDirective as ɵdn, IgxGroupByMetaPipe as ɵdo, IgxTemplateOutletDirective as ɵdp, IgxTemplateOutletModule as ɵdq, IgxRowEditTemplateDirective as ɵdr, IgxRowEditTextDirective as ɵds, IgxRowAddTextDirective as ɵdt, IgxRowEditActionsDirective as ɵdu, IgxRowEditTabStopDirective as ɵdv, IgxSummaryRowComponent as ɵdw, IgxSummaryCellComponent as ɵdx, IgxRowDirective as ɵdy, IgxGridNavigationService as ɵdz, IgxGridSummaryService as ɵea, ConnectedPositioningStrategy as ɵeb, IgxGridGroupByRowComponent as ɵec, IgxTreeGridSelectionService as ɵed, IgxTreeGridGroupByAreaComponent as ɵee, IgxRowLoadingIndicatorTemplateDirective as ɵef, IgxHierarchicalGridNavigationService as ɵeg, IgxChildGridRowComponent as ɵeh, IgxGridCellComponent as ɵei, IgxGridFooterComponent as ɵej, IgxAdvancedFilteringDialogComponent as ɵek, IgxColumnHidingDirective as ɵel, IgxColumnPinningDirective as ɵem, IgxGridSharedModules as ɵen, IgxProcessBarTextTemplateDirective as ɵeo, IgxProgressBarGradientDirective as ɵep, DIR_DOCUMENT_FACTORY as ɵeq, DIR_DOCUMENT as ɵer, IgxDirectionality as ɵes, IgxSelectItemNavigationDirective as ɵet, IGX_TIME_PICKER_COMPONENT as ɵeu, IgxItemListDirective as ɵew, IgxTimeItemDirective as ɵex, IgxTimePickerTemplateDirective as ɵey, IgxTimePickerActionsDirective as ɵez, IGX_EXPANSION_PANEL_COMPONENT as ɵf, TimeFormatPipe as ɵfa, TimeItemPipe as ɵfb, IgxGridPipesModule as ɵfc, IgxGridCellStyleClassesPipe as ɵfd, IgxGridCellStylesPipe as ɵfe, IgxGridRowClassesPipe as ɵff, IgxGridRowStylesPipe as ɵfg, IgxGridNotGroupedPipe as ɵfh, IgxGridTopLevelColumns as ɵfi, IgxGridFilterConditionPipe as ɵfj, IgxGridTransactionPipe as ɵfk, IgxGridPaginatorOptionsPipe as ɵfl, IgxHasVisibleColumnsPipe as ɵfm, IgxGridRowPinningPipe as ɵfn, IgxColumnActionEnabledPipe as ɵfo, IgxFilterActionColumnsPipe as ɵfp, IgxSortActionColumnsPipe as ɵfq, IgxGridDataMapperPipe as ɵfr, IgxStringReplacePipe as ɵfs, IgxGridTransactionStatePipe as ɵft, IgxColumnFormatterPipe as ɵfu, IgxSummaryFormatterPipe as ɵfv, IgxGridAddRowPipe as ɵfw, IgxHeaderGroupWidthPipe as ɵfx, IgxHeaderGroupStylePipe as ɵfy, IgxGridColumnModule as ɵfz, IGX_TREE_COMPONENT as ɵg, IgxGridHeadersModule as ɵga, SortingIndexPipe as ɵgb, IgxGridFilteringModule as ɵgc, IgxColumnMovingModule as ɵgd, IgxColumnMovingDropDirective as ɵge, IgxColumnMovingDragDirective as ɵgf, IgxGridResizingModule as ɵgg, IgxResizeHandleDirective as ɵgh, IgxGridExcelStyleFilteringModule as ɵgi, IgxGridSelectionModule as ɵgj, IgxGridDragSelectDirective as ɵgk, IgxGridSummaryModule as ɵgl, IgxSummaryDataPipe as ɵgm, IgxGridToolbarModule as ɵgn, BaseToolbarDirective as ɵgo, BaseToolbarColumnActionsDirective as ɵgp, IgxGridRowComponent as ɵgq, IgxGridSortingPipe as ɵgr, IgxGridGroupingPipe as ɵgs, IgxGridPagingPipe as ɵgt, IgxGridFilteringPipe as ɵgu, IgxGridSummaryPipe as ɵgv, IgxGridDetailsPipe as ɵgw, IgxGridExpandableCellComponent as ɵgx, IgxTreeGridRowComponent as ɵgy, IgxTreeGridCellComponent as ɵgz, IGX_TREE_NODE_COMPONENT as ɵh, IgxTreeGridHierarchizingPipe as ɵha, IgxTreeGridFlatteningPipe as ɵhb, IgxTreeGridSortingPipe as ɵhc, IgxTreeGridPagingPipe as ɵhd, IgxTreeGridTransactionPipe as ɵhe, IgxTreeGridNormalizeRecordsPipe as ɵhf, IgxTreeGridAddRowPipe as ɵhg, IgxTreeGridFilteringPipe as ɵhh, IgxTreeGridSummaryPipe as ɵhi, IgxHierarchicalRowComponent as ɵhj, IgxHierarchicalGridCellComponent as ɵhk, IgxSliderThumbComponent as ɵhl, IgxThumbLabelComponent as ɵhm, IgxTicksComponent as ɵhn, IgxTickLabelsPipe as ɵho, IgxTabsBase as ɵhp, IgxTabHeaderBase as ɵhq, IgxTabContentBase as ɵhr, IgxSplitBarComponent as ɵhs, IgxTreeService as ɵht, IgxTreeSelectionService as ɵhu, IgxTreeNavigationService as ɵhv, PlatformUtil as ɵi, EaseIn as ɵj, EaseOut as ɵk, IgxInputGroupBase as ɵl, IgxSelectionAPIService as ɵm, IgxForOfSyncService as ɵn, IgxForOfScrollSyncService as ɵo, DisplayContainerComponent as ɵp, IgxScrollInertiaDirective as ɵq, IgxScrollInertiaModule as ɵr, VirtualHelperComponent as ɵs, VirtualHelperBaseDirective as ɵt, HVirtualHelperComponent as ɵu, MaskParsingService as ɵv, DeprecateMethod as ɵw, DeprecateProperty as ɵx, isHierarchyMatch as ɵy, getHierarchy as ɵz };
 //# sourceMappingURL=igniteui-angular.js.map