@progress/kendo-angular-dropdowns 7.0.2 → 7.0.3-dev.202207081325

package/common/util.d.ts

@@ -134,7 +134,7 @@ export declare const getHierarchicalItemLevel: (index: string) => number;
  *
  * Retrieves all descendant nodes' lookups which are currently registered in the provided lookup item as a flat array.
  */
-export declare const fetchDescendentNodes: (lookup: TreeItemLookup, filterExpression?: (lookup: TreeItem) => boolean) => TreeItemLookup[];
+export declare const fetchDescendentNodes: (lookup: any, filterExpression?: (lookup: TreeItem) => boolean) => TreeItemLookup[];
 /**
  * @hidden
  *

package/dropdowntrees/checked-state/base-check.directive.d.ts

@@ -19,6 +19,13 @@ export declare abstract class BaseCheckDirective {
      * Defines the collection that will store the full checked items.
      */
     abstract checkedItems: CheckedItem[];
+    /**
+     * @hidden
+     * The flag is needed in order to determine how to construct the items map keys.
+     * If `true`, then the key consists of the item's value and 0 (no leveling required),
+     * else the key consists of the item's value and level (depth)
+     */
+    isHeterogeneous: boolean;
     /**
      * Holds a Set with just the checked item keys.
      *
@@ -34,9 +41,9 @@ export declare abstract class BaseCheckDirective {
      * 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).
      */
     private getKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseCheckDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseCheckDirective, never, never, { "valueField": "valueField"; "checkedItems": "checkedItems"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseCheckDirective, never, never, { "valueField": "valueField"; "checkedItems": "checkedItems"; "isHeterogeneous": "isHeterogeneous"; }, {}, never>;
 }

package/dropdowntrees/checked-state/checked-item.d.ts

@@ -21,4 +21,8 @@ export interface CheckedItem {
      * Used to retrieve the correct valueField, when using heterogenous data.
      */
     level?: number;
+    /**
+     * Represents a unique key identifier constructed from the item's value and level (if heterogeneous data)
+     */
+    key?: string;
 }

package/dropdowntrees/lookup/lookup.d.ts

@@ -0,0 +1,51 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export interface NormalizedTreeItem {
+    /**
+     * The original dataItem
+     */
+    dataItem?: any;
+    /**
+     * The unique item's key identifier.
+     */
+    key?: string;
+}
+/**
+ * @hidden
+ */
+export interface NormalizedItemLookup {
+    /**
+     * The current TreeItem instance
+     */
+    item: NormalizedTreeItem;
+    /**
+     * The children of the current node
+     */
+    children?: NormalizedTreeItem[];
+    /**
+     * The parent of the current node
+     */
+    parent?: NormalizedItemLookup;
+}
+/**
+ * @hidden
+ */
+export interface NormalizedTreeItemLookup {
+    /**
+     *  The current TreeItem instance.
+     */
+    item: NormalizedTreeItem;
+    /**
+     * The lookup details for the parent of the current TreeView node.
+     */
+    parent?: NormalizedItemLookup;
+    /**
+     *  The lookup details for the children of the current TreeView node.
+     */
+    children?: NormalizedTreeItemLookup[];
+}

package/dropdowntrees/lookup/lookup.service.d.ts

@@ -0,0 +1,32 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NormalizedItemLookup, NormalizedTreeItem, NormalizedTreeItemLookup } from './lookup';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare const nodeIndex: (item: NormalizedTreeItem) => string;
+/**
+ * @hidden
+ */
+export declare const buildTreeIndex: (parentIndex: string, itemIndex: string | number) => string;
+/**
+ * @hidden
+ */
+export declare const buildTreeItem: (dataItem: any, valueField: any, currentLevelIndex: number) => NormalizedTreeItem;
+/**
+ * @hidden
+ */
+export declare class MultiSelectTreeLookupService {
+    private map;
+    reset(): void;
+    registerChildren(index: string, children: NormalizedTreeItem[]): void;
+    item(index: string): NormalizedItemLookup;
+    registerItem(item: any, parent?: NormalizedTreeItem): void;
+    itemLookup(index: string): NormalizedTreeItemLookup;
+    private mapChildren;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectTreeLookupService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MultiSelectTreeLookupService>;
+}

package/dropdowntrees/multiselecttree.component.d.ts

