igniteui-angular 13.0.0-alpha.6 → 13.0.0-alpha.7

package/lib/combo/combo.component.d.ts

@@ -1,21 +1,16 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnInit, OnDestroy, TemplateRef, Injector } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnInit, OnDestroy, Injector } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { IgxSelectionAPIService } from '../core/selection';
-import { IBaseEventArgs, IBaseCancelableBrowserEventArgs, IBaseCancelableEventArgs, CancelableEventArgs } from '../core/utils';
+import { IBaseEventArgs, IBaseCancelableEventArgs, CancelableEventArgs } from '../core/utils';
 import { IgxStringFilteringOperand, IgxBooleanFilteringOperand } from '../data-operations/filtering-condition';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
-import { IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
 import { IgxIconService } from '../icon/public_api';
-import { IgxInputGroupComponent } from '../input-group/input-group.component';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
-import { OverlaySettings } from '../services/public_api';
-import { DisplayDensityBase, IDisplayDensityOptions } from '../core/density';
-import { IgxComboBase } from './combo.common';
+import { IDisplayDensityOptions } from '../core/density';
+import { IgxComboBaseDirective } from './combo.common';
 import { IgxComboAPIService } from './combo.api';
 import { EditorProvider } from '../core/edit-provider';
-import { IgxInputDirective } from '../directives/input/input.directive';
 import { IgxInputGroupType } from '../input-group/public_api';
-import { SortingDirection } from '../data-operations/sorting-strategy';
 import * as i0 from "@angular/core";
 import * as i1 from "./combo-add-item.component";
 import * as i2 from "./combo.directives";
@@ -32,20 +27,6 @@ import * as i12 from "../icon/public_api";
 import * as i13 from "../input-group/input-group.component";
 import * as i14 from "../directives/ripple/ripple.directive";
 import * as i15 from "../directives/toggle/toggle.directive";
-export declare enum IgxComboState {
-    /**
-     * Combo with initial state.
-     */
-    INITIAL = 0,
-    /**
-     * Combo with valid state.
-     */
-    VALID = 1,
-    /**
-     * Combo with invalid state.
-     */
-    INVALID = 2
-}
 /** The filtering criteria to be applied on data search */
 export interface IComboFilteringOptions {
     /** Defines filtering case-sensitivity */
@@ -85,7 +66,7 @@ export interface IComboItemAdditionEvent extends IBaseEventArgs, CancelableEvent
  * @igxGroup Grids & Lists
  *
  * @remarks
- * It provides the ability to filter items as well as perform single or multiple seleciton with the provided data.
+ * 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
@@ -95,417 +76,15 @@ export interface IComboItemAdditionEvent extends IBaseEventArgs, CancelableEvent
  * </igx-combo>
  * ```
  */
-export declare class IgxComboComponent extends DisplayDensityBase implements IgxComboBase, AfterViewInit, ControlValueAccessor, OnInit, OnDestroy, EditorProvider {
+export declare class IgxComboComponent extends IgxComboBaseDirective implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy, EditorProvider {
     protected elementRef: ElementRef;
     protected cdr: ChangeDetectorRef;
-    protected selection: IgxSelectionAPIService;
+    protected selectionService: IgxSelectionAPIService;
     protected comboAPI: IgxComboAPIService;
-    private _iconService;
+    protected _iconService: IgxIconService;
     protected _displayDensityOptions: IDisplayDensityOptions;
-    private _inputGroupType;
-    private _injector;
-    /**
-     * Set custom overlay settings that control how the combo's list of items is displayed.
-     * Set:
-     * ```html
-     * <igx-combo [overlaySettings] = "customOverlaySettings"></igx-combo>
-     * ```
-     *
-     * ```typescript
-     *  const customSettings = { positionStrategy: { settings: { target: myTarget } } };
-     *  combo.overlaySettings = customSettings;
-     * ```
-     * Get any custom overlay settings used by the combo:
-     * ```typescript
-     *  const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;
-     * ```
-     */
-    overlaySettings: OverlaySettings;
-    /** @hidden @internal */
-    inputGroup: IgxInputGroupComponent;
-    /** @hidden @internal */
-    comboInput: IgxInputDirective;
-    /**
-     * @hidden @internal
-     */
-    dropdown: IgxComboDropDownComponent;
-    /**
-     * @hidden @internal
-     */
-    searchInput: ElementRef<HTMLInputElement>;
-    /**
-     * @hidden @internal
-     */
-    get displaySearchInput(): boolean;
-    /**
-     * The custom template, if any, that should be used when rendering ITEMS in the combo list
-     *
-     * ```typescript
-     * // Set in typescript
-     * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-     * myComponent.combo.itemTemplate = myCustomTemplate;
-     * ```
-     * ```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>
-     * ```
-     */
-    itemTemplate: TemplateRef<any>;
-    /**
-     * The custom template, if any, that should be used when rendering the HEADER for the combo items list
-     *
-     * ```typescript
-     * // Set in typescript
-     * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-     * myComponent.combo.headerTemplate = myCustomTemplate;
-     * ```
-     * ```html
-     * <!-- Set in markup -->
-     *  <igx-combo #combo>
-     *      ...
-     *      <ng-template igxComboHeader>
-     *          <div class="combo__header">
-     *              This is a custom header
-     *          </div>
-     *      </ng-template>
-     *  </igx-combo>
-     * ```
-     */
-    headerTemplate: TemplateRef<any>;
-    /**
-     * The custom template, if any, that should be used when rendering the FOOTER for the combo items list
-     *
-     * ```typescript
-     * // Set in typescript
-     * const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
-     * myComponent.combo.footerTemplate = myCustomTemplate;
-     * ```
-     * ```html
-     * <!-- Set in markup -->
-     *  <igx-combo #combo>
-     *      ...
-     *      <ng-template igxComboFooter>
-     *          <div class="combo__footer">
-     *              This is a custom footer
-     *          </div>
-     *      </ng-template>
-     *  </igx-combo>
-     * ```
-     */
-    footerTemplate: TemplateRef<any>;
-    /**
-     * 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;
-     * ```
-     * ```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>
-     * ```
-     */
-    headerItemTemplate: TemplateRef<any>;
-    /**
-     * 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>
-     * ```
-     */
-    addItemTemplate: TemplateRef<any>;
-    /**
-     * 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>
-     * ```
-     */
-    emptyTemplate: TemplateRef<any>;
-    /**
-     * 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>
-     * ```
-     */
-    toggleIconTemplate: TemplateRef<any>;
-    /**
-     * 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>
-     * ```
-     */
-    clearIconTemplate: TemplateRef<any>;
-    /**
-     * @hidden @internal
-     */
-    virtualScrollContainer: IgxForOfDirective<any>;
-    /**
-     * Emitted when item selection is changing, before the selection completes
-     *
-     * ```html
-     * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
-     * ```
-     */
-    selectionChanging: EventEmitter<IComboSelectionChangingEventArgs>;
-    /**
-     * Emitted before the dropdown is opened
-     *
-     * ```html
-     * <igx-combo opening='handleOpening($event)'></igx-combo>
-     * ```
-     */
-    opening: EventEmitter<IBaseCancelableBrowserEventArgs>;
-    /**
-     * Emitted after the dropdown is opened
-     *
-     * ```html
-     * <igx-combo (opened)='handleOpened($event)'></igx-combo>
-     * ```
-     */
-    opened: EventEmitter<IBaseEventArgs>;
-    /**
-     * Emitted before the dropdown is closed
-     *
-     * ```html
-     * <igx-combo (closing)='handleClosing($event)'></igx-combo>
-     * ```
-     */
-    closing: EventEmitter<IBaseCancelableBrowserEventArgs>;
-    /**
-     * Emitted after the dropdown is closed
-     *
-     * ```html
-     * <igx-combo (closed)='handleClosed($event)'></igx-combo>
-     * ```
-     */
-    closed: EventEmitter<IBaseEventArgs>;
-    /**
-     * Emitted when an item is being added to the data collection
-     *
-     * ```html
-     * <igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
-     * ```
-     */
-    addition: EventEmitter<IComboItemAdditionEvent>;
-    /**
-     * Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.)
-     *
-     * ```html
-     * <igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
-     * ```
-     */
-    searchInputUpdate: EventEmitter<IComboSearchInputEventArgs>;
-    /**
-     * Emitted when new chunk of data is loaded from the virtualization
-     *
-     * ```html
-     * <igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
-     * ```
-     */
-    dataPreLoad: EventEmitter<IForOfState>;
-    /**
-     * Gets/gets combo id.
-     *
-     * ```typescript
-     * // get
-     * let id = this.combo.id;
-     * ```
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [id]='combo1'></igx-combo>
-     * ```
-     */
-    id: string;
-    /**
-     * Sets the style width of the element
-     *
-     * ```typescript
-     * // get
-     * let myComboWidth = this.combo.width;
-     * ```
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [width]='250px'></igx-combo>
-     * ```
-     */
-    width: string;
-    /**
-     * @hidden @internal
-     */
-    cssClass: string;
-    /**
-     * @hidden @internal
-     */
-    role: string;
-    /**
-     * @hidden @internal
-     */
-    get ariaExpanded(): boolean;
-    /**
-     * @hidden @internal
-     */
-    get hasPopUp(): string;
-    /**
-     * @hidden @internal
-     */
-    get ariaOwns(): string;
-    /**
-     * Controls whether custom values can be added to the collection
-     *
-     * ```typescript
-     * // get
-     * let comboAllowsCustomValues = this.combo.allowCustomValues;
-     * ```
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [allowCustomValues]='true'></igx-combo>
-     * ```
-     */
-    allowCustomValues: boolean;
-    /**
-     * Configures the drop down list height
-     *
-     * ```typescript
-     * // get
-     * let myComboItemsMaxHeight = this.combo.itemsMaxHeight;
-     * ```
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [itemsMaxHeight]='320'></igx-combo>
-     * ```
-     */
-    get itemsMaxHeight(): number;
-    set itemsMaxHeight(val: number);
-    /**
-     * Configures the drop down list width
-     *
-     * ```typescript
-     * // get
-     * let myComboItemsWidth = this.combo.itemsWidth;
-     * ```
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [itemsWidth] = '"180px"'></igx-combo>
-     * ```
-     */
-    itemsWidth: string;
-    /**
-     * Configures the drop down list item height
-     *
-     * ```typescript
-     * // get
-     * let myComboItemHeight = this.combo.itemHeight;
-     * ```
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [itemHeight]='32'></igx-combo>
-     * ```
-     */
-    get itemHeight(): number;
-    set itemHeight(val: number);
-    /**
-     * Defines the placeholder value for the combo value field
-     *
-     * ```typescript
-     * // get
-     * let myComboPlaceholder = this.combo.placeholder;
-     * ```
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [placeholder]='newPlaceHolder'></igx-combo>
-     * ```
-     */
-    placeholder: any;
-    /**
-     * @hidden @internal
-     */
-    get inputEmpty(): boolean;
-    /**
-     * 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>
-     * ```
-     */
-    searchPlaceholder: string;
+    protected _inputGroupType: IgxInputGroupType;
+    protected _injector: Injector;
     /**
      * Defines whether the caseSensitive icon should be shown in the search input
      *
@@ -521,66 +100,11 @@ export declare class IgxComboComponent extends DisplayDensityBase implements Igx
      */
     showSearchCaseIcon: boolean;
     /**
-     * Combo data source.
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [data]='items'></igx-combo>
-     * ```
-     */
-    get data(): any[] | null;
-    set data(val: any[] | null);
-    /**
-     * Combo value data source property.
-     *
-     * ```typescript
-     * // get
-     * let myComboValueKey = this.combo.valueKey;
-     * ```
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [valueKey]='myKey'></igx-combo>
-     * ```
-     */
-    valueKey: string;
-    set displayKey(val: string);
-    /**
-     * Combo text data source property.
-     *
-     * ```typescript
-     * // get
-     * let myComboDisplayKey = this.combo.displayKey;
-     *
-     * // set
-     * this.combo.displayKey = 'val';
-     *
-     * ```
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [displayKey]='myDisplayKey'></igx-combo>
-     * ```
-     */
-    get displayKey(): string;
-    /**
-     * The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[].
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [groupKey]='newGroupKey'></igx-combo>
-     * ```
-     */
-    set groupKey(val: string);
-    /**
-     * The item property by which items should be grouped inside the items list. Not usable if data is not of type Object[].
-     *
-     * ```typescript
-     * // get
-     * let currentGroupKey = this.combo.groupKey;
-     * ```
+     * An @Input property that controls whether the combo's search box
+     * should be focused after the `opened` event is called
+     * When `false`, the combo's list item container will be focused instead
      */
-    get groupKey(): string;
+    autoFocusSearch: boolean;
     /**
      * An @Input property that enabled/disables filtering in the list. The default is `true`.
      * ```html
@@ -589,262 +113,55 @@ export declare class IgxComboComponent extends DisplayDensityBase implements Igx
      */
     filterable: boolean;
     /**
-     * An @Input property that sets groups sorting order.
-     *
-     * @example
-     * ```html
-     * <igx-combo [groupSortingDirection]="groupSortingDirection"></igx-combo>
-     * ```
-     * ```typescript
-     * public groupSortingDirection = SortingDirection.Asc;
-     * ```
-     */
-    get groupSortingDirection(): SortingDirection;
-    set groupSortingDirection(val: SortingDirection);
-    /**
-     * An @Input property that set aria-labelledby attribute
-     * ```html
-     * <igx-combo [ariaLabelledBy]="'label1'">
-     * ```
-     */
-    ariaLabelledBy: string;
-    /**
-     * An @Input property that enabled/disables combo. The default is `false`.
-     * ```html
-     * <igx-combo [disabled]="'true'">
-     * ```
-     */
-    disabled: boolean;
-    /**
-     * An @Input property that sets how the combo will be styled.
-     * The allowed values are `line`, `box`, `border` and `search`. The default is `box`.
-     * ```html
-     * <igx-combo [type]="'line'">
-     * ```
-     */
-    get type(): IgxInputGroupType;
-    set type(val: IgxInputGroupType);
-    /**
-     * 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
-     */
-    autoFocusSearch: boolean;
-    protected dropdownContainer: ElementRef;
-    protected primitiveTemplate: TemplateRef<any>;
-    protected complexTemplate: TemplateRef<any>;
-    protected virtDir: IgxForOfDirective<any>;
-    /**
-     * Gets if control is valid, when used in a form
+     * Defines the placeholder value for the combo dropdown search field
      *
      * ```typescript
      * // get
-     * let valid = this.combo.valid;
+     * let myComboSearchPlaceholder = this.combo.searchPlaceholder;
      * ```
-     */
-    get valid(): IgxComboState;
-    /**
-     * Sets if control is valid, when used in a form
      *
-     * ```typescript
-     * // set
-     * this.combo.valid = IgxComboState.INVALID;
+     * ```html
+     * <!--set-->
+     * <igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
      * ```
      */
-    set valid(valid: IgxComboState);
-    /**
-     * @hidden @internal
-     */
-    get searchValue(): string;
-    set searchValue(val: string);
-    /**
-     * @hidden @internal
-     */
-    customValueFlag: boolean;
-    /**
-     * @hidden @internal
-     */
-    defaultFallbackGroup: string;
+    searchPlaceholder: string;
+    /** @hidden @internal */
+    dropdown: IgxComboDropDownComponent;
     /**
      * @hidden @internal
      */
-    filteringOptions: IComboFilteringOptions;
+    get inputEmpty(): boolean;
+    /** @hidden @internal */
+    get filteredData(): any[] | null;
+    /** @hidden @internal */
+    set filteredData(val: any[] | null);
     /**
      * @hidden @internal
      */
     filteringLogic: FilteringLogic;
-    /** @hidden @internal */
-    filterValue: string;
     protected stringFilters: typeof IgxStringFilteringOperand;
     protected booleanFilters: typeof IgxBooleanFilteringOperand;
-    protected _groupKey: string;
-    protected _displayKey: string;
     protected _prevInputValue: string;
-    private _dataType;
-    private _searchValue;
-    private _type;
-    private ngControl;
-    private destroy$;
-    private _data;
-    private _filteredData;
-    private _itemHeight;
-    private _itemsMaxHeight;
-    private _remoteSelection;
-    private _onChangeCallback;
-    private _onTouchedCallback;
-    private _overlaySettings;
-    private _value;
-    private _valid;
-    private _groupSortingDirection;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, selection: IgxSelectionAPIService, comboAPI: IgxComboAPIService, _iconService: IgxIconService, _displayDensityOptions: IDisplayDensityOptions, _inputGroupType: IgxInputGroupType, _injector: Injector);
-    /**
-     * @hidden @internal
-     */
-    onArrowDown(event: Event): void;
-    /**
-     * @hidden @internal
-     */
-    onInputClick(event: Event): void;
-    /**
-     * Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize`
-     *
-     * ```typescript
-     * // get
-     * let state = this.combo.virtualizationState;
-     * ```
-     */
-    get virtualizationState(): IForOfState;
-    /**
-     * Sets the current state of the virtualized data.
-     *
-     * ```typescript
-     * // set
-     * this.combo.virtualizationState(state);
-     * ```
-     */
-    set virtualizationState(state: IForOfState);
-    /**
-     * Gets total count of the virtual data items, when using remote service.
-     *
-     * ```typescript
-     * // get
-     * let count = this.combo.totalItemCount;
-     * ```
-     */
-    get totalItemCount(): number;
-    /**
-     * Sets total count of the virtual data items, when using remote service.
-     *
-     * ```typescript
-     * // set
-     * this.combo.totalItemCount(remoteService.count);
-     * ```
-     */
-    set totalItemCount(count: number);
-    /**
-     * The text displayed in the combo input
-     *
-     * ```typescript
-     * // get
-     * let comboValue = this.combo.value;
-     * ```
-     */
-    get value(): string;
-    /**
-     * @hidden @internal
-     */
-    get filteredData(): any[] | null;
-    /**
-     * @hidden @internal
-     */
-    set filteredData(val: any[] | null);
+    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, selectionService: IgxSelectionAPIService, comboAPI: IgxComboAPIService, _iconService: IgxIconService, _displayDensityOptions: IDisplayDensityOptions, _inputGroupType: IgxInputGroupType, _injector: Injector);
+    /** @hidden @internal */
+    get displaySearchInput(): boolean;
     /**
      * @hidden @internal
      */
     handleKeyUp(event: KeyboardEvent): void;
