@wavemaker/app-ng-runtime 11.4.0-rc.5351 → 11.4.1-next.140982

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

@@ -346,16 +346,17 @@
     var defaultTreeIconClass = 'plus-minus';
     var TreeComponent = /** @class */ (function (_super) {
         __extends(TreeComponent, _super);
-        function TreeComponent(inj) {
+        function TreeComponent(inj, binddatavalue, bindnodelabel, bindnodeicon, bindnodechildren, bindnodeid) {
             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: {
@@ -369,46 +370,46 @@
                 callback: {}
             };
             base.styler(_this.nativeElement, _this, base.APPLY_STYLES_TYPE.CONTAINER);
+            _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);
             return _this;
         }
         TreeComponent.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.renderTree();
                     break;
                 case 'levels':
-                    if (nv > 0) {
-                        this.level = nv;
-                    }
+                    this.level = nv;
                     this.renderTree();
                     break;
-                case 'treeicons':
-                    this.treeicon = nv;
+                case 'nodeicon':
+                    this.nodeicon = nv;
                     this.renderTree();
                     break;
                 case 'nodelabel':
-                    this.setting.data.key.name = this.labelKey;
+                    this.nodelabel = nv;
                     this.renderTree();
                     break;
                 case 'nodechildren':
-                    this.setting.data.key.children = this.childrenKey;
+                    this.nodechildren = nv;
                     this.renderTree();
                     break;
-                case 'nodeicon':
-                    this.nodeicon = this.iconKey;
+                case 'orderby':
+                    this.orderby = nv;
                     this.renderTree();
                     break;
-                case 'orderby':
+                case 'treeicons':
+                    this.treeicons = nv;
                     this.renderTree();
                     break;
                 case 'class':
                     this.treeClass = nv;
+                    this.setTreeTemplate(this.treeClass);
                     this.renderTree();
-                    break;
                 default:
                     _super.prototype.onPropertyChange.call(this, key, nv, ov);
                     break;
@@ -418,9 +419,9 @@
         TreeComponent.prototype.expandTree = function (level, node, childLevel) {
             var _this = this;
             node.map(function (childNode) {
-                var children = _this.getChildren(childNode);
-                if (children && !("open" in childNode) && childLevel < level) {
-                    childNode["open"] = true;
+                var children = childNode.children;
+                if (children && childLevel < level) {
+                    childNode.open = true;
                     _this.expandTree(level, children, childLevel + 1);
                 }
                 else {
@@ -431,14 +432,15 @@
         };
         // sets the template for the tree based on the property selected.
         TreeComponent.prototype.setTreeTemplate = function (value) {
-            if (value === 'Classic') {
+            var classList = value.split(" ");
+            if (classList.includes('Classic')) {
                 this.setting.check["enable"] = false;
             }
-            else if (value === 'Checkbox') {
+            else if (classList.includes('Checkbox')) {
                 this.setting.check["enable"] = true;
                 this.setting.check["chkStyle"] = 'checkbox';
             }
-            else if (value === 'Radio') {
+            else if (classList.includes('Radio')) {
                 this.setting.check["enable"] = true;
                 this.setting.check["chkStyle"] = 'radio';
                 this.setting.check["radioType"] = "all";
@@ -470,53 +472,10 @@
             return nodes;
         };
         // adds class to the nodes inorder to add icons to respective node.
-        TreeComponent.prototype.setNodeclasses = function (treeId, treeNode) {
+        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 {
-                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;
-                    }
-                });
-            }
-        };
         // 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');
@@ -529,31 +488,25 @@
                 });
             });
         };
+        // Returns the node path
         TreeComponent.prototype.getPath = function (treeNode, path) {
             if (treeNode.getParentNode() === null) {
-                path = "/" + treeNode[this.labelKey] + path;
+                path = "/" + treeNode.name + path;
             }
             else {
-                path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode[this.labelKey];
+                path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode.name;
             }
             return 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();
+                var nodes = this.zTree.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);
+            this.selectNode(event, treeNode);
         };
         // Adds tree icon classes to child nodes when expanded
         TreeComponent.prototype.onExpand = function (event, treeId, treeNode) {
@@ -561,18 +514,18 @@
             var path = this.getPath(treeNode, "");
             var eventParams = {
                 '$event': event,
-                "$item": treeNode,
+                "$item": core.getClonedObject(treeNode.data),
                 "$path": path
             };
             this.invokeEventCallback('expand', eventParams);
-            var children = this.getChildren(treeNode);
+            var children = treeNode.children;
             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).addClass(self.treeicons || defaultTreeIconClass);
                     $(ele_1).on("click", function (e) {
                         setTimeout(function () {
-                            $(ele_1).addClass(self.treeicon || defaultTreeIconClass);
+                            $(ele_1).addClass(self.treeicons || defaultTreeIconClass);
                         }, 0);
                     });
                 }
