@wavemaker/app-ng-runtime 11.4.0-next.25701 → 11.4.0-next.25703

app-ng-runtime/components/base/utils/widget-utils.d.ts

@@ -116,4 +116,4 @@ export declare const setFocusTrap: (container: any, allowOutsideClick: any, setR
  * @param element {HTMLElement}
  * @returns {Array}
  */
-export declare const getKeyboardFocusableElements: (element: HTMLElement) => Element[];
+export declare const getKeyboardFocusableElements: (element: HTMLElement) => NodeListOf<Element>;

app-ng-runtime/components/basic/tree/bundles/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/components/base')) :
-    typeof define === 'function' && define.amd ? define('@wm/components/basic/tree', ['exports', '@angular/core', '@angular/common', '@wm/components/base'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.basic = global.wm.components.basic || {}, global.wm.components.basic.tree = {}), global.ng.core, global.ng.common, global.wm.components.base));
-})(this, (function (exports, core, common, base) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/components/base'), require('@wm/core')) :
+    typeof define === 'function' && define.amd ? define('@wm/components/basic/tree', ['exports', '@angular/core', '@angular/common', '@wm/components/base', '@wm/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.basic = global.wm.components.basic || {}, global.wm.components.basic.tree = {}), global.ng.core, global.ng.common, global.wm.components.base, global.wm.core));
+})(this, (function (exports, core$1, common, base, core) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -342,345 +342,321 @@
         ]));
     };
 
-    var WIDGET_INFO = { widgetType: 'wm-tree', hostClass: 'app-tree' };
     var defaultTreeIconClass = 'plus-minus';
-    var TreeComponent = /** @class */ (function (_super) {
-        __extends(TreeComponent, _super);
-        function TreeComponent(inj) {
+    var ICON_CLASSES = {
+        'folder': {
+            'expanded': 'wi-folder-open',
+            'collapsed': 'wi-folder'
+        },
+        'circle-plus-minus': {
+            'expanded': 'wi-remove-circle-outline',
+            'collapsed': 'wi-add-circle-outline'
+        },
+        'chevron': {
+            'expanded': 'wi-keyboard-arrow-down',
+            'collapsed': 'wi-keyboard-arrow-right'
+        },
+        'menu': {
+            'expanded': 'wi-arrow-down',
+            'collapsed': 'wi-arrow-right'
+        },
+        'triangle': {
+            'expanded': 'wi-arrow-drop-down-circle',
+            'collapsed': 'wi-play-circle-filled'
+        },
+        'expand-collapse': {
+            'expanded': 'wi-expand-less',
+            'collapsed': 'wi-expand-more'
+        },
+        'plus-minus': {
+            'expanded': 'wi-minus',
+            'collapsed': 'wi-plus'
+        }
+    };
+    var WIDGET_INFO = { widgetType: 'wm-tree', hostClass: 'app-tree' };
+    var TreeDirective = /** @class */ (function (_super) {
+        __extends(TreeDirective, _super);
+        function TreeDirective(inj, binddatavalue, bindnodelabel, bindnodeicon, bindnodechildren, bindnodeid) {
             var _this = _super.call(this, inj, WIDGET_INFO) || this;
-            _this.setting = {
-                data: {
-                    simpleData: {
-                        enable: true
-                    },
-                },
-                view: {
-                    dblClickExpand: false,
-                    fontCss: {
-                        'font-awesome': true
-                    },
-                    switchIcon: {},
-                },
-                check: {},
-                callback: {}
-            };
+            _this.binddatavalue = binddatavalue;
+            _this.bindnodelabel = bindnodelabel;
+            _this.bindnodeicon = bindnodeicon;
+            _this.bindnodechildren = bindnodechildren;
+            _this.bindnodeid = bindnodeid;
             base.styler(_this.nativeElement, _this, base.APPLY_STYLES_TYPE.CONTAINER);
+            _this.bindEvents();
             return _this;
         }
-        TreeComponent.prototype.onPropertyChange = function (key, nv, ov) {
+        TreeDirective.prototype.onPropertyChange = function (key, nv, ov) {
             switch (key) {
                 case 'dataset':
                     this.nodes = this.getNodes(nv);
-                    if (this.level > 0) {
-                        this.expandTree(this.level, this.nodes, 0);
-                    }
+                    this._selectNode = undefined;
                     this.renderTree();
                     break;
-                case 'levels':
-                    if (nv > 0) {
-                        this.level = nv;
-                    }
-                    break;
-                case 'treeicons':
-                    this.treeicon = nv;
-                    break;
+                case 'nodeicon':
                 case 'nodelabel':
-                    this.nodelabel = nv;
-                    break;
-                case 'icon':
-                    this.nodeicon = nv;
+                case 'nodechildren':
                 case 'orderby':
                     this.renderTree();
                     break;
-                case 'class':
-                    this.treeClass = nv;
+                case 'treeicons':
+                    this.changeTreeIcons(nv, ov);
+                    break;
+                case 'datavalue':
+                    this.selectById(nv);
                     break;
                 default:
                     _super.prototype.onPropertyChange.call(this, key, nv, ov);
-                    break;
             }
         };
-        // expands the tree nodes if the property is selected.
-        TreeComponent.prototype.expandTree = function (level, node, childLevel) {
+        TreeDirective.prototype.constructNodes = function (nodes, parent, levels, deep, _evalDataValue) {
             var _this = this;
-            node.map(function (childNode) {
-                if ("children" in childNode && !("open" in childNode) && childLevel < level) {
-                    childNode["open"] = true;
-                    _this.expandTree(level, childNode.children, childLevel + 1);
+            var $ul = $('<ul></ul>');
+            var _iconClses = ICON_CLASSES[this.treeicons || defaultTreeIconClass];
+            var _expr = (this.binddatavalue || this.datavalue);
+            var _iconCls, _cls;
+            _cls = levels > 0 ? ' expanded ' : ' collapsed ';
+            _iconCls = _cls + (levels > 0 ? _iconClses.expanded : _iconClses.collapsed);
+            deep = deep || 0;
+            parent.append($ul);
+            nodes.forEach(function (node, idx) {
+                var $li = $('<li></li>'), $iconNode = $('<i></i>'), nodeLabel = base.getEvaluatedData(node, { field: _this.nodelabel, bindExpression: _this.bindnodelabel }, _this.viewParent) || node.label, nodeIcon = base.getEvaluatedData(node, { field: _this.nodeicon, bindExpression: _this.bindnodeicon }, _this.viewParent) || node.icon, nodeChildren = base.getEvaluatedData(node, { field: _this.nodechildren, bindExpression: _this.bindnodechildren }, _this.viewParent) || node.children;
+                var nodeIdValue = base.getEvaluatedData(node, { field: _this.nodeid, bindExpression: _this.bindnodeid }, _this.viewParent);
+                if (nodeIdValue === undefined) {
+                    nodeIdValue = node.children;
+                }
+                var isNodeMatched = false, expandCollapseIcon;
+                $li.data('nodedata', node)
+                    .append($iconNode)
+                    .append("<span class=\"title\">" + nodeLabel + "</span>")
+                    .appendTo($ul);
+                // if datavalue(ie, expr) is provided select the tree node accordingly
+                // if datavalue === 'FirstNode' -- select the FirstNode at level 0
+                // if datavalue === 'LastNode' -- select the LastNode at level 0
+                // if datavalue is a bind expression evaluate the expression for each node of the tree till the condition is satisfied.
+                // if node identifier is present then verify the datavalue is bound expr or static value and compare with the node model
+                if (_this.bindnodeid || _this.nodeid) {
+                    isNodeMatched = _this.binddatavalue ? nodeIdValue === _evalDataValue : nodeIdValue === _expr;
+                    if (nodeIdValue !== undefined) {
+                        $li.attr('id', nodeIdValue);
+                    }
+                }
+                else if (_this.binddatavalue) { // evaluate the expression only if it is bound (useExpression)
+                    isNodeMatched = !!core.$parseExpr(_expr)(_this, node);
+                }
+                // Perform LastNode check only at level 0.(ie, deep = 0);
+                if (!_this._selectNode) {
+                    if ((_expr === 'FirstNode' && idx === 0)
+                        || (!deep && _expr === 'LastNode' && idx === nodes.length - 1)
+                        || isNodeMatched) {
+                        // save a reference of the node to be selected in `_selectNode`
+                        _this._selectNode = $li;
+                        _this.datavalue = nodeIdValue;
+                    }
+                }
+                if (nodeIcon) {
+                    $iconNode.addClass(nodeIcon);
+                }
+                if (nodeChildren && nodeChildren.length) { // parent node
+                    $li.addClass("parent-node " + _cls);
+                    expandCollapseIcon = $("<i class=\"wi " + _iconCls + "\"></i>");
+                    if (nodeIcon) {
+                        $iconNode.addClass(nodeIcon);
+                    }
+                    $li.prepend(expandCollapseIcon);
+                    _this.constructNodes(nodeChildren, $li, levels - 1, deep + 1, _evalDataValue);
                 }
                 else {
-                    childLevel = 0;
-                    return;
+                    if (!nodeIcon) {
+                        $iconNode.addClass('leaf-node');
+                    }
+                    $li.addClass('leaf-node');
                 }
             });
         };
-        // sets the template for the tree based on the property selected.
-        TreeComponent.prototype.setTreeTemplate = function (value) {
-            if (value === 'Classic') {
-                this.setting.check["enable"] = false;
-            }
-            else if (value === 'Checkbox') {
-                this.setting.check["enable"] = true;
-                this.setting.check["chkStyle"] = 'checkbox';
-            }
-            else if (value === 'Radio') {
-                this.setting.check["enable"] = true;
-                this.setting.check["chkStyle"] = 'radio';
-                this.setting.check["radioType"] = "all";
-            }
-        };
-        // extracts nodes from string format
-        TreeComponent.prototype.getNodesFromString = function (value) {
+        TreeDirective.prototype.getNodesFromString = function (value) {
             return value.split(',').map(function (item) {
                 return {
-                    'name': item && item.trim()
+                    'label': item && item.trim()
                 };
             });
         };
-        // gets the nodes and orders the nodes if required
-        TreeComponent.prototype.getNodes = function (newVal) {
+        TreeDirective.prototype.getNodes = function (newVal) {
             var nodes;
-            if (_.isArray(newVal)) {
-                nodes = base.getOrderedDataset(newVal, this.orderby);
-            }
-            else if (_.isObject(newVal)) {
-                nodes = [newVal];
-            }
-            else if (_.isString(newVal) && !_.isEmpty(newVal)) {
+            if (_.isString(newVal) && !_.isEmpty(newVal)) {
                 newVal = newVal.trim();
                 if (newVal) {
                     nodes = this.getNodesFromString(newVal);
                 }
             }
-            return nodes;
-        };
-        // adds class to the nodes inorder to add icons to respective node.
-        TreeComponent.prototype.setNodeclasses = function (treeId, treeNode) {
-            return treeNode.icon ? { add: ["" + treeNode.icon] } : '';
-        };
-        ;
-        // Sets the node label with any icon if bound to
-        TreeComponent.prototype.setNodeData = function (nodes, depth, level, parentNode, type) {
-            var _this = this;
-            if (depth === 0) {
-                nodes.map(function (node) {
-                    if (node.children) {
-                        _this.setNodeData(node.children, depth, level, parentNode, type);
-                    }
-                    if (node.icon && _this.nodelabel == 'icon') {
-                        node[type] = node.icon;
-                    }
-                    else if (node.name && _this.nodelabel == 'name') {
-                        node[type] = node.name;
-                    }
-                    else {
-                        return;
-                    }
-                });
-            }
-            else {
-                nodes.map(function (node) {
-                    if (node.children && level > 1) {
-                        if (depth === level) {
-                            parentNode = node;
-                        }
-                        _this.setNodeData(node.children, depth, level - 1, parentNode, type);
-                    }
-                    if (level === 1 && (type === "name" ? _this.nodelabel.includes("label") || _this.nodelabel.includes("name") : _this.nodeicon.includes("label") || _this.nodeicon.includes("name"))) {
-                        parentNode[type] = node.name || node.label;
-                        return;
-                    }
-                    else if (level === 1 && (node.icon !== undefined) && (type === "name" ? _this.nodelabel.includes("icon") : _this.nodeicon.includes("icon"))) {
-                        parentNode[type] = node.icon;
-                        return;
-                    }
-                    else {
-                        return;
-                    }
-                });
-            }
-        };
-        // adds tree icons to the nodes on load of the tree
-        TreeComponent.prototype.changeTreeIcons = function (nv) {
-            var eleClose = $('ul[name="' + this.name + '"] li span.button.switch');
-            $(eleClose).map(function (idx, ele) {
-                $(ele).addClass(nv);
-                $(ele).on("click", function (e) {
-                    setTimeout(function () {
-                        $(ele).addClass(nv);
-                    }, 0);
-                });
-            });
-        };
-        TreeComponent.prototype.getPath = function (treeNode, path) {
-            if (treeNode.getParentNode() === null) {
-                path = "/" + treeNode.name + path;
+            else if (_.isArray(newVal)) {
+                newVal = base.getOrderedDataset(newVal, this.orderby);
+                nodes = newVal;
             }
-            else {
-                path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode.name;
+            else if (_.isObject(newVal)) {
+                nodes = [newVal];
             }
-            return path;
+            return nodes;
         };
-        // binds the click event to all nodes to open the child nodes
-        TreeComponent.prototype.onClick = function (event, treeId, treeNode, clickFlag) {
-            var treeObj = $.fn.zTree.getZTreeObj("" + this.name);
-            var path = this.getPath(treeNode, "");
-            var eventParams = {
-                '$event': event,
-                "$item": treeNode,
-                "$path": path
-            };
-            this.invokeEventCallback('select', eventParams);
+        TreeDirective.prototype.changeTreeIcons = function (nv, ov) {
+            var $el = $(this.nativeElement);
+            nv = nv || defaultTreeIconClass;
+            ov = ov || defaultTreeIconClass;
+            $el.find('i.expanded').removeClass(ICON_CLASSES[ov].expanded).addClass(ICON_CLASSES[nv].expanded);
+            $el.find('i.collapsed').removeClass(ICON_CLASSES[ov].collapsed).addClass(ICON_CLASSES[nv].collapsed);
         };
-        // Adds tree icon classes to child nodes when expanded
-        TreeComponent.prototype.onExpand = function (event, treeId, treeNode) {
-            var self = this;
-            var path = this.getPath(treeNode, "");
-            var eventParams = {
-                '$event': event,
-                "$item": treeNode,
-                "$path": path
-            };
-            this.invokeEventCallback('expand', eventParams);
-            treeNode.children ? treeNode.children.map(function (el) {
-                if (el.isParent) {
-                    var ele_1 = $("#" + el.tId + "_switch");
-                    $(ele_1).addClass(self.treeicon || defaultTreeIconClass);
-                    $(ele_1).on("click", function (e) {
-                        setTimeout(function () {
-                            $(ele_1).addClass(self.treeicon || defaultTreeIconClass);
-                        }, 0);
-                    });
-                }
-            }) : '';
-        };
-        TreeComponent.prototype.onCollapse = function (event, treeId, treeNode) {
-            var path = this.getPath(treeNode, "");
+        TreeDirective.prototype.toggleExpandCollapseNode = function ($event, $i, $li) {
+            var treeIcons = ICON_CLASSES[this.treeicons || defaultTreeIconClass];
+            var $liPath = this.findSelectedNodeParent($li);
+            var path = '';
+            // construct the path of the node
+            $liPath
+                .each(function (i, el) {
+                var current = $(el).children('.title').text();
+                path = "/" + (current + path);
+            });
             var eventParams = {
-                '$event': event,
-                "$item": treeNode,
+                '$event': $event,
+                "$item": $li.data('nodedata'),
                 "$path": path
             };
-            this.invokeEventCallback('collapse', eventParams);
+            if ($i.hasClass('collapsed')) {
+                $i.removeClass("collapsed " + treeIcons.collapsed).addClass("expanded " + treeIcons.expanded);
+                $li.removeClass('collapsed').addClass('expanded');
+                this.invokeEventCallback('expand', eventParams);
+            }
+            else if ($i.hasClass('expanded')) {
+                $i.removeClass("expanded " + treeIcons.expanded).addClass("collapsed " + treeIcons.collapsed);
+                $li.removeClass('expanded').addClass('collapsed');
+                this.invokeEventCallback('collapse', eventParams);
+            }
         };
-        // function to support backward compatibility of objects
-        TreeComponent.prototype.modifyObjects = function (array) {
+        TreeDirective.prototype.renderTree = function (forceRender) {
             var _this = this;
-            array.forEach(function (obj) {
-                if (obj.label !== undefined) {
-                    obj.name = obj.label;
-                    delete obj.label;
-                }
-                if (obj.children !== undefined) {
-                    _this.modifyObjects(obj.children);
+            var docFrag, $li, $liPath, data, path = '';
+            var levels = +this.nativeElement.getAttribute('levels') || 0, $el = $(this.nativeElement);
+            $el.empty();
+            if (forceRender) {
+                this._selectNode = undefined;
+            }
+            if (this.nodes && this.nodes.length) {
+                docFrag = document.createDocumentFragment();
+                this.constructNodes(this.nodes, $(docFrag), levels, 0, this.datavalue);
+                $el.append(docFrag);
+            }
+            if (this._selectNode) {
+                $li = this._selectNode;
+                $li.addClass('selected');
+                data = $li.data('nodedata');
+                $liPath = this.findSelectedNodeParent($li);
+                if (!$liPath.length) {
+                    $liPath = $li;
                 }
-            });
-            return array;
+                $liPath
+                    .each(function (i, el) {
+                    var $current = $(el), $i = $current.children('i.collapsed'), $title = $current.children('.title');
+                    _this.toggleExpandCollapseNode(undefined, $i, $current);
+                    path = "/" + ($title.text() + path);
+                });
+                this.selecteditem = core.getClonedObject(data) || {};
+                this.selecteditem.path = path;
+                this.invokeEventCallback('select', { $event: undefined, $item: data, $path: path });
+                core.$appDigest();
+            }
         };
-        // sets the node children property to parent nodes
-        TreeComponent.prototype.setNodeChildren = function (nodes, depth, level, parentNode) {
-            if (depth <= 0) {
-                return nodes;
+        TreeDirective.prototype.selectNode = function (evt, value) {
+            var _this = this;
+            var target = evt && $(evt.target), $el = $(this.nativeElement), $li = _.isObject(value) ? value : $el.find("li[id=\"" + value + "\"]").first();
+            var data, path = '', $liPath, nodeAction;
+            $el.find('.selected').removeClass('selected');
+            if (!$li.length) {
+                return;
             }
-            for (var i = 0; i < nodes.length; i++) {
-                var node = nodes[i];
-                if (depth === level) {
-                    parentNode = nodes[i];
+            $li.addClass('selected');
+            data = $li.data('nodedata');
+            nodeAction = data[this.nodeaction || 'action'];
+            // if the selectNode is initiated by click event then use the nativeElement target from event
+            $liPath = target ? target.parents('.app-tree li') : this.findSelectedNodeParent($li);
+            // construct the path of the node
+            $liPath
+                .each(function (i, el) {
+                var current = $(el).children('.title').text();
+                path = "/" + (current + path);
+            });
+            // expand the current node till the viewParent level which is collapsed
+            $li.parentsUntil($el, 'li.parent-node.collapsed')
+                .each(function (index, el) {
+                var $current = $(el), $i = $current.children('i.collapsed');
+                _this.toggleExpandCollapseNode(undefined, $i, $current);
+            });
+            this.selecteditem = core.getClonedObject(data) || {};
+            this.selecteditem.path = path;
+            if (target) {
+                if (this.nodeid || this.bindnodeid) {
+                    this.datavalue = base.getEvaluatedData(data, { field: this.nodeid, bindExpression: this.bindnodeid }, this.viewParent);
                 }
-                if (node.children && node.children.length > 0) {
-                    if (level === 1) {
-                        parentNode.children = node.children.map(function (child) { return ({ name: child.name, children: child === null || child === void 0 ? void 0 : child.children }); });
-                        return;
-                    }
-                    else {
-                        this.setNodeChildren(node.children, depth, level - 1, parentNode);
-                    }
+                else {
+                    this.datavalue = core.getClonedObject(data) || {};
                 }
             }
-            return nodes;
-        };
-        TreeComponent.prototype.countDepth = function (str) {
-            var e_1, _a;
-            var regex = /\[.*?\]/g;
-            var matches = str.match(regex);
-            var count = 1;
-            if (matches === null)
-                return count;
-            try {
-                for (var matches_1 = __values(matches), matches_1_1 = matches_1.next(); !matches_1_1.done; matches_1_1 = matches_1.next()) {
-                    var match = matches_1_1.value;
-                    count++;
-                }
+            else {
+                this.datavalue = value;
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (matches_1_1 && !matches_1_1.done && (_a = matches_1.return)) _a.call(matches_1);
-                }
-                finally { if (e_1) throw e_1.error; }
+            //[Todo-CSP]: this data will be dynamic, can not generate function upfront
+            if (nodeAction) {
+                core.$parseEvent(nodeAction)(this);
             }
-            return count;
+            this.invokeEventCallback('select', { $event: evt, $item: data, $path: path });
+            core.$appDigest();
         };
-        // Renders the tree on to the dom
-        TreeComponent.prototype.renderTree = function () {
-            console.log(this.nodes, 'this.nodes');
-            if (this.nodes) {
-                this.nativeElement.setAttribute('id', this.name);
-                this.nodes = this.modifyObjects(this.nodes);
-                this.setTreeTemplate(this.treeClass);
-                if (this.nodelabel) {
-                    var depth = 0;
-                    if (this.nodelabel.includes("children")) {
-                        depth = this.countDepth(this.nodelabel);
-                    }
-                    this.setNodeData(this.nodes, depth, depth, null, "name");
-                }
-                if (this.nodeicon) {
-                    var depth = 0;
-                    if (this.nodeicon.includes("children")) {
-                        depth = this.countDepth(this.nodeicon);
-                    }
-                    this.setNodeData(this.nodes, depth, depth, null, "icon");
+        // click event is added on the host nativeElement
+        TreeDirective.prototype.bindEvents = function () {
+            var _this = this;
+            $(this.nativeElement).on('click', function (evt) {
+                var target = $(evt.target), li = target.closest('li'), $i = target.is('i') ? target : target.siblings('i.collapsed,i.expanded');
+                evt.stopPropagation();
+                if (target.is('span.title')) { // select the node only if it is nodelabel
+                    _this.selecteditem = {};
+                    _this.selectNode(evt, li);
                 }
-                if (this.nodechildren) {
-                    var depth = this.countDepth(this.nodechildren);
-                    if (depth > 1) {
-                        this.nodes = this.setNodeChildren(this.nodes, depth, depth, null);
-                    }
+                if (target.is('i') || (target.is('span.title') && _this.nodeclick === 'expand')) {
+                    _this.toggleExpandCollapseNode(evt, $i, li);
                 }
-            }
-            this.setting.view['nodeClasses'] = this.setNodeclasses;
-            this.setting.callback["onClick"] = this.onClick.bind(this);
-            this.setting.callback["onExpand"] = this.onExpand.bind(this);
-            this.setting.callback["onCollapse"] = this.onCollapse.bind(this);
-            var zTree = $.fn.zTree.init($('ul[name="' + this.name + '"]'), this.setting, this.nodes);
-            $.fn.zTreeKeyboardNavigation(zTree, $('ul[name="' + this.name + '"]'), null, this.treeicon || defaultTreeIconClass);
+            });
         };
-        TreeComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            setTimeout(function () {
-                _this.changeTreeIcons(_this.treeicon || defaultTreeIconClass);
-            }, 200);
+        TreeDirective.prototype.findSelectedNodeParent = function ($li) {
+            return $li.find('> span.title').parents('.app-tree li');
         };
-        return TreeComponent;
+        TreeDirective.prototype.selectById = function (value) {
+            this.selectNode(undefined, value);
+        };
+        TreeDirective.prototype.deselectById = function (value) {
+            this.selecteditem = {};
+            this.selectById();
+        };
+        return TreeDirective;
     }(base.StylableComponent));
-    TreeComponent.initializeProps = registerProps();
-    TreeComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'ul[wmTree]',
-                    template: "<ul #wmTree class=\"ztree\" id=\"ztree\"></ul>  ",
+    TreeDirective.initializeProps = registerProps();
+    TreeDirective.decorators = [
+        { type: core$1.Directive, args: [{
+                    selector: 'div[wmTree]',
                     providers: [
-                        base.provideAsWidgetRef(TreeComponent)
-                    ],
-                    encapsulation: core.ViewEncapsulation.None
+                        base.provideAsWidgetRef(TreeDirective)
+                    ]
                 },] }
     ];
-    TreeComponent.ctorParameters = function () { return [
-        { type: core.Injector }
+    TreeDirective.ctorParameters = function () { return [
+        { type: core$1.Injector },
+        { type: undefined, decorators: [{ type: core$1.Attribute, args: ['datavalue.bind',] }] },
+        { type: undefined, decorators: [{ type: core$1.Attribute, args: ['nodelabel.bind',] }] },
+        { type: undefined, decorators: [{ type: core$1.Attribute, args: ['nodeicon.bind',] }] },
+        { type: undefined, decorators: [{ type: core$1.Attribute, args: ['nodechildren.bind',] }] },
+        { type: undefined, decorators: [{ type: core$1.Attribute, args: ['nodeid.bind',] }] }
     ]; };
 
     var components = [
-        TreeComponent
+        TreeDirective
     ];
     var TreeModule = /** @class */ (function () {
         function TreeModule() {
@@ -688,7 +664,7 @@
         return TreeModule;
     }());
     TreeModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: core$1.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         base.WmComponentsModule
@@ -703,7 +679,7 @@
      * Generated bundle index. Do not edit.
      */
 
-    exports.TreeComponent = TreeComponent;
+    exports.TreeDirective = TreeDirective;
     exports.TreeModule = TreeModule;
     exports["ɵa"] = registerProps;