@progress/kendo-angular-dropdowns
Version:
Dropdowns Package for Angular 2
290 lines (289 loc) • 9.15 kB
TypeScript
import { SearchBarComponent } from './searchbar.component';
import { ViewContainerRef, ElementRef, TemplateRef, OnDestroy, OnChanges, DoCheck, EventEmitter, AfterContentChecked, AfterViewInit, ChangeDetectorRef, KeyValueDiffers } from '@angular/core';
import { SelectionService, SelectionEvent } from './selection.service';
import { PopupSettings } from './popup-settings';
import { NavigationService } from './navigation.service';
import { ItemTemplateDirective } from './templates/item-template.directive';
import { HeaderTemplateDirective } from './templates/header-template.directive';
import { FooterTemplateDirective } from './templates/footer-template.directive';
import { TagTemplateDirective } from './templates/tag-template.directive';
import { NoDataTemplateDirective } from './templates/no-data-template.directive';
import { PreventableEvent } from './common/preventable-event';
import { PopupService } from '@progress/kendo-angular-popup';
/**
* Represents the Kendo UI MultiSelect component for Angular.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-multiselect [data]="listItems">
* </kendo-multiselect>
* `
* })
* class AppComponent {
* public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
* }
* ```
*/
export declare class MultiSelectComponent implements OnDestroy, OnChanges, DoCheck, AfterContentChecked, AfterViewInit {
private popupService;
private selectionService;
private navigationService;
private cdr;
private differs;
activeId: string;
listBoxId: string;
popupWidth: string;
popupMinWidth: string;
text: string;
tags: any[];
focusedTagIndex: number;
popupOpen: boolean;
/**
* @hidden
*/
focusComponent(): void;
/**
* @hidden
*/
blurComponent(): void;
/**
* @hidden
*/
wrapperMousedown(event: any): void;
/**
* @hidden
*/
onResize(): void;
readonly appendTo: ViewContainerRef;
/**
* Controls whether to close the suggestion list of the MultiSelect after the selection of an item.
* @default true
*/
autoClose: boolean;
/**
* Sets and gets the loading state of the MultiSelect.
*/
loading: boolean;
/**
* Sets the data of the MultiSelect.
*
* > The data has to be provided in an array-like list of items.
*/
data: any[];
/**
* Sets the value of the MultiSelect. 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 value. If the data contains only primitive values, do not define it.
*/
valueField: string;
/**
* Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
*/
textField: string;
/**
* Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
tabIndex: number;
/**
* The hint displayed when the component is empty. When the values are selected, it disappears.
*/
placeholder: string;
/**
* Sets the disabled state of the component.
*/
disabled: boolean;
/**
* Enables the [filtering]({% slug filtering_multiselect_kendouiforangular %}) functionality of the MultiSelect.
*/
filterable: boolean;
/**
* Configures the popup of the MultiSelect.
*
* 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;
/**
* Specifies the type of the selected value. If set to `true`, the selected value has to be of the primitive type.
*
* For more details, refer to the section on the
* [`valuePrimitive`]({% slug valuebinding_multiselect_kendouiforangular %}#toc-primitive-values-from-object-fields) property.
*/
valuePrimitive: boolean;
/**
* If set to `true`, renders a button on hovering over the component. Clicking this button resets the value of the component to an empty array and triggers the `change` event.
*/
clearButton: boolean;
/**
* Fires each time the user types in the filter input. You can filter the source based on the passed filtration value.
*/
filterChange: EventEmitter<string>;
/**
* Fires each time the value is changed.
*
* For more details, refer to the example on [events]({% slug overview_multiselect_kendouiforangular %}#toc-events).
*/
valueChange: 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 MultiSelect.
*/
onFocus: EventEmitter<any>;
/**
* Fires each time the MultiSelect gets blurred.
*/
onBlur: EventEmitter<any>;
container: ViewContainerRef;
searchbar: SearchBarComponent;
popupTemplate: TemplateRef<any>;
wrapper: ElementRef;
template: ItemTemplateDirective;
headerTemplate: HeaderTemplateDirective;
footerTemplate: FooterTemplateDirective;
tagTemplate: TagTemplateDirective;
noDataTemplate: NoDataTemplateDirective;
readonly widgetClasses: boolean;
readonly dir: string;
readonly focusedClass: boolean;
readonly disabledClass: boolean;
constructor(rtl: boolean, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, cdr: ChangeDetectorRef, differs: KeyValueDiffers);
readonly listContainerClasses: any[];
readonly width: any;
/**
* @hidden
*/
popupOpened(): void;
/**
* @hidden
*/
onMouseDown(event: any): void;
/**
* @hidden
*/
verifySettings(): void;
/**
* @hidden
*/
change(event: SelectionEvent): void;
/**
* @hidden
*/
setState(value: any): void;
/**
* @hidden
*/
handleBlur(): void;
/**
* @hidden
*/
handleFilter(text: string): void;
/**
* @hidden
*/
handleNavigate(event: any): void;
/**
* @hidden
*/
removeTag(dataItem: any): void;
/**
* @hidden
*/
clearAll(event: any): void;
ngAfterContentChecked(): void;
ngDoCheck(): void;
ngOnChanges(changes: any): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* Focuses the MultiSelect.
*/
focus(): void;
/**
* Blurs the MultiSelect.
*/
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 MultiSelect.
*/
reset(): void;
/**
* @hidden
*/
writeValue(value: any): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
protected onChangeCallback: Function;
protected onTouchedCallback: Function;
private _data;
private _placeholder;
private _open;
private _value;
private selectedDataItems;
private _popupSettings;
private popupRef;
private popupMouseDownHandler;
private observableSubscriptions;
private changeSubscription;
private isFocused;
private direction;
private wrapperBlurred;
private differ;
private subscribeEvents();
private unsubscribeEvents();
private handleItemChange(event);
private handleEnter(event);
private handleClose();
private handleEnd();
private handleHome();
private handleUp(index);
private handleBackspace();
private handleDelete();
private handleLeftKey();
private handleDownKey(index);
private handleRightKey();
private search(text);
private closePopup();
private openPopup();
private emitValueChange();
private _toggle(open);
private getSelectedDataItems(valueChanges);
}