/**----------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import * as i0 from '@angular/core'; import { EventEmitter, TemplateRef, OnChanges, OnInit, AfterViewInit, OnDestroy, ElementRef, ChangeDetectorRef, ViewContainerRef, TrackByFunction, NgZone, Renderer2, SimpleChanges, ComponentRef, AfterContentInit } from '@angular/core'; import { LocalizationService, ComponentMessages } from '@progress/kendo-angular-l10n'; import { Subject, Observable, BehaviorSubject, Subscription } from 'rxjs'; import { SVGIcon } from '@progress/kendo-svg-icons'; import { TextBoxComponent } from '@progress/kendo-angular-inputs'; import { Draggable } from '@progress/kendo-draggable'; /** * Represents the checked state of the CheckBox component. */ type CheckedState = 'none' | 'indeterminate' | 'checked'; /** * @hidden */ declare class DataChangeNotificationService { readonly changes: EventEmitter; notify(): void; } /** * @hidden */ declare class ExpandStateService { changes: Subject<{ dataItem: any; expand: boolean; index: string; }>; expand(index: any, dataItem: any): void; collapse(index: any, dataItem: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @hidden */ interface NavigationItem { id: number; children: NavigationItem[]; index: string; parent: NavigationItem; disabled: boolean; visible: boolean; loadMoreButton: boolean; } /** * @hidden */ declare class NavigationModel { private ib; private nodes; firstVisibleNode(): NavigationItem; lastVisibleNode(): NavigationItem; closestNode(index: string): NavigationItem; firstFocusableNode(): NavigationItem; findNode(index: string): NavigationItem; findParent(index: string): NavigationItem; findVisibleChild(index: string): NavigationItem; findVisiblePrev(item: NavigationItem): NavigationItem; findVisibleNext(item: NavigationItem): NavigationItem; registerItem(id: number, index: string, disabled: boolean, loadMoreButton?: boolean, visible?: boolean): void; unregisterItem(id: number, index: string): void; private childLevel; private container; private find; private insert; private visibleSibling; } /** * @hidden */ interface NavigationState { expand: boolean; isFocused: boolean; index: string; shouldScroll: boolean; shouldFocus: boolean; } /** * Represents the available selection modes of the TreeView component. * * The possible values are: * * `"single"`—Only one item can be selected at a time. * * `"multiple"`—Multiple items can be selected. */ type SelectionMode = "single" | "multiple"; /** * @hidden */ declare class NavigationService { private localization; readonly expands: Subject; readonly moves: Subject; readonly checks: Subject; readonly selects: Subject; readonly deselectAllButCurrentItem: Subject; readonly loadMore: Subject; navigable: boolean; selection: SelectionMode; isTreeViewActive: boolean; get model(): NavigationModel; set model(model: NavigationModel); actions: { [x: string]: Function; }; private activeItem; private isFocused; private shouldScroll; private shouldFocus; private _model; private get activeIndex(); private get isActiveExpanded(); private get isLoadMoreButton(); get focusableItem(): NavigationItem; constructor(localization: LocalizationService); activate(item: NavigationItem, shouldScroll?: boolean, shouldFocus?: boolean): void; activateParent(index: string, shouldFocus?: boolean): void; activateIndex(index: string, shouldFocus?: boolean): void; activateClosest(index: string): void; activateFocusable(): void; setFocusableItem(index: string): void; deactivate(): void; checkIndex(index: string): void; selectIndex(index: string): void; notifyLoadMore(index: string): void; isActive(index: string): boolean; isFocusable(index: string): boolean; isDisabled(index: string): boolean; registerItem(id: number, index: string, disabled: boolean, loadMoreButton?: boolean, visible?: boolean): void; updateItem(index: string, disabled: boolean, visible?: boolean): void; unregisterItem(id: number, index: string): void; move(e: any): void; private expand; private moveToParent; private moveToFirstVisibleChild; private notifyExpand; private notifyMove; private navigationState; private handleEnter; private handleSpace; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Represents a TreeView node. */ interface TreeItem { /** * The data item associated with the TreeView node * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection#modifying-the-selection-behavior)). */ dataItem: any; /** * The auto-generated hierarchical index of the TreeView node * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection#modifying-the-selection-behavior)). */ index: string; } /** * @hidden */ declare class NodeChildrenService { changes: Subject<{ item: TreeItem; children: TreeItem[]; }>; childrenLoaded(item: TreeItem, children: TreeItem[]): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Represents the arguments for the `nodeClick` event. */ interface NodeClickEvent { /** * The clicked `TreeItem`. */ item?: TreeItem; /** * The DOM event that triggers the node click event. */ originalEvent?: any; /** * The type of click event that occurred. */ type?: 'click' | 'contextmenu'; } /** * Represents the template for TreeView nodes ([more information and example](https://www.telerik.com/kendo-angular-ui/components/treeview/node-template)). * * Use this template to customize the content of the nodes. To define the node template, nest an `` * tag with the `kendoTreeViewNodeTemplate` directive inside a `` tag. * * The template context provides the node data item and its hierarchical index as variables: * * - `let-dataItem`—The data item for the current node. * - `let-index="index"`—The hierarchical index of the current node. * * @example * ```html * * * * {{ index }}: {{ dataItem.text }} * * * * ``` */ declare class NodeTemplateDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents a directive for customizing the load more button in the TreeView. * * To define the template, nest an `` tag with the `kendoTreeViewLoadMoreButtonTemplate` directive inside a `` tag * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#button-template)). * * The template context provides the following variable: * - `let-index="index"`—The hierarchical index of the load more button node. * * @example * ```html * * * Load more at {{ index }} * * * ``` */ declare class LoadMoreButtonTemplateDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents the attempted drop action during dragging. * Passed as `action` value to the [`kendoTreeViewDragClueTemplate`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/dragcluetemplatedirective) directive. * By default, this value defines the rendered icon in the drag clue. */ declare enum DropAction { /** * The dragged item is added as a child to the target node. */ Add = 0, /** * The dragged item is inserted above the target node at the same level. */ InsertTop = 1, /** * The dragged item is inserted below the target node at the same level. */ InsertBottom = 2, /** * The dragged item is inserted in the middle position relative to the target node. */ InsertMiddle = 3, /** * The drop action is not valid for the current target location. */ Invalid = 4 } /** * Specifies where a dragged item is dropped relative to the target item. */ declare enum DropPosition { /** * The item is dropped over the target item. */ Over = 0, /** * The item is dropped before the target item. */ Before = 1, /** * The item is dropped after the target item. */ After = 2 } /** * Defines the auto-scrolling behavior during drag-and-drop operations in the TreeView. * When enabled, the first scrollable container above the TreeView will scroll automatically * when the dragged item reaches the top or bottom edge of that container. */ interface DragAndDropScrollSettings { /** * Determines whether auto-scrolling is enabled during drag-and-drop. * * @default true */ enabled?: boolean; /** * The number of pixels to scroll per step. * * @default 1 */ step?: number; /** * The interval in milliseconds between scroll steps. * * @default 1 */ interval?: number; } /** * @hidden */ declare class PreventableEvent { private prevented; /** * Prevents the default action for a specified event. * In this way, the source component suppresses the built-in behavior that follows the event. */ preventDefault(): void; /** * If the event is prevented by any of its subscribers, returns `true`. * * @returns `true` if the default action was prevented. Otherwise, returns `false`. */ isDefaultPrevented(): boolean; } /** * Represents a node-tree lookup structure that stores information about the current node, its parent, and its children * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes#modifying-the-checked-state)). */ interface ItemLookup { /** * The current `TreeItem` instance. */ item: TreeItem; /** * The children of the current node. */ children?: TreeItem[]; /** * The parent of the current node. */ parent?: ItemLookup; } /** * Represents a node-tree lookup structure that stores information about the current node, its parent, and its children. * Used in the [`checkedChange`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#checkedchange) event of the TreeView ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes#modifying-the-checked-state)). */ interface TreeItemLookup { /** * The current `TreeItem` instance. */ item: TreeItem; /** * The lookup details for the parent of the current TreeView node. */ parent?: ItemLookup; /** * The lookup details for the children of the current TreeView node. */ children?: TreeItemLookup[]; } /** * Provides information for TreeView drag-and-drop [`addItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#additem) * and [`removeItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#removeitem) events. */ interface TreeItemAddRemoveArgs { /** * Reference to the TreeView from which the dragged item originates. */ sourceTree: TreeViewComponent; /** * Reference to the TreeView onto which the dragged item is dropped. */ destinationTree: TreeViewComponent; /** * Lookup information for the dragged item. */ sourceItem: TreeItemLookup; /** * Lookup information for the item onto which the dragged item is dropped. */ destinationItem: TreeItemLookup; /** * Represents the drop position relative to the target item. */ dropPosition: DropPosition; } /** * Arguments for the TreeView [`nodeDrop`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedrop) event. */ declare class TreeItemDropEvent extends PreventableEvent implements TreeItemAddRemoveArgs { /** * Reference to the TreeView from which the dragged item originates. */ sourceTree: TreeViewComponent; /** * Reference to the TreeView onto which the dragged item is dropped. */ destinationTree: TreeViewComponent; /** * Lookup information for the dragged item. */ sourceItem: TreeItemLookup; /** * Lookup information for the item onto which the dragged item is dropped. */ destinationItem: TreeItemLookup; /** * Represents the drop position relative to the target item. */ dropPosition: DropPosition; /** * The original pointer event containing details about the pointer position. */ originalEvent: PointerEvent; /** * @hidden */ isValid: boolean; /** * @hidden */ constructor(initializer: TreeItemAddRemoveArgs, originalEvent: PointerEvent); /** * Sets whether the drop action is valid. * If set to `false`, the `addItem` and `removeItem` events will not be fired and the drag clue * will animate back to the source item to indicate the action is invalid. */ setValid(isValid: boolean): void; } /** * Arguments for the TreeView [`nodeDragStart`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedragstart) event. */ declare class TreeItemDragStartEvent extends PreventableEvent { /** * Lookup information for the dragged item. */ sourceItem: TreeItemLookup; /** * The original pointer event containing details about the pointer position. */ originalEvent: PointerEvent; /** * @hidden */ constructor(initializer: { sourceItem: TreeItemLookup; originalEvent: PointerEvent; }); } /** * Arguments for the TreeView [`nodeDrag`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedrag) and * [`nodeDragEnd`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedragend) events. */ declare class TreeItemDragEvent { /** @hidden */ constructor(); /** * Lookup information for the dragged item. */ sourceItem: TreeItemLookup; /** * Lookup information for the item currently under the dragged node, if any. */ destinationItem: TreeItemLookup; /** * The original pointer event containing details about the pointer position. */ originalEvent: PointerEvent; } /** * Specifies the handlers called on drag-and-drop [`addItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#additem) * and [`removeItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#removeitem) events. * * Implement this interface to handle the addition and removal of items during drag-and-drop operations in the TreeView. */ interface EditService { /** * Called when an item is added via drag-and-drop. Represents the event handler of the [`addItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#additem) event. */ add: (args: TreeItemAddRemoveArgs) => void; /** * Called when an item is removed via drag-and-drop. Represents the event handler of the [`removeItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#removeitem) event. */ remove: (args: TreeItemAddRemoveArgs) => void; } /** * Represents a hierarchical node in the TreeView filter state. * Used as a lookup structure to persist information about the current node, its filter state, parent, and child nodes. * Utilized in the [`filterStateChange`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#filterstatechange) event. */ interface TreeItemFilterState { /** * The data item associated with the node. */ dataItem: any; /** * The hierarchical index of the node. */ index: string; /** * The parent of the current node. */ parent: TreeItemFilterState; /** * The child nodes of the current node. */ children?: TreeItemFilterState[]; /** * Indicates whether the node matches the current filter. */ isMatch?: boolean; /** * Determines whether the node is visible or hidden by the filter. * A node can be visible even if it does not directly match the filter. * For example, the node is visible if it is a parent of a matching node or a child of a matching node in `"lenient"` filter mode. */ visible: boolean; /** * Determines whether any child node matches the filter or contains matching nodes. */ containsMatches?: boolean; } /** * Represents the filter settings for the TreeView component. */ interface TreeViewFilterSettings { /** * Sets the filter operator for comparing values. * * You can use a string operator or a custom matcher function. * */ operator?: 'contains' | 'doesnotcontain' | 'startswith' | 'doesnotstartwith' | 'endswith' | 'doesnotendwith' | MatcherFunction; /** * Specifies if the string comparison ignores case. * * @default true */ ignoreCase?: boolean; /** * Sets the filtering mode. In `"strict"` mode, the TreeView shows only matching nodes without any child nodes. In `"lenient"` mode, the TreeView includes all child nodes of each filter match. * * @default "lenient" */ mode?: "strict" | "lenient"; } /** * Represents a function that checks if a match is valid based on a source text and a term. * * @example * ```typescript * const matcher: MatcherFunction = (dataItem: object, searchTerm: string) => dataItem.firstName.indexOf(searchTerm) >= 0; * ``` */ type MatcherFunction = (dataItem: any, term: string, ignoreCase?: boolean) => boolean; /** * Represents the current filter state of the TreeView. * Emitted by the [`filterStateChange`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#filterstatechange) event. */ interface FilterState { /** * The list of TreeView node wrappers containing metadata about the current filtered state. * Useful for custom implementations of auto-expanding nodes triggered by filtering. */ nodes: TreeItemFilterState[]; /** * The number of nodes that match the current filter term. */ matchCount: number; /** * The current filter term applied to the TreeView. */ term: string; /** * The filter settings used for the current filter operation. */ filterSettings: TreeViewFilterSettings; } /** * @hidden * * An injection token used by the data binding directives to interface with * the TreeView or the DropDownTree components. */ declare abstract class DataBoundComponent { /** * The nodes which will be displayed by the TreeView. */ abstract nodes: any[]; /** * A function which determines if a specific node has child nodes. */ abstract hasChildren: (item: object) => boolean; /** * A function which provides the child nodes for a given parent node. */ abstract children: (item: object) => Observable; /** * Specifies the handlers called on TreeView drag-and-drop `addItem` and `removeItem` events. */ abstract editService?: EditService; /** * A callback function which accepts the data object for a TreeView node and returns a boolean. * If it returns `false`, the node will not be displayed. Used for the component's built-in or custom filtering implementation. */ abstract isVisible: (item: object, index: string) => boolean; /** * Sets an initial value of the built-in input element used for filtering. */ abstract filter: string; /** * Fires when the value of the built-in filter input element changes. */ abstract filterChange: EventEmitter; /** * The fields of the data item that provide the text content of the nodes * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)). 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. */ abstract textField: string | string[]; /** * Triggers the TreeView nodes preloading mechanism. * Should be triggered after the `nodes`, `children` and `hasChildren` props are set. */ abstract preloadChildNodes?: () => void; /** * Emits when the built-in filtering mechanism in the data-binding directives updates the filtered state. * Used for the built-in auto-expand functionalities of the component and available for custom implementations. */ abstract filterStateChange?: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @hidden */ declare class SelectionService { readonly changes: Subject<{ dataItem: any; index: string; }>; private firstIndex; isFirstSelected(index: string): boolean; setFirstSelected(index: string, selected: boolean): void; select(index: string, dataItem: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @hidden */ declare class TreeViewLookupService { private map; reset(): void; registerItem(item: TreeItem, parent?: TreeItem): void; registerChildren(index: string, children: TreeItem[]): void; unregisterItem(index: string, dataItem: any): void; replaceItem(index: string, item: TreeItem, parent?: TreeItem): void; itemLookup(index: string): TreeItemLookup; hasItem(index: string): boolean; item(index: string): ItemLookup; private addToParent; private mapChildren; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Represents the arguments that the [`loadMoreNodes`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/loadmoredirective#kendotreeviewloadmore) function receives when the load more button is pressed. */ interface LoadMoreRequestArgs { /** * Provides the data item for which you request more child nodes. */ dataItem: any; /** * The number of items currently rendered. */ skip: number; /** * The recommended number of new items to load. * This value matches the [`pageSize`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/loadmoredirective#pagesize) set in the [`kendoTreeViewLoadMore`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/loadmoredirective) directive. * You can return any number of items—the page size automatically adjusts based on how many items the [`loadMoreNodes`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/loadmoredirective#kendotreeviewloadmore) function actually returns. */ take: number; } /** * @hidden */ interface LoadMoreService { /** * Specifies the callback that will be executed when the load more button is clicked. * Providing a `loadMoreNodes` function is only required when additional nodes are fetched from the server on demand. */ loadMoreNodes?: (loadMoreArgs: LoadMoreRequestArgs) => Observable; /** * Specifies the initial number of nodes that will be rendered for the specified data item children group. * Every time the load more button is clicked, the data item page size will be incremented with this number. */ getInitialPageSize: (dataItem: any) => number; /** * Gets the current page size for the targeted data item children collection. */ getGroupSize: (dataItem: any) => number; /** * Sets the current page size for the targeted data item children collection. */ setGroupSize: (dataItem: any, pageSize: number) => void; /** * Retrieves the total number of child nodes for the targeted data item. * * @param dataItem The parent item of the checked group. * @param loadedNodesCount The number of already loaded nodes via the `children` function. */ getTotalNodesCount: (dataItem: any, loadedNodesCount: number) => number; } /** * Represents the possible size options for the TreeView. */ type TreeViewSize = 'small' | 'medium' | 'large'; /** * Represents the [Kendo UI TreeView component for Angular](https://www.telerik.com/kendo-angular-ui/components/treeview). * * @example * ```html * * * ``` * * @remarks * Supported children components are: {@link CustomMessagesComponent} */ declare class TreeViewComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy, DataBoundComponent { element: ElementRef; changeDetectorRef: ChangeDetectorRef; protected expandService: ExpandStateService; protected navigationService: NavigationService; protected nodeChildrenService: NodeChildrenService; protected selectionService: SelectionService; protected treeViewLookupService: TreeViewLookupService; private ngZone; private renderer; private dataChangeNotification; private localization; /** * @hidden */ searchIcon: SVGIcon; classNames: boolean; /** @hidden */ get direction(): string; /** * @hidden */ assetsContainer: ViewContainerRef; /** * @hidden */ searchbox: TextBoxComponent; /** * Sets the placeholder text for the filter input when the component is empty. */ filterInputPlaceholder: string; /** * Allows expanding disabled nodes. * * @default false */ expandDisabledNodes: boolean; /** * Enables or disables content animation. */ set animate(value: boolean); get animate(): boolean; /** @hidden */ fetchNodes: () => BehaviorSubject; /** * Fires when the children of the expanded node are loaded. */ childrenLoaded: EventEmitter<{ children: TreeItem[]; item: TreeItem; }>; /** * Fires when the component loses focus. */ onBlur: EventEmitter; /** * Fires when the component receives focus. */ onFocus: EventEmitter; /** * Fires when a TreeView node expands. */ expand: EventEmitter; /** * Fires when a TreeView node collapses. */ collapse: EventEmitter; /** * Fires just before node dragging starts ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)). This event is preventable. * Prevent the default event to stop drag hint creation and further drag events. */ nodeDragStart: EventEmitter; /** * Fires when an item is being dragged ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)). */ nodeDrag: EventEmitter; /** * Emits when the built-in filtering mechanism updates node visibility. * Used for the built-in auto-expand functionalities. Handle this event for custom implementations. */ filterStateChange: EventEmitter; /** * Fires on the target TreeView when a dragged item is dropped ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)). * * Prevent the default event (`event.preventDefault()`) or set the event as invalid (`event.setValid(false)`) to stop the `addItem` and `removeItem` events from triggering. * * Use `preventDefault` to handle add/remove manually, or `setValid(false)` to indicate an unsuccessful operation. While `setValid(false)` animates the drag clue to its original position, `event.preventDefault()` simply removes the clue. */ nodeDrop: EventEmitter; /** * Fires on the source TreeView after the dragged item is dropped ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)). */ nodeDragEnd: EventEmitter; /** * Fires after a dragged item is dropped ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)). Called on the TreeView where the item is dropped. */ addItem: EventEmitter; /** * Fires after a dragged item is dropped ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#setup)). Called on the TreeView from where the item is dragged. */ removeItem: EventEmitter; /** * Fires when a TreeView node checkbox is selected ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes#modifying-the-checked-state)). */ checkedChange: EventEmitter; /** * Fires when a TreeView node is selected ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection#modifying-the-selection-behavior)). */ selectionChange: EventEmitter; /** * Fires when the value of the built-in filter input changes. */ filterChange: EventEmitter; /** * Fires when a TreeView node is clicked. */ nodeClick: EventEmitter; /** * Fires when a TreeView node is double-clicked. */ nodeDblClick: EventEmitter; /** * @hidden * * Queries the template for a node template declaration. * Ignored if a `[nodeTemplate]` value is explicitly provided. */ nodeTemplateQuery: NodeTemplateDirective; /** * @hidden * * Defines the template for each node. * Takes precedence over nested templates in the TreeView tag. */ set nodeTemplateRef(template: NodeTemplateDirective); get nodeTemplateRef(): NodeTemplateDirective; /** * @hidden * * Queries the template for a load-more button template declaration. * Ignored if a `[loadMoreButtonTemplate]` value is explicitly provided. */ loadMoreButtonTemplateQuery: LoadMoreButtonTemplateDirective; /** * @hidden * * Defines the template for each load-more button. * Takes precedence over nested templates in the TreeView tag. */ set loadMoreButtonTemplateRef(template: LoadMoreButtonTemplateDirective); get loadMoreButtonTemplateRef(): LoadMoreButtonTemplateDirective; /** * @hidden * * Overrides the role attribute on the load-more button element. * Used by DropDownTree to set role="treeitem" for a11y compliance. */ loadMoreButtonRole: string; /** * A function that defines how to track node changes. * By default, the TreeView tracks the nodes by data item object reference. */ trackBy: TrackByFunction; /** * The nodes displayed by the TreeView ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)). */ set nodes(value: any[]); get nodes(): any[]; /** * The fields of the data item that provide the text content of the nodes ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)). * If set to an array, each level uses the field at the same index or the last item in the array. */ textField: string | string[]; /** * A function that determines if a node has child nodes ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)). */ get hasChildren(): (item: object) => boolean; set hasChildren(callback: (item: object) => boolean); /** * A function that determines if a node is checked ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes#modifying-the-checked-state)). */ get isChecked(): (item: object, index: string) => CheckedState; set isChecked(callback: (item: object, index: string) => CheckedState); /** * A function that determines if a node is disabled. */ isDisabled: (item: object, index: string) => boolean; /** * A function that determines if a node has a checkbox. If there is no checkbox, the node is not checkable and is excluded from built-in check functionality. */ hasCheckbox: (item: object, index: string) => boolean; /** * A function that determines if a node is expanded. */ get isExpanded(): (item: object, index: string) => boolean; set isExpanded(callback: (item: object, index: string) => boolean); /** * A function that determines if a node is selected ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection#modifying-the-selection-behavior)). */ get isSelected(): (item: object, index: string) => boolean; set isSelected(callback: (item: object, index: string) => boolean); /** * A callback that determines whether a TreeView node should be rendered as hidden. Uses the `.k-hidden` utility class. Useful for custom filtering. * */ isVisible: (item: object, index: string) => boolean; /** * Enables keyboard navigation for the TreeView. * * @default true * * @remarks * This property is related to accessibility. */ navigable: boolean; /** * A function that provides the child nodes for a given parent node ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding)). */ children: (item: object) => Observable; /** * Indicates whether child nodes are fetched on expand or initally prefetched. * * @default true */ loadOnDemand: boolean; /** * Renders the built-in input element for filtering. If `true`, emits the `filterChange` event that can be handled for [manual filtering](https://www.telerik.com/kendo-angular-ui/components/treeview/filtering#manual-filtering). * Built-in filtering is available with [`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/hierarchybindingdirective) and [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/flatdatabindingdirective) directives. * * @default false */ filterable: boolean; /** * Sets the initial value of the built-in filter input. */ filter: string; /** * Sets the size of the component. * * @default undefined */ set size(size: TreeViewSize); get size(): TreeViewSize; get isActive(): boolean; /** * @hidden */ get treeviewId(): string; /** * Indicates whether only parent nodes should be disabled or their child nodes as well. * * @default false */ disableParentNodesOnly: boolean; /** * @hidden */ set loadMoreService(value: LoadMoreService); get loadMoreService(): LoadMoreService; /** * @hidden */ editService: EditService; checkboxes: boolean; expandIcons: boolean; selectable: boolean; touchActions: boolean; data: BehaviorSubject; private _animate; private _isChecked; private _isExpanded; private _isSelected; private _hasChildren; private _loadMoreService; private _nodeTemplateRef; private _loadMoreButtonTemplateRef; private _size; private subscriptions; private domSubscriptions; private _nextId; constructor(element: ElementRef, changeDetectorRef: ChangeDetectorRef, expandService: ExpandStateService, navigationService: NavigationService, nodeChildrenService: NodeChildrenService, selectionService: SelectionService, treeViewLookupService: TreeViewLookupService, ngZone: NgZone, renderer: Renderer2, dataChangeNotification: DataChangeNotificationService, localization: LocalizationService); ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; ngOnInit(): void; ngAfterViewInit(): void; /** * Blurs the focused TreeView item. */ blur(): void; /** * Focuses the first focusable item in the TreeView if no hierarchical index is provided. */ focus(index?: string): void; /** * Returns the `TreeItemLookup` node for the specified index. * * @param index - The index of the node. * @returns {TreeItemLookup} - The looked up item. */ itemLookup(index: string): TreeItemLookup; /** * Calls the [`children`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#children) function for every expanded node and fetches all rendered child nodes again. */ rebindChildren(): void; /** * Triggers the `expand` event for the provided node and shows its loading indicator. */ expandNode(item: any, index: string): void; /** * Triggers the `collapse` event for the provided node. */ collapseNode(item: any, index: string): void; /** * Gets the current page size of the data item's children collection ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#managing-page-sizes)). * Pass `null` as `dataItem` to get the root collection's page size. * * @param dataItem {any} - The parent data item of the targeted collection. * @returns {number} - The page size of the data item's children collection. */ getNodePageSize(dataItem: any): number; /** * Sets the page size of the data item's children collection ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#managing-page-sizes)). * Pass `null` as `dataItem` to set the root collection's page size. * * @param dataItem {any} - The parent data item of the targeted collection. * @param pageSize {number} - The new page size. */ setNodePageSize(dataItem: any, pageSize: number): void; /** * @hidden * * Clears the current TreeViewLookupService node map and re-registers all nodes anew. * Child nodes are acquired through the provided `children` callback. */ preloadChildNodes(): void; private attachDomHandlers; private focusHandler; private blurHandler; private clickHandler; private keydownHandler; private verifyLoadMoreService; private registerLookupItems; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Represents the available check modes for the TreeView component ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes)). * * The possible values are: * * `"single"`—Only one item can be checked at a time. * * `"multiple"`—Multiple items can be checked. */ type CheckMode = "single" | "multiple"; /** * Configures the checkbox selection behavior of the TreeView component ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes)). * */ interface CheckableSettings { /** * Determines if checkbox selection is enabled. * @default true */ enabled?: boolean; /** * Specifies the selection mode. * @default 'multiple' */ mode?: CheckMode; /** * Determines whether checking a parent node automatically checks its children. * Only applicable in multiple selection mode. * @default true */ checkChildren?: boolean; /** * Determines whether parent nodes display an indeterminate state when only some children are checked. * Only applicable in multiple selection mode. * @default true */ checkParents?: boolean; /** * Determines whether clicking a node toggles its checked state. * @default false */ checkOnClick?: boolean; /** * Determines whether disabled children are checked when their parent is checked. * Only applicable in multiple selection mode and when `checkChildren` is `true`. * @default false */ checkDisabledChildren?: boolean; /** * Determines whether collapsed children are unchecked when their parent is unchecked. * Only applicable in multiple selection mode and when [`loadOnDemand`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#loadondemand) is `true`. * @default false */ uncheckCollapsedChildren?: boolean; } /** * Represents a directive that manages the in-memory checked state of the TreeView node * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes)). * * @example * ```html * * * ``` * * @remarks * Applied to: {@link TreeViewComponent} */ declare class CheckDirective implements OnChanges, OnDestroy { protected treeView: TreeViewComponent; private zone; /** * @hidden */ set isChecked(value: (item: object, index: string) => CheckedState); /** * Defines the item key stored in the `checkedKeys` collection. */ checkKey: string | ((context: TreeItem) => any); /** * Defines the collection that stores the checked keys * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes)). */ checkedKeys: any[]; /** * Defines the checkable settings * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes#setup)). * If you do not provide a value, the default [`CheckableSettings`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/checkablesettings) apply. */ checkable: boolean | CheckableSettings | string; /** * Fires when the `checkedKeys` collection updates. */ checkedKeysChange: EventEmitter; protected subscriptions: Subscription; private get options(); private checkActions; /** * Reflects the internal `checkedKeys` state. */ private state; private clickSubscription; /** * Holds the last emitted `checkedKeys` collection. */ private lastChange; constructor(treeView: TreeViewComponent, zone: NgZone); ngOnChanges(changes: any): void; ngOnDestroy(): void; protected isItemChecked(dataItem: any, index: string): CheckedState; protected isIndexChecked(index: string): CheckedState; protected itemKey(item: TreeItem): any; protected check(e: any): void; protected checkSingle(node: any): void; protected checkMultiple(node: TreeItemLookup): void; protected toggleCheckOnClick(): void; private unsubscribeClick; private checkNode; private uncheckChildren; private checkParents; private allChildrenSelected; private notify; private addCheckedItemsChildren; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents a directive which manages the disabled in-memory state of the TreeView node * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/disabled-state)). * * @example * ```html * * * ``` * * @remarks * Applied to: {@link TreeViewComponent} */ declare class DisableDirective implements OnChanges { protected treeView: TreeViewComponent; protected cdr: ChangeDetectorRef; /** * @hidden */ set isDisabled(value: (item: object, index: string) => boolean); /** * Defines the item key that will be stored in the `disabledKeys` collection. */ disableKey: string | ((context: TreeItem) => any); /** * Defines the collection that will store the disabled keys. */ disabledKeys: any[]; constructor(treeView: TreeViewComponent, cdr: ChangeDetectorRef); ngOnChanges(changes?: any): void; protected itemKey(e: any): any; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden * * An injection token used by the expand-directive to interface with * the TreeView or the DropDownTree components. */ declare abstract class ExpandableComponent { /** * A function which determines if a specific node is expanded. */ abstract isExpanded: (item: object, index: string) => boolean; /** * Fires when the user expands a TreeView node. */ abstract expand: EventEmitter; /** * Fires when the user collapses a TreeView node. */ abstract collapse: EventEmitter; /** * Emits when the built-in filtering mechanism in the data-binding directives updates the node visibility. * Used for the built-in auto-expand functionalities of the component and available for custom implementations. */ abstract filterStateChange?: EventEmitter; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Configures the auto-expansion behavior of nodes when filtering the TreeView. */ interface FilterExpandSettings { /** * The maximum number of filter results that will be auto-expanded. * If the number of results exceeds this value, the expanded state will be reverted according to the `expandedOnClear` setting. * The default value of -1 allows any number of results to be auto-expanded. * @default -1 */ maxAutoExpandResults?: number; /** * Determines whether matching nodes expand to display their children. * Only applicable in `"lenient"` filter mode. * @default false */ expandMatches?: boolean; /** * Determines which nodes should remain expanded when the filter is cleared. The possible values are: * * `"none"`—Collapse all nodes. * * `"all"`—Expand all nodes. * * `"initial"`—Restore the expanded state from before filtering. * * `"unchanged"`—Leave the expanded state unchanged. * @default "none" */ expandedOnClear?: "all" | "none" | "initial" | "unchanged"; /** * @hidden */ enabled?: boolean; } /** * @hidden */ interface ExpandTreeItem extends TreeItem { expand: boolean; } /** * Represents a directive that manages the expanded state of the TreeView * ([see example](https://www.telerik.com/kendo-angular-ui/components/treelist/expanded-state)). * * @example * ```html * * * ``` * * @remarks * Applied to: {@link TreeViewComponent} */ declare class ExpandDirective implements OnDestroy, OnChanges { protected component: ExpandableComponent; /** * @hidden */ set isExpanded(value: (item: object, index: string) => boolean); /** * Defines the item key stored in the `expandedKeys` collection. */ expandKey: string | ((context: TreeItem) => any); /** * Specifies whether to auto-expand the nodes leading from the root node to each filter result. * To fine-tune this behavior, pass a [`FilterExpandSettings`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/filterexpandsettings) object to this input. * @default false */ expandOnFilter: boolean | FilterExpandSettings; get filterExpandSettings(): FilterExpandSettings; /** * Fires when the `expandedKeys` collection updates. */ expandedKeysChange: EventEmitter; /** * Defines the collection that stores the expanded keys. */ expandedKeys: any[]; protected subscriptions: Subscription; /** * Reflects the internal `expandedKeys` state. */ private state; private originalExpandedKeys; private isFiltered; /** * Holds the last emitted `expandedKeys` collection. */ private lastChange; constructor(component: ExpandableComponent); ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** * @hidden */ itemKey(e: TreeItem): string; protected toggleExpand({ index, dataItem, expand }: ExpandTreeItem): void; private handleAutoExpand; /** * Fills array with the correct expand keys according to wrapper metadata. */ private updateExpandedNodes; /** * Fills array with the expand key of every node. */ private getEveryExpandKey; private notify; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents the selection settings for the TreeView component. */ interface SelectableSettings { /** * Determines whether TreeView nodes can be selected. * @default true */ enabled?: boolean; /** * Specifies whether single or multiple nodes can be selected. * @default 'single' */ mode?: SelectionMode; } /** * Manages the in-memory selection state of TreeView nodes * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection)). * * @example * ```html * * * ``` * * @remarks * Applied to: {@link TreeViewComponent} */ declare class SelectDirective implements OnDestroy, OnChanges { protected treeView: TreeViewComponent; private navigationService; /** * @hidden */ set isSelected(value: (item: object, index: string) => boolean); /** * Sets the item key stored in the `selectedKeys` collection. */ selectKey: string | ((context: TreeItem) => any); /** * Sets the current selection mode * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection)). */ selection: boolean | SelectableSettings | string; /** * Defines the collection that stores the selected keys * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/selection)). */ selectedKeys: any[]; /** * Emits when the `selectedKeys` collection updates. */ selectedKeysChange: EventEmitter; get getAriaMultiselectable(): boolean | null; protected subscriptions: Subscription; private get options(); private selectActions; /** * Reflects the internal `selectedKeys` state. */ private state; /** * Holds the last emitted `selectedKeys` collection. */ private lastChange; constructor(treeView: TreeViewComponent, navigationService: NavigationService); ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; protected itemKey(e: any): any; protected select(e: any): void; protected selectSingle(node: any): void; protected selectMultiple(node: any): void; private notify; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class DragClueComponent { private cdr; hostClasses: boolean; /** * The text value of the dragged TreeView item. */ text: string; /** * The attempted operation according to the current drop target. */ action: DropAction; /** * The look-up info for the currently dragged item. */ sourceItem: TreeItemLookup; /** * The look-up info for the destination item (if hovering a valid drop target). */ destinationItem: TreeItemLookup; /** * Defines the drag clue content template. */ template: TemplateRef; posistionStyle: string; get statusIconClass(): string; get statusSVGIcon(): SVGIcon; constructor(cdr: ChangeDetectorRef); detectChanges(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @hidden */ declare abstract class DragAndDropAssetService implements OnDestroy { protected get componentRef(): ComponentRef; protected set componentRef(componentRef: ComponentRef); protected get element(): HTMLElement; protected _componentRef: ComponentRef; abstract initialize(container: ViewContainerRef, template?: TemplateRef): void; ngOnDestroy(): void; show(): void; hide(): void; move(left: number, top: number, offset?: number): void; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵprov: i0.ɵɵInjectableDeclaration>; } /** * @hidden */ declare class DragClueService extends DragAndDropAssetService { private returnAnimation; private scrollInterval; constructor(); initialize(container: ViewContainerRef, template?: TemplateRef): void; ngOnDestroy(): void; move(left: number, top: number): void; animateDragClueToElementPosition(target: HTMLElement): void; cancelReturnAnimation(): void; updateDragClueData(action: DropAction, sourceItem: TreeItemLookup, destinationItem: TreeItemLookup): void; updateText(text: string): void; /** * Triggers the first scrollable parent to scroll upwards or downwards. * Uses setInterval, so should be called outside the angular zone. */ scrollIntoView({ step, interval }: DragAndDropScrollSettings): void; /** * Cancels out the on-going scroll animation, if present. */ cancelScroll(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * @hidden */ declare class DropHintComponent { private changeDetectorRef; hostClass: boolean; /** * Defines the drag hint content template. */ template: TemplateRef; position: string; pointerEvents: string; /** * The attempted operation according to the current drop target. */ action: DropAction; /** * The look-up info for the currently dragged item. */ sourceItem: TreeItemLookup; /** * The look-up info for the destination item. */ destinationItem: TreeItemLookup; constructor(changeDetectorRef: ChangeDetectorRef); detectChanges(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @hidden */ declare class DropHintService extends DragAndDropAssetService { constructor(); initialize(container: ViewContainerRef, template?: TemplateRef): void; updateDropHintData(action: DropAction, sourceItem: TreeItemLookup, destinationItem: TreeItemLookup): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Represents the template for the TreeView drag clue when you drag an item. * * To define the drag clue template, nest an `` tag with the `kendoTreeViewDragClueTemplate` directive inside a `` tag * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#templates)). * * The template context provides the following variables: * - `let-text="text"` (`string`)—The display text of the item being dragged. * - `let-action="action"` ([`DropAction`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/dropaction))—The type of drop action that will occur. * - `let-sourceItem="sourceItem"` ([`TreeItemLookup`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeitemlookup))—The TreeView item that is being dragged from its original position. * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeitemlookup))—The TreeView item that serves as the target for the drop operation. * * @example * ```html * * * Dragging: {{ text }} * * * ``` */ declare class DragClueTemplateDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents the template for the TreeView drop hint when you drag an item. * * To define the hint template, nest an `` tag with the `kendoTreeViewDropHintTemplate` directive inside a `` tag * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#templates)). * * The template context provides the following variables: * - `let-action="action"` ([`DropAction`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/dropaction))—The drop action being performed. * - `let-sourceItem="sourceItem"` ([`TreeItemLookup`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeitemlookup))—The item being dragged. * - `let-destinationItem="destinationItem"` ([`TreeItemLookup`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeitemlookup))—The target item for the drop operation. * * @example * ```html * * * Drop action: {{ action }} * * * ``` */ declare class DropHintTemplateDirective { templateRef: TemplateRef; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents the directive that enables you to drag and drop items inside the current TreeView or between multiple linked TreeView component instances * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop)). * * Triggers the [`nodeDragStart`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedragstart), * [`nodeDrag`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedrag), * [`nodeDrop`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedrop), * [`nodeDragEnd`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#nodedragend), * [`addItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#additem) and * [`removeItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#removeitem) * events when you perform the corresponding actions. * * @example * ```html * * * ``` * * @remarks * Applied to: {@link TreeViewComponent} */ declare class DragAndDropDirective implements AfterContentInit, OnDestroy { private element; private zone; private treeview; private dragClueService; private dropHintService; /** * Specifies whether the `removeItem` event fires after the user drops an item while pressing the `ctrl` key. * If enabled, the `removeItem` event does not fire on the source TreeView * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#multiple-treeviews)). * * @default false */ allowCopy: boolean; /** * Specifies the `TreeViewComponent` instances into which the user can drop dragged items from the current `TreeViewComponent` * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#multiple-treeviews)). */ dropZoneTreeViews: TreeViewComponent[]; /** * Specifies the distance in pixels from the initial item `pointerdown` event before dragging starts. * The `nodeDragStart` and all subsequent TreeView drag events do not fire until dragging begins. * * @default 5 */ startDragAfter: number; /** * Controls the auto-scrolling behavior during drag-and-drop ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop#auto-scrolling)). * Enabled by default. To turn off auto-scrolling, set this property to `false`. * * By default, scrolling occurs by 1 pixel every 1 millisecond when the dragged item reaches the top or bottom of the scrollable container. * You can override the `step` and `interval` by providing a `DragAndDropScrollSettings` object. * * @default true */ autoScroll: boolean | DragAndDropScrollSettings; /** * @hidden */ dragClueTemplate: DragClueTemplateDirective; /** * @hidden */ dropHintTemplate: DropHintTemplateDirective; /** * @hidden */ userSelectStyle: string; protected draggable: Draggable; protected draggedItem: HTMLElement; /** * The pointer event of the last successful item pointerdown event (the draggable `press` event). * Used for determining whether the `startDragAfter` distance is covered and for the `nodeDragStart` event args. * Used also as a flag for whether a drag attempt is pending. Should be set to `null` once the dragging begins. */ protected pendingDragStartEvent: PointerEvent; private get scrollSettings(); /** * Describes the offset of the parent element if the latter has the `transform` CSS prop applied. * Transformed parents create new stacking context and the fixed children must be position based on the transformed parent. * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */ private containerOffset; constructor(element: ElementRef, zone: NgZone, treeview: TreeViewComponent, dragClueService: DragClueService, dropHintService: DropHintService); ngAfterContentInit(): void; ngOnDestroy(): void; /** * @hidden */ handlePress({ originalEvent }: any): void; /** * @hidden */ handleDrag({ originalEvent, clientX, clientY }: any): void; /** * @hidden */ handleRelease({ originalEvent, clientY }: any): void; private updateDropHintState; private updateDragClueState; private initalizeDraggable; private notifyDragStart; private notifyDrag; private notifyDrop; private notifyDragEnd; private getTargetTreeView; private disableAnimationsForNextTick; private shouldInitiateDragStart; private initiateDragStart; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare abstract class FilteringBase { protected component: DataBoundComponent; /** * Stores the unfiltered nodes */ protected filterData: TreeItemFilterState[]; protected visibleNodes: Set; protected currentFilterTerm: string; /** * The settings which are applied when performing a filter on the component's data. */ set filterSettings(settings: TreeViewFilterSettings); get filterSettings(): TreeViewFilterSettings; private _filterSettings; /** * Applies a filter and changes the visibility of the component's nodes accordingly. */ set filter(term: string); constructor(component: DataBoundComponent); /** * @hidden */ handleFilterChange(term: string): void; protected updateVisibleNodes(items: TreeItemFilterState[]): void; protected resetNodesVisibility(items: TreeItemFilterState[]): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents a directive that handles hierarchical data binding and provides built-in filtering functionality for the TreeView. * * Use this directive to bind hierarchical data where child nodes are nested within parent nodes. * The directive also enables the built-in filter input and automatic filter handling when used with the `filterable` property. * * @example * ```html * * * ``` * * @remarks * Applied to: {@link TreeViewComponent} */ declare class HierarchyBindingDirective extends FilteringBase implements OnInit { protected component: DataBoundComponent; private dragAndDropDirective?; /** * Specifies the field name of the parent node that holds the child data items. */ set childrenField(value: string); /** * Specifies the field name of the parent node that holds the child data items. */ get childrenField(): string; /** * Specifies the hierarchical data displayed by the TreeView. */ set nodes(nodes: any[]); get nodes(): any[]; protected _nodes: any[]; /** * @hidden * A callback which determines whether a TreeView node should be rendered as hidden. */ set isVisible(fn: (item: object, index: string) => boolean); /** * @hidden */ loadOnDemand: boolean; /** * @hidden */ originalData: any[]; private _childrenField; constructor(component: DataBoundComponent, dragAndDropDirective?: DragAndDropDirective); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; /** * @hidden */ updateNodes(values: any[]): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents a directive that handles flat data binding and provides built-in filtering functionality for the TreeView. * * Use this directive to bind flat data where parent-child relationships are defined by ID fields. * The directive also enables the built-in filter input and automatic filter handling when used with the `filterable` property. * * @example * ```html * * * ``` * * @remarks * Applied to: {@link TreeViewComponent} */ declare class FlatDataBindingDirective extends FilteringBase implements OnInit, OnChanges { protected component: DataBoundComponent; /** * Specifies the flat data collection that renders as nodes in the TreeView. */ set nodes(nodes: any[]); get nodes(): any[]; protected _nodes: any[]; /** * Specifies the field name that contains the parent node identifier. */ parentIdField: string; /** * Specifies the field name that contains the unique node identifier. */ idField: string; /** * @hidden */ loadOnDemand: boolean; /** * @hidden * A callback which determines whether a TreeView node should be rendered as hidden. */ set isVisible(fn: (item: object, index: string) => boolean); /** * @hidden */ originalData: any[]; constructor(component: DataBoundComponent); /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngOnChanges(changes: SimpleChanges): void; /** * @hidden */ updateNodes(values: any[]): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents the directive that enables you to update the initially provided data array during drag-and-drop. * * Use this directive with one of the data-binding directives ([`kendoTreeViewHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/hierarchybindingdirective) * or [`kendoTreeViewFlatDataBinding`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/flatdatabindingdirective)), which set their own edit handlers, or provide * your own [`editService`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/editservice) to this directive. * * Providing a custom `editService` allows you to handle the * [`addItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#additem) and [`removeItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#removeitem) * events when they are triggered by the TreeView component. * * @example * ```html * * * ``` * * @remarks * Applied to: {@link TreeViewComponent} */ declare class DragAndDropEditingDirective implements OnDestroy { private treeview; /** * Specifies the handlers called on drag-and-drop [`addItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#additem) * and [`removeItem`](https://www.telerik.com/kendo-angular-ui/components/treeview/api/treeviewcomponent#removeitem) events. */ set editService(service: EditService); private subscriptions; constructor(treeview: TreeViewComponent); ngOnDestroy(): void; private handleAdd; private handleRemove; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents the directive that enables you to display only a limited number of nodes per level * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button)). * * @example * ```html * * * ``` * * @remarks * Applied to: {@link TreeViewComponent} */ declare class LoadMoreDirective { private treeview; /** * Sets the callback function that runs when the load more button is clicked. * Provide a function when you fetch additional nodes on demand * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#remote-data)). * */ set loadMoreNodes(loadMoreNodes: ((loadMoreArgs: LoadMoreRequestArgs) => Observable) | string); /** * Sets the initial number of nodes to render on each level. * Each time the load more button is clicked, the page size increases by this number. */ pageSize: number; /** * Sets the total number of root nodes. * Use this property when you fetch additional nodes on demand * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#remote-data)). */ totalRootNodes: number; /** * Sets the field that contains the total number of child nodes for the data item. * Use this property when you fetch additional nodes on demand * ([see example](https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button#remote-data)). */ totalField: string; /** * Keeps track of the current page size of each node over expand/collapse cycles. */ private pageSizes; /** * Used as an identifier for the root page size as the root collection of nodes is not associated with a data item. */ private rootLevelId; constructor(treeview: TreeViewComponent); ngOnChanges(): void; private verifySettings; private getGroupSize; private setGroupSize; private getTotalNodesCount; private getInitalPageSize; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @hidden */ declare class TreeViewMessages extends ComponentMessages { /** * Sets the text for the `Load More` button title. */ loadMore: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Represents the custom messages component of the TreeView. * * Use this component to override default messages for the TreeView. * * @example * ```html * * * * * ``` */ declare class CustomMessagesComponent extends TreeViewMessages { protected service: LocalizationService; constructor(service: LocalizationService); protected get override(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the TreeView component. * * @example * ```ts * import { NgModule } from '@angular/core'; * import { BrowserModule } from '@angular/platform-browser'; * import { TreeViewModule } from '@progress/kendo-angular-treeview'; * import { AppComponent } from './app.component'; * * @NgModule({ * imports: [BrowserModule, TreeViewModule], * declarations: [AppComponent], * bootstrap: [AppComponent] * }) * export class AppModule {} * ``` */ declare class TreeViewModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * @hidden */ declare class LocalizedMessagesDirective extends TreeViewMessages { protected service: LocalizationService; constructor(service: LocalizationService); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Use the `KENDO_TREEVIEW` utility array to add all `@progress/kendo-angular-treeview`-related components and directives to a standalone Angular component. * * @example * ```typescript * import { Component } from '@angular/core'; * import { KENDO_TREEVIEW } from '@progress/kendo-angular-treeview'; * * @Component({ * selector: 'my-app', * standalone: true, * imports: [KENDO_TREEVIEW], * template: `` * }) * export class AppComponent {} * ``` */ declare const KENDO_TREEVIEW: readonly [typeof TreeViewComponent, typeof NodeTemplateDirective, typeof CheckDirective, typeof DisableDirective, typeof ExpandDirective, typeof SelectDirective, typeof HierarchyBindingDirective, typeof FlatDataBindingDirective, typeof DragAndDropDirective, typeof DragClueTemplateDirective, typeof DropHintTemplateDirective, typeof DragAndDropEditingDirective, typeof LoadMoreDirective, typeof LoadMoreButtonTemplateDirective, typeof CustomMessagesComponent]; export { CheckDirective, CustomMessagesComponent, DataBoundComponent, DisableDirective, DragAndDropDirective, DragAndDropEditingDirective, DragClueService, DragClueTemplateDirective, DropAction, DropHintService, DropHintTemplateDirective, DropPosition, ExpandDirective, ExpandableComponent, FlatDataBindingDirective, HierarchyBindingDirective, KENDO_TREEVIEW, LoadMoreButtonTemplateDirective, LoadMoreDirective, LocalizedMessagesDirective, NodeTemplateDirective, SelectDirective, TreeItemDragEvent, TreeItemDragStartEvent, TreeItemDropEvent, TreeViewComponent, TreeViewModule }; export type { CheckMode, CheckableSettings, CheckedState, DragAndDropScrollSettings, EditService, FilterExpandSettings, FilterState, ItemLookup, LoadMoreRequestArgs, MatcherFunction, NodeClickEvent, SelectableSettings, SelectionMode, TreeItem, TreeItemAddRemoveArgs, TreeItemFilterState, TreeItemLookup, TreeViewFilterSettings, TreeViewSize };