@progress/kendo-angular-dropdowns
Version:
Dropdowns Package for Angular 2
254 lines (253 loc) • 8.09 kB
TypeScript
import { ElementRef, EventEmitter, ViewContainerRef, TemplateRef, OnDestroy, SimpleChange, OnChanges, ChangeDetectorRef } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { SearchBarComponent } from './searchbar.component';
import { ItemTemplateDirective } from './templates/item-template.directive';
import { HeaderTemplateDirective } from './templates/header-template.directive';
import { FooterTemplateDirective } from './templates/footer-template.directive';
import { PopupSettings } from './popup-settings';
import { SelectionService } from './selection.service';
import { NavigationService, NavigationEvent } from './navigation.service';
import { NoDataTemplateDirective } from './templates/no-data-template.directive';
import { PreventableEvent } from './common/preventable-event';
import { PopupService } from '@progress/kendo-angular-popup';
/**
* @hidden
*/
export declare const AUTOCOMPLETE_VALUE_ACCESSOR: any;
/**
* Represents the Kendo UI AutoComplete component for Angular.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-autocomplete
* [data]="listItems"
* [placeholder]="placeholder"
* >
* `
* })
* class AppComponent {
* public placeholder: string = 'Type "it" for suggestions';
* public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
* }
* ```
*/
export declare class AutoCompleteComponent implements ControlValueAccessor, OnDestroy, OnChanges {
private popupService;
private selectionService;
private navigationService;
private cdr;
readonly width: any;
readonly height: any;
readonly listContainerClasses: Object;
readonly suggestion: string;
readonly appendTo: ViewContainerRef;
dataItem: any;
popupOpen: boolean;
readonly activeDescendant: string;
/**
* Sets the data of the AutoComplete.
*
* > The data has to be provided in an array-like list.
*/
data: any;
/**
* Sets the value of the AutoComplete.
*
*/
value: any;
/**
* Sets the data item field that represents the item value. If the data contains only primitive values, do not define it.
*/
valueField: string;
/**
* The hint displayed when the component is empty.
*
*/
placeholder: string;
/**
* Configures the popup of the AutoComplete.
*
* The available options are:
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
* - `width: Number | String`—Sets the width of the popup container. By default, the width of the host element is used If set to `auto`, the component automatically adjusts the width of the popup, so no item labels are wrapped.
* - `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 and gets the loading state of the AutoComplete.
*/
loading: boolean;
/**
* @hidden
*
* If set to `true`, renders a button on hovering over the component. Clicking this button resets the value of the component to `undefined` and triggers the `change` event.
*/
clearButton: boolean;
/**
* Enables the auto-completion of the text based on the first data item.
*/
suggest: boolean;
/**
* Sets the disabled state of the component.
*/
disabled: boolean;
/**
* Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
tabIndex: number;
/**
* Enables the filter functionality. If set to `true`, the component emits the `filterChange` event.
*/
filterable: boolean;
/**
* Fires each time the value is changed.
*
* For more details, refer to the example on [events]({% slug overview_autocomplete_kendouiforangular %}#toc-events).
*/
valueChange: EventEmitter<string>;
/**
* Fires each time the user types in the input. You can filter the source based on the passed filtration value.
*
* For more details, refer to the example on [events]({% slug overview_autocomplete_kendouiforangular %}#toc-events).
*/
filterChange: EventEmitter<string>;
/**
* 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 AutoComplete.
*/
onFocus: EventEmitter<any>;
/**
* Fires each time the AutoComplete gets blurred.
*/
onBlur: EventEmitter<any>;
template: ItemTemplateDirective;
headerTemplate: HeaderTemplateDirective;
footerTemplate: FooterTemplateDirective;
noDataTemplate: NoDataTemplateDirective;
container: ViewContainerRef;
popupTemplate: TemplateRef<any>;
searchbar: SearchBarComponent;
readonly widgetClasses: boolean;
isFocused: boolean;
readonly isDisabled: boolean;
readonly widgetHeight: string;
readonly dir: any;
listBoxId: string;
optionPrefix: string;
popupWidth: string;
popupMinWidth: string;
protected onChangeCallback: Function;
protected onTouchedCallback: Function;
constructor(rtl: boolean, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, cdr: ChangeDetectorRef, wrapper: ElementRef);
ngOnDestroy(): void;
ngOnChanges(_changes: {
[propertyName: string]: SimpleChange;
}): 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 AutoComplete.
*/
reset(): void;
/**
* @hidden
*/
clearValue(event: any): void;
/**
* @hidden
*/
writeValue(value: any): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
popupOpened(): void;
/**
* Focuses the AutoComplete.
*/
focus(): void;
/**
* Blurs the AutoComplete.
*/
blur(): void;
/**
* @hidden
*/
onResize(): void;
protected verifySettings(newValue: any): void;
protected search(text: any): void;
protected navigate(index: number): void;
/**
* @hidden
*/
handleNavigate(event: any): void;
protected handleEnter(event: NavigationEvent): void;
/**
* @hidden
*/
searchBarChange(text: string): void;
/**
* @hidden
*/
handleFocus(): void;
/**
* @hidden
*/
handleBlur(): void;
protected change(candidate: string): void;
private popupRef;
private popupMouseDownHandler;
private _popupSettings;
private _data;
private _open;
private _value;
private _previousValue;
private suggestedText;
private backspacePressed;
private changeSubscribtion;
private focusSubscribtion;
private navigationSubscribtion;
private enterSubscription;
private escSubscription;
private closeSubscription;
private wrapper;
private _isFocused;
private direction;
private subscribeEvents();
private unsubscribeEvents();
private handleItemChange(event);
private handleItemFocus(_event);
private _toggle(open);
}