@progress/kendo-angular-dropdowns
Version:
A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree
715 lines (714 loc) • 27 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 { AfterContentChecked, ChangeDetectorRef, ElementRef, EventEmitter, Injector, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
import { ControlValueAccessor, FormControl } from '@angular/forms';
import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { NavigationService } from '../common/navigation/navigation.service';
import { PopupRef, PopupService } from '@progress/kendo-angular-popup';
import { DataBoundComponent, ExpandableComponent, NodeClickEvent, TreeItem, TreeViewComponent } from '@progress/kendo-angular-treeview';
import { PopupSettings } from '../common/models/popup-settings';
import { MultiSelectTreeCheckableSettings } from './checked-state/checkable-settings';
import { PreventableEvent } from '../common/models/preventable-event';
import { Direction } from '../common/models/direction';
import { RemoveTagEvent } from '../common/models/remove-tag-event';
import { CheckedItem } from './checked-state/checked-item';
import { AdaptiveMode } from '../common/util';
import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
import { FooterTemplateDirective } from '../common/templates/footer-template.directive';
import { NodeTemplateDirective } from './templates/node-template.directive';
import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
import { TagTemplateDirective } from '../common/templates/tag-template.directive';
import { GroupTagTemplateDirective } from '../common/templates/group-tag-template.directive';
import { Observable } from 'rxjs';
import { DropDownSize } from '../common/models/size';
import { DropDownRounded } from '../common/models/rounded';
import { DropDownFillMode } from '../common/models/fillmode';
import { MultiSelectTreeLookupService } from './lookup/lookup.service';
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";
/**
* Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
*/
export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnChanges, AfterContentChecked, DataBoundComponent, ExpandableComponent, ControlValueAccessor {
private injector;
wrapper: ElementRef;
private popupService;
private renderer;
private navigationService;
private _zone;
private localization;
private cdr;
private lookup;
private adaptiveService;
/**
* @hidden
*/
touchEnabled: any;
/**
* @hidden
*/
animationDuration: number;
/**
* @hidden
*/
searchIcon: SVGIcon;
/**
* @hidden
*/
xIcon: SVGIcon;
hostClasses: boolean;
get isDisabled(): boolean | null;
treeViewId: string;
get hostAriaAutocomplete(): string;
get isLoading(): boolean;
get hostAriaInvalid(): boolean | null;
get isBusy(): string;
get id(): string;
direction: Direction;
get hostTabIndex(): number;
role: string;
ariaHasPopup: string;
get isReadonly(): string;
get ariaDescribedBy(): string;
get ariaActiveDescendant(): string;
/**
* @hidden
*/
get formControl(): FormControl;
/**
* @hidden
*/
onFilterChange(text: any): void;
/**
* @hidden
*/
onExpand(): void;
/**
* @hidden
*/
onCollapse(): 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 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.
*/
set subtitle(_subtitle: string);
get subtitle(): string;
/**
* @hidden
*/
get isAdaptiveModeEnabled(): boolean;
/**
* @hidden
*/
windowSize: AdaptiveSize;
/**
* @hidden
*/
isActionSheetExpanded: boolean;
/**
* @hidden
*/
handleKeydown(event: any, input?: HTMLInputElement): void;
/**
* @hidden
*/
responsiveRendererComponent: ResponsiveRendererComponent;
/**
* @hidden
*/
get actionSheet(): ActionSheetComponent;
/**
* @hidden
*/
get actionSheetSearchBar(): TextBoxComponent;
/**
* @hidden
*/
get isAdaptive(): boolean;
headerTemplate: HeaderTemplateDirective;
footerTemplate: FooterTemplateDirective;
nodeTemplate: NodeTemplateDirective;
noDataTemplate: NoDataTemplateDirective;
tagTemplate: TagTemplateDirective;
groupTagTemplate: GroupTagTemplateDirective;
popupTemplate: TemplateRef<any>;
container: ViewContainerRef;
set treeview(treeview: TreeViewComponent);
get treeview(): TreeViewComponent;
private filterInput;
private checkAllInput;
/**
* 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;
/**
* Configures the popup of the MultiSelectTree.
*
* 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;
/**
* Defines the checkable settings of the MultiSelecTree nodes.
* If no value is provided, the default [`CheckableSettings`]({% slug api_dropdowns_multiselecttreecheckablesettings %}) are applied.
*/
set checkableSettings(settings: MultiSelectTreeCheckableSettings);
get checkableSettings(): MultiSelectTreeCheckableSettings;
/**
* Sets the data of the MultiSelectTree.
*
* > 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 MultiSelectTree.
* 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(value: any[]);
get value(): any[];
/**
* Keeps the current `dataItems` object in order to resolve selection.
* Needs to be provided when when programmatically setting a `value` and `valuePrimitive` is set to `true`.
*/
set dataItems(items: any[]);
get dataItems(): any[];
/**
* The fields of the data item that provide the text content of the nodes inside the
* MultiSelectTree ([see example]({% slug databinding_multiselecttree %})). 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
* MultiSelectTree ([see example]({% slug databinding_multiselecttree %})). 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 levels in the data set where the values can be found when `valueField` is an Array.
* The field serves to correctly allocate a data item used when the MultiSelectTree is initialized with a value.
*/
valueDepth: number[];
/**
* Sets and gets the loading state of the MultiSelectTree.
*/
loading: boolean;
/**
* The hint which is displayed when the component is empty.
*/
placeholder: string;
/**
* 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_multiselecttree#toc-managing-the-multiselecttree-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_multiselecttree %}#toc-primitive-values)).
* If set to `true`, the selected value has to be a primitive one.
*/
valuePrimitive: boolean;
/**
* Indicates whether the child nodes will be fetched on node expand or will be initially prefetched.
* @default false
*/
loadOnDemand: boolean;
/**
* @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;
/**
* 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.
* @default true
*/
clearButton: boolean;
/**
* Renders the built-in input element for filtering the MultiSelectTree.
* If set to `true`, the component emits the `filterChange` event, which can be used to [filter the MultiSelectTree manually]({% slug filtering_multiselecttree %}#toc-manual-filtering).
* A built-in filtering implementation is available to use with the [`kendoMultiSelectTreeHierarchyBinding`]({% slug api_dropdowns_multiselecttreehierarchybindingdirective %}) and [`kendoMultiSelectTreeFlatBinding`]({% slug api_dropdowns_multiselecttreeflatbindingdirective %}) directives.
* @default false
*/
filterable: boolean;
/**
* If `checkАll` is set to `true` and the checkboxes are enabled, a tri-state checkbox appears above the embedded treeview.
* Clicking the checkbox checks or unchecks all enabled items of the treeview that are loaded.
* @default false
*/
checkAll: boolean;
/**
* 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[]>;
/**
* 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;
/**
* A function that is executed for each data item and determines if a specific item is disabled.
*/
itemDisabled: (item: object, index: string) => boolean;
/**
* A user-defined callback function which receives an array of selected data items and maps them to an array of tags.
*
* @param { Any[] } dataItems - The selected data items from the list.
* @returns { Any[] } - The tags that will be rendered by the component.
*/
tagMapper: (tags: any) => any;
/**
* Fires each time the user focuses the MultiSelectTree.
*/
onFocus: EventEmitter<any>;
/**
* Fires each time the MultiSelectTree gets blurred.
*/
onBlur: EventEmitter<any>;
/**
* Fires each time the popup is about to open
* ([see example]({% slug openstate_multiselecttree %})).
* 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_multiselecttree %})).
* 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 value is changed
* ([see example](slug:events_multiselecttree)).
*/
valueChange: EventEmitter<any>;
/**
* Fires each time a tag is about to be removed([see examples]({% slug summarytagmode_multiselect %}#toc-notifying-on-removing-group-tags)).
* This event is preventable. If you cancel it, the tag will not be removed.
*/
removeTag: EventEmitter<RemoveTagEvent>;
/**
* Fires when the value of the built-in filter input element changes.
*/
filterChange: EventEmitter<string>;
/**
* @hidden
*/
get focusedTagId(): string;
set isFocused(isFocused: boolean);
get isFocused(): boolean;
/**
* Returns the current open state. Returns `true` if the popup or actionSheet is open.
*/
get isOpen(): boolean;
get width(): {
min: string;
max: string;
};
get height(): string;
get appendTo(): ViewContainerRef;
/**
* @hidden
*/
get popupContainerClasses(): Object;
/**
* @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 `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 `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 `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;
private get isTagFocused();
private get isTreeViewActive();
private get isWrapperActive();
private get isFilterActive();
private get isCheckAllActive();
/**
* @hidden
*/
onResize(): void;
/**
* @hidden
*/
filterStateChange: EventEmitter<any>;
/**
* @hidden
*/
filter: string;
/**
* @hidden
*/
checkedItems: CheckedItem[];
/**
* @hidden
* The flag is needed in order to determine how to construct the items map keys.
* If `true`, then the key consists of the item's value and level (depth),
* else the key consists of the item's value and 0 (no leveling required)
*/
isHeterogeneous: boolean;
/**
* @hidden
*/
showAfter: number;
/**
* @hidden
*/
allNodesHidden: boolean;
tagListId: string;
tagPrefix: string;
popupRef: PopupRef;
tags: any[];
focusedTagIndex: number;
disabledIndices: Set<number>;
private _subtitle;
private _nodes;
private _value;
private _tabindex;
private _popupSettings;
private _checkableSettings;
private _isFocused;
private _treeview;
private _dataItems;
private _tempValue;
private _initiallyCheckedItems;
private _size;
private _rounded;
private _fillMode;
private _searchableNodes;
private _typedValue;
private printableCharacters;
private subs;
private lastNodeOnFocus;
private isContentInit;
constructor(injector: Injector, wrapper: ElementRef, popupService: PopupService, renderer: Renderer2, navigationService: NavigationService, _zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, lookup: MultiSelectTreeLookupService, adaptiveService: AdaptiveService);
ngOnInit(): void;
ngAfterViewInit(): void;
/**
* @hidden
*/
ngOnDestroy(): void;
/**
* @hidden
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* @hidden
*/
ngAfterContentChecked(): void;
/**
* @hidden
*/
applyValue(): void;
/**
* @hidden
*/
cancelValue(): void;
ngAfterContentInit(): 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;
/**
* Focuses the MultiSelectTree.
*/
focus(): void;
/**
* Blurs the MultiSelectTree.
*/
blur(): void;
/**
* Focuses a specific item of the MultiSelectTree 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;
/**
* Resets the value of the MultiSelectTree.
* 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_multiselecttree %})).
* 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;
/**
* @hidden
*/
handleFocus(event: FocusEvent): void;
/**
* @hidden
*/
handleBlur(e?: FocusEvent): void;
/**
* @hidden
*/
handleNodeClick(node: NodeClickEvent): void;
/**
* @hidden
*/
togglePopup(open: boolean): void;
/**
* @hidden
*/
messageFor(key: string): string;
lastAction: 'check' | 'uncheck';
/**
* @hidden
*/
handleCheckedItemsChange(items: CheckedItem[]): void;
/**
* @hidden
*/
handleRemoveTag({ tag, index }: {
tag: any;
index: number;
}): void;
/**
* @hidden
*/
handleTagMapperChange(showAfter: number | string): void;
/**
* @hidden
*/
clearAll(event: any): 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>): void;
/**
* @hidden
*/
get filterInputClasses(): any;
/**
* @hidden
*/
get checkAllCheckboxClasses(): any;
/**
* @hidden
*/
toggleCheckAll(): void;
protected onTouchedCallback: Function;
protected onChangeCallback: Function;
protected verifySettings(): void;
private areNodesHidden;
private emitValueChange;
private triggerPopupEvents;
private createPopup;
private destroyPopup;
private handleClick;
private subscribeEvents;
private subscribeFocusEvents;
private unSubscribeFocusEvents;
private handleDocumentBlur;
private handleTabKey;
private handleUpKey;
private handleDownKey;
private handleRightKey;
private handleLeftKey;
private handleEnd;
private handleHome;
private handleBackspace;
private handleDelete;
private unsubscribeEvents;
/**
* 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 setState;
private setTags;
private updateValue;
/**
* @hidden
*/
onChildrenLoaded(): void;
/**
* @hidden
*
* Determines which of the provided tags should be disabled and stores their position indices
*/
private disabledItemsMapper;
private setComponentClasses;
private removeParents;
/**
* Creates an internal map of the available tree items to be used as a reference
* to retrieve the item's children/parent and determine the checked sate
*/
private registerLookupItems;
private registerChildLookupItems;
private closeActionSheet;
private openActionSheet;
static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectTreeComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectTreeComponent, "kendo-multiselecttree", ["kendoMultiSelectTree"], { "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "checkableSettings": { "alias": "checkableSettings"; "required": false; }; "data": { "alias": "data"; "required": false; }; "value": { "alias": "value"; "required": false; }; "dataItems": { "alias": "dataItems"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "valueDepth": { "alias": "valueDepth"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "listHeight": { "alias": "listHeight"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "valuePrimitive": { "alias": "valuePrimitive"; "required": false; }; "loadOnDemand": { "alias": "loadOnDemand"; "required": false; }; "focusableId": { "alias": "focusableId"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "checkAll": { "alias": "checkAll"; "required": false; }; "hasChildren": { "alias": "hasChildren"; "required": false; }; "fetchChildren": { "alias": "fetchChildren"; "required": false; }; "isNodeExpanded": { "alias": "isNodeExpanded"; "required": false; }; "isNodeVisible": { "alias": "isNodeVisible"; "required": false; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; }; "tagMapper": { "alias": "tagMapper"; "required": false; }; }, { "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "valueChange": "valueChange"; "removeTag": "removeTag"; "filterChange": "filterChange"; }, ["headerTemplate", "footerTemplate", "nodeTemplate", "noDataTemplate", "tagTemplate", "groupTagTemplate"], never, true, never>;
}