@progress/kendo-angular-dropdowns 17.0.0-develop.9 → 17.0.0

package/{esm2020 → esm2022}/dropdowntrees/multiselecttree.component.mjs

@@ -54,229 +54,36 @@ const DEFAULT_FILL_MODE = 'solid';
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
  */
 export class MultiSelectTreeComponent {
-    constructor(injector, wrapper, popupService, renderer, navigationService, _zone, localization, cdr, lookup) {
-        this.injector = injector;
-        this.wrapper = wrapper;
-        this.popupService = popupService;
-        this.renderer = renderer;
-        this.navigationService = navigationService;
-        this._zone = _zone;
-        this.localization = localization;
-        this.cdr = cdr;
-        this.lookup = lookup;
-        /**
-         * @hidden
-         */
-        this.touchEnabled = touchEnabled;
-        /**
-         * @hidden
-         */
-        this.animationDuration = animationDuration;
-        /**
-         * @hidden
-         */
-        this.searchIcon = searchIcon;
-        /**
-         * @hidden
-         */
-        this.xIcon = xIcon;
-        this.hostClasses = true;
-        this.treeViewId = `k-${guid()}`;
-        this.role = 'combobox';
-        this.ariaHasPopup = 'tree';
-        /**
-         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
-         */
-        this.adaptiveMode = 'none';
-        /**
-         * 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.
-         */
-        this.title = '';
-        /**
-        * @hidden
-        */
-        this.windowSize = 'large';
-        /**
-         * @hidden
-         */
-        this.isActionSheetExpanded = false;
-        /**
-         * 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.
-         */
-        this.valueDepth = [];
-        /**
-         * The hint which is displayed when the component is empty.
-         */
-        this.placeholder = '';
-        this._listHeight = 200;
-        /**
-         * 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).
-         */
-        this.disabled = false;
-        /**
-         * Sets the read-only state of the component.
-         *
-         * @default false
-         */
-        this.readonly = false;
-        /**
-         * 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.
-         */
-        this.valuePrimitive = false;
-        /**
-         * Indicates whether the child nodes will be fetched on node expand or will be initially prefetched.
-         * @default false
-         */
-        this.loadOnDemand = false;
-        /**
-         * @hidden
-         *
-         * Used by the kendo-label and kendo-floatinglabel to access and associate the focusable element with the provided label via aria-labelledby.
-         */
-        this.focusableId = `k-${guid()}`;
-        /**
-         * 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
-         */
-        this.clearButton = true;
-        /**
-         * 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
-         */
-        this.filterable = false;
-        /**
-         * 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
-         */
-        this.checkAll = false;
-        /**
-         * A function which determines if a specific node has child nodes.
-         */
-        this.hasChildren = hasChildren;
-        /**
-         * A function which provides the child nodes for a given parent node.
-         */
-        this.fetchChildren = fetchChildren;
-        /**
-         * 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.
-         */
-        this.isNodeVisible = isNodeVisible;
-        /**
-         * A function that is executed for each data item and determines if a specific item is disabled.
-         */
-        this.itemDisabled = itemDisabled;
-        /**
-         * 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.
-         */
-        this.tagMapper = (tags) => tags || [];
-        /**
-         * Fires each time the user focuses the MultiSelectTree.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the MultiSelectTree gets blurred.
-         */
-        this.onBlur = new 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.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires after the popup has been opened.
-         */
-        this.opened = new 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.
-         */
-        this.close = new EventEmitter();
-        /**
-         * Fires after the popup has been closed.
-         */
-        this.closed = new EventEmitter();
-        /**
-         * Fires when the user expands a node in the popup TreeView.
-         */
-        this.nodeExpand = new EventEmitter();
-        /**
-         * Fires when the user collapses a node in the popup TreeView.
-         */
-        this.nodeCollapse = new EventEmitter();
-        /**
-         * Fires each time the value is changed
-         * ([see example](slug:events_multiselecttree)).
-         */
-        this.valueChange = new 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.
-         */
-        this.removeTag = new EventEmitter();
-        /**
-         * Fires when the value of the built-in filter input element changes.
-         */
-        this.filterChange = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.filterStateChange = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.filter = '';
-        /**
-         * @hidden
-         */
-        this.checkedItems = [];
-        /**
-         * @hidden
-         */
-        this.showAfter = 0;
-        /**
-         * @hidden
-         */
-        this.allNodesHidden = false;
-        this.tagListId = `k-${guid()}`;
-        this.tagPrefix = "tag-" + guid();
-        this.focusedTagIndex = undefined;
-        this._value = [];
-        this._tabindex = 0;
-        this._popupSettings = DEFAULT_POPUP_SETTINGS;
-        this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
-        this._isFocused = false;
-        this._initiallyCheckedItems = [];
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
-        this._searchableNodes = [];
-        this._typedValue = '';
-        this.printableCharacters = new Subject();
-        this.subs = new Subscription();
-        this.lastAction = 'check';
-        this.onTouchedCallback = noop;
-        this.onChangeCallback = noop;
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subscribeEvents();
-        this.subscribeFocusEvents();
-    }
+    injector;
+    wrapper;
+    popupService;
+    renderer;
+    navigationService;
+    _zone;
+    localization;
+    cdr;
+    lookup;
+    /**
+     * @hidden
+     */
+    touchEnabled = touchEnabled;
+    /**
+     * @hidden
+     */
+    animationDuration = animationDuration;
+    /**
+     * @hidden
+     */
+    searchIcon = searchIcon;
+    /**
+     * @hidden
+     */
+    xIcon = xIcon;
+    hostClasses = true;
     get isDisabled() {
         return this.disabled || null;
     }
+    treeViewId = `k-${guid()}`;
     get hostAriaAutocomplete() {
         return this.filterable ? 'list' : null;
     }
@@ -292,9 +99,12 @@ export class MultiSelectTreeComponent {
     get id() {
         return this.focusableId;
     }
+    direction;
     get hostTabIndex() {
         return this.tabindex;
     }
+    role = 'combobox';
+    ariaHasPopup = 'tree';
     get isReadonly() {
         return this.readonly ? '' : null;
     }
@@ -332,6 +142,15 @@ export class MultiSelectTreeComponent {
     onCollapse() {
         this.isActionSheetExpanded = false;
     }
+    /**
+     * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+     */
+    adaptiveMode = 'none';
+    /**
+     * 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 = '';
     /**
      * 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.
@@ -348,6 +167,14 @@ export class MultiSelectTreeComponent {
     get isAdaptiveModeEnabled() {
         return this.adaptiveMode === 'auto';
     }
+    /**
+    * @hidden
+    */
+    windowSize = 'large';
+    /**
+     * @hidden
+     */
+    isActionSheetExpanded = false;
     /**
      * @hidden
      */
@@ -384,6 +211,10 @@ export class MultiSelectTreeComponent {
             this.treeview?.element.nativeElement.dispatchEvent(spaceKeyDownEvent);
         }
     }
+    /**
+     * @hidden
+     */
+    responsiveRendererComponent;
     /**
      * @hidden
      */
@@ -402,6 +233,14 @@ export class MultiSelectTreeComponent {
     get isAdaptive() {
         return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
     }
+    headerTemplate;
+    footerTemplate;
+    nodeTemplate;
+    noDataTemplate;
+    tagTemplate;
+    groupTagTemplate;
+    popupTemplate;
+    container;
     set treeview(treeview) {
         this._treeview = treeview;
         if (treeview) {
@@ -422,6 +261,8 @@ export class MultiSelectTreeComponent {
     get treeview() {
         return this._treeview;
     }
+    filterInput;
+    checkAllInput;
     /**
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
@@ -587,6 +428,37 @@ export class MultiSelectTreeComponent {
             };
         });
     }
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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 = [];
+    /**
+     * Sets and gets the loading state of the MultiSelectTree.
+     */
+    loading;
+    /**
+     * The hint which is displayed when the component is empty.
+     */
+    placeholder = '';
     /**
      * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
      *
@@ -604,6 +476,131 @@ export class MultiSelectTreeComponent {
         }
         return this._listHeight;
     }
+    _listHeight = 200;
+    /**
+     * 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 = false;
+    /**
+     * Sets the read-only state of the component.
+     *
+     * @default false
+     */
+    readonly = false;
+    /**
+     * 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 = false;
+    /**
+     * Indicates whether the child nodes will be fetched on node expand or will be initially prefetched.
+     * @default false
+     */
+    loadOnDemand = false;
+    /**
+     * @hidden
+     *
+     * Used by the kendo-label and kendo-floatinglabel to access and associate the focusable element with the provided label via aria-labelledby.
+     */
+    focusableId = `k-${guid()}`;
+    /**
+     * 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 = true;
+    /**
+     * 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 = false;
+    /**
+     * 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 = false;
+    /**
+     * A function which determines if a specific node has child nodes.
+     */
+    hasChildren = hasChildren;
+    /**
+     * A function which provides the child nodes for a given parent node.
+     */
+    fetchChildren = fetchChildren;
+    /**
+     * A function that is executed for each data item and determines if a specific node is expanded.
+     */
+    isNodeExpanded;
+    /**
+     * 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 = isNodeVisible;
+    /**
+     * A function that is executed for each data item and determines if a specific item is disabled.
+     */
+    itemDisabled = itemDisabled;
+    /**
+     * 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) => tags || [];
+    /**
+     * Fires each time the user focuses the MultiSelectTree.
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time the MultiSelectTree gets blurred.
+     */
+    onBlur = new 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 = new EventEmitter();
+    /**
+     * Fires after the popup has been opened.
+     */
+    opened = new 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 = new EventEmitter();
+    /**
+     * Fires after the popup has been closed.
+     */
+    closed = new EventEmitter();
+    /**
+     * Fires when the user expands a node in the popup TreeView.
+     */
+    nodeExpand = new EventEmitter();
+    /**
+     * Fires when the user collapses a node in the popup TreeView.
+     */
+    nodeCollapse = new EventEmitter();
+    /**
+     * Fires each time the value is changed
+     * ([see example](slug:events_multiselecttree)).
+     */
+    valueChange = new 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 = new EventEmitter();
+    /**
+     * Fires when the value of the built-in filter input element changes.
+     */
+    filterChange = new EventEmitter();
     /**
      * @hidden
      */
@@ -752,6 +749,76 @@ export class MultiSelectTreeComponent {
             popupWrapper.style.width = max;
         }
     }
+    /**
+     * @hidden
+     */
+    filterStateChange = new EventEmitter();
+    /**
+     * @hidden
+     */
+    filter = '';
+    /**
+     * @hidden
+     */
+    checkedItems = [];
+    /**
+     * @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 0 (no leveling required),
+     * else the key consists of the item's value and level (depth)
+     */
+    isHeterogeneous;
+    /**
+     * @hidden
+     */
+    showAfter = 0;
+    /**
+     * @hidden
+     */
+    allNodesHidden = false;
+    tagListId = `k-${guid()}`;
+    tagPrefix = "tag-" + guid();
+    popupRef;
+    tags;
+    focusedTagIndex = undefined;
+    disabledIndices;
+    _subtitle;
+    _nodes;
+    _value = [];
+    _tabindex = 0;
+    _popupSettings = DEFAULT_POPUP_SETTINGS;
+    _checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
+    _isFocused = false;
+    _treeview;
+    _dataItems;
+    _tempValue;
+    _initiallyCheckedItems = [];
+    _size = 'medium';
+    _rounded = 'medium';
+    _fillMode = 'solid';
+    _searchableNodes = [];
+    _typedValue = '';
+    printableCharacters = new Subject();
+    subs = new Subscription();
+    // Keep an instance of the last focused node for when the popup close is prevented
+    // in order to be able to properly restore the focus
+    lastNodeOnFocus;
+    // Used as check to avoid unnecessary 'registerLookupItems()' calls upon initialization
+    isContentInit;
+    constructor(injector, wrapper, popupService, renderer, navigationService, _zone, localization, cdr, lookup) {
+        this.injector = injector;
+        this.wrapper = wrapper;
+        this.popupService = popupService;
+        this.renderer = renderer;
+        this.navigationService = navigationService;
+        this._zone = _zone;
+        this.localization = localization;
+        this.cdr = cdr;
+        this.lookup = lookup;
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.subscribeEvents();
+        this.subscribeFocusEvents();
+    }
     ngOnInit() {
         this.subs.add(this.printableCharacters.pipe(tap((char) => {
             this._typedValue += char;
@@ -1009,6 +1076,7 @@ export class MultiSelectTreeComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
+    lastAction = 'check';
     /**
      * @hidden
      */
@@ -1139,6 +1207,8 @@ export class MultiSelectTreeComponent {
         this.checkAllInput.nativeElement.focus();
         this.checkAllInput.nativeElement.click();
     }
+    onTouchedCallback = noop;
+    onChangeCallback = noop;
     verifySettings() {
         if (!isDevMode()) {
             return;
@@ -1569,37 +1639,36 @@ export class MultiSelectTreeComponent {
         this.opened.emit();
         this.filterable && this.actionSheetSearchBar.focus();
     }
-}
-MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i4.MultiSelectTreeLookupService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
-        LocalizationService,
-        NavigationService,
-        DataService,
-        DisabledItemsService,
-        SelectionService,
-        MultiSelectTreeLookupService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.multiselecttree'
-        },
-        {
-            multi: true,
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => MultiSelectTreeComponent)
-        },
-        {
-            provide: DataBoundComponent,
-            useExisting: forwardRef(() => MultiSelectTreeComponent)
-        },
-        {
-            provide: ExpandableComponent,
-            useExisting: forwardRef(() => MultiSelectTreeComponent)
-        },
-        {
-            provide: KendoInput,
-            useExisting: forwardRef(() => MultiSelectTreeComponent)
-        }
-    ], queries: [{ propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "nodeTemplate", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "treeview", first: true, predicate: ["treeview"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkAllInput", first: true, predicate: ["checkAllInput"], descendants: true }], exportAs: ["kendoMultiSelectTree"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i4.MultiSelectTreeLookupService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
+            LocalizationService,
+            NavigationService,
+            DataService,
+            DisabledItemsService,
+            SelectionService,
+            MultiSelectTreeLookupService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.multiselecttree'
+            },
+            {
+                multi: true,
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MultiSelectTreeComponent)
+            },
+            {
+                provide: DataBoundComponent,
+                useExisting: forwardRef(() => MultiSelectTreeComponent)
+            },
+            {
+                provide: ExpandableComponent,
+                useExisting: forwardRef(() => MultiSelectTreeComponent)
+            },
+            {
+                provide: KendoInput,
+                useExisting: forwardRef(() => MultiSelectTreeComponent)
+            }
+        ], queries: [{ propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "nodeTemplate", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "treeview", first: true, predicate: ["treeview"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkAllInput", first: true, predicate: ["checkAllInput"], descendants: true }], exportAs: ["kendoMultiSelectTree"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoMultiSelectTreeLocalizedMessages
             i18n-noDataText="kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1642,7 +1711,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             (removeTag)="handleRemoveTag($event)"
         >
         </kendo-taglist>
-        <span class="k-input-inner k-readonly">
+        <span class="k-input-inner">
             <span 
                 *ngIf="!tags || !tags.length"
                 class="k-input-value-text"
@@ -1820,7 +1889,8 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
 
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoMultiSelectTree',
@@ -1897,7 +1967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             (removeTag)="handleRemoveTag($event)"
         >
         </kendo-taglist>
-        <span class="k-input-inner k-readonly">
+        <span class="k-input-inner">
             <span 
                 *ngIf="!tags || !tags.length"
                 class="k-input-value-text"