import * as i3 from 'igniteui-angular/input-group'; import { IgxInputGroupType, IgxLabelDirective, IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxSuffixDirective, IgxInputState, IgxHintDirective } from 'igniteui-angular/input-group'; import * as i0 from '@angular/core'; import { ElementRef, EventEmitter, InjectionToken, AfterViewChecked, OnInit, AfterViewInit, AfterContentChecked, OnDestroy, ChangeDetectorRef, Injector, TemplateRef, QueryList, DoCheck, PipeTransform } from '@angular/core'; import { ControlValueAccessor, NgControl } from '@angular/forms'; import * as igniteui_angular_core from 'igniteui-angular/core'; import { IBaseEventArgs, CancelableBrowserEventArgs, IgxSelectionAPIService, OverlaySettings, SortingDirection, IComboResourceStrings, IBaseCancelableBrowserEventArgs, CancelableEventArgs, IBaseCancelableEventArgs, EditorProvider } from 'igniteui-angular/core'; import { Subject } from 'rxjs'; import { IForOfState, IgxForOfDirective } from 'igniteui-angular/directives'; import { IgxIconService } from 'igniteui-angular/icon'; import { IgxDropDownItemComponent, Navigate, IgxDropDownComponent, IDropDownBase, IgxDropDownItemBaseDirective, DropDownActionKey } from 'igniteui-angular/drop-down'; /** * @hidden */ declare class IgxComboAPIService { disableTransitions: boolean; protected combo: IgxComboBase; get valueKey(): string; get item_focusable(): boolean; get isRemote(): boolean; get comboID(): string; register(combo: IgxComboBase): void; clear(): void; add_custom_item(): void; set_selected_item(itemID: any, event?: Event): void; is_item_selected(itemID: any): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare const IGX_COMBO_COMPONENT: InjectionToken; /** @hidden @internal TODO: Evaluate */ interface IgxComboBase { id: string; data: any[] | null; valueKey: string; groupKey: string; isRemote: boolean; filteredData: any[] | null; totalItemCount: number; itemsMaxHeight: number; itemHeight: number; searchValue: string; searchInput: ElementRef; comboInput: ElementRef; opened: EventEmitter; opening: EventEmitter; closing: EventEmitter; closed: EventEmitter; focusSearchInput(opening?: boolean): void; triggerCheck(): void; addItemToCollection(): void; isAddButtonVisible(): boolean; handleInputChange(event?: string): void; isItemSelected(itemID: any): boolean; select(item: any): void; select(itemIDs: any[], clearSelection?: boolean, event?: Event): void; deselect(...args: [] | [itemIDs: any[], event?: Event]): void; setActiveDescendant(): void; } /** @hidden @internal */ declare const enum DataTypes { EMPTY = "empty", PRIMITIVE = "primitive", COMPLEX = "complex", PRIMARYKEY = "valueKey" } /** The filtering criteria to be applied on data search */ interface IComboFilteringOptions { /** Defines filtering case-sensitivity */ caseSensitive?: boolean; /** Defines optional key to filter against complex list items. Default to displayKey if provided.*/ filteringKey?: string; } declare abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewChecked, OnInit, AfterViewInit, AfterContentChecked, OnDestroy, ControlValueAccessor { protected elementRef: ElementRef; protected cdr: ChangeDetectorRef; protected selectionService: IgxSelectionAPIService; protected comboAPI: IgxComboAPIService; document: Document; protected _inputGroupType: IgxInputGroupType; protected _injector: Injector; protected _iconService: IgxIconService; /** * Defines whether the caseSensitive icon should be shown in the search input * * ```typescript * // get * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon; * ``` * * ```html * * * ``` */ showSearchCaseIcon: boolean; /** * Enables/disables filtering in the list. The default is `false`. */ get disableFiltering(): boolean; set disableFiltering(value: boolean); /** * Set custom overlay settings that control how the combo's list of items is displayed. * Set: * ```html * * ``` * * ```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; /** * Gets/gets combo id. * * ```typescript * // get * let id = this.combo.id; * ``` * * ```html * * * ``` */ get id(): string; set id(value: string); /** * Sets the style width of the element * * ```typescript * // get * let myComboWidth = this.combo.width; * ``` * * ```html * * * ``` */ width: string; /** * Controls whether custom values can be added to the collection * * ```typescript * // get * let comboAllowsCustomValues = this.combo.allowCustomValues; * ``` * * ```html * * * ``` */ allowCustomValues: boolean; /** * Configures the drop down list height * * ```typescript * // get * let myComboItemsMaxHeight = this.combo.itemsMaxHeight; * ``` * * ```html * * * ``` */ get itemsMaxHeight(): number; set itemsMaxHeight(val: number); /** @hidden */ get itemsMaxHeightInRem(): number; /** * Configures the drop down list item height * * ```typescript * // get * let myComboItemHeight = this.combo.itemHeight; * ``` * * ```html * * * ``` */ get itemHeight(): number; set itemHeight(val: number); /** * Configures the drop down list width * * ```typescript * // get * let myComboItemsWidth = this.combo.itemsWidth; * ``` * * ```html * * * ``` */ itemsWidth: string; /** * Defines the placeholder value for the combo value field * * ```typescript * // get * let myComboPlaceholder = this.combo.placeholder; * ``` * * ```html * * * ``` */ placeholder: string; /** * Combo data source. * * ```html * * * ``` */ get data(): any[] | null; set data(val: any[] | null); /** * Determines which column in the data source is used to determine the value. * * ```typescript * // get * let myComboValueKey = this.combo.valueKey; * ``` * * ```html * * * ``` */ valueKey: string; set displayKey(val: string); /** * Determines which column in the data source is used to determine the display value. * * ```typescript * // get * let myComboDisplayKey = this.combo.displayKey; * * // set * this.combo.displayKey = 'val'; * * ``` * * ```html * * * ``` */ 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 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; * ``` */ get groupKey(): string; /** * Sets groups sorting order. * * @example * ```html * * ``` * ```typescript * public groupSortingDirection = SortingDirection.Asc; * ``` */ get groupSortingDirection(): SortingDirection; set groupSortingDirection(val: SortingDirection); /** * Gets/Sets the custom filtering function of the combo. * * @example * ```html * * ``` */ filterFunction: (collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions) => any[]; /** * Sets aria-labelledby attribute value. * ```html * * ``` */ ariaLabelledBy: string; /** @hidden @internal */ cssClass: string; /** * Disables the combo. The default is `false`. * ```html * * ``` */ disabled: boolean; /** * Sets the visual combo type. * The allowed values are `line`, `box`, `border` and `search`. The default is `box`. * ```html * * ``` */ get type(): IgxInputGroupType; set type(val: IgxInputGroupType); /** * Gets/Sets the resource strings. * * @remarks * By default it uses EN resources. */ get resourceStrings(): IComboResourceStrings; set resourceStrings(value: IComboResourceStrings); /** * Emitted before the dropdown is opened * * ```html * * ``` */ opening: EventEmitter; /** * Emitted after the dropdown is opened * * ```html * * ``` */ opened: EventEmitter; /** * Emitted before the dropdown is closed * * ```html * * ``` */ closing: EventEmitter; /** * Emitted after the dropdown is closed * * ```html * * ``` */ closed: EventEmitter; /** * Emitted when an item is being added to the data collection * * ```html * * ``` */ addition: EventEmitter; /** * Emitted when the value of the search input changes (e.g. typing, pasting, clear, etc.) * * ```html * * ``` */ searchInputUpdate: EventEmitter; /** * Emitted when new chunk of data is loaded from the virtualization * * ```html * * ``` */ dataPreLoad: EventEmitter; /** * The custom template, if any, that should be used when rendering ITEMS in the combo list * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.combo.itemTemplate = myCustomTemplate; * ``` * ```html * * * ... * *
*
{{ item[key] }}
*
{{ item.cost }}
*
*
*
* ``` */ itemTemplate: TemplateRef; /** * 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 = myComponent.customTemplate; * myComponent.combo.headerTemplate = myCustomTemplate; * ``` * ```html * * * ... * *
* This is a custom header *
*
*
* ``` */ headerTemplate: TemplateRef; /** * 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 = myComponent.customTemplate; * myComponent.combo.footerTemplate = myCustomTemplate; * ``` * ```html * * * ... * * * * * ``` */ footerTemplate: TemplateRef; /** * 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 = myComponent.customTemplate; * myComponent.combo.headerItemTemplate = myCustomTemplate; * ``` * ```html * * * ... * *
Group header for {{ item[key] }}
*
*
* ``` */ headerItemTemplate: TemplateRef; /** * 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 = myComponent.customTemplate; * myComponent.combo.addItemTemplate = myCustomTemplate; * ``` * ```html * * * ... * * * * * ``` */ addItemTemplate: TemplateRef; /** * 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 = myComponent.customTemplate; * myComponent.combo.emptyTemplate = myCustomTemplate; * ``` * ```html * * * ... * *
* There are no items to display *
*
*
* ``` */ emptyTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering the combo TOGGLE(open/close) button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.combo.toggleIconTemplate = myCustomTemplate; * ``` * ```html * * * ... * * {{ collapsed ? 'remove_circle' : 'remove_circle_outline'}} * * * ``` */ toggleIconTemplate: TemplateRef; /** * The custom template, if any, that should be used when rendering the combo CLEAR button * * ```typescript * // Set in typescript * const myCustomTemplate: TemplateRef = myComponent.customTemplate; * myComponent.combo.clearIconTemplate = myCustomTemplate; * ``` * ```html * * * ... * * clear * * * ``` */ clearIconTemplate: TemplateRef; /** @hidden @internal */ label: IgxLabelDirective; /** @hidden @internal */ inputGroup: IgxInputGroupComponent; /** @hidden @internal */ comboInput: IgxInputDirective; /** @hidden @internal */ searchInput: ElementRef; /** @hidden @internal */ virtualScrollContainer: IgxForOfDirective; protected virtDir: IgxForOfDirective; protected dropdownContainer: ElementRef; protected primitiveTemplate: TemplateRef; protected complexTemplate: TemplateRef; protected prefixes: QueryList; protected suffixes: QueryList; protected internalSuffixes: QueryList; /** @hidden @internal */ get searchValue(): string; set searchValue(val: string); /** @hidden @internal */ get isRemote(): boolean; /** @hidden @internal */ get dataType(): string; /** * Gets if control is valid, when used in a form * * ```typescript * // get * let valid = this.combo.valid; * ``` */ get valid(): IgxInputState; /** * Sets if control is valid, when used in a form * * ```typescript * // set * this.combo.valid = IgxInputState.INVALID; * ``` */ set valid(valid: IgxInputState); /** * The value of the combo * * ```typescript * // get * let comboValue = this.combo.value; * ``` */ get value(): any[]; /** * The text displayed in the combo input * * ```typescript * // get * let comboDisplayValue = this.combo.displayValue; * ``` */ get displayValue(): string; /** * 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 drop down state. * * ```typescript * let state = this.combo.collapsed; * ``` */ get collapsed(): boolean; /** * 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); /** @hidden @internal */ get template(): TemplateRef; /** @hidden @internal */ customValueFlag: boolean; /** @hidden @internal */ filterValue: string; /** @hidden @internal */ defaultFallbackGroup: string; /** @hidden @internal */ activeDescendant: string; /** * Configures the way combo items will be filtered. * * ```typescript * // get * let myFilteringOptions = this.combo.filteringOptions; * ``` * * ```html * * * ``` */ get filteringOptions(): IComboFilteringOptions; set filteringOptions(value: IComboFilteringOptions); protected containerSize: any; protected itemSize: any; protected _data: any[]; protected _value: any[]; protected _displayValue: string; protected _groupKey: string; protected _searchValue: string; protected _filteredData: any[]; protected _displayKey: string; protected _remoteSelection: {}; protected _resourceStrings: igniteui_angular_core.IResourceStrings; protected _valid: IgxInputState; protected ngControl: NgControl; protected destroy$: Subject; protected _onTouchedCallback: () => void; protected _onChangeCallback: (_: any) => void; protected compareCollator: Intl.Collator; protected computedStyles: any; private _id; private _disableFiltering; private _type; private _dataType; private _itemHeight; private _itemsMaxHeight; private _overlaySettings; private _groupSortingDirection; private _filteringOptions; private _defaultFilteringOptions; private itemsInContainer; abstract dropdown: IgxComboDropDownComponent; abstract selectionChanging: EventEmitter; ngAfterViewChecked(): void; /** @hidden @internal */ ngAfterContentChecked(): void; /** @hidden @internal */ ngOnInit(): void; /** @hidden @internal */ ngAfterViewInit(): void; /** @hidden @internal */ ngOnDestroy(): void; /** * A method that opens/closes the combo. * * ```html * * * ``` */ toggle(): void; /** * A method that opens the combo. * * ```html * * * ``` */ open(): void; /** * A method that closes the combo. * * ```html * * * ``` */ close(): void; /** * Triggers change detection on the combo view */ triggerCheck(): void; /** * Get current selection state * * @returns Array of selected items * ```typescript * let mySelection = this.combo.selection; * ``` */ get selection(): any[]; /** * Returns if the specified itemID is selected * * @hidden * @internal */ isItemSelected(item: any): boolean; /** @hidden @internal */ get toggleIcon(): string; /** @hidden @internal */ addItemToCollection(): void; /** @hidden @internal */ isAddButtonVisible(): boolean; /** @hidden @internal */ handleInputChange(event?: any): void; /** * Event handlers * * @hidden * @internal */ handleOpening(e: IBaseCancelableBrowserEventArgs): void; /** @hidden @internal */ handleClosing(e: IBaseCancelableBrowserEventArgs): void; /** @hidden @internal */ handleClosed(): void; /** @hidden @internal */ handleKeyDown(event: KeyboardEvent): void; /** @hidden @internal */ handleToggleKeyDown(eventArgs: KeyboardEvent): void; /** @hidden @internal */ getAriaLabel(): string; /** @hidden @internal */ registerOnChange(fn: any): void; /** @hidden @internal */ registerOnTouched(fn: any): void; /** @hidden @internal */ setDisabledState(isDisabled: boolean): void; /** @hidden @internal */ onClick(event: Event): void; /** @hidden @internal */ onBlur(): void; /** @hidden @internal */ setActiveDescendant(): void; /** @hidden @internal */ toggleCaseSensitive(): void; protected onStatusChanged: () => void; private updateValidity; private get isTouchedOrDirty(); private get hasValidators(); /** if there is a valueKey - map the keys to data items, else - just return the keys */ protected convertKeysToItems(keys: any[]): any[]; protected checkMatch(): void; protected findMatch: (element: any) => boolean; protected manageRequiredAsterisk(): void; /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */ protected registerRemoteEntries(ids: any[], add?: boolean): void; /** * For `id: any[]` returns a mapped `{ [combo.valueKey]: any, [combo.displayKey]: any }[]` */ protected getValueDisplayPairs(ids: any[]): { [x: string]: any; }[]; protected getRemoteSelection(newSelection: any[], oldSelection: any[]): string; protected get required(): boolean; abstract get filteredData(): any[] | null; abstract set filteredData(val: any[] | null); abstract handleOpened(): any; abstract onArrowDown(event: Event): any; abstract focusSearchInput(opening?: boolean): any; abstract select(newItem: any): void; abstract select(newItems: Array | any, clearCurrentSelection?: boolean, event?: Event): void; abstract deselect(...args: [] | [items: Array, event?: Event]): void; abstract writeValue(value: any): void; protected abstract setSelection(newSelection: Set, event?: Event): void; protected abstract createDisplayText(newSelection: any[], oldSelection: any[]): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_showSearchCaseIcon: unknown; static ngAcceptInputType_disableFiltering: unknown; static ngAcceptInputType_allowCustomValues: unknown; static ngAcceptInputType_disabled: unknown; } /** @hidden */ declare class IgxComboItemComponent extends IgxDropDownItemComponent { protected comboAPI: IgxComboAPIService; /** * Gets the height of a list item * * @hidden */ itemHeight: string | number; /** @hidden @internal */ get _itemHeightToRem(): number; get ariaLabel(): string; /** @hidden @internal */ singleMode: boolean; /** * @hidden */ get itemID(): any; /** * @hidden */ get comboID(): string; /** * @hidden * @internal */ get disableTransitions(): boolean; /** * @hidden */ get selected(): boolean; set selected(value: boolean); /** * @hidden */ isVisible(direction: Navigate): boolean; clicked(event: any): void; /** * @hidden * @internal * The event that is prevented is the click on the checkbox label element. * That is the only visible element that a user can interact with. * The click propagates to the host and the preventDefault is to stop it from * switching focus to the input it's base on. * The toggle happens in an internal handler in the drop-down on the next task queue cycle. */ disableCheck(event: MouseEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_singleMode: unknown; } /** @hidden */ declare class IgxComboDropDownComponent extends IgxDropDownComponent implements IDropDownBase, OnDestroy, AfterViewInit { combo: IgxComboBase; protected comboAPI: IgxComboAPIService; /** @hidden @internal */ singleMode: boolean; /** * @hidden * @internal */ children: QueryList; /** @hidden @internal */ get scrollContainer(): HTMLElement; protected get isScrolledToLast(): boolean; protected get lastVisibleIndex(): number; protected get sortedChildren(): IgxDropDownItemBaseDirective[]; /** * Get all non-header items * * ```typescript * let myDropDownItems = this.dropdown.items; * ``` */ get items(): IgxComboItemComponent[]; /** * @hidden @internal */ onFocus(): void; /** * @hidden @internal */ onBlur(_evt?: any): void; /** * @hidden @internal */ onToggleOpened(): void; /** * @hidden */ navigateFirst(): void; /** * @hidden */ navigatePrev(): void; /** * @hidden */ navigateNext(): void; /** * @hidden @internal */ selectItem(item: IgxDropDownItemBaseDirective): void; /** * @hidden @internal */ updateScrollPosition(): void; /** * @hidden @internal */ onItemActionKey(key: DropDownActionKey): void; ngAfterViewInit(): void; /** * @hidden @internal */ ngOnDestroy(): void; protected scrollToHiddenItem(_newItem: any): void; protected scrollHandler: () => void; private handleEnter; private handleSpace; private isAddItemFocused; private focusAddItemButton; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_singleMode: unknown; } /** Event emitted when an igx-combo's selection is changing */ interface IComboSelectionChangingEventArgs extends IBaseCancelableEventArgs { /** An array containing the values that are currently selected */ oldValue: any[]; /** An array containing the values that will be selected after this event */ newValue: any[]; /** An array containing the items that are currently selected */ oldSelection: any[]; /** An array containing the items that will be selected after this event */ newSelection: any[]; /** An array containing the items that will be added to the selection (if any) */ added: any[]; /** An array containing the items that will be removed from the selection (if any) */ removed: any[]; /** The text that will be displayed in the combo text box */ displayText: string; /** The user interaction that triggered the selection change */ event?: Event; } /** Event emitted when the igx-combo's search input changes */ interface IComboSearchInputEventArgs extends IBaseCancelableEventArgs { /** The text that has been typed into the search input */ searchText: string; } interface IComboItemAdditionEvent extends IBaseEventArgs, CancelableEventArgs { oldCollection: any[]; addedItem: any; newCollection: any[]; } /** * 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 * * * ``` */ declare class IgxComboComponent extends IgxComboBaseDirective implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy, DoCheck, EditorProvider { /** * Whether the combo's search box should be focused after the dropdown is opened. * When `false`, the combo's list item container will be focused instead */ autoFocusSearch: boolean; /** * Defines the placeholder value for the combo dropdown search field * * @deprecated in version 18.2.0. Replaced with values in the localization resource strings. * * ```typescript * // get * let myComboSearchPlaceholder = this.combo.searchPlaceholder; * ``` * * ```html * * * ``` */ searchPlaceholder: string; /** * Emitted when item selection is changing, before the selection completes * * ```html * * ``` */ selectionChanging: EventEmitter; /** @hidden @internal */ dropdown: IgxComboDropDownComponent; /** @hidden @internal */ get filteredData(): any[] | null; /** @hidden @internal */ set filteredData(val: any[] | null); protected _prevInputValue: string; private _displayText; constructor(); onArrowDown(event: Event): void; /** @hidden @internal */ get displaySearchInput(): boolean; /** * @hidden @internal */ handleKeyUp(event: KeyboardEvent): void; /** * @hidden @internal */ handleSelectAll(evt: any): void; /** * @hidden @internal */ writeValue(value: any[]): void; /** @hidden @internal */ ngDoCheck(): void; /** * @hidden */ getEditElement(): HTMLElement; /** * @hidden @internal */ get context(): any; /** * @hidden @internal */ clearInput(event: Event): void; /** * @hidden @internal */ handleClearItems(event: Event): void; /** * @hidden @internal */ handleClearKeyDown(eventArgs: KeyboardEvent): void; /** * Select defined items * * @param newItems new items to be selected * @param clearCurrentSelection if true clear previous selected items * ```typescript * this.combo.select(["New York", "New Jersey"]); * ``` */ select(newItems: Array, clearCurrentSelection?: boolean, event?: Event): void; /** * Deselect defined items * * @param items items to deselected * ```typescript * this.combo.deselect(["New York", "New Jersey"]); * ``` */ deselect(items: Array, event?: Event): void; /** * Select all (filtered) items * * @param ignoreFilter if set to true, selects all items, otherwise selects only the filtered ones. * ```typescript * this.combo.selectAllItems(); * ``` */ selectAllItems(ignoreFilter?: boolean, event?: Event): void; /** * Deselect all (filtered) items * * @param ignoreFilter if set to true, deselects all items, otherwise deselects only the filtered ones. * ```typescript * this.combo.deselectAllItems(); * ``` */ deselectAllItems(ignoreFilter?: boolean, event?: Event): void; /** * Selects/Deselects a single item * * @param itemID the itemID of the specific item * @param select If the item should be selected (true) or deselected (false) * * Without specified valueKey; * ```typescript * this.combo.valueKey = null; * const items: { field: string, region: string}[] = data; * this.combo.setSelectedItem(items[0], true); * ``` * With specified valueKey; * ```typescript * this.combo.valueKey = 'field'; * const items: { field: string, region: string}[] = data; * this.combo.setSelectedItem('Connecticut', true); * ``` */ setSelectedItem(itemID: any, select?: boolean, event?: Event): void; /** @hidden @internal */ handleOpened(): void; /** @hidden @internal */ focusSearchInput(opening?: boolean): void; protected setSelection(selection: Set, event?: Event): void; protected createDisplayText(newSelection: any[], oldSelection: any[]): string; protected getSearchPlaceholderText(): string; /** Returns a string that should be populated in the combo's text box */ private concatDisplayText; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_autoFocusSearch: unknown; } /** * Allows a custom element to be added at the beginning of the combo list. * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * *
Custom header
* *
*
*/ declare class IgxComboHeaderDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Allows a custom element to be added at the end of the combo list. * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * * * * * */ declare class IgxComboFooterDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Allows the combo's items to be modified with a custom template * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * *
* State: {{ display[key] }} * Region: {{ display.region }} *
*
*
*/ declare class IgxComboItemDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Defines the custom template that will be displayed when the combo's list is empty * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * *
* There are no items to display *
*
*
*/ declare class IgxComboEmptyDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Defines the custom template that will be used when rendering header items for groups in the combo's list * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * *
Group header for {{ item[key] }}
*
*
*/ declare class IgxComboHeaderItemDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Defines the custom template that will be used to display the `ADD` button * * @remarks To show the `ADD` button, the `allowCustomValues` option must be enabled * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * * * * */ declare class IgxComboAddItemDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * The custom template that will be used when rendering the combo's toggle button * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * * {{ collapsed ? 'remove_circle' : 'remove_circle_outline'}} * * */ declare class IgxComboToggleIconDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Defines the custom template that will be used when rendering the combo's clear icon * * @igxModule IgxComboModule * @igxTheme igx-combo-theme * @igxKeywords combobox, combo selection * @igxGroup Grids & Lists * * @example * * * clear * * */ declare class IgxComboClearIconDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @hidden */ declare class IgxComboFilteringPipe implements PipeTransform { transform(collection: any[], searchValue: any, displayKey: any, filteringOptions: IComboFilteringOptions, filterFunction?: (collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions) => any[], disableFiltering?: boolean): any[]; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵpipe: i0.ɵɵPipeDeclaration; } /** @hidden */ declare class IgxComboGroupingPipe implements PipeTransform { combo: IgxComboBase; transform(collection: any[], groupKey: any, valueKey: any, sortingDirection: SortingDirection, compareCollator: Intl.Collator): any[]; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵpipe: i0.ɵɵPipeDeclaration; } /** * Combo filter function which does not distinguish between accented letters and their base letters. * For example, when filtering for "resume", this function will match both "resume" and "résumé". * * @example * ```html * * ``` */ declare function comboIgnoreDiacriticsFilter(collection: T[], searchValue: string, filteringOptions: IComboFilteringOptions): T[]; /** * @hidden */ declare class IgxComboAddItemComponent extends IgxComboItemComponent { get isDropDownItem(): boolean; get selected(): boolean; set selected(value: boolean); clicked(event?: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare const IGX_COMBO_DIRECTIVES: readonly [typeof IgxComboComponent, typeof IgxComboAddItemDirective, typeof IgxComboClearIconDirective, typeof IgxComboEmptyDirective, typeof IgxComboFooterDirective, typeof IgxComboHeaderDirective, typeof IgxComboHeaderItemDirective, typeof IgxComboItemDirective, typeof IgxComboToggleIconDirective, typeof IgxLabelDirective, typeof IgxPrefixDirective, typeof IgxSuffixDirective, typeof IgxHintDirective]; /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxComboModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export { DataTypes, IGX_COMBO_COMPONENT, IGX_COMBO_DIRECTIVES, IgxComboAPIService, IgxComboAddItemComponent, IgxComboAddItemDirective, IgxComboBaseDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboDropDownComponent, IgxComboEmptyDirective, IgxComboFilteringPipe, IgxComboFooterDirective, IgxComboGroupingPipe, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemComponent, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, comboIgnoreDiacriticsFilter }; export type { IComboFilteringOptions, IComboItemAdditionEvent, IComboSearchInputEventArgs, IComboSelectionChangingEventArgs, IgxComboBase };