igniteui-angular 12.2.6 → 12.3.1

package/fesm2015/igniteui-angular.js

@@ -1711,8 +1711,17 @@ class IgxSorting {
                     fullResult.data.push(groupItem);
                 }
                 if (expanded) {
-                    metadata.push(...fullResult.metadata.slice(fullResult.metadata.length - group.length));
-                    result.push(...fullResult.data.slice(fullResult.data.length - group.length));
+                    // Replaced object destructing as in a single big group scenario
+                    // it hits the max number of arguments for a function the underlying JS engine
+                    // supports.
+                    let j = fullResult.metadata.length - group.length;
+                    for (; j < fullResult.metadata.length; j++) {
+                        metadata.push(fullResult.metadata[j]);
+                    }
+                    j = fullResult.data.length - group.length;
+                    for (; j < fullResult.data.length; j++) {
+                        result.push(fullResult.data[j]);
+                    }
                 }
             }
             i += group.length;
@@ -27577,6 +27586,7 @@ class IgxAccordionComponent {
     /** @hidden @internal **/
     ngAfterViewInit() {
         this._expandedPanels = new Set(this._panels.filter(panel => !panel.collapsed));
+        this._expandingPanels = new Set();
         this._panels.changes.pipe(takeUntil(this._destroy$)).subscribe(() => {
             this.subToChanges();
         });
@@ -27679,6 +27689,7 @@ class IgxAccordionComponent {
         this._panels.forEach(panel => {
             panel.contentExpanded.pipe(takeUntil(this._unsubChildren$)).subscribe((args) => {
                 this._expandedPanels.add(args.owner);
+                this._expandingPanels.delete(args.owner);
                 const evArgs = Object.assign(Object.assign({}, args), { owner: this, panel: args.owner });
                 this.panelExpanded.emit(evArgs);
             });
@@ -27686,21 +27697,36 @@ class IgxAccordionComponent {
                 if (args.cancel) {
                     return;
                 }
+                const evArgs = Object.assign(Object.assign({}, args), { owner: this, panel: args.owner });
+                this.panelExpanding.emit(evArgs);
+                if (evArgs.cancel) {
+                    args.cancel = true;
+                    return;
+                }
                 if (this.singleBranchExpand) {
                     this._expandedPanels.forEach(p => {
                         if (!p.header.disabled) {
                             p.collapse();
                         }
                     });
-                }
-                const evArgs = Object.assign(Object.assign({}, args), { owner: this, panel: args.owner });
-                this.panelExpanding.emit(evArgs);
-                if (evArgs.cancel) {
-                    args.cancel = true;
+                    this._expandingPanels.forEach(p => {
+                        var _a, _b;
+                        if (!p.header.disabled) {
+                            if (!p.animationSettings.closeAnimation) {
+                                (_a = p.openAnimationPlayer) === null || _a === void 0 ? void 0 : _a.reset();
+                            }
+                            if (!p.animationSettings.openAnimation) {
+                                (_b = p.closeAnimationPlayer) === null || _b === void 0 ? void 0 : _b.reset();
+                            }
+                            p.collapse();
+                        }
+                    });
+                    this._expandingPanels.add(args.owner);
                 }
             });
             panel.contentCollapsed.pipe(takeUntil(this._unsubChildren$)).subscribe((args) => {
                 this._expandedPanels.delete(args.owner);
+                this._expandingPanels.delete(args.owner);
                 const evArgs = Object.assign(Object.assign({}, args), { owner: this, panel: args.owner });
                 this.panelCollapsed.emit(evArgs);
             });
@@ -34871,10 +34897,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) {
@@ -34972,7 +34998,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 = () => [
@@ -34982,311 +35008,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";
@@ -35294,20 +35034,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) {
     /**
@@ -35323,52 +35049,31 @@ 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;
         this._inputGroupType = _inputGroupType;
         this._injector = _injector;
+        /**
+         * Defines whether the caseSensitive icon should be shown in the search input
+         *
+         * ```typescript
+         * // get
+         * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
+         * ```
+         */
+        this.showSearchCaseIcon = false;
         /**
          * Set custom overlay settings that control how the combo's list of items is displayed.
          * Set:
@@ -35387,9 +35092,121 @@ 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;
+        /**
+         * An @Input property that enabled/disables filtering in the list. The default is `true`.
+         * ```html
+         * <igx-combo [filterable]="false">
+         * ```
+         */
+        this.filterable = true;
+        /** @hidden @internal */
+        this.cssClass = 'igx-combo'; // Independent of display density for the time being
+        /** @hidden @internal */
+        this.role = 'combobox';
+        /**
+         * An @Input property that enabled/disables combo. The default is `false`.
+         * ```html
+         * <igx-combo [disabled]="'true'">
+         * ```
+         */
+        this.disabled = false;
+        /**
+         * Emitted before the dropdown is opened
+         *
+         * ```html
+         * <igx-combo opening='handleOpening($event)'></igx-combo>
+         * ```
+         */
+        this.opening = new 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
          *
@@ -35553,207 +35370,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)) {
@@ -35770,31 +35414,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
@@ -35840,12 +35463,6 @@ class IgxComboComponent extends DisplayDensityBase {
     set itemHeight(val) {
         this._itemHeight = val;
     }
-    /**
-     * @hidden @internal
-     */
-    get inputEmpty() {
-        return !this.value && !this.placeholder;
-    }
     /**
      * Combo data source.
      *
@@ -35864,7 +35481,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
@@ -35905,6 +35522,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`.
@@ -35918,6 +35547,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
      *
@@ -35942,32 +35592,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`
@@ -35991,6 +35624,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.
      *
@@ -36013,94 +35656,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
@@ -36109,27 +35750,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;
         }
@@ -36154,33 +35797,91 @@ 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 */
+    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
      */
+    handleOpening(e) {
+        const args = { owner: this, event: e.event, cancel: e.cancel };
+        this.opening.emit(args);
+        e.cancel = args.cancel;
+    }
+    /** @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();
@@ -36192,174 +35893,600 @@ class IgxComboComponent extends DisplayDensityBase {
             }
         }
     }
+    /** @hidden @internal */
+    toggleCaseSensitive() {
+        this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
+    }
+    /** 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 }[]`
      */
-    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]
+    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 = {
+    showSearchCaseIcon: [{ type: Input }],
+    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 }],
+    filterable: [{ 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 }],
+    opening: [{ type: Output }],
+    opened: [{ type: Output }],
+    closing: [{ type: Output }],
+    closed: [{ type: Output }],
+    addition: [{ type: Output }],
+    searchInputUpdate: [{ type: Output }],
+    dataPreLoad: [{ type: Output }],
+    itemTemplate: [{ type: ContentChild, args: [IgxComboItemDirective, { read: TemplateRef },] }],
+    headerTemplate: [{ type: ContentChild, args: [IgxComboHeaderDirective, { read: TemplateRef },] }],
+    footerTemplate: [{ type: ContentChild, args: [IgxComboFooterDirective, { read: TemplateRef },] }],
+    headerItemTemplate: [{ type: ContentChild, args: [IgxComboHeaderItemDirective, { read: TemplateRef },] }],
+    addItemTemplate: [{ type: ContentChild, args: [IgxComboAddItemDirective, { read: TemplateRef },] }],
+    emptyTemplate: [{ type: ContentChild, args: [IgxComboEmptyDirective, { read: TemplateRef },] }],
+    toggleIconTemplate: [{ type: ContentChild, args: [IgxComboToggleIconDirective, { read: TemplateRef },] }],
+    clearIconTemplate: [{ type: ContentChild, args: [IgxComboClearIconDirective, { read: TemplateRef },] }],
+    inputGroup: [{ type: ViewChild, args: ['inputGroup', { read: IgxInputGroupComponent, static: true },] }],
+    comboInput: [{ type: ViewChild, args: ['comboInput', { read: IgxInputDirective, static: true },] }],
+    searchInput: [{ type: ViewChild, args: ['searchInput',] }],
+    virtualScrollContainer: [{ type: ViewChild, args: [IgxForOfDirective, { static: true },] }],
+    virtDir: [{ type: ViewChild, args: [IgxForOfDirective, { read: IgxForOfDirective, static: true },] }],
+    dropdownContainer: [{ type: ViewChild, args: ['dropdownItemContainer', { static: true },] }],
+    primitiveTemplate: [{ type: ViewChild, args: ['primitive', { read: TemplateRef, static: true },] }],
+    complexTemplate: [{ type: ViewChild, args: ['complex', { read: TemplateRef, static: true },] }],
+    onArrowDown: [{ type: HostListener, args: ['keydown.ArrowDown', ['$event'],] }, { type: HostListener, args: ['keydown.Alt.ArrowDown', ['$event'],] }]
+};
+
+/**
+ * @hidden
+ */
+class IgxComboAddItemComponent extends IgxComboItemComponent {
+    get selected() {
+        return false;
+    }
+    set selected(value) {
+    }
+    /**
+     * @inheritdoc
+     */
+    clicked(event) {
+        this.comboAPI.disableTransitions = false;
+        this.comboAPI.add_custom_item();
+    }
+}
+IgxComboAddItemComponent.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;
         };
-        this.selection.set(this.id, new Set());
-        this._iconService.addSvgIconFromText(caseSensitive.name, caseSensitive.value, 'imx-icons');
+    }
+    /** @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;
     }
     /**
-     * @hidden @internal
+     * Get all non-header items
+     *
+     * ```typescript
+     * let myDropDownItems = this.dropdown.items;
+     * ```
      */
