igniteui-angular

import * as i0 from '@angular/core'; import { EventEmitter, InjectionToken, DoCheck, ElementRef, OnInit, ChangeDetectorRef, QueryList, OnChanges, AfterViewInit, OnDestroy, SimpleChanges } from '@angular/core'; import { CancelableEventArgs, IBaseEventArgs, IToggleView, CancelableBrowserEventArgs, IgxSelectionAPIService, IBaseCancelableBrowserEventArgs, OverlaySettings, IPositionStrategy, IScrollStrategy, IgxOverlayOutletDirective } from 'igniteui-angular/core'; import { IgxForOfToken, IgxToggleDirective, ToggleViewEventArgs } from 'igniteui-angular/directives'; import { Subject } from 'rxjs'; import { NgModel, FormControlName } from '@angular/forms'; import { IgxInputGroupComponent } from 'igniteui-angular/input-group'; /** * The `<igx-drop-down-item>` is a container intended for row items in * a `<igx-drop-down>` container. */ declare class IgxDropDownGroupComponent { /** * @hidden @internal */ get labelId(): string; get labelledBy(): string; /** * @hidden @internal */ role: string; /** @hidden @internal */ groupClass: boolean; /** * Sets/gets if the item group is disabled * * ```typescript * const myDropDownGroup: IgxDropDownGroupComponent = this.dropdownGroup; * // get * ... * const groupState: boolean = myDropDownGroup.disabled; * ... * //set * ... * myDropDownGroup,disabled = false; * ... * ``` * * ```html * <igx-drop-down-item-group [label]="'My Items'" [disabled]="true"> * <igx-drop-down-item *ngFor="let item of items[index]" [value]="item.value"> * {{ item.text }} * </igx-drop-down-item> * </igx-drop-down-item-group> * ``` * * **NOTE:** All items inside of a disabled drop down group will be treated as disabled */ disabled: boolean; /** * Sets/gets the label of the item group * * ```typescript * const myDropDownGroup: IgxDropDownGroupComponent = this.dropdownGroup; * // get * ... * const myLabel: string = myDropDownGroup.label; * ... * // set * ... * myDropDownGroup.label = 'My New Label'; * ... * ``` * * ```html * <igx-drop-down-item-group [label]="'My new Label'"> * ... * </igx-drop-down-item-group> * ``` */ label: string; private _id; static ɵfac: i0.ɵɵFactoryDeclaration<IgxDropDownGroupComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxDropDownGroupComponent, "igx-drop-down-item-group", never, { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["igx-drop-down-item"], true, never>; static ngAcceptInputType_disabled: unknown; } /** @hidden */ declare enum Navigate { Up = -1, Down = 1 } /** Key actions that have designated handlers in IgxDropDownComponent */ declare const DropDownActionKey: { readonly ESCAPE: "escape"; readonly ENTER: "enter"; readonly SPACE: "space"; readonly TAB: "tab"; }; type DropDownActionKey = (typeof DropDownActionKey)[keyof typeof DropDownActionKey]; /** * Interface that encapsulates selectionChanging event arguments - old selection, new selection and cancel selection. * * @export */ interface ISelectionEventArgs extends CancelableEventArgs, IBaseEventArgs { oldSelection: IgxDropDownItemBaseDirective; newSelection: IgxDropDownItemBaseDirective; } /** * Interface for an instance of IgxDropDownNavigationDirective * * @export */ interface IDropDownNavigationDirective { target: any; handleKeyDown(event: KeyboardEvent): void; onArrowDownKeyDown(event?: KeyboardEvent): void; onArrowUpKeyDown(event?: KeyboardEvent): void; onEndKeyDown(event?: KeyboardEvent): void; onHomeKeyDown(event?: KeyboardEvent): void; } declare const IGX_DROPDOWN_BASE: InjectionToken<IDropDownBase>; /** * @hidden */ interface IDropDownList { selectionChanging: EventEmitter<ISelectionEventArgs>; width: string; height: string; id: string; maxHeight: string; collapsed: boolean; items: IgxDropDownItemBaseDirective[]; headers: IgxDropDownItemBaseDirective[]; focusedItem: IgxDropDownItemBaseDirective; navigateFirst(): void; navigateLast(): void; navigateNext(): void; navigatePrev(): void; navigateItem(newIndex: number, direction?: Navigate): void; onItemActionKey(key: DropDownActionKey, event?: Event): void; } /** * @hidden */ interface IDropDownBase extends IDropDownList, IToggleView { selectedItem: any; opening: EventEmitter<CancelableBrowserEventArgs>; opened: EventEmitter<IBaseEventArgs>; closing: EventEmitter<CancelableBrowserEventArgs>; closed: EventEmitter<IBaseEventArgs>; allowItemsFocus?: boolean; setSelectedItem(index: number): void; selectItem(item: IgxDropDownItemBaseDirective, event?: Event, emit?: boolean): void; } /** * An abstract class defining a drop-down item: * With properties / styles for selection, highlight, height * Bindable property for passing data (`value: any`) * Parent component (has to be used under a parent with type `IDropDownBase`) * Method for handling click on Host() */ declare class IgxDropDownItemBaseDirective implements DoCheck { protected dropDown: IDropDownBase; protected elementRef: ElementRef<any>; protected group: IgxDropDownGroupComponent; protected selection?: IgxSelectionAPIService; /** * Sets/gets the `id` of the item. * ```html * <igx-drop-down-item [id] = 'igx-drop-down-item-0'></igx-drop-down-item> * ``` * ```typescript * let itemId = this.item.id; * ``` * * @memberof IgxSelectItemComponent */ id: string; get ariaLabel(): string | null; set ariaLabel(value: string | null); /** * @hidden @internal */ get itemID(): this; /** * The data index of the dropdown item. * * ```typescript * // get the data index of the selected dropdown item * let selectedItemIndex = this.dropdown.selectedItem.index * ``` */ get index(): number; set index(value: number); /** * Gets/sets the value of the item if the item is databound * * ```typescript * // usage in IgxDropDownItemComponent * // get * let mySelectedItemValue = this.dropdown.selectedItem.value; * * // set * let mySelectedItem = this.dropdown.selectedItem; * mySelectedItem.value = { id: 123, name: 'Example Name' } * * // usage in IgxComboItemComponent * // get * let myComboItemValue = this.combo.items[0].value; * ``` */ value: any; /** * @hidden @internal */ get itemStyle(): boolean; /** * Sets/Gets if the item is the currently selected one in the dropdown * * ```typescript * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemSelected = mySelectedItem.selected; // true * ``` * * Two-way data binding * ```html * <igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item> * ``` */ get selected(): boolean; set selected(value: boolean); /** * @hidden */ selectedChange: EventEmitter<boolean>; /** * Sets/gets if the given item is focused * ```typescript * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemFocused = mySelectedItem.focused; * ``` */ get focused(): boolean; /** * ```html * <igx-drop-down-item *ngFor="let item of items" focused={{!item.focused}}> * <div> * {{item.field}} * </div> * </igx-drop-down-item> * ``` */ set focused(value: boolean); /** * Sets/gets if the given item is header * ```typescript * // get * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemHeader = mySelectedItem.isHeader; * ``` * * ```html *  * <igx-drop-down-item *ngFor="let item of items"> * <div *ngIf="items.indexOf(item) === 5; then item.isHeader = true"> * {{item.field}} * </div> * </igx-drop-down-item> * ``` */ isHeader: boolean; /** * Sets/gets if the given item is disabled * * ```typescript * // get * let mySelectedItem = this.dropdown.selectedItem; * let myItemIsDisabled = mySelectedItem.disabled; * ``` * * ```html * <igx-drop-down-item *ngFor="let item of items" disabled={{!item.disabled}}> * <div> * {{item.field}} * </div> * </igx-drop-down-item> * ``` * **NOTE:** Drop-down items inside of a disabled `IgxDropDownGroup` will always count as disabled */ get disabled(): boolean; set disabled(value: boolean); /** * Gets/sets the `role` attribute of the item. Default is 'option'. * * ```html * <igx-drop-down-item [role]="customRole"></igx-drop-down-item> * ``` */ role: string; /** * Gets item index * * @hidden @internal */ get itemIndex(): number; /** * Gets item element height * * @hidden @internal */ get elementHeight(): number; /** * Get item html element * * @hidden @internal */ get element(): ElementRef; protected get hasIndex(): boolean; /** * @hidden */ protected _focused: boolean; protected _selected: boolean; protected _index: any; protected _disabled: boolean; protected _label: any; /** * @hidden * @internal */ clicked(event: any): void; /** * @hidden * @internal */ handleMousedown(event: MouseEvent): void; ngDoCheck(): void; /** Returns true if the items is not a header or disabled */ protected get isSelectable(): boolean; /** If `allowItemsFocus` is enabled, keep the browser focus on the active item */ protected ensureItemFocus(): void; static ɵfac: i0.ɵɵFactoryDeclaration<IgxDropDownItemBaseDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxDropDownItemBaseDirective, "[igxDropDownItemBase]", never, { "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "index": { "alias": "index"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "isHeader": { "alias": "isHeader"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, { "selectedChange": "selectedChange"; }, never, never, true, never>; static ngAcceptInputType_selected: unknown; static ngAcceptInputType_isHeader: unknown; static ngAcceptInputType_disabled: unknown; } /** * The `<igx-drop-down-item>` is a container intended for row items in * a `<igx-drop-down>` container. */ declare class IgxDropDownItemComponent extends IgxDropDownItemBaseDirective { /** * Sets/gets if the given item is focused * ```typescript * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemFocused = mySelectedItem.focused; * ``` */ get focused(): boolean; /** * Sets/gets if the given item is focused * ```typescript * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemFocused = mySelectedItem.focused; * ``` */ set focused(value: boolean); /** * Sets/Gets if the item is the currently selected one in the dropdown * * ```typescript * let mySelectedItem = this.dropdown.selectedItem; * let isMyItemSelected = mySelectedItem.selected; // true * ``` * * Two-way data binding * ```html * <igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item> * ``` */ get selected(): boolean; /** * Sets/Gets if the item is the currently selected one in the dropdown * */ set selected(value: boolean); /** * @hidden @internal */ get setTabIndex(): number; clicked(event: any): void; static ɵfac: i0.ɵɵFactoryDeclaration<IgxDropDownItemComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxDropDownItemComponent, "igx-drop-down-item", never, {}, {}, never, ["igx-prefix, [igxPrefix]", "*", "igx-suffix, [igxSuffix]", "igx-divider"], true, never>; } /** * An abstract class, defining a drop-down component, with: * Properties for display styles and classes * A collection items of type `IgxDropDownItemBaseDirective` * Properties and methods for navigating (highlighting/focusing) items from the collection * Properties and methods for selecting items from the collection */ declare abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit { protected elementRef: ElementRef<any>; protected cdr: ChangeDetectorRef; document: Document; /** * Emitted when item selection is changing, before the selection completes * * ```html * <igx-drop-down (selectionChanging)='handleSelection()'></igx-drop-down> * ``` */ selectionChanging: EventEmitter<ISelectionEventArgs>; /** * Gets/Sets the width of the drop down * * ```typescript * // get * let myDropDownCurrentWidth = this.dropdown.width; * ``` * ```html *  * <igx-drop-down [width]='160px'></igx-drop-down> * ``` */ width: string; /** * Gets/Sets the height of the drop down * * ```typescript * // get * let myDropDownCurrentHeight = this.dropdown.height; * ``` * ```html *  * <igx-drop-down [height]='400px'></igx-drop-down> * ``` */ height: string; /** * Gets/Sets the drop down's id * * ```typescript * // get * let myDropDownCurrentId = this.dropdown.id; * ``` * ```html *  * <igx-drop-down [id]='newDropDownId'></igx-drop-down> * ``` */ get id(): string; set id(value: string); /** * Gets/Sets the drop down's container max height. * * ```typescript * // get * let maxHeight = this.dropdown.maxHeight; * ``` * ```html *  * <igx-drop-down [maxHeight]='200px'></igx-drop-down> * ``` */ maxHeight: any; /** * @hidden @internal */ cssClass: boolean; /** * Get all non-header items * * ```typescript * let myDropDownItems = this.dropdown.items; * ``` */ get items(): IgxDropDownItemBaseDirective[]; /** * Get all header items * * ```typescript * let myDropDownHeaderItems = this.dropdown.headers; * ``` */ get headers(): IgxDropDownItemBaseDirective[]; /** * Get dropdown html element * * ```typescript * let myDropDownElement = this.dropdown.element; * ``` */ get element(): any; /** * @hidden @internal * Get dropdown's html element of its scroll container */ get scrollContainer(): HTMLElement; /** * @hidden @internal * Gets the id of the focused item during dropdown navigation. * This is used to update the `aria-activedescendant` attribute of * the IgxDropDownNavigationDirective host element. */ get activeDescendant(): string; /** * @hidden * @internal */ children: QueryList<IgxDropDownItemBaseDirective>; protected _width: any; protected _height: any; protected _focusedItem: any; protected _id: string; protected computedStyles: any; /** * Gets if the dropdown is collapsed */ abstract readonly collapsed: boolean; ngOnInit(): void; /** Keydown Handler */ onItemActionKey(key: DropDownActionKey, event?: Event): void; /** * Emits selectionChanging with the target item & event * * @hidden @internal * @param newSelection the item selected * @param event the event that triggered the call */ selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event, emit?: boolean): void; /** * @hidden @internal */ get focusedItem(): IgxDropDownItemBaseDirective; /** * @hidden @internal */ set focusedItem(item: IgxDropDownItemBaseDirective); /** * Navigates to the item on the specified index * * @param newIndex number - the index of the item in the `items` collection */ navigateItem(newIndex: number): void; /** * @hidden @internal */ navigateFirst(): void; /** * @hidden @internal */ navigateLast(): void; /** * @hidden @internal */ navigateNext(): void; /** * @hidden @internal */ navigatePrev(): void; protected scrollToHiddenItem(newItem: IgxDropDownItemBaseDirective): void; protected navigate(direction: Navigate, currentIndex?: number): void; protected getNearestSiblingFocusableItemIndex(startIndex: number, direction: Navigate): number; static ɵfac: i0.ɵɵFactoryDeclaration<IgxDropDownBaseDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxDropDownBaseDirective, never, never, { "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "id": { "alias": "id"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; }, { "selectionChanging": "selectionChanging"; }, never, never, true, never>; } /** * Navigation Directive that handles keyboard events on its host and controls a targeted IgxDropDownBaseDirective component */ declare class IgxDropDownItemNavigationDirective implements IDropDownNavigationDirective { dropdown: IgxDropDownBaseDirective; protected _target: IgxDropDownBaseDirective; /** * Gets the target of the navigation directive; * * ```typescript * // Get * export class MyComponent { * ... * @ContentChild(IgxDropDownNavigationDirective) * navDirective: IgxDropDownNavigationDirective = null * ... * const navTarget: IgxDropDownBaseDirective = navDirective.navTarget * } * ``` */ get target(): IgxDropDownBaseDirective; /** * Sets the target of the navigation directive; * If no valid target is passed, it falls back to the drop down context * * ```html *  * <input [igxDropDownItemNavigation]="dropdown" /> * ... * <igx-drop-down #dropdown> * ... * </igx-drop-down> * ``` */ set target(target: IgxDropDownBaseDirective); get activeDescendant(): string; /** * Captures keydown events and calls the appropriate handlers on the target component */ handleKeyDown(event: KeyboardEvent): void; /** * Navigates to previous item */ onArrowDownKeyDown(): void; /** * Navigates to previous item */ onArrowUpKeyDown(): void; /** * Navigates to target's last item */ onEndKeyDown(): void; /** * Navigates to target's first item */ onHomeKeyDown(): void; static ɵfac: i0.ɵɵFactoryDeclaration<IgxDropDownItemNavigationDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxDropDownItemNavigationDirective, "[igxDropDownItemNavigation]", never, { "target": { "alias": "igxDropDownItemNavigation"; "required": false; }; }, {}, never, never, true, never>; } /** * **Ignite UI for Angular DropDown** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down) * * The Ignite UI for Angular Drop Down displays a scrollable list of items which may be visually grouped and * supports selection of a single item. Clicking or tapping an item selects it and closes the Drop Down * * Example: * ```html * <igx-drop-down> * <igx-drop-down-item *ngFor="let item of items" disabled={{item.disabled}} isHeader={{item.header}}> * {{ item.value }} * </igx-drop-down-item> * </igx-drop-down> * ``` */ declare class IgxDropDownComponent extends IgxDropDownBaseDirective implements IDropDownBase, OnChanges, AfterViewInit, OnDestroy { protected selection: IgxSelectionAPIService; /** * @hidden * @internal */ children: QueryList<IgxDropDownItemBaseDirective>; /** * Emitted before the dropdown is opened * * ```html * <igx-drop-down (opening)='handleOpening($event)'></igx-drop-down> * ``` */ opening: EventEmitter<IBaseCancelableBrowserEventArgs>; /** * Emitted after the dropdown is opened * * ```html * <igx-drop-down (opened)='handleOpened($event)'></igx-drop-down> * ``` */ opened: EventEmitter<IBaseEventArgs>; /** * Emitted before the dropdown is closed * * ```html * <igx-drop-down (closing)='handleClosing($event)'></igx-drop-down> * ``` */ closing: EventEmitter<IBaseCancelableBrowserEventArgs>; /** * Emitted after the dropdown is closed * * ```html * <igx-drop-down (closed)='handleClosed($event)'></igx-drop-down> * ``` */ closed: EventEmitter<IBaseEventArgs>; /** * Gets/sets whether items take focus. Disabled by default. * When enabled, drop down items gain tab index and are focused when active - * this includes activating the selected item when opening the drop down and moving with keyboard navigation. * * Note: Keep that focus shift in mind when using the igxDropDownItemNavigation directive * and ensure it's placed either on each focusable item or a common ancestor to allow it to handle keyboard events. * * ```typescript * // get * let dropDownAllowsItemFocus = this.dropdown.allowItemsFocus; * ``` * * ```html *  * <igx-drop-down [allowItemsFocus]='true'></igx-drop-down> * ``` */ allowItemsFocus: boolean; /** * Sets aria-labelledby attribute value. * ```html * <igx-drop-down [labelledby]="labelId"></igx-drop-down> * ``` */ labelledBy: string; /** * Gets/sets the `role` attribute of the drop down. Default is 'listbox'. * * ```html * <igx-drop-down [role]="customRole"></igx-drop-down-item> * ``` */ role: string; protected virtDir: IgxForOfToken<any>; protected toggleDirective: IgxToggleDirective; protected scrollContainerRef: ElementRef; /** * @hidden @internal */ get focusedItem(): IgxDropDownItemBaseDirective; set focusedItem(value: IgxDropDownItemBaseDirective); get id(): string; set id(value: string); /** Id of the internal listbox of the drop down */ get listId(): string; /** * Get currently selected item * * ```typescript * let currentItem = this.dropdown.selectedItem; * ``` */ get selectedItem(): IgxDropDownItemBaseDirective; /** * Gets if the dropdown is collapsed * * ```typescript * let isCollapsed = this.dropdown.collapsed; * ``` */ get collapsed(): boolean; /** @hidden @internal */ get scrollContainer(): HTMLElement; protected get collectionLength(): number; protected destroy$: Subject<boolean>; protected _scrollPosition: number; /** * Opens the dropdown * * ```typescript * this.dropdown.open(); * ``` */ open(overlaySettings?: OverlaySettings): void; /** * @hidden @internal */ getDefaultOverlaySettings(): OverlaySettings; /** * Closes the dropdown * * ```typescript * this.dropdown.close(); * ``` */ close(event?: Event): void; /** * Toggles the dropdown * * ```typescript * this.dropdown.toggle(); * ``` */ toggle(overlaySettings?: OverlaySettings): void; /** * Select an item by index * * @param index of the item to select; If the drop down uses *igxFor, pass the index in data */ setSelectedItem(index: number): void; /** * Navigates to the item on the specified index * If the data in the drop-down is virtualized, pass the index of the item in the virtualized data. * * @param newIndex number */ navigateItem(index: number): void; /** * @hidden @internal */ updateScrollPosition(): void; /** * @hidden @internal */ onToggleOpening(e: IBaseCancelableBrowserEventArgs): void; /** * @hidden @internal */ onToggleContentAppended(_event: ToggleViewEventArgs): void; /** * @hidden @internal */ onToggleOpened(): void; /** * @hidden @internal */ onToggleClosing(e: IBaseCancelableBrowserEventArgs): void; /** * @hidden @internal */ onToggleClosed(): void; /** * @hidden @internal */ ngOnDestroy(): void; /** @hidden @internal */ calculateScrollPosition(item: IgxDropDownItemBaseDirective): number; /** * @hidden @internal */ ngOnChanges(changes: SimpleChanges): void; ngAfterViewInit(): void; /** Keydown Handler */ onItemActionKey(key: DropDownActionKey, event?: Event): void; /** * Virtual scroll implementation * * @hidden @internal */ navigateFirst(): void; /** * @hidden @internal */ navigateLast(): void; /** * @hidden @internal */ navigateNext(): void; /** * @hidden @internal */ navigatePrev(): void; /** * Handles the `selectionChanging` emit and the drop down toggle when selection changes * * @hidden * @internal * @param newSelection * @param emit * @param event */ selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event, emit?: boolean): void; /** * Clears the selection of the dropdown * ```typescript * this.dropdown.clearSelection(); * ``` */ clearSelection(): void; /** * Checks whether the selection is valid * `null` - the selection should be emptied * Virtual? - the selection should at least have and `index` and `value` property * Non-virtual? - the selection should be a valid drop-down item and **not** be a header */ protected isSelectionValid(selection: any): boolean; protected scrollToItem(item: IgxDropDownItemBaseDirective): void; protected focusItem(value: boolean): void; protected updateItemFocus(): void; protected skipHeader(direction: Navigate): void; private isIndexOutOfBounds; static ɵfac: i0.ɵɵFactoryDeclaration<IgxDropDownComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxDropDownComponent, "igx-drop-down", never, { "allowItemsFocus": { "alias": "allowItemsFocus"; "required": false; }; "labelledBy": { "alias": "labelledBy"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, { "opening": "opening"; "opened": "opened"; "closing": "closing"; "closed": "closed"; }, ["virtDir", "children"], ["*"], true, never>; static ngAcceptInputType_allowItemsFocus: unknown; } /** * Interface that encapsulates onItemSelection event arguments - new value and cancel selection. * * @export */ interface AutocompleteSelectionChangingEventArgs extends CancelableEventArgs, IBaseEventArgs { /** * New value selected from the drop down */ value: string; } interface AutocompleteOverlaySettings { /** Position strategy to use with this settings */ positionStrategy?: IPositionStrategy; /** Scroll strategy to use with this settings */ scrollStrategy?: IScrollStrategy; /** Set the outlet container to attach the overlay to */ outlet?: IgxOverlayOutletDirective | ElementRef; } /** * **Ignite UI for Angular Autocomplete** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html) * * The igxAutocomplete directive provides a way to enhance a text input * by showing a drop down of suggested options, provided by the developer. * * Example: * ```html * <input type="text" [igxAutocomplete]="townsPanel" #autocompleteRef="igxAutocomplete"/> * <igx-drop-down #townsPanel> * <igx-drop-down-item *ngFor="let town of towns | startsWith:townSelected" [value]="town"> * {{town}} * </igx-drop-down-item> * </igx-drop-down> * ``` */ declare class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective implements OnDestroy, AfterViewInit, OnInit { protected ngModel: NgModel; protected formControl: FormControlName; protected group: IgxInputGroupComponent; protected elementRef: ElementRef<any>; protected cdr: ChangeDetectorRef; /** * Sets the target of the autocomplete directive * * ```html *  * <input [igxAutocomplete]="dropdown" /> * ... * <igx-drop-down #dropdown> * ... * </igx-drop-down> * ``` */ get target(): IgxDropDownComponent; set target(v: IgxDropDownComponent); /** * Provide overlay settings for the autocomplete drop down * * ```typescript * // get * let settings = this.autocomplete.autocompleteSettings; * ``` * ```html *  * <input type="text" [igxAutocomplete]="townsPanel" [igxAutocompleteSettings]="settings"/> * ``` * ```typescript * // set * this.settings = { * positionStrategy: new ConnectedPositioningStrategy({ * closeAnimation: null, * openAnimation: null * }) * }; * ``` */ autocompleteSettings: AutocompleteOverlaySettings; /** @hidden @internal */ autofill: string; /** @hidden @internal */ role: string; /** * Enables/disables autocomplete component * * ```typescript * // get * let disabled = this.autocomplete.disabled; * ``` * ```html *  * <input type="text" [igxAutocomplete]="townsPanel" [igxAutocompleteDisabled]="disabled"/> * ``` * ```typescript * // set * public disabled = true; * ``` */ disabled: boolean; /** * Emitted after item from the drop down is selected * * ```html * <input igxInput [igxAutocomplete]="townsPanel" (selectionChanging)='selectionChanging($event)' /> * ``` */ selectionChanging: EventEmitter<AutocompleteSelectionChangingEventArgs>; /** @hidden @internal */ get nativeElement(): HTMLInputElement; /** @hidden @internal */ get parentElement(): HTMLElement; private get settings(); /** @hidden @internal */ get ariaExpanded(): boolean; /** @hidden @internal */ get hasPopUp(): string; /** @hidden @internal */ get ariaOwns(): string; /** @hidden @internal */ get ariaActiveDescendant(): string; /** @hidden @internal */ get ariaAutocomplete(): string; protected _composing: boolean; protected id: string; protected get model(): NgModel | FormControlName; private _shouldBeOpen; private destroy$; private defaultSettings; /** @hidden @internal */ onInput(): void; /** @hidden @internal */ onCompositionStart(): void; /** @hidden @internal */ onCompositionEnd(): void; /** @hidden @internal */ onArrowDown(event: Event): void; /** @hidden @internal */ onTab(): void; /** @hidden @internal */ handleKeyDown(event: any): void; /** @hidden @internal */ onArrowDownKeyDown(): void; /** @hidden @internal */ onArrowUpKeyDown(): void; /** @hidden @internal */ onEndKeyDown(): void; /** @hidden @internal */ onHomeKeyDown(): void; /** * Closes autocomplete drop down */ close(): void; /** * Opens autocomplete drop down */ open(): void; /** @hidden @internal */ ngOnInit(): void; /** @hidden */ ngOnDestroy(): void; ngAfterViewInit(): void; private get collapsed(); private select; private highlightFirstItem; static ɵfac: i0.ɵɵFactoryDeclaration<IgxAutocompleteDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<IgxAutocompleteDirective, "[igxAutocomplete]", ["igxAutocomplete"], { "target": { "alias": "igxAutocomplete"; "required": false; }; "autocompleteSettings": { "alias": "igxAutocompleteSettings"; "required": false; }; "disabled": { "alias": "igxAutocompleteDisabled"; "required": false; }; }, { "selectionChanging": "selectionChanging"; }, never, never, true, never>; static ngAcceptInputType_disabled: unknown; } /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxAutocompleteModule { static ɵfac: i0.ɵɵFactoryDeclaration<IgxAutocompleteModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<IgxAutocompleteModule, never, [typeof IgxAutocompleteDirective], [typeof IgxAutocompleteDirective]>; static ɵinj: i0.ɵɵInjectorDeclaration<IgxAutocompleteModule>; } declare const IGX_DROP_DOWN_DIRECTIVES: readonly [typeof IgxDropDownComponent, typeof IgxDropDownItemComponent, typeof IgxDropDownGroupComponent, typeof IgxDropDownItemNavigationDirective]; /** * @hidden * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxDropDownModule { static ɵfac: i0.ɵɵFactoryDeclaration<IgxDropDownModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<IgxDropDownModule, never, [typeof IgxDropDownComponent, typeof IgxDropDownItemComponent, typeof IgxDropDownGroupComponent, typeof IgxDropDownItemNavigationDirective], [typeof IgxDropDownComponent, typeof IgxDropDownItemComponent, typeof IgxDropDownGroupComponent, typeof IgxDropDownItemNavigationDirective]>; static ɵinj: i0.ɵɵInjectorDeclaration<IgxDropDownModule>; } export { DropDownActionKey, IGX_DROPDOWN_BASE, IGX_DROP_DOWN_DIRECTIVES, IgxAutocompleteDirective, IgxAutocompleteModule, IgxDropDownBaseDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemBaseDirective, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, Navigate }; export type { AutocompleteOverlaySettings, AutocompleteSelectionChangingEventArgs, IDropDownBase, IDropDownList, IDropDownNavigationDirective, ISelectionEventArgs };