@progress/kendo-angular-dropdowns
Version:
A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree
643 lines (642 loc) • 23.9 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 { OnInit, OnDestroy, ElementRef, EventEmitter, NgZone, Renderer2, TemplateRef, ChangeDetectorRef, SimpleChanges, OnChanges, ViewContainerRef, AfterContentChecked, Injector } from '@angular/core';
import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils';
import { PopupRef, PopupService } from '@progress/kendo-angular-popup';
import { TreeItem, TreeViewComponent, DataBoundComponent, ExpandableComponent } from '@progress/kendo-angular-treeview';
import { ControlValueAccessor, FormControl } from '@angular/forms';
import { NavigationService } from '../common/navigation/navigation.service';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { PreventableEvent } from '../common/models/preventable-event';
import { AdaptiveMode } from '../common/util';
import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
import { PopupSettings } from '../common/models/popup-settings';
import { Direction } from '../common/models/direction';
import { Observable } from 'rxjs';
import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
import { FooterTemplateDirective } from '../common/templates/footer-template.directive';
import { NodeTemplateDirective } from './templates/node-template.directive';
import { ValueTemplateDirective } from '../common/templates/value-template.directive';
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 { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI DropDownTree component for Angular]({% slug overview_ddt %}).
* @example
* ```html
* <kendo-dropdowntree [data]="data" textField="text" valueField="value"></kendo-dropdowntree>
* ```
*
* @remarks
* Supported children components are: {@link CustomMessagesComponent}.
*/
export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChanges, AfterContentChecked, ControlValueAccessor, DataBoundComponent, ExpandableComponent {
private injector;
wrapper: ElementRef<HTMLElement>;
private popupService;
private navigationService;
private renderer;
private _zone;
private cdr;
private localization;
private adaptiveService;
/**
* @hidden
*/
icon: string;
/**
* @hidden
*/
svgIcon: SVGIcon;
/**
* @hidden
*/
touchEnabled: any;
/**
* @hidden
*/
animationDuration: number;
/**
* @hidden
*/
searchIcon: SVGIcon;
/**
* @hidden
*/
caretAltDownIcon: SVGIcon;
/**
* @hidden
*/
xIcon: SVGIcon;
/**
* @hidden
*/
adaptiveRendererComponent: AdaptiveRendererComponent;
/**
* @hidden
*/
get actionSheet(): ActionSheetComponent;
/**
* @hidden
*/
get actionSheetSearchBar(): TextBoxComponent;
hostClasses: boolean;
get isReadonly(): string;
get hostAriaInvalid(): boolean | null;
get isDisabled(): boolean | null;
get isLoading(): boolean;
get isBusy(): string;
get hostAriaControls(): string;
get id(): string;
direction: Direction;
get hostTabIndex(): number;
role: string;
ariaHasPopup: string;
get isAriaExpanded(): boolean;
get hostAriaAutocomplete(): string;
noDataTemplate: NoDataTemplateDirective;
headerTemplate: HeaderTemplateDirective;
footerTemplate: FooterTemplateDirective;
nodeTemplate: NodeTemplateDirective;
valueTemplate: ValueTemplateDirective;
popupTemplate: TemplateRef<any>;
container: ViewContainerRef;
set treeview(treeview: TreeViewComponent);
get treeview(): TreeViewComponent;
private filterInput;
/**
* Fires each time the popup is about to open
* ([see example]({% slug openstate_ddt %})).
* 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_ddt %})).
* 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 when the user expands a node in the popup TreeView.
*/
nodeExpand: EventEmitter<TreeItem>;
/**
* Fires when the user collapses a node in the popup TreeView.
*/
nodeCollapse: EventEmitter<TreeItem>;
/**
* Fires each time the user focuses the DropDownTree.
*/
onFocus: EventEmitter<any>;
/**
* Fires each time the DropDownTree gets blurred.
*/
onBlur: EventEmitter<any>;
/**
* Fires each time the value is changed
* ([see example](slug:events_ddt)).
*/
valueChange: EventEmitter<any>;
/**
* Fires when the value of the built-in filter input element changes.
*/
filterChange: EventEmitter<string>;
/**
* Sets and gets the loading state of the DropDownTree.
*/
loading: boolean;
/**
* 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;
/**
* Sets the data of the DropDownTree.
*
* > The data has to be provided in an array-like list with objects.
*/
set data(data: Object[]);
get data(): Object[];
/**
* Sets the value of the DropDownTree.
* It can either be of the primitive (string, numbers) or of the complex (objects) type.
* To define the type, use the `valuePrimitive` option.
*
*/
set value(newValue: any);
get value(): any;
/**
* The fields of the data item that provide the text content of the nodes inside the
* DropDownTree ([see example]({% slug databinding_ddt %})). If the `textField`
* input is set to an array, each hierarchical level uses the field that corresponds
* to the same index in the array, or the last item in the array.
*
* > The `textField` property can be set to point to a nested property value - e.g. `category.name`.
*/
textField: string | string[];
/**
* The fields of the data item that provide the value of the nodes inside the
* DropDownTree ([see example]({% slug databinding_ddt %})). If the `valueField`
* input is set to an array, each hierarchical level uses the field that corresponds
* to the same index in the array, or the last item in the array.
*
* > The `valueField` property can be set to point to a nested property value - e.g. `category.id`.
*/
valueField: string | string[];
/**
* Sets the level in the data set where the value can be found when `valueField` is an Array.
* The field serves to correctly allocate a data item used when the DropDownTree is initialized with a value.
*/
valueDepth: number;
/**
* A function which determines if a specific node has child nodes.
*/
hasChildren: (node: object) => boolean;
/**
* A function which provides the child nodes for a given parent node.
*/
fetchChildren: (node: object) => Observable<object[]>;
/**
* Sets the placeholder of the input element of the DropDownTree.
*/
placeholder: string;
/**
* Configures the popup of the DropDownTree.
*
* 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.
* - `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;
/**
* Keeps the current `dataItem` object in order to resolve selection.
* Needs to be provided when `value` is bound in and `valuePrimitive` is set to true.
*/
set dataItem(item: Object);
get dataItem(): Object;
/**
* 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 disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_ddt#toc-managing-the-dropdowntree-disabled-state-in-reactive-forms).
*/
disabled: boolean;
/**
* Sets the read-only state of the component.
*
* @default false
*/
readonly: boolean;
/**
* Specifies the type of the selected value
* ([more information and example]({% slug valuebinding_ddt %}#toc-primitive-values)).
* If set to `true`, the selected value has to be of a primitive value.
*/
valuePrimitive: boolean;
/**
* Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
set tabindex(value: 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;
/**
* A function that is executed for each data item and determines if a specific item is disabled.
*/
itemDisabled: (item: object, index: string) => boolean;
/**
* A function that is executed for each data item and determines if a specific node is expanded.
*/
isNodeExpanded: (item: object, index: string) => boolean;
/**
* A callback which determines whether a tree node should be rendered as hidden. The utility `.k-hidden` class is used to hide the nodes.
* Useful for custom filtering implementations.
*/
isNodeVisible: (item: object, index: string) => boolean;
/**
* Indicates whether the child nodes will be fetched on node expand or will be initially prefetched.
* @default true
*/
loadOnDemand: boolean;
/**
* Renders the built-in input element for filtering the DropDownTree.
* If set to `true`, the component emits the `filterChange` event, which can be used to [filter the DropDownTree manually]({% slug filtering_ddt %}#toc-manual-filtering).
* A built-in filtering implementation is available to use with the [`kendoDropDownTreeHierarchyBinding`]({% slug api_dropdowns_dropdowntreehierarchybindingdirective %}) and [`kendoDropDownTreeFlatBinding`]({% slug api_dropdowns_dropdowntreeflatbindingdirective %}) directives.
*/
filterable: boolean;
/**
* @hidden
*/
filter: string;
/**
* @hidden
*
* Used by the kendo-label and kendo-floatinglabel to access and associate the focusable element with the provided label via aria-labelledby.
*/
focusableId: string;
set isFocused(isFocused: boolean);
get isFocused(): boolean;
get width(): {
min: string;
max: string;
};
get height(): string;
/**
* Returns the current open state. Returns `true` if the popup or actionSheet is open.
*/
get isOpen(): boolean;
get clearButtonVisiblity(): string;
private get isFilterActive();
popupRef: PopupRef;
/**
* @hidden
*/
selectedKeys: any[];
/**
* @hidden
*/
selectBy: string;
/**
* @hidden
*/
text: string;
/**
* @hidden
*/
onFilterChange(text: string): void;
/**
* 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 DropDownTree.
*/
adaptiveTitle: string;
/**
* Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
* By default the ActionSheet does not render a subtitle.
*/
adaptiveSubtitle: string;
/**
* @hidden
*/
get isAdaptiveModeEnabled(): boolean;
/**
* @hidden
*/
windowSize: AdaptiveSize;
/**
* @hidden
*/
get isActionSheetExpanded(): boolean;
/**
* @hidden
*/
get isAdaptive(): boolean;
/**
* @hidden
*
* Alias for `isNodeExpanded`. Used for compatibility with the `ExpandableComponent` interface.
* Required for the expand-directive.
*/
set isExpanded(callback: (item: object, index: string) => boolean);
get isExpanded(): (item: object, index: string) => boolean;
/**
* @hidden
*
* Alias for `nodeExpand`. Used for compatibility with the `ExpandableComponent` interface.
* Required for the expand-directive.
*/
get expand(): EventEmitter<TreeItem>;
/**
* @hidden
*
* Alias for `nodeCollapse`. Used for compatibility with the `ExpandableComponent` interface.
* Required for the expand-directive.
*/
get collapse(): EventEmitter<TreeItem>;
/**
* @hidden
*
* Alias for `data`. Used for compatibility with the `DataBoundComponent` interface.
* Required for the data-binding directives.
*/
set nodes(nodes: any[]);
get nodes(): any[];
/**
* @hidden
*
* Alias for `fetchChildren`. Used for compatibility with the `DataBoundComponent` interface.
* Required for the data-binding directives
*/
set children(callback: (item: object) => Observable<object[]>);
get children(): (item: object) => Observable<object[]>;
/**
* @hidden
*
* Alias for `isNodeVisible`. Used for compatibility with the `DataBoundComponent` interface.
* The `DataBoundComponent` interface is used in the data-binding directives.
*/
set isVisible(callback: (item: object, index: string) => boolean);
get isVisible(): (item: object, index: string) => boolean;
/**
* @hidden
*/
filterStateChange: EventEmitter<any>;
/**
* @hidden
*/
allNodesHidden: boolean;
/**
* @hidden
*
* Used to associate the value label with the wrapper via aria-describedby.
*/
valueLabelId: string;
/**
* @hidden
*/
get formControl(): FormControl;
treeViewId: string;
private _nodes;
private _value;
private _popupSettings;
private _tabindex;
private _isFocused;
private _dataItem;
private _treeview;
private _size;
private _rounded;
private _fillMode;
private _searchableNodes;
private _typedValue;
private printableCharacters;
private subs;
private touchstartDisposeHandler;
private lastNodeOnFocus;
constructor(injector: Injector, wrapper: ElementRef<HTMLElement>, popupService: PopupService, navigationService: NavigationService, renderer: Renderer2, _zone: NgZone, cdr: ChangeDetectorRef, localization: LocalizationService, adaptiveService: AdaptiveService);
ngOnInit(): void;
/**
* @hidden
*/
ngOnDestroy(): void;
/**
* @hidden
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* @hidden
*/
ngAfterContentChecked(): void;
ngAfterViewInit(): void;
/**
* @hidden
*/
onResize(): void;
/**
* @hidden
*
* Used by the kendo-floatinglabel component to determine if the floating label
* should be rendered inside the input when the component is not focused.
*/
isEmpty(): boolean;
/**
* @hidden
*/
togglePopup(open: boolean): void;
/**
* @hidden
*/
handleFocus(event: FocusEvent): void;
/**
* @hidden
*/
handleBlur(e?: FocusEvent): void;
/**
* @hidden
*/
handleKeydown(event: any, input?: HTMLInputElement): void;
/**
* Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
* The targeted item should be expanded in order for it to be focused.
* If null or invalid index is provided the focus will be set on the first item.
*/
focusItemAt(index: string): void;
/**
* Focuses the DropDownTree.
*/
focus(): void;
/**
* Blurs the DropDownTree.
*/
blur(): void;
/**
* Resets the value of the DropDownTree.
* If you use the `reset` method to clear the value of the component,
* the model will not update automatically and the `valueChange` event will not be fired.
*/
reset(): void;
/**
* Toggles the visibility of the popup or actionSheet.
* ([see example]({% slug openstate_ddt %})).
* If you use the `toggle` method to open or close the popup or actionSheet, the `open` and `close` events will not be fired.
*
* @param open - The state of the popup.
*/
toggle(open?: boolean): void;
/**
* @hidden
*/
get popupContainerClasses(): Object;
/**
* @hidden
*/
onSelectionChange({ dataItem, index }: TreeItem): void;
/**
* @hidden
*/
messageFor(key: string): string;
/**
* @hidden
*/
clearValue(event: MouseEvent): void;
get appendTo(): ViewContainerRef;
/**
* @hidden
*/
preventEventDefault(event: Event): void;
/**
* @hidden
*/
writeValue(value: any): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
handleFilterInputChange(input: Partial<HTMLInputElement> | string): void;
/**
* @hidden
*/
get selectButtonClasses(): any;
/**
* @hidden
*/
get filterInputClasses(): any;
protected onTouchedCallback: Function;
protected onChangeCallback: Function;
protected verifySettings(): void;
private emitValueChange;
private getText;
/**
* @hidden
*/
onChildrenLoaded(): void;
/**
* @hidden
*
* Determines the `valueField` and `textField` for a specific level in the data set
* @param field - the field value (string | string[])
* @param value - current value
*/
private getField;
private areNodesHidden;
private triggerPopupEvents;
private createPopup;
private destroyPopup;
private clearFilter;
private handleClick;
private handleEscape;
private setState;
private clearState;
private subscribeEvents;
private subscribeTouchEvents;
private subscribeFocusEvents;
private unSubscribeFocusEvents;
private unsubscribeEvents;
private handleDocumentBlur;
private assignAriaDescribedBy;
private setComponentClasses;
/**
* Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
* and the user will not be able to tab to the rest of the browser elements
*/
private removeTreeViewFromTabOrder;
private closeActionSheet;
private openActionSheet;
static ɵfac: i0.ɵɵFactoryDeclaration<DropDownTreeComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DropDownTreeComponent, "kendo-dropdowntree", ["kendoDropDownTree"], { "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "data": { "alias": "data"; "required": false; }; "value": { "alias": "value"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "valueDepth": { "alias": "valueDepth"; "required": false; }; "hasChildren": { "alias": "hasChildren"; "required": false; }; "fetchChildren": { "alias": "fetchChildren"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "dataItem": { "alias": "dataItem"; "required": false; }; "listHeight": { "alias": "listHeight"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "valuePrimitive": { "alias": "valuePrimitive"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; }; "isNodeExpanded": { "alias": "isNodeExpanded"; "required": false; }; "isNodeVisible": { "alias": "isNodeVisible"; "required": false; }; "loadOnDemand": { "alias": "loadOnDemand"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "focusableId": { "alias": "focusableId"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "adaptiveSubtitle": { "alias": "adaptiveSubtitle"; "required": false; }; }, { "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "onFocus": "focus"; "onBlur": "blur"; "valueChange": "valueChange"; "filterChange": "filterChange"; }, ["noDataTemplate", "headerTemplate", "footerTemplate", "nodeTemplate", "valueTemplate"], never, true, never>;
}