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

package/dist/npm/treeview.component.js

@@ -54,9 +54,10 @@ var 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 %}
  */
 var TreeViewComponent = /** @class */ (function () {
@@ -231,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);
@@ -257,21 +259,33 @@ var TreeViewComponent = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(TreeViewComponent.prototype, "nodeTemplateRef", {
+        get: function () {
+            return this._nodeTemplateRef || this.nodeTemplateQuery;
+        },
         /**
          * @hidden
+         *
+         * Defines the template for each node.
+         * Takes precedence over nested templates in the TreeView tag.
          */
         set: function (template) {
-            this.nodeTemplate = template;
+            this._nodeTemplateRef = template;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(TreeViewComponent.prototype, "loadMoreButtonTemplateRef", {
+        get: function () {
+            return this._loadMoreButtonTemplateRef || this.loadMoreButtonTemplateQuery;
+        },
         /**
          * @hidden
+         *
+         * Defines the template for each load-more button.
+         * Takes precedence over nested templates in the TreeView tag.
          */
         set: function (template) {
-            this.loadMoreButtonTemplate = template;
+            this._loadMoreButtonTemplateRef = template;
         },
         enumerable: true,
         configurable: true
@@ -350,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
@@ -390,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.
@@ -549,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;
         }
@@ -611,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);
@@ -707,18 +747,18 @@ var TreeViewComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], TreeViewComponent.prototype, "nodeDblClick", void 0);
     tslib_1.__decorate([
-        core_1.ContentChild(node_template_directive_1.NodeTemplateDirective, { static: true }),
+        core_1.ContentChild(node_template_directive_1.NodeTemplateDirective, { static: false }),
         tslib_1.__metadata("design:type", node_template_directive_1.NodeTemplateDirective)
-    ], TreeViewComponent.prototype, "nodeTemplate", void 0);
+    ], TreeViewComponent.prototype, "nodeTemplateQuery", void 0);
     tslib_1.__decorate([
         core_1.Input('nodeTemplate'),
         tslib_1.__metadata("design:type", node_template_directive_1.NodeTemplateDirective),
         tslib_1.__metadata("design:paramtypes", [node_template_directive_1.NodeTemplateDirective])
     ], TreeViewComponent.prototype, "nodeTemplateRef", null);
     tslib_1.__decorate([
-        core_1.ContentChild(load_more_button_template_directive_1.LoadMoreButtonTemplateDirective, { static: true }),
+        core_1.ContentChild(load_more_button_template_directive_1.LoadMoreButtonTemplateDirective, { static: false }),
         tslib_1.__metadata("design:type", load_more_button_template_directive_1.LoadMoreButtonTemplateDirective)
-    ], TreeViewComponent.prototype, "loadMoreButtonTemplate", void 0);
+    ], TreeViewComponent.prototype, "loadMoreButtonTemplateQuery", void 0);
     tslib_1.__decorate([
         core_1.Input('loadMoreButtonTemplate'),
         tslib_1.__metadata("design:type", load_more_button_template_directive_1.LoadMoreButtonTemplateDirective),
@@ -785,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]=\"nodeTemplate?.templateRef\"\n            [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplate?.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
@@ -298,15 +298,25 @@ exports.fetchLoadedDescendants = function (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
  */
-exports.sameValues = function (a, b) {
-    if (a.length !== b.length) {
+exports.sameValues = function (as, bs) {
+    if (as.size !== bs.size) {
         return false;
     }
-    var values = new Set(b);
-    return a.every(function (v) { return values.has(v); });
+    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];
 };