@progress/kendo-angular-treeview 6.0.0-dev.202112021059 → 6.0.0-dev.202201111033

package/dist/fesm5/index.js

@@ -22,7 +22,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1638442548,
+    publishDate: 1641897008,
     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'
 };
@@ -222,7 +222,7 @@ var isFocusable = function (element) {
  * @hidden
  */
 var isContent = function (element) {
-    var scopeSelector = '.k-in:not(.k-treeview-load-more-button),.k-treeview-item,.k-treeview';
+    var scopeSelector = '.k-treeview-leaf:not(.k-treeview-load-more-button),.k-treeview-item,.k-treeview';
     if (!isDocumentAvailable()) {
         return null;
     }
@@ -231,20 +231,20 @@ var isContent = function (element) {
         node = node.parentNode;
     }
     if (node) {
-        return match(node, '.k-in:not(.k-treeview-load-more-button)');
+        return match(node, '.k-treeview-leaf:not(.k-treeview-load-more-button)');
     }
 };
 /**
  * @hidden
  *
- * Returns the nested .k-in:not(.k-treeview-load-more-button) element.
+ * Returns the nested .k-treeview-leaf:not(.k-treeview-load-more-button) element.
  * If the passed parent item is itself a content node, it is returned.
  */
 var getContentElement = function (parent) {
     if (!isPresent(parent)) {
         return null;
     }
-    var selector = '.k-in:not(.k-treeview-load-more-button)';
+    var selector = '.k-treeview-leaf:not(.k-treeview-load-more-button)';
     if (match(parent, selector)) {
         return parent;
     }
@@ -254,7 +254,7 @@ var getContentElement = function (parent) {
  * @hidden
  */
 var isLoadMoreButton = function (element) {
-    return isPresent(closestWithMatch(element, '.k-in.k-treeview-load-more-button'));
+    return isPresent(closestWithMatch(element, '.k-treeview-leaf.k-treeview-load-more-button'));
 };
 /**
  * @hidden
@@ -417,6 +417,18 @@ var sameValues = function (as, bs) {
     }
     return Array.from(as).every(function (v) { return bs.has(v); });
 };
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+var getSizeClass = function (component, size) {
+    var SIZE_CLASSES = {
+        'small': "k-" + component + "-sm",
+        'medium': "k-" + component + "-md",
+        'large': "k-" + component + "-lg"
+    };
+    return SIZE_CLASSES[size];
+};
 
 var safe = function (node) { return (node || {}); };
 var safeChildren = function (node) { return (safe(node).children || []); };
@@ -1257,6 +1269,7 @@ var TreeViewComponent = /** @class */ (function () {
         this.isActive = false;
         this.data = new BehaviorSubject([]);
         this._animate = true;
+        this._size = 'medium';
         this.subscriptions = new Subscription();
         this.domSubscriptions = [];
         validatePackage(packageMetadata);
@@ -1388,6 +1401,30 @@ var TreeViewComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(TreeViewComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.element.nativeElement, getSizeClass('treeview', this.size));
+            if (size) {
+                this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
     TreeViewComponent.prototype.ngOnChanges = function (changes) {
         this.navigationService.navigable = Boolean(this.navigable);
         // TODO: should react to changes.loadOnDemand as well - should preload the data or clear the already cached items
@@ -1428,6 +1465,9 @@ var TreeViewComponent = /** @class */ (function () {
                 _this.attachDomHandlers();
             });
         }
+        if (this.size) {
+            this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', this.size));
+        }
     };
     /**
      * Blurs the focused TreeView item.
@@ -1587,7 +1627,7 @@ var TreeViewComponent = /** @class */ (function () {
             return;
         }
         var index = nodeId(closestNode(target));
-        // the disabled check is probably not needed due to the k-state-disabled styles
+        // the disabled check is probably not needed due to the k-disabled styles
         if (!index || this.navigationService.isDisabled(index)) {
             return;
         }
@@ -1649,7 +1689,6 @@ var TreeViewComponent = /** @class */ (function () {
         });
     };
     __decorate([
-        HostBinding("class.k-widget"),
         HostBinding("class.k-treeview"),
         __metadata("design:type", Boolean)
     ], TreeViewComponent.prototype, "classNames", void 0);
@@ -1823,13 +1862,18 @@ var TreeViewComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", String)
     ], TreeViewComponent.prototype, "filter", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], TreeViewComponent.prototype, "size", null);
     TreeViewComponent = __decorate([
         Component({
             changeDetection: ChangeDetectionStrategy.Default,
             exportAs: 'kendoTreeView',
             providers: providers,
             selector: 'kendo-treeview',
-            template: "\n        <kendo-textbox\n            #filterInput\n            *ngIf=\"filterable\"\n            [value]=\"filter\"\n            [clearButton]=\"true\"\n            (valueChange)=\"filterChange.emit($event)\"\n            [placeholder]=\"filterInputPlaceholder\"\n        >\n            <ng-template kendoTextBoxPrefixTemplate>\n                <span class=\"k-icon k-i-search\"></span>\n            </ng-template>\n        </kendo-textbox>\n        <ul class=\"k-treeview-lines\"\n            kendoTreeViewGroup\n            role=\"group\"\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            [isExpanded]=\"isExpanded\"\n            [isSelected]=\"isSelected\"\n            [isVisible]=\"isVisible\"\n            [nodeTemplateRef]=\"nodeTemplateRef?.templateRef\"\n            [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplateRef?.templateRef\"\n            [textField]=\"textField\"\n            [nodes]=\"fetchNodes\"\n            [loadMoreService]=\"loadMoreService\"\n            [trackBy]=\"trackBy\"\n        >\n        </ul>\n        <ng-container #assetsContainer></ng-container>\n    "
+            template: "\n        <span\n            class=\"k-treeview-filter\"\n            *ngIf=\"filterable\"\n        >\n            <kendo-textbox\n                [size]=\"size\"\n                [value]=\"filter\"\n                [clearButton]=\"true\"\n                (valueChange)=\"filterChange.emit($event)\"\n                [placeholder]=\"filterInputPlaceholder\"\n            >\n                <ng-template kendoTextBoxPrefixTemplate>\n                    <span class=\"k-input-icon k-icon k-i-search\"></span>\n                </ng-template>\n            </kendo-textbox>\n        </span>\n        <ul class=\"k-treeview-lines\"\n            kendoTreeViewGroup\n            role=\"group\"\n            [size]=\"size\"\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            [isExpanded]=\"isExpanded\"\n            [isSelected]=\"isSelected\"\n            [isVisible]=\"isVisible\"\n            [nodeTemplateRef]=\"nodeTemplateRef?.templateRef\"\n            [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplateRef?.templateRef\"\n            [textField]=\"textField\"\n            [nodes]=\"fetchNodes\"\n            [loadMoreService]=\"loadMoreService\"\n            [trackBy]=\"trackBy\"\n        >\n        </ul>\n        <ng-container #assetsContainer></ng-container>\n    "
         }),
         __metadata("design:paramtypes", [ElementRef,
             ChangeDetectorRef,
@@ -1863,6 +1907,7 @@ var TreeViewGroupComponent = /** @class */ (function () {
         this.role = 'group';
         this.loadOnDemand = true;
         this.textField = "";
+        this.size = 'medium';
         this.initialNodesLoaded = false;
         this.loadingMoreNodes = false;
         this._data = [];
@@ -2096,7 +2141,7 @@ var TreeViewGroupComponent = /** @class */ (function () {
         this.emitChildrenLoaded(mappedChildren);
     };
     __decorate([
-        HostBinding("class.k-group"),
+        HostBinding("class.k-treeview-group"),
         __metadata("design:type", Boolean)
     ], TreeViewGroupComponent.prototype, "kGroupClass", void 0);
     __decorate([
@@ -2159,6 +2204,10 @@ var TreeViewGroupComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object)
     ], TreeViewGroupComponent.prototype, "loadMoreService", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], TreeViewGroupComponent.prototype, "size", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Function)
@@ -2202,7 +2251,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    "
         }),
         __metadata("design:paramtypes", [ExpandStateService,
             LoadingNotificationService,
@@ -3103,12 +3152,12 @@ var getDropPosition = function (draggedItem, target, clientY, targetTreeView, co
     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) {
@@ -3825,7 +3874,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;
     };
@@ -3847,7 +3896,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);
@@ -4827,7 +4876,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';
@@ -4954,10 +5003,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';
@@ -5008,6 +5057,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.
          */
@@ -5035,6 +5088,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");
     };
@@ -5077,6 +5137,10 @@ var CheckBoxComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Number)
     ], CheckBoxComponent.prototype, "tabindex", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], CheckBoxComponent.prototype, "size", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -5084,7 +5148,7 @@ var CheckBoxComponent = /** @class */ (function () {
     CheckBoxComponent = __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    "
         }),
         __metadata("design:paramtypes", [ElementRef,
             Renderer2,

package/dist/npm/checkbox/checkbox.component.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
+var utils_1 = require("../utils");
 /**
  * @hidden
  *
@@ -26,6 +27,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.
          */
@@ -53,6 +58,13 @@ var CheckBoxComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(CheckBoxComponent.prototype, "checkBoxClasses", {
+        get: function () {
+            return "k-checkbox " + (this.size ? utils_1.getSizeClass('checkbox', this.size) : '') + " k-rounded-md";
+        },
+        enumerable: true,
+        configurable: true
+    });
     CheckBoxComponent.prototype.ngOnInit = function () {
         this.renderer.removeAttribute(this.element.nativeElement, "tabindex");
     };
@@ -95,6 +107,10 @@ var CheckBoxComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Number)
     ], CheckBoxComponent.prototype, "tabindex", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], CheckBoxComponent.prototype, "size", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -102,7 +118,7 @@ var CheckBoxComponent = /** @class */ (function () {
     CheckBoxComponent = tslib_1.__decorate([
         core_1.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", [core_1.ElementRef,
             core_1.Renderer2,

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

@@ -99,12 +99,12 @@ exports.getDropPosition = function (draggedItem, target, clientY, targetTreeView
     if (!(utils_1.isPresent(draggedItem) && utils_1.isPresent(target) && utils_1.isPresent(targetTreeView) && utils_1.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 = utils_1.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 = utils_1.closestWithMatch(target, '.k-treeview-mid');
     if (!utils_1.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 = utils_1.getContentElement(item);
     var targetChildOfDraggedItem = utils_1.hasParent(item, utils_1.closestNode(draggedItem));
     if (!utils_1.isPresent(content) || (content === draggedItem) || targetChildOfDraggedItem) {

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

@@ -109,7 +109,7 @@ var DragAndDropDirective = /** @class */ (function () {
             return;
         }
         // store the drag target on press, show it only when it's actually dragged
-        this.draggedItem = utils_1.closestWithMatch(originalEvent.target, '.k-in');
+        this.draggedItem = utils_1.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;
     };
@@ -131,7 +131,7 @@ var DragAndDropDirective = /** @class */ (function () {
         }
         var targetTreeView = this.getTargetTreeView(dropTarget);
         var dropPosition = drag_and_drop_utils_1.getDropPosition(this.draggedItem, dropTarget, clientY, targetTreeView, this.containerOffset);
-        var dropHintAnchor = utils_1.closestWithMatch(dropTarget, '.k-mid');
+        var dropHintAnchor = utils_1.closestWithMatch(dropTarget, '.k-treeview-mid');
         var dropAction = drag_and_drop_utils_1.getDropAction(dropPosition, dropTarget);
         var sourceItem = drag_and_drop_utils_1.treeItemFromEventTarget(this.treeview, this.draggedItem);
         var destinationItem = drag_and_drop_utils_1.treeItemFromEventTarget(targetTreeView, dropTarget);

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1638442548,
+    publishDate: 1641897008,
     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/npm/size.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -35,6 +35,7 @@ var TreeViewGroupComponent = /** @class */ (function () {
         this.role = 'group';
         this.loadOnDemand = true;
         this.textField = "";
+        this.size = 'medium';
         this.initialNodesLoaded = false;
         this.loadingMoreNodes = false;
         this._data = [];
@@ -268,7 +269,7 @@ var TreeViewGroupComponent = /** @class */ (function () {
         this.emitChildrenLoaded(mappedChildren);
     };
     tslib_1.__decorate([
-        core_1.HostBinding("class.k-group"),
+        core_1.HostBinding("class.k-treeview-group"),
         tslib_1.__metadata("design:type", Boolean)
     ], TreeViewGroupComponent.prototype, "kGroupClass", void 0);
     tslib_1.__decorate([
@@ -331,6 +332,10 @@ var TreeViewGroupComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Object)
     ], TreeViewGroupComponent.prototype, "loadMoreService", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], TreeViewGroupComponent.prototype, "size", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Function)
@@ -374,7 +379,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", [expand_state_service_1.ExpandStateService,
             loading_notification_service_1.LoadingNotificationService,

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

@@ -50,10 +50,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/npm/treeview-item.directive.js

@@ -217,7 +217,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';

package/dist/npm/treeview.component.js

@@ -232,6 +232,7 @@ var TreeViewComponent = /** @class */ (function () {
         this.isActive = false;
         this.data = new rxjs_1.BehaviorSubject([]);
         this._animate = true;
+        this._size = 'medium';
         this.subscriptions = new rxjs_1.Subscription();
         this.domSubscriptions = [];
         kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
@@ -363,6 +364,30 @@ var TreeViewComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(TreeViewComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.element.nativeElement, utils_1.getSizeClass('treeview', this.size));
+            if (size) {
+                this.renderer.addClass(this.element.nativeElement, utils_1.getSizeClass('treeview', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
     TreeViewComponent.prototype.ngOnChanges = function (changes) {
         this.navigationService.navigable = Boolean(this.navigable);
         // TODO: should react to changes.loadOnDemand as well - should preload the data or clear the already cached items
@@ -403,6 +428,9 @@ var TreeViewComponent = /** @class */ (function () {
                 _this.attachDomHandlers();
             });
         }
+        if (this.size) {
+            this.renderer.addClass(this.element.nativeElement, utils_1.getSizeClass('treeview', this.size));
+        }
     };
     /**
      * Blurs the focused TreeView item.
@@ -562,7 +590,7 @@ var TreeViewComponent = /** @class */ (function () {
             return;
         }
         var index = utils_1.nodeId(utils_1.closestNode(target));
-        // the disabled check is probably not needed due to the k-state-disabled styles
+        // the disabled check is probably not needed due to the k-disabled styles
         if (!index || this.navigationService.isDisabled(index)) {
             return;
         }
@@ -624,7 +652,6 @@ var TreeViewComponent = /** @class */ (function () {
         });
     };
     tslib_1.__decorate([
-        core_1.HostBinding("class.k-widget"),
         core_1.HostBinding("class.k-treeview"),
         tslib_1.__metadata("design:type", Boolean)
     ], TreeViewComponent.prototype, "classNames", void 0);
@@ -798,13 +825,18 @@ var TreeViewComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], TreeViewComponent.prototype, "filter", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], TreeViewComponent.prototype, "size", null);
     TreeViewComponent = tslib_1.__decorate([
         core_1.Component({
             changeDetection: core_1.ChangeDetectionStrategy.Default,
             exportAs: 'kendoTreeView',
             providers: providers,
             selector: 'kendo-treeview',
-            template: "\n        <kendo-textbox\n            #filterInput\n            *ngIf=\"filterable\"\n            [value]=\"filter\"\n            [clearButton]=\"true\"\n            (valueChange)=\"filterChange.emit($event)\"\n            [placeholder]=\"filterInputPlaceholder\"\n        >\n            <ng-template kendoTextBoxPrefixTemplate>\n                <span class=\"k-icon k-i-search\"></span>\n            </ng-template>\n        </kendo-textbox>\n        <ul class=\"k-treeview-lines\"\n            kendoTreeViewGroup\n            role=\"group\"\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            [isExpanded]=\"isExpanded\"\n            [isSelected]=\"isSelected\"\n            [isVisible]=\"isVisible\"\n            [nodeTemplateRef]=\"nodeTemplateRef?.templateRef\"\n            [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplateRef?.templateRef\"\n            [textField]=\"textField\"\n            [nodes]=\"fetchNodes\"\n            [loadMoreService]=\"loadMoreService\"\n            [trackBy]=\"trackBy\"\n        >\n        </ul>\n        <ng-container #assetsContainer></ng-container>\n    "
+            template: "\n        <span\n            class=\"k-treeview-filter\"\n            *ngIf=\"filterable\"\n        >\n            <kendo-textbox\n                [size]=\"size\"\n                [value]=\"filter\"\n                [clearButton]=\"true\"\n                (valueChange)=\"filterChange.emit($event)\"\n                [placeholder]=\"filterInputPlaceholder\"\n            >\n                <ng-template kendoTextBoxPrefixTemplate>\n                    <span class=\"k-input-icon k-icon k-i-search\"></span>\n                </ng-template>\n            </kendo-textbox>\n        </span>\n        <ul class=\"k-treeview-lines\"\n            kendoTreeViewGroup\n            role=\"group\"\n            [size]=\"size\"\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            [isExpanded]=\"isExpanded\"\n            [isSelected]=\"isSelected\"\n            [isVisible]=\"isVisible\"\n            [nodeTemplateRef]=\"nodeTemplateRef?.templateRef\"\n            [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplateRef?.templateRef\"\n            [textField]=\"textField\"\n            [nodes]=\"fetchNodes\"\n            [loadMoreService]=\"loadMoreService\"\n            [trackBy]=\"trackBy\"\n        >\n        </ul>\n        <ng-container #assetsContainer></ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
             core_1.ChangeDetectorRef,