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

package/dist/es/common/list.component.js

@@ -396,7 +396,7 @@ var ListComponent = /** @class */ (function () {
     ListComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-list',
-            template: "\n    <div *ngIf=\"dataService.grouped\"\n        class='k-outer-group-header k-first'\n        [ngClass]=\"{'k-virtual-item': virtual}\"\n        [ngStyle]=\"{\n            'height.px': virtual?.itemHeight,\n            'minHeight.px' : virtual?.itemHeight,\n            'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n        >\n        <ng-template *ngIf=\"fixedGroupTemplate\"\n            [templateContext]=\"{\n                templateRef: fixedGroupTemplate.templateRef,\n                $implicit: currentGroup\n            }\">\n        </ng-template>\n        <ng-template [ngIf]=\"!fixedGroupTemplate\"><strong>{{ currentGroup }}</strong> </ng-template>\n    </div>\n    <div #content\n         [ngClass]=\"{ 'k-virtual-content': virtual, 'k-list-scroller': !virtual }\"\n         [style.maxHeight.px]=\"height\"\n         [style.overflowY]=\"overflowY\"\n         unselectable=\"on\">\n    <ul #list\n        role=\"listbox\"\n        [class]=\"listClass\"\n        [ngClass]=\"{ 'k-virtual-list': virtual }\"\n        [attr.id]=\"id\"\n        [attr.aria-hidden]=\"!show\">\n         <ng-template *ngIf=\"!dataService.grouped && show\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                role=\"option\"\n                kendoDropDownsSelectable\n                [checkboxes]=\"checkboxes\"\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"itemIndex + startFrom\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem)\"\n                [attr.tabIndex]=\"-1\"\n                class=\"k-item\"\n                [ngClass]=\"{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(itemIndex) }\">\n                <label class=\"k-checkbox-label\">\n                    <input *ngIf=\"checkboxes.enabled\"\n                            type=\"checkbox\"\n                            class=\"k-checkbox\"\n                            (change)=\"onCheckedChange($event, itemIndex)\"\n                            [checked]=\"isChecked(itemIndex)\"\n                    />\n                </label>\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\">{{ getText(dataItem) }}</ng-template>\n            </li>\n         </ng-template>\n         <ng-template *ngIf=\"dataService.grouped\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                *ngIf=\"dataItem.header && dataItem.index > 0\"\n                role=\"group\"\n                class='k-outer-group-header'\n                [ngClass]=\"{ 'k-virtual-item': virtual }\"\n                [ngStyle]=\"{\n                    'height.px': virtual?.itemHeight,\n                    'minHeight.px' : virtual?.itemHeight,\n                    'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n                [attr.group-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\">\n                    <ng-template *ngIf=\"groupTemplate\"\n                          [templateContext]=\"{\n                            templateRef: groupTemplate.templateRef,\n                            $implicit: dataItem.value\n                    }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!groupTemplate\"><strong> {{ dataItem.value }}</strong> </ng-template>\n              </li>\n              <li\n                *ngIf=\"!dataItem.header\"\n                role=\"option\"\n                kendoDropDownsSelectable\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"dataItem.offsetIndex\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.absolute-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\"\n                class=\"k-item\"\n                [ngClass]=\"{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(dataItem.offsetIndex) }\">\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem.value\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\">{{ getText(dataItem.value) }}</ng-template>\n            </li>\n        </ng-template>\n        <kendo-resize-sensor\n            *ngIf=\"!virtual\"\n            (resize)=\"listResize.emit()\"\n        >\n        </kendo-resize-sensor>\n    </ul>\n    <div *ngIf=\"virtual\" #virtualContainer class=\"k-height-container\" role=\"presentation\">\n        <div [style.height.px]=\"scrollHeight\">\n            <kendo-resize-sensor (resize)=\"listResize.emit()\"></kendo-resize-sensor>\n        </div>\n    </div>\n    </div>\n  "
+            template: "\n    <div *ngIf=\"dataService.grouped\"\n        class='k-outer-group-header k-first'\n        [ngClass]=\"{'k-virtual-item': virtual}\"\n        [ngStyle]=\"{\n            'height.px': virtual?.itemHeight,\n            'minHeight.px' : virtual?.itemHeight,\n            'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n        >\n        <ng-template *ngIf=\"fixedGroupTemplate\"\n            [templateContext]=\"{\n                templateRef: fixedGroupTemplate.templateRef,\n                $implicit: currentGroup\n            }\">\n        </ng-template>\n        <ng-template [ngIf]=\"!fixedGroupTemplate\"><strong>{{ currentGroup }}</strong> </ng-template>\n    </div>\n    <div #content\n         [ngClass]=\"{ 'k-virtual-content': virtual, 'k-list-scroller': !virtual }\"\n         [style.maxHeight.px]=\"height\"\n         [style.overflowY]=\"overflowY\"\n         unselectable=\"on\">\n    <ul #list\n        role=\"listbox\"\n        [class]=\"listClass\"\n        [ngClass]=\"{ 'k-virtual-list': virtual }\"\n        [attr.id]=\"id\"\n        [attr.aria-hidden]=\"!show\">\n         <ng-template *ngIf=\"!dataService.grouped && show\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                role=\"option\"\n                kendoDropDownsSelectable\n                [checkboxes]=\"checkboxes\"\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"itemIndex + startFrom\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem)\"\n                [attr.tabIndex]=\"-1\"\n                class=\"k-item\"\n                [ngClass]=\"{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(itemIndex) }\">\n                <label *ngIf=\"checkboxes.enabled\"\n                    class=\"k-checkbox-label\">\n                    <input type=\"checkbox\"\n                        class=\"k-checkbox\"\n                        (change)=\"onCheckedChange($event, itemIndex)\"\n                        [checked]=\"isChecked(itemIndex)\"\n                    />\n                </label>\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\">{{ getText(dataItem) }}</ng-template>\n            </li>\n         </ng-template>\n         <ng-template *ngIf=\"dataService.grouped\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                *ngIf=\"dataItem.header && dataItem.index > 0\"\n                role=\"group\"\n                class='k-outer-group-header'\n                [ngClass]=\"{ 'k-virtual-item': virtual }\"\n                [ngStyle]=\"{\n                    'height.px': virtual?.itemHeight,\n                    'minHeight.px' : virtual?.itemHeight,\n                    'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n                [attr.group-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\">\n                    <ng-template *ngIf=\"groupTemplate\"\n                          [templateContext]=\"{\n                            templateRef: groupTemplate.templateRef,\n                            $implicit: dataItem.value\n                    }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!groupTemplate\"><strong> {{ dataItem.value }}</strong> </ng-template>\n              </li>\n              <li\n                *ngIf=\"!dataItem.header\"\n                role=\"option\"\n                kendoDropDownsSelectable\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"dataItem.offsetIndex\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.absolute-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\"\n                class=\"k-item\"\n                [ngClass]=\"{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(dataItem.offsetIndex) }\">\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem.value\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\">{{ getText(dataItem.value) }}</ng-template>\n            </li>\n        </ng-template>\n        <kendo-resize-sensor\n            *ngIf=\"!virtual\"\n            (resize)=\"listResize.emit()\"\n        >\n        </kendo-resize-sensor>\n    </ul>\n    <div *ngIf=\"virtual\" #virtualContainer class=\"k-height-container\" role=\"presentation\">\n        <div [style.height.px]=\"scrollHeight\">\n            <kendo-resize-sensor (resize)=\"listResize.emit()\"></kendo-resize-sensor>\n        </div>\n    </div>\n    </div>\n  "
         }),
         tslib_1.__metadata("design:paramtypes", [DataService,
             ElementRef,

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

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

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

@@ -16,6 +16,7 @@ import { ListItemDirective } from './list-item.directive';
 import { SelectableDirective } from './selection/selectable.directive';
 import { TemplateContextDirective } from './templates/template-context.directive';
 import { CheckDirective } from '../dropdowntrees/checked-state/check.directive';
+import { CheckAllDirective } from '../dropdowntrees/checked-state/check-all.directive';
 var INTERNAL_DIRECTIVES = [
     ListComponent,
     ListItemDirective,
@@ -23,7 +24,8 @@ var INTERNAL_DIRECTIVES = [
     SearchBarComponent,
     TemplateContextDirective,
     TagListComponent,
-    CheckDirective
+    CheckDirective,
+    CheckAllDirective
 ];
 /**
  * @hidden

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

@@ -0,0 +1,54 @@
+/**-----------------------------------------------------------------------------------------
+* 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.
+ */
+var BaseCheckDirective = /** @class */ (function () {
+    function BaseCheckDirective() {
+    }
+    BaseCheckDirective.prototype.addItem = function (item) {
+        if (this.isItemChecked(item)) {
+            return;
+        }
+        var level = getHierarchicalItemLevel(item.index);
+        var candidate = tslib_1.__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 = tslib_1.__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); }));
+    };
+    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);
+    return BaseCheckDirective;
+}());
+export { BaseCheckDirective };

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

