@progress/kendo-angular-dropdowns
Version:
Dropdowns Package for Angular 2
333 lines (332 loc) • 10.1 kB
TypeScript
import { ElementRef, EventEmitter, ViewContainerRef, OnDestroy, OnChanges, SimpleChange, NgZone, TemplateRef, ChangeDetectorRef } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/concatMap';
import 'rxjs/add/operator/merge';
import 'rxjs/add/operator/skipWhile';
import { PopupSettings } from './popup-settings';
import { SelectionService } from './selection.service';
import { NavigationService } from './navigation.service';
import { ItemTemplateDirective } from './templates/item-template.directive';
import { ValueTemplateDirective } from './templates/value-template.directive';
import { HeaderTemplateDirective } from './templates/header-template.directive';
import { FooterTemplateDirective } from './templates/footer-template.directive';
import { NoDataTemplateDirective } from './templates/no-data-template.directive';
import { Direction } from './direction';
import { PreventableEvent } from './common/preventable-event';
import { PopupService } from '@progress/kendo-angular-popup';
/**
* @hidden
*/
export declare const DROPDOWNLIST_VALUE_ACCESSOR: any;
/**
* Represents the Kendo UI DropDownList component for Angular.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-dropdownlist [data]="listItems">
* </kendo-dropdownlist>
* `
* })
* class AppComponent {
* public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
* }
* ```
*/
export declare class DropDownListComponent implements ControlValueAccessor, OnDestroy, OnChanges {
private popupService;
private selectionService;
private navigationService;
private _zone;
private cdr;
readonly width: any;
readonly height: any;
popupOpen: boolean;
readonly widgetTabIndex: number;
readonly ariaHasPopup: boolean;
readonly ariaExpanded: boolean;
readonly ariaOwns: string;
readonly ariaActivedescendant: string;
readonly appendTo: ViewContainerRef;
/**
* @hidden
*/
iconClass: string;
/**
* Sets and gets the loading state of the DropDownList.
*/
loading: boolean;
/**
* Sets the data of the DropDownList.
*
* > The data has to be provided in an array-like list.
*/
data: any;
/**
* Sets the value of the DropDownList. It can either be of the primitive (string, numbers) or of the complex (objects) type. To define the type, use the `valuePrimitive` option.
*
* > All selected values which are not present in the source are ignored.
*/
value: any;
/**
* Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
*/
textField: string;
/**
* Sets the data item field that represents the item value. If the data contains only primitive values, do not define it.
*/
valueField: string;
/**
* Configures the popup of the DropDownList.
*
* The available options are:
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
* - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
* - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
*/
popupSettings: PopupSettings;
/**
* Sets the text of the default empty item. The type of the defined value has to match the data type.
*/
defaultItem: any;
/**
* Sets the disabled state of the component.
*/
disabled: boolean;
/**
* Enables the [filtering]({% slug filtering_ddl_kendouiforangular %}) functionality of the DropDownList.
*/
filterable: boolean;
/**
* Enables a case-insensitive search. When filtration is disabled, use this option.
*/
ignoreCase: boolean;
/**
* Sets the delay before an item search is performed. When filtration is disabled, use this option.
*/
delay: number;
/**
* Specifies the type of the selected value. If set to `true`, the selected value has to be of a primitive value.
*
* For more details, refer to the section on the
* [`valuePrimitive`]({% slug valuebinding_ddl_kendouiforangular %}#toc-primitive-values-from-object-fields) property.
*/
valuePrimitive: boolean;
/**
* Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
tabIndex: number;
/**
* Fires each time the value is changed.
*
* For more details, refer to the example on [events]({% slug overview_ddl_kendouiforangular %}#toc-events).
*/
valueChange: EventEmitter<any>;
/**
* Fires each time the user types in the filter input. You can filter the source based on the passed filtration value.
*
* For more details, refer to the example on [events]({% slug overview_ddl_kendouiforangular %}#toc-events).
*/
filterChange: EventEmitter<any>;
/**
* Fires each time the item selection is changed.
*
* For more details, refer to the example on [events]({% slug overview_ddl_kendouiforangular %}#toc-events).
*/
selectionChange: EventEmitter<any>;
/**
* Fires each time the popup is about to open.
* This event is preventable. If you cancel it, the popup will remain closed.
*/
open: EventEmitter<PreventableEvent>;
/**
* Fires each time the popup is about to close.
* This event is preventable. If you cancel it, the popup will remain open.
*/
close: EventEmitter<PreventableEvent>;
/**
* Fires each time the user focuses the DropDownList.
*/
onFocus: EventEmitter<any>;
/**
* Fires each time the DropDownList gets blurred.
*/
onBlur: EventEmitter<any>;
itemTemplate: ItemTemplateDirective;
valueTemplate: ValueTemplateDirective;
headerTemplate: HeaderTemplateDirective;
footerTemplate: FooterTemplateDirective;
noDataTemplate: NoDataTemplateDirective;
container: ViewContainerRef;
filterInput: ElementRef;
popupTemplate: TemplateRef<any>;
wrapper: ElementRef;
/**
* @hidden
*/
blurComponent(): void;
/**
* @hidden
*/
blurFilterInput(): void;
/**
* @hidden
*/
focusComponent(): void;
/**
* @hidden
*/
keydown(event: any): void;
/**
* @hidden
*/
keypress(event: any): void;
/**
* @hidden
*/
click(): void;
/**
* @hidden
*/
onResize(): void;
readonly widgetClasses: boolean;
listBoxId: string;
optionPrefix: string;
filterText: string;
isFocused: boolean;
direction: Direction;
dataItem: any;
protected onTouchedCallback: Function;
protected onChangeCallback: Function;
private popupRef;
private popupMouseDownHandler;
private word;
private last;
private typingTimeout;
private changeSubscription;
private selectSubscription;
private navigationSubscription;
private enterSubscription;
private openSubscription;
private closeSubscription;
private filterFocused;
private filterBlurred;
private wrapperFocused;
private wrapperBlurred;
private componentBlurredSubscription;
private filterBlurredSubscription;
private _data;
private _value;
private _open;
private _previousValue;
private text;
private _popupSettings;
constructor(rtl: boolean, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, _zone: NgZone, cdr: ChangeDetectorRef);
/**
* @hidden
*/
onFilterFocus(): void;
/**
* @hidden
*/
popupOpened(): void;
/**
* @hidden
*/
ngOnDestroy(): void;
/**
* @hidden
*/
ngOnChanges(_changes: {
[propertyName: string]: SimpleChange;
}): void;
/**
* Focuses the DropDownList.
*/
focus(): void;
/**
* Blurs the DropDownList.
*/
blur(): void;
/**
* Toggles the visibility of the popup. If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
*
* @param open - The state of the popup.
*/
toggle(open: boolean): void;
/**
* Returns the current open state of the popup.
*/
readonly isOpen: boolean;
/**
* Resets the value of the DropDownList.
*/
reset(): void;
/**
* @hidden
*/
writeValue(newValue: any): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
readonly listContainerClasses: Object;
/**
* @hidden
*/
readonly buttonClasses: Object;
/**
* @hidden
*/
setDefaultItemClasses(): Object;
/**
* @hidden
*/
getText(): any;
/**
* @hidden
*/
getDefaultItemText(): any;
private _toggle(open);
private subscribeEvents();
private unsubscribeEvents();
private handleItemChange(event);
private handleItemSelect(event);
private handleEnter();
protected verifySettings(newValue: any): void;
protected componentBlur(): void;
/**
* @hidden
*/
onMouseDown(event: any): void;
protected onKeyPress(event: any): void;
protected search(): void;
protected selectNext(): void;
protected change(dataItem: any): void;
protected navigate(index: number): void;
protected setState(value: any): void;
/**
* @hidden
*/
handleFilter(event: any): void;
private nextTick(f);
}