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

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

@@ -1,7 +1,7 @@
-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';
+import { getClonedObject } from '@wm/core';
 
 const registerProps = () => {
     register('wm-tree', new Map([
@@ -23,136 +23,106 @@ 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: false
+                },
+                key: {
+                    children: 'children',
+                    name: 'label'
+                }
+            },
+            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 'levels':
+                if (nv > 0) {
+                    this.level = nv;
+                }
+                this.renderTree();
+                break;
+            case 'treeicons':
+                this.treeicon = nv;
                 this.renderTree();
                 break;
-            case 'nodeicon':
             case 'nodelabel':
+                this.setting.data.key.name = this.labelKey;
+                this.renderTree();
+                break;
             case 'nodechildren':
-            case 'orderby':
+                this.setting.data.key.children = this.childrenKey;
                 this.renderTree();
                 break;
-            case 'treeicons':
-                this.changeTreeIcons(nv, ov);
+            case 'nodeicon':
+                this.nodeicon = this.iconKey;
+                this.renderTree();
                 break;
-            case 'datavalue':
-                this.selectById(nv);
+            case 'orderby':
+                this.renderTree();
+                break;
+            case 'class':
+                this.treeClass = nv;
+                this.renderTree();
                 break;
             default:
                 super.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 => {
+            const children = this.getChildren(childNode);
+            if (children && !("open" in childNode) && childLevel < level) {
+                childNode["open"] = true;
+                this.expandTree(level, children, childLevel + 1);
             }
             else {
-                if (!nodeIcon) {
-                    $iconNode.addClass('leaf-node');
-                }
-                $li.addClass('leaf-node');
+                childLevel = 0;
+                return;
             }
         });
     }
+    // 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 {
@@ -160,177 +130,300 @@ class TreeDirective extends StylableComponent {
             };
         });
     }
+    // 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;
+        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 => {
+                const children = this.getChildren(node);
+                if (children) {
+                    this.setNodeData(children, depth, level, parentNode, type);
+                }
+                if (node.icon && this.nodelabel == 'icon') {
+                    node[type] = node.icon;
+                }
+                else if (node.name && this.nodelabel == 'name') {
+                    node[type] = node.name;
+                }
+                else {
+                    return;
+                }
+            });
         }
-        else if (_.isObject(newVal)) {
-            nodes = [newVal];
+        else {
+            nodes.map(node => {
+                const children = this.getChildren(node);
+                if (children && level > 1) {
+                    if (depth === level) {
+                        parentNode = node;
+                    }
+                    this.setNodeData(children, depth, level - 1, parentNode, type);
+                }
+                if (level === 1 && (type === "name" ? this.nodelabel.includes("label") || this.nodelabel.includes("name") : this.nodeicon.includes("label") || this.nodeicon.includes("name"))) {
+                    parentNode[type] = node.name || node.label;
+                    return;
+                }
+                else if (level === 1 && (node.icon !== undefined) && (type === "name" ? this.nodelabel.includes("icon") : this.nodeicon.includes("icon"))) {
+                    parentNode[type] = node.icon;
+                    return;
+                }
+                else {
+                    return;
+                }
+            });
         }
-        return nodes;
     }
-    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 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[this.labelKey] + path;
+        }
+        else {
+            path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode[this.labelKey];
+        }
+        return path;
+    }
+    // binds the click event to all nodes to open the child nodes
+    onClick(event, treeId, treeNode, clickFlag) {
+        if (this.nodeclick === "expand") {
+            var nodes = this.treeObj.getSelectedNodes();
+            if (nodes.length > 0) {
+                this.expandNode(nodes[0], !nodes[0].open, true);
+            }
+        }
+        let path = this.getPath(treeNode, "");
+        const eventParams = {
+            '$event': event,
+            "$item": treeNode,
+            "$path": path
+        };
+        this.setSelectedItem(treeNode);
+        this.invokeEventCallback('select', eventParams);
     }
