@wavemaker/app-ng-runtime 11.4.0-next.28701 → 11.4.0-rc.121

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

@@ -342,321 +342,445 @@
         ]));
     };
 
-    var defaultTreeIconClass = 'plus-minus';
-    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 defaultTreeIconClass = 'plus-minus';
+    var TreeComponent = /** @class */ (function (_super) {
+        __extends(TreeComponent, _super);
+        function TreeComponent(inj) {
             var _this = _super.call(this, inj, WIDGET_INFO) || this;
-            _this.binddatavalue = binddatavalue;
-            _this.bindnodelabel = bindnodelabel;
-            _this.bindnodeicon = bindnodeicon;
-            _this.bindnodechildren = bindnodechildren;
-            _this.bindnodeid = bindnodeid;
+            _this.setting = {
+                data: {
+                    simpleData: {
+                        enable: false
+                    },
+                    key: {
+                        children: 'children',
+                        name: 'label'
+                    }
+                },
+                view: {
+                    dblClickExpand: false,
+                    fontCss: {
+                        'font-awesome': true
+                    },
+                    switchIcon: {},
+                },
+                check: {},
+                callback: {}
+            };
             base.styler(_this.nativeElement, _this, base.APPLY_STYLES_TYPE.CONTAINER);
-            _this.bindEvents();
             return _this;
         }
-        TreeDirective.prototype.onPropertyChange = function (key, nv, ov) {
+        TreeComponent.prototype.onPropertyChange = function (key, nv, ov) {
             switch (key) {
                 case 'dataset':
                     this.nodes = this.getNodes(nv);
-                    this._selectNode = undefined;
+                    if (this.level > 0) {
+                        this.expandTree(this.level, this.nodes, 0);
+                    }
+                    this.renderTree();
+                    break;
+                case 'levels':
+                    if (nv > 0) {
+                        this.level = nv;
+                    }
+                    this.renderTree();
+                    break;
+                case 'treeicons':
+                    this.treeicon = nv;
                     this.renderTree();
                     break;
-                case 'nodeicon':
                 case 'nodelabel':
+                    this.setting.data.key.name = this.labelKey;
+                    this.renderTree();
+                    break;
                 case 'nodechildren':
-                case 'orderby':
+                    this.setting.data.key.children = this.childrenKey;
                     this.renderTree();
                     break;
-                case 'treeicons':
-                    this.changeTreeIcons(nv, ov);
+                case 'nodeicon':
+                    this.nodeicon = this.iconKey;
+                    this.renderTree();
                     break;
-                case 'datavalue':
-                    this.selectById(nv);
+                case 'orderby':
+                    this.renderTree();
+                    break;
+                case 'class':
+                    this.treeClass = nv;
+                    this.renderTree();
                     break;
                 default:
                     _super.prototype.onPropertyChange.call(this, key, nv, ov);
+                    break;
             }
         };
-        TreeDirective.prototype.constructNodes = function (nodes, parent, levels, deep, _evalDataValue) {
+        // expands the tree nodes if the property is selected.
+        TreeComponent.prototype.expandTree = function (level, node, childLevel) {
             var _this = this;
-            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);
+            node.map(function (childNode) {
+                var children = _this.getChildren(childNode);
+                if (children && !("open" in childNode) && childLevel < level) {
+                    childNode["open"] = true;
+                    _this.expandTree(level, children, childLevel + 1);
                 }
                 else {
-                    if (!nodeIcon) {
-                        $iconNode.addClass('leaf-node');
-                    }
-                    $li.addClass('leaf-node');
+                    childLevel = 0;
+                    return;
                 }
             });
         };
-        TreeDirective.prototype.getNodesFromString = function (value) {
+        // 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) {
             return value.split(',').map(function (item) {
                 return {
                     'label': item && item.trim()
                 };
             });
         };
-        TreeDirective.prototype.getNodes = function (newVal) {
+        // gets the nodes and orders the nodes if required
+        TreeComponent.prototype.getNodes = function (newVal) {
             var nodes;
-            if (_.isString(newVal) && !_.isEmpty(newVal)) {
+            if (_.isArray(newVal)) {
+                nodes = base.getOrderedDataset(newVal, this.orderby);
+            }
+            else if (_.isObject(newVal)) {
+                nodes = [newVal];
+            }
+            else if (_.isString(newVal) && !_.isEmpty(newVal)) {
                 newVal = newVal.trim();
                 if (newVal) {
                     nodes = this.getNodesFromString(newVal);
                 }
             }
-            else if (_.isArray(newVal)) {
-                newVal = base.getOrderedDataset(newVal, this.orderby);
-                nodes = 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) {
+                    var children = _this.getChildren(node);
+                    if (children) {
+                        _this.setNodeData(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 if (_.isObject(newVal)) {
-                nodes = [newVal];
+            else {
+                nodes.map(function (node) {
+                    var children = _this.getChildren(node);
+                    if (children && level > 1) {
+                        if (depth === level) {
+                            parentNode = node;
+                        }
+                        _this.setNodeData(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;
+                    }
+                });
             }
-            return nodes;
         };
-        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 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[this.labelKey] + path;
+            }
+            else {
+                path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode[this.labelKey];
+            }
+            return path;
         };
-        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);
+        // binds the click event to all nodes to open the child nodes
+        TreeComponent.prototype.onClick = function (event, treeId, treeNode, clickFlag) {
+            if (this.nodeclick === "expand") {
+                var nodes = this.treeObj.getSelectedNodes();
+                if (nodes.length > 0) {
+                    this.expandNode(nodes[0], !nodes[0].open, true);
+                }
+            }
+            var path = this.getPath(treeNode, "");
+            var eventParams = {
+                '$event': event,
+                "$item": treeNode,
+                "$path": path
+            };
+            this.setSelectedItem(treeNode);
+            this.invokeEventCallback('select', eventParams);
+        };
+        // 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);
+            var children = this.getChildren(treeNode);
+            children === null || children === void 0 ? void 0 : 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, "");
             var eventParams = {
-                '$event': $event,
-                "$item": $li.data('nodedata'),
+                '$event': event,
+                "$item": treeNode,
                 "$path": path
             };
-            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);
-            }
+            this.invokeEventCallback('collapse', eventParams);
+        };
+        TreeComponent.prototype.getChildren = function (node) {
+            return node[this.childrenKey];
         };
-        TreeDirective.prototype.renderTree = function (forceRender) {
+        Object.defineProperty(TreeComponent.prototype, "childrenKey", {
+            get: function () {
+                if (!this.nodechildren) {
+                    return 'children';
+                }
+                var depth = this.countDepth(this.nodechildren);
+                return depth ? this.nodechildren.split('.').pop() : this.nodechildren;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TreeComponent.prototype, "labelKey", {
+            get: function () {
+                if (!this.nodelabel) {
+                    return 'label';
+                }
+                var depth = this.countDepth(this.nodelabel);
+                return depth ? this.nodelabel.split('.').pop() : this.nodelabel;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TreeComponent.prototype, "iconKey", {
+            get: function () {
+                if (!this.nodeicon) {
+                    return 'icon';
+                }
+                var depth = this.countDepth(this.nodeicon);
+                return depth ? this.nodeicon.split('.').pop() : this.nodeicon;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TreeComponent.prototype, "treeObj", {
+            get: function () {
+                return $.fn.zTree.getZTreeObj("" + this.name);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // function to support backward compatibility of objects
+        TreeComponent.prototype.modifyObjects = function (array) {
             var _this = this;
-            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;
+            array.forEach(function (obj) {
+                obj.icon = obj[_this.nodeicon];
+                var children = _this.getChildren(obj);
+                if (children === null || children === void 0 ? void 0 : children.length) {
+                    _this.modifyObjects(children);
                 }
-                $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();
-            }
+            });
         };
-        TreeDirective.prototype.selectNode = function (evt, value) {
+        // sets the node children property to parent nodes
+        TreeComponent.prototype.setNodeChildren = function (nodes, depth, level, parentNode) {
             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;
+            if (depth <= 0) {
+                return nodes;
             }
-            $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);
+            for (var i = 0; i < nodes.length; i++) {
+                var node = nodes[i];
+                if (depth === level) {
+                    parentNode = nodes[i];
                 }
-                else {
-                    this.datavalue = core.getClonedObject(data) || {};
+                var children = this.getChildren(node);
+                if (children === null || children === void 0 ? void 0 : children.length) {
+                    if (level === 1) {
+                        parentNode[this.childrenKey] = children.map(function (child) {
+                            var _a;
+                            return (_a = {}, _a[_this.labelKey] = child[_this.labelKey], _a[_this.childrenKey] = _this.getChildren(child), _a.icon = child[_this.iconKey], _a);
+                        });
+                        return;
+                    }
+                    else {
+                        this.setNodeChildren(children, depth, level - 1, parentNode);
+                    }
                 }
             }
-            else {
-                this.datavalue = value;
+            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++;
+                }
             }
-            //[Todo-CSP]: this data will be dynamic, can not generate function upfront
-            if (nodeAction) {
-                core.$parseEvent(nodeAction)(this);
+            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; }
             }
-            this.invokeEventCallback('select', { $event: evt, $item: data, $path: path });
-            core.$appDigest();
+            return count;
         };
-        // 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);
+        // Renders the tree on to the dom
+        TreeComponent.prototype.renderTree = function () {
+            if (this.nodes) {
+                this.nativeElement.setAttribute('id', this.name);
+                if (this.nodeicon && this.nodeicon !== 'icon') {
+                    this.modifyObjects(this.nodes);
                 }
-                if (target.is('i') || (target.is('span.title') && _this.nodeclick === 'expand')) {
-                    _this.toggleExpandCollapseNode(evt, $i, li);
+                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");
+                }
+                if (this.nodechildren) {
+                    var depth = this.countDepth(this.nodechildren);
+                    if (depth > 1) {
+                        this.nodes = this.setNodeChildren(this.nodes, depth, depth, null);
+                    }
+                }
+            }
+            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);
         };
-        TreeDirective.prototype.findSelectedNodeParent = function ($li) {
-            return $li.find('> span.title').parents('.app-tree li');
+        TreeComponent.prototype.setSelectedItem = function (treeNode) {
+            this.selecteditem = core.getClonedObject(treeNode) || {};
+            this.selecteditem.path = this.getPath(treeNode, "");
+            var deSelectElm = $("li[treenode].selected");
+            deSelectElm.removeClass('selected');
+            var selectElm = $("#" + treeNode.tId + ":has(.curSelectedNode)");
+            selectElm.addClass('selected');
         };
-        TreeDirective.prototype.selectById = function (value) {
-            this.selectNode(undefined, value);
+        TreeComponent.prototype.expandNode = function (node, expand, eventFlag) {
+            this.treeObj.expandNode(node, expand, false, false, eventFlag);
+            var el = $("#" + node.tId + "_switch");
+            $(el).addClass(this.treeicon || defaultTreeIconClass);
         };
-        TreeDirective.prototype.deselectById = function (value) {
-            this.selecteditem = {};
-            this.selectById();
+        TreeComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.changeTreeIcons(_this.treeicon || defaultTreeIconClass);
+                if (_this.datavalue) {
+                    var nodes = _this.treeObj.getNodes();
+                    var selectNode = void 0;
+                    if (_this.datavalue === 'FirstNode') {
+                        if (nodes.length) {
+                            selectNode = nodes[0];
+                        }
+                    }
+                    if (_this.datavalue === 'LastNode') {
+                        if (nodes.length) {
+                            selectNode = nodes[nodes.length - 1];
+                        }
+                    }
+                    _this.treeObj.selectNode(selectNode, false);
+                    _this.setSelectedItem(selectNode);
+                    _this.expandNode(selectNode, true, false);
+                }
+            }, 200);
         };
-        return TreeDirective;
+        return TreeComponent;
     }(base.StylableComponent));
-    TreeDirective.initializeProps = registerProps();
-    TreeDirective.decorators = [
-        { type: core$1.Directive, args: [{
-                    selector: 'div[wmTree]',
+    TreeComponent.initializeProps = registerProps();
+    TreeComponent.decorators = [
+        { type: core$1.Component, args: [{
+                    selector: 'ul[wmTree]',
+                    template: "<ul #wmTree class=\"ztree\" id=\"ztree\"></ul>  ",
                     providers: [
-                        base.provideAsWidgetRef(TreeDirective)
-                    ]
+                        base.provideAsWidgetRef(TreeComponent)
+                    ],
+                    encapsulation: core$1.ViewEncapsulation.None
                 },] }
     ];
-    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',] }] }
+    TreeComponent.ctorParameters = function () { return [
+        { type: core$1.Injector }
     ]; };
 
     var components = [
-        TreeDirective
+        TreeComponent
     ];
     var TreeModule = /** @class */ (function () {
         function TreeModule() {
@@ -679,7 +803,7 @@
      * Generated bundle index. Do not edit.
      */
 
-    exports.TreeDirective = TreeDirective;
+    exports.TreeComponent = TreeComponent;
     exports.TreeModule = TreeModule;
     exports["ɵa"] = registerProps;