@wavemaker/app-ng-runtime 11.5.0-next.40002 → 11.5.0-next.40301

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

@@ -346,17 +346,16 @@
     var defaultTreeIconClass = 'plus-minus';
     var TreeComponent = /** @class */ (function (_super) {
         __extends(TreeComponent, _super);
-        function TreeComponent(inj, binddatavalue, bindnodelabel, bindnodeicon, bindnodechildren, bindnodeid) {
+        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: {
@@ -370,46 +369,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':
-                    this.level = nv;
+                    if (nv > 0) {
+                        this.level = nv;
+                    }
                     this.renderTree();
                     break;
-                case 'nodeicon':
-                    this.nodeicon = nv;
+                case 'treeicons':
+                    this.treeicon = nv;
                     this.renderTree();
                     break;
                 case 'nodelabel':
-                    this.nodelabel = nv;
+                    this.setting.data.key.name = this.labelKey;
                     this.renderTree();
                     break;
                 case 'nodechildren':
-                    this.nodechildren = nv;
+                    this.setting.data.key.children = this.childrenKey;
                     this.renderTree();
                     break;
-                case 'orderby':
-                    this.orderby = nv;
+                case 'nodeicon':
+                    this.nodeicon = this.iconKey;
                     this.renderTree();
                     break;
-                case 'treeicons':
-                    this.treeicons = nv;
+                case 'orderby':
                     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;
@@ -419,9 +418,9 @@
         TreeComponent.prototype.expandTree = function (level, node, childLevel) {
             var _this = this;
             node.map(function (childNode) {
-                var children = childNode.children;
-                if (children && childLevel < level) {
-                    childNode.open = true;
+                var children = _this.getChildren(childNode);
+                if (children && !("open" in childNode) && childLevel < level) {
+                    childNode["open"] = true;
                     _this.expandTree(level, children, childLevel + 1);
                 }
                 else {
@@ -432,15 +431,14 @@
         };
         // sets the template for the tree based on the property selected.
         TreeComponent.prototype.setTreeTemplate = function (value) {
-            var classList = value.split(" ");
-            if (classList.includes('Classic')) {
+            if (value === 'Classic') {
                 this.setting.check["enable"] = false;
             }
-            else if (classList.includes('Checkbox')) {
+            else if (value === 'Checkbox') {
                 this.setting.check["enable"] = true;
                 this.setting.check["chkStyle"] = 'checkbox';
             }
-            else if (classList.includes('Radio')) {
+            else if (value === 'Radio') {
                 this.setting.check["enable"] = true;
                 this.setting.check["chkStyle"] = 'radio';
                 this.setting.check["radioType"] = "all";
@@ -472,10 +470,53 @@
             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');
@@ -488,25 +529,31 @@
                 });
             });
         };
-        // Returns the node path
         TreeComponent.prototype.getPath = function (treeNode, path) {
             if (treeNode.getParentNode() === null) {
-                path = "/" + treeNode.name + path;
+                path = "/" + treeNode[this.labelKey] + path;
             }
             else {
-                path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode.name;
+                path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode[this.labelKey];
             }
             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.zTree.getSelectedNodes();
+                var nodes = this.treeObj.getSelectedNodes();
                 if (nodes.length > 0) {
                     this.expandNode(nodes[0], !nodes[0].open, true);
                 }
             }
-            this.selectNode(event, treeNode);
+            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) {
@@ -514,18 +561,18 @@
             var path = this.getPath(treeNode, "");
             var eventParams = {
                 '$event': event,
-                "$item": core.getClonedObject(treeNode.data),
+                "$item": treeNode,
                 "$path": path
             };
             this.invokeEventCallback('expand', eventParams);
-            var children = treeNode.children;
+            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.treeicons || defaultTreeIconClass);
+                    $(ele_1).addClass(self.treeicon || defaultTreeIconClass);
                     $(ele_1).on("click", function (e) {
                         setTimeout(function () {
-                            $(ele_1).addClass(self.treeicons || defaultTreeIconClass);
+                            $(ele_1).addClass(self.treeicon || defaultTreeIconClass);
                         }, 0);
                     });
                 }
@@ -535,124 +582,186 @@
             var path = this.getPath(treeNode, "");
             var eventParams = {
                 '$event': event,
-                "$item": core.getClonedObject(treeNode.data),
+                "$item": treeNode,
                 "$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.constructZTreeData = function (data, zTreeData) {
+        TreeComponent.prototype.modifyObjects = function (array) {
             var _this = this;
-            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']);
+            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);
                 }
-                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 () {
-            var _a;
-            this.zTreeNodes = [];
-            if ((_a = this.nodes) === null || _a === void 0 ? void 0 : _a.length) {
+            if (this.nodes) {
                 this.nativeElement.setAttribute('id', this.name);
-                this.constructZTreeData(this.nodes, this.zTreeNodes);
-                if (this.level > 0) {
-                    this.expandTree(this.level, this.zTreeNodes, 0);
+                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.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);
-                });
-            }
+            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.selectNode = function (event, node) {
-            var deSelectElm = $(".app-tree[name=" + this.name + "] li[treenode].selected");
+        TreeComponent.prototype.setSelectedItem = function (treeNode) {
+            this.selecteditem = core.getClonedObject(treeNode) || {};
+            this.selecteditem.path = this.getPath(treeNode, "");
+            var deSelectElm = $("li[treenode].selected");
             deSelectElm.removeClass('selected');
-            if (!node) {
-                return;
-            }
-            var selectElm = $("#" + node.tId + ":has(.curSelectedNode)");
+            var selectElm = $("#" + treeNode.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.zTree.expandNode(node, expand, false, false, eventFlag);
+            this.treeObj.expandNode(node, expand, false, false, eventFlag);
             var el = $("#" + node.tId + "_switch");
-            $(el).addClass(this.treeicons || defaultTreeIconClass);
+            $(el).addClass(this.treeicon || defaultTreeIconClass);
         };
-        TreeComponent.prototype.postRenderTree = function () {
+        TreeComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             setTimeout(function () {
-                _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') {
-                            node = nodes[nodes.length - 1];
+                _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 (node) {
-                        _this.zTree.selectNode(node, false);
-                        _this.selectNode(undefined, node);
-                        _this.expandNode(node, true, false);
+                    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);
         };
-        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();
@@ -667,12 +776,7 @@
                 },] }
     ];
     TreeComponent.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',] }] }
+        { type: core$1.Injector }
     ]; };
 
     var components = [