-    /**
-     * @hidden @internal
-     */
-    handleKeyDown(event: KeyboardEvent): void;
-    /**
-     * @hidden @internal
-     */
-    handleInputChange(event?: string): void;
-    /**
-     * @hidden @internal
-     */
-    get dataType(): string;
-    /**
-     * @hidden @internal
-     */
-    get isRemote(): boolean;
-    /**
-     * Returns if the specified itemID is selected
-     *
-     * @hidden
-     * @internal
-     */
-    isItemSelected(item: any): boolean;
-    /**
-     * Triggers change detection on the combo view
-     */
-    triggerCheck(): void;
-    /**
-     * @hidden @internal
-     */
-    isAddButtonVisible(): boolean;
     /**
      * @hidden @internal
      */
     handleSelectAll(evt: any): void;
-    /**
-     * @hidden @internal
-     */
-    addItemToCollection(): void;
-    /**
-     * @hidden @internal
-     */
-    focusSearchInput(opening?: boolean): void;
-    /**
-     * @hidden @internal
-     */
-    onBlur(): void;
-    /**
-     * @hidden @internal
-     */
-    ngOnInit(): void;
-    /**
-     * @hidden @internal
-     */
-    ngAfterViewInit(): void;
-    /**
-     * @hidden @internal
-     */
-    ngOnDestroy(): void;
     /**
      * @hidden @internal
      */
     writeValue(value: any[]): void;
