igniteui-angular 12.2.5 → 12.3.0

package/fesm2015/igniteui-angular.js

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/animations';
 import { style, animate, animation, keyframes, AnimationBuilder, useAnimation, trigger, transition } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, HostListener, NgModule, Inject, PLATFORM_ID, SimpleChange, InjectionToken, EventEmitter, Optional, Output, ElementRef, Renderer2, NgZone, Component, ViewChild, HostBinding, forwardRef, ChangeDetectorRef, ViewContainerRef, TemplateRef, IterableDiffers, ComponentFactoryResolver, QueryList, ViewChildren, ChangeDetectionStrategy, ContentChild, ContentChildren, ApplicationRef, Injector, isDevMode, Self, SecurityContext, Pipe, LOCALE_ID, Host, NgModuleRef, inject, CUSTOM_ELEMENTS_SCHEMA, SkipSelf } from '@angular/core';
+import { Injectable, Directive, Input, HostListener, NgModule, isDevMode, Inject, PLATFORM_ID, SimpleChange, InjectionToken, EventEmitter, Optional, Output, ElementRef, Renderer2, NgZone, Component, ViewChild, HostBinding, forwardRef, ChangeDetectorRef, ViewContainerRef, TemplateRef, IterableDiffers, ComponentFactoryResolver, QueryList, ViewChildren, ChangeDetectionStrategy, ContentChild, ContentChildren, ApplicationRef, Injector, Self, SecurityContext, Pipe, LOCALE_ID, Host, NgModuleRef, inject, CUSTOM_ELEMENTS_SCHEMA, SkipSelf } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, NgModel, FormControlName, FormsModule, NgControl, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule, DOCUMENT, DatePipe, formatDate, FormatWidth, getLocaleDateFormat, getLocaleCurrencyCode, DecimalPipe, CurrencyPipe, PercentPipe, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol } from '@angular/common';
@@ -892,7 +892,7 @@ const run = (id) => {
         fn();
     }
 };
-const ɵ0$5 = run;
+const ɵ0$4 = run;
 const listener = (event) => run(event.data);
 const ɵ1$1 = listener;
 // Use function instead of arrow function to workaround an issue in codesandbox
@@ -920,6 +920,15 @@ function clearImmediate(id) {
     delete queue[id];
 }
 
+/**
+ * @hidden
+ */
+const showMessage = (message, isMessageShown) => {
+    if (!isMessageShown && isDevMode()) {
+        console.warn(message);
+    }
+    return true;
+};
 const mkenum = (x) => x;
 /**
  * Returns the ResizeObserver type or the polyfilled version if not available.
@@ -1702,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;
@@ -8198,7 +8216,7 @@ IgxRowDirective.propDecorators = {
 };
 
 const clear = (el) => el === 0 || Boolean(el);
-const ɵ0$4 = clear;
+const ɵ0$3 = clear;
 const first = (arr) => arr[0];
 const ɵ1 = first;
 const last = (arr) => arr[arr.length - 1];
@@ -16382,105 +16400,6 @@ IgxSelectionAPIService.decorators = [
             },] }
 ];
 
-/**
- * @hidden
- */
-const DeprecateClass = (message) => {
-    let isMessageShown = false;
-    return (originalClass) => class extends originalClass {
-        constructor(...args) {
-            const target = originalClass;
-            const targetName = typeof target === 'function' ? target.name : target.constructor.name;
-            isMessageShown = showMessage(`${targetName}: ${message}`, isMessageShown);
-            super(...args);
-        }
-    };
-};
-/**
- * @hidden
- */
-function DeprecateMethod(message) {
-    let isMessageShown = false;
-    return function (target, key, descriptor) {
-        if (descriptor && descriptor.value) {
-            const originalMethod = descriptor.value;
-            descriptor.value = function () {
-                const targetName = typeof target === 'function' ? target.name : target.constructor.name;
-                isMessageShown = showMessage(`${targetName}.${key}: ${message}`, isMessageShown);
-                const args = [];
-                for (const x of arguments) {
-                    args.push(x);
-                }
-                return originalMethod.call(this, ...args);
-            };
-            return descriptor;
-        }
-    };
-}
-/**
- * @hidden
- */
-function DeprecateProperty(message) {
-    return function (target, key) {
-        let isMessageShown = false;
-        const messageToDisplay = `${target.constructor.name}.${key}: ${message}`;
-        // if the target already has the property defined
-        const originalDescriptor = Object.getOwnPropertyDescriptor(target, key);
-        if (originalDescriptor) {
-            const getter = originalDescriptor.get;
-            const setter = originalDescriptor.set;
-            if (getter) {
-                originalDescriptor.get = function () {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    return getter.call(this);
-                };
-            }
-            if (setter) {
-                originalDescriptor.set = function (value) {
-                    isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                    setter.call(this, value);
-                };
-            }
-            return originalDescriptor;
-        }
-        // the target doesn't contain a descriptor for that property, so create one
-        // use backing field to set/get the value of the property to ensure there won't be infinite recursive calls
-        const newKey = generateUniqueKey(target, key);
-        Object.defineProperty(target, key, {
-            configurable: true,
-            enumerable: true,
-            set(value) {
-                isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                this[newKey] = value;
-            },
-            get() {
-                isMessageShown = showMessage(messageToDisplay, isMessageShown);
-                return this[newKey];
-            }
-        });
-    };
-}
-/**
- * @hidden
- */
-const generateUniqueKey = (target, key) => {
-    let newKey = '_' + key;
-    while (target.hasOwnProperty(newKey)) {
-        newKey = '_' + newKey;
-    }
-    return newKey;
-};
-const ɵ0$3 = generateUniqueKey;
-/**
- * @hidden
- */
-const showMessage = (message, isMessageShown) => {
-    if (!isMessageShown && isDevMode()) {
-        console.warn(message);
-    }
-    return true;
-};
-
 let NEXT_ID$t = 0;
 /**
  * The `<igx-drop-down-item>` is a container intended for row items in
@@ -16550,7 +16469,6 @@ IgxDropDownGroupComponent.propDecorators = {
 };
 
 let NEXT_ID$s = 0;
-let warningShown = false;
 /**
  * An abstract class defining a drop-down item:
  * With properties / styles for selection, highlight, height
@@ -16615,8 +16533,6 @@ class IgxDropDownItemBaseDirective {
      */
     get index() {
         if (this._index === null) {
-            warningShown = showMessage('IgxDropDownItemBaseDirective: Automatic index is deprecated.' +
-                'Bind in the template instead using `<igx-drop-down-item [index]="i"` instead.`', warningShown);
             return this.itemIndex;
         }
         return this._index;
@@ -19115,9 +19031,6 @@ IgxIconComponent.propDecorators = {
     getInactive: [{ type: HostBinding, args: ['class.igx-icon--inactive',] }],
     getColor: [{ type: HostBinding, args: ['style.color',] }]
 };
-__decorate([
-    DeprecateProperty('`color` is deprecated.')
-], IgxIconComponent.prototype, "color", void 0);
 
 /**
  * @hidden
@@ -23288,10 +23201,10 @@ class IgxRadioGroupDirective {
         this._setRadioButtonsRequired();
     }
     /**
-     * An @Input property that allows you to disable the radio group. By default it's false.
-     *
      * @deprecated in version 12.2.0
      *
+     * An input property that allows you to disable the radio group. By default it's false.
+     *
      * @example
      *  ```html
      * <igx-radio-group disabled></igx-radio-group>
@@ -23305,10 +23218,10 @@ class IgxRadioGroupDirective {
         this.setDisabledState(value);
     }
     /**
-     * Sets/gets the position of the `label` in the child radio buttons.
-     *
      * @deprecated in version 12.2.0
      *
+     * Sets/gets the position of the `label` in the child radio buttons.
+     *
      * @remarks
      * If not set, `labelPosition` will have value `"after"`.
      *
@@ -23558,12 +23471,6 @@ IgxRadioGroupDirective.propDecorators = {
     vertical: [{ type: HostBinding, args: ['class.igx-radio-group--vertical',] }],
     alignment: [{ type: Input }]
 };
-__decorate([
-    DeprecateProperty('`disabled` is deprecated.')
-], IgxRadioGroupDirective.prototype, "disabled", null);
-__decorate([
-    DeprecateProperty('`labelPosition` is deprecated.')
-], IgxRadioGroupDirective.prototype, "labelPosition", null);
 /**
  * @hidden
  */
@@ -34973,10 +34880,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) {
@@ -35074,7 +34981,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 = () => [
@@ -35084,311 +34991,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";
@@ -35396,20 +35017,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) {
     /**
@@ -35425,52 +35032,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:
@@ -35489,180 +35075,65 @@ class IgxComboComponent extends DisplayDensityBase {
          */
         this.overlaySettings = null;
         /**
-         * @hidden @internal
-         */
-        this.searchInput = null;
-        /**
-         * The custom template, if any, that should be used when rendering ITEMS in the combo list
+         * Gets/gets combo id.
          *
          * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.itemTemplate = myCustomTemplate;
+         * // get
+         * let id = this.combo.id;
          * ```
+         *
          * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboItem>
-         *          <div class="custom-item" let-item let-key="valueKey">
-         *              <div class="custom-item__name">{{ item[key] }}</div>
-         *              <div class="custom-item__cost">{{ item.cost }}</div>
-         *          </div>
-         *      </ng-template>
-         *  </igx-combo>
+         * <!--set-->
+         * <igx-combo [id]='combo1'></igx-combo>
          * ```
          */
-        this.itemTemplate = null;
+        this.id = `igx-combo-${NEXT_ID$c++}`;
         /**
-         * The custom template, if any, that should be used when rendering the HEADER for the combo items list
+         * Controls whether custom values can be added to the collection
          *
          * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.headerTemplate = myCustomTemplate;
+         * // get
+         * let comboAllowsCustomValues = this.combo.allowCustomValues;
          * ```
+         *
          * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboHeader>
-         *          <div class="combo__header">
-         *              This is a custom header
-         *          </div>
-         *      </ng-template>
-         *  </igx-combo>
+         * <!--set-->
+         * <igx-combo [allowCustomValues]='true'></igx-combo>
          * ```
          */
-        this.headerTemplate = null;
+        this.allowCustomValues = false;
         /**
-         * The custom template, if any, that should be used when rendering the FOOTER for the combo items list
+         * Determines which column in the data source is used to determine the value.
          *
          * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.footerTemplate = myCustomTemplate;
+         * // get
+         * let myComboValueKey = this.combo.valueKey;
          * ```
+         *
          * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboFooter>
-         *          <div class="combo__footer">
-         *              This is a custom footer
-         *          </div>
-         *      </ng-template>
-         *  </igx-combo>
+         * <!--set-->
+         * <igx-combo [valueKey]='myKey'></igx-combo>
          * ```
          */
-        this.footerTemplate = null;
+        this.valueKey = null;
         /**
-         * The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.headerItemTemplate = myCustomTemplate;
-         * ```
+         * An @Input property that enabled/disables filtering in the list. The default is `true`.
          * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboHeaderItem let-item let-key="groupKey">
-         *          <div class="custom-item--group">Group header for {{ item[key] }}</div>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.headerItemTemplate = null;
-        /**
-         * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.addItemTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboAddItem>
-         *          <button class="combo__add-button">
-         *              Click to add item
-         *          </button>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.addItemTemplate = null;
-        /**
-         * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.emptyTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboEmpty>
-         *          <div class="combo--empty">
-         *              There are no items to display
-         *          </div>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.emptyTemplate = null;
-        /**
-         * The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.toggleIconTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboToggleIcon let-collapsed>
-         *          <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
-         *      </ng-template>
-         *  </igx-combo>
-         * ```
-         */
-        this.toggleIconTemplate = null;
-        /**
-         * The custom template, if any, that should be used when rendering the combo CLEAR button
-         *
-         * ```typescript
-         * // Set in typescript
-         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-         * myComponent.combo.clearIconTemplate = myCustomTemplate;
-         * ```
-         * ```html
-         * <!-- Set in markup -->
-         *  <igx-combo #combo>
-         *      ...
-         *      <ng-template igxComboClearIcon>
-         *          <igx-icon>clear</igx-icon>
-         *      </ng-template>
-         *  </igx-combo>
+         * <igx-combo [filterable]="false">
          * ```
          */
-        this.clearIconTemplate = null;
+        this.filterable = true;
+        /** @hidden @internal */
+        this.cssClass = 'igx-combo'; // Independent of display density for the time being
+        /** @hidden @internal */
+        this.role = 'combobox';
         /**
-         * Emitted when item selection is changing, before the selection completes
-         *
+         * An @Input property that enabled/disables combo. The default is `false`.
          * ```html
-         * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
+         * <igx-combo [disabled]="'true'">
          * ```
          */
-        this.selectionChanging = new EventEmitter();
+        this.disabled = false;
         /**
          * Emitted before the dropdown is opened
          *
@@ -35720,142 +35191,196 @@ class IgxComboComponent extends DisplayDensityBase {
          */
         this.dataPreLoad = new EventEmitter();
         /**
-         * Gets/gets combo id.
+         * The custom template, if any, that should be used when rendering ITEMS in the combo list
          *
          * ```typescript
-         * // get
-         * let id = this.combo.id;
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.itemTemplate = myCustomTemplate;
          * ```
-         *
          * ```html
-         * <!--set-->
-         * <igx-combo [id]='combo1'></igx-combo>
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboItem>
+         *          <div class="custom-item" let-item let-key="valueKey">
+         *              <div class="custom-item__name">{{ item[key] }}</div>
+         *              <div class="custom-item__cost">{{ item.cost }}</div>
+         *          </div>
+         *      </ng-template>
+         *  </igx-combo>
          * ```
          */
-        this.id = `igx-combo-${NEXT_ID$c++}`;
-        /**
-         * @hidden @internal
-         */
-        this.cssClass = 'igx-combo'; // Independent of display density, at the time being
-        /**
-         * @hidden @internal
-         */
-        this.role = 'combobox';
+        this.itemTemplate = null;
         /**
-         * Controls whether custom values can be added to the collection
+         * The custom template, if any, that should be used when rendering the HEADER for the combo items list
          *
          * ```typescript
-         * // get
-         * let comboAllowsCustomValues = this.combo.allowCustomValues;
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.headerTemplate = myCustomTemplate;
          * ```
-         *
          * ```html
-         * <!--set-->
-         * <igx-combo [allowCustomValues]='true'></igx-combo>
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboHeader>
+         *          <div class="combo__header">
+         *              This is a custom header
+         *          </div>
+         *      </ng-template>
+         *  </igx-combo>
          * ```
          */
-        this.allowCustomValues = false;
+        this.headerTemplate = null;
         /**
-         * Defines the placeholder value for the combo dropdown search field
+         * The custom template, if any, that should be used when rendering the FOOTER for the combo items list
          *
          * ```typescript
-         * // get
-         * let myComboSearchPlaceholder = this.combo.searchPlaceholder;
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.footerTemplate = myCustomTemplate;
          * ```
-         *
          * ```html
-         * <!--set-->
-         * <igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboFooter>
+         *          <div class="combo__footer">
+         *              This is a custom footer
+         *          </div>
+         *      </ng-template>
+         *  </igx-combo>
          * ```
          */
-        this.searchPlaceholder = 'Enter a Search Term';
+        this.footerTemplate = null;
         /**
-         * Defines whether the caseSensitive icon should be shown in the search input
+         * The custom template, if any, that should be used when rendering HEADER ITEMS for groups in the combo list
          *
          * ```typescript
-         * // get
-         * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.headerItemTemplate = myCustomTemplate;
          * ```
-         *
          * ```html
-         * <!--set-->
-         * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboHeaderItem let-item let-key="groupKey">
+         *          <div class="custom-item--group">Group header for {{ item[key] }}</div>
+         *      </ng-template>
+         *  </igx-combo>
          * ```
          */
-        this.showSearchCaseIcon = false;
+        this.headerItemTemplate = null;
         /**
-         * Combo value data source property.
+         * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
          *
          * ```typescript
-         * // get
-         * let myComboValueKey = this.combo.valueKey;
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.addItemTemplate = myCustomTemplate;
          * ```
-         *
          * ```html
-         * <!--set-->
-         * <igx-combo [valueKey]='myKey'></igx-combo>
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboAddItem>
+         *          <button class="combo__add-button">
+         *              Click to add item
+         *          </button>
+         *      </ng-template>
+         *  </igx-combo>
          * ```
          */
-        this.valueKey = null;
+        this.addItemTemplate = null;
         /**
-         * An @Input property that enabled/disables filtering in the list. The default is `true`.
+         * The custom template, if any, that should be used when rendering the ADD BUTTON in the combo drop down
+         *
+         * ```typescript
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.emptyTemplate = myCustomTemplate;
+         * ```
          * ```html
-         * <igx-combo [filterable]="false">
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboEmpty>
+         *          <div class="combo--empty">
+         *              There are no items to display
+         *          </div>
+         *      </ng-template>
+         *  </igx-combo>
          * ```
          */
-        this.filterable = true;
+        this.emptyTemplate = null;
         /**
-         * An @Input property that enabled/disables combo. The default is `false`.
+         * The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button
+         *
+         * ```typescript
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.toggleIconTemplate = myCustomTemplate;
+         * ```
          * ```html
-         * <igx-combo [disabled]="'true'">
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboToggleIcon let-collapsed>
+         *          <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
+         *      </ng-template>
+         *  </igx-combo>
          * ```
          */
-        this.disabled = false;
+        this.toggleIconTemplate = null;
         /**
-         * An @Input property that controls whether the combo's search box
-         * should be focused after the `opened` event is called
-         * When `false`, the combo's list item container will be focused instead
+         * The custom template, if any, that should be used when rendering the combo CLEAR button
+         *
+         * ```typescript
+         * // Set in typescript
+         * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
+         * myComponent.combo.clearIconTemplate = myCustomTemplate;
+         * ```
+         * ```html
+         * <!-- Set in markup -->
+         *  <igx-combo #combo>
+         *      ...
+         *      <ng-template igxComboClearIcon>
+         *          <igx-icon>clear</igx-icon>
+         *      </ng-template>
+         *  </igx-combo>
+         * ```
          */
-        this.autoFocusSearch = true;
+        this.clearIconTemplate = null;
+        /** @hidden @internal */
+        this.searchInput = null;
         this.dropdownContainer = null;
-        /**
-         * @hidden @internal
-         */
+        /** @hidden @internal */
         this.customValueFlag = true;
-        /**
-         * @hidden @internal
-         */
+        /** @hidden @internal */
+        this.filterValue = '';
+        /** @hidden @internal */
         this.defaultFallbackGroup = 'Other';
-        /**
-         * @hidden @internal
-         */
+        /** @hidden @internal */
         this.filteringOptions = {
             caseSensitive: false
         };
-        /**
-         * @hidden @internal
-         */
-        this.filteringLogic = 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)) {
@@ -35872,31 +35397,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
@@ -35942,12 +35446,6 @@ class IgxComboComponent extends DisplayDensityBase {
     set itemHeight(val) {
         this._itemHeight = val;
     }
-    /**
-     * @hidden @internal
-     */
-    get inputEmpty() {
-        return !this.value && !this.placeholder;
-    }
     /**
      * Combo data source.
      *
@@ -35966,7 +35464,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
@@ -36007,6 +35505,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`.
@@ -36020,6 +35530,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
      *
@@ -36044,32 +35575,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`
@@ -36093,6 +35607,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.
      *
@@ -36115,85 +35639,110 @@ class IgxComboComponent extends DisplayDensityBase {
     set totalItemCount(count) {
         this.virtDir.totalItemCount = count;
     }
+    /** @hidden @internal */
+    get template() {
+        this._dataType = this.dataType;
+        if (this.itemTemplate) {
+            return this.itemTemplate;
+        }
+        if (this._dataType === DataTypes.COMPLEX) {
+            return this.complexTemplate;
+        }
+        return this.primitiveTemplate;
+    }
+    /** @hidden @internal */
+    onArrowDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open();
+    }
+    /** @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.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);
+    }
     /**
-     * The text displayed in the combo input
+     * A method that opens/closes the combo.
      *
-     * ```typescript
-     * // get
-     * let comboValue = this.combo.value;
+     * ```html
+     * <button (click)="combo.toggle()">Toggle Combo</button>
+     * <igx-combo #combo></igx-combo>
      * ```
      */
-    get value() {
-        return this._value;
+    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 filteredData() {
-        return this.filterable ? this._filteredData : this.data;
+    open() {
+        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+        this.dropdown.open(overlaySettings);
     }
     /**
-     * @hidden @internal
+     * A method that closes the combo.
+     *
+     * ```html
+     * <button (click)="combo.close()">Close Combo</button>
+     * <igx-combo #combo></igx-combo>
+     * ```
      */
-    set filteredData(val) {
-        this._filteredData = this.groupKey ? (val || []).filter((e) => e.isHeader !== true) : val;
-        this.checkMatch();
+    close() {
+        this.dropdown.close();
     }
     /**
-     * @hidden @internal
+     * Triggers change detection on the combo view
      */
-    handleKeyUp(event) {
-        if (event.key === 'ArrowDown' || event.key === 'Down') {
-            this.dropdown.focusedItem = this.dropdown.items[0];
-            this.dropdownContainer.nativeElement.focus();
-        }
-        else if (event.key === 'Escape' || event.key === 'Esc') {
-            this.toggle();
-        }
-    }
-    /**
-     * @hidden @internal
-     */
-    handleKeyDown(event) {
-        if (event.key === 'ArrowUp' || event.key === 'Up') {
-            event.preventDefault();
-            event.stopPropagation();
-            this.close();
-        }
-    }
-    /**
-     * @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;
-            }
-        }
-        this.checkMatch();
-    }
-    /**
-     * @hidden @internal
-     */
-    get dataType() {
-        if (this.displayKey) {
-            return DataTypes.COMPLEX;
-        }
-        return DataTypes.PRIMITIVE;
+    triggerCheck() {
+        this.cdr.detectChanges();
     }
     /**
-     * @hidden @internal
+     * Get current selection state
+     *
+     * @returns Array of selected items
+     * ```typescript
+     * let selectedItems = this.combo.selectedItems();
+     * ```
      */
-    get isRemote() {
-        return this.totalItemCount > 0 &&
-            this.valueKey &&
-            this.dataType === DataTypes.COMPLEX;
+    get selection() {
+        const items = Array.from(this.selectionService.get(this.id));
+        return items;
     }
     /**
      * Returns if the specified itemID is selected
@@ -36202,36 +35751,11 @@ class IgxComboComponent extends DisplayDensityBase {
      * @internal
      */
     isItemSelected(item) {
-        return this.selection.is_item_selected(this.id, item);
-    }
-    /**
-     * Triggers change detection on the combo view
-     */
-    triggerCheck() {
-        this.cdr.detectChanges();
-    }
-    /**
-     * @hidden @internal
-     */
-    isAddButtonVisible() {
-        // This should always return a boolean value. If this.searchValue was '', it returns '' instead of false;
-        return this.searchValue !== '' && this.customValueFlag;
+        return this.selectionService.is_item_selected(this.id, item);
     }
-    /**
-     * @hidden @internal
-     */
-    handleSelectAll(evt) {
-        if (evt.checked) {
-            this.selectAllItems();
-        }
-        else {
-            this.deselectAllItems();
-        }
-    }
-    /**
-     * @hidden @internal
-     */
+    /** @hidden @internal */
     addItemToCollection() {
+        var _a;
         if (!this.searchValue) {
             return;
         }
@@ -36256,33 +35780,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();
@@ -36294,174 +35876,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);
         }
-        event.stopPropagation();
+    }
+    isAddItemFocused() {
+        return this.focusedItem instanceof IgxComboAddItemComponent;
+    }
+    focusAddItemButton() {
+        if (this.combo.isAddButtonVisible()) {
+            this.focusedItem = this.items[this.items.length - 1];
+        }
+    }
+}
+IgxComboDropDownComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'igx-combo-drop-down',
+                template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\nigxToggle\n(appended)=\"onToggleContentAppended($event)\"\n(opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n(closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n    <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"this.listId\" role=\"listbox\" [attr.aria-label]=\"this.listId\"\n    [style.height]=\"height\"\n    [style.maxHeight]=\"maxHeight\">\n        <ng-container *ngIf=\"!collapsed\">\n            <ng-content></ng-content>\n        </ng-container>\n    </div>\n</div>\n",
+                providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }]
+            },] }
+];
+IgxComboDropDownComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: ChangeDetectorRef },
+    { type: PlatformUtil },
+    { type: IgxSelectionAPIService },
+    { type: undefined, decorators: [{ type: Inject, args: [IGX_COMBO_COMPONENT,] }] },
+    { type: IgxComboAPIService },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DisplayDensityToken,] }] }
+];
+IgxComboDropDownComponent.propDecorators = {
+    singleMode: [{ type: Input }],
+    children: [{ type: ContentChildren, args: [IgxComboItemComponent, { descendants: true },] }]
+};
+
+/**
+ * @hidden
+ */
+class IgxComboFilteringPipe {
+    transform(collection, searchValue, displayKey, filteringOptions, shouldFilter = false) {
+        if (!collection) {
+            return [];
+        }
+        if (!searchValue || !shouldFilter) {
+            return collection;
+        }
+        else {
+            const searchTerm = filteringOptions.caseSensitive ? searchValue.trim() : searchValue.toLowerCase().trim();
+            if (displayKey != null) {
+                return collection.filter(e => filteringOptions.caseSensitive ? e[displayKey].includes(searchTerm) :
+                    e[displayKey].toString().toLowerCase().includes(searchTerm));
+            }
+            else {
+                return collection.filter(e => filteringOptions.caseSensitive ? e.includes(searchTerm) :
+                    e.toString().toLowerCase().includes(searchTerm));
+            }
+        }
+    }
+}
+IgxComboFilteringPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'comboFiltering'
+            },] }
+];
+/**
+ * @hidden
+ */
+class IgxComboGroupingPipe {
+    constructor(combo) {
+        this.combo = combo;
+    }
+    transform(collection, groupKey, valueKey) {
+        this.combo.filteredData = collection;
+        if ((!groupKey && groupKey !== 0) || !collection.length) {
+            return collection;
+        }
+        const sorted = DataUtil.sort(cloneArray(collection), [{
+                fieldName: groupKey,
+                dir: SortingDirection.Asc,
+                ignoreCase: true,
+                strategy: DefaultSortingStrategy.instance()
+            }]);
+        const data = cloneArray(sorted);
+        let inserts = 0;
+        let currentHeader = null;
+        for (let i = 0; i < sorted.length; i++) {
+            let insertFlag = 0;
+            if (currentHeader !== sorted[i][groupKey]) {
+                currentHeader = sorted[i][groupKey];
+                insertFlag = 1;
+            }
+            if (insertFlag) {
+                data.splice(i + inserts, 0, {
+                    [valueKey]: currentHeader,
+                    [groupKey]: currentHeader,
+                    isHeader: true
+                });
+                inserts++;
+            }
+        }
+        return data;
+    }
+}
+IgxComboGroupingPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'comboGrouping'
+            },] }
+];
+IgxComboGroupingPipe.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [IGX_COMBO_COMPONENT,] }] }
+];
+
+/**
+ * When called with sets A & B, returns A - B (as array);
+ *
+ * @hidden
+ */
+const diffInSets = (set1, set2) => {
+    const results = [];
+    set1.forEach(entry => {
+        if (!set2.has(entry)) {
+            results.push(entry);
+        }
+    });
+    return results;
+};
+const ɵ0$1 = diffInSets;
+/**
+ *  Represents a drop-down list that provides editable functionalities, allowing users to choose an option from a predefined list.
+ *
+ * @igxModule IgxComboModule
+ * @igxTheme igx-combo-theme
+ * @igxKeywords combobox, combo selection
+ * @igxGroup Grids & Lists
+ *
+ * @remarks
+ * It provides the ability to filter items as well as perform selection with the provided data.
+ * Additionally, it exposes keyboard navigation and custom styling capabilities.
+ * @example
+ * ```html
+ * <igx-combo [itemsMaxHeight]="250" [data]="locationData"
+ *  [displayKey]="'field'" [valueKey]="'field'"
+ *  placeholder="Location(s)" searchPlaceholder="Search...">
+ * </igx-combo>
+ * ```
+ */
+class IgxComboComponent extends IgxComboBaseDirective {
+    constructor(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector) {
+        super(elementRef, cdr, selectionService, comboAPI, _iconService, _displayDensityOptions, _inputGroupType, _injector);
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.selectionService = selectionService;
+        this.comboAPI = comboAPI;
+        this._iconService = _iconService;
+        this._displayDensityOptions = _displayDensityOptions;
+        this._inputGroupType = _inputGroupType;
+        this._injector = _injector;
+        /**
+         * 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
@@ -36469,12 +36477,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);
         }
     }
@@ -36483,12 +36491,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);
         }
     }
@@ -36501,8 +36509,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);
     }
     /**
@@ -36514,9 +36522,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);
     }
@@ -36544,26 +36552,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.
@@ -36577,36 +36572,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,
@@ -36620,7 +36605,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;
             }
@@ -36630,44 +36615,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) {
@@ -36676,44 +36627,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 },
@@ -36732,56 +36650,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
@@ -36801,6 +36674,8 @@ IgxComboModule.decorators = [
                     IgxComboToggleIconDirective,
                     IgxComboClearIconDirective],
                 exports: [IgxComboComponent, IgxComboItemComponent, IgxComboDropDownComponent, IgxComboAddItemComponent,
+                    IgxComboGroupingPipe,
+                    IgxComboFilteringPipe,
                     IgxComboItemDirective,
                     IgxComboEmptyDirective,
                     IgxComboHeaderItemDirective,
@@ -36815,6 +36690,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',
@@ -46981,15 +47225,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;
@@ -48420,7 +48672,7 @@ IgxGridHeaderRowComponent.decorators = [
     { type: Component, args: [{
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 selector: 'igx-grid-header-row',
-                template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n"
+                template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.hasMovableColumns && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n"
             },] }
 ];
 IgxGridHeaderRowComponent.ctorParameters = () => [
@@ -48600,9 +48852,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.gridScroll = new EventEmitter();
         /**
+         * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+         *
          * Emitted after the current page is changed.
          *
-         * @deprecated in version 12.1.0
          * @example
          * ```html
          * <igx-grid (pageChange)="onPageChange($event)"></igx-grid>
@@ -48615,10 +48868,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.pageChange = new EventEmitter();
         /**
+         * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+         *
          * Emitted when `perPage` property value of the grid is changed.
          *
-         * @deprecated in version 12.1.0
-         * @example
          * ```html
          * <igx-grid #grid (perPageChange)="onPerPageChange($event)" [autoGenerate]="true"></igx-grid>
          * ```
@@ -48635,6 +48888,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.class = '';
         /**
+         * @deprecated in version 12.2.0. We suggest using `rowClasses` property instead
+         *
          * Gets/Sets the styling classes applied to all even `IgxGridRowComponent`s in the grid.
          *
          * @example
@@ -48644,6 +48899,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.evenRowCSS = 'igx-grid__tr--even';
         /**
+         * @deprecated in version 12.2.0. We suggest using `rowClasses` property instead
+         *
          * Gets/Sets the styling classes applied to all odd `IgxGridRowComponent`s in the grid.
          *
          * @example
@@ -48898,9 +49155,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
          */
         this.filteringDone = new EventEmitter();
         /**
+         * @deprecated in version 12.1.0. Use the corresponding output exposed by the `igx-paginator` component instead
+         *
          * Emitted after paging is performed.
          *
-         * @deprecated in version 12.1.x
          * @remarks
          * Returns an object consisting of the previous and next pages.
          * @example
@@ -49553,9 +49811,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges(true);
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+     *
      * Gets/Sets whether the paging feature is enabled.
      *
-     * @deprecated in version 12.1.x
      * @remarks
      * The default state is disabled (false).
      * @example
@@ -49573,9 +49832,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.pipeTrigger++;
     }
     /**
+     * @deprecated in version 12.1.0. Use `page` property form `paginator` component instead
+     *
      * Gets/Sets the current page index.
      *
-     * @deprecated in version 12.1.x
      * @example
      * ```html
      * <igx-grid #grid [data]="Data" [autoGenerate]="true">
@@ -49595,9 +49855,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
     }
     /**
+     * @deprecated in version 12.1.0. Use `perPage` property from `paginator` component instead
+     *
      * Gets/Sets the number of visible items per page.
      *
-     * @deprecated in version 12.1.x
      * @remarks
      * The default is 15.
      * @example
@@ -49618,9 +49879,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
     }
     /**
+     * @deprecated in version 10.1.0
+     *
      * Gets/Sets whether the column hiding UI is enabled.
      *
-     * @deprecated
      * @remarks
      * By default it is disabled (false). In order for the UI to work, you need to enable the toolbar as shown in the example below.
      * @example
@@ -49818,9 +50080,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this._emptyFilteredGridMessage || this.resourceStrings.igx_grid_emptyFilteredGrid_message;
     }
     /**
-     * Gets/Sets the title to be displayed in the built-in column hiding UI.
+     * @deprecated in version 10.1.0
      *
-     * @deprecated
+     * Gets/Sets the title to be displayed in the built-in column hiding UI.
      *
      * @example
      * ```html
@@ -49858,9 +50120,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this._pinning = value;
     }
     /**
-     * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
+     * @deprecated in version 10.1.0
      *
-     * @deprecated
+     * Gets/Sets if the built-in column pinning UI should be shown in the toolbar.
      *
      * @example
      * ```html
@@ -49875,9 +50137,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets the title to be displayed in the UI of the column pinning.
+     * @deprecated in version 10.1.0
      *
-     * @deprecated
+     * Gets/Sets the title to be displayed in the UI of the column pinning.
      *
      * @example
      * ```html
@@ -50324,9 +50586,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this.pinnedColumns.filter(col => !col.columnLayout).length;
     }
     /**
-     * Gets/Sets the text to be displayed inside the toggle button.
+     * @deprecated in version 10.1.0
      *
-     * @deprecated
+     * Gets/Sets the text to be displayed inside the toggle button.
      *
      * @remarks
      * Used for the built-in column hiding UI of the`IgxColumnComponent`.
@@ -50335,7 +50597,6 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * <igx-grid [columnHiding]="true" [showToolbar]="true" [hiddenColumnsText]="'Hidden Columns'"></igx-grid>
      * ```
      */
-    // @DeprecateProperty('`hiddenColumnsText` is deprecated')
     get hiddenColumnsText() {
         return this._hiddenColumnsText;
     }
@@ -50344,9 +50605,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets the text to be displayed inside the toggle button.
+     * @deprecated in version 10.1.0
      *
-     * @deprecated
+     * Gets/Sets the text to be displayed inside the toggle button.
      *
      * @remarks
      * Used for the built-in column pinning UI of the`IgxColumnComponent`.
@@ -50416,9 +50677,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this._currencyPositionLeft = i < 1;
     }
     /**
-     * Gets/Sets whether the toolbar is shown.
+     * @deprecated in version 11.0.0
      *
-     * @deprecated
+     * Gets/Sets whether the toolbar is shown.
      *
      * @example
      * ```html
@@ -50432,9 +50693,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this._showToolbar = newValue;
     }
     /**
-     * Gets/Sets the toolbar's title.
+     * @deprecated in version 11.0.0
      *
-     * @deprecated
+     * Gets/Sets the toolbar's title.
      *
      * @example
      * ```html
@@ -50449,9 +50710,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets whether exporting to MS Excel is enabled or disabled.
+     * @deprecated `exportExcel` is deprecated
      *
-     * @deprecated
+     * Gets/Sets whether exporting to MS Excel is enabled or disabled.
      *
      * @example
      * ```html
@@ -50466,9 +50727,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets whether the option for exporting to CSV is enabled or disabled.
+     * @deprecated `exportCsv` is deprecated
      *
-     * @deprecated
+     * Gets/Sets whether the option for exporting to CSV is enabled or disabled.
      *
      * ```html
      * <igx-grid [data]="localData" [showToolbar]="true" [autoGenerate]="true" [exportCsv]="true"></igx-grid>
@@ -50482,9 +50743,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets the textual content for the main export button.
+     * @deprecated `exportText` is deprecated
      *
-     * @deprecated
+     * Gets/Sets the textual content for the main export button.
      *
      * @example
      * ```html
@@ -50499,9 +50760,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets the textual content for the MS Excel export button.
+     * @deprecated `exportExcelText` is deprecated
      *
-     * @deprecated
+     * Gets/Sets the textual content for the MS Excel export button.
      *
      * ```html
      * <igx-grid [exportExcelText]="'My Excel Exporter" [showToolbar]="true" [exportText]="'My Exporter'" [exportCsv]="true"></igx-grid>
@@ -50515,9 +50776,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.notifyChanges();
     }
     /**
-     * Gets/Sets the textual content for the CSV export button.
+     * @deprecated `exportCsvText` is deprecated
      *
-     * @deprecated
+     * Gets/Sets the textual content for the CSV export button.
      *
      * @example
      * ```html
@@ -51184,7 +51445,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;
@@ -51611,9 +51872,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this._visibleColumns;
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+     *
      * Gets the total number of pages.
      *
-     * @deprecated in version 12.1.0
      * @example
      * ```typescript
      * const totalPages = this.grid.totalPages;
@@ -51624,9 +51886,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return (_a = this.paginator) === null || _a === void 0 ? void 0 : _a.totalPages;
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+     *
      * Gets if the current page is the first page.
      *
-     * @deprecated in version 12.1.0
      * @example
      * ```typescript
      * const firstPage = this.grid.isFirstPage;
@@ -51636,9 +51899,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         return this.paginator.isLastPage;
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+     *
      * Goes to the next page, if the grid is not already at the last page.
      *
-     * @deprecated in version 12.1.0
      * @example
      * ```typescript
      * this.grid1.nextPage();
@@ -51650,9 +51914,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         (_a = this.paginator) === null || _a === void 0 ? void 0 : _a.nextPage();
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+     *
      * Goes to the previous page, if the grid is not already at the first page.
      *
-     * @deprecated in version 12.1.0
      * @example
      * ```typescript
      * this.grid1.previousPage();
@@ -51688,9 +51953,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding property exposed by the `igx-paginator`
+     *
      * Returns if the current page is the last page.
      *
-     * @deprecated in version 12.1.0
      * @example
      * ```typescript
      * const lastPage = this.grid.isLastPage;
@@ -51787,6 +52053,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this._columnsReordered(column);
     }
     /**
+     * @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
+     *
      * Goes to the desired page index.
      *
      * @example
@@ -54801,24 +55069,9 @@ IgxGridBaseDirective.propDecorators = {
     totalRecords: [{ type: Input }],
     selectRowOnClick: [{ type: Input }]
 };
-__decorate([
-    DeprecateProperty('`pageChange` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-], IgxGridBaseDirective.prototype, "pageChange", void 0);
-__decorate([
-    DeprecateProperty('`perPageChange` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-], IgxGridBaseDirective.prototype, "perPageChange", void 0);
-__decorate([
-    DeprecateProperty('`evenRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
-], IgxGridBaseDirective.prototype, "evenRowCSS", void 0);
-__decorate([
-    DeprecateProperty('`oddRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
-], IgxGridBaseDirective.prototype, "oddRowCSS", void 0);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "primaryKey", void 0);
-__decorate([
-    DeprecateProperty('`pagingDone` is deprecated. Use the corresponding output exposed by the `igx-paginator` component instead.')
-], IgxGridBaseDirective.prototype, "pagingDone", void 0);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "filteringLogic", null);
@@ -54828,18 +55081,6 @@ __decorate([
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "advancedFilteringExpressionsTree", null);
-__decorate([
-    DeprecateProperty('`paging` is deprecated')
-], IgxGridBaseDirective.prototype, "paging", null);
-__decorate([
-    DeprecateProperty('`page` is deprecated. Use `page` property form `paginator` component instead.')
-], IgxGridBaseDirective.prototype, "page", null);
-__decorate([
-    DeprecateProperty('`perPage` is deprecated. Use `perPage` property from `paginator` component instead.')
-], IgxGridBaseDirective.prototype, "perPage", null);
-__decorate([
-    DeprecateProperty('`columnHiding` is deprecated.')
-], IgxGridBaseDirective.prototype, "columnHiding", null);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "hideRowSelectors", null);
@@ -54861,42 +55102,9 @@ __decorate([
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "isLoading", null);
-__decorate([
-    DeprecateProperty('`columnHidingTitle` is deprecated')
-], IgxGridBaseDirective.prototype, "columnHidingTitle", null);
-__decorate([
-    DeprecateProperty('`columnPinning` is deprecated')
-], IgxGridBaseDirective.prototype, "columnPinning", null);
-__decorate([
-    DeprecateProperty('`columnPinningTitle` is deprecated')
-], IgxGridBaseDirective.prototype, "columnPinningTitle", null);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "sortingExpressions", null);
-__decorate([
-    DeprecateProperty('`pinnedColumnsText` is deprecated')
-], IgxGridBaseDirective.prototype, "pinnedColumnsText", null);
-__decorate([
-    DeprecateProperty('`showToolbar` is deprecated')
-], IgxGridBaseDirective.prototype, "showToolbar", null);
-__decorate([
-    DeprecateProperty('`toolbarTitle` is deprecated')
-], IgxGridBaseDirective.prototype, "toolbarTitle", null);
-__decorate([
-    DeprecateProperty('`exportExcel` is deprecated')
-], IgxGridBaseDirective.prototype, "exportExcel", null);
-__decorate([
-    DeprecateProperty('`exportCsv` is deprecated')
-], IgxGridBaseDirective.prototype, "exportCsv", null);
-__decorate([
-    DeprecateProperty('`exportText` is deprecated')
-], IgxGridBaseDirective.prototype, "exportText", null);
-__decorate([
-    DeprecateProperty('`exportExcelText` is deprecated')
-], IgxGridBaseDirective.prototype, "exportExcelText", null);
-__decorate([
-    DeprecateProperty('`exportCsvText` is deprecated')
-], IgxGridBaseDirective.prototype, "exportCsvText", null);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "cellSelection", null);
@@ -54906,24 +55114,6 @@ __decorate([
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "columnSelection", null);
-__decorate([
-    DeprecateProperty('`totalPages` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "totalPages", null);
-__decorate([
-    DeprecateProperty('`isFirstPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "isFirstPage", null);
-__decorate([
-    DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "nextPage", null);
-__decorate([
-    DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "previousPage", null);
-__decorate([
-    DeprecateProperty('`isLastPage` is deprecated. Use the corresponding property exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "isLastPage", null);
-__decorate([
-    DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
-], IgxGridBaseDirective.prototype, "paginate", null);
 __decorate([
     WatchChanges()
 ], IgxGridBaseDirective.prototype, "selectRowOnClick", null);
@@ -54971,7 +55161,7 @@ class BaseRow {
         return (_b = this._data) !== null && _b !== void 0 ? _b : this.grid.dataView[this.index];
     }
     /**
-     * @deprecated Use 'data' instead.
+     * @deprecated Use 'data' instead
      *
      * The data record that populates the row
      */
@@ -54979,8 +55169,7 @@ class BaseRow {
         return this.data;
     }
     /**
-     * @deprecated Use 'key' instead.
-     *
+     * @deprecated Use 'key' instead
      */
     get rowID() {
         return this.key;
@@ -55149,12 +55338,6 @@ class BaseRow {
         this.grid.deleteRowById(this.key);
     }
 }
-__decorate([
-    DeprecateProperty(`'rowData' property is deprecated. Use 'data' instead.`)
-], BaseRow.prototype, "rowData", null);
-__decorate([
-    DeprecateProperty(`'rowID' property is deprecated. Use 'key' instead.`)
-], BaseRow.prototype, "rowID", null);
 class IgxGridRow extends BaseRow {
     /**
      * @hidden
@@ -56151,17 +56334,6 @@ class IgxGridCellComponent {
     get currencyCodeSymbol() {
         return getCurrencySymbol(this.currencyCode, 'wide', this.grid.locale);
     }
-    /**
-     * @deprecated
-     * Gets whether the cell is selected.
-     * ```typescript
-     * let isCellSelected = thid.cell.isCellSelected();
-     * ```
-     * @memberof IgxGridCellComponent
-     */
-    isCellSelected() {
-        return this.selectionService.selected(this.selectionNode);
-    }
     /**
      * @hidden
      * @internal
@@ -56466,9 +56638,6 @@ IgxGridCellComponent.propDecorators = {
     onClick: [{ type: HostListener, args: ['click', ['$event'],] }],
     onContextMenu: [{ type: HostListener, args: ['contextmenu', ['$event'],] }]
 };
-__decorate([
-    DeprecateMethod(`'isCellSelected' is deprecated. Use 'selected' property instead.`)
-], IgxGridCellComponent.prototype, "isCellSelected", null);
 
 class IgxGridFooterComponent {
 }
@@ -56847,9 +57016,10 @@ class IgxColumnActionsComponent {
         this._differ = this.differs.find([]).create(this.trackChanges);
     }
     /**
+     * @deprecated Use grid input instead.
+     *
      * Gets the grid columns to provide an action for.
      *
-     * @deprecated
      * @example
      * ```typescript
      * let gridColumns = this.columnActions.columns;
@@ -57089,9 +57259,6 @@ IgxColumnActionsComponent.propDecorators = {
     checkAllText: [{ type: Input }],
     id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }]
 };
-__decorate([
-    DeprecateProperty(`Deprecated. Use 'grid' input instead.`)
-], IgxColumnActionsComponent.prototype, "columns", null);
 
 /**
  * @hidden
@@ -61384,7 +61551,8 @@ class IgxGridComponent extends IgxGridBaseDirective {
         return this._dropAreaMessage || this.resourceStrings.igx_grid_groupByArea_message;
     }
     /**
-     * @deprecated
+     * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+     *
      * Returns a `CellType` object that matches the conditions.
      *
      * @example
@@ -62146,9 +62314,6 @@ IgxGridComponent.propDecorators = {
     dropAreaMessage: [{ type: Input }],
     showGroupArea: [{ type: Input }]
 };
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
 class IgxGridStateDirective {
     /**
@@ -64951,7 +65116,8 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         return this.gridAPI;
     }
     /**
-     * @deprecated
+     * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+     *
      * Returns a `CellType` object that matches the conditions.
      *
      * @example
@@ -65611,9 +65777,6 @@ IgxTreeGridComponent.propDecorators = {
     expansionDepth: [{ type: Input }],
     rowLoadingIndicatorTemplate: [{ type: Input }]
 };
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxTreeGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
 class IgxTreeGridRowComponent extends IgxRowDirective {
     /**
@@ -67814,7 +67977,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         return this._defaultExpandState;
     }
     /**
-     * @deprecated
+     * @deprecated in version 12.1.0. Use `getCellByColumn` or `getCellByKey` instead
+     *
      * Returns a `CellType` object that matches the conditions.
      *
      * @example
@@ -68459,9 +68623,6 @@ IgxHierarchicalGridComponent.propDecorators = {
     data: [{ type: Input }],
     expandChildren: [{ type: Input }]
 };
-__decorate([
-    DeprecateMethod('`getCellByColumnVisibleIndex` is deprecated. Use `getCellByColumn` or `getCellByKey` instead')
-], IgxHierarchicalGridComponent.prototype, "getCellByColumnVisibleIndex", null);
 
 class IgxHierarchicalGridCellComponent extends IgxGridCellComponent {
     constructor(selectionService, gridAPI, cdr, helement, zone, touchManager, platformUtil) {
@@ -72898,6 +73059,8 @@ class IgxToastComponent extends IgxNotificationsDirective {
         };
     }
     /**
+     * @deprecated in version 12.2.3. We suggest using `positionSettings` property instead
+     *
      * Sets/gets the position of the toast.
      * If not set, the `position` attribute will have value `IgxToastPosition.Bottom`.
      * ```html
@@ -73041,9 +73204,6 @@ IgxToastComponent.propDecorators = {
     position: [{ type: Input }],
     positionSettings: [{ type: Input }]
 };
-__decorate([
-    DeprecateProperty('`position` is deprecated. We suggest using `positionSettings` property instead.')
-], IgxToastComponent.prototype, "position", null);
 /**
  * @hidden
  */
@@ -76437,5 +76597,5 @@ IgxTreeModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BaseProgressDirective, BlockScrollStrategy, ButtonGroupAlignment, Calendar, CalendarHammerConfig, CalendarSelection, CalendarView, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultSortingStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportRecordType, FilterListItem, FilterMode, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GlobalPositionStrategy, GridBaseAPIService, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupedRecords, HeaderType, HorizontalAlignment, IGX_CHECKBOX_REQUIRED_VALIDATOR, IGX_INPUT_GROUP_TYPE, IGX_SWITCH_REQUIRED_VALIDATOR, ITreeGridAggregation, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripModule, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarBaseDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollMonthDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCardType, IgxCarouselComponent, IgxCarouselComponentBase, IgxCarouselModule, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxCheckboxRequiredDirective, IgxChipComponent, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnActionsModule, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxComboComponent, IgxComboModule, IgxComboState, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogComponent, IgxDialogModule, IgxDisplayDensityModule, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragLocation, IgxDropDirective, IgxDropDownBaseDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemBaseDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelModule, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridAPIService, IgxGridActionsBaseDirective, IgxGridBaseDirective, IgxGridBodyDirective, IgxGridCell, IgxGridCommonModule, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridForOfDirective, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalPipe, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridStateModule, IgxGridToolbarActionsDirective, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleDirective, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHierarchicalGridAPIService, IgxHierarchicalGridBaseDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHierarchicalTransactionServiceFactory, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerBaseDirective, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorDirective, IgxPaginatorModule, IgxPaginatorTemplateDirective, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPickersCommonModule, IgxPrefixDirective, IgxPrefixModule, IgxPrependDropStrategy, IgxProgressBarModule, IgxProgressType, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandAPIService, IgxRowIslandComponent, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSorting, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStringFilteringOperand, IgxSuffixDirective, IgxSuffixModule, IgxSummaryOperand, IgxSummaryRow, IgxSwitchComponent, IgxSwitchModule, IgxSwitchRequiredDirective, IgxTabContentComponent, IgxTabContentDirective, IgxTabHeaderComponent, IgxTabHeaderDirective, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabItemDirective, IgxTabsAlignment, IgxTabsComponent, IgxTabsDirective, IgxTabsModule, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToastPosition, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridAPIService, IgxTreeGridComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectMarkerDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowEditPositionStrategy, RowPinningPosition, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, WEEKDAYS, blink, changei18n, fadeIn, fadeOut, filteringStateDefaults, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, flipVerBck, flipVerFwd, getCurrentResourceStrings, getTypeNameForDebugging, growVerIn, growVerOut, heartbeat, hierarchicalTransactionServiceFactory, isDateInRanges, isLeap, monthRange, pulsateBck, pulsateFwd, range, rotateInBl, rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd, toPercent, valueInRange, weekDay, ɵ1, ɵ2, IgxActionStripMenuItemDirective as ɵa, IGX_DROPDOWN_BASE as ɵb, IgxGridActionButtonComponent as ɵba, ToggleAnimationPlayer as ɵbb, IgxExpansionPanelTitleDirective as ɵbc, IgxExpansionPanelDescriptionDirective as ɵbd, IgxExpansionPanelIconDirective as ɵbe, IgxBannerActionsDirective as ɵbf, IgxDaysViewNavigationService as ɵbg, IgxDayItemComponent as ɵbh, IgxMonthViewSlotsCalendar as ɵbi, IgxGetViewDateCalendar as ɵbj, IgxCarouselIndicatorDirective as ɵbk, IgxCarouselNextButtonDirective as ɵbl, IgxCarouselPrevButtonDirective as ɵbm, IgxComboAPIService as ɵbn, IGX_COMBO_COMPONENT as ɵbo, IgxComboDropDownComponent as ɵbq, IgxComboItemComponent as ɵbr, IgxComboHeaderDirective as ɵbs, IgxComboFooterDirective as ɵbt, IgxComboItemDirective as ɵbu, IgxComboEmptyDirective as ɵbv, IgxComboHeaderItemDirective as ɵbw, IgxComboAddItemDirective as ɵbx, IgxComboToggleIconDirective as ɵby, IgxComboClearIconDirective as ɵbz, IgxComboFilteringPipe as ɵca, IgxComboGroupingPipe as ɵcb, IgxComboAddItemComponent as ɵcc, PickerBaseDirective as ɵcd, IgxCalendarContainerComponent as ɵce, IgxCalendarContainerModule as ɵcf, IgxDialogTitleDirective as ɵcg, IgxDialogActionsDirective as ɵch, IgxCellCrudState as ɵci, IgxRowCrudState as ɵcj, IgxRowAddCrudState as ɵck, IgxGridCRUDService as ɵcl, IgxColumnMovingService as ɵcm, IgxExcelStyleCustomDialogComponent as ɵcn, IgxExcelStyleDefaultExpressionComponent as ɵco, IgxExcelStyleDateExpressionComponent as ɵcp, HammerGesturesManager as ɵcq, WatchChanges as ɵcr, WatchColumnChanges as ɵcs, notifyChanges as ɵct, IgxNotificationsDirective as ɵcu, IgxGridColumnResizerComponent as ɵcv, IgxColumnResizerDirective as ɵcw, IgxColumnResizingService as ɵcx, IgxRowSelectorDirective as ɵcy, IgxGroupByRowSelectorDirective as ɵcz, IgxGridSelectionService as ɵd, IgxHeadSelectorDirective as ɵda, IgxRowDragDirective as ɵdb, IgxDragIndicatorIconDirective as ɵdc, IgxRowDragGhostDirective as ɵdd, IgxRowDragModule as ɵde, IgxGridHeaderRowComponent as ɵdf, IgxGridHeaderGroupComponent as ɵdg, IgxGridHeaderComponent as ɵdh, IgxGridFilteringCellComponent as ɵdi, IgxFilteringService as ɵdj, IgxGridFilteringRowComponent as ɵdk, IgxGridGroupByAreaComponent as ɵdl, IgxGroupByAreaDirective as ɵdm, IgxGroupByMetaPipe as ɵdn, IgxTemplateOutletDirective as ɵdo, IgxTemplateOutletModule as ɵdp, IgxRowEditTemplateDirective as ɵdq, IgxRowEditTextDirective as ɵdr, IgxRowAddTextDirective as ɵds, IgxRowEditActionsDirective as ɵdt, IgxRowEditTabStopDirective as ɵdu, IgxSummaryRowComponent as ɵdv, IgxSummaryCellComponent as ɵdw, IgxRowDirective as ɵdx, IgxGridNavigationService as ɵdy, IgxGridSummaryService as ɵdz, ConnectedPositioningStrategy as ɵea, IgxGridGroupByRowComponent as ɵeb, IgxTreeGridSelectionService as ɵec, IgxTreeGridGroupByAreaComponent as ɵed, IgxRowLoadingIndicatorTemplateDirective as ɵee, IgxHierarchicalGridNavigationService as ɵef, IgxChildGridRowComponent as ɵeg, IgxGridCellComponent as ɵeh, IgxGridFooterComponent as ɵei, IgxAdvancedFilteringDialogComponent as ɵej, IgxColumnHidingDirective as ɵek, IgxColumnPinningDirective as ɵel, IgxGridSharedModules as ɵem, IgxProcessBarTextTemplateDirective as ɵen, IgxProgressBarGradientDirective as ɵeo, DIR_DOCUMENT_FACTORY as ɵep, DIR_DOCUMENT as ɵeq, IgxDirectionality as ɵer, IgxSelectItemNavigationDirective as ɵes, IGX_TIME_PICKER_COMPONENT as ɵet, IgxItemListDirective as ɵev, IgxTimeItemDirective as ɵew, IgxTimePickerTemplateDirective as ɵex, IgxTimePickerActionsDirective as ɵey, TimeFormatPipe as ɵez, IGX_EXPANSION_PANEL_COMPONENT as ɵf, TimeItemPipe as ɵfa, IgxGridPipesModule as ɵfb, IgxGridCellStyleClassesPipe as ɵfc, IgxGridCellStylesPipe as ɵfd, IgxGridRowClassesPipe as ɵfe, IgxGridRowStylesPipe as ɵff, IgxGridNotGroupedPipe as ɵfg, IgxGridTopLevelColumns as ɵfh, IgxGridFilterConditionPipe as ɵfi, IgxGridTransactionPipe as ɵfj, IgxGridPaginatorOptionsPipe as ɵfk, IgxHasVisibleColumnsPipe as ɵfl, IgxGridRowPinningPipe as ɵfm, IgxColumnActionEnabledPipe as ɵfn, IgxFilterActionColumnsPipe as ɵfo, IgxSortActionColumnsPipe as ɵfp, IgxGridDataMapperPipe as ɵfq, IgxStringReplacePipe as ɵfr, IgxGridTransactionStatePipe as ɵfs, IgxColumnFormatterPipe as ɵft, IgxSummaryFormatterPipe as ɵfu, IgxGridAddRowPipe as ɵfv, IgxHeaderGroupWidthPipe as ɵfw, IgxHeaderGroupStylePipe as ɵfx, IgxGridColumnModule as ɵfy, IgxGridHeadersModule as ɵfz, IGX_TREE_COMPONENT as ɵg, SortingIndexPipe as ɵga, IgxGridFilteringModule as ɵgb, IgxColumnMovingModule as ɵgc, IgxColumnMovingDropDirective as ɵgd, IgxColumnMovingDragDirective as ɵge, IgxGridResizingModule as ɵgf, IgxResizeHandleDirective as ɵgg, IgxGridExcelStyleFilteringModule as ɵgh, IgxGridSelectionModule as ɵgi, IgxGridDragSelectDirective as ɵgj, IgxGridSummaryModule as ɵgk, IgxSummaryDataPipe as ɵgl, IgxGridToolbarModule as ɵgm, BaseToolbarDirective as ɵgn, BaseToolbarColumnActionsDirective as ɵgo, IgxGridRowComponent as ɵgp, IgxGridSortingPipe as ɵgq, IgxGridGroupingPipe as ɵgr, IgxGridPagingPipe as ɵgs, IgxGridFilteringPipe as ɵgt, IgxGridSummaryPipe as ɵgu, IgxGridDetailsPipe as ɵgv, IgxGridExpandableCellComponent as ɵgw, IgxTreeGridRowComponent as ɵgx, IgxTreeGridCellComponent as ɵgy, IgxTreeGridHierarchizingPipe as ɵgz, IGX_TREE_NODE_COMPONENT as ɵh, IgxTreeGridFlatteningPipe as ɵha, IgxTreeGridSortingPipe as ɵhb, IgxTreeGridPagingPipe as ɵhc, IgxTreeGridTransactionPipe as ɵhd, IgxTreeGridNormalizeRecordsPipe as ɵhe, IgxTreeGridAddRowPipe as ɵhf, IgxTreeGridFilteringPipe as ɵhg, IgxTreeGridSummaryPipe as ɵhh, IgxHierarchicalRowComponent as ɵhi, IgxHierarchicalGridCellComponent as ɵhj, IgxSliderThumbComponent as ɵhk, IgxThumbLabelComponent as ɵhl, IgxTicksComponent as ɵhm, IgxTickLabelsPipe as ɵhn, IgxTabsBase as ɵho, IgxTabHeaderBase as ɵhp, IgxTabContentBase as ɵhq, IgxSplitBarComponent as ɵhr, IgxTreeService as ɵhs, IgxTreeSelectionService as ɵht, IgxTreeNavigationService as ɵhu, PlatformUtil as ɵi, EaseIn as ɵj, EaseOut as ɵk, IgxInputGroupBase as ɵl, IgxSelectionAPIService as ɵm, IgxForOfSyncService as ɵn, IgxForOfScrollSyncService as ɵo, DisplayContainerComponent as ɵp, IgxScrollInertiaDirective as ɵq, IgxScrollInertiaModule as ɵr, VirtualHelperComponent as ɵs, VirtualHelperBaseDirective as ɵt, HVirtualHelperComponent as ɵu, MaskParsingService as ɵv, DeprecateMethod as ɵw, DeprecateProperty as ɵx, isHierarchyMatch as ɵy, getHierarchy as ɵz };
+export { AbsolutePosition, AbsoluteScrollStrategy, AutoPositionStrategy, BaseFilteringStrategy, BaseProgressDirective, BlockScrollStrategy, ButtonGroupAlignment, Calendar, CalendarHammerConfig, CalendarSelection, CalendarView, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DataUtil, DatePart, DateRangePickerFormatPipe, DateRangeType, DefaultSortingStrategy, Direction, DisplayDensity, DisplayDensityBase, DisplayDensityToken, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportRecordType, FilterListItem, FilterMode, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, GlobalPositionStrategy, GridBaseAPIService, GridColumnDataType, GridInstanceType, GridPagingMode, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupedRecords, HeaderType, HorizontalAlignment, IGX_CHECKBOX_REQUIRED_VALIDATOR, IGX_INPUT_GROUP_TYPE, IGX_SWITCH_REQUIRED_VALIDATOR, ITreeGridAggregation, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripModule, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarBaseDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollMonthDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCardType, IgxCarouselComponent, IgxCarouselComponentBase, IgxCarouselModule, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxCheckboxRequiredDirective, IgxChipComponent, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnActionsModule, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxComboComponent, IgxComboModule, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogComponent, IgxDialogModule, IgxDisplayDensityModule, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragLocation, IgxDropDirective, IgxDropDownBaseDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemBaseDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelModule, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridAPIService, IgxGridActionsBaseDirective, IgxGridBaseDirective, IgxGridBodyDirective, IgxGridCell, IgxGridCommonModule, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridForOfDirective, IgxGridHierarchicalPagingPipe, IgxGridHierarchicalPipe, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridStateModule, IgxGridToolbarActionsDirective, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleDirective, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeaderCollapseIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHierarchicalGridAPIService, IgxHierarchicalGridBaseDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHierarchicalTransactionServiceFactory, IgxHintDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerBaseDirective, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorDirective, IgxPaginatorModule, IgxPaginatorTemplateDirective, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPickersCommonModule, IgxPrefixDirective, IgxPrefixModule, IgxPrependDropStrategy, IgxProgressBarModule, IgxProgressType, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandAPIService, IgxRowIslandComponent, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSorting, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStringFilteringOperand, IgxSuffixDirective, IgxSuffixModule, IgxSummaryOperand, IgxSummaryRow, IgxSwitchComponent, IgxSwitchModule, IgxSwitchRequiredDirective, IgxTabContentComponent, IgxTabContentDirective, IgxTabHeaderComponent, IgxTabHeaderDirective, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabItemDirective, IgxTabsAlignment, IgxTabsComponent, IgxTabsDirective, IgxTabsModule, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToastPosition, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridAPIService, IgxTreeGridComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectMarkerDirective, IgxTreeSelectionType, IgxYearsViewComponent, LabelPosition, NoOpScrollStrategy, NoopFilteringStrategy, NoopSortingStrategy, PagingError, PickerInteractionMode, Point, RadioGroupAlignment, RadioLabelPosition, RelativePosition, RelativePositionStrategy, RowEditPositionStrategy, RowPinningPosition, ScrollMonth, ScrollStrategy, SliderHandle, SortingDirection, SplitterType, SwitchLabelPosition, TickLabelsOrientation, TicksOrientation, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, VerticalAlignment, WEEKDAYS, blink, changei18n, fadeIn, fadeOut, filteringStateDefaults, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop, flipVerBck, flipVerFwd, getCurrentResourceStrings, getTypeNameForDebugging, growVerIn, growVerOut, heartbeat, hierarchicalTransactionServiceFactory, isDateInRanges, isLeap, monthRange, pulsateBck, pulsateFwd, range, rotateInBl, rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor, rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl, rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2, rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr, rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter, scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr, scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr, scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft, scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter, scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight, shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft, slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr, slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck, swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd, swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck, swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd, toPercent, valueInRange, weekDay, ɵ1, ɵ2, IgxActionStripMenuItemDirective as ɵa, IGX_DROPDOWN_BASE as ɵb, 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