@progress/kendo-angular-dropdowns
Version:
A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree
616 lines (615 loc) • 22 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Renderer2, ElementRef, EventEmitter, ViewContainerRef, OnDestroy, OnChanges, NgZone, TemplateRef, ChangeDetectorRef, OnInit, SimpleChanges, AfterContentChecked, Injector, AfterViewInit } from '@angular/core';
import { ControlValueAccessor, FormControl } from '@angular/forms';
import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils';
import { PopupSettings } from '../common/models/popup-settings';
import { AdaptiveMode } from '../common/util';
import { SelectionService } from '../common/selection/selection.service';
import { NavigationService } from '../common/navigation/navigation.service';
import { ItemTemplateDirective } from '../common/templates/item-template.directive';
import { GroupTemplateDirective } from '../common/templates/group-template.directive';
import { FixedGroupTemplateDirective } from '../common/templates/fixed-group-template.directive';
import { ValueTemplateDirective } from '../common/templates/value-template.directive';
import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
import { FooterTemplateDirective } from '../common/templates/footer-template.directive';
import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
import { Direction } from '../common/models/direction';
import { PreventableEvent } from '../common/models/preventable-event';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { PopupService, PopupRef } from '@progress/kendo-angular-popup';
import { ItemDisabledFn } from '../common/disabled-items/item-disabled';
import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
import { DataService } from '../common/data.service';
import { FilterableComponent } from '../common/filtering/filterable-component';
import { ListComponent } from '../common/list.component';
import { VirtualizationSettings } from '../common/models/virtualization-settings';
import { PageChangeEvent } from '../common/models/page-change-event';
import { DropDownSize } from '../common/models/size';
import { DropDownRounded } from '../common/models/rounded';
import { DropDownFillMode } from '../common/models/fillmode';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
import { TextBoxComponent } from '@progress/kendo-angular-inputs';
import { ResponsiveRendererComponent } from '../common/action-sheet.component';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export declare const DROPDOWNLIST_VALUE_ACCESSOR: any;
/**
* Represents the [Kendo UI DropDownList component for Angular]({% slug overview_ddl %}).
*
* @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, AfterViewInit, OnDestroy, OnChanges, AfterContentChecked, OnInit, FilterableComponent {
wrapper: ElementRef;
private localization;
private popupService;
private selectionService;
private navigationService;
private disabledItemsService;
private dataService;
private _zone;
private renderer;
private cdr;
private injector;
private adaptiveService;
/**
* @hidden
*/
touchEnabled: any;
/**
* @hidden
*/
animationDuration: number;
/**
* @hidden
*/
xIcon: SVGIcon;
/**
* @hidden
*/
searchIcon: SVGIcon;
/**
* @hidden
*/
caretAltDownSVGIcon: SVGIcon;
/**
* @hidden
*/
customIconClass: string;
/**
* @hidden
*/
responsiveRendererComponent: ResponsiveRendererComponent;
/**
* @hidden
*/
get actionSheet(): ActionSheetComponent;
/**
* @hidden
*/
get actionSheetSearchBar(): TextBoxComponent;
get width(): any;
get height(): any;
get widgetTabIndex(): number;
get ariaActivedescendant(): string;
get appendTo(): ViewContainerRef;
/**
* @hidden
*/
onFilterChange(text: string): void;
/**
* @hidden
*/
get ariaLive(): string;
/**
* Shows or hides the current group sticky header when using grouped data.
* By default the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
*/
showStickyHeader: boolean;
/**
* @hidden
*/
icon: string;
/**
* @hidden
*/
svgIcon: SVGIcon;
/**
* 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.
*/
set data(data: any);
get 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.
*/
set value(newValue: any);
get value(): any;
/**
* Sets the data item field that represents the item text.
* If the data contains only primitive values, do not define it.
*
* > The `textField` property can be set to point to a nested property value - e.g. `category.name`.
*/
textField: string;
/**
* Sets the data item field that represents the item value.
* If the data contains only primitive values, do not define it.
*
* > The `valueField` property can be set to point to a nested property value - e.g. `category.id`.
*/
valueField: string;
/**
* Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
*/
adaptiveMode: AdaptiveMode;
/**
* Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
* By default the ActionSheet title uses the text provided for the label of the AutoComplete.
*/
title: string;
/**
* Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
* By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
*/
subtitle: string;
/**
* @hidden
*/
get isAdaptiveModeEnabled(): boolean;
/**
* @hidden
*/
windowSize: AdaptiveSize;
/**
* @hidden
*/
get isActionSheetExpanded(): boolean;
/**
* @hidden
*/
get isAdaptive(): boolean;
/**
* 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 | 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 and no item labels are wrapped. The `auto` mode is not supported when virtual scrolling is enabled.
* - `height: Number`—Sets the height of the popup container.
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
* - `appendTo: "root" | "component" | ViewContainerRef`—Specifies the component to which the popup will be appended.
*/
set popupSettings(settings: PopupSettings);
get popupSettings(): PopupSettings;
/**
* Sets the height of the options list in the popup. By default, `listHeight` is 200px.
*
* > The `listHeight` property affects only the list of options and not the whole popup container.
* > To set the height of the popup container, use `popupSettings.height`.
*
* > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
*/
set listHeight(_listHeight: number);
get listHeight(): number;
private _listHeight;
/**
* 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. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_ddl#toc-managing-the-dropdownlist-disabled-state-in-reactive-forms).
*/
disabled: boolean;
/**
* Defines a Boolean function that is executed for each data item in the component
* ([see examples]({% slug disableditems_ddl %})). Determines whether the item will be disabled.
*/
set itemDisabled(fn: ItemDisabledFn);
/**
* Sets the read-only state of the component.
*
* @default false
*/
readonly: boolean;
/**
* Enables the [filtering]({% slug filtering_ddl %}) functionality of the DropDownList.
*/
filterable: boolean;
/**
* Enables the [virtualization]({% slug virtualization_ddl %}) functionality.
*/
set virtual(settings: boolean | VirtualizationSettings);
get virtual(): VirtualizationSettings;
/**
* 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
* ([more information and example]({% slug valuebinding_ddl %}#toc-primitive-values-from-object-fields)).
* If set to `true`, the selected value has to be of a primitive value.
*/
set valuePrimitive(isPrimitive: boolean);
get valuePrimitive(): boolean;
/**
* Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
tabindex: number;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* Sets the size of the component.
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*
*/
set size(size: DropDownSize);
get size(): DropDownSize;
/**
* Sets the border radius of the component.
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `full`
* * `none`
*
*/
set rounded(rounded: DropDownRounded);
get rounded(): DropDownRounded;
/**
* Sets the fillMode of the component.
*
* The possible values are:
* * `flat`
* * `solid` (default)
* * `outline`
* * `none`
*
*/
set fillMode(fillMode: DropDownFillMode);
get fillMode(): DropDownFillMode;
/**
* Toggles the left and right arrow keys navigation functionality.
* @hidden
*/
leftRightArrowsNavigation: boolean;
/**
* Fires each time the value is changed ([see example](slug:events_ddl)).
*/
valueChange: EventEmitter<any>;
/**
* Fires each time the user types in the input field
* ([see example](slug:events_ddl)).
* You can filter the source based on the passed filtration value.
* When the value of the component is programmatically changed to `ngModel` or `formControl`
* through its API or form binding, the `valueChange` event is not triggered because it
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
*/
filterChange: EventEmitter<any>;
/**
* Fires each time the item selection is changed
* ([see example](slug:events_ddl)).
*/
selectionChange: EventEmitter<any>;
/**
* Fires each time the popup is about to open
* ([see example]({% slug openstate_ddl %}#toc-preventing-opening-and-closing)).
* This event is preventable. If you cancel it, the popup will remain closed.
*/
open: EventEmitter<PreventableEvent>;
/**
* Fires after the popup has been opened.
*/
opened: EventEmitter<any>;
/**
* Fires each time the popup is about to close
* ([see example]({% slug openstate_ddl %}#toc-preventing-opening-and-closing)).
* This event is preventable. If you cancel it, the popup will remain open.
*/
close: EventEmitter<PreventableEvent>;
/**
* Fires after the popup has been closed.
*/
closed: EventEmitter<any>;
/**
* Fires each time the user focuses the DropDownList.
*/
onFocus: EventEmitter<any>;
/**
* Fires each time the DropDownList gets blurred.
*/
onBlur: EventEmitter<any>;
itemTemplate: ItemTemplateDirective;
groupTemplate: GroupTemplateDirective;
fixedGroupTemplate: FixedGroupTemplateDirective;
valueTemplate: ValueTemplateDirective;
headerTemplate: HeaderTemplateDirective;
footerTemplate: FooterTemplateDirective;
noDataTemplate: NoDataTemplateDirective;
container: ViewContainerRef;
popupTemplate: TemplateRef<any>;
optionsList: ListComponent;
/**
* @hidden
*/
blurComponent(event: FocusEvent): void;
/**
* @hidden
*/
blurFilterInput(): void;
/**
* @hidden
*/
focusComponent(event: FocusEvent): void;
/**
* @hidden
*/
onResize(): void;
hostClasses: boolean;
get isDisabledClass(): boolean | null;
get isLoading(): boolean;
/**
* @hidden
*/
focusableId: string;
get dir(): string;
get hostTabIndex(): number;
get readonlyClass(): boolean;
get readonlyAttr(): string;
get isBusy(): boolean;
role: string;
haspopup: string;
get hostAriaInvalid(): boolean | null;
/**
* @hidden
*/
keydown(event: KeyboardEvent, input?: HTMLInputElement): void;
/**
* @hidden
*/
keypress(event: any): void;
/**
* @hidden
*/
click(): void;
groupIndices: any[];
optionPrefix: string;
valueLabelId: string;
filterText: string;
listBoxId: string;
private subs;
private _isFocused;
set isFocused(isFocused: boolean);
get isFocused(): boolean;
direction: Direction;
dataItem: any;
popupRef: PopupRef;
protected onTouchedCallback: Function;
protected onChangeCallback: Function;
private popupMouseDownHandler;
private word;
private last;
private typingTimeout;
private filterFocused;
private filterBlurred;
private hostElementFocused;
private hostElementBlurred;
private touchstartDisposeHandler;
private _value;
private _open;
private _previousDataItem;
private _valuePrimitive;
private text;
private _popupSettings;
private _virtualSettings;
private _size;
private _rounded;
private _fillMode;
constructor(wrapper: ElementRef, localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, _zone: NgZone, renderer: Renderer2, cdr: ChangeDetectorRef, injector: Injector, adaptiveService: AdaptiveService);
ngOnInit(): void;
ngAfterViewInit(): void;
/**
* @hidden
* Used by the TextBoxContainer to determine if the component is empty.
*/
isEmpty(): boolean;
/**
* @hidden
*/
onFilterFocus(): void;
/**
* @hidden
*/
ngOnDestroy(): void;
/**
* @hidden
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* @hidden
*/
ngAfterContentChecked(): void;
/**
* @hidden
*/
get formControl(): FormControl;
/**
* Focuses a specific item of the DropDownList based on a provided index.
* If there is a default item it is positioned at index -1.
* If null or invalid index is provided the focus will be removed.
*/
focusItemAt(index: number): void;
/**
* Focuses the DropDownList.
*/
focus(): void;
/**
* Blurs the DropDownList.
*/
blur(): void;
/**
* Toggles the visibility of the popup or actionSheet
* ([see example]({% slug openstate_ddl %}#toc-setting-the-initially-opened-component)).
* 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;
private _toggle;
private triggerPopupEvents;
/**
* @hidden
*/
togglePopup(open: boolean): void;
/**
* Returns the current open state. Returns `true` if the popup or actionSheet is open.
*/
get isOpen(): boolean;
/**
* Resets the value of the DropDownList.
* If you use the `reset` method to clear the value of the component,
* the model will not update automatically and the `selectionChange` and `valueChange` events will not be fired.
*/
reset(): void;
/**
* @hidden
*/
messageFor(key: string): string;
/**
* @hidden
*/
writeValue(value: any): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
get selectButtonClasses(): any;
/**
* @hidden
*/
get filterInputClasses(): any;
/**
* @hidden
*/
get optionLabelSizeClass(): any;
/**
* @hidden
*/
get listContainerClasses(): Object;
/**
* @hidden
*/
get isDisabledDefaultItem(): boolean;
/**
* @hidden
*/
getText(): any;
/**
* @hidden
*/
getDefaultItemText(): any;
private createPopup;
private destroyPopup;
private updateState;
private clearState;
private resetSelection;
private onSelectionChange;
private subscribeEvents;
private setAriaactivedescendant;
private subscribeTouchEvents;
private subscribeFocusEvents;
private unSubscribeFocusEvents;
private itemFromEvent;
private currentOrDefault;
private firstFocusableIndex;
private handleEnter;
private handleEscape;
private clearFilter;
protected verifySettings(): void;
protected componentBlur(): void;
/**
* @hidden
*/
onMouseDown(event: any): void;
protected onKeyPress(event: any): void;
protected search(): void;
protected selectNext(): void;
private emitChange;
protected navigate(index: number): void;
protected findDataItem({ valueField, value }: {
valueField: string;
value: any;
}): {
dataItem: any;
index: number;
};
protected setState(): void;
/**
* @hidden
*/
handleFilter(event: any): void;
/**
* @hidden
*/
handleClick(): void;
/**
* @hidden
*/
pageChange(event: PageChangeEvent): void;
private assignAriaDescribedBy;
private setComponentClasses;
private closeActionSheet;
private openActionSheet;
static ɵfac: i0.ɵɵFactoryDeclaration<DropDownListComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DropDownListComponent, "kendo-dropdownlist", ["kendoDropDownList"], { "customIconClass": { "alias": "customIconClass"; "required": false; }; "showStickyHeader": { "alias": "showStickyHeader"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "data": { "alias": "data"; "required": false; }; "value": { "alias": "value"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "listHeight": { "alias": "listHeight"; "required": false; }; "defaultItem": { "alias": "defaultItem"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "virtual": { "alias": "virtual"; "required": false; }; "ignoreCase": { "alias": "ignoreCase"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "valuePrimitive": { "alias": "valuePrimitive"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "leftRightArrowsNavigation": { "alias": "leftRightArrowsNavigation"; "required": false; }; "focusableId": { "alias": "id"; "required": false; }; }, { "valueChange": "valueChange"; "filterChange": "filterChange"; "selectionChange": "selectionChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate", "groupTemplate", "fixedGroupTemplate", "valueTemplate", "headerTemplate", "footerTemplate", "noDataTemplate"], never, true, never>;
}