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

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

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