-    /**
-     * @hidden @internal
-     */
-    registerOnChange(fn: any): void;
-    /**
-     * @hidden @internal
-     */
-    registerOnTouched(fn: any): void;
-    /**
-     * @hidden @internal
-     */
-    setDisabledState(isDisabled: boolean): void;
     /**
      * @hidden
      */
     getEditElement(): HTMLElement;
-    /**
-     * @hidden @internal
-     */
-    get template(): TemplateRef<any>;
     /**
      * @hidden @internal
      */
@@ -853,69 +170,25 @@ export declare class IgxComboComponent extends DisplayDensityBase implements Igx
      * @hidden @internal
      */
     handleClearItems(event: Event): void;
-    /**
-     * A method that opens/closes the combo.
-     *
-     * ```html
-     * <button (click)="combo.toggle()">Toggle Combo</button>
-     * <igx-combo #combo></igx-combo>
-     * ```
-     */
-    toggle(): void;
-    /**
-     * A method that opens the combo.
-     *
-     * ```html
-     * <button (click)="combo.open()">Open Combo</button>
-     * <igx-combo #combo></igx-combo>
-     * ```
-     */
-    open(): void;
-    /**
-     * A method that closes the combo.
-     *
-     * ```html
-     * <button (click)="combo.close()">Close Combo</button>
-     * <igx-combo #combo></igx-combo>
-     * ```
-     */
-    close(): void;
-    /**
-     * Gets drop down state.
-     *
-     * ```typescript
-     * let state = this.combo.collapsed;
-     * ```
-     */
-    get collapsed(): boolean;
-    /**
-     * Get current selection state
-     *
-     * @returns Array of selected items
-     * ```typescript
-     * let selectedItems = this.combo.selectedItems();
-     * ```
-     */
-    selectedItems(): any[];
     /**
      * Select defined items
      *
      * @param newItems new items to be selected
      * @param clearCurrentSelection if true clear previous selected items
      * ```typescript
-     * this.combo.selectItems(["New York", "New Jersey"]);
+     * this.combo.select(["New York", "New Jersey"]);
      * ```
      */
