@progress/kendo-angular-dropdowns 5.4.0 → 5.5.0-dev.202111011140

package/dist/npm/dropdowntrees/checked-state/base-check.directive.js

@@ -0,0 +1,56 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+var util_1 = require("../../common/util");
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+var BaseCheckDirective = /** @class */ (function () {
+    function BaseCheckDirective() {
+    }
+    BaseCheckDirective.prototype.addItem = function (item) {
+        if (this.isItemChecked(item)) {
+            return;
+        }
+        var level = util_1.getHierarchicalItemLevel(item.index);
+        var candidate = tslib_1.__assign({}, item, { level: level });
+        this.checkedItems.push(candidate);
+        this.checkedKeys.add(util_1.valueFrom(candidate, this.valueField));
+    };
+    BaseCheckDirective.prototype.removeItem = function (item) {
+        var _this = this;
+        if (!this.isItemChecked(item)) {
+            return;
+        }
+        var level = util_1.getHierarchicalItemLevel(item.index);
+        var candidate = tslib_1.__assign({}, item, { level: level });
+        this.checkedItems = this.checkedItems
+            .filter(function (item) { return util_1.valueFrom(item, _this.valueField) !== util_1.valueFrom(candidate, _this.valueField); });
+        this.checkedKeys.delete(util_1.valueFrom(candidate, this.valueField));
+    };
+    BaseCheckDirective.prototype.isItemChecked = function (item) {
+        return this.checkedKeys.has(util_1.valueFrom(item, this.valueField));
+    };
+    BaseCheckDirective.prototype.updateItems = function () {
+        var _this = this;
+        this.checkedItems = this.checkedItems || [];
+        this.checkedKeys = new Set(this.checkedItems.map(function (item) { return util_1.valueFrom(item, _this.valueField); }));
+    };
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], BaseCheckDirective.prototype, "valueField", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Array)
+    ], BaseCheckDirective.prototype, "checkedItems", void 0);
+    return BaseCheckDirective;
+}());
+exports.BaseCheckDirective = BaseCheckDirective;

package/dist/npm/dropdowntrees/checked-state/check-all.directive.js

@@ -0,0 +1,183 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+var kendo_angular_treeview_1 = require("@progress/kendo-angular-treeview");
+var util_1 = require("../../common/util");
+var base_check_directive_1 = require("./base-check.directive");
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+var CheckAllDirective = /** @class */ (function (_super) {
+    tslib_1.__extends(CheckAllDirective, _super);
+    function CheckAllDirective(element, zone, cdr, renderer) {
+        var _this = _super.call(this) || this;
+        _this.element = element;
+        _this.zone = zone;
+        _this.cdr = cdr;
+        _this.renderer = renderer;
+        /**
+         * Fires when the `checkedItems` collection was updated.
+         */
+        _this.checkedItemsChange = new core_1.EventEmitter();
+        /**
+         * Holds a Set with just the checked item keys.
+         *
+         * Should be updated each time the `checkedItems` value or content is changed.
+         * Can be used for efficient look-up of whether an item is checked or not (O(1) access time).
+         */
+        _this.checkedKeys = new Set();
+        return _this;
+    }
+    CheckAllDirective.prototype.handleChange = function (event) {
+        var _this = this;
+        // Need to store the current checkbox state at the moment of click
+        this.currentCheckedState = event.checked;
+        this.currentIndeterminateState = this.isIndeterminate;
+        this.treeview.nodes.map(function (_value, index) {
+            var itemIndex = String(index);
+            var itemLookup = _this.treeview.itemLookup(itemIndex);
+            _this.checkNode(itemLookup);
+        });
+        this.checkedItemsChange.emit(this.checkedItems.slice());
+    };
+    Object.defineProperty(CheckAllDirective.prototype, "isIndeterminate", {
+        get: function () {
+            var _this = this;
+            var isIndeterminate = this.treeview.nodes.some(function (_node, index) {
+                var itemIndex = String(index);
+                var itemLookup = _this.treeview.itemLookup(itemIndex);
+                return _this.someChecked(itemLookup);
+            });
+            return this.isChecked ? false : isIndeterminate;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CheckAllDirective.prototype, "isChecked", {
+        get: function () {
+            var _this = this;
+            var isChecked = this.treeview.nodes.every(function (_node, index) {
+                var itemIndex = String(index);
+                var itemLookup = _this.treeview.itemLookup(itemIndex);
+                return _this.allChecked(itemLookup);
+            });
+            return isChecked;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    CheckAllDirective.prototype.ngOnChanges = function (changes) {
+        if (util_1.isPresent(changes.checkedItems)) {
+            this.updateItems();
+            this.renderer.setProperty(this.element.nativeElement, 'checked', this.isChecked);
+            this.renderer.setProperty(this.element.nativeElement, 'indeterminate', this.isIndeterminate);
+        }
+    };
+    CheckAllDirective.prototype.ngOnInit = function () {
+        var _this = this;
+        if (this.focused) {
+            this.nextTick(function () { return _this.element.nativeElement.focus(); });
+        }
+    };
+    CheckAllDirective.prototype.nextTick = function (fn) {
+        this.zone.runOutsideAngular(function () { return setTimeout(fn); });
+    };
+    CheckAllDirective.prototype.checkNode = function (itemLookup) {
+        var _this = this;
+        if (this.treeview.isDisabled(itemLookup.item.dataItem, itemLookup.item.index)) {
+            return;
+        }
+        var pendingCheck = [];
+        var filter = function (item) {
+            return _this.treeview.isVisible(item.dataItem, item.index) &&
+                !_this.treeview.isDisabled(item.dataItem, item.index);
+        };
+        pendingCheck.push(itemLookup.item);
+        util_1.fetchDescendentNodes(itemLookup, filter)
+            .forEach(function (lookup) { return pendingCheck.push(lookup.item); });
+        pendingCheck.forEach(function (item) {
+            if (_this.currentIndeterminateState) {
+                _this.lastAction === 'check' ?
+                    _this.addItem(item) :
+                    _this.removeItem(item);
+                return;
+            }
+            _this.currentCheckedState ?
+                _this.addItem(item) :
+                _this.removeItem(item);
+        });
+    };
+    CheckAllDirective.prototype.allChecked = function (lookup) {
+        var _this = this;
+        var children = lookup && lookup.children;
+        if (!Array.isArray(children)) {
+            return;
+        }
+        var childrenChecked = children.every(function (child) {
+            if (child.children.length) {
+                return _this.isItemChecked(child.item) && _this.allChecked(child);
+            }
+            return _this.isItemChecked(child.item);
+        });
+        return childrenChecked && this.isItemChecked(lookup.item);
+    };
+    CheckAllDirective.prototype.someChecked = function (lookup) {
+        var _this = this;
+        var children = lookup && lookup.children;
+        if (!Array.isArray(children)) {
+            return;
+        }
+        var childrenChecked = children.some(function (child) {
+            if (child.children.length) {
+                return _this.isItemChecked(child.item) || _this.someChecked(child);
+            }
+            return _this.isItemChecked(child.item);
+        });
+        return childrenChecked || this.isItemChecked(lookup.item);
+    };
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], CheckAllDirective.prototype, "lastAction", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", kendo_angular_treeview_1.TreeViewComponent)
+    ], CheckAllDirective.prototype, "treeview", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Array)
+    ], CheckAllDirective.prototype, "checkedItems", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], CheckAllDirective.prototype, "valueField", void 0);
+    tslib_1.__decorate([
+        core_1.Input('checkAll'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], CheckAllDirective.prototype, "focused", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], CheckAllDirective.prototype, "checkedItemsChange", void 0);
+    tslib_1.__decorate([
+        core_1.HostListener('change', ['$event.target']),
+        tslib_1.__metadata("design:type", Function),
+        tslib_1.__metadata("design:paramtypes", [Object]),
+        tslib_1.__metadata("design:returntype", void 0)
+    ], CheckAllDirective.prototype, "handleChange", null);
+    CheckAllDirective = tslib_1.__decorate([
+        core_1.Directive({
+            selector: '[checkAll]' // tslint:disable-line
+        }),
+        tslib_1.__metadata("design:paramtypes", [core_1.ElementRef, core_1.NgZone, core_1.ChangeDetectorRef, core_1.Renderer2])
+    ], CheckAllDirective);
+    return CheckAllDirective;
+}(base_check_directive_1.BaseCheckDirective));
+exports.CheckAllDirective = CheckAllDirective;

package/dist/npm/dropdowntrees/checked-state/check.directive.js

@@ -10,38 +10,40 @@ var kendo_angular_treeview_1 = require("@progress/kendo-angular-treeview");
 var rxjs_1 = require("rxjs");
 var operators_1 = require("rxjs/operators");
 var util_1 = require("../../common/util");
+var base_check_directive_1 = require("./base-check.directive");
 /**
  * @hidden
  *
  * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
  */
-var CheckDirective = /** @class */ (function () {
+var CheckDirective = /** @class */ (function (_super) {
+    tslib_1.__extends(CheckDirective, _super);
     function CheckDirective(treeView) {
-        this.treeView = treeView;
+        var _this = _super.call(this) || this;
+        _this.treeView = treeView;
         /**
          * Fires when the `checkedItems` collection was updated.
          */
-        this.checkedItemsChange = new core_1.EventEmitter();
+        _this.checkedItemsChange = new core_1.EventEmitter();
         /**
          * Holds a Set with just the checked item keys.
          *
          * Should be updated each time the `checkedItems` value or content is changed.
          * Can be used for efficient look-up of whether an item is checked or not (O(1) access time).
          */
-        this.checkedKeys = new Set();
-        this.subscriptions = new rxjs_1.Subscription();
-        this.subscriptions.add(this.treeView.checkedChange
-            .subscribe(this.handleCheckedChange.bind(this)));
-        this.treeView.isChecked = this.getCheckedState.bind(this);
+        _this.checkedKeys = new Set();
+        _this.subscriptions = new rxjs_1.Subscription();
+        _this.subscriptions.add(_this.treeView.checkedChange
+            .subscribe(_this.handleCheckedChange.bind(_this)));
+        _this.treeView.isChecked = _this.getCheckedState.bind(_this);
+        return _this;
     }
     CheckDirective.prototype.ngOnChanges = function (changes) {
-        var _this = this;
         if (util_1.isPresent(changes.checkable)) {
             this.toggleCheckOnClick();
         }
         if (util_1.isPresent(changes.checkedItems)) {
-            this.checkedItems = this.checkedItems || [];
-            this.checkedKeys = new Set(this.checkedItems.map(function (item) { return util_1.valueFrom(item, _this.valueField); }));
+            this.updateItems();
         }
     };
     CheckDirective.prototype.ngOnDestroy = function () {
@@ -126,29 +128,6 @@ var CheckDirective = /** @class */ (function () {
             currentParent = currentParent.parent;
         }
     };
-    CheckDirective.prototype.addItem = function (item) {
-        if (this.isItemChecked(item)) {
-            return;
-        }
-        var level = util_1.getHierarchicalItemLevel(item.index);
-        var candidate = tslib_1.__assign({}, item, { level: level });
-        this.checkedItems.push(candidate);
-        this.checkedKeys.add(util_1.valueFrom(candidate, this.valueField));
-    };
-    CheckDirective.prototype.removeItem = function (item) {
-        var _this = this;
-        if (!this.isItemChecked(item)) {
-            return;
-        }
-        var level = util_1.getHierarchicalItemLevel(item.index);
-        var candidate = tslib_1.__assign({}, item, { level: level });
-        this.checkedItems = this.checkedItems
-            .filter(function (item) { return util_1.valueFrom(item, _this.valueField) !== util_1.valueFrom(candidate, _this.valueField); });
-        this.checkedKeys.delete(util_1.valueFrom(candidate, this.valueField));
-    };
-    CheckDirective.prototype.isItemChecked = function (item) {
-        return this.checkedKeys.has(util_1.valueFrom(item, this.valueField));
-    };
     CheckDirective.prototype.isItemIndeterminate = function (lookup) {
         var children = lookup.children;
         if (!Array.isArray(children) || children.length === 0) {
@@ -188,5 +167,5 @@ var CheckDirective = /** @class */ (function () {
         tslib_1.__metadata("design:paramtypes", [kendo_angular_treeview_1.TreeViewComponent])
     ], CheckDirective);
     return CheckDirective;
-}());
+}(base_check_directive_1.BaseCheckDirective));
 exports.CheckDirective = CheckDirective;

package/dist/npm/dropdowntrees/dropdowntree.component.js

@@ -640,8 +640,8 @@ var DropDownTreeComponent = /** @class */ (function () {
             dataItem;
         var shouldUpdateValue = newValue !== this.value;
         if (shouldUpdateValue) {
-            this.dataItem = dataItem;
             this.value = newValue;
+            this.dataItem = dataItem;
             this.emitValueChange(this.value);
         }
         this.togglePopup(false);
@@ -722,6 +722,16 @@ var DropDownTreeComponent = /** @class */ (function () {
         this.filterChange.next(term);
         this.allNodesHidden = this.nodes.every(function (node, index) { return !_this.isVisible(node, String(index)); });
     };
+    Object.defineProperty(DropDownTreeComponent.prototype, "buttonClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.loading ? 'k-i-loading' : 'k-i-arrow-s';
+        },
+        enumerable: true,
+        configurable: true
+    });
     DropDownTreeComponent.prototype.verifySettings = function () {
         if (!core_1.isDevMode()) {
             return;
@@ -848,7 +858,6 @@ var DropDownTreeComponent = /** @class */ (function () {
     };
     DropDownTreeComponent.prototype.clearState = function () {
         this.text = undefined;
-        this.valueDepth = undefined;
         this.selectedKeys = [];
     };
     DropDownTreeComponent.prototype.subscribeEvents = function () {
@@ -1139,7 +1148,7 @@ var DropDownTreeComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-dropdowntree',
-            template: "\n        <ng-container kendoDropDownTreeLocalizedMessages\n            i18n-noDataText=\"kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.dropdowntree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <span\n            #wrapper\n            [ngClass]=\"{\n                'k-dropdown-wrap': true,\n                'k-state-disabled': this.disabled\n            }\"\n            [attr.id]=\"focusableId\"\n            role=\"listbox\"\n            aria-haspopup=\"tree\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.dir]=\"direction\"\n            (click)=\"handleClick()\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n        >\n            <span\n                [attr.id]=\"valueLabelId\"\n                class=\"k-input\"\n            >\n                <ng-template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!valueTemplate\"> {{ text || placeholder }} </ng-template>\n            </span>\n            <span\n                *ngIf=\"!loading && !readonly && clearButton && text?.length\"\n                class=\"k-icon k-clear-value k-i-close\"\n                [style.visibility]=\"clearButtonVisiblity\"\n                aria-hidden=\"true\"\n                [attr.title]=\"messageFor('clearTitle')\"\n                (click)=\"clearValue($event)\"\n            >\n            </span>\n            <span class=\"k-select\" aria-hidden=\"true\">\n                <span class=\"k-icon k-i-arrow-60-down\"></span>\n            </span>\n        </span>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <input\n                    #filterInput\n                    (input)=\"handleFilterInputChange($event.target.value)\"\n                    [filterInput]=\"filterable && !touchEnabled\"\n                    (keydown.arrowdown)=\"handleKeydown($event)\"\n                    (keydown.alt.arrowup)=\"handleKeydown($event)\"\n                    [(ngModel)]=\"filter\"\n                    class=\"k-textbox\"\n                    role=\"textbox\"\n                    aria-haspopup=\"true\"\n                    aria-expanded=\"false\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span class=\"k-icon k-i-zoom\"></span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <kendo-treeview\n                #treeview\n                *ngIf=\"data.length !== 0 && !allNodesHidden\"\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                [(selectedKeys)]=\"selectedKeys\"\n                [selectBy]=\"selectBy\"\n                [textField]=\"textField\"\n                kendoTreeViewSelectable\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (focusout)=\"handleBlur($event)\"\n                (keydown)=\"handleKeydown($event)\"\n                (selectionChange)=\"onSelectionChange($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n            >\n            </kendo-treeview>\n            <!--footer template-->\n            <ng-template\n                *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <!--no-data template-->\n            <div class=\"k-nodata\" *ngIf=\"data.length === 0 || allNodesHidden\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-container #container></ng-container>\n    ",
+            template: "\n        <ng-container kendoDropDownTreeLocalizedMessages\n            i18n-noDataText=\"kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.dropdowntree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <span\n            #wrapper\n            [ngClass]=\"{\n                'k-dropdown-wrap': true,\n                'k-state-disabled': this.disabled\n            }\"\n            [attr.id]=\"focusableId\"\n            role=\"listbox\"\n            aria-haspopup=\"tree\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.dir]=\"direction\"\n            (click)=\"handleClick()\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n        >\n            <span\n                [attr.id]=\"valueLabelId\"\n                class=\"k-input\"\n            >\n                <ng-template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!valueTemplate\"> {{ text || placeholder }} </ng-template>\n            </span>\n            <span\n                *ngIf=\"!loading && !readonly && clearButton && text?.length && !disabled\"\n                class=\"k-icon k-clear-value k-i-close\"\n                [style.visibility]=\"clearButtonVisiblity\"\n                aria-hidden=\"true\"\n                [attr.title]=\"messageFor('clearTitle')\"\n                (click)=\"clearValue($event)\"\n            >\n            </span>\n            <span class=\"k-select\" aria-hidden=\"true\">\n                <span\n                    class=\"k-icon k-i-arrow-60-down\"\n                    [ngClass]=\"buttonClasses\"\n                ></span>\n            </span>\n        </span>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <input\n                    #filterInput\n                    (input)=\"handleFilterInputChange($event.target.value)\"\n                    [filterInput]=\"filterable && !touchEnabled\"\n                    (keydown.arrowdown)=\"handleKeydown($event)\"\n                    (keydown.alt.arrowup)=\"handleKeydown($event)\"\n                    [(ngModel)]=\"filter\"\n                    class=\"k-textbox\"\n                    role=\"textbox\"\n                    aria-haspopup=\"true\"\n                    aria-expanded=\"false\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span class=\"k-icon k-i-zoom\"></span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <kendo-treeview\n                #treeview\n                *ngIf=\"data.length !== 0 && !allNodesHidden\"\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                [(selectedKeys)]=\"selectedKeys\"\n                [selectBy]=\"selectBy\"\n                [textField]=\"textField\"\n                kendoTreeViewSelectable\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (focusout)=\"handleBlur($event)\"\n                (keydown)=\"handleKeydown($event)\"\n                (selectionChange)=\"onSelectionChange($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n            >\n            </kendo-treeview>\n            <!--footer template-->\n            <ng-template\n                *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <!--no-data template-->\n            <div class=\"k-nodata\" *ngIf=\"data.length === 0 || allNodesHidden\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-container #container></ng-container>\n    ",
             changeDetection: core_1.ChangeDetectionStrategy.OnPush
         }),
         tslib_1.__param(7, core_1.Optional()), tslib_1.__param(7, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),

package/dist/npm/dropdowntrees/multiselecttree.component.js

@@ -112,6 +112,12 @@ var MultiSelectTreeComponent = /** @class */ (function () {
          * @default false
          */
         this.filterable = false;
+        /**
+         * If `checkАll` is set to `true` and the checkboxes are enabled, a tri-state checkbox appears above the embedded treeview.
+         * Clicking the checkbox checks or unchecks all enabled items of the treeview that are loaded.
+         * @default false
+         */
+        this.checkAll = false;
         /**
          * A function which determines if a specific node has child nodes.
          */
@@ -215,6 +221,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
         this._isFocused = false;
         this.subscriptions = [];
+        this.lastAction = 'check';
         this.onTouchedCallback = util_1.noop;
         this.onChangeCallback = util_1.noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -230,7 +237,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             this._treeview = treeview;
             if (treeview) {
                 // If filtering is enabled, focus the TreeView on mobile devices instead of the filter input
-                if (this.isFocused && !this.filterable || this.touchEnabled) {
+                if (this.isFocused && !this.filterable && !this.checkAll || this.touchEnabled) {
                     treeview.focus();
                 }
                 /**
@@ -551,6 +558,20 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "isFilterActive", {
+        get: function () {
+            return this.filterInput && document.activeElement === this.filterInput.nativeElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "isCheckAllActive", {
+        get: function () {
+            return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
     MultiSelectTreeComponent.prototype.ngOnInit = function () {
         var _this = this;
         this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
@@ -774,6 +795,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
      */
     MultiSelectTreeComponent.prototype.handleCheckedItemsChange = function (items) {
         this.valueDepth = items.map(function (item) { return item.level; });
+        this.lastAction = items.length > this.dataItems.length ? 'check' : 'uncheck';
         this.dataItems = items.slice();
         this.updateValue(this.dataItems);
     };
@@ -866,6 +888,13 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         this.filterChange.next(term);
         this.allNodesHidden = this.nodes.every(function (node, index) { return !_this.isVisible(node, String(index)); });
     };
+    /**
+     * @hidden
+     */
+    MultiSelectTreeComponent.prototype.toggleCheckAll = function () {
+        this.checkAllInput.nativeElement.focus();
+        this.checkAllInput.nativeElement.click();
+    };
     MultiSelectTreeComponent.prototype.verifySettings = function () {
         if (!core_1.isDevMode()) {
             return;
@@ -991,17 +1020,20 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             return;
         }
         var isFirstNodeActive = this.treeview['navigationService']['activeIndex'] === '0';
-        if (this.filterable) {
-            var isFilterActive = this.filterInput.nativeElement === document.activeElement;
-            if (isFilterActive) {
-                this.focus();
-            }
-            else if (!isFilterActive && isFirstNodeActive) {
-                this.filterInput.nativeElement.focus();
-            }
-        }
-        if (!this.filterable && isFirstNodeActive) {
+        // Current focus is on the filter input => should focus the wrapper
+        if (this.filterable && this.isFilterActive) {
             this.focus();
+            // Current focus is on the treeview first node => should focus the check all checkbox if enabled
+        }
+        else if (this.checkAll && !this.isCheckAllActive && isFirstNodeActive) {
+            this.checkAllInput.nativeElement.focus();
+            // Current focus is either on the check all checkbox or the treeview's first node
+            // => should focus either the filter input (if enabled) or the wrapper
+        }
+        else if (this.isCheckAllActive || isFirstNodeActive) {
+            this.filterable ?
+                this.filterInput.nativeElement.focus() :
+                this.focus();
         }
     };
     MultiSelectTreeComponent.prototype.handleDownKey = function (event) {
@@ -1009,9 +1041,14 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             return;
         }
         event.originalEvent.preventDefault();
-        // Put the focus back on the filter input if the wrapper is focused
+        // Current focus is on the wrapper => should focus the filter input
         if (this.filterable && this.isWrapperActive) {
             this.filterInput.nativeElement.focus();
+            // Current focus is on the wrapper/filter input => should focus check all checkbox if enabled
+        }
+        else if (this.checkAll && (this.isWrapperActive || this.isFilterActive)) {
+            this.checkAllInput.nativeElement.focus();
+            // Should focus the treeview if filterable and check all are disabled
         }
         else if (!this.treeview.isActive) {
             this.treeview.focus();
@@ -1172,6 +1209,10 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         core_1.ViewChild('filterInput', { static: false }),
         tslib_1.__metadata("design:type", core_1.ElementRef)
     ], MultiSelectTreeComponent.prototype, "filterInput", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('checkAllInput', { static: false }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], MultiSelectTreeComponent.prototype, "checkAllInput", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Number),
@@ -1254,6 +1295,10 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], MultiSelectTreeComponent.prototype, "filterable", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], MultiSelectTreeComponent.prototype, "checkAll", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Function)
@@ -1354,7 +1399,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-multiselecttree',
-            template: "\n        <ng-container kendoMultiSelectTreeLocalizedMessages\n            i18n-noDataText=\"kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multiselecttree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <div #wrapper\n            [ngClass]=\"{\n                'k-multiselect-wrap': true,\n                'k-floatwrap': true,\n                'k-state-disabled': this.disabled\n            }\"\n            role=\"listbox\"\n            aria-haspopup=\"tree\"\n            [attr.aria-describedby]=\"tagListId\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-activedescendant]=\"focusedTagId\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.id]=\"focusableId\"\n            [attr.dir]=\"direction\"\n            (click)=\"handleClick()\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n        >\n            <kendo-taglist\n                [id]=\"tagListId\"\n                [tags]=\"tags\"\n                [focused]=\"focusedTagIndex\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [valueDepth]=\"valueDepth\"\n                [disabled]=\"disabled\"\n                [tagPrefix]=\"tagPrefix\"\n                [template]=\"tagTemplate\"\n                [groupTemplate]=\"groupTagTemplate\"\n                [disabledIndices]=\"disabledIndices\"\n                (removeTag)=\"handleRemoveTag($event)\"\n            >\n            </kendo-taglist>\n            <span *ngIf=\"!tags || !tags.length\"\n                class=\"k-input k-readonly\"\n            >\n                {{ placeholder }}\n            </span>\n            <span\n                *ngIf=\"!disabled && !loading && !readonly && clearButton && tags?.length\"\n                class=\"k-icon k-clear-value k-i-close\"\n                [attr.title]=\"messageFor('clearTitle')\"\n                role=\"button\"\n                tabindex=\"-1\"\n                (click)=\"clearAll($event)\"\n            >\n            </span>\n            <span\n                *ngIf=\"loading\"\n                class=\"k-icon k-i-loading\"\n            >\n            </span>\n        </div>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <input\n                    #filterInput\n                    (input)=\"handleFilterInputChange($event.target.value)\"\n                    [filterInput]=\"filterable && !touchEnabled\"\n                    (keydown.arrowdown)=\"handleKeydown($event)\"\n                    (keydown.arrowup)=\"handleKeydown($event)\"\n                    (keydown.alt.arrowup)=\"handleKeydown($event)\"\n                    [(ngModel)]=\"filter\"\n                    class=\"k-textbox\"\n                    role=\"textbox\"\n                    aria-haspopup=\"true\"\n                    aria-expanded=\"false\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span class=\"k-icon k-i-zoom\"></span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <kendo-treeview\n                #treeview\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                kendoMultiSelectTreeCheckable\n                [checkable]=\"checkableSettings\"\n                [checkedItems]=\"checkedItems\"\n                [valueField]=\"valueField\"\n                [textField]=\"textField\"\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (keydown)=\"handleKeydown($event)\"\n                (nodeClick)=\"handleNodeClick($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n                (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                [kendoEventsOutsideAngular]=\"{\n                    focusout: handleBlur\n                }\"\n                [scope]=\"this\"\n            >\n            </kendo-treeview>\n            <!--footer template-->\n            <ng-template\n                *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <!--no-data template-->\n            <div class=\"k-nodata\" *ngIf=\"data?.length === 0 || allNodesHidden\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container kendoMultiSelectTreeLocalizedMessages\n            i18n-noDataText=\"kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multiselecttree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n\n            i18n-checkAllText=\"kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox\"\n            checkAllText=\"Check all\"\n        >\n        </ng-container>\n        <div #wrapper\n            [ngClass]=\"{\n                'k-multiselect-wrap': true,\n                'k-floatwrap': true,\n                'k-state-disabled': this.disabled\n            }\"\n            role=\"listbox\"\n            aria-haspopup=\"tree\"\n            [attr.aria-describedby]=\"tagListId\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-activedescendant]=\"focusedTagId\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.id]=\"focusableId\"\n            [attr.dir]=\"direction\"\n            (click)=\"handleClick()\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n        >\n            <kendo-taglist\n                [id]=\"tagListId\"\n                [tags]=\"tags\"\n                [focused]=\"focusedTagIndex\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [valueDepth]=\"valueDepth\"\n                [disabled]=\"disabled\"\n                [tagPrefix]=\"tagPrefix\"\n                [template]=\"tagTemplate\"\n                [groupTemplate]=\"groupTagTemplate\"\n                [disabledIndices]=\"disabledIndices\"\n                (removeTag)=\"handleRemoveTag($event)\"\n            >\n            </kendo-taglist>\n            <span *ngIf=\"!tags || !tags.length\"\n                class=\"k-input k-readonly\"\n            >\n                {{ placeholder }}\n            </span>\n            <span\n                *ngIf=\"!disabled && !loading && !readonly && clearButton && tags?.length\"\n                class=\"k-icon k-clear-value k-i-close\"\n                [attr.title]=\"messageFor('clearTitle')\"\n                role=\"button\"\n                tabindex=\"-1\"\n                (click)=\"clearAll($event)\"\n            >\n            </span>\n            <span\n                *ngIf=\"loading\"\n                class=\"k-icon k-i-loading\"\n            >\n            </span>\n        </div>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <input\n                    #filterInput\n                    (input)=\"handleFilterInputChange($event.target.value)\"\n                    [filterInput]=\"filterable && !touchEnabled\"\n                    (keydown)=\"handleKeydown($event)\"\n                    [(ngModel)]=\"filter\"\n                    class=\"k-textbox\"\n                    role=\"textbox\"\n                    aria-haspopup=\"true\"\n                    aria-expanded=\"false\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span class=\"k-icon k-i-zoom\"></span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <div *ngIf=\"checkAll\" class=\"k-check-all\">\n                <input\n                    #checkAllInput\n                    [checkAll]=\"!filterable && !touchEnabled\"\n                    type=\"checkbox\"\n                    class=\"k-checkbox\"\n                    role=\"checkbox\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [treeview]=\"treeview\"\n                    [checkedItems]=\"checkedItems\"\n                    [valueField]=\"valueField\"\n                    [lastAction]=\"lastAction\"\n                    (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                    (keydown)=\"handleKeydown($event)\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span\n                    class=\"k-checkbox-label\"\n                    (click)=\"toggleCheckAll()\"\n                    (mousedown)=\"$event.preventDefault()\"\n                >\n                    {{ messageFor('checkAllText') }}\n                </span>\n            </div>\n            <kendo-treeview\n                #treeview\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                kendoMultiSelectTreeCheckable\n                [checkable]=\"checkableSettings\"\n                [checkedItems]=\"checkedItems\"\n                [valueField]=\"valueField\"\n                [textField]=\"textField\"\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (keydown)=\"handleKeydown($event)\"\n                (nodeClick)=\"handleNodeClick($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n                (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                [kendoEventsOutsideAngular]=\"{\n                    focusout: handleBlur\n                }\"\n                [scope]=\"this\"\n            >\n            </kendo-treeview>\n            <!--footer template-->\n            <ng-template\n                *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <!--no-data template-->\n            <div class=\"k-nodata\" *ngIf=\"data?.length === 0 || allNodesHidden\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
         tslib_1.__param(7, core_1.Optional()), tslib_1.__param(7, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_popup_1.PopupService,

package/dist/npm/index.js

@@ -45,6 +45,10 @@ var tag_template_directive_1 = require("./common/templates/tag-template.directiv
 exports.TagTemplateDirective = tag_template_directive_1.TagTemplateDirective
 var dropdownlist_component_1 = require("./dropdownlist/dropdownlist.component");
 exports.DROPDOWNLIST_VALUE_ACCESSOR = dropdownlist_component_1.DROPDOWNLIST_VALUE_ACCESSOR
+var base_check_directive_1 = require("./dropdowntrees/checked-state/base-check.directive");
+exports.BaseCheckDirective = base_check_directive_1.BaseCheckDirective
+var check_all_directive_1 = require("./dropdowntrees/checked-state/check-all.directive");
+exports.CheckAllDirective = check_all_directive_1.CheckAllDirective
 var check_directive_1 = require("./dropdowntrees/checked-state/check.directive");
 exports.CheckDirective = check_directive_1.CheckDirective
 var summary_tag_directive_1 = require("./dropdowntrees/summary-tag/summary-tag.directive");

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1631260317,
+    publishDate: 1635766703,
     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'
 };