@wavemaker/app-ng-runtime 11.4.0-next.28152 → 11.4.0-rc.5339

app-ng-runtime/components/basic/tree/fesm2015/index.js

@@ -1,7 +1,6 @@
-import { Directive, Injector, Attribute, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, Injector, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { register, PROP_STRING, PROP_ANY, PROP_NUMBER, PROP_BOOLEAN, StylableComponent, styler, APPLY_STYLES_TYPE, getEvaluatedData, getOrderedDataset, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
-import { $parseExpr, getClonedObject, $appDigest, $parseEvent } from '@wm/core';
+import { register, PROP_STRING, PROP_ANY, PROP_NUMBER, PROP_BOOLEAN, StylableComponent, styler, APPLY_STYLES_TYPE, getOrderedDataset, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
 
 const registerProps = () => {
     register('wm-tree', new Map([
@@ -23,314 +22,327 @@ const registerProps = () => {
     ]));
 };
 
-const defaultTreeIconClass = 'plus-minus';
-const 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'
-    }
-};
 const WIDGET_INFO = { widgetType: 'wm-tree', hostClass: 'app-tree' };
-class TreeDirective extends StylableComponent {
-    constructor(inj, binddatavalue, bindnodelabel, bindnodeicon, bindnodechildren, bindnodeid) {
+const defaultTreeIconClass = 'plus-minus';
+class TreeComponent extends StylableComponent {
+    constructor(inj) {
         super(inj, WIDGET_INFO);
-        this.binddatavalue = binddatavalue;
-        this.bindnodelabel = bindnodelabel;
-        this.bindnodeicon = bindnodeicon;
-        this.bindnodechildren = bindnodechildren;
-        this.bindnodeid = bindnodeid;
+        this.setting = {
+            data: {
+                simpleData: {
+                    enable: true
+                },
+            },
+            view: {
+                dblClickExpand: false,
+                fontCss: {
+                    'font-awesome': true
+                },
+                switchIcon: {},
+            },
+            check: {},
+            callback: {}
+        };
         styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
-        this.bindEvents();
     }
     onPropertyChange(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 'nodeicon':
+            case 'levels':
+                if (nv > 0) {
+                    this.level = nv;
+                }
+                break;
+            case 'treeicons':
+                this.treeicon = nv;
+                break;
             case 'nodelabel':
-            case 'nodechildren':
+                this.nodelabel = nv;
+                break;
+            case 'icon':
+                this.nodeicon = nv;
             case 'orderby':
                 this.renderTree();
                 break;
-            case 'treeicons':
-                this.changeTreeIcons(nv, ov);
-                break;
-            case 'datavalue':
-                this.selectById(nv);
+            case 'class':
+                this.treeClass = nv;
                 break;
             default:
                 super.onPropertyChange(key, nv, ov);
+                break;
         }
     }
-    constructNodes(nodes, parent, levels, deep, _evalDataValue) {
-        const $ul = $('<ul></ul>');
-        const _iconClses = ICON_CLASSES[this.treeicons || defaultTreeIconClass];
-        const _expr = (this.binddatavalue || this.datavalue);
-        let _iconCls, _cls;
-        _cls = levels > 0 ? ' expanded ' : ' collapsed ';
-        _iconCls = _cls + (levels > 0 ? _iconClses.expanded : _iconClses.collapsed);
-        deep = deep || 0;
-        parent.append($ul);
-        nodes.forEach((node, idx) => {
-            const $li = $('<li></li>'), $iconNode = $('<i></i>'), nodeLabel = getEvaluatedData(node, { field: this.nodelabel, bindExpression: this.bindnodelabel }, this.viewParent) || node.label, nodeIcon = getEvaluatedData(node, { field: this.nodeicon, bindExpression: this.bindnodeicon }, this.viewParent) || node.icon, nodeChildren = getEvaluatedData(node, { field: this.nodechildren, bindExpression: this.bindnodechildren }, this.viewParent) || node.children;
-            let nodeIdValue = getEvaluatedData(node, { field: this.nodeid, bindExpression: this.bindnodeid }, this.viewParent);
-            if (nodeIdValue === undefined) {
-                nodeIdValue = node.children;
-            }
-            let 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 = !!$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);
+    // expands the tree nodes if the property is selected.
+    expandTree(level, node, childLevel) {
+        node.map(childNode => {
+            if ("children" in childNode && !("open" in childNode) && childLevel < level) {
+                childNode["open"] = true;
+                this.expandTree(level, childNode.children, childLevel + 1);
             }
             else {
-                if (!nodeIcon) {
-                    $iconNode.addClass('leaf-node');
-                }
-                $li.addClass('leaf-node');
+                childLevel = 0;
+                return;
             }
         });
     }
+    // sets the template for the tree based on the property selected.
+    setTreeTemplate(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
     getNodesFromString(value) {
         return value.split(',').map((item) => {
             return {
-                'label': item && item.trim()
+                'name': item && item.trim()
             };
         });
     }
+    // gets the nodes and orders the nodes if required
     getNodes(newVal) {
         let nodes;
-        if (_.isString(newVal) && !_.isEmpty(newVal)) {
+        if (_.isArray(newVal)) {
+            nodes = 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 = getOrderedDataset(newVal, this.orderby);
-            nodes = newVal;
-        }
-        else if (_.isObject(newVal)) {
-            nodes = [newVal];
-        }
         return nodes;
     }
-    changeTreeIcons(nv, ov) {
-        const $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 class to the nodes inorder to add icons to respective node.
+    setNodeclasses(treeId, treeNode) {
+        return treeNode.icon ? { add: [`${treeNode.icon}`] } : '';
     }
-    toggleExpandCollapseNode($event, $i, $li) {
-        const treeIcons = ICON_CLASSES[this.treeicons || defaultTreeIconClass];
-        const $liPath = this.findSelectedNodeParent($li);
-        let path = '';
-        // construct the path of the node
-        $liPath
-            .each((i, el) => {
-            const current = $(el).children('.title').text();
-            path = `/${current + path}`;
-        });
-        const eventParams = {
-            '$event': $event,
-            "$item": $li.data('nodedata'),
-            "$path": path
-        };
-        if ($i.hasClass('collapsed')) {
-            $i.removeClass(`collapsed ${treeIcons.collapsed}`).addClass(`expanded ${treeIcons.expanded}`);
-            $li.removeClass('collapsed').addClass('expanded');
-            this.invokeEventCallback('expand', eventParams);
+    ;
+    // Sets the node label with any icon if bound to
+    setNodeData(nodes, depth, level, parentNode, type) {
+        if (depth === 0) {
+            nodes.map(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 if ($i.hasClass('expanded')) {
-            $i.removeClass(`expanded ${treeIcons.expanded}`).addClass(`collapsed ${treeIcons.collapsed}`);
-            $li.removeClass('expanded').addClass('collapsed');
-            this.invokeEventCallback('collapse', eventParams);
+        else {
+            nodes.map(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;
+                }
+            });
         }
     }
-    renderTree(forceRender) {
-        let docFrag, $li, $liPath, data, path = '';
-        const levels = +this.nativeElement.getAttribute('levels') || 0, $el = $(this.nativeElement);
-        $el.empty();
-        if (forceRender) {
-            this._selectNode = undefined;
+    // adds tree icons to the nodes on load of the tree
+    changeTreeIcons(nv) {
+        let eleClose = $('ul[name="' + this.name + '"] li span.button.switch');
+        $(eleClose).map((idx, ele) => {
+            $(ele).addClass(nv);
+            $(ele).on("click", function (e) {
+                setTimeout(() => {
+                    $(ele).addClass(nv);
+                }, 0);
+            });
+        });
+    }
+    getPath(treeNode, path) {
+        if (treeNode.getParentNode() === null) {
+            path = "/" + treeNode.name + path;
         }
-        if (this.nodes && this.nodes.length) {
-            docFrag = document.createDocumentFragment();
-            this.constructNodes(this.nodes, $(docFrag), levels, 0, this.datavalue);
-            $el.append(docFrag);
+        else {
+            path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode.name;
         }
-        if (this._selectNode) {
-            $li = this._selectNode;
-            $li.addClass('selected');
-            data = $li.data('nodedata');
-            $liPath = this.findSelectedNodeParent($li);
-            if (!$liPath.length) {
-                $liPath = $li;
+        return path;
+    }
+    // binds the click event to all nodes to open the child nodes
+    onClick(event, treeId, treeNode, clickFlag) {
+        var treeObj = $.fn.zTree.getZTreeObj(`${this.name}`);
+        let path = this.getPath(treeNode, "");
+        const eventParams = {
+            '$event': event,
+            "$item": treeNode,
+            "$path": path
+        };
+        this.invokeEventCallback('select', eventParams);
+    }
+    // Adds tree icon classes to child nodes when expanded
+    onExpand(event, treeId, treeNode) {
+        let self = this;
+        let path = this.getPath(treeNode, "");
+        const eventParams = {
+            '$event': event,
+            "$item": treeNode,
+            "$path": path
+        };
+        this.invokeEventCallback('expand', eventParams);
+        treeNode.children ? treeNode.children.map((el) => {
+            if (el.isParent) {
+                let ele = $(`#${el.tId}_switch`);
+                $(ele).addClass(self.treeicon || defaultTreeIconClass);
+                $(ele).on("click", function (e) {
+                    setTimeout(() => {
+                        $(ele).addClass(self.treeicon || defaultTreeIconClass);
+                    }, 0);
+                });
             }
-            $liPath
-                .each((i, el) => {
-                const $current = $(el), $i = $current.children('i.collapsed'), $title = $current.children('.title');
-                this.toggleExpandCollapseNode(undefined, $i, $current);
-                path = `/${$title.text() + path}`;
-            });
-            this.selecteditem = getClonedObject(data) || {};
-            this.selecteditem.path = path;
-            this.invokeEventCallback('select', { $event: undefined, $item: data, $path: path });
-            $appDigest();
-        }
+        }) : '';
     }
-    selectNode(evt, value) {
-        const target = evt && $(evt.target), $el = $(this.nativeElement), $li = _.isObject(value) ? value : $el.find(`li[id="${value}"]`).first();
-        let data, path = '', $liPath, nodeAction;
-        $el.find('.selected').removeClass('selected');
-        if (!$li.length) {
-            return;
-        }
-        $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((i, el) => {
-            const 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((index, el) => {
-            const $current = $(el), $i = $current.children('i.collapsed');
-            this.toggleExpandCollapseNode(undefined, $i, $current);
-        });
-        this.selecteditem = getClonedObject(data) || {};
-        this.selecteditem.path = path;
-        if (target) {
-            if (this.nodeid || this.bindnodeid) {
-                this.datavalue = getEvaluatedData(data, { field: this.nodeid, bindExpression: this.bindnodeid }, this.viewParent);
+    onCollapse(event, treeId, treeNode) {
+        let path = this.getPath(treeNode, "");
+        const eventParams = {
+            '$event': event,
+            "$item": treeNode,
+            "$path": path
+        };
+        this.invokeEventCallback('collapse', eventParams);
+    }
+    // function to support backward compatibility of objects
+    modifyObjects(array) {
+        array.forEach(obj => {
+            if (obj.label !== undefined) {
+                obj.name = obj.label;
+                delete obj.label;
             }
-            else {
-                this.datavalue = getClonedObject(data) || {};
+            if (obj.children !== undefined) {
+                this.modifyObjects(obj.children);
             }
+        });
+        return array;
+    }
+    // sets the node children property to parent nodes
+    setNodeChildren(nodes, depth, level, parentNode) {
+        if (depth <= 0) {
+            return nodes;
         }
-        else {
-            this.datavalue = value;
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (depth === level) {
+                parentNode = nodes[i];
+            }
+            if (node.children && node.children.length > 0) {
+                if (level === 1) {
+                    parentNode.children = node.children.map(child => ({ name: child.name, children: child === null || child === void 0 ? void 0 : child.children }));
+                    return;
+                }
+                else {
+                    this.setNodeChildren(node.children, depth, level - 1, parentNode);
+                }
+            }
         }
-        //[Todo-CSP]: this data will be dynamic, can not generate function upfront
-        if (nodeAction) {
-            $parseEvent(nodeAction)(this);
+        return nodes;
+    }
+    countDepth(str) {
+        const regex = /\[.*?\]/g;
+        let matches = str.match(regex);
+        let count = 1;
+        if (matches === null)
+            return count;
+        for (let match of matches) {
+            count++;
         }
-        this.invokeEventCallback('select', { $event: evt, $item: data, $path: path });
-        $appDigest();
+        return count;
     }
-    // click event is added on the host nativeElement
-    bindEvents() {
-        $(this.nativeElement).on('click', (evt) => {
-            const 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
+    renderTree() {
+        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) {
+                let depth = 0;
+                if (this.nodelabel.includes("children")) {
+                    depth = this.countDepth(this.nodelabel);
+                }
+                this.setNodeData(this.nodes, depth, depth, null, "name");
             }
-            if (target.is('i') || (target.is('span.title') && this.nodeclick === 'expand')) {
-                this.toggleExpandCollapseNode(evt, $i, li);
+            if (this.nodeicon) {
+                let depth = 0;
+                if (this.nodeicon.includes("children")) {
+                    depth = this.countDepth(this.nodeicon);
+                }
+                this.setNodeData(this.nodes, depth, depth, null, "icon");
             }
-        });
-    }
-    findSelectedNodeParent($li) {
-        return $li.find('> span.title').parents('.app-tree li');
-    }
-    selectById(value) {
-        this.selectNode(undefined, value);
+            if (this.nodechildren) {
+                let 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);
+        let zTree = $.fn.zTree.init($('ul[name="' + this.name + '"]'), this.setting, this.nodes);
+        $.fn.zTreeKeyboardNavigation(zTree, $('ul[name="' + this.name + '"]'), null, this.treeicon || defaultTreeIconClass);
     }
-    deselectById(value) {
-        this.selecteditem = {};
-        this.selectById();
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.changeTreeIcons(this.treeicon || defaultTreeIconClass);
+        }, 200);
     }
 }
-TreeDirective.initializeProps = registerProps();
-TreeDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'div[wmTree]',
+TreeComponent.initializeProps = registerProps();
+TreeComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ul[wmTree]',
+                template: "<ul #wmTree class=\"ztree\" id=\"ztree\"></ul>  ",
                 providers: [
-                    provideAsWidgetRef(TreeDirective)
-                ]
+                    provideAsWidgetRef(TreeComponent)
+                ],
+                encapsulation: ViewEncapsulation.None
             },] }
 ];
-TreeDirective.ctorParameters = () => [
-    { type: Injector },
-    { type: undefined, decorators: [{ type: Attribute, args: ['datavalue.bind',] }] },
-    { type: undefined, decorators: [{ type: Attribute, args: ['nodelabel.bind',] }] },
-    { type: undefined, decorators: [{ type: Attribute, args: ['nodeicon.bind',] }] },
-    { type: undefined, decorators: [{ type: Attribute, args: ['nodechildren.bind',] }] },
-    { type: undefined, decorators: [{ type: Attribute, args: ['nodeid.bind',] }] }
+TreeComponent.ctorParameters = () => [
+    { type: Injector }
 ];
 
 const components = [
-    TreeDirective
+    TreeComponent
 ];
 class TreeModule {
 }
@@ -350,5 +362,5 @@ TreeModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { TreeDirective, TreeModule, registerProps as ɵa };
+export { TreeComponent, TreeModule, registerProps as ɵa };
 //# sourceMappingURL=index.js.map