@progress/kendo-angular-dropdowns 7.0.2 → 7.0.4-dev.202208041601

package/fesm2015/kendo-angular-dropdowns.js

@@ -6,7 +6,7 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, ViewChild, HostBinding, Directive, Injectable, InjectionToken, HostListener, ViewChildren, forwardRef, isDevMode, ViewContainerRef, Optional, Inject, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i9 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isChanged, hasObservers, KendoInput, anyChanged, guid as guid$1, ResizeSensorModule, EventsModule } from '@progress/kendo-angular-common';
-import * as i8 from '@angular/forms';
+import * as i12 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter as getter$1, pointers, touchEnabled } from '@progress/kendo-common';
@@ -29,7 +29,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1654848651,
+    publishDate: 1659628812,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -4231,7 +4231,7 @@ class ComboBoxComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-arrow-s';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-caret-alt-down';
     }
     /**
      * @hidden
@@ -5842,7 +5842,7 @@ class DropDownListComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-arrow-s';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-caret-alt-down';
     }
     /**
      * @hidden
@@ -6485,7 +6485,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -10425,7 +10425,7 @@ class DropDownTreeComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading k-input-loading-icon' : 'k-i-arrow-s';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : 'k-i-caret-alt-down';
     }
     /**
      * @hidden
@@ -10822,7 +10822,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </div>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "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"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -11150,6 +11150,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+const nodeIndex$1 = (item) => (item || {}).key;
+/**
+ * @hidden
+ */
+const buildTreeIndex = (parentIndex, itemIndex) => {
+    return [parentIndex, itemIndex].filter(part => isPresent(part)).join('_');
+};
+/**
+ * @hidden
+ */
+const buildTreeItem = (dataItem, valueField, currentLevelIndex) => {
+    if (!isPresent(dataItem)) {
+        return null;
+    }
+    return {
+        dataItem,
+        key: valueFrom({ dataItem, level: currentLevelIndex }, valueField) + '_' + currentLevelIndex
+    };
+};
+/**
+ * @hidden
+ */
+class MultiSelectTreeLookupService {
+    constructor() {
+        this.map = new Map();
+    }
+    reset() {
+        this.map.clear();
+    }
+    registerChildren(index, children) {
+        const item = this.item(index);
+        if (!item) {
+            return;
+        }
+        item.children = children;
+    }
+    item(index) {
+        return this.map.get(index) || null;
+    }
+    registerItem(item, parent) {
+        const currentLookup = {
+            children: [],
+            item,
+            parent: this.item(nodeIndex$1(parent))
+        };
+        this.map.set(item.key, currentLookup);
+    }
+    itemLookup(index) {
+        const item = this.item(index);
+        if (!item) {
+            return null;
+        }
+        return {
+            children: this.mapChildren(item.children),
+            item: item.item,
+            parent: item.parent
+        };
+    }
+    mapChildren(children = []) {
+        return children.map(c => {
+            const { item, parent, children } = this.item(c.key);
+            return {
+                children: this.mapChildren(children),
+                item,
+                parent
+            };
+        });
+    }
+}
+MultiSelectTreeLookupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MultiSelectTreeLookupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeLookupService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeLookupService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * @hidden
  *
@@ -11161,50 +11239,52 @@ class BaseCheckDirective {
             return;
         }
         const level = getHierarchicalItemLevel(item.index);
-        const candidate = Object.assign(Object.assign({}, item), { level });
+        const key = this.getKey(item, level);
+        const candidate = Object.assign(Object.assign({}, item), { level, key });
         this.checkedItems.push(candidate);
-        this.checkedKeys.add(this.getKey(candidate));
+        this.checkedKeys.add(key);
     }
     removeItem(item) {
         if (!this.isItemChecked(item)) {
             return;
         }
         const level = getHierarchicalItemLevel(item.index);
-        const candidate = Object.assign(Object.assign({}, item), { level });
+        const key = this.getKey(item, level);
+        const candidate = Object.assign(Object.assign({}, item), { level, key });
         this.checkedItems = this.checkedItems
             .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
-        this.checkedKeys.delete(this.getKey(candidate));
+        this.checkedKeys.delete(key);
     }
     isItemChecked(item) {
         const level = item.index.split('_').length - 1;
         item.level = level;
-        return this.checkedKeys.has(this.getKey(item));
+        const key = this.getKey(item, level);
+        return this.checkedKeys.has(key);
     }
     updateItems() {
         this.checkedItems = this.checkedItems || [];
-        this.checkedKeys = new Set(this.checkedItems.map(item => this.getKey(item)));
+        this.checkedKeys = new Set(this.checkedItems.map(item => item.key));
     }
     /**
      * Adds the item's depth to the item's value to allow duplicate values on different levels.
      *
      * @param item - The checked key.
-     * @returns { string } - A string key consisting of the item's `valueField` value and its depth.
+     * @returns { string } - A string key consisting of the item's `valueField` value and its depth (depth is 0 if data is homogeneous).
      */