@@ -0,0 +1,181 @@
+/**-----------------------------------------------------------------------------------------
+* 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.
+ */
+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 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 = function (item) {
+            return _this.treeview.isVisible(item.dataItem, item.index) &&
+                !_this.treeview.isDisabled(item.dataItem, item.index);
+        };
+        pendingCheck.push(itemLookup.item);
+        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([
+        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);
+    return CheckAllDirective;
+}(BaseCheckDirective));
+export { CheckAllDirective };

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

@@ -7,39 +7,41 @@ 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.
  */
-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 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 () {
@@ -124,29 +126,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 = tslib_1.__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 = tslib_1.__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) {
@@ -186,5 +165,5 @@ var CheckDirective = /** @class */ (function () {
         tslib_1.__metadata("design:paramtypes", [TreeViewComponent])
     ], CheckDirective);
     return CheckDirective;
-}());
+}(BaseCheckDirective));
 export { CheckDirective };

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

@@ -166,6 +166,10 @@ var DropDownTreeComponent = /** @class */ (function () {
          * @hidden
          */
         this.selectedKeys = [];
+        /**
+         * @hidden
+         */
+        this.filterStateChange = new EventEmitter();
         /**
          * @hidden
          */

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

@@ -106,6 +106,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.
          */
@@ -180,6 +186,10 @@ var MultiSelectTreeComponent = /** @class */ (function () {
          * Fires when the value of the built-in filter input element changes.
          */
         this.filterChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.filterStateChange = new EventEmitter();
         /**
          * @hidden
          */
@@ -205,6 +215,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';
@@ -220,7 +231,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();
                 }
                 /**
@@ -541,6 +552,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');
@@ -764,6 +789,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);
     };
@@ -785,12 +811,12 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         if (tag instanceof Array) {
             // Remove group tag
             this.dataItems = this.dataItems.filter(function (_item, i) { return i < _this.showAfter || _this.disabledIndices.has(i); });
-            this.valueDepth = this.valueDepth.filter(function (_item, i) { return i < _this.showAfter; });
+            this.valueDepth = this.valueDepth.filter(function (_item, i) { return i < _this.showAfter || _this.disabledIndices.has(i); });
         }
         else {
             // Remove single tag
-            this.dataItems = this.dataItems.filter(function (_item, i) { return i !== index; });
-            this.valueDepth = this.valueDepth.filter(function (_item, i) { return i !== index; });
+            this.dataItems = this.dataItems.filter(function (_item, i) { return i !== index || _this.disabledIndices.has(i); });
+            this.valueDepth = this.valueDepth.filter(function (_item, i) { return i !== index || _this.disabledIndices.has(i); });
         }
         this.updateValue(this.dataItems);
         // focus the wrapper if the component is not focused - the floating label reacts to focus/blur
@@ -816,7 +842,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         this.value = this.value.filter(function (_item, index) { return _this.disabledIndices.has(index); });
         this.dataItems = this.dataItems.filter(function (_item, index) { return _this.disabledIndices.has(index); });
         this.valueDepth = this.valueDepth.filter(function (_depth, index) { return _this.disabledIndices.has(index); });
-        this.emitValueChange();
+        this.emitValueChange(this.value);
     };
     /**
      * @hidden
@@ -856,6 +882,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;
@@ -981,17 +1014,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) {
@@ -999,9 +1035,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();
@@ -1162,6 +1203,10 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         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),
@@ -1244,6 +1289,10 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         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)
@@ -1344,7 +1393,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                (mousedown)=\"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, Optional()), tslib_1.__param(7, Inject(TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [PopupService,

package/dist/es/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';

package/dist/es/multiselect/multiselect.component.js

@@ -1006,7 +1006,11 @@ var MultiSelectComponent = /** @class */ (function () {
             data = data.filter(function (item) { return !item.header; }).map(function (item) { return item.value; });
         }
         var dataItemValues = new Set(dataItems.map(function (item) { return getter(item, _this.valueField); }));
-        this.value = this.value.filter(function (value) { return !dataItemValues.has(getter(value, _this.valueField)); });
+        this.value = this.value.filter(function (value) {
+            var index = selectedIndices([value], data, _this.valueField)[0];
+            var isDataItemDisabled = _this.disabledItemsService.isIndexDisabled(index);
+            return !dataItemValues.has(getter(value, _this.valueField)) || isDataItemDisabled;
+        });
         this.emitValueChange();
     };
     MultiSelectComponent.prototype.removeSingleTag = function (dataItem) {
@@ -1016,6 +1020,9 @@ var MultiSelectComponent = /** @class */ (function () {
             data = data.filter(function (item) { return !item.header; }).map(function (item) { return item.value; });
         }
         var index = selectedIndices([dataItem], data, this.valueField)[0];
+        if (this.disabledItemsService.isIndexDisabled(index)) {
+            return;
+        }
         if (isNumber(index)) {
             this.selectionService.unselect(index);
             this.selectionService.focused = index;