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

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: 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'
 };