-    getKey(item) {
-        if (isArray(this.valueField)) {
-            return valueFrom(item, this.valueField) + '_' + item.level;
-        }
-        return valueFrom(item, this.valueField);
+    getKey(item, level) {
+        return valueFrom(item, this.valueField) + '_' + (this.isHeterogeneous ? level : 0);
     }
 }
 BaseCheckDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseCheckDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BaseCheckDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BaseCheckDirective, inputs: { valueField: "valueField", checkedItems: "checkedItems" }, ngImport: i0 });
+BaseCheckDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BaseCheckDirective, inputs: { valueField: "valueField", checkedItems: "checkedItems", isHeterogeneous: "isHeterogeneous" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseCheckDirective, decorators: [{
             type: Directive
         }], propDecorators: { valueField: [{
                 type: Input
             }], checkedItems: [{
                 type: Input
+            }], isHeterogeneous: [{
+                type: Input
             }] } });
 
 /**
@@ -11511,7 +11591,7 @@ const DEFAULT_FILL_MODE = 'solid';
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
  */
 class MultiSelectTreeComponent {
-    constructor(wrapper, popupService, renderer, navigationService, _zone, localization, cdr, touchEnabled) {
+    constructor(wrapper, popupService, renderer, navigationService, _zone, localization, cdr, lookup, touchEnabled) {
         this.wrapper = wrapper;
         this.popupService = popupService;
         this.renderer = renderer;
@@ -11519,6 +11599,7 @@ class MultiSelectTreeComponent {
         this._zone = _zone;
         this.localization = localization;
         this.cdr = cdr;
+        this.lookup = lookup;
         this.touchEnabled = touchEnabled;
         this.hostClasses = true;
         this.role = 'combobox';
@@ -11665,10 +11746,6 @@ class MultiSelectTreeComponent {
          * @hidden
          */
         this.checkedItems = [];
-        /**
-         * @hidden
-         */
-        this.checkBy = (item) => item;
         /**
          * @hidden
          */
@@ -11907,7 +11984,8 @@ class MultiSelectTreeComponent {
             return {
                 dataItem: item,
                 index: null,
-                level: this.valueDepth[index] || 0
+                level: this.valueDepth[index] || 0,
+                key: valueFrom({ dataItem: item }, this.valueField) + '_' + (this.isHeterogeneous ? this.valueDepth[index] : 0)
             };
         });
         this.setState();
@@ -11916,7 +11994,8 @@ class MultiSelectTreeComponent {
         return this._dataItems || this.value.map((value, index) => ({
             dataItem: value,
             index: null,
-            level: this.valueDepth[index] || 0
+            level: this.valueDepth[index] || 0,
+            key: valueFrom({ dataItem: value }, this.valueField) + '_' + (this.isHeterogeneous ? this.valueDepth[index] : 0)
         }));
     }
     /**
@@ -12073,6 +12152,7 @@ class MultiSelectTreeComponent {
      */
     ngOnChanges(changes) {
         if (anyChanged(['textField', 'valueField', 'valuePrimitive'], changes, false)) {
+            this.isHeterogeneous = this.valueField && isArray(this.valueField);
             this.setState();
         }
         if (anyChanged(['valueDepth', 'value', 'dataItems'], changes, false)) {
@@ -12086,6 +12166,10 @@ class MultiSelectTreeComponent {
                 this.dataItems = this.dataItems.map((item, index) => (Object.assign(Object.assign({}, item), { level: this.valueDepth[index] || 0 })));
             }
         }
+        if (anyChanged(['data', 'children', 'hasChildren', 'loadOnDemand', 'valueField'], changes, true) && !this.loadOnDemand) {
+            this.lookup.reset();
+            this.registerLookupItems(this.data);
+        }
     }
     /**
      * @hidden
@@ -12093,6 +12177,9 @@ class MultiSelectTreeComponent {
     ngAfterContentChecked() {
         this.verifySettings();
     }
+    ngAfterContentInit() {
+        this.registerLookupItems(this.data);
+    }
     /**
      * @hidden
      *
@@ -12275,11 +12362,26 @@ class MultiSelectTreeComponent {
         }
         else {
             // Remove single tag
-            this.dataItems = this.dataItems.filter((_item, i) => i !== index || this.disabledIndices.has(i));
-            this.valueDepth = this.valueDepth.filter((_item, i) => i !== index || this.disabledIndices.has(i));
+            const dataItem = this.dataItems[index];
+            const itemKey = dataItem.key;
+            const lookup = this.lookup.itemLookup(itemKey);
+            const pendingCheck = [lookup.item];
+            if (this.checkableSettings.checkChildren) {
+                fetchDescendentNodes(lookup)
+                    .forEach(lookup => pendingCheck.push(lookup.item));
+                pendingCheck.push(...this.removeParents(lookup.parent));
+            }
+            const keysToRemove = pendingCheck.map(item => item.key);
+            const valueDepthIndices = [];
+            this.dataItems = this.dataItems.filter((_item, i) => {
+                // We need to know the index position of the data item to be able to update the valueDepth array accordignly
+                // as each data item's position is corresponding to the same position in valueDepth
+                valueDepthIndices.push(i);
+                return !keysToRemove.includes(_item.key) || this.disabledIndices.has(i);
+            });
+            this.valueDepth = this.valueDepth.filter((_item, i) => valueDepthIndices.includes(i) || this.disabledIndices.has(i));
         }
         this.updateValue(this.dataItems);
-        // focus the wrapper if the component is not focused - the floating label reacts to focus/blur
         if (!this.isFocused) {
             this.focus();
         }
@@ -12655,14 +12757,53 @@ class MultiSelectTreeComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
+    removeParents(parent) {
+        let currentParent = parent;
+        const nodes = [];
+        while (currentParent) {
+            nodes.push(currentParent.item);
+            currentParent = currentParent.parent;
+        }
+        return nodes;
+    }
+    /**
+     * Creates an internal map of the available tree items to be used as a reference
+     * to retrieve the item's children/parent and determine the checked sate
+     */
+    registerLookupItems(data, parentItem = null, levelIndex = 0) {
+        if (!isPresent(data) || data.length === 0) {
+            return;
+        }
+        const parentIndex = nodeIndex$1(parentItem);
+        const treeItems = data.map((node) => buildTreeItem(node, this.valueField, levelIndex));
+        if (isPresent(parentItem)) {
+            this.lookup.registerChildren(parentIndex, treeItems);
+        }
+        treeItems.forEach(item => {
+            this.lookup.registerItem(item, parentItem);
+            if (!this.loadOnDemand) {
+                this.registerChildLookupItems(item, levelIndex);
+            }
+        });
+    }
+    registerChildLookupItems(item, levelIndex) {
+        if (this.hasChildren(item.dataItem)) {
+            this.children(item.dataItem)
+                .subscribe(children => {
+                const index = this.isHeterogeneous ? levelIndex + 1 : 0;
+                this.registerLookupItems(children, item, index);
+            });
+        }
+    }
 }
-MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { 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: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
         LocalizationService,
         NavigationService,
         DataService,
         DisabledItemsService,
         SelectionService,
+        MultiSelectTreeLookupService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.multiselecttree'
@@ -12853,7 +12994,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             </div>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
+    `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "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"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -12864,6 +13005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         DataService,
                         DisabledItemsService,
                         SelectionService,
+                        MultiSelectTreeLookupService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.multiselecttree'
@@ -13058,7 +13200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.PopupService }, { type: i0.Renderer2 }, { type: NavigationService }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.PopupService }, { type: i0.Renderer2 }, { type: NavigationService }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: MultiSelectTreeLookupService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-angular-dropdowns",
-  "version": "7.0.2",
-  "description": "Dropdowns Package for Angular",
+  "version": "7.0.4-dev.202208041601",
+  "description": "A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree ",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
   "homepage": "https://www.telerik.com/kendo-angular-ui/components/",