-    ngAfterViewInit() {
-        this.filteredData = [...this.data];
-        if (this.ngControl) {
-            this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
-            this.manageRequiredAsterisk();
-            this.cdr.detectChanges();
+    get items() {
+        const items = [];
+        if (this.children !== undefined) {
+            const sortedChildren = this.sortedChildren;
+            for (const child of sortedChildren) {
+                if (!child.isHeader) {
+                    items.push(child);
+                }
+            }
         }
-        this.virtDir.chunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e) => {
-            const eventArgs = Object.assign({}, e, { owner: this });
-            this.dataPreLoad.emit(eventArgs);
-        });
+        return items;
     }
     /**
      * @hidden @internal
      */
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.comboAPI.clear();
-        this.selection.clear(this.id);
+    onFocus() {
+        this.focusedItem = this._focusedItem || this.items[0];
     }
     /**
      * @hidden @internal
      */
-    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);
+    onBlur(_evt) {
+        this.focusedItem = null;
     }
     /**
      * @hidden @internal
      */
-    registerOnChange(fn) {
-        this._onChangeCallback = fn;
+    onToggleOpened() {
+        this.opened.emit();
     }
     /**
-     * @hidden @internal
+     * @hidden
      */
-    registerOnTouched(fn) {
-        this._onTouchedCallback = fn;
+    navigateFirst() {
+        this.navigateItem(this.virtDir.igxForOf.findIndex(e => !e.isHeader));
     }
     /**
-     * @hidden @internal
+     * @hidden
      */
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    navigatePrev() {
+        if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
+            this.combo.focusSearchInput(false);
+        }
+        else {
+            super.navigatePrev();
+        }
     }
     /**
      * @hidden
      */
-    getEditElement() {
-        return this.comboInput.nativeElement;
+    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
      */
-    get template() {
-        this._dataType = this.dataType;
-        if (this.itemTemplate) {
-            return this.itemTemplate;
-        }
-        if (this._dataType === DataTypes.COMPLEX) {
-            return this.complexTemplate;
+    selectItem(item) {
+        if (item === null || item === undefined) {
+            return;
         }
-        return this.primitiveTemplate;
+        this.comboAPI.set_selected_item(item.itemID);
+        this._focusedItem = item;
     }
     /**
      * @hidden @internal
      */
-    get context() {
-        return {
-            $implicit: this
-        };
+    updateScrollPosition() {
+        this.virtDir.getScroll().scrollTop = this._scrollPosition;
     }
     /**
      * @hidden @internal
      */
-    handleClearItems(event) {
-        if (this.disabled) {
+    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);
+        }
+    }
+    isAddItemFocused() {
+        return this.focusedItem instanceof IgxComboAddItemComponent;
+    }
+    focusAddItemButton() {
+        if (this.combo.isAddButtonVisible()) {
+            this.focusedItem = this.items[this.items.length - 1];
         }
-        event.stopPropagation();
+    }
+}
+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;
+        /**
+         * An @Input property that controls whether the combo's search box
+         * should be focused after the `opened` event is called
+         * When `false`, the combo's list item container will be focused instead
+         */
+        this.autoFocusSearch = true;
+        /**
+         * An @Input property that enabled/disables filtering in the list. The default is `true`.
+         * ```html
+         * <igx-combo [filterable]="false">
+         * ```
+         */
+        this.filterable = true;
+        /**
+         * Defines the placeholder value for the combo dropdown search field
+         *
+         * ```typescript
+         * // get
+         * let myComboSearchPlaceholder = this.combo.searchPlaceholder;
+         * ```
+         *
+         * ```html
+         * <!--set-->
+         * <igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
+         * ```
+         */
+        this.searchPlaceholder = 'Enter a Search Term';
+        /**
+         * Emitted when item selection is changing, before the selection completes
+         *
+         * ```html
+         * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
+         * ```
+         */
+        this.selectionChanging = new EventEmitter();
+        /**
+         * @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
@@ -36367,12 +36494,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);
         }
     }
@@ -36381,12 +36508,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);
         }
     }
@@ -36399,8 +36526,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);
     }
     /**
@@ -36412,9 +36539,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);
     }
@@ -36442,26 +36569,13 @@ 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
-     */
+    /** @hidden @internal */
     handleOpened() {
         this.triggerCheck();
         // Disabling focus of the search input should happen only when drop down opens.
@@ -36475,36 +36589,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,
@@ -36518,7 +36622,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;
             }
@@ -36528,44 +36632,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) {
@@ -36574,44 +36644,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 },
@@ -36630,56 +36667,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 }],
+    selectionChanging: [{ type: Output }],
+    dropdown: [{ type: ViewChild, args: [IgxComboDropDownComponent, { static: true },] }]
 };
 /**
  * @hidden
@@ -36699,6 +36691,8 @@ IgxComboModule.decorators = [
                     IgxComboToggleIconDirective,
                     IgxComboClearIconDirective],
                 exports: [IgxComboComponent, IgxComboItemComponent, IgxComboDropDownComponent, IgxComboAddItemComponent,
+                    IgxComboGroupingPipe,
+                    IgxComboFilteringPipe,
                     IgxComboItemDirective,
                     IgxComboEmptyDirective,
                     IgxComboHeaderItemDirective,
@@ -36713,6 +36707,375 @@ 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 = true;
+        this.findMatch = (element) => {
+            const value = this.displayKey ? element[this.displayKey] : element;
+            return value.toString().toLowerCase().includes(this.searchValue.trim().toLowerCase());
+        };
+        this.comboAPI.register(this);
+    }
+    /** @hidden @internal */
+    get filteredData() {
+        return this._filteredData;
+    }
+    /** @hidden @internal */
+    set filteredData(val) {
+        this._filteredData = this.groupKey ? (val || []).filter((e) => e.isHeader !== true) : val;
+        this.checkMatch();
+    }
+    /** @hidden @internal */
+    onArrowDown(event) {
+        if (this.collapsed) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.open();
+        }
+        else {
+            if (this.virtDir.igxForOf.length > 0) {
+                this.dropdown.navigateFirst();
+                this.dropdownContainer.nativeElement.focus();
+            }
+            else if (this.allowCustomValues) {
+                this.addItem.element.nativeElement.focus();
+            }
+        }
+    }
+    /**
+     * Select a defined item
+     *
+     * @param item the item to be selected
+     * ```typescript
+     * this.combo.select("New York");
+     * ```
+     */
+    select(item) {
+        if (item !== null && item !== undefined) {
+            const newSelection = this.selectionService.add_items(this.id, item instanceof Array ? item : [item], true);
+            this.setSelection(newSelection);
+        }
+    }
+    /**
+     * Deselect the currently selected item
+     *
+     * @param item the items to be deselected
+     * ```typescript
+     * this.combo.deselect("New York");
+     * ```
+     */
+    deselect() {
+        this.clearSelection();
+    }
+    /** @hidden @internal */
+    writeValue(value) {
+        const oldSelection = this.selection;
+        this.selectionService.select_items(this.id, value ? [value] : [], true);
+        this.cdr.markForCheck();
+        this._value = this.createDisplayText(this.selection, oldSelection);
+    }
+    /** @hidden @internal */
+    ngAfterViewInit() {
+        this.virtDir.contentSizeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.selection.length > 0) {
+                const index = this.virtDir.igxForOf.findIndex(e => {
+                    let current = e[this.valueKey];
+                    if (this.valueKey === null || this.valueKey === undefined) {
+                        current = e;
+                    }
+                    return current === this.selection[0];
+                });
+                this.dropdown.navigateItem(index);
+            }
+        });
+        this.dropdown.opened.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.composing) {
+                this.comboInput.focus();
+            }
+        });
+        this.dropdown.closing.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+            if (this.getEditElement() && !args.event) {
+                this.comboInput.focus();
+            }
+            else {
+                this.clearOnBlur();
+                this._onTouchedCallback();
+            }
+        });
+        super.ngAfterViewInit();
+    }
+    /** @hidden @internal */
+    handleInputChange(event) {
+        this.searchValue = event.target.value;
+        this._onChangeCallback(this.searchValue);
+        if (this.collapsed && this.comboInput.focused) {
+            this.open();
+            this.dropdown.navigateFirst();
+        }
+        if (!this.comboInput.value.trim()) {
+            // handle clearing of input by space
+            this.clearSelection();
+            this._onChangeCallback(null);
+        }
+        super.handleInputChange(event);
+        this.composing = true;
+    }
+    /** @hidden @internal */
+    handleKeyDown(event) {
+        if (event.key === this.platformUtil.KEYMAP.ENTER) {
+            const filtered = this.filteredData.find(this.findMatch);
+            if (filtered === null || filtered === undefined) {
+                return;
+            }
+            this.select(this.dropdown.focusedItem.itemID);
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+            // manually trigger text selection as it will not be triggered during editing
+            this.textSelection.trigger();
+            return;
+        }
+        if (event.key === this.platformUtil.KEYMAP.BACKSPACE
+            || event.key === this.platformUtil.KEYMAP.DELETE) {
+            this._updateInput = false;
+            this.clearSelection();
+        }
+        if (!this.collapsed && event.key === this.platformUtil.KEYMAP.TAB) {
+            this.close();
+            this.clearOnBlur();
+        }
+        this.composing = false;
+        super.handleKeyDown(event);
+    }
+    /** @hidden @internal */
+    handleKeyUp(event) {
+        if (event.key === this.platformUtil.KEYMAP.ARROW_DOWN) {
+            const firstItem = this.selectionService.first_item(this.id);
+            this.dropdown.focusedItem = firstItem && this.filteredData.length > 0
+                ? this.dropdown.items.find(i => i.itemID === firstItem)
+                : this.dropdown.items[0];
+            this.dropdownContainer.nativeElement.focus();
+        }
+    }
+    /** @hidden @internal */
+    handleItemKeyDown(event) {
+        if (event.key === this.platformUtil.KEYMAP.ARROW_UP && event.altKey) {
+            this.close();
+            this.comboInput.focus();
+            return;
+        }
+        if (event.key === this.platformUtil.KEYMAP.ENTER) {
+            this.comboInput.focus();
+        }
+    }
+    /** @hidden @internal */
+    handleItemClick() {
+        this.close();
+        this.comboInput.focus();
+    }
+    /** @hidden @internal */
+    onBlur() {
+        if (this.collapsed) {
+            this.clearOnBlur();
+        }
+        super.onBlur();
+    }
+    /** @hidden @internal */
+    getEditElement() {
+        return this.comboInput.nativeElement;
+    }
+    /** @hidden @internal */
+    handleClear(event) {
+        if (this.disabled) {
+            return;
+        }
+        this.clearSelection(true);
+        if (this.collapsed) {
+            this.open();
+            this.dropdown.navigateFirst();
+        }
+        else {
+            this.focusSearchInput(true);
+        }
+        event.stopPropagation();
+        this.comboInput.value = this.filterValue = this.searchValue = '';
+        this.dropdown.focusedItem = null;
+        this.composing = false;
+        this.comboInput.focus();
+    }
+    /** @hidden @internal */
+    handleOpened() {
+        this.triggerCheck();
+        this.dropdownContainer.nativeElement.focus();
+        this.opened.emit({ owner: this });
+    }
+    /** @hidden @internal */
+    handleClosing(e) {
+        const args = { owner: this, event: e.event, cancel: e.cancel };
+        this.closing.emit(args);
+        e.cancel = args.cancel;
+        if (e.cancel) {
+            return;
+        }
+        this.composing = false;
+        // explicitly update selection and trigger text selection so that we don't have to force CD
+        this.textSelection.selected = true;
+        this.textSelection.trigger();
+    }
+    /** @hidden @internal */
+    focusSearchInput(opening) {
+        if (opening) {
+            this.dropdownContainer.nativeElement.focus();
+        }
+        else {
+            this.comboInput.nativeElement.focus();
+            this.toggle();
+        }
+    }
+    /** @hidden @internal */
+    onClick(event) {
+        super.onClick(event);
+        if (this.comboInput.value.length === 0) {
+            this.virtDir.scrollTo(0);
+        }
+    }
+    setSelection(newSelection) {
+        const newSelectionAsArray = newSelection ? Array.from(newSelection) : [];
+        const oldSelectionAsArray = Array.from(this.selectionService.get(this.id) || []);
+        const displayText = this.createDisplayText(newSelectionAsArray, oldSelectionAsArray);
+        const args = {
+            newSelection: newSelectionAsArray[0],
+            oldSelection: oldSelectionAsArray[0],
+            displayText,
+            owner: this,
+            cancel: false
+        };
+        this.selectionChanging.emit(args);
+        if (!args.cancel) {
+            const argsSelection = args.newSelection !== undefined
+                && args.newSelection !== null
+                ? [args.newSelection]
+                : [];
+            this.selectionService.select_items(this.id, argsSelection, true);
+            if (this._updateInput) {
+                this.comboInput.value = this._value = displayText !== args.displayText
+                    ? args.displayText
+                    : this.createDisplayText(argsSelection, [args.oldSelection]);
+            }
+            this._onChangeCallback(args.newSelection);
+            this._updateInput = true;
+        }
+    }
+    createDisplayText(newSelection, oldSelection) {
+        if (this.isRemote) {
+            return this.getRemoteSelection(newSelection, oldSelection);
+        }
+        if (this.displayKey !== null && this.displayKey !== undefined
+            && newSelection.length > 0) {
+            return this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0];
+        }
+        return 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);
+    }
+    clearOnBlur() {
+        const filtered = this.filteredData.find(this.findMatch);
+        if ((filtered === undefined || filtered === null)) {
+            this.close();
+            this.clearSelection();
+            this.searchValue = '';
+        }
+    }
+}
+IgxSimpleComboComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'igx-simple-combo',
+                template: "<igx-input-group #inputGroup [displayDensity]=\"displayDensity\" [suppressInputAutofocus]=\"true\" [type]=\"type\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n\n    <input #comboInput igxInput [value]=\"value\" (input)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n        (keydown)=\"handleKeyDown($event)\" (blur)=\"onBlur()\" [attr.placeholder]=\"placeholder\" aria-autocomplete=\"both\"\n        [attr.aria-owns]=\"dropdown.id\" [attr.aria-labelledby]=\"ariaLabelledBy\" [disabled]=\"disabled\"\n        [igxTextSelection]=\"!composing\" />\n\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"comboInput.value.length\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClear($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\">\n            clear\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix *ngIf=\"showSearchCaseIcon\">\n        <igx-icon family=\"imx-icons\" name=\"case-sensitive\" [active]=\"filteringOptions.caseSensitive\"\n            (click)=\"toggleCaseSensitive()\">\n        </igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon (click)=\"onClick($event)\" *ngIf=\"!toggleIconTemplate\">\n            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}\n        </igx-icon>\n    </igx-suffix>\n</igx-input-group>\n\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\" [displayDensity]=\"displayDensity\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\" [singleMode]=\"true\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.px]=\"itemsMaxHeight\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" role=\"listbox\" [attr.id]=\"dropdown.id\"\n        (keydown)=\"handleItemKeyDown($event)\">\n        <igx-combo-item role=\"option\" [singleMode]=\"true\" [itemHeight]='itemHeight' (click)=\"handleItemClick()\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:true\n            | comboGrouping:groupKey:valueKey\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item.isHeader\" [index]=\"rowIndex\">\n            <ng-container *ngIf=\"item.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!item.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item #addItem [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>The list is empty</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n",
+                providers: [
+                    IgxComboAPIService,
+                    { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
+                    { provide: 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 },] }],
+    addItem: [{ type: ViewChild, args: [IgxComboAddItemComponent,] }],
+    selectionChanging: [{ type: Output }],
+    textSelection: [{ type: ViewChild, args: [IgxTextSelectionDirective, { static: true },] }],
+    onArrowDown: [{ type: HostListener, args: ['keydown.ArrowDown', ['$event'],] }, { type: HostListener, args: ['keydown.Alt.ArrowDown', ['$event'],] }]
+};
+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',
@@ -39089,7 +39452,7 @@ IgxGridExcelStyleFilteringComponent.decorators = [
     { type: Component, args: [{
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 selector: 'igx-grid-excel-style-filtering',
-                template: "<ng-template #defaultExcelColumnOperations>\n    <igx-excel-style-header\n        [showHiding]=\"displayDensity !== 'comfortable' && !column?.disableHiding\"\n        [showPinning]=\"displayDensity !== 'comfortable' && !column?.disablePinning\"\n        [showSelecting]=\"displayDensity !== 'comfortable' && columnSelectable()\"\n    >\n    </igx-excel-style-header>\n\n    <igx-excel-style-sorting *ngIf=\"column?.sortable\">\n    </igx-excel-style-sorting>\n\n    <igx-excel-style-moving *ngIf=\"column?.movable\">\n    </igx-excel-style-moving>\n\n    <igx-excel-style-pinning *ngIf=\"!column?.disablePinning && displayDensity==='comfortable'\">\n    </igx-excel-style-pinning>\n\n    <igx-excel-style-hiding *ngIf=\"!column?.disableHiding && displayDensity==='comfortable'\">\n    </igx-excel-style-hiding>\n\n    <igx-excel-style-selecting *ngIf=\"columnSelectable() && displayDensity==='comfortable'\">\n    </igx-excel-style-selecting>\n</ng-template>\n\n<ng-template #defaultExcelFilterOperations>\n    <igx-excel-style-clear-filters>\n    </igx-excel-style-clear-filters>\n\n    <igx-excel-style-conditional-filter>\n    </igx-excel-style-conditional-filter>\n\n    <igx-excel-style-search>\n    </igx-excel-style-search>\n</ng-template>\n\n<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',\n        'igx-excel-filter__menu--compact': displayDensity === 'compact'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\">\n\n    <ng-container *ngIf=\"this.excelColumnOperationsDirective; else defaultExcelColumnOperations\">\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.excelFilterOperationsDirective; else defaultExcelFilterOperations\">\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    </ng-container>\n</article>\n"
+                template: "<ng-template #defaultExcelColumnOperations>\n    <igx-excel-style-header\n        [showHiding]=\"displayDensity !== 'comfortable' && !column?.disableHiding\"\n        [showPinning]=\"displayDensity !== 'comfortable' && !column?.disablePinning\"\n        [showSelecting]=\"displayDensity !== 'comfortable' && columnSelectable()\"\n    >\n    </igx-excel-style-header>\n\n    <igx-excel-style-sorting *ngIf=\"column?.sortable\">\n    </igx-excel-style-sorting>\n\n    <igx-excel-style-moving *ngIf=\"column?.movable\">\n    </igx-excel-style-moving>\n\n    <igx-excel-style-pinning *ngIf=\"!column?.disablePinning && displayDensity==='comfortable'\">\n    </igx-excel-style-pinning>\n\n    <igx-excel-style-hiding *ngIf=\"!column?.disableHiding && displayDensity==='comfortable'\">\n    </igx-excel-style-hiding>\n\n    <igx-excel-style-selecting *ngIf=\"columnSelectable() && displayDensity==='comfortable'\">\n    </igx-excel-style-selecting>\n</ng-template>\n\n<ng-template #defaultExcelFilterOperations>\n    <igx-excel-style-clear-filters>\n    </igx-excel-style-clear-filters>\n\n    <igx-excel-style-conditional-filter>\n    </igx-excel-style-conditional-filter>\n\n    <igx-excel-style-search>\n    </igx-excel-style-search>\n</ng-template>\n\n<article #mainDropdown\n    class=\"igx-excel-filter__menu\"\n    [ngClass]=\"{\n        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',\n        'igx-excel-filter__menu--compact': displayDensity === 'compact'\n    }\"\n    [id]=\"overlayComponentId\"\n    (keydown)=\"onKeyDown($event)\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    role=\"menu\">\n\n    <ng-container *ngIf=\"this.excelColumnOperationsDirective; else defaultExcelColumnOperations\">\n        <ng-content select=\"igx-excel-style-column-operations,[igxExcelStyleColumnOperations]\">\n        </ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.excelFilterOperationsDirective; else defaultExcelFilterOperations\">\n        <ng-content select=\"igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]\">\n        </ng-content>\n    </ng-container>\n</article>\n"
             },] }
 ];
 IgxGridExcelStyleFilteringComponent.ctorParameters = () => [
@@ -40643,7 +41006,7 @@ IgxExcelStyleDateExpressionComponent.decorators = [
     { type: Component, args: [{
                 preserveWhitespaces: false,
                 selector: 'igx-excel-style-date-expression',
-                template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n"
+                template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [displayDensity]=\"displayDensity\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"imx-icons\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\">filter_list</igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"imx-icons\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    [displayDensity]=\"displayDensity\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\" [displayDensity]=\"displayDensity\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button (click)=\"onRemoveButtonClick()\" igxButton=\"icon\" [displayDensity]=\"displayDensity\" *ngIf=\"!isSingle\" >\n    <igx-icon>cancel</igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\"\n    [multiSelection]=\"false\">\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #andButton\n        (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n        tabindex=\"0\"\n        [selected]=\"expressionUI.afterOperator === 0\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span igxButton [displayDensity]=\"displayDensity\"\n        #orButton\n        tabindex=\"0\"\n        (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n        [selected]=\"expressionUI.afterOperator === 1\"\n        type=\"button\"\n        (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n"
             },] }
 ];
 IgxExcelStyleDateExpressionComponent.propDecorators = {
@@ -46879,15 +47242,23 @@ class IgxGridFilteringRowComponent {
     set value(val) {
         if (!val && val !== 0) {
             this.expression.searchVal = null;
-            this.showHideArrowButtons();
+            const index = this.expressionsList.findIndex(item => item.expression === this.expression);
+            if (index === 0 && this.expressionsList.length === 1) {
+                this.clearFiltering();
+                return;
+            }
         }
         else {
+            const oldValue = this.expression.searchVal;
+            if (isEqual(oldValue, val)) {
+                return;
+            }
             this.expression.searchVal = DataUtil.parseValue(this.column.dataType, val);
             if (this.expressionsList.find(item => item.expression === this.expression) === undefined) {
                 this.addExpression(true);
             }
+            this.filter();
         }
-        this.filter();
     }
     get displayDensity() {
         return this.column.grid.displayDensity === DisplayDensity.comfortable ? DisplayDensity.cosy : this.column.grid.displayDensity;
@@ -51091,7 +51462,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.rendered$.pipe(takeUntil(this.destroy$)).subscribe(() => {
             if (this.paginator) {
                 this.paginator.perPage = this._perPage !== DEFAULT_ITEMS_PER_PAGE ? this._perPage : this.paginator.perPage;
-                this.paginator.totalRecords = this.totalRecords;
+                this.paginator.totalRecords = this.totalRecords ? this.totalRecords : this.paginator.totalRecords;
                 this.paginator.overlaySettings = { outlet: this.outlet };
             }
             this._rendered = true;
@@ -64819,7 +65190,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
                     // if a row has been added and before commiting the transaction deleted
                     const leafRowsDirectParents = new Set();
                     this.records.forEach(record => {
-                        if (record && !record.children && record.parent) {
+                        if (record && (!record.children || record.children.length === 0) && record.parent) {
                             leafRowsDirectParents.add(record.parent);
                         }
                     });
@@ -64835,7 +65206,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
             if (this.rowSelection === GridSelectionMode.multipleCascade) {
                 const leafRowsDirectParents = new Set();
                 this.records.forEach(record => {
-                    if (record && !record.children && record.parent) {
+                    if (record && (!record.children || record.children.length === 0) && record.parent) {
                         leafRowsDirectParents.add(record.parent);
                     }
                 });
@@ -76243,5 +76614,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, IgxExpansionPanelTitleDirective as ɵba, IgxExpansionPanelDescriptionDirective as ɵbb, IgxExpansionPanelIconDirective as ɵbc, IgxBannerActionsDirective as ɵbd, IgxDaysViewNavigationService as ɵbe, IgxDayItemComponent as ɵbf, IgxMonthViewSlotsCalendar as ɵbg, IgxGetViewDateCalendar as ɵbh, IgxCarouselIndicatorDirective as ɵbi, IgxCarouselNextButtonDirective as ɵbj, IgxCarouselPrevButtonDirective as ɵbk, IgxComboAPIService as ɵbl, IGX_COMBO_COMPONENT as ɵbm, IgxComboDropDownComponent as ɵbo, IgxComboItemComponent 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, IgxComboFilteringPipe as ɵby, IgxComboGroupingPipe as ɵbz, IgxComboAddItemComponent as ɵca, PickerBaseDirective as ɵcb, IgxCalendarContainerComponent as ɵcc, IgxCalendarContainerModule as ɵcd, IgxDialogTitleDirective as ɵce, IgxDialogActionsDirective as ɵcf, IgxCellCrudState as ɵcg, IgxRowCrudState as ɵch, IgxRowAddCrudState as ɵci, IgxGridCRUDService as ɵcj, IgxColumnMovingService as ɵck, IgxExcelStyleCustomDialogComponent as ɵcl, IgxExcelStyleDefaultExpressionComponent as ɵcm, IgxExcelStyleDateExpressionComponent as ɵcn, HammerGesturesManager as ɵco, WatchChanges as ɵcp, WatchColumnChanges as ɵcq, notifyChanges as ɵcr, IgxNotificationsDirective as ɵcs, IgxGridColumnResizerComponent as ɵct, IgxColumnResizerDirective as ɵcu, IgxColumnResizingService as ɵcv, IgxRowSelectorDirective as ɵcw, IgxGroupByRowSelectorDirective as ɵcx, IgxHeadSelectorDirective as ɵcy, IgxRowDragDirective as ɵcz, IgxGridSelectionService as ɵd, IgxDragIndicatorIconDirective as ɵda, IgxRowDragGhostDirective as ɵdb, IgxRowDragModule as ɵdc, IgxGridHeaderRowComponent as ɵdd, IgxGridHeaderGroupComponent as ɵde, IgxGridHeaderComponent as ɵdf, IgxGridFilteringCellComponent as ɵdg, IgxFilteringService as ɵdh, IgxGridFilteringRowComponent as ɵdi, IgxGridGroupByAreaComponent as ɵdj, IgxGroupByAreaDirective as ɵdk, IgxGroupByMetaPipe as ɵdl, IgxTemplateOutletDirective as ɵdm, IgxTemplateOutletModule as ɵdn, IgxRowEditTemplateDirective as ɵdo, IgxRowEditTextDirective as ɵdp, IgxRowAddTextDirective as ɵdq, IgxRowEditActionsDirective as ɵdr, IgxRowEditTabStopDirective as ɵds, IgxSummaryRowComponent as ɵdt, IgxSummaryCellComponent as ɵdu, IgxRowDirective as ɵdv, IgxGridNavigationService as ɵdw, IgxGridSummaryService as ɵdx, ConnectedPositioningStrategy as ɵdy, IgxGridGroupByRowComponent as ɵdz, IgxTreeGridSelectionService as ɵea, IgxTreeGridGroupByAreaComponent as ɵeb, IgxRowLoadingIndicatorTemplateDirective as ɵec, IgxHierarchicalGridNavigationService as ɵed, IgxChildGridRowComponent as ɵee, IgxGridCellComponent as ɵef, IgxGridFooterComponent as ɵeg, IgxAdvancedFilteringDialogComponent as ɵeh, IgxColumnHidingDirective as ɵei, IgxColumnPinningDirective as ɵej, IgxGridSharedModules as ɵek, IgxProcessBarTextTemplateDirective as ɵel, IgxProgressBarGradientDirective as ɵem, DIR_DOCUMENT_FACTORY as ɵen, DIR_DOCUMENT as ɵeo, IgxDirectionality as ɵep, IgxSelectItemNavigationDirective as ɵeq, IGX_TIME_PICKER_COMPONENT as ɵer, IgxItemListDirective as ɵet, IgxTimeItemDirective as ɵeu, IgxTimePickerTemplateDirective as ɵev, IgxTimePickerActionsDirective as ɵew, TimeFormatPipe as ɵex, TimeItemPipe as ɵey, IgxGridPipesModule as ɵez, IGX_EXPANSION_PANEL_COMPONENT as ɵf, IgxGridCellStyleClassesPipe as ɵfa, IgxGridCellStylesPipe as ɵfb, IgxGridRowClassesPipe as ɵfc, IgxGridRowStylesPipe as ɵfd, IgxGridNotGroupedPipe as ɵfe, IgxGridTopLevelColumns as ɵff, IgxGridFilterConditionPipe as ɵfg, IgxGridTransactionPipe as ɵfh, IgxGridPaginatorOptionsPipe as ɵfi, IgxHasVisibleColumnsPipe as ɵfj, IgxGridRowPinningPipe as ɵfk, IgxColumnActionEnabledPipe as ɵfl, IgxFilterActionColumnsPipe as ɵfm, IgxSortActionColumnsPipe as ɵfn, IgxGridDataMapperPipe as ɵfo, IgxStringReplacePipe as ɵfp, IgxGridTransactionStatePipe as ɵfq, IgxColumnFormatterPipe as ɵfr, IgxSummaryFormatterPipe as ɵfs, IgxGridAddRowPipe as ɵft, IgxHeaderGroupWidthPipe as ɵfu, IgxHeaderGroupStylePipe as ɵfv, IgxGridColumnModule as ɵfw, IgxGridHeadersModule as ɵfx, SortingIndexPipe as ɵfy, IgxGridFilteringModule as ɵfz, IGX_TREE_COMPONENT as ɵg, IgxColumnMovingModule as ɵga, IgxColumnMovingDropDirective as ɵgb, IgxColumnMovingDragDirective as ɵgc, IgxGridResizingModule as ɵgd, IgxResizeHandleDirective as ɵge, IgxGridExcelStyleFilteringModule as ɵgf, IgxGridSelectionModule as ɵgg, IgxGridDragSelectDirective as ɵgh, IgxGridSummaryModule as ɵgi, IgxSummaryDataPipe as ɵgj, IgxGridToolbarModule as ɵgk, BaseToolbarDirective as ɵgl, BaseToolbarColumnActionsDirective as ɵgm, IgxGridRowComponent as ɵgn, IgxGridSortingPipe as ɵgo, IgxGridGroupingPipe as ɵgp, IgxGridPagingPipe as ɵgq, IgxGridFilteringPipe as ɵgr, IgxGridSummaryPipe as ɵgs, IgxGridDetailsPipe as ɵgt, IgxGridExpandableCellComponent as ɵgu, IgxTreeGridRowComponent as ɵgv, IgxTreeGridCellComponent as ɵgw, IgxTreeGridHierarchizingPipe as ɵgx, IgxTreeGridFlatteningPipe as ɵgy, IgxTreeGridSortingPipe as ɵgz, IGX_TREE_NODE_COMPONENT as ɵh, IgxTreeGridPagingPipe as ɵha, IgxTreeGridTransactionPipe as ɵhb, IgxTreeGridNormalizeRecordsPipe as ɵhc, IgxTreeGridAddRowPipe as ɵhd, IgxTreeGridFilteringPipe as ɵhe, IgxTreeGridSummaryPipe as ɵhf, IgxHierarchicalRowComponent as ɵhg, IgxHierarchicalGridCellComponent as ɵhh, IgxSliderThumbComponent as ɵhi, IgxThumbLabelComponent as ɵhj, IgxTicksComponent as ɵhk, IgxTickLabelsPipe as ɵhl, IgxTabsBase as ɵhm, IgxTabHeaderBase as ɵhn, IgxTabContentBase as ɵho, IgxSplitBarComponent as ɵhp, IgxTreeService as ɵhq, IgxTreeSelectionService as ɵhr, IgxTreeNavigationService as ɵhs, 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, isHierarchyMatch as ɵw, getHierarchy as ɵx, IgxGridActionButtonComponent as ɵy, ToggleAnimationPlayer 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, IgxExpansionPanelTitleDirective as ɵba, IgxExpansionPanelDescriptionDirective as ɵbb, IgxExpansionPanelIconDirective as ɵbc, IgxBannerActionsDirective as ɵbd, IgxDaysViewNavigationService as ɵbe, IgxDayItemComponent as ɵbf, IgxMonthViewSlotsCalendar as ɵbg, IgxGetViewDateCalendar as ɵbh, IgxCarouselIndicatorDirective as ɵbi, IgxCarouselNextButtonDirective as ɵbj, IgxCarouselPrevButtonDirective as ɵbk, IGX_COMBO_COMPONENT as ɵbl, IgxComboBaseDirective as ɵbn, IgxComboHeaderDirective as ɵbo, IgxComboFooterDirective as ɵbp, IgxComboItemDirective as ɵbq, IgxComboEmptyDirective as ɵbr, IgxComboHeaderItemDirective as ɵbs, IgxComboAddItemDirective as ɵbt, IgxComboToggleIconDirective as ɵbu, IgxComboClearIconDirective as ɵbv, IgxComboAPIService as ɵbw, IgxComboDropDownComponent as ɵbx, IgxComboItemComponent as ɵby, IgxComboFilteringPipe as ɵbz, IgxComboGroupingPipe as ɵca, IgxComboAddItemComponent as ɵcb, PickerBaseDirective as ɵcc, IgxCalendarContainerComponent as ɵcd, IgxCalendarContainerModule as ɵce, IgxDialogTitleDirective as ɵcf, IgxDialogActionsDirective as ɵcg, IgxCellCrudState as ɵch, IgxRowCrudState as ɵci, IgxRowAddCrudState as ɵcj, IgxGridCRUDService as ɵck, IgxColumnMovingService as ɵcl, IgxExcelStyleCustomDialogComponent as ɵcm, IgxExcelStyleDefaultExpressionComponent as ɵcn, IgxExcelStyleDateExpressionComponent as ɵco, HammerGesturesManager as ɵcp, WatchChanges as ɵcq, WatchColumnChanges as ɵcr, notifyChanges as ɵcs, IgxNotificationsDirective as ɵct, IgxGridColumnResizerComponent as ɵcu, IgxColumnResizerDirective as ɵcv, IgxColumnResizingService as ɵcw, IgxRowSelectorDirective as ɵcx, IgxGroupByRowSelectorDirective as ɵcy, IgxHeadSelectorDirective as ɵcz, IgxGridSelectionService as ɵd, IgxRowDragDirective as ɵda, IgxDragIndicatorIconDirective as ɵdb, IgxRowDragGhostDirective as ɵdc, IgxRowDragModule as ɵdd, IgxGridHeaderRowComponent as ɵde, IgxGridHeaderGroupComponent as ɵdf, IgxGridHeaderComponent as ɵdg, IgxGridFilteringCellComponent as ɵdh, IgxFilteringService as ɵdi, IgxGridFilteringRowComponent as ɵdj, IgxGridGroupByAreaComponent as ɵdk, IgxGroupByAreaDirective as ɵdl, IgxGroupByMetaPipe as ɵdm, IgxTemplateOutletDirective as ɵdn, IgxTemplateOutletModule as ɵdo, IgxRowEditTemplateDirective as ɵdp, IgxRowEditTextDirective as ɵdq, IgxRowAddTextDirective as ɵdr, IgxRowEditActionsDirective as ɵds, IgxRowEditTabStopDirective as ɵdt, IgxSummaryRowComponent as ɵdu, IgxSummaryCellComponent as ɵdv, IgxRowDirective as ɵdw, IgxGridNavigationService as ɵdx, IgxGridSummaryService as ɵdy, ConnectedPositioningStrategy as ɵdz, IgxGridGroupByRowComponent as ɵea, IgxTreeGridSelectionService as ɵeb, IgxTreeGridGroupByAreaComponent as ɵec, IgxRowLoadingIndicatorTemplateDirective as ɵed, IgxHierarchicalGridNavigationService as ɵee, IgxChildGridRowComponent as ɵef, IgxGridCellComponent as ɵeg, IgxGridFooterComponent as ɵeh, IgxAdvancedFilteringDialogComponent as ɵei, IgxColumnHidingDirective as ɵej, IgxColumnPinningDirective as ɵek, IgxGridSharedModules as ɵel, IgxProcessBarTextTemplateDirective as ɵem, IgxProgressBarGradientDirective as ɵen, DIR_DOCUMENT_FACTORY as ɵeo, DIR_DOCUMENT as ɵep, IgxDirectionality as ɵeq, IgxSelectItemNavigationDirective as ɵer, IGX_TIME_PICKER_COMPONENT as ɵes, IgxItemListDirective as ɵeu, IgxTimeItemDirective as ɵev, IgxTimePickerTemplateDirective as ɵew, IgxTimePickerActionsDirective as ɵex, TimeFormatPipe as ɵey, TimeItemPipe as ɵez, IGX_EXPANSION_PANEL_COMPONENT as ɵf, IgxGridPipesModule as ɵfa, IgxGridCellStyleClassesPipe as ɵfb, IgxGridCellStylesPipe as ɵfc, IgxGridRowClassesPipe as ɵfd, IgxGridRowStylesPipe as ɵfe, IgxGridNotGroupedPipe as ɵff, IgxGridTopLevelColumns as ɵfg, IgxGridFilterConditionPipe as ɵfh, IgxGridTransactionPipe as ɵfi, IgxGridPaginatorOptionsPipe as ɵfj, IgxHasVisibleColumnsPipe as ɵfk, IgxGridRowPinningPipe as ɵfl, IgxColumnActionEnabledPipe as ɵfm, IgxFilterActionColumnsPipe as ɵfn, IgxSortActionColumnsPipe as ɵfo, IgxGridDataMapperPipe as ɵfp, IgxStringReplacePipe as ɵfq, IgxGridTransactionStatePipe as ɵfr, IgxColumnFormatterPipe as ɵfs, IgxSummaryFormatterPipe as ɵft, IgxGridAddRowPipe as ɵfu, IgxHeaderGroupWidthPipe as ɵfv, IgxHeaderGroupStylePipe as ɵfw, IgxGridColumnModule as ɵfx, IgxGridHeadersModule as ɵfy, SortingIndexPipe as ɵfz, IGX_TREE_COMPONENT as ɵg, IgxGridFilteringModule as ɵga, IgxColumnMovingModule as ɵgb, IgxColumnMovingDropDirective as ɵgc, IgxColumnMovingDragDirective as ɵgd, IgxGridResizingModule as ɵge, IgxResizeHandleDirective as ɵgf, IgxGridExcelStyleFilteringModule as ɵgg, IgxGridSelectionModule as ɵgh, IgxGridDragSelectDirective as ɵgi, IgxGridSummaryModule as ɵgj, IgxSummaryDataPipe as ɵgk, IgxGridToolbarModule as ɵgl, BaseToolbarDirective as ɵgm, BaseToolbarColumnActionsDirective as ɵgn, IgxGridRowComponent as ɵgo, IgxGridSortingPipe as ɵgp, IgxGridGroupingPipe as ɵgq, IgxGridPagingPipe as ɵgr, IgxGridFilteringPipe as ɵgs, IgxGridSummaryPipe as ɵgt, IgxGridDetailsPipe as ɵgu, IgxGridExpandableCellComponent as ɵgv, IgxTreeGridRowComponent as ɵgw, IgxTreeGridCellComponent as ɵgx, IgxTreeGridHierarchizingPipe as ɵgy, IgxTreeGridFlatteningPipe as ɵgz, IGX_TREE_NODE_COMPONENT as ɵh, IgxTreeGridSortingPipe as ɵha, IgxTreeGridPagingPipe as ɵhb, IgxTreeGridTransactionPipe as ɵhc, IgxTreeGridNormalizeRecordsPipe as ɵhd, IgxTreeGridAddRowPipe as ɵhe, IgxTreeGridFilteringPipe as ɵhf, IgxTreeGridSummaryPipe as ɵhg, IgxHierarchicalRowComponent as ɵhh, IgxHierarchicalGridCellComponent as ɵhi, IgxSliderThumbComponent as ɵhj, IgxThumbLabelComponent as ɵhk, IgxTicksComponent as ɵhl, IgxTickLabelsPipe as ɵhm, IgxTabsBase as ɵhn, IgxTabHeaderBase as ɵho, IgxTabContentBase as ɵhp, IgxSplitBarComponent as ɵhq, IgxTreeService as ɵhr, IgxTreeSelectionService as ɵhs, IgxTreeNavigationService as ɵht, 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, isHierarchyMatch as ɵw, getHierarchy as ɵx, IgxGridActionButtonComponent as ɵy, ToggleAnimationPlayer as ɵz };
 //# sourceMappingURL=igniteui-angular.js.map