@@ -24,6 +24,7 @@ import { Observable } from 'rxjs';
 import { DropDownSize } from '../common/models/size';
 import { DropDownRounded } from '../common/models/rounded';
 import { DropDownFillMode } from '../common/models/fillmode';
+import { MultiSelectTreeLookupService } from './lookup/lookup.service';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
@@ -36,6 +37,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     private _zone;
     private localization;
     private cdr;
+    private lookup;
     touchEnabled: boolean;
     hostClasses: boolean;
     get isDisabled(): boolean;
@@ -395,8 +397,11 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     checkedItems: CheckedItem[];
     /**
      * @hidden
+     * The flag is needed in order to determine how to construct the items map keys.
+     * If `true`, then the key consists of the item's value and 0 (no leveling required),
+     * else the key consists of the item's value and level (depth)
      */
-    checkBy: (item: any) => any;
+    isHeterogeneous: boolean;
     /**
      * @hidden
      */
@@ -424,7 +429,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     private _fillMode;
     private subscriptions;
     private lastNodeOnFocus;
-    constructor(wrapper: ElementRef, popupService: PopupService, renderer: Renderer2, navigationService: NavigationService, _zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, touchEnabled: boolean);
+    constructor(wrapper: ElementRef, popupService: PopupService, renderer: Renderer2, navigationService: NavigationService, _zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, lookup: MultiSelectTreeLookupService, touchEnabled: boolean);
     ngOnInit(): void;
     /**
      * @hidden
@@ -438,6 +443,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
      * @hidden
      */
     ngAfterContentChecked(): void;
+    ngAfterContentInit(): void;
     /**
      * @hidden
      *
@@ -581,6 +587,13 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
      */
     private disabledItemsMapper;
     private setComponentClasses;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectTreeComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
+    private removeParents;
+    /**
+     * Creates an internal map of the available tree items to be used as a reference
+     * to retrieve the item's children/parent and determine the checked sate
+     */
+    private registerLookupItems;
+    private registerChildLookupItems;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectTreeComponent, [null, null, null, null, null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectTreeComponent, "kendo-multiselecttree", ["kendoMultiSelectTree"], { "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"; }, { "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "valueChange": "valueChange"; "removeTag": "removeTag"; "filterChange": "filterChange"; }, ["headerTemplate", "footerTemplate", "nodeTemplate", "noDataTemplate", "tagTemplate", "groupTagTemplate"], never>;
 }

package/esm2015/dropdowntrees/checked-state/base-check.directive.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Directive, Input } from '@angular/core';
-import { getHierarchicalItemLevel, isArray, valueFrom } from '../../common/util';
+import { getHierarchicalItemLevel, valueFrom } from '../../common/util';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -16,48 +16,50 @@ export 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
             }] } });

package/esm2015/dropdowntrees/dropdowntree.component.js

@@ -1129,7 +1129,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </div>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i4.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: i5.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i6.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: i9.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: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4.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: i5.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i6.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: i9.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: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.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: [{

package/esm2015/dropdowntrees/lookup/lookup.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+;
+export {};

package/esm2015/dropdowntrees/lookup/lookup.service.js

@@ -0,0 +1,84 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { isPresent, valueFrom } from '../../common/util';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export const nodeIndex = (item) => (item || {}).key;
+/**
+ * @hidden
+ */
+export const buildTreeIndex = (parentIndex, itemIndex) => {
+    return [parentIndex, itemIndex].filter(part => isPresent(part)).join('_');
+};
+/**
+ * @hidden
+ */
+export const buildTreeItem = (dataItem, valueField, currentLevelIndex) => {
+    if (!isPresent(dataItem)) {
+        return null;
+    }
+    return {
+        dataItem,
+        key: valueFrom({ dataItem, level: currentLevelIndex }, valueField) + '_' + currentLevelIndex
+    };
+};
+/**
+ * @hidden
+ */
+export 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(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
+        }] });

package/esm2015/dropdowntrees/multiselecttree.component.js

@@ -13,9 +13,9 @@ import { DisabledItemsService } from '../common/disabled-items/disabled-items.se
 import { SelectionService } from '../common/selection/selection.service';
 import { PreventableEvent } from '../common/models/preventable-event';
 import { NavigationAction } from '../common/navigation/navigation-action';
