@progress/kendo-angular-treeview 5.4.3 → 6.0.0

package/dist/es/check.directive.js

@@ -8,6 +8,7 @@ import { TreeViewComponent } from './treeview.component';
 import { fetchLoadedDescendants, isBoolean, isPresent, noop } from './utils';
 import { Subscription } from 'rxjs';
 import { filter, take, switchMap, tap } from 'rxjs/operators';
+import { isChanged } from '@progress/kendo-angular-common';
 var indexChecked = function (keys, index) { return keys.filter(function (k) { return k === index; }).length > 0; };
 var ɵ0 = indexChecked;
 var matchKey = function (index) { return function (k) {
@@ -46,7 +47,10 @@ var CheckDirective = /** @class */ (function () {
             'multiple': function (e) { return _this.checkMultiple(e); },
             'single': function (e) { return _this.checkSingle(e); }
         };
-        this._checkedKeys = [];
+        /**
+         * Reflectes the internal `checkedKeys` state.
+         */
+        this.state = new Set();
         this.subscriptions.add(this.treeView.checkedChange
             .subscribe(function (e) { return _this.check(e); }));
         var expandedItems = [];
@@ -65,20 +69,6 @@ var CheckDirective = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(CheckDirective.prototype, "checkedKeys", {
-        /**
-         * Defines the collection that will store the checked keys
-         * ([see example]({% slug checkboxes_treeview %})).
-         */
-        get: function () {
-            return this._checkedKeys;
-        },
-        set: function (keys) {
-            this._checkedKeys = keys;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(CheckDirective.prototype, "options", {
         get: function () {
             var defaultOptions = {
@@ -103,6 +93,9 @@ var CheckDirective = /** @class */ (function () {
             this.treeView.checkboxes = this.options.enabled;
             this.toggleCheckOnClick();
         }
+        if (isChanged('checkedKeys', changes, false) && changes.checkedKeys.currentValue !== this.lastChange) {
+            this.state = new Set(changes.checkedKeys.currentValue);
+        }
     };
     CheckDirective.prototype.ngOnDestroy = function () {
         this.subscriptions.unsubscribe();
@@ -112,11 +105,11 @@ var CheckDirective = /** @class */ (function () {
         if (!this.checkKey) {
             return this.isIndexChecked(index);
         }
-        var keyIndex = this.checkedKeys.indexOf(this.itemKey({ dataItem: dataItem, index: index }));
-        return keyIndex > -1 ? 'checked' : 'none';
+        var hasKey = this.state.has(this.itemKey({ dataItem: dataItem, index: index }));
+        return hasKey ? 'checked' : 'none';
     };
     CheckDirective.prototype.isIndexChecked = function (index) {
-        var checkedKeys = this.checkedKeys.filter(matchKey(index));
+        var checkedKeys = Array.from(this.state).filter(matchKey(index));
         if (indexChecked(checkedKeys, index)) {
             return 'checked';
         }
@@ -147,7 +140,11 @@ var CheckDirective = /** @class */ (function () {
     };
     CheckDirective.prototype.checkSingle = function (node) {
         var key = this.itemKey(node.item);
-        this.checkedKeys = this.checkedKeys[0] !== key ? [key] : [];
+        var hasKey = this.state.has(key);
+        this.state.clear();
+        if (!hasKey) {
+            this.state.add(key);
+        }
         this.notify();
     };
     CheckDirective.prototype.checkMultiple = function (node) {
@@ -184,7 +181,6 @@ var CheckDirective = /** @class */ (function () {
         if (!isPresent(currentKey)) {
             return;
         }
-        var checkedKeys = new Set(this.checkedKeys);
         var pendingCheck = [currentKey];
         if (this.options.checkChildren) {
             var descendants = fetchLoadedDescendants(node, function (_a) {
@@ -198,63 +194,59 @@ var CheckDirective = /** @class */ (function () {
             });
             pendingCheck.push.apply(pendingCheck, descendants);
         }
-        var shouldCheck = !checkedKeys.has(currentKey);
+        var shouldCheck = !this.state.has(currentKey);
         pendingCheck.forEach(function (key) {
             if (shouldCheck) {
-                checkedKeys.add(key);
+                _this.state.add(key);
             }
             else {
-                checkedKeys.delete(key);
+                _this.state.delete(key);
             }
         });
-        this.checkedKeys = Array.from(checkedKeys);
     };
     CheckDirective.prototype.checkParents = function (parent) {
         var _this = this;
         if (!isPresent(parent)) {
             return;
         }
-        var checkedKeys = new Set(this.checkedKeys);
         var currentParent = parent;
         while (currentParent) {
             var parentKey = this.itemKey(currentParent.item);
-            var allChildrenSelected = currentParent.children.every(function (item) { return checkedKeys.has(_this.itemKey(item)); });
+            var allChildrenSelected = currentParent.children.every(function (item) { return _this.state.has(_this.itemKey(item)); });
             if (allChildrenSelected) {
-                checkedKeys.add(parentKey);
+                this.state.add(parentKey);
             }
             else {
-                checkedKeys.delete(parentKey);
+                this.state.delete(parentKey);
             }
             currentParent = currentParent.parent;
         }
-        this.checkedKeys = Array.from(checkedKeys);
     };
     CheckDirective.prototype.notify = function () {
-        this.checkedKeysChange.emit(this.checkedKeys.slice());
+        this.lastChange = Array.from(this.state);
+        this.checkedKeysChange.emit(this.lastChange);
     };
     CheckDirective.prototype.addCheckedItemsChildren = function (lookups) {
         var _this = this;
         if (!isPresent(lookups) || lookups.length === 0) {
             return;
         }
-        var initiallyCheckedItemsCount = this.checkedKeys.length;
-        var checkedKeys = new Set(this.checkedKeys);
+        var initiallyCheckedItemsCount = this.state.size;
         lookups.forEach(function (lookup) {
             var itemKey = _this.itemKey(lookup.item);
-            if (!checkedKeys.has(itemKey)) {
+            if (!_this.state.has(itemKey)) {
                 return;
             }
             lookup.children.forEach(function (item) {
                 // ensure both the parent item and each child node is enabled
                 if (!_this.treeView.isDisabled(lookup.item.dataItem, lookup.item.index) &&
                     !_this.treeView.isDisabled(item.dataItem, item.index)) {
-                    checkedKeys.add(_this.itemKey(item));
+                    _this.state.add(_this.itemKey(item));
                 }
             });
         });
-        var hasNewlyCheckedItems = initiallyCheckedItemsCount !== checkedKeys.size;
+        var hasNewlyCheckedItems = initiallyCheckedItemsCount !== this.state.size;
         if (hasNewlyCheckedItems) {
-            this.checkedKeys = Array.from(checkedKeys);
             this.zone.run(function () { return _this.notify(); });
         }
     };
@@ -269,9 +261,8 @@ var CheckDirective = /** @class */ (function () {
     ], CheckDirective.prototype, "checkKey", void 0);
     tslib_1.__decorate([
         Input(),
-        tslib_1.__metadata("design:type", Array),
-        tslib_1.__metadata("design:paramtypes", [Array])
-    ], CheckDirective.prototype, "checkedKeys", null);
+        tslib_1.__metadata("design:type", Array)
+    ], CheckDirective.prototype, "checkedKeys", void 0);
     tslib_1.__decorate([
         Input('kendoTreeViewCheckable'),
         tslib_1.__metadata("design:type", Object)

package/dist/es/checkbox/checkbox.component.js

@@ -5,6 +5,7 @@
 import * as tslib_1 from "tslib";
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2 } from '@angular/core';
 import { guid } from '@progress/kendo-angular-common';
+import { getSizeClass } from '../utils';
 /**
  * @hidden
  *
@@ -24,6 +25,10 @@ var CheckBoxComponent = /** @class */ (function () {
          * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
         this.tabindex = 0;
+        /**
+         * Specifies the size of the component.
+         */
+        this.size = 'medium';
         /**
          * Fires when the user changes the check state of the component.
          */
@@ -51,6 +56,13 @@ var CheckBoxComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(CheckBoxComponent.prototype, "checkBoxClasses", {
+        get: function () {
+            return "k-checkbox " + (this.size ? getSizeClass('checkbox', this.size) : '') + " k-rounded-md";
+        },
+        enumerable: true,
+        configurable: true
+    });
     CheckBoxComponent.prototype.ngOnInit = function () {
         this.renderer.removeAttribute(this.element.nativeElement, "tabindex");
     };
@@ -93,6 +105,10 @@ var CheckBoxComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Number)
     ], CheckBoxComponent.prototype, "tabindex", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], CheckBoxComponent.prototype, "size", void 0);
     tslib_1.__decorate([
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -100,7 +116,7 @@ var CheckBoxComponent = /** @class */ (function () {
     CheckBoxComponent = tslib_1.__decorate([
         Component({
             selector: 'kendo-checkbox',
-            template: "\n        <input\n            class=\"k-checkbox\"\n            type=\"checkbox\"\n            [id]=\"id\"\n            [checked]=\"checked\"\n            [indeterminate]=\"indeterminate\"\n            [tabindex]=\"tabindex\"\n            (change)=\"handleChange($event)\"\n        />\n        <label\n            class=\"k-checkbox-label\"\n            tabindex=\"-1\"\n            [for]=\"id\"\n        >{{labelText}}</label>\n    "
+            template: "\n        <input\n            type=\"checkbox\"\n            [class]=\"checkBoxClasses\"\n            [id]=\"id\"\n            [checked]=\"checked\"\n            [indeterminate]=\"indeterminate\"\n            [tabindex]=\"tabindex\"\n            (change)=\"handleChange($event)\"\n        />\n        <label\n            class=\"k-checkbox-label\"\n            tabindex=\"-1\"\n            [for]=\"id\"\n        >{{labelText}}</label>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [ElementRef,
             Renderer2,

package/dist/es/drag-and-drop/drag-and-drop-utils.js

@@ -96,12 +96,12 @@ export var getDropPosition = function (draggedItem, target, clientY, targetTreeV
     if (!(isPresent(draggedItem) && isPresent(target) && isPresent(targetTreeView) && isPresent(containerOffset))) {
         return;
     }
-    // the .k-mid element starts just after the checkbox/expand arrow and stretches till the end of the treeview on the right
-    var item = closestWithMatch(target, '.k-mid');
+    // the .k-treeview-mid element starts just after the checkbox/expand arrow and stretches till the end of the treeview on the right
+    var item = closestWithMatch(target, '.k-treeview-mid');
     if (!isPresent(item)) {
         return;
     }
-    // the content element (.k-in:not(.k-treeview-load-more-button)) holds just the treeview item text
+    // the content element (.k-treeview-leaf:not(.k-treeview-load-more-button)) holds just the treeview item text
     var content = getContentElement(item);
     var targetChildOfDraggedItem = hasParent(item, closestNode(draggedItem));
     if (!isPresent(content) || (content === draggedItem) || targetChildOfDraggedItem) {

package/dist/es/drag-and-drop/drag-and-drop.directive.js

@@ -107,7 +107,7 @@ var DragAndDropDirective = /** @class */ (function () {
             return;
         }
         // store the drag target on press, show it only when it's actually dragged
-        this.draggedItem = closestWithMatch(originalEvent.target, '.k-in');
+        this.draggedItem = closestWithMatch(originalEvent.target, '.k-treeview-leaf');
         // record the current pointer down coords - copared to the `startDragAfter` value to calculate whether to initiate dragging
         this.pendingDragStartEvent = originalEvent;
     };
@@ -129,7 +129,7 @@ var DragAndDropDirective = /** @class */ (function () {
         }
         var targetTreeView = this.getTargetTreeView(dropTarget);
         var dropPosition = getDropPosition(this.draggedItem, dropTarget, clientY, targetTreeView, this.containerOffset);
-        var dropHintAnchor = closestWithMatch(dropTarget, '.k-mid');
+        var dropHintAnchor = closestWithMatch(dropTarget, '.k-treeview-mid');
         var dropAction = getDropAction(dropPosition, dropTarget);
         var sourceItem = treeItemFromEventTarget(this.treeview, this.draggedItem);
         var destinationItem = treeItemFromEventTarget(targetTreeView, dropTarget);

package/dist/es/expand.directive.js

@@ -8,6 +8,7 @@ import { ExpandableComponent } from './expandable-component';
 import { Subscription, merge } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { isArrayWithAtLeastOneItem, isBoolean, sameValues } from './utils';
+import { isChanged } from '@progress/kendo-angular-common';
 var DEFAULT_FILTER_EXPAND_SETTINGS = {
     maxAutoExpandResults: -1,
     expandMatches: false,
@@ -32,8 +33,11 @@ var ExpandDirective = /** @class */ (function () {
          */
         this.expandedKeysChange = new EventEmitter();
         this.subscriptions = new Subscription();
-        this._expandedKeys = [];
-        this.originalExpandedKeys = [];
+        /**
+         * Reflectes the internal `expandedKeys` state.
+         */
+        this.state = new Set();
+        this.originalExpandedKeys = new Set();
         this.isFiltered = false;
         /**
          * Fills array with the correct expand keys according to wrapper metadata.
@@ -66,7 +70,7 @@ var ExpandDirective = /** @class */ (function () {
             this.subscriptions.add(this.component.filterStateChange.subscribe(this.handleAutoExpand.bind(this)));
         }
         this.component.isExpanded = function (dataItem, index) {
-            return _this.expandedKeys.indexOf(_this.itemKey({ dataItem: dataItem, index: index })) > -1;
+            return _this.state.has(_this.itemKey({ dataItem: dataItem, index: index }));
         };
     }
     Object.defineProperty(ExpandDirective.prototype, "isExpanded", {
@@ -87,19 +91,11 @@ var ExpandDirective = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ExpandDirective.prototype, "expandedKeys", {
-        /**
-         * Defines the collection that will store the expanded keys.
-         */
-        get: function () {
-            return this._expandedKeys;
-        },
-        set: function (keys) {
-            this._expandedKeys = keys;
-        },
-        enumerable: true,
-        configurable: true
-    });
+    ExpandDirective.prototype.ngOnChanges = function (changes) {
+        if (isChanged('expandedKeys', changes, false) && changes.expandedKeys.currentValue !== this.lastChange) {
+            this.state = new Set(changes.expandedKeys.currentValue);
+        }
+    };
     ExpandDirective.prototype.ngOnDestroy = function () {
         this.subscriptions.unsubscribe();
     };
@@ -119,19 +115,19 @@ var ExpandDirective = /** @class */ (function () {
     };
     ExpandDirective.prototype.toggleExpand = function (_a) {
         var index = _a.index, dataItem = _a.dataItem, expand = _a.expand;
-        var item = this.itemKey({ index: index, dataItem: dataItem });
-        var idx = this.expandedKeys.indexOf(item);
+        var key = this.itemKey({ index: index, dataItem: dataItem });
+        var isExpanded = this.state.has(key);
         var notify = false;
-        if (idx > -1 && !expand) {
-            this.expandedKeys.splice(idx, 1);
+        if (isExpanded && !expand) {
+            this.state.delete(key);
             notify = true;
         }
-        else if (idx === -1 && expand) {
-            this.expandedKeys.push(item);
+        else if (!isExpanded && expand) {
+            this.state.add(key);
             notify = true;
         }
         if (notify) {
-            this.expandedKeysChange.emit(this.expandedKeys);
+            this.notify();
         }
     };
     ExpandDirective.prototype.handleAutoExpand = function (_a) {
@@ -142,7 +138,7 @@ var ExpandDirective = /** @class */ (function () {
         }
         var _b = this.filterExpandSettings, maxAutoExpandResults = _b.maxAutoExpandResults, autoExpandMatches = _b.expandMatches, expandedOnClear = _b.expandedOnClear;
         if (!this.isFiltered) {
-            this.originalExpandedKeys = this.expandedKeys.slice();
+            this.originalExpandedKeys = new Set(this.state);
         }
         var exitingFilteredState = this.isFiltered && !term;
         var maxExceeded = maxAutoExpandResults !== -1 && matchCount > maxAutoExpandResults;
@@ -150,18 +146,18 @@ var ExpandDirective = /** @class */ (function () {
         if (exitAutoExpandedState) {
             switch (expandedOnClear) {
                 case "initial": {
-                    if (!sameValues(this.expandedKeys, this.originalExpandedKeys)) {
-                        this.expandedKeys = this.originalExpandedKeys;
-                        this.expandedKeysChange.emit(this.expandedKeys);
+                    if (!sameValues(this.state, this.originalExpandedKeys)) {
+                        this.state = this.originalExpandedKeys;
+                        this.notify();
                     }
                     break;
                 }
                 case "all": {
-                    this.expandedKeys = nodes.reduce(function (acc, rootNode) {
+                    this.state = new Set(nodes.reduce(function (acc, rootNode) {
                         _this.getEveryExpandKey(acc, rootNode);
                         return acc;
-                    }, []);
-                    this.expandedKeysChange.emit(this.expandedKeys);
+                    }, []));
+                    this.notify();
                     break;
                 }
                 case "unchanged": {
@@ -169,9 +165,9 @@ var ExpandDirective = /** @class */ (function () {
                 }
                 case "none":
                 default: {
-                    if (this.expandedKeys.length !== 0) {
-                        this.expandedKeys = [];
-                        this.expandedKeysChange.emit(this.expandedKeys);
+                    if (this.state.size !== 0) {
+                        this.state.clear();
+                        this.notify();
                     }
                     break;
                 }
@@ -179,16 +175,20 @@ var ExpandDirective = /** @class */ (function () {
             this.isFiltered = false;
             return;
         }
-        var indicesToExpand = nodes.reduce(function (acc, rootNode) {
+        var indicesToExpand = new Set(nodes.reduce(function (acc, rootNode) {
             _this.updateExpandedNodes(acc, rootNode, autoExpandMatches);
             return acc;
-        }, []);
-        if (!sameValues(this.expandedKeys, indicesToExpand)) {
-            this.expandedKeys = indicesToExpand;
-            this.expandedKeysChange.emit(this.expandedKeys);
+        }, []));
+        if (!sameValues(this.state, indicesToExpand)) {
+            this.state = indicesToExpand;
+            this.notify();
         }
         this.isFiltered = true;
     };
+    ExpandDirective.prototype.notify = function () {
+        this.lastChange = Array.from(this.state);
+        this.expandedKeysChange.emit(this.lastChange);
+    };
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Function),
@@ -208,9 +208,8 @@ var ExpandDirective = /** @class */ (function () {
     ], ExpandDirective.prototype, "expandedKeysChange", void 0);
     tslib_1.__decorate([
         Input(),
-        tslib_1.__metadata("design:type", Array),
-        tslib_1.__metadata("design:paramtypes", [Array])
-    ], ExpandDirective.prototype, "expandedKeys", null);
+        tslib_1.__metadata("design:type", Array)
+    ], ExpandDirective.prototype, "expandedKeys", void 0);
     ExpandDirective = tslib_1.__decorate([
         Directive({ selector: '[kendoTreeViewExpandable]' }),
         tslib_1.__metadata("design:paramtypes", [ExpandableComponent])

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1638439762,
+    publishDate: 1642578286,
     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'
 };

package/dist/es/selection/select.directive.js

@@ -7,6 +7,7 @@ import { Directive, EventEmitter, HostBinding, Input, Output } from '@angular/co
 import { TreeViewComponent } from '../treeview.component';
 import { isBoolean, isPresent, noop } from '../utils';
 import { Subscription } from 'rxjs';
+import { isChanged } from '@progress/kendo-angular-common';
 /**
  * A directive which manages the in-memory selection state of the TreeView node
  * ([see example]({% slug selection_treeview %})).
@@ -24,9 +25,12 @@ var SelectDirective = /** @class */ (function () {
             'multiple': function (e) { return _this.selectMultiple(e); },
             'single': function (e) { return _this.selectSingle(e); }
         };
-        this._selectedKeys = [];
+        /**
+         * Reflectes the internal `selectedKeys` state.
+         */
+        this.state = new Set();
         this.subscriptions.add(this.treeView.selectionChange.subscribe(this.select.bind(this)));
-        this.treeView.isSelected = function (dataItem, index) { return (_this.selectedKeys.indexOf(_this.itemKey({ dataItem: dataItem, index: index })) > -1); };
+        this.treeView.isSelected = function (dataItem, index) { return (_this.state.has(_this.itemKey({ dataItem: dataItem, index: index }))); };
     }
     Object.defineProperty(SelectDirective.prototype, "isSelected", {
         /**
@@ -38,20 +42,6 @@ var SelectDirective = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SelectDirective.prototype, "selectedKeys", {
-        /**
-         * Defines the collection that will store the selected keys
-         * ([see example]({% slug selection_treeview %}#toc-selection-modes)).
-         */
-        get: function () {
-            return this._selectedKeys;
-        },
-        set: function (keys) {
-            this._selectedKeys = keys;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(SelectDirective.prototype, "getAriaMultiselectable", {
         get: function () {
             return this.options.mode === 'multiple';
@@ -74,6 +64,11 @@ var SelectDirective = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    SelectDirective.prototype.ngOnChanges = function (changes) {
+        if (isChanged('selectedKeys', changes, false) && changes.selectedKeys.currentValue !== this.lastChange) {
+            this.state = new Set(changes.selectedKeys.currentValue);
+        }
+    };
     SelectDirective.prototype.ngOnDestroy = function () {
         this.subscriptions.unsubscribe();
     };
@@ -98,29 +93,29 @@ var SelectDirective = /** @class */ (function () {
     };
     SelectDirective.prototype.selectSingle = function (node) {
         var key = this.itemKey(node);
-        if (this.selectedKeys[0] === key) {
-            return;
+        if (!this.state.has(key)) {
+            this.state.clear();
+            this.state.add(key);
+            this.notify();
         }
-        this.selectedKeys = [key];
-        this.notify();
     };
     SelectDirective.prototype.selectMultiple = function (node) {
         var key = this.itemKey(node);
-        var idx = this.selectedKeys.indexOf(key);
-        var isSelected = idx > -1;
+        var isSelected = this.state.has(key);
         if (!isPresent(key)) {
             return;
         }
         if (isSelected) {
-            this.selectedKeys.splice(idx, 1);
+            this.state.delete(key);
         }
         else {
-            this.selectedKeys.push(key);
+            this.state.add(key);
         }
         this.notify();
     };
     SelectDirective.prototype.notify = function () {
-        this.selectedKeysChange.emit(this.selectedKeys.slice());
+        this.lastChange = Array.from(this.state);
+        this.selectedKeysChange.emit(this.lastChange);
     };
     tslib_1.__decorate([
         Input(),
@@ -137,9 +132,8 @@ var SelectDirective = /** @class */ (function () {
     ], SelectDirective.prototype, "selection", void 0);
     tslib_1.__decorate([
         Input(),
-        tslib_1.__metadata("design:type", Array),
-        tslib_1.__metadata("design:paramtypes", [Array])
-    ], SelectDirective.prototype, "selectedKeys", null);
+        tslib_1.__metadata("design:type", Array)
+    ], SelectDirective.prototype, "selectedKeys", void 0);
     tslib_1.__decorate([
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)

package/dist/es/size.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/treeview-group.component.js

@@ -33,6 +33,7 @@ var TreeViewGroupComponent = /** @class */ (function () {
         this.role = 'group';
         this.loadOnDemand = true;
         this.textField = "";
+        this.size = 'medium';
         this.initialNodesLoaded = false;
         this.loadingMoreNodes = false;
         this._data = [];
@@ -266,7 +267,7 @@ var TreeViewGroupComponent = /** @class */ (function () {
         this.emitChildrenLoaded(mappedChildren);
     };
     tslib_1.__decorate([
-        HostBinding("class.k-group"),
+        HostBinding("class.k-treeview-group"),
         tslib_1.__metadata("design:type", Boolean)
     ], TreeViewGroupComponent.prototype, "kGroupClass", void 0);
     tslib_1.__decorate([
@@ -329,6 +330,10 @@ var TreeViewGroupComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Object)
     ], TreeViewGroupComponent.prototype, "loadMoreService", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], TreeViewGroupComponent.prototype, "size", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Function)
@@ -372,7 +377,7 @@ var TreeViewGroupComponent = /** @class */ (function () {
                 ])
             ],
             selector: '[kendoTreeViewGroup]',
-            template: "\n        <li\n            *ngFor=\"let node of data; let index = index; trackBy: trackBy\"\n            class=\"k-item k-treeview-item\"\n            [class.k-display-none]=\"!isVisible(node, nodeIndex(index))\"\n            kendoTreeViewItem\n            [attr.aria-setsize]=\"totalNodesCount\"\n            [dataItem]=\"node\"\n            [index]=\"nodeIndex(index)\"\n            [parentDataItem]=\"parentDataItem\"\n            [parentIndex]=\"parentIndex\"\n            [loadOnDemand]=\"loadOnDemand\"\n            [checkable]=\"checkboxes\"\n            [isChecked]=\"isChecked(node, nodeIndex(index))\"\n            [isDisabled]=\"disabled || isDisabled(node, nodeIndex(index))\"\n            [isVisible]=\"isVisible(node, nodeIndex(index))\"\n            [expandable]=\"expandIcons && hasChildren(node)\"\n            [isExpanded]=\"isExpanded(node, nodeIndex(index))\"\n            [selectable]=\"selectable\"\n            [isSelected]=\"isSelected(node, nodeIndex(index))\"\n            [attr.data-treeindex]=\"nodeIndex(index)\"\n        >\n            <div class=\"k-mid\">\n                <span\n                    class=\"k-icon\"\n                    [class.k-i-collapse]=\"isExpanded(node, nodeIndex(index))\"\n                    [class.k-i-expand]=\"!isExpanded(node, nodeIndex(index))\"\n                    [kendoTreeViewLoading]=\"nodeIndex(index)\"\n                    (click)=\"expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))\"\n                    *ngIf=\"expandIcons && hasChildren(node)\"\n                >\n                </span>\n                <kendo-checkbox\n                    *ngIf=\"checkboxes\"\n                    [node]=\"node\"\n                    [index]=\"nodeIndex(index)\"\n                    [isChecked]=\"isChecked\"\n                    (checkStateChange)=\"checkNode(nodeIndex(index))\"\n                    tabindex=\"-1\"\n                ></kendo-checkbox>\n                <span kendoTreeViewItemContent\n                    [attr.data-treeindex]=\"nodeIndex(index)\"\n                    [dataItem]=\"node\"\n                    [index]=\"nodeIndex(index)\"\n                    [initialSelection]=\"isSelected(node, nodeIndex(index))\"\n                    [isSelected]=\"isSelected\"\n                    class=\"k-in\"\n                    [style.touch-action]=\"touchActions ? '' : 'none'\"\n                >\n                    <ng-container [ngSwitch]=\"hasTemplate\">\n                        <ng-container *ngSwitchCase=\"true\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"nodeTemplateRef\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: node,\n                                    index: nodeIndex(index)\n                                }\"\n                            >\n                            </ng-template>\n                        </ng-container>\n                        <ng-container *ngSwitchDefault>\n                            {{nodeText(node)}}\n                        </ng-container>\n                    </ng-container>\n                </span>\n            </div>\n            <ul\n                *ngIf=\"isExpanded(node, nodeIndex(index)) && hasChildren(node)\"\n                kendoTreeViewGroup\n                role=\"group\"\n                [nodes]=\"fetchChildren\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [checkboxes]=\"checkboxes\"\n                [expandIcons]=\"expandIcons\"\n                [selectable]=\"selectable\"\n                [touchActions]=\"touchActions\"\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [isChecked]=\"isChecked\"\n                [isDisabled]=\"isDisabled\"\n                [disabled]=\"disabled || isDisabled(node, nodeIndex(index))\"\n                [isExpanded]=\"isExpanded\"\n                [isSelected]=\"isSelected\"\n                [isVisible]=\"isVisible\"\n                [nodeTemplateRef]=\"nodeTemplateRef\"\n                [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplateRef\"\n                [parentIndex]=\"nodeIndex(index)\"\n                [parentDataItem]=\"node\"\n                [textField]=\"nextFields\"\n                [loadMoreService]=\"loadMoreService\"\n                [@toggle]=\"true\"\n                [trackBy]=\"trackBy\"\n            >\n            </ul>\n        </li>\n        <li\n            *ngIf=\"initialNodesLoaded && moreNodesAvailable\"\n            class=\"k-item k-treeview-item\"\n            [class.k-treeview-load-more-checkboxes-container]=\"checkboxes\"\n            kendoTreeViewItem\n            role=\"button\"\n            [selectable]=\"false\"\n            [checkable]=\"false\"\n            [expandable]=\"false\"\n            [index]=\"loadMoreButtonIndex\"\n            [parentDataItem]=\"parentDataItem\"\n            [parentIndex]=\"parentIndex\"\n            [attr.data-treeindex]=\"loadMoreButtonIndex\"\n        >\n            <div class=\"k-mid\">\n                <span\n                    *ngIf=\"loadingMoreNodes\"\n                    class=\"k-icon k-i-loading k-i-expand\"\n                >\n                </span>\n                <span\n                    class=\"k-in k-treeview-load-more-button\"\n                    [attr.data-treeindex]=\"loadMoreButtonIndex\"\n                    kendoTreeViewItemContent\n                    [index]=\"loadMoreButtonIndex\"\n                >\n                    <ng-template\n                        *ngIf=\"loadMoreButtonTemplateRef\"\n                        [ngTemplateOutlet]=\"loadMoreButtonTemplateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            index: loadMoreButtonIndex\n                        }\"\n                    >\n                    </ng-template>\n                    <ng-container *ngIf=\"!loadMoreButtonTemplateRef\">\n                        Load more\n                    </ng-container>\n                </span>\n            </div>\n        </li>\n    "
+            template: "\n        <li\n            *ngFor=\"let node of data; let index = index; trackBy: trackBy\"\n            class=\"k-treeview-item\"\n            [class.k-display-none]=\"!isVisible(node, nodeIndex(index))\"\n            kendoTreeViewItem\n            [attr.aria-setsize]=\"totalNodesCount\"\n            [dataItem]=\"node\"\n            [index]=\"nodeIndex(index)\"\n            [parentDataItem]=\"parentDataItem\"\n            [parentIndex]=\"parentIndex\"\n            [loadOnDemand]=\"loadOnDemand\"\n            [checkable]=\"checkboxes\"\n            [isChecked]=\"isChecked(node, nodeIndex(index))\"\n            [isDisabled]=\"disabled || isDisabled(node, nodeIndex(index))\"\n            [isVisible]=\"isVisible(node, nodeIndex(index))\"\n            [expandable]=\"expandIcons && hasChildren(node)\"\n            [isExpanded]=\"isExpanded(node, nodeIndex(index))\"\n            [selectable]=\"selectable\"\n            [isSelected]=\"isSelected(node, nodeIndex(index))\"\n            [attr.data-treeindex]=\"nodeIndex(index)\"\n        >\n            <div class=\"k-treeview-mid\">\n                <span\n                    class=\"k-treeview-toggle\"\n                    [kendoTreeViewLoading]=\"nodeIndex(index)\"\n                    (click)=\"expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))\"\n                    *ngIf=\"expandIcons && hasChildren(node)\"\n                >\n                    <span\n                        class=\"k-icon\"\n                        [class.k-i-collapse]=\"isExpanded(node, nodeIndex(index))\"\n                        [class.k-i-expand]=\"!isExpanded(node, nodeIndex(index))\"\n                    >\n                    </span>\n                </span>\n                <kendo-checkbox\n                    *ngIf=\"checkboxes\"\n                    [size]=\"size\"\n                    [node]=\"node\"\n                    [index]=\"nodeIndex(index)\"\n                    [isChecked]=\"isChecked\"\n                    (checkStateChange)=\"checkNode(nodeIndex(index))\"\n                    tabindex=\"-1\"\n                ></kendo-checkbox>\n                <span kendoTreeViewItemContent\n                    [attr.data-treeindex]=\"nodeIndex(index)\"\n                    [dataItem]=\"node\"\n                    [index]=\"nodeIndex(index)\"\n                    [initialSelection]=\"isSelected(node, nodeIndex(index))\"\n                    [isSelected]=\"isSelected\"\n                    class=\"k-treeview-leaf\"\n                    [style.touch-action]=\"touchActions ? '' : 'none'\"\n                >\n                    <span class=\"k-treeview-leaf-text\">\n                        <ng-container [ngSwitch]=\"hasTemplate\">\n                            <ng-container *ngSwitchCase=\"true\">\n                                <ng-template\n                                    [ngTemplateOutlet]=\"nodeTemplateRef\"\n                                    [ngTemplateOutletContext]=\"{\n                                        $implicit: node,\n                                        index: nodeIndex(index)\n                                    }\"\n                                >\n                                </ng-template>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault>\n                                {{nodeText(node)}}\n                            </ng-container>\n                        </ng-container>\n                    </span>\n                </span>\n            </div>\n            <ul\n                *ngIf=\"isExpanded(node, nodeIndex(index)) && hasChildren(node)\"\n                kendoTreeViewGroup\n                role=\"group\"\n                [nodes]=\"fetchChildren\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [checkboxes]=\"checkboxes\"\n                [expandIcons]=\"expandIcons\"\n                [selectable]=\"selectable\"\n                [touchActions]=\"touchActions\"\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [isChecked]=\"isChecked\"\n                [isDisabled]=\"isDisabled\"\n                [disabled]=\"disabled || isDisabled(node, nodeIndex(index))\"\n                [isExpanded]=\"isExpanded\"\n                [isSelected]=\"isSelected\"\n                [isVisible]=\"isVisible\"\n                [nodeTemplateRef]=\"nodeTemplateRef\"\n                [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplateRef\"\n                [parentIndex]=\"nodeIndex(index)\"\n                [parentDataItem]=\"node\"\n                [textField]=\"nextFields\"\n                [loadMoreService]=\"loadMoreService\"\n                [@toggle]=\"true\"\n                [trackBy]=\"trackBy\"\n            >\n            </ul>\n        </li>\n        <li\n            *ngIf=\"initialNodesLoaded && moreNodesAvailable\"\n            class=\"k-treeview-item\"\n            [class.k-treeview-load-more-checkboxes-container]=\"checkboxes\"\n            kendoTreeViewItem\n            role=\"button\"\n            [selectable]=\"false\"\n            [checkable]=\"false\"\n            [expandable]=\"false\"\n            [index]=\"loadMoreButtonIndex\"\n            [parentDataItem]=\"parentDataItem\"\n            [parentIndex]=\"parentIndex\"\n            [attr.data-treeindex]=\"loadMoreButtonIndex\"\n        >\n            <div class=\"k-treeview-mid\">\n                <span\n                    *ngIf=\"loadingMoreNodes\"\n                    class=\"k-icon k-i-loading k-i-expand\"\n                >\n                </span>\n                <span\n                    class=\"k-treeview-leaf k-treeview-load-more-button\"\n                    [attr.data-treeindex]=\"loadMoreButtonIndex\"\n                    kendoTreeViewItemContent\n                    [index]=\"loadMoreButtonIndex\"\n                >\n                    <span class=\"k-treeview-leaf-text\">\n                        <ng-template\n                            *ngIf=\"loadMoreButtonTemplateRef\"\n                            [ngTemplateOutlet]=\"loadMoreButtonTemplateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                index: loadMoreButtonIndex\n                            }\"\n                        >\n                        </ng-template>\n                        <ng-container *ngIf=\"!loadMoreButtonTemplateRef\">\n                            Load more\n                        </ng-container>\n                    </span>\n                </span>\n            </div>\n        </li>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [ExpandStateService,
             LoadingNotificationService,

package/dist/es/treeview-item-content.directive.js

@@ -48,10 +48,10 @@ var TreeViewItemContentDirective = /** @class */ (function () {
         this.subscriptions.unsubscribe();
     };
     TreeViewItemContentDirective.prototype.updateFocusClass = function () {
-        this.render(this.navigationService.isActive(this.index), 'k-state-focused');
+        this.render(this.navigationService.isActive(this.index), 'k-focus');
     };
     TreeViewItemContentDirective.prototype.updateSelectionClass = function (selected) {
-        this.render(selected, 'k-state-selected');
+        this.render(selected, 'k-selected');
     };
     TreeViewItemContentDirective.prototype.render = function (addClass, className) {
         var action = addClass ? 'addClass' : 'removeClass';

package/dist/es/treeview-item.directive.js

@@ -214,7 +214,7 @@ var TreeViewItemDirective = /** @class */ (function () {
         this.setAttribute('aria-checked', this.checkable ? this.ariaChecked : null);
     };
     TreeViewItemDirective.prototype.setDisabledClass = function () {
-        this.setClass('k-state-disabled', this.isDisabled);
+        this.setClass('k-disabled', this.isDisabled);
     };
     TreeViewItemDirective.prototype.setClass = function (className, toggle) {
         var action = toggle ? 'addClass' : 'removeClass';