UNPKG

igniteui-angular

Version:

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

257 lines (256 loc) 8.4 kB
import { ChangeDetectorRef, ElementRef, QueryList, OnChanges, OnDestroy, AfterViewInit, EventEmitter, SimpleChanges } from '@angular/core'; import { IgxToggleDirective, ToggleViewEventArgs } from '../directives/toggle/toggle.directive'; import { IgxDropDownBaseDirective } from './drop-down.base'; import { DropDownActionKey, Navigate } from './drop-down.common'; import { IDropDownBase } from './drop-down.common'; import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils'; import { IgxSelectionAPIService } from '../core/selection'; import { Subject } from 'rxjs'; import { IgxDropDownItemBaseDirective } from './drop-down-item.base'; import { IgxForOfToken } from '../directives/for-of/for_of.directive'; import { OverlaySettings } from '../services/overlay/utilities'; import * as i0 from "@angular/core"; /** * **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> * ``` */ export 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 * <!--set--> * <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; 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; constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, document: any, selection: IgxSelectionAPIService); /** * 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; }; }, { "opening": "opening"; "opened": "opened"; "closing": "closing"; "closed": "closed"; }, ["virtDir", "children"], ["*"], true, never>; static ngAcceptInputType_allowItemsFocus: unknown; }