UNPKG

@progress/kendo-angular-dropdowns

Version:
290 lines (289 loc) • 9.15 kB
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`&mdash;Controls the popup animation. By default, the open and close animations are enabled. * - `width: Number`&mdash;Sets the width of the popup container. By default, the width of the host element is used. * - `height: Number`&mdash;Sets the height of the popup container. By default, the height is 200px. * - `popupClass: String`&mdash;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); }