-    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}`;
+    // 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);
+        const children = this.getChildren(treeNode);
+        children === null || children === void 0 ? void 0 : 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);
+                });
+            }
         });
+    }
+    onCollapse(event, treeId, treeNode) {
+        let path = this.getPath(treeNode, "");
         const eventParams = {
-            '$event': $event,
-            "$item": $li.data('nodedata'),
+            '$event': event,
+            "$item": treeNode,
             "$path": path
         };
-        if ($i.hasClass('collapsed')) {
-            $i.removeClass(`collapsed ${treeIcons.collapsed}`).addClass(`expanded ${treeIcons.expanded}`);
-            $li.removeClass('collapsed').addClass('expanded');
-            this.invokeEventCallback('expand', eventParams);
-        }
-        else if ($i.hasClass('expanded')) {
-            $i.removeClass(`expanded ${treeIcons.expanded}`).addClass(`collapsed ${treeIcons.collapsed}`);
-            $li.removeClass('expanded').addClass('collapsed');
-            this.invokeEventCallback('collapse', eventParams);
+        this.invokeEventCallback('collapse', eventParams);
+    }
+    getChildren(node) {
+        return node[this.childrenKey];
+    }
+    get childrenKey() {
+        if (!this.nodechildren) {
+            return 'children';
         }
+        const depth = this.countDepth(this.nodechildren);
+        return depth ? this.nodechildren.split('.').pop() : this.nodechildren;
     }
-    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;
+    get labelKey() {
+        if (!this.nodelabel) {
+            return 'label';
         }
-        if (this.nodes && this.nodes.length) {
-            docFrag = document.createDocumentFragment();
-            this.constructNodes(this.nodes, $(docFrag), levels, 0, this.datavalue);
-            $el.append(docFrag);
+        const depth = this.countDepth(this.nodelabel);
+        return depth ? this.nodelabel.split('.').pop() : this.nodelabel;
+    }
+    get iconKey() {
+        if (!this.nodeicon) {
+            return 'icon';
         }
-        if (this._selectNode) {
-            $li = this._selectNode;
-            $li.addClass('selected');
-            data = $li.data('nodedata');
-            $liPath = this.findSelectedNodeParent($li);
-            if (!$liPath.length) {
-                $liPath = $li;
+        const depth = this.countDepth(this.nodeicon);
+        return depth ? this.nodeicon.split('.').pop() : this.nodeicon;
+    }
+    get treeObj() {
+        return $.fn.zTree.getZTreeObj(`${this.name}`);
+    }
+    // function to support backward compatibility of objects
+    modifyObjects(array) {
+        array.forEach(obj => {
+            obj.icon = obj[this.nodeicon];
+            const children = this.getChildren(obj);
+            if (children === null || children === void 0 ? void 0 : children.length) {
+                this.modifyObjects(children);
             }
-            $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;
+    // sets the node children property to parent nodes
+    setNodeChildren(nodes, depth, level, parentNode) {
+        if (depth <= 0) {
+            return nodes;
         }
-        $li.addClass('selected');
-        data = $li.data('nodedata');
-        nodeAction = data[this.nodeaction || 'action'];
-        // if the selectNode is initiated by click event then use the nativeElement target from event
-        $liPath = target ? target.parents('.app-tree li') : this.findSelectedNodeParent($li);
-        // construct the path of the node
-        $liPath
-            .each((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);
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (depth === level) {
+                parentNode = nodes[i];
             }
-            else {
-                this.datavalue = getClonedObject(data) || {};
+            const children = this.getChildren(node);
+            if (children === null || children === void 0 ? void 0 : children.length) {
+                if (level === 1) {
+                    parentNode[this.childrenKey] = children.map(child => ({ [this.labelKey]: child[this.labelKey], [this.childrenKey]: this.getChildren(child), icon: child[this.iconKey] }));
+                    return;
+                }
+                else {
+                    this.setNodeChildren(children, depth, level - 1, parentNode);
+                }
             }
         }
-        else {
-            this.datavalue = value;
-        }
-        //[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() {
+        if (this.nodes) {
+            this.nativeElement.setAttribute('id', this.name);
+            if (this.nodeicon && this.nodeicon !== 'icon') {
+                this.modifyObjects(this.nodes);
             }
-            if (target.is('i') || (target.is('span.title') && this.nodeclick === 'expand')) {
-                this.toggleExpandCollapseNode(evt, $i, li);
+            this.setTreeTemplate(this.treeClass);
+            if (this.nodelabel) {
+                let depth = 0;
+                if (this.nodelabel.includes("children")) {
+                    depth = this.countDepth(this.nodelabel);
+                }
+                this.setNodeData(this.nodes, depth, depth, null, "name");
             }
-        });
+            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);
+                }
+            }
+        }
+        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');
+    setSelectedItem(treeNode) {
+        this.selecteditem = getClonedObject(treeNode) || {};
+        this.selecteditem.path = this.getPath(treeNode, "");
+        const deSelectElm = $(`li[treenode].selected`);
+        deSelectElm.removeClass('selected');
+        const selectElm = $(`#${treeNode.tId}:has(.curSelectedNode)`);
+        selectElm.addClass('selected');
     }
-    selectById(value) {
-        this.selectNode(undefined, value);
+    expandNode(node, expand, eventFlag) {
+        this.treeObj.expandNode(node, expand, false, false, eventFlag);
+        const el = $(`#${node.tId}_switch`);
+        $(el).addClass(this.treeicon || defaultTreeIconClass);
     }
-    deselectById(value) {
-        this.selecteditem = {};
-        this.selectById();
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.changeTreeIcons(this.treeicon || defaultTreeIconClass);
+            if (this.datavalue) {
+                const nodes = this.treeObj.getNodes();
+                let selectNode;
+                if (this.datavalue === 'FirstNode') {
+                    if (nodes.length) {
+                        selectNode = nodes[0];
+                    }
+                }
+                if (this.datavalue === 'LastNode') {
+                    if (nodes.length) {
+                        selectNode = nodes[nodes.length - 1];
+                    }
+                }
+                this.treeObj.selectNode(selectNode, false);
+                this.setSelectedItem(selectNode);
+                this.expandNode(selectNode, true, false);
+            }
+        }, 200);
     }
 }
-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 +443,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