igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,389 lines (1,377 loc) • 48.7 kB
TypeScript
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<IgxComboAPIService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<IgxComboAPIService>;
}
declare const IGX_COMBO_COMPONENT: InjectionToken<IgxComboBase>;
/** @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<HTMLInputElement>;
comboInput: ElementRef<HTMLInputElement>;
opened: EventEmitter<IBaseEventArgs>;
opening: EventEmitter<CancelableBrowserEventArgs>;
closing: EventEmitter<CancelableBrowserEventArgs>;
closed: EventEmitter<IBaseEventArgs>;
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<any>;
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
* <!--set-->
* <igx-combo [showSearchCaseIcon]='true'></igx-combo>
* ```
*/
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
* <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;
/**
* Gets/gets combo id.
*
* ```typescript
* // get
* let id = this.combo.id;
* ```
*
* ```html
* <!--set-->
* <igx-combo [id]='combo1'></igx-combo>
* ```
*/
get id(): string;
set id(value: 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;
/**
* 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);
/** @hidden */
get itemsMaxHeightInRem(): number;
/**
* 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);
/**
* Configures the drop down list width
*
* ```typescript
* // get
* let myComboItemsWidth = this.combo.itemsWidth;
* ```
*
* ```html
* <!--set-->
* <igx-combo [itemsWidth] = '"180px"'></igx-combo>
* ```
*/
itemsWidth: string;
/**
* 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: string;
/**
* Combo data source.
*
* ```html
* <!--set-->
* <igx-combo [data]='items'></igx-combo>
* ```
*/
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
* <!--set-->
* <igx-combo [valueKey]='myKey'></igx-combo>
* ```
*/
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
* <!--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;
* ```
*/
get groupKey(): string;
/**
* Sets groups sorting order.
*
* @example
* ```html
* <igx-combo [groupSortingDirection]="groupSortingDirection"></igx-combo>
* ```
* ```typescript
* public groupSortingDirection = SortingDirection.Asc;
* ```
*/
get groupSortingDirection(): SortingDirection;
set groupSortingDirection(val: SortingDirection);
/**
* Gets/Sets the custom filtering function of the combo.
*
* @example
* ```html
* <igx-comb #combo [data]="localData" [filterFunction]="filterFunction"></igx-combo>
* ```
*/
filterFunction: (collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions) => any[];
/**
* Sets aria-labelledby attribute value.
* ```html
* <igx-combo [ariaLabelledBy]="'label1'">
* ```
*/
ariaLabelledBy: string;
/** @hidden @internal */
cssClass: string;
/**
* Disables the combo. The default is `false`.
* ```html
* <igx-combo [disabled]="'true'">
* ```
*/
disabled: boolean;
/**
* Sets the visual combo type.
* 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);
/**
* 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
* <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>;
/**
* 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 let-item let-key="valueKey">
* <div class="custom-item">
* <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 type="button" igxButton="contained" 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 */
label: IgxLabelDirective;
/** @hidden @internal */
inputGroup: IgxInputGroupComponent;
/** @hidden @internal */
comboInput: IgxInputDirective;
/** @hidden @internal */
searchInput: ElementRef<HTMLInputElement>;
/** @hidden @internal */
virtualScrollContainer: IgxForOfDirective<any>;
protected virtDir: IgxForOfDirective<any>;
protected dropdownContainer: ElementRef;
protected primitiveTemplate: TemplateRef<any>;
protected complexTemplate: TemplateRef<any>;
protected prefixes: QueryList<IgxPrefixDirective>;
protected suffixes: QueryList<IgxSuffixDirective>;
protected internalSuffixes: QueryList<IgxSuffixDirective>;
/** @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<any>;
/** @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
* <!--set-->
* <igx-combo [filteringOptions]='myFilteringOptions'></igx-combo>
* ```
*/
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<void>;
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<any>;
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
* <button type="button" (click)="combo.toggle()">Toggle Combo</button>
* <igx-combo #combo></igx-combo>
* ```
*/
toggle(): void;
/**
* A method that opens the combo.
*
* ```html
* <button type="button" (click)="combo.open()">Open Combo</button>
* <igx-combo #combo></igx-combo>
* ```
*/
open(): void;
/**
* A method that closes the combo.
*
* ```html
* <button type="button" (click)="combo.close()">Close Combo</button>
* <igx-combo #combo></igx-combo>
* ```
*/
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> | any, clearCurrentSelection?: boolean, event?: Event): void;
abstract deselect(...args: [] | [items: Array<any>, event?: Event]): void;
abstract writeValue(value: any): void;
protected abstract setSelection(newSelection: Set<any>, event?: Event): void;
protected abstract createDisplayText(newSelection: any[], oldSelection: any[]): any;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxComboBaseDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxComboBaseDirective, never, never, { "showSearchCaseIcon": { "alias": "showSearchCaseIcon"; "required": false; }; "disableFiltering": { "alias": "disableFiltering"; "required": false; }; "overlaySettings": { "alias": "overlaySettings"; "required": false; }; "id": { "alias": "id"; "required": false; }; "width": { "alias": "width"; "required": false; }; "allowCustomValues": { "alias": "allowCustomValues"; "required": false; }; "itemsMaxHeight": { "alias": "itemsMaxHeight"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "itemsWidth": { "alias": "itemsWidth"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "data": { "alias": "data"; "required": false; }; "valueKey": { "alias": "valueKey"; "required": false; }; "displayKey": { "alias": "displayKey"; "required": false; }; "groupKey": { "alias": "groupKey"; "required": false; }; "groupSortingDirection": { "alias": "groupSortingDirection"; "required": false; }; "filterFunction": { "alias": "filterFunction"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "filteringOptions": { "alias": "filteringOptions"; "required": false; }; }, { "opening": "opening"; "opened": "opened"; "closing": "closing"; "closed": "closed"; "addition": "addition"; "searchInputUpdate": "searchInputUpdate"; "dataPreLoad": "dataPreLoad"; }, ["itemTemplate", "headerTemplate", "footerTemplate", "headerItemTemplate", "addItemTemplate", "emptyTemplate", "toggleIconTemplate", "clearIconTemplate", "label", "prefixes", "suffixes"], never, true, never>;
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<IgxComboItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxComboItemComponent, "igx-combo-item", never, { "itemHeight": { "alias": "itemHeight"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "singleMode": { "alias": "singleMode"; "required": false; }; }, {}, never, ["*"], true, never>;
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<IgxDropDownItemBaseDirective>;
/** @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<IgxComboDropDownComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxComboDropDownComponent, "igx-combo-drop-down", never, { "singleMode": { "alias": "singleMode"; "required": false; }; }, {}, ["children"], ["*"], true, never>;
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
* <igx-combo [itemsMaxHeight]="250" [data]="locationData"
* [displayKey]="'field'" [valueKey]="'field'"
* placeholder="Location(s)" searchPlaceholder="Search...">
* </igx-combo>
* ```
*/
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
* <!--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;
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<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, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxComboComponent, "igx-combo", never, { "autoFocusSearch": { "alias": "autoFocusSearch"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; }, { "selectionChanging": "selectionChanging"; }, never, ["[igxLabel]", "igx-prefix,[igxPrefix]", "igx-hint, [igxHint]", "igx-suffix,[igxSuffix]"], true, never>;
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
* <igx-combo>
* <ng-template igxComboHeader>
* <div class="header-class">Custom header</div>
* <img src=""/>
* </ng-template>
* </igx-combo>
*/
declare class IgxComboHeaderDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxComboHeaderDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxComboHeaderDirective, "[igxComboHeader]", never, {}, {}, never, never, true, never>;
}
/**
* 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
* <igx-combo>
* <ng-template igxComboFooter>
* <div class="footer-class">Custom footer</div>
* <img src=""/>
* </ng-template>
* </igx-combo>
*/
declare class IgxComboFooterDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxComboFooterDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxComboFooterDirective, "[igxComboFooter]", never, {}, {}, never, never, true, never>;
}
/**
* 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
* <igx-combo>
* <ng-template igxComboItem let-display let-key="valueKey">
* <div class="item">
* <span class="state">State: {{ display[key] }}</span>
* <span class="region">Region: {{ display.region }}</span>
* </div>
* </ng-template>
* </igx-combo>
*/
declare class IgxComboItemDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxComboItemDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxComboItemDirective, "[igxComboItem]", never, {}, {}, never, never, true, never>;
}
/**
* 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
* <igx-combo>
* <ng-template igxComboEmpty>
* <div class="combo--empty">
* There are no items to display
* </div>
* </ng-template>
* </igx-combo>
*/
declare class IgxComboEmptyDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxComboEmptyDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxComboEmptyDirective, "[igxComboEmpty]", never, {}, {}, never, never, true, never>;
}
/**
* 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
* <igx-combo>
* <ng-template igxComboHeaderItem let-item let-key="groupKey">
* <div class="custom-item--group">Group header for {{ item[key] }}</div>
* </ng-template>
* </igx-combo>
*/
declare class IgxComboHeaderItemDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxComboHeaderItemDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxComboHeaderItemDirective, "[igxComboHeaderItem]", never, {}, {}, never, never, true, never>;
}
/**
* 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
* <igx-combo #combo>
* <ng-template igxComboAddItem>
* <button type="button" class="combo__add-button">
* Click to add item
* </button>
* </ng-template>
* </igx-combo>
*/
declare class IgxComboAddItemDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxComboAddItemDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxComboAddItemDirective, "[igxComboAddItem]", never, {}, {}, never, never, true, never>;
}
/**
* 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
* <igx-combo #combo>
* <ng-template igxComboToggleIcon let-collapsed>
* <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
* </ng-template>
* </igx-combo>
*/
declare class IgxComboToggleIconDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxComboToggleIconDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxComboToggleIconDirective, "[igxComboToggleIcon]", never, {}, {}, never, never, true, never>;
}
/**
* 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
* <igx-combo #combo>
* <ng-template igxComboClearIcon>
* <igx-icon>clear</igx-icon>
* </ng-template>
* </igx-combo>
*/
declare class IgxComboClearIconDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxComboClearIconDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxComboClearIconDirective, "[igxComboClearIcon]", never, {}, {}, never, never, true, never>;
}
/** @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<IgxComboFilteringPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<IgxComboFilteringPipe, "comboFiltering", true>;
}
/** @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<IgxComboGroupingPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<IgxComboGroupingPipe, "comboGrouping", true>;
}
/**
* 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
* <igx-combo [filterFunction]="comboIgnoreDiacriticFilterFunction"></igx-combo>
* ```
*/
declare function comboIgnoreDiacriticsFilter<T>(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<IgxComboAddItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxComboAddItemComponent, "igx-combo-add-item", never, {}, {}, never, ["*"], true, never>;
}
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<IgxComboModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<IgxComboModule, never, [typeof IgxComboComponent, typeof IgxComboAddItemDirective, typeof IgxComboClearIconDirective, typeof IgxComboEmptyDirective, typeof IgxComboFooterDirective, typeof IgxComboHeaderDirective, typeof IgxComboHeaderItemDirective, typeof IgxComboItemDirective, typeof IgxComboToggleIconDirective, typeof i3.IgxLabelDirective, typeof i3.IgxPrefixDirective, typeof i3.IgxSuffixDirective, typeof i3.IgxHintDirective], [typeof IgxComboComponent, typeof IgxComboAddItemDirective, typeof IgxComboClearIconDirective, typeof IgxComboEmptyDirective, typeof IgxComboFooterDirective, typeof IgxComboHeaderDirective, typeof IgxComboHeaderItemDirective, typeof IgxComboItemDirective, typeof IgxComboToggleIconDirective, typeof i3.IgxLabelDirective, typeof i3.IgxPrefixDirective, typeof i3.IgxSuffixDirective, typeof i3.IgxHintDirective]>;
static ɵinj: i0.ɵɵInjectorDeclaration<IgxComboModule>;
}
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 };