-import { getFillModeClass, getRoundedClass, getSizeClass, hasProps, isArray, isObject, isObjectArray, isPresent, isUntouched, noop, parseNumber, valueFrom } from '../common/util';
 import { RemoveTagEvent } from '../common/models/remove-tag-event';
 import { MultiSelectTreeMessages } from '../common/constants/error-messages';
+import { fetchDescendentNodes, getFillModeClass, getRoundedClass, getSizeClass, hasProps, isArray, isObject, isObjectArray, isPresent, isUntouched, noop, parseNumber, valueFrom } from '../common/util';
 import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
 import { FooterTemplateDirective } from '../common/templates/footer-template.directive';
 import { NodeTemplateDirective } from './templates/node-template.directive';
@@ -25,20 +25,22 @@ import { GroupTagTemplateDirective } from '../common/templates/group-tag-templat
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
 import { merge, of } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
+import { buildTreeItem, MultiSelectTreeLookupService, nodeIndex } from './lookup/lookup.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "../common/navigation/navigation.service";
 import * as i3 from "@progress/kendo-angular-l10n";
-import * as i4 from "../common/taglist.component";
-import * as i5 from "@progress/kendo-angular-treeview";
-import * as i6 from "../common/localization/localized-messages.directive";
-import * as i7 from "@angular/common";
-import * as i8 from "@angular/forms";
-import * as i9 from "../common/filter-input.directive";
-import * as i10 from "@progress/kendo-angular-common";
-import * as i11 from "../common/templates/template-context.directive";
-import * as i12 from "./checked-state/check-all.directive";
-import * as i13 from "./checked-state/check.directive";
+import * as i4 from "./lookup/lookup.service";
+import * as i5 from "../common/taglist.component";
+import * as i6 from "@progress/kendo-angular-treeview";
+import * as i7 from "../common/localization/localized-messages.directive";
+import * as i8 from "@angular/common";
+import * as i9 from "@angular/forms";
+import * as i10 from "../common/filter-input.directive";
+import * as i11 from "@progress/kendo-angular-common";
+import * as i12 from "../common/templates/template-context.directive";
+import * as i13 from "./checked-state/check-all.directive";
+import * as i14 from "./checked-state/check.directive";
 const DEFAULT_POPUP_SETTINGS = { animate: true };
 const DEFAULT_CHECKABLE_SETTINGS = { checkChildren: true, checkOnClick: true };
 const hasChildren = () => false;
@@ -52,7 +54,7 @@ const DEFAULT_FILL_MODE = 'solid';
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
  */
 export 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;
@@ -60,6 +62,7 @@ export class MultiSelectTreeComponent {
         this._zone = _zone;
         this.localization = localization;
         this.cdr = cdr;
+        this.lookup = lookup;
         this.touchEnabled = touchEnabled;
         this.hostClasses = true;
         this.role = 'combobox';
@@ -206,10 +209,6 @@ export class MultiSelectTreeComponent {
          * @hidden
          */
         this.checkedItems = [];
-        /**
-         * @hidden
-         */
-        this.checkBy = (item) => item;
         /**
          * @hidden
          */
@@ -448,7 +447,8 @@ export 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();
@@ -457,7 +457,8 @@ export 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)
         }));
     }
     /**
@@ -614,6 +615,7 @@ export 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)) {
@@ -627,6 +629,10 @@ export 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
@@ -634,6 +640,9 @@ export class MultiSelectTreeComponent {
     ngAfterContentChecked() {
         this.verifySettings();
     }
+    ngAfterContentInit() {
+        this.registerLookupItems(this.data);
+    }
     /**
      * @hidden
      *
@@ -816,11 +825,26 @@ export 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();
         }
@@ -1196,14 +1220,53 @@ export 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(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: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.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: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i4.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'
@@ -1394,7 +1457,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             </div>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i4.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i5.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: i6.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.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: i9.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: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: i13.CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
+    `, isInline: true, components: [{ type: i5.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i6.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: i7.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.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: i10.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i11.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: i14.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: [{
@@ -1405,6 +1468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         DataService,
                         DisabledItemsService,
                         SelectionService,
+                        MultiSelectTreeLookupService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.multiselecttree'
@@ -1599,7 +1663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.Renderer2 }, { type: i2.NavigationService }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.Renderer2 }, { type: i2.NavigationService }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i4.MultiSelectTreeLookupService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1654848651,
+    publishDate: 1657286636,
     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'
 };