-    selectItems(newItems: Array<any>, clearCurrentSelection?: boolean, event?: Event): void;
+    select(newItems: Array<any>, clearCurrentSelection?: boolean, event?: Event): void;
     /**
      * Deselect defined items
      *
      * @param items items to deselected
      * ```typescript
-     * this.combo.deselectItems(["New York", "New Jersey"]);
+     * this.combo.deselect(["New York", "New Jersey"]);
      * ```
      */
-    deselectItems(items: Array<any>, event?: Event): void;
+    deselect(items: Array<any>, event?: Event): void;
     /**
      * Select all (filtered) items
      *
@@ -954,57 +227,26 @@ export declare class IgxComboComponent extends DisplayDensityBase implements Igx
      * ```
      */
     setSelectedItem(itemID: any, select?: boolean, event?: Event): void;
-    /**
-     * Event handlers
-     *
-     * @hidden
-     * @internal
-     */
-    handleOpening(e: IBaseCancelableBrowserEventArgs): void;
-    /**
-     * @hidden @internal
-     */
-    handleOpened(): void;
-    /**
-     * @hidden @internal
-     */
-    handleClosing(e: IBaseCancelableBrowserEventArgs): void;
-    /**
-     * @hidden @internal
-     */
-    handleClosed(): void;
     /**
      * @hidden @internal
      */
     toggleCaseSensitive(): void;
