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

package/dist/fesm2015/index.js

@@ -22,7 +22,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treeview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635943171,
+    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'
 };
@@ -224,7 +224,7 @@ const isFocusable = (element) => {
  * @hidden
  */
 const isContent = (element) => {
-    const scopeSelector = '.k-in:not(.k-treeview-load-more-button),.k-treeview-item,.k-treeview';
+    const scopeSelector = '.k-treeview-leaf:not(.k-treeview-load-more-button),.k-treeview-item,.k-treeview';
     if (!isDocumentAvailable()) {
         return null;
     }
@@ -233,20 +233,20 @@ const isContent = (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.
  */
 const getContentElement = (parent) => {
     if (!isPresent(parent)) {
         return null;
     }
-    const selector = '.k-in:not(.k-treeview-load-more-button)';
+    const selector = '.k-treeview-leaf:not(.k-treeview-load-more-button)';
     if (match(parent, selector)) {
         return parent;
     }
@@ -256,7 +256,7 @@ const getContentElement = (parent) => {
  * @hidden
  */
 const isLoadMoreButton = (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
@@ -405,17 +405,27 @@ const fetchLoadedDescendants = (lookup, filterExpression) => {
 /**
  * @hidden
  *
- * Compares two arrays to determine whether all unique elements in one, are present in the other.
+ * Compares two Seets to determine whether all unique elements in one, are present in the other.
  * Important:
  *  - it disregards the element order
- *  - it disregards element repetitions - sameValues([1, 1, 2], [1, 2, 2]) will return true
  */
-const sameValues = (a, b) => {
-    if (a.length !== b.length) {
+const sameValues = (as, bs) => {
+    if (as.size !== bs.size) {
         return false;
     }
-    const values = new Set(b);
-    return a.every(v => values.has(v));
+    return Array.from(as).every(v => bs.has(v));
+};
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+const getSizeClass = (component, size) => {
+    const SIZE_CLASSES = {
+        'small': `k-${component}-sm`,
+        'medium': `k-${component}-md`,
+        'large': `k-${component}-lg`
+    };
+    return SIZE_CLASSES[size];
 };
 
 const safe = node => (node || {});
@@ -1045,9 +1055,10 @@ const providers = [
  * Represents the [Kendo UI TreeView component for Angular]({% slug overview_treeview %}).
  *
  * @example
- * {% meta height:350 %}
- * {% embed_file basic-usage/app.component.ts preview %}
- * {% embed_file basic-usage/app.module.ts %}
+ * {% meta height:450 %}
+ * {% embed_file get-started/app.component.ts preview %}
+ * {% embed_file get-started/app.module.ts %}
+ * {% embed_file shared/main.ts %}
  * {% endmeta %}
  */
 let TreeViewComponent = class TreeViewComponent {
@@ -1221,6 +1232,7 @@ let TreeViewComponent = class TreeViewComponent {
         this.isActive = false;
         this.data = new BehaviorSubject([]);
         this._animate = true;
+        this._size = 'medium';
         this.subscriptions = new Subscription();
         this.domSubscriptions = [];
         validatePackage(packageMetadata);
@@ -1240,15 +1252,27 @@ let TreeViewComponent = class TreeViewComponent {
     }
     /**
      * @hidden
+     *
+     * Defines the template for each node.
+     * Takes precedence over nested templates in the TreeView tag.
      */
     set nodeTemplateRef(template) {
-        this.nodeTemplate = template;
+        this._nodeTemplateRef = template;
+    }
+    get nodeTemplateRef() {
+        return this._nodeTemplateRef || this.nodeTemplateQuery;
     }
     /**
      * @hidden
+     *
+     * Defines the template for each load-more button.
+     * Takes precedence over nested templates in the TreeView tag.
      */
     set loadMoreButtonTemplateRef(template) {
-        this.loadMoreButtonTemplate = template;
+        this._loadMoreButtonTemplateRef = template;
+    }
+    get loadMoreButtonTemplateRef() {
+        return this._loadMoreButtonTemplateRef || this.loadMoreButtonTemplateQuery;
     }
     /**
      * The nodes which will be displayed by the TreeView
@@ -1304,6 +1328,26 @@ let TreeViewComponent = class TreeViewComponent {
         this._isSelected = callback;
         this.selectable = Boolean(this._isSelected);
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
     ngOnChanges(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
@@ -1338,6 +1382,9 @@ let TreeViewComponent = class TreeViewComponent {
                 this.attachDomHandlers();
             });
         }
+        if (this.size) {
+            this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', this.size));
+        }
     }
     /**
      * Blurs the focused TreeView item.
@@ -1494,7 +1541,7 @@ let TreeViewComponent = class TreeViewComponent {
             return;
         }
         const 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;
         }
@@ -1550,7 +1597,6 @@ let TreeViewComponent = class TreeViewComponent {
     }
 };
 __decorate([
-    HostBinding("class.k-widget"),
     HostBinding("class.k-treeview"),
     __metadata("design:type", Boolean)
 ], TreeViewComponent.prototype, "classNames", void 0);
@@ -1646,18 +1692,18 @@ __decorate([
     __metadata("design:type", EventEmitter)
 ], TreeViewComponent.prototype, "nodeDblClick", void 0);
 __decorate([
-    ContentChild(NodeTemplateDirective, { static: true }),
+    ContentChild(NodeTemplateDirective, { static: false }),
     __metadata("design:type", NodeTemplateDirective)
-], TreeViewComponent.prototype, "nodeTemplate", void 0);
+], TreeViewComponent.prototype, "nodeTemplateQuery", void 0);
 __decorate([
     Input('nodeTemplate'),
     __metadata("design:type", NodeTemplateDirective),
     __metadata("design:paramtypes", [NodeTemplateDirective])
 ], TreeViewComponent.prototype, "nodeTemplateRef", null);
 __decorate([
-    ContentChild(LoadMoreButtonTemplateDirective, { static: true }),
+    ContentChild(LoadMoreButtonTemplateDirective, { static: false }),
     __metadata("design:type", LoadMoreButtonTemplateDirective)
-], TreeViewComponent.prototype, "loadMoreButtonTemplate", void 0);
+], TreeViewComponent.prototype, "loadMoreButtonTemplateQuery", void 0);
 __decorate([
     Input('loadMoreButtonTemplate'),
     __metadata("design:type", LoadMoreButtonTemplateDirective),
@@ -1724,6 +1770,11 @@ __decorate([
     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,
@@ -1731,21 +1782,26 @@ TreeViewComponent = __decorate([
         providers: providers,
         selector: 'kendo-treeview',
         template: `
-        <kendo-textbox
-            #filterInput
+        <span
+            class="k-treeview-filter"
             *ngIf="filterable"
-            [value]="filter"
-            [clearButton]="true"
-            (valueChange)="filterChange.emit($event)"
-            [placeholder]="filterInputPlaceholder"
         >
-            <ng-template kendoTextBoxPrefixTemplate>
-                <span class="k-icon k-i-search"></span>
-            </ng-template>
-        </kendo-textbox>
+            <kendo-textbox
+                [size]="size"
+                [value]="filter"
+                [clearButton]="true"
+                (valueChange)="filterChange.emit($event)"
+                [placeholder]="filterInputPlaceholder"
+            >
+                <ng-template kendoTextBoxPrefixTemplate>
+                    <span class="k-input-icon k-icon k-i-search"></span>
+                </ng-template>
+            </kendo-textbox>
+        </span>
         <ul class="k-treeview-lines"
             kendoTreeViewGroup
             role="group"
+            [size]="size"
             [loadOnDemand]="loadOnDemand"
             [checkboxes]="checkboxes"
             [expandIcons]="expandIcons"
@@ -1758,8 +1814,8 @@ TreeViewComponent = __decorate([
             [isExpanded]="isExpanded"
             [isSelected]="isSelected"
             [isVisible]="isVisible"
-            [nodeTemplateRef]="nodeTemplate?.templateRef"
-            [loadMoreButtonTemplateRef]="loadMoreButtonTemplate?.templateRef"
+            [nodeTemplateRef]="nodeTemplateRef?.templateRef"
+            [loadMoreButtonTemplateRef]="loadMoreButtonTemplateRef?.templateRef"
             [textField]="textField"
             [nodes]="fetchNodes"
             [loadMoreService]="loadMoreService"
@@ -1799,6 +1855,7 @@ let TreeViewGroupComponent = class TreeViewGroupComponent {
         this.role = 'group';
         this.loadOnDemand = true;
         this.textField = "";
+        this.size = 'medium';
         this.initialNodesLoaded = false;
         this.loadingMoreNodes = false;
         this._data = [];
@@ -1999,7 +2056,7 @@ let TreeViewGroupComponent = class TreeViewGroupComponent {
     }
 };
 __decorate([
-    HostBinding("class.k-group"),
+    HostBinding("class.k-treeview-group"),
     __metadata("design:type", Boolean)
 ], TreeViewGroupComponent.prototype, "kGroupClass", void 0);
 __decorate([
@@ -2062,6 +2119,10 @@ __decorate([
     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)
@@ -2108,7 +2169,7 @@ TreeViewGroupComponent = __decorate([
         template: `
         <li
             *ngFor="let node of data; let index = index; trackBy: trackBy"
-            class="k-item k-treeview-item"
+            class="k-treeview-item"
             [class.k-display-none]="!isVisible(node, nodeIndex(index))"
             kendoTreeViewItem
             [attr.aria-setsize]="totalNodesCount"
@@ -2127,18 +2188,23 @@ TreeViewGroupComponent = __decorate([
             [isSelected]="isSelected(node, nodeIndex(index))"
             [attr.data-treeindex]="nodeIndex(index)"
         >
-            <div class="k-mid">
+            <div class="k-treeview-mid">
                 <span
-                    class="k-icon"
-                    [class.k-i-collapse]="isExpanded(node, nodeIndex(index))"
-                    [class.k-i-expand]="!isExpanded(node, nodeIndex(index))"
+                    class="k-treeview-toggle"
                     [kendoTreeViewLoading]="nodeIndex(index)"
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
+                    <span
+                        class="k-icon"
+                        [class.k-i-collapse]="isExpanded(node, nodeIndex(index))"
+                        [class.k-i-expand]="!isExpanded(node, nodeIndex(index))"
+                    >
+                    </span>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
+                    [size]="size"
                     [node]="node"
                     [index]="nodeIndex(index)"
                     [isChecked]="isChecked"
@@ -2151,24 +2217,26 @@ TreeViewGroupComponent = __decorate([
                     [index]="nodeIndex(index)"
                     [initialSelection]="isSelected(node, nodeIndex(index))"
                     [isSelected]="isSelected"
-                    class="k-in"
+                    class="k-treeview-leaf"
                     [style.touch-action]="touchActions ? '' : 'none'"
                 >
-                    <ng-container [ngSwitch]="hasTemplate">
-                        <ng-container *ngSwitchCase="true">
-                            <ng-template
-                                [ngTemplateOutlet]="nodeTemplateRef"
-                                [ngTemplateOutletContext]="{
-                                    $implicit: node,
-                                    index: nodeIndex(index)
-                                }"
-                            >
-                            </ng-template>
-                        </ng-container>
-                        <ng-container *ngSwitchDefault>
-                            {{nodeText(node)}}
+                    <span class="k-treeview-leaf-text">
+                        <ng-container [ngSwitch]="hasTemplate">
+                            <ng-container *ngSwitchCase="true">
+                                <ng-template
+                                    [ngTemplateOutlet]="nodeTemplateRef"
+                                    [ngTemplateOutletContext]="{
+                                        $implicit: node,
+                                        index: nodeIndex(index)
+                                    }"
+                                >
+                                </ng-template>
+                            </ng-container>
+                            <ng-container *ngSwitchDefault>
+                                {{nodeText(node)}}
+                            </ng-container>
                         </ng-container>
-                    </ng-container>
+                    </span>
                 </span>
             </div>
             <ul
@@ -2202,7 +2270,7 @@ TreeViewGroupComponent = __decorate([
         </li>
         <li
             *ngIf="initialNodesLoaded && moreNodesAvailable"
-            class="k-item k-treeview-item"
+            class="k-treeview-item"
             [class.k-treeview-load-more-checkboxes-container]="checkboxes"
             kendoTreeViewItem
             role="button"
@@ -2214,29 +2282,31 @@ TreeViewGroupComponent = __decorate([
             [parentIndex]="parentIndex"
             [attr.data-treeindex]="loadMoreButtonIndex"
         >
-            <div class="k-mid">
+            <div class="k-treeview-mid">
                 <span
                     *ngIf="loadingMoreNodes"
                     class="k-icon k-i-loading k-i-expand"
                 >
                 </span>
                 <span
-                    class="k-in k-treeview-load-more-button"
+                    class="k-treeview-leaf k-treeview-load-more-button"
                     [attr.data-treeindex]="loadMoreButtonIndex"
                     kendoTreeViewItemContent
                     [index]="loadMoreButtonIndex"
                 >
-                    <ng-template
-                        *ngIf="loadMoreButtonTemplateRef"
-                        [ngTemplateOutlet]="loadMoreButtonTemplateRef"
-                        [ngTemplateOutletContext]="{
-                            index: loadMoreButtonIndex
-                        }"
-                    >
-                    </ng-template>
-                    <ng-container *ngIf="!loadMoreButtonTemplateRef">
-                        Load more
-                    </ng-container>
+                    <span class="k-treeview-leaf-text">
+                        <ng-template
+                            *ngIf="loadMoreButtonTemplateRef"
+                            [ngTemplateOutlet]="loadMoreButtonTemplateRef"
+                            [ngTemplateOutletContext]="{
+                                index: loadMoreButtonIndex
+                            }"
+                        >
+                        </ng-template>
+                        <ng-container *ngIf="!loadMoreButtonTemplateRef">
+                            Load more
+                        </ng-container>
+                    </span>
                 </span>
             </div>
         </li>
@@ -2286,7 +2356,10 @@ let CheckDirective = class CheckDirective {
             'multiple': (e) => this.checkMultiple(e),
             'single': (e) => this.checkSingle(e)
         };
-        this._checkedKeys = [];
+        /**
+         * Reflectes the internal `checkedKeys` state.
+         */
+        this.state = new Set();
         this.subscriptions.add(this.treeView.checkedChange
             .subscribe((e) => this.check(e)));
         let expandedItems = [];
@@ -2301,16 +2374,6 @@ let CheckDirective = class CheckDirective {
     set isChecked(value) {
         this.treeView.isChecked = value;
     }
-    /**
-     * Defines the collection that will store the checked keys
-     * ([see example]({% slug checkboxes_treeview %})).
-     */
-    get checkedKeys() {
-        return this._checkedKeys;
-    }
-    set checkedKeys(keys) {
-        this._checkedKeys = keys;
-    }
     get options() {
         const defaultOptions = {
             checkChildren: true,
@@ -2331,6 +2394,9 @@ let CheckDirective = class CheckDirective {
             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);
+        }
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -2340,11 +2406,11 @@ let CheckDirective = class CheckDirective {
         if (!this.checkKey) {
             return this.isIndexChecked(index);
         }
-        const keyIndex = this.checkedKeys.indexOf(this.itemKey({ dataItem, index }));
-        return keyIndex > -1 ? 'checked' : 'none';
+        const hasKey = this.state.has(this.itemKey({ dataItem, index }));
+        return hasKey ? 'checked' : 'none';
     }
     isIndexChecked(index) {
-        const checkedKeys = this.checkedKeys.filter(matchKey(index));
+        const checkedKeys = Array.from(this.state).filter(matchKey(index));
         if (indexChecked(checkedKeys, index)) {
             return 'checked';
         }
@@ -2375,7 +2441,11 @@ let CheckDirective = class CheckDirective {
     }
     checkSingle(node) {
         const key = this.itemKey(node.item);
-        this.checkedKeys = this.checkedKeys[0] !== key ? [key] : [];
+        const hasKey = this.state.has(key);
+        this.state.clear();
+        if (!hasKey) {
+            this.state.add(key);
+        }
         this.notify();
     }
     checkMultiple(node) {
@@ -2410,7 +2480,6 @@ let CheckDirective = class CheckDirective {
         if (!isPresent(currentKey)) {
             return;
         }
-        const checkedKeys = new Set(this.checkedKeys);
         const pendingCheck = [currentKey];
         if (this.options.checkChildren) {
             const descendants = fetchLoadedDescendants(node, ({ item }) => this.treeView.isVisible(item.dataItem, item.index) &&
@@ -2418,61 +2487,57 @@ let CheckDirective = class CheckDirective {
                 .map(({ item }) => this.itemKey(item));
             pendingCheck.push(...descendants);
         }
-        const shouldCheck = !checkedKeys.has(currentKey);
+        const shouldCheck = !this.state.has(currentKey);
         pendingCheck.forEach(key => {
             if (shouldCheck) {
-                checkedKeys.add(key);
+                this.state.add(key);
             }
             else {
-                checkedKeys.delete(key);
+                this.state.delete(key);
             }
         });
-        this.checkedKeys = Array.from(checkedKeys);
     }
     checkParents(parent) {
         if (!isPresent(parent)) {
             return;
         }
-        const checkedKeys = new Set(this.checkedKeys);
         let currentParent = parent;
         while (currentParent) {
             const parentKey = this.itemKey(currentParent.item);
-            const allChildrenSelected = currentParent.children.every(item => checkedKeys.has(this.itemKey(item)));
+            const allChildrenSelected = currentParent.children.every(item => 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);
     }
     notify() {
-        this.checkedKeysChange.emit(this.checkedKeys.slice());
+        this.lastChange = Array.from(this.state);
+        this.checkedKeysChange.emit(this.lastChange);
     }
     addCheckedItemsChildren(lookups) {
         if (!isPresent(lookups) || lookups.length === 0) {
             return;
         }
-        const initiallyCheckedItemsCount = this.checkedKeys.length;
-        const checkedKeys = new Set(this.checkedKeys);
+        const initiallyCheckedItemsCount = this.state.size;
         lookups.forEach(lookup => {
             const itemKey = this.itemKey(lookup.item);
-            if (!checkedKeys.has(itemKey)) {
+            if (!this.state.has(itemKey)) {
                 return;
             }
             lookup.children.forEach(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));
                 }
             });
         });
-        const hasNewlyCheckedItems = initiallyCheckedItemsCount !== checkedKeys.size;
+        const hasNewlyCheckedItems = initiallyCheckedItemsCount !== this.state.size;
         if (hasNewlyCheckedItems) {
-            this.checkedKeys = Array.from(checkedKeys);
             this.zone.run(() => this.notify());
         }
     }
@@ -2488,9 +2553,8 @@ __decorate([
 ], CheckDirective.prototype, "checkKey", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], CheckDirective.prototype, "checkedKeys", null);
+    __metadata("design:type", Array)
+], CheckDirective.prototype, "checkedKeys", void 0);
 __decorate([
     Input('kendoTreeViewCheckable'),
     __metadata("design:type", Object)
@@ -2585,8 +2649,11 @@ let ExpandDirective = class ExpandDirective {
          */
         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.
@@ -2618,7 +2685,7 @@ let ExpandDirective = class ExpandDirective {
         if (this.component.filterStateChange) {
             this.subscriptions.add(this.component.filterStateChange.subscribe(this.handleAutoExpand.bind(this)));
         }
-        this.component.isExpanded = (dataItem, index) => this.expandedKeys.indexOf(this.itemKey({ dataItem, index })) > -1;
+        this.component.isExpanded = (dataItem, index) => this.state.has(this.itemKey({ dataItem, index }));
     }
     /**
      * @hidden
@@ -2630,14 +2697,10 @@ let ExpandDirective = class ExpandDirective {
         const settings = isBoolean(this.expandOnFilter) ? { enabled: this.expandOnFilter } : Object.assign({}, this.expandOnFilter, { enabled: true });
         return Object.assign({}, DEFAULT_FILTER_EXPAND_SETTINGS, settings);
     }
-    /**
-     * Defines the collection that will store the expanded keys.
-     */
-    get expandedKeys() {
-        return this._expandedKeys;
-    }
-    set expandedKeys(keys) {
-        this._expandedKeys = keys;
+    ngOnChanges(changes) {
+        if (isChanged('expandedKeys', changes, false) && changes.expandedKeys.currentValue !== this.lastChange) {
+            this.state = new Set(changes.expandedKeys.currentValue);
+        }
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -2657,19 +2720,19 @@ let ExpandDirective = class ExpandDirective {
         return e.index;
     }
     toggleExpand({ index, dataItem, expand }) {
-        const item = this.itemKey({ index, dataItem });
-        const idx = this.expandedKeys.indexOf(item);
+        const key = this.itemKey({ index, dataItem });
+        const isExpanded = this.state.has(key);
         let 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();
         }
     }
     handleAutoExpand({ nodes, matchCount, term }) {
@@ -2678,7 +2741,7 @@ let ExpandDirective = class ExpandDirective {
         }
         const { maxAutoExpandResults, expandMatches: autoExpandMatches, expandedOnClear } = this.filterExpandSettings;
         if (!this.isFiltered) {
-            this.originalExpandedKeys = this.expandedKeys.slice();
+            this.originalExpandedKeys = new Set(this.state);
         }
         const exitingFilteredState = this.isFiltered && !term;
         const maxExceeded = maxAutoExpandResults !== -1 && matchCount > maxAutoExpandResults;
@@ -2686,18 +2749,18 @@ let ExpandDirective = class ExpandDirective {
         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((acc, rootNode) => {
+                    this.state = new Set(nodes.reduce((acc, rootNode) => {
                         this.getEveryExpandKey(acc, rootNode);
                         return acc;
-                    }, []);
-                    this.expandedKeysChange.emit(this.expandedKeys);
+                    }, []));
+                    this.notify();
                     break;
                 }
                 case "unchanged": {
@@ -2705,9 +2768,9 @@ let ExpandDirective = class ExpandDirective {
                 }
                 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;
                 }
@@ -2715,16 +2778,20 @@ let ExpandDirective = class ExpandDirective {
             this.isFiltered = false;
             return;
         }
-        const indicesToExpand = nodes.reduce((acc, rootNode) => {
+        const indicesToExpand = new Set(nodes.reduce((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;
     }
+    notify() {
+        this.lastChange = Array.from(this.state);
+        this.expandedKeysChange.emit(this.lastChange);
+    }
 };
 __decorate([
     Input(),
@@ -2745,9 +2812,8 @@ __decorate([
 ], ExpandDirective.prototype, "expandedKeysChange", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], ExpandDirective.prototype, "expandedKeys", null);
+    __metadata("design:type", Array)
+], ExpandDirective.prototype, "expandedKeys", void 0);
 ExpandDirective = __decorate([
     Directive({ selector: '[kendoTreeViewExpandable]' }),
     __metadata("design:paramtypes", [ExpandableComponent])
@@ -2769,9 +2835,12 @@ let SelectDirective = class SelectDirective {
             'multiple': (e) => this.selectMultiple(e),
             'single': (e) => 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 = (dataItem, index) => (this.selectedKeys.indexOf(this.itemKey({ dataItem, index })) > -1);
+        this.treeView.isSelected = (dataItem, index) => (this.state.has(this.itemKey({ dataItem, index })));
     }
     /**
      * @hidden
@@ -2779,16 +2848,6 @@ let SelectDirective = class SelectDirective {
     set isSelected(value) {
         this.treeView.isSelected = value;
     }
-    /**
-     * Defines the collection that will store the selected keys
-     * ([see example]({% slug selection_treeview %}#toc-selection-modes)).
-     */
-    get selectedKeys() {
-        return this._selectedKeys;
-    }
-    set selectedKeys(keys) {
-        this._selectedKeys = keys;
-    }
     get getAriaMultiselectable() {
         return this.options.mode === 'multiple';
     }
@@ -2803,6 +2862,11 @@ let SelectDirective = class SelectDirective {
         const selectionSettings = isBoolean(this.selection) ? { enabled: this.selection } : this.selection;
         return Object.assign(defaultOptions, selectionSettings);
     }
+    ngOnChanges(changes) {
+        if (isChanged('selectedKeys', changes, false) && changes.selectedKeys.currentValue !== this.lastChange) {
+            this.state = new Set(changes.selectedKeys.currentValue);
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -2827,29 +2891,29 @@ let SelectDirective = class SelectDirective {
     }
     selectSingle(node) {
         const 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();
     }
     selectMultiple(node) {
         const key = this.itemKey(node);
-        const idx = this.selectedKeys.indexOf(key);
-        const isSelected = idx > -1;
+        const 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();
     }
     notify() {
-        this.selectedKeysChange.emit(this.selectedKeys.slice());
+        this.lastChange = Array.from(this.state);
+        this.selectedKeysChange.emit(this.lastChange);
     }
 };
 __decorate([
@@ -2867,9 +2931,8 @@ __decorate([
 ], SelectDirective.prototype, "selection", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], SelectDirective.prototype, "selectedKeys", null);
+    __metadata("design:type", Array)
+], SelectDirective.prototype, "selectedKeys", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -3075,12 +3138,12 @@ const getDropPosition = (draggedItem, target, clientY, targetTreeView, container
     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
-    const 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
+    const 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
     const content = getContentElement(item);
     const targetChildOfDraggedItem = hasParent(item, closestNode(draggedItem));
     if (!isPresent(content) || (content === draggedItem) || targetChildOfDraggedItem) {
@@ -3793,7 +3856,7 @@ let DragAndDropDirective = class DragAndDropDirective {
             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;
     }
@@ -3813,7 +3876,7 @@ let DragAndDropDirective = class DragAndDropDirective {
         }
         const targetTreeView = this.getTargetTreeView(dropTarget);
         const dropPosition = getDropPosition(this.draggedItem, dropTarget, clientY, targetTreeView, this.containerOffset);
-        const dropHintAnchor = closestWithMatch(dropTarget, '.k-mid');
+        const dropHintAnchor = closestWithMatch(dropTarget, '.k-treeview-mid');
         const dropAction = getDropAction(dropPosition, dropTarget);
         const sourceItem = treeItemFromEventTarget(this.treeview, this.draggedItem);
         const destinationItem = treeItemFromEventTarget(targetTreeView, dropTarget);
@@ -4677,7 +4740,7 @@ let TreeViewItemDirective = class TreeViewItemDirective {
         this.setAttribute('aria-checked', this.checkable ? this.ariaChecked : null);
     }
     setDisabledClass() {
-        this.setClass('k-state-disabled', this.isDisabled);
+        this.setClass('k-disabled', this.isDisabled);
     }
     setClass(className, toggle) {
         const action = toggle ? 'addClass' : 'removeClass';
@@ -4800,10 +4863,10 @@ let TreeViewItemContentDirective = class TreeViewItemContentDirective {
         this.subscriptions.unsubscribe();
     }
     updateFocusClass() {
-        this.render(this.navigationService.isActive(this.index), 'k-state-focused');
+        this.render(this.navigationService.isActive(this.index), 'k-focus');
     }
     updateSelectionClass(selected) {
-        this.render(selected, 'k-state-selected');
+        this.render(selected, 'k-selected');
     }
     render(addClass, className) {
         const action = addClass ? 'addClass' : 'removeClass';
@@ -4853,6 +4916,10 @@ let CheckBoxComponent = class CheckBoxComponent {
          * 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.
          */
@@ -4868,6 +4935,9 @@ let CheckBoxComponent = class CheckBoxComponent {
     get checked() {
         return this.checkState === 'checked';
     }
+    get checkBoxClasses() {
+        return `k-checkbox ${this.size ? getSizeClass('checkbox', this.size) : ''} k-rounded-md`;
+    }
     ngOnInit() {
         this.renderer.removeAttribute(this.element.nativeElement, "tabindex");
     }
@@ -4911,6 +4981,10 @@ __decorate([
     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)
@@ -4920,8 +4994,8 @@ CheckBoxComponent = __decorate([
         selector: 'kendo-checkbox',
         template: `
         <input
-            class="k-checkbox"
             type="checkbox"
+            [class]="checkBoxClasses"
             [id]="id"
             [checked]="checked"
             [indeterminate]="indeterminate"