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

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

@@ -138,9 +138,9 @@ var TreeViewItemDirective = /** @class */ (function () {
         var _this = this;
         this.subscriptions = [
             this.navigationService.moves
-                .subscribe(function () {
+                .subscribe(function (navState) {
                 _this.updateTabIndex();
-                _this.focusItem();
+                _this.focusItem(navState.shouldScroll);
             }),
             this.navigationService.expands
                 .pipe(operators_1.filter(function (_a) {
@@ -175,9 +175,10 @@ var TreeViewItemDirective = /** @class */ (function () {
     TreeViewItemDirective.prototype.isFocusable = function () {
         return !this.isDisabled && this.navigationService.isFocusable(this.index);
     };
-    TreeViewItemDirective.prototype.focusItem = function () {
+    TreeViewItemDirective.prototype.focusItem = function (scrollIntoView) {
+        if (scrollIntoView === void 0) { scrollIntoView = false; }
         if (this.isInitialized && this.navigationService.isActive(this.index)) {
-            this.element.nativeElement.focus();
+            this.element.nativeElement.focus({ preventScroll: !scrollIntoView });
         }
     };
     TreeViewItemDirective.prototype.moveLookupItem = function (changes) {
@@ -217,7 +218,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,

package/dist/npm/utils.js

@@ -92,7 +92,7 @@ exports.isFocusable = function (element) {
  * @hidden
  */
 exports.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 (!kendo_angular_common_1.isDocumentAvailable()) {
         return null;
     }
@@ -101,20 +101,20 @@ exports.isContent = function (element) {
         node = node.parentNode;
     }
     if (node) {
-        return exports.match(node, '.k-in:not(.k-treeview-load-more-button)');
+        return exports.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.
  */
 exports.getContentElement = function (parent) {
     if (!exports.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 (exports.match(parent, selector)) {
         return parent;
     }
@@ -124,7 +124,7 @@ exports.getContentElement = function (parent) {
  * @hidden
  */
 exports.isLoadMoreButton = function (element) {
-    return exports.isPresent(exports.closestWithMatch(element, '.k-in.k-treeview-load-more-button'));
+    return exports.isPresent(exports.closestWithMatch(element, '.k-treeview-leaf.k-treeview-load-more-button'));
 };
 /**
  * @hidden
@@ -308,3 +308,15 @@ exports.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.
+ */
+exports.getSizeClass = function (component, size) {
+    var SIZE_CLASSES = {
+        'small': "k-" + component + "-sm",
+        'medium': "k-" + component + "-md",
+        'large': "k-" + component + "-lg"
+    };
+    return SIZE_CLASSES[size];
+};