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

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

@@ -0,0 +1,32 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TreeItem } from '@progress/kendo-angular-treeview';
+import { CheckedItem } from './checked-item';
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+export declare abstract class BaseCheckDirective {
+    /**
+     * The item key/keys by which the data items will be compared.
+     */
+    abstract valueField: string | string[];
+    /**
+     * Defines the collection that will store the full checked items.
+     */
+    abstract checkedItems: CheckedItem[];
+    /**
+     * 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).
+     */
+    abstract checkedKeys: Set<any>;
+    protected addItem(item: TreeItem): void;
+    protected removeItem(item: TreeItem): void;
+    protected isItemChecked(item: CheckedItem): boolean;
+    protected updateItems(): void;
+}

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

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

package/dist/es2015/dropdowntrees/checked-state/check-all.directive.d.ts

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core';
+import { TreeViewComponent } from '@progress/kendo-angular-treeview';
+import { BaseCheckDirective } from './base-check.directive';
+import { CheckedItem } from './checked-item';
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+export declare class CheckAllDirective extends BaseCheckDirective implements OnChanges, OnInit {
+    private element;
+    private zone;
+    cdr: ChangeDetectorRef;
+    renderer: Renderer2;
+    lastAction: 'check' | 'uncheck';
+    treeview: TreeViewComponent;
+    /**
+     * Defines the collection that will store the full checked items.
+     */
+    checkedItems: CheckedItem[];
+    /**
+     * The item key/keys by which the data items will be compared.
+     */
+    valueField: string | string[];
+    focused: boolean;
+    /**
+     * Fires when the `checkedItems` collection was updated.
+     */
+    checkedItemsChange: EventEmitter<CheckedItem[]>;
+    /**
+     * 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).
+     */
+    checkedKeys: Set<any>;
+    private currentCheckedState;
+    private currentIndeterminateState;
+    handleChange(event: any): void;
+    readonly isIndeterminate: boolean;
+    readonly isChecked: boolean;
+    constructor(element: ElementRef, zone: NgZone, cdr: ChangeDetectorRef, renderer: Renderer2);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    private nextTick;
+    private checkNode;
+    private allChecked;
+    private someChecked;
+}

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