+    /** @hidden @internal */
+    handleOpened(): void;
+    /** @hidden @internal */
+    focusSearchInput(opening?: boolean): void;
     protected setSelection(newSelection: Set<any>, event?: Event): void;
-    protected onStatusChanged: () => void;
-    protected manageRequiredAsterisk(): void;
-    /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
-    private registerRemoteEntries;
-    /**
-     * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]`
-     */
-    private getValueDisplayPairs;
-    private checkMatch;
+    protected createDisplayText(newSelection: any[], oldSelection: any[]): string;
     /** Returns a string that should be populated in the combo's text box */
     private concatDisplayText;
-    /**
-     * Constructs the combo display value
-     * If remote, caches the key displayText
-     * If not, just combine the object.displayKeys
-     */
-    private createDisplayText;
-    /** if there is a valueKey - map the keys to data items, else - just return the keys */
-    private convertKeysToItems;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxComboComponent, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxComboComponent, "igx-combo", never, { "overlaySettings": "overlaySettings"; "id": "id"; "width": "width"; "allowCustomValues": "allowCustomValues"; "itemsMaxHeight": "itemsMaxHeight"; "itemsWidth": "itemsWidth"; "itemHeight": "itemHeight"; "placeholder": "placeholder"; "searchPlaceholder": "searchPlaceholder"; "showSearchCaseIcon": "showSearchCaseIcon"; "data": "data"; "valueKey": "valueKey"; "displayKey": "displayKey"; "groupKey": "groupKey"; "filterable": "filterable"; "groupSortingDirection": "groupSortingDirection"; "ariaLabelledBy": "ariaLabelledBy"; "disabled": "disabled"; "type": "type"; "autoFocusSearch": "autoFocusSearch"; }, { "selectionChanging": "selectionChanging"; "opening": "opening"; "opened": "opened"; "closing": "closing"; "closed": "closed"; "addition": "addition"; "searchInputUpdate": "searchInputUpdate"; "dataPreLoad": "dataPreLoad"; }, ["itemTemplate", "headerTemplate", "footerTemplate", "headerItemTemplate", "addItemTemplate", "emptyTemplate", "toggleIconTemplate", "clearIconTemplate"], ["[igxLabel]", "igx-prefix", "igx-hint, [igxHint]", "igx-suffix"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxComboComponent, "igx-combo", never, { "showSearchCaseIcon": "showSearchCaseIcon"; "autoFocusSearch": "autoFocusSearch"; "filterable": "filterable"; "searchPlaceholder": "searchPlaceholder"; }, {}, never, ["[igxLabel]", "igx-prefix", "igx-hint, [igxHint]", "igx-suffix"]>;
 }
 /**
  * @hidden
  */
 export declare class IgxComboModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxComboModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<IgxComboModule, [typeof i1.IgxComboAddItemComponent, typeof i2.IgxComboAddItemDirective, typeof i2.IgxComboClearIconDirective, typeof IgxComboComponent, typeof i3.IgxComboDropDownComponent, typeof i2.IgxComboEmptyDirective, typeof i4.IgxComboFilteringPipe, typeof i2.IgxComboFooterDirective, typeof i4.IgxComboGroupingPipe, typeof i2.IgxComboHeaderDirective, typeof i2.IgxComboHeaderItemDirective, typeof i5.IgxComboItemComponent, typeof i2.IgxComboItemDirective, typeof i2.IgxComboToggleIconDirective], [typeof i6.CommonModule, typeof i7.FormsModule, typeof i8.IgxButtonModule, typeof i9.IgxCheckboxModule, typeof i10.IgxDropDownModule, typeof i11.IgxForOfModule, typeof i12.IgxIconModule, typeof i13.IgxInputGroupModule, typeof i14.IgxRippleModule, typeof i15.IgxToggleModule, typeof i7.ReactiveFormsModule], [typeof i2.IgxComboAddItemDirective, typeof i2.IgxComboClearIconDirective, typeof IgxComboComponent, typeof i2.IgxComboEmptyDirective, typeof i2.IgxComboFooterDirective, typeof i2.IgxComboHeaderDirective, typeof i2.IgxComboHeaderItemDirective, typeof i2.IgxComboItemDirective, typeof i2.IgxComboToggleIconDirective, typeof i13.IgxInputGroupModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<IgxComboModule, [typeof i1.IgxComboAddItemComponent, typeof i2.IgxComboAddItemDirective, typeof i2.IgxComboClearIconDirective, typeof IgxComboComponent, typeof i3.IgxComboDropDownComponent, typeof i2.IgxComboEmptyDirective, typeof i4.IgxComboFilteringPipe, typeof i2.IgxComboFooterDirective, typeof i4.IgxComboGroupingPipe, typeof i2.IgxComboHeaderDirective, typeof i2.IgxComboHeaderItemDirective, typeof i5.IgxComboItemComponent, typeof i2.IgxComboItemDirective, typeof i2.IgxComboToggleIconDirective], [typeof i6.CommonModule, typeof i7.FormsModule, typeof i8.IgxButtonModule, typeof i9.IgxCheckboxModule, typeof i10.IgxDropDownModule, typeof i11.IgxForOfModule, typeof i12.IgxIconModule, typeof i13.IgxInputGroupModule, typeof i14.IgxRippleModule, typeof i15.IgxToggleModule, typeof i7.ReactiveFormsModule], [typeof i1.IgxComboAddItemComponent, typeof i2.IgxComboAddItemDirective, typeof i2.IgxComboClearIconDirective, typeof IgxComboComponent, typeof i3.IgxComboDropDownComponent, typeof i2.IgxComboEmptyDirective, typeof i4.IgxComboFilteringPipe, typeof i2.IgxComboFooterDirective, typeof i4.IgxComboGroupingPipe, typeof i2.IgxComboHeaderDirective, typeof i2.IgxComboHeaderItemDirective, typeof i5.IgxComboItemComponent, typeof i2.IgxComboItemDirective, typeof i2.IgxComboToggleIconDirective, typeof i13.IgxInputGroupModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<IgxComboModule>;
 }