UNPKG

igniteui-angular

Version:

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

205 lines (204 loc) 8.21 kB
import { AfterViewInit, ChangeDetectorRef, ElementRef, OnInit, OnDestroy, Injector, EventEmitter, DoCheck } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { IgxSelectionAPIService } from '../core/selection'; import { IBaseEventArgs, IBaseCancelableEventArgs, CancelableEventArgs } from '../core/utils'; import { IgxIconService } from '../icon/icon.service'; import { IgxComboDropDownComponent } from './combo-dropdown.component'; import { IgxComboBaseDirective } from './combo.common'; import { IgxComboAPIService } from './combo.api'; import { EditorProvider } from '../core/edit-provider'; import { IgxInputGroupType } from '../input-group/public_api'; import * as i0 from "@angular/core"; /** Event emitted when an igx-combo's selection is changing */ export 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 */ export interface IComboSearchInputEventArgs extends IBaseCancelableEventArgs { /** The text that has been typed into the search input */ searchText: string; } export 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 * <igx-combo [itemsMaxHeight]="250" [data]="locationData" * [displayKey]="'field'" [valueKey]="'field'" * placeholder="Location(s)" searchPlaceholder="Search..."> * </igx-combo> * ``` */ export 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; /** * Enables/disables filtering in the list. The default is `false`. */ get disableFiltering(): boolean; set disableFiltering(value: 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 * <!--set--> * <igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo> * ``` */ searchPlaceholder: string; /** * Emitted when item selection is changing, before the selection completes * * ```html * <igx-combo (selectionChanging)='handleSelection()'></igx-combo> * ``` */ selectionChanging: EventEmitter<IComboSelectionChangingEventArgs>; /** @hidden @internal */ dropdown: IgxComboDropDownComponent; /** @hidden @internal */ get filteredData(): any[] | null; /** @hidden @internal */ set filteredData(val: any[] | null); protected _prevInputValue: string; private _displayText; private _disableFiltering; constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, selectionService: IgxSelectionAPIService, comboAPI: IgxComboAPIService, document: any, _inputGroupType: IgxInputGroupType, _injector: Injector, _iconService?: IgxIconService); 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 */ handleClearItems(event: Event): 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<any>, clearCurrentSelection?: boolean, event?: Event): void; /** * Deselect defined items * * @param items items to deselected * ```typescript * this.combo.deselect(["New York", "New Jersey"]); * ``` */ deselect(items: Array<any>, 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<any>, 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<IgxComboComponent, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxComboComponent, "igx-combo", never, { "autoFocusSearch": { "alias": "autoFocusSearch"; "required": false; }; "disableFiltering": { "alias": "disableFiltering"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; }, { "selectionChanging": "selectionChanging"; }, never, ["[igxLabel]", "igx-prefix", "igx-hint, [igxHint]", "igx-suffix"], true, never>; static ngAcceptInputType_autoFocusSearch: unknown; static ngAcceptInputType_disableFiltering: unknown; }