@@ -0,0 +1,161 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, HostListener, Input, NgZone, Output, Renderer2 } from '@angular/core';
+import { TreeViewComponent } from '@progress/kendo-angular-treeview';
+import { fetchDescendentNodes, isPresent } from '../../common/util';
+import { BaseCheckDirective } from './base-check.directive';
+/**
+ * @hidden
+ *
+ * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
+ */
+let CheckAllDirective = class CheckAllDirective extends BaseCheckDirective {
+    constructor(element, zone, cdr, renderer) {
+        super();
+        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();
+    }
+    handleChange(event) {
+        // Need to store the current checkbox state at the moment of click
+        this.currentCheckedState = event.checked;
+        this.currentIndeterminateState = this.isIndeterminate;
+        this.treeview.nodes.map((_value, index) => {
+            const itemIndex = String(index);
+            const itemLookup = this.treeview.itemLookup(itemIndex);
+            this.checkNode(itemLookup);
+        });
+        this.checkedItemsChange.emit(this.checkedItems.slice());
+    }
+    get isIndeterminate() {
+        const isIndeterminate = this.treeview.nodes.some((_node, index) => {
+            const itemIndex = String(index);
+            const itemLookup = this.treeview.itemLookup(itemIndex);
+            return this.someChecked(itemLookup);
+        });
+        return this.isChecked ? false : isIndeterminate;
+    }
+    get isChecked() {
+        const isChecked = this.treeview.nodes.every((_node, index) => {
+            const itemIndex = String(index);
+            const itemLookup = this.treeview.itemLookup(itemIndex);
+            return this.allChecked(itemLookup);
+        });
+        return isChecked;
+    }
+    ngOnChanges(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);
+        }
+    }
+    ngOnInit() {
+        if (this.focused) {
+            this.nextTick(() => this.element.nativeElement.focus());
+        }
+    }
+    nextTick(fn) {
+        this.zone.runOutsideAngular(() => setTimeout(fn));
+    }
+    checkNode(itemLookup) {
+        if (this.treeview.isDisabled(itemLookup.item.dataItem, itemLookup.item.index)) {
+            return;
+        }
+        const pendingCheck = [];
+        const filter = (item) => this.treeview.isVisible(item.dataItem, item.index) &&
+            !this.treeview.isDisabled(item.dataItem, item.index);
+        pendingCheck.push(itemLookup.item);
+        fetchDescendentNodes(itemLookup, filter)
+            .forEach(lookup => pendingCheck.push(lookup.item));
+        pendingCheck.forEach(item => {
+            if (this.currentIndeterminateState) {
+                this.lastAction === 'check' ?
+                    this.addItem(item) :
+                    this.removeItem(item);
+                return;
+            }
+            this.currentCheckedState ?
+                this.addItem(item) :
+                this.removeItem(item);
+        });
+    }
+    allChecked(lookup) {
+        const children = lookup && lookup.children;
+        if (!Array.isArray(children)) {
+            return;
+        }
+        const childrenChecked = children.every(child => {
+            if (child.children.length) {
+                return this.isItemChecked(child.item) && this.allChecked(child);
+            }
+            return this.isItemChecked(child.item);
+        });
+        return childrenChecked && this.isItemChecked(lookup.item);
+    }
+    someChecked(lookup) {
+        const children = lookup && lookup.children;
+        if (!Array.isArray(children)) {
+            return;
+        }
+        const childrenChecked = children.some(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([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], CheckAllDirective.prototype, "lastAction", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", TreeViewComponent)
+], CheckAllDirective.prototype, "treeview", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], CheckAllDirective.prototype, "checkedItems", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], CheckAllDirective.prototype, "valueField", void 0);
+tslib_1.__decorate([
+    Input('checkAll'),
+    tslib_1.__metadata("design:type", Boolean)
+], CheckAllDirective.prototype, "focused", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], CheckAllDirective.prototype, "checkedItemsChange", void 0);
+tslib_1.__decorate([
+    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([
+    Directive({
+        selector: '[checkAll]' // tslint:disable-line
+    }),
+    tslib_1.__metadata("design:paramtypes", [ElementRef, NgZone, ChangeDetectorRef, Renderer2])
+], CheckAllDirective);
+export { CheckAllDirective };

package/dist/es2015/dropdowntrees/checked-state/check.directive.d.ts

@@ -6,12 +6,13 @@ import { EventEmitter, OnDestroy, OnChanges, SimpleChanges } from '@angular/core
 import { TreeViewComponent } from '@progress/kendo-angular-treeview';
 import { CheckedItem } from './checked-item';
 import { MultiSelectTreeCheckableSettings } from './checkable-settings';
+import { BaseCheckDirective } from './base-check.directive';
 /**
  * @hidden
  *
  * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
  */
-export declare class CheckDirective implements OnChanges, OnDestroy {
+export declare class CheckDirective extends BaseCheckDirective implements OnChanges, OnDestroy {
     private treeView;
     /**
      * Specifies whether items should be checked on click,
@@ -37,7 +38,7 @@ export declare class CheckDirective implements OnChanges, OnDestroy {
      * 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).
      */
-    private checkedKeys;
+    checkedKeys: Set<any>;
     private subscriptions;
     private clickSubscription;
     constructor(treeView: TreeViewComponent);
@@ -49,8 +50,5 @@ export declare class CheckDirective implements OnChanges, OnDestroy {
     private unsubscribeClick;
     private checkNode;
     private checkParents;
-    private addItem;
-    private removeItem;
-    private isItemChecked;
     private isItemIndeterminate;
 }

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

@@ -7,14 +7,16 @@ import { Directive, EventEmitter, Input, Output } from '@angular/core';
 import { TreeViewComponent } from '@progress/kendo-angular-treeview';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
-import { fetchDescendentNodes, getHierarchicalItemLevel, isPresent, valueFrom } from '../../common/util';
+import { fetchDescendentNodes, isPresent } from '../../common/util';
+import { BaseCheckDirective } from './base-check.directive';
 /**
  * @hidden
  *
  * A directive which manages the in-memory checked state of the MultiSelectTree nodes.
  */
-let CheckDirective = class CheckDirective {
+let CheckDirective = class CheckDirective extends BaseCheckDirective {
     constructor(treeView) {
+        super();
         this.treeView = treeView;
         /**
          * Fires when the `checkedItems` collection was updated.
@@ -37,8 +39,7 @@ let CheckDirective = class CheckDirective {
             this.toggleCheckOnClick();
         }
         if (isPresent(changes.checkedItems)) {
-            this.checkedItems = this.checkedItems || [];
-            this.checkedKeys = new Set(this.checkedItems.map(item => valueFrom(item, this.valueField)));
+            this.updateItems();
         }
     }
     ngOnDestroy() {
@@ -118,28 +119,6 @@ let CheckDirective = class CheckDirective {
             currentParent = currentParent.parent;
         }
     }
-    addItem(item) {
-        if (this.isItemChecked(item)) {
-            return;
-        }
-        const level = getHierarchicalItemLevel(item.index);
-        const candidate = Object.assign({}, item, { level });
-        this.checkedItems.push(candidate);
-        this.checkedKeys.add(valueFrom(candidate, this.valueField));
-    }
-    removeItem(item) {
-        if (!this.isItemChecked(item)) {
-            return;
-        }
-        const level = getHierarchicalItemLevel(item.index);
-        const candidate = Object.assign({}, item, { level });
-        this.checkedItems = this.checkedItems
-            .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
-        this.checkedKeys.delete(valueFrom(candidate, this.valueField));
-    }
-    isItemChecked(item) {
-        return this.checkedKeys.has(valueFrom(item, this.valueField));
-    }
     isItemIndeterminate(lookup) {
         const children = lookup.children;
         if (!Array.isArray(children) || children.length === 0) {

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

@@ -552,8 +552,8 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
             dataItem;
         const shouldUpdateValue = newValue !== this.value;
         if (shouldUpdateValue) {
-            this.dataItem = dataItem;
             this.value = newValue;
+            this.dataItem = dataItem;
             this.emitValueChange(this.value);
         }
         this.togglePopup(false);
@@ -753,7 +753,6 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
     }
     clearState() {
         this.text = undefined;
-        this.valueDepth = undefined;
         this.selectedKeys = [];
     }
     subscribeEvents() {

package/dist/es2015/dropdowntrees/multiselecttree.component.d.ts

@@ -46,6 +46,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     container: ViewContainerRef;
     treeview: TreeViewComponent;
     private filterInput;
+    private checkAllInput;
     /**
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
@@ -160,6 +161,12 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
      * @default false
      */
     filterable: boolean;
+    /**
+     * 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
+     */
+    checkAll: boolean;
     /**
      * A function which determines if a specific node has child nodes.
      */
@@ -302,6 +309,8 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     private readonly isTagFocused;
     private readonly isTreeViewActive;
     private readonly isWrapperActive;
+    private readonly isFilterActive;
+    private readonly isCheckAllActive;
     /**
      * @hidden
      */
@@ -419,6 +428,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
      * @hidden
      */
     messageFor(key: string): string;
+    lastAction: 'check' | 'uncheck';
     /**
      * @hidden
      */
@@ -458,6 +468,10 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
      * @hidden
      */
     handleFilterInputChange(term: string): void;
+    /**
+     * @hidden
+     */
+    toggleCheckAll(): void;
     protected onTouchedCallback: Function;
     protected onChangeCallback: Function;
     protected verifySettings(): void;

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

@@ -107,6 +107,12 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
          * @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.
          */
@@ -210,6 +216,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         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';
@@ -219,7 +226,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         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();
             }
             /**
@@ -450,6 +457,12 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
     get isWrapperActive() {
         return document.activeElement === this.wrapper.nativeElement;
     }
+    get isFilterActive() {
+        return this.filterInput && document.activeElement === this.filterInput.nativeElement;
+    }
+    get isCheckAllActive() {
+        return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
+    }
     ngOnInit() {
         this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
@@ -666,6 +679,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
      */
     handleCheckedItemsChange(items) {
         this.valueDepth = items.map(item => item.level);
+        this.lastAction = items.length > this.dataItems.length ? 'check' : 'uncheck';
         this.dataItems = items.slice();
         this.updateValue(this.dataItems);
     }
@@ -754,6 +768,13 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         this.filterChange.next(term);
         this.allNodesHidden = this.nodes.every((node, index) => !this.isVisible(node, String(index)));
     }
+    /**
+     * @hidden
+     */
+    toggleCheckAll() {
+        this.checkAllInput.nativeElement.focus();
+        this.checkAllInput.nativeElement.click();
+    }
     verifySettings() {
         if (!isDevMode()) {
             return;
@@ -876,17 +897,20 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             return;
         }
         const isFirstNodeActive = this.treeview['navigationService']['activeIndex'] === '0';
-        if (this.filterable) {
-            const 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();
         }
     }
     handleDownKey(event) {
@@ -894,9 +918,14 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             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();
@@ -1054,6 +1083,10 @@ tslib_1.__decorate([
     ViewChild('filterInput', { static: false }),
     tslib_1.__metadata("design:type", ElementRef)
 ], MultiSelectTreeComponent.prototype, "filterInput", void 0);
+tslib_1.__decorate([
+    ViewChild('checkAllInput', { static: false }),
+    tslib_1.__metadata("design:type", ElementRef)
+], MultiSelectTreeComponent.prototype, "checkAllInput", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Number),
@@ -1136,6 +1169,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
 ], MultiSelectTreeComponent.prototype, "filterable", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], MultiSelectTreeComponent.prototype, "checkAll", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
@@ -1243,6 +1280,9 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
 
             i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
+            checkAllText="Check all"
         >
         </ng-container>
         <div #wrapper
@@ -1311,9 +1351,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
                     #filterInput
                     (input)="handleFilterInputChange($event.target.value)"
                     [filterInput]="filterable && !touchEnabled"
-                    (keydown.arrowdown)="handleKeydown($event)"
-                    (keydown.arrowup)="handleKeydown($event)"
-                    (keydown.alt.arrowup)="handleKeydown($event)"
+                    (keydown)="handleKeydown($event)"
                     [(ngModel)]="filter"
                     class="k-textbox"
                     role="textbox"
@@ -1336,6 +1374,35 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = tslib_1.__decorate([
                     templateRef: headerTemplate?.templateRef
                 }">
             </ng-template>
+            <div *ngIf="checkAll" class="k-check-all">
+                <input
+                    #checkAllInput
+                    [checkAll]="!filterable && !touchEnabled"
+                    type="checkbox"
+                    class="k-checkbox"
+                    role="checkbox"
+                    tabindex="0"
+                    aria-disabled="false"
+                    aria-readonly="false"
+                    [treeview]="treeview"
+                    [checkedItems]="checkedItems"
+                    [valueField]="valueField"
+                    [lastAction]="lastAction"
+                    (checkedItemsChange)="handleCheckedItemsChange($event)"
+                    (keydown)="handleKeydown($event)"
+                    [kendoEventsOutsideAngular]="{
+                        blur: handleBlur
+                    }"
+                    [scope]="this"
+                >
+                <span
+                    class="k-checkbox-label"
+                    (click)="toggleCheckAll()"
+                    (mousedown)="$event.preventDefault()"
+                >
+                    {{ messageFor('checkAllText') }}
+                </span>
+            </div>
             <kendo-treeview
                 #treeview
                 [nodes]="data"

package/dist/es2015/index.d.ts

@@ -24,5 +24,7 @@ export { TagListComponent } from './common/taglist.component';
 export { NoDataTemplateDirective } from './common/templates/no-data-template.directive';
 export { TagTemplateDirective } from './common/templates/tag-template.directive';
 export { DROPDOWNLIST_VALUE_ACCESSOR } from './dropdownlist/dropdownlist.component';
+export { BaseCheckDirective } from './dropdowntrees/checked-state/base-check.directive';
+export { CheckAllDirective } from './dropdowntrees/checked-state/check-all.directive';
 export { CheckDirective } from './dropdowntrees/checked-state/check.directive';
 export { MultiSelectTreeSummaryTagDirective } from './dropdowntrees/summary-tag/summary-tag.directive';

package/dist/es2015/index.js

@@ -24,5 +24,7 @@ export { TagListComponent } from './common/taglist.component';
 export { NoDataTemplateDirective } from './common/templates/no-data-template.directive';
 export { TagTemplateDirective } from './common/templates/tag-template.directive';
 export { DROPDOWNLIST_VALUE_ACCESSOR } from './dropdownlist/dropdownlist.component';
+export { BaseCheckDirective } from './dropdowntrees/checked-state/base-check.directive';
+export { CheckAllDirective } from './dropdowntrees/checked-state/check-all.directive';
 export { CheckDirective } from './dropdowntrees/checked-state/check.directive';
 export { MultiSelectTreeSummaryTagDirective } from './dropdowntrees/summary-tag/summary-tag.directive';