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

package/dist/fesm5/index.js

@@ -23,7 +23,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1626786792,
+    publishDate: 1635524416,
     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'
 };
@@ -8460,8 +8460,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);
@@ -8668,7 +8668,6 @@ var DropDownTreeComponent = /** @class */ (function () {
     };
     DropDownTreeComponent.prototype.clearState = function () {
         this.text = undefined;
-        this.valueDepth = undefined;
         this.selectedKeys = [];
     };
     DropDownTreeComponent.prototype.subscribeEvents = function () {
@@ -9049,6 +9048,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.
          */
@@ -9152,6 +9157,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
         this._isFocused = false;
         this.subscriptions = [];
+        this.lastAction = 'check';
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -9167,7 +9173,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();
                 }
                 /**
@@ -9488,6 +9494,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');
@@ -9711,6 +9731,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);
     };
@@ -9803,6 +9824,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 (!isDevMode()) {
             return;
@@ -9928,17 +9956,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) {
@@ -9946,9 +9977,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();
@@ -10109,6 +10145,10 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         ViewChild('filterInput', { static: false }),
         __metadata("design:type", ElementRef)
     ], MultiSelectTreeComponent.prototype, "filterInput", void 0);
+    __decorate([
+        ViewChild('checkAllInput', { static: false }),
+        __metadata("design:type", ElementRef)
+    ], MultiSelectTreeComponent.prototype, "checkAllInput", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Number),
@@ -10191,6 +10231,10 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Boolean)
     ], MultiSelectTreeComponent.prototype, "filterable", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], MultiSelectTreeComponent.prototype, "checkAll", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Function)
@@ -10291,7 +10335,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    "
         }),
         __param(7, Optional()), __param(7, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [PopupService,
@@ -10579,6 +10623,10 @@ var Messages = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", String)
     ], Messages.prototype, "clearTitle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "checkAllText", void 0);
     return Messages;
 }(ComponentMessages));
 
@@ -10670,6 +10718,7 @@ var DEFAULT_FILTER_SETTINGS = {
  *     public data: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
  * }
  * ```
+ * > Currently, the built-in filtering does not work with [grouped data]({% slug api_kendo-data-query_groupby %}).
  */
 var FilterDirective = /** @class */ (function () {
     function FilterDirective(component) {
@@ -10974,33 +11023,81 @@ var TemplateContextDirective = /** @class */ (function () {
  *
  * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
  */
-var CheckDirective = /** @class */ (function () {
+var BaseCheckDirective = /** @class */ (function () {
+    function BaseCheckDirective() {
+    }
+    BaseCheckDirective.prototype.addItem = function (item) {
+        if (this.isItemChecked(item)) {
+            return;
+        }
+        var level = getHierarchicalItemLevel(item.index);
+        var candidate = __assign({}, item, { level: level });
+        this.checkedItems.push(candidate);
+        this.checkedKeys.add(valueFrom(candidate, this.valueField));
+    };
+    BaseCheckDirective.prototype.removeItem = function (item) {
+        var _this = this;
+        if (!this.isItemChecked(item)) {
+            return;
+        }
+        var level = getHierarchicalItemLevel(item.index);
+        var candidate = __assign({}, item, { level: level });
+        this.checkedItems = this.checkedItems
+            .filter(function (item) { return valueFrom(item, _this.valueField) !== valueFrom(candidate, _this.valueField); });
+        this.checkedKeys.delete(valueFrom(candidate, this.valueField));
+    };
+    BaseCheckDirective.prototype.isItemChecked = function (item) {
+        return this.checkedKeys.has(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 valueFrom(item, _this.valueField); }));
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], BaseCheckDirective.prototype, "valueField", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], BaseCheckDirective.prototype, "checkedItems", void 0);
+    return BaseCheckDirective;
+}());
+
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+var CheckDirective = /** @class */ (function (_super) {
+    __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 EventEmitter();
+        _this.checkedItemsChange = new 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 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 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 (isPresent(changes.checkable)) {
             this.toggleCheckOnClick();
         }
         if (isPresent(changes.checkedItems)) {
-            this.checkedItems = this.checkedItems || [];
-            this.checkedKeys = new Set(this.checkedItems.map(function (item) { return valueFrom(item, _this.valueField); }));
+            this.updateItems();
         }
     };
     CheckDirective.prototype.ngOnDestroy = function () {
@@ -11085,29 +11182,6 @@ var CheckDirective = /** @class */ (function () {
             currentParent = currentParent.parent;
         }
     };
-    CheckDirective.prototype.addItem = function (item) {
-        if (this.isItemChecked(item)) {
-            return;
-        }
-        var level = getHierarchicalItemLevel(item.index);
-        var candidate = __assign({}, item, { level: level });
-        this.checkedItems.push(candidate);
-        this.checkedKeys.add(valueFrom(candidate, this.valueField));
-    };
-    CheckDirective.prototype.removeItem = function (item) {
-        var _this = this;
-        if (!this.isItemChecked(item)) {
-            return;
-        }
-        var level = getHierarchicalItemLevel(item.index);
-        var candidate = __assign({}, item, { level: level });
-        this.checkedItems = this.checkedItems
-            .filter(function (item) { return valueFrom(item, _this.valueField) !== valueFrom(candidate, _this.valueField); });
-        this.checkedKeys.delete(valueFrom(candidate, this.valueField));
-    };
-    CheckDirective.prototype.isItemChecked = function (item) {
-        return this.checkedKeys.has(valueFrom(item, this.valueField));
-    };
     CheckDirective.prototype.isItemIndeterminate = function (lookup) {
         var children = lookup.children;
         if (!Array.isArray(children) || children.length === 0) {
@@ -11147,7 +11221,179 @@ var CheckDirective = /** @class */ (function () {
         __metadata("design:paramtypes", [TreeViewComponent])
     ], CheckDirective);
     return CheckDirective;
-}());
+}(BaseCheckDirective));
+
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+var CheckAllDirective = /** @class */ (function (_super) {
+    __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 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 (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$$1 = function (item) {
+            return _this.treeview.isVisible(item.dataItem, item.index) &&
+                !_this.treeview.isDisabled(item.dataItem, item.index);
+        };
+        pendingCheck.push(itemLookup.item);
+        fetchDescendentNodes(itemLookup, filter$$1)
+            .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);
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], CheckAllDirective.prototype, "lastAction", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", TreeViewComponent)
+    ], CheckAllDirective.prototype, "treeview", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], CheckAllDirective.prototype, "checkedItems", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], CheckAllDirective.prototype, "valueField", void 0);
+    __decorate([
+        Input('checkAll'),
+        __metadata("design:type", Boolean)
+    ], CheckAllDirective.prototype, "focused", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], CheckAllDirective.prototype, "checkedItemsChange", void 0);
+    __decorate([
+        HostListener('change', ['$event.target']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], CheckAllDirective.prototype, "handleChange", null);
+    CheckAllDirective = __decorate([
+        Directive({
+            selector: '[checkAll]' // tslint:disable-line
+        }),
+        __metadata("design:paramtypes", [ElementRef, NgZone, ChangeDetectorRef, Renderer2])
+    ], CheckAllDirective);
+    return CheckAllDirective;
+}(BaseCheckDirective));
 
 var INTERNAL_DIRECTIVES = [
     ListComponent,
@@ -11156,7 +11402,8 @@ var INTERNAL_DIRECTIVES = [
     SearchBarComponent,
     TemplateContextDirective,
     TagListComponent,
-    CheckDirective
+    CheckDirective,
+    CheckAllDirective
 ];
 /**
  * @hidden
@@ -11486,4 +11733,4 @@ var DropDownsModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { AUTOCOMPLETE_VALUE_ACCESSOR, COMBOBOX_VALUE_ACCESSOR, TOUCH_ENABLED, DataService, DisabledItemsService, FilterInputDirective, FilterableComponent, ListItemDirective, CustomMessagesComponent, LocalizedMessagesDirective, Messages, NavigationService, SearchBarComponent, SelectionService, TagListComponent, NoDataTemplateDirective, TagTemplateDirective, DROPDOWNLIST_VALUE_ACCESSOR, CheckDirective, MultiSelectTreeSummaryTagDirective, AutoCompleteComponent, ComboBoxComponent, DropDownListComponent, MultiSelectComponent, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, DropDownTreeComponent, MultiSelectTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, NodeTemplateDirective, ItemTemplateDirective, GroupTemplateDirective, FixedGroupTemplateDirective, CustomItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, TemplateContextDirective, GroupTagTemplateDirective, SelectableDirective, SummaryTagDirective, FilterDirective, DropDownsModule, MultiSelectModule, SharedModule, AutoCompleteModule, ComboBoxModule, DropDownListModule, SharedDirectivesModule, ListComponent, PreventableEvent, RemoveTagEvent };
+export { AUTOCOMPLETE_VALUE_ACCESSOR, COMBOBOX_VALUE_ACCESSOR, TOUCH_ENABLED, DataService, DisabledItemsService, FilterInputDirective, FilterableComponent, ListItemDirective, CustomMessagesComponent, LocalizedMessagesDirective, Messages, NavigationService, SearchBarComponent, SelectionService, TagListComponent, NoDataTemplateDirective, TagTemplateDirective, DROPDOWNLIST_VALUE_ACCESSOR, BaseCheckDirective, CheckAllDirective, CheckDirective, MultiSelectTreeSummaryTagDirective, AutoCompleteComponent, ComboBoxComponent, DropDownListComponent, MultiSelectComponent, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, DropDownTreeComponent, MultiSelectTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, NodeTemplateDirective, ItemTemplateDirective, GroupTemplateDirective, FixedGroupTemplateDirective, CustomItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, TemplateContextDirective, GroupTagTemplateDirective, SelectableDirective, SummaryTagDirective, FilterDirective, DropDownsModule, MultiSelectModule, SharedModule, AutoCompleteModule, ComboBoxModule, DropDownListModule, SharedDirectivesModule, ListComponent, PreventableEvent, RemoveTagEvent };

package/dist/npm/common/filtering/filter.directive.js

@@ -33,6 +33,7 @@ var DEFAULT_FILTER_SETTINGS = {
  *     public data: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
  * }
  * ```
+ * > Currently, the built-in filtering does not work with [grouped data]({% slug api_kendo-data-query_groupby %}).
  */
 var FilterDirective = /** @class */ (function () {
     function FilterDirective(component) {

package/dist/npm/common/localization/messages.js

@@ -23,6 +23,10 @@ var Messages = /** @class */ (function (_super) {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], Messages.prototype, "clearTitle", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], Messages.prototype, "checkAllText", void 0);
     return Messages;
 }(kendo_angular_l10n_1.ComponentMessages));
 exports.Messages = Messages;

package/dist/npm/common/shared.module.js

@@ -18,6 +18,7 @@ var list_item_directive_1 = require("./list-item.directive");
 var selectable_directive_1 = require("./selection/selectable.directive");
 var template_context_directive_1 = require("./templates/template-context.directive");
 var check_directive_1 = require("../dropdowntrees/checked-state/check.directive");
+var check_all_directive_1 = require("../dropdowntrees/checked-state/check-all.directive");
 var INTERNAL_DIRECTIVES = [
     list_component_1.ListComponent,
     list_item_directive_1.ListItemDirective,
@@ -25,7 +26,8 @@ var INTERNAL_DIRECTIVES = [
     searchbar_component_1.SearchBarComponent,
     template_context_directive_1.TemplateContextDirective,
     taglist_component_1.TagListComponent,
-    check_directive_1.CheckDirective
+    check_directive_1.CheckDirective,
+    check_all_directive_1.CheckAllDirective
 ];
 /**
  * @hidden

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;