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

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: 1638442548,
+    publishDate: 1644923991,
     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
@@ -415,6 +415,18 @@ const sameValues = (as, bs) => {
     }
     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 || {});
 const safeChildren = node => (safe(node).children || []);
@@ -578,8 +590,8 @@ let NavigationService = class NavigationService {
         this.loadMore = new Subject();
         this.navigable = true;
         this.actions = {
-            [Keys.ArrowUp]: () => this.activate(this.model.findVisiblePrev(this.focusableItem)),
-            [Keys.ArrowDown]: () => this.activate(this.model.findVisibleNext(this.focusableItem)),
+            [Keys.ArrowUp]: () => this.activate(this.model.findVisiblePrev(this.focusableItem), true),
+            [Keys.ArrowDown]: () => this.activate(this.model.findVisibleNext(this.focusableItem), true),
             [Keys.ArrowLeft]: () => !this.isLoadMoreButton && (this.expand({
                 expand: this.localization.rtl,
                 intercept: this.localization.rtl ? this.moveToFirstVisibleChild : this.moveToParent
@@ -588,12 +600,13 @@ let NavigationService = class NavigationService {
                 expand: !this.localization.rtl,
                 intercept: this.localization.rtl ? this.moveToParent : this.moveToFirstVisibleChild
             })),
-            [Keys.Home]: () => this.activate(this.model.firstVisibleNode()),
-            [Keys.End]: () => this.activate(this.model.lastVisibleNode()),
+            [Keys.Home]: () => this.activate(this.model.firstVisibleNode(), true),
+            [Keys.End]: () => this.activate(this.model.lastVisibleNode(), true),
             [Keys.Enter]: () => this.handleEnter(),
             [Keys.Space]: () => this.handleSpace()
         };
         this.isFocused = false;
+        this.shouldScroll = false;
         this._model = new NavigationModel();
         this.moveToFirstVisibleChild = this.moveToFirstVisibleChild.bind(this);
         this.moveToParent = this.moveToParent.bind(this);
@@ -616,12 +629,13 @@ let NavigationService = class NavigationService {
     get focusableItem() {
         return this.activeItem || this.model.firstFocusableNode();
     }
-    activate(item) {
+    activate(item, shouldScroll = false) {
         if (!this.navigable || !item || this.isActive(nodeIndex(item))) {
             return;
         }
         this.isFocused = true;
         this.activeItem = item || this.activeItem;
+        this.shouldScroll = shouldScroll;
         this.notifyMove();
     }
     activateParent(index) {
@@ -737,7 +751,7 @@ let NavigationService = class NavigationService {
         this.moves.next(this.navigationState());
     }
     navigationState(expand = false) {
-        return ({ expand, index: this.activeIndex, isFocused: this.isFocused });
+        return ({ expand, index: this.activeIndex, isFocused: this.isFocused, shouldScroll: this.shouldScroll });
     }
     handleEnter() {
         if (!this.navigable) {
@@ -1220,6 +1234,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);
@@ -1315,6 +1330,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
@@ -1349,6 +1384,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.
@@ -1505,7 +1543,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;
         }
@@ -1561,7 +1599,6 @@ let TreeViewComponent = class TreeViewComponent {
     }
 };
 __decorate([
-    HostBinding("class.k-widget"),
     HostBinding("class.k-treeview"),
     __metadata("design:type", Boolean)
 ], TreeViewComponent.prototype, "classNames", void 0);
@@ -1735,6 +1772,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,
@@ -1742,21 +1784,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"
@@ -1810,6 +1857,7 @@ let TreeViewGroupComponent = class TreeViewGroupComponent {
         this.role = 'group';
         this.loadOnDemand = true;
         this.textField = "";
+        this.size = 'medium';
         this.initialNodesLoaded = false;
         this.loadingMoreNodes = false;
         this._data = [];
@@ -2010,7 +2058,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([
@@ -2073,6 +2121,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)
@@ -2119,7 +2171,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"
@@ -2138,18 +2190,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"
@@ -2162,24 +2219,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>
+                    <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 *ngSwitchDefault>
-                            {{nodeText(node)}}
-                        </ng-container>
-                    </ng-container>
+                    </span>
                 </span>
             </div>
             <ul
@@ -2213,7 +2272,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"
@@ -2225,29 +2284,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>
@@ -3079,12 +3140,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) {
@@ -3797,7 +3858,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;
     }
@@ -3817,7 +3878,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);
@@ -4610,9 +4671,9 @@ let TreeViewItemDirective = class TreeViewItemDirective {
     subscribe() {
         this.subscriptions = [
             this.navigationService.moves
-                .subscribe(() => {
+                .subscribe((navState) => {
                 this.updateTabIndex();
-                this.focusItem();
+                this.focusItem(navState.shouldScroll);
             }),
             this.navigationService.expands
                 .pipe(filter(({ index }) => index === this.index && !this.isDisabled))
@@ -4641,9 +4702,9 @@ let TreeViewItemDirective = class TreeViewItemDirective {
     isFocusable() {
         return !this.isDisabled && this.navigationService.isFocusable(this.index);
     }
-    focusItem() {
+    focusItem(scrollIntoView = false) {
         if (this.isInitialized && this.navigationService.isActive(this.index)) {
-            this.element.nativeElement.focus();
+            this.element.nativeElement.focus({ preventScroll: !scrollIntoView });
         }
     }
     moveLookupItem(changes = {}) {
@@ -4681,7 +4742,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';
@@ -4804,10 +4865,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';
@@ -4857,6 +4918,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.
          */
@@ -4872,6 +4937,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");
     }
@@ -4915,6 +4983,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)
@@ -4924,8 +4996,8 @@ CheckBoxComponent = __decorate([
         selector: 'kendo-checkbox',
         template: `
         <input
-            class="k-checkbox"
             type="checkbox"
+            [class]="checkBoxClasses"
             [id]="id"
             [checked]="checked"
             [indeterminate]="indeterminate"