@@ -582,186 +535,124 @@
             var path = this.getPath(treeNode, "");
             var eventParams = {
                 '$event': event,
-                "$item": treeNode,
+                "$item": core.getClonedObject(treeNode.data),
                 "$path": path
             };
             this.invokeEventCallback('collapse', eventParams);
         };
-        TreeComponent.prototype.getChildren = function (node) {
-            return node[this.childrenKey];
-        };
-        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) {
+        TreeComponent.prototype.constructZTreeData = function (data, zTreeData) {
             var _this = this;
-            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);
+            data.forEach(function (node) {
+                var zNode = {};
+                var name = base.getEvaluatedData(node, { field: _this.nodelabel, bindExpression: _this.bindnodelabel }, _this.viewParent) || node.label;
+                var icon = base.getEvaluatedData(node, { field: _this.nodeicon, bindExpression: _this.bindnodeicon }, _this.viewParent) || node.icon;
+                var nodeId = base.getEvaluatedData(node, { field: _this.nodeid, bindExpression: _this.bindnodeid }, _this.viewParent);
+                var children = base.getEvaluatedData(node, { field: _this.nodechildren, bindExpression: _this.bindnodechildren }, _this.viewParent) || node.children;
+                zNode['name'] = name;
+                zNode['icon'] = icon;
+                zNode['nodeId'] = nodeId;
+                zNode['data'] = core.getClonedObject(node);
+                if (_.isArray(children) && children.length) {
+                    zNode['children'] = [];
+                    _this.constructZTreeData(children, zNode['children']);
                 }
+                zTreeData.push(zNode);
             });
         };
-        // sets the node children property to parent nodes
-        TreeComponent.prototype.setNodeChildren = function (nodes, depth, level, parentNode) {
-            var _this = this;
-            if (depth <= 0) {
-                return nodes;
-            }
-            for (var i = 0; i < nodes.length; i++) {
-                var node = nodes[i];
-                if (depth === level) {
-                    parentNode = nodes[i];
-                }
-                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);
-                    }
-                }
-            }
-            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++;
-                }
-            }
-            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; }
-            }
-            return count;
-        };
         // Renders the tree on to the dom
         TreeComponent.prototype.renderTree = function () {
-            if (this.nodes) {
+            var _a;
+            this.zTreeNodes = [];
+            if ((_a = this.nodes) === null || _a === void 0 ? void 0 : _a.length) {
                 this.nativeElement.setAttribute('id', this.name);
-                if (this.nodeicon && this.nodeicon !== 'icon') {
-                    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");
-                }
-                if (this.nodechildren) {
-                    var depth = this.countDepth(this.nodechildren);
-                    if (depth > 1) {
-                        this.nodes = this.setNodeChildren(this.nodes, depth, depth, null);
-                    }
+                this.constructZTreeData(this.nodes, this.zTreeNodes);
+                if (this.level > 0) {
+                    this.expandTree(this.level, this.zTreeNodes, 0);
                 }
             }
-            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);
+            this.zTree = $.fn.zTree.init($('ul[name="' + this.name + '"]'), this.setting, this.zTreeNodes);
+            $.fn.zTreeKeyboardNavigation(this.zTree, $('ul[name="' + this.name + '"]'), null, this.treeicons || defaultTreeIconClass);
+            this.postRenderTree();
+        };
+        TreeComponent.prototype.setChecked = function (zNode, node) {
+            var _this = this;
+            node.checked = zNode.checked;
+            var children = base.getEvaluatedData(node, { field: this.nodechildren, bindExpression: this.bindnodechildren }, this.viewParent) || node.children;
+            if (children === null || children === void 0 ? void 0 : children.length) {
+                children.forEach(function (node, index) {
+                    _this.setChecked(zNode.children[index], node);
+                });
+            }
         };
-        TreeComponent.prototype.setSelectedItem = function (treeNode) {
-            this.selecteditem = core.getClonedObject(treeNode) || {};
-            this.selecteditem.path = this.getPath(treeNode, "");
-            var deSelectElm = $("li[treenode].selected");
+        TreeComponent.prototype.selectNode = function (event, node) {
+            var deSelectElm = $(".app-tree[name=" + this.name + "] li[treenode].selected");
             deSelectElm.removeClass('selected');
-            var selectElm = $("#" + treeNode.tId + ":has(.curSelectedNode)");
+            if (!node) {
+                return;
+            }
+            var selectElm = $("#" + node.tId + ":has(.curSelectedNode)");
             selectElm.addClass('selected');
+            var classList = (this.treeClass || "").split(" ");
+            if (classList.includes('Checkbox') || classList.includes('Radio')) {
+                this.setChecked(node, node.data);
+            }
+            var path = this.getPath(node, "");
+            this.selecteditem = core.getClonedObject(node.data) || {};
+            this.selecteditem.path = path;
+            var eventParams = {
+                '$event': event,
+                "$item": core.getClonedObject(node.data),
+                "$path": path
+            };
+            //[Todo-CSP]: this data will be dynamic, can not generate function upfront
+            var nodeAction = node.data[this.nodeaction || 'action'];
+            if (nodeAction) {
+                core.$parseEvent(nodeAction)(this);
+            }
+            this.invokeEventCallback('select', eventParams);
         };
         TreeComponent.prototype.expandNode = function (node, expand, eventFlag) {
-            this.treeObj.expandNode(node, expand, false, false, eventFlag);
+            this.zTree.expandNode(node, expand, false, false, eventFlag);
             var el = $("#" + node.tId + "_switch");
-            $(el).addClass(this.treeicon || defaultTreeIconClass);
+            $(el).addClass(this.treeicons || defaultTreeIconClass);
         };
-        TreeComponent.prototype.ngAfterViewInit = function () {
+        TreeComponent.prototype.postRenderTree = 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];
+                _this.changeTreeIcons(_this.treeicons || defaultTreeIconClass);
+                if (_this.datavalue && !_this.selecteditem) {
+                    var nodes = _this.zTree.getNodes();
+                    var node = void 0;
+                    if (nodes.length) {
+                        if (_this.datavalue === 'FirstNode') {
+                            node = nodes[0];
                         }
-                    }
-                    if (_this.datavalue === 'LastNode') {
-                        if (nodes.length) {
-                            selectNode = nodes[nodes.length - 1];
+                        if (_this.datavalue === 'LastNode') {
+                            node = nodes[nodes.length - 1];
                         }
                     }
-                    _this.treeObj.selectNode(selectNode, false);
-                    _this.setSelectedItem(selectNode);
-                    _this.expandNode(selectNode, true, false);
+                    if (node) {
+                        _this.zTree.selectNode(node, false);
+                        _this.selectNode(undefined, node);
+                        _this.expandNode(node, true, false);
+                    }
                 }
             }, 200);
         };
+        TreeComponent.prototype.selectById = function (value) {
+            var _a;
+            var simpleNodes = (_a = this.zTree) === null || _a === void 0 ? void 0 : _a.transformToArray(this.zTree.getNodes());
+            var node = simpleNodes === null || simpleNodes === void 0 ? void 0 : simpleNodes.find(function (node) { return value === node.nodeId; });
+            if (node) {
+                this.zTree.selectNode(node, false);
+                this.selectNode(undefined, node);
+            }
+        };
+        TreeComponent.prototype.deselectById = function (value) {
+            this.selecteditem = {};
+            this.selectById();
+        };
         return TreeComponent;
     }(base.StylableComponent));
     TreeComponent.initializeProps = registerProps();
@@ -776,7 +667,12 @@
                 },] }
     ];
     TreeComponent.ctorParameters = function () { return [
-        { type: core$1.Injector }
+        { 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 = [