/**----------------------------------------------------------------------------------------- * 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; 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; /** * 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; /** * Fires each time the MultiSelectTree gets blurred. */ onBlur: EventEmitter; /** * 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; /** * Fires after the popup has been opened. */ opened: EventEmitter; /** * 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; /** * Fires after the popup has been closed. */ closed: EventEmitter; /** * Fires when the user expands a node in the popup TreeView. */ nodeExpand: EventEmitter; /** * Fires when the user collapses a node in the popup TreeView. */ nodeCollapse: EventEmitter; /** * Fires each time the value is changed * ([see example](slug:events_multiselecttree)). */ valueChange: EventEmitter; /** * 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; /** * Fires when the value of the built-in filter input element changes. */ filterChange: EventEmitter; /** * @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); get children(): (item: object) => Observable; /** * @hidden * * Alias for `nodeExpand`. Used for compatibility with the `ExpandableComponent` interface. * Required for the expand-directive. */ get expand(): EventEmitter; /** * @hidden * * Alias for `nodeCollapse`. Used for compatibility with the `ExpandableComponent` interface. * Required for the expand-directive. */ get collapse(): EventEmitter; /** * @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; /** * @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; 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): 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; static ɵcmp: i0.ɵɵComponentDeclaration; }