@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

package/components/basic/tree/bundles/index.umd.js

@@ -0,0 +1,767 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@wm/components/base'), require('@wm/core'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@wm/components/base', '@wm/core', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.basic = global.wm.components.basic || {}, global.wm.components.basic.tree = {}), global.ng.core, global.wm.components.base, global.wm.core, global._));
+})(this, (function (exports, i0, base, i1, lodashEs) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+
+    const registerProps = () => {
+        base.register('wm-tree', new Map([
+            ['class', base.PROP_STRING],
+            ['template', base.PROP_STRING],
+            ['dataset', { value: 'node1, node2, node3', ...base.PROP_ANY }],
+            ['datavalue', base.PROP_STRING],
+            ['levels', { value: 0, ...base.PROP_NUMBER }],
+            ['name', base.PROP_STRING],
+            ['nodeaction', base.PROP_STRING],
+            ['nodechildren', base.PROP_STRING],
+            ['nodeclick', { value: 'none', ...base.PROP_STRING }],
+            ['nodeicon', base.PROP_STRING],
+            ['nodeid', base.PROP_STRING],
+            ['nodelabel', base.PROP_STRING],
+            ['orderby', base.PROP_STRING],
+            ['statehandler', { value: 'none', ...base.PROP_STRING }],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+            ['treeicons', base.PROP_STRING]
+        ]));
+    };
+
+    class TreeNodeTemplateHostComponent {
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: TreeNodeTemplateHostComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: TreeNodeTemplateHostComponent, isStandalone: true, selector: "wm-tree-node-template-host", inputs: { template: "template", userComponentParams: "userComponentParams" }, ngImport: i0__namespace, template: `
+        <span class="wm-tree-node-inner" [wmItemTemplate]="template" [userComponentParams]="userComponentParams" partialContainer>
+            <span partial-container-target></span>
+        </span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: base.ItemTemplateDirective, selector: "[wmItemTemplate]", inputs: ["userComponentParams", "wmItemTemplate"], exportAs: ["itemTemplateRef"] }, { kind: "directive", type: base.PartialParamHandlerDirective, selector: "[partialContainer]" }, { kind: "directive", type: base.PartialContainerDirective, selector: "[partialContainer]" }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: TreeNodeTemplateHostComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'wm-tree-node-template-host',
+                        standalone: true,
+                        imports: [
+                            base.ItemTemplateDirective,
+                            base.PartialParamHandlerDirective,
+                            base.PartialContainerDirective,
+                        ],
+                        template: `
+        <span class="wm-tree-node-inner" [wmItemTemplate]="template" [userComponentParams]="userComponentParams" partialContainer>
+            <span partial-container-target></span>
+        </span>
+    `,
+                    }]
+            }], propDecorators: { template: [{
+                    type: i0.Input
+                }], userComponentParams: [{
+                    type: i0.Input
+                }] } });
+
+    const WIDGET_INFO = { widgetType: 'wm-tree', hostClass: 'app-tree' };
+    const defaultTreeIconClass = 'plus-minus';
+    /** Keys merged into the widget entry under app StatePersistence (URL / localStorage / sessionStorage). */
+    const TREE_STATE_SELECTED_ID = 'selectedNodeId';
+    const TREE_STATE_SELECTED_PATH = 'selectedNodePath';
+    class TreeComponent extends base.StylableComponent {
+        static { this.initializeProps = registerProps(); }
+        constructor(inj, binddatavalue, bindnodelabel, bindnodeicon, bindnodechildren, bindnodeid, statePersistence, explicitContext) {
+            super(inj, WIDGET_INFO, explicitContext);
+            this.binddatavalue = binddatavalue;
+            this.bindnodelabel = bindnodelabel;
+            this.bindnodeicon = bindnodeicon;
+            this.bindnodechildren = bindnodechildren;
+            this.bindnodeid = bindnodeid;
+            /** Dynamic hosts for custom node template (cleared on each render). */
+            this.nodeTemplateRefs = [];
+            this.setting = {
+                data: {
+                    simpleData: {
+                        enable: false
+                    }
+                },
+                view: {
+                    dblClickExpand: false,
+                    fontCss: {
+                        'font-awesome': true
+                    },
+                    switchIcon: {},
+                },
+                check: {},
+                callback: {}
+            };
+            this.addDiyDom = (_treeId, treeNode) => {
+                if (!this.template) {
+                    return;
+                }
+                const aObj = $('#' + treeNode.tId + '_a');
+                if (!aObj.length || aObj.find('.wm-tree-node-template-host').length) {
+                    return;
+                }
+                /** hide default zTree switch & icon and hide the built-in label span when using a custom template. */
+                const switchEl = $('#' + treeNode.tId + '_switch');
+                switchEl.hide();
+                $('#' + treeNode.tId + '_span').hide();
+                const host = document.createElement('span');
+                host.className = 'wm-tree-node-template-host wm-tree-node-item';
+                if (treeNode.disabled) {
+                    host.classList.add('wm-tree-node-disabled');
+                }
+                aObj.append(host);
+                this.mountTreeNodeTemplateHost(host, treeNode);
+            };
+            this.ngZone = inj.get(i0.NgZone);
+            this.applicationRef = inj.get(i0.ApplicationRef);
+            this.environmentInjector = inj.get(i0.EnvironmentInjector);
+            this.statePersistence = statePersistence;
+            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);
+        }
+        onPropertyChange(key, nv, ov) {
+            switch (key) {
+                case 'dataset':
+                    this.nodes = this.getNodes(nv);
+                    this.renderTree();
+                    break;
+                case 'levels':
+                    this.level = nv;
+                    this.renderTree();
+                    break;
+                case 'nodeicon':
+                    this.nodeicon = nv;
+                    this.renderTree();
+                    break;
+                case 'nodelabel':
+                    this.nodelabel = nv;
+                    this.renderTree();
+                    break;
+                case 'nodechildren':
+                    this.nodechildren = nv;
+                    this.renderTree();
+                    break;
+                case 'orderby':
+                    this.orderby = nv;
+                    this.renderTree();
+                    break;
+                case 'treeicons':
+                    this.treeicons = nv;
+                    this.renderTree();
+                    break;
+                case 'template':
+                    this.template = nv;
+                    this.renderTree();
+                    break;
+                case 'class':
+                    this.treeClass = nv;
+                    this.setTreeTemplate(this.treeClass);
+                    super.onPropertyChange(key, nv, ov);
+                    this.renderTree();
+                    break;
+                case 'statehandler':
+                    super.onPropertyChange(key, nv, ov);
+                    if (String(nv || '').toLowerCase() !== 'none' && this.zTree && this.nodes?.length) {
+                        setTimeout(() => this.restorePersistedSelectionAfterStatehandlerChange(), 0);
+                    }
+                    break;
+                default:
+                    super.onPropertyChange(key, nv, ov);
+                    break;
+            }
+        }
+        // set tree node template
+        setTemplate(partialName) {
+            this.template = partialName;
+            if (this.viewParent && this.viewParent.prefabName) {
+                this['prefabName'] = this.viewParent.prefabName;
+            }
+            this.renderTree();
+        }
+        destroyNodeTemplateHostRefs() {
+            this.nodeTemplateRefs.forEach(ref => ref.destroy());
+            this.nodeTemplateRefs = [];
+        }
+        /** Re-run change detection on custom node partials after zTree mutates node state (e.g. open). No-op when template is unset or no hosts exist. */
+        refreshTreeNodeTemplateHosts() {
+            if (!this.template || !this.nodeTemplateRefs.length) {
+                return;
+            }
+            this.ngZone.run(() => {
+                for (const ref of this.nodeTemplateRefs) {
+                    try {
+                        ref.changeDetectorRef.detectChanges();
+                    }
+                    catch {
+                        /* host destroyed */
+                    }
+                }
+            });
+        }
+        /** Item passed to the custom template: zTree node API + row fields + toggle/select helpers. */
+        buildCustomTemplateItemProxy(treeNode) {
+            const rowData = treeNode.data;
+            const itemPayload = rowData && typeof rowData === 'object' ? i1.getClonedObject(rowData) : rowData;
+            const self = this;
+            const nodeHelperProto = Object.create(treeNode);
+            nodeHelperProto.toggleExpand = (event) => {
+                if (event) {
+                    event.preventDefault?.();
+                    event.stopPropagation?.();
+                }
+                if (!treeNode.isParent) {
+                    return;
+                }
+                self.expandNode(treeNode, !treeNode.open, true);
+            };
+            Object.defineProperty(nodeHelperProto, 'isSelected', {
+                enumerable: true,
+                configurable: true,
+                get: () => !!self.zTree?.isSelectedNode?.(treeNode),
+            });
+            const nodeApi = Object.create(nodeHelperProto);
+            return {
+                ...itemPayload,
+                _node: nodeApi,
+            };
+        }
+        mountTreeNodeTemplateHost(host, treeNode) {
+            const ref = i0.createComponent(TreeNodeTemplateHostComponent, {
+                environmentInjector: this.environmentInjector,
+                elementInjector: this.inj,
+                hostElement: host,
+            });
+            ref.setInput('template', this.template);
+            ref.setInput('userComponentParams', { dataObject: this.buildCustomTemplateItemProxy(treeNode) });
+            this.applicationRef.attachView(ref.hostView);
+            ref.changeDetectorRef.detectChanges();
+            this.nodeTemplateRefs.push(ref);
+        }
+        ngOnDestroy() {
+            this.destroyNodeTemplateHostRefs();
+            super.ngOnDestroy();
+        }
+        // expands the tree nodes if the property is selected.
+        expandTree(level, node, childLevel) {
+            node.map(childNode => {
+                const children = childNode.children;
+                if (children && childLevel < level) {
+                    childNode.open = true;
+                    this.expandTree(level, children, childLevel + 1);
+                }
+                else {
+                    childLevel = 0;
+                    return;
+                }
+            });
+        }
+        // sets the template for the tree based on the property selected.
+        setTreeTemplate(value) {
+            const classList = value?.split(" ");
+            if (classList?.length) {
+                if (classList.includes('Classic')) {
+                    this.setting.check["enable"] = false;
+                }
+                else if (classList.includes('Checkbox')) {
+                    this.setting.check["enable"] = true;
+                    this.setting.check["chkStyle"] = 'checkbox';
+                }
+                else if (classList.includes('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()
+                };
+            });
+        }
+        // gets the nodes and orders the nodes if required
+        getNodes(newVal) {
+            let nodes;
+            if (lodashEs.isArray(newVal)) {
+                nodes = base.getOrderedDataset(newVal, this.orderby);
+            }
+            else if (lodashEs.isObject(newVal)) {
+                nodes = [newVal];
+            }
+            else if (lodashEs.isString(newVal) && !lodashEs.isEmpty(newVal)) {
+                const trimmed = newVal.trim();
+                if (trimmed) {
+                    if (trimmed.startsWith('[') || trimmed.startsWith('{')) {
+                        try {
+                            const parsed = JSON.parse(trimmed);
+                            if (lodashEs.isArray(parsed)) {
+                                nodes = base.getOrderedDataset(parsed, this.orderby);
+                            }
+                            else if (lodashEs.isObject(parsed)) {
+                                nodes = [parsed];
+                            }
+                        }
+                        catch {
+                            // Not valid JSON; treat as comma-separated labels below.
+                        }
+                    }
+                    if (!nodes) {
+                        nodes = this.getNodesFromString(trimmed);
+                    }
+                }
+            }
+            return nodes;
+        }
+        // adds class to the nodes inorder to add icons to respective node.
+        setNodeClasses(treeId, treeNode) {
+            const add = [];
+            if (treeNode.icon) {
+                add.push(`${treeNode.icon}`);
+            }
+            if (treeNode.disabled) {
+                add.push('wm-tree-node-disabled');
+            }
+            return add.length ? { add } : '';
+        }
+        ;
+        // 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);
+                });
+            });
+        }
+        // Returns the node path
+        getPath(treeNode, path) {
+            if (treeNode.getParentNode() === null) {
+                path = "/" + treeNode.name + path;
+            }
+            else {
+                path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode.name;
+            }
+            return path;
+        }
+        // binds the click event to all nodes to open the child nodes
+        onClick(event, treeId, treeNode, clickFlag) {
+            if (treeNode.disabled) {
+                return;
+            }
+            if (this.nodeclick === "expand") {
+                var nodes = this.zTree.getSelectedNodes();
+                if (nodes.length > 0) {
+                    this.expandNode(nodes[0], !nodes[0].open, true);
+                }
+            }
+            this.selectNode(event, treeNode);
+        }
+        // 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": i1.getClonedObject(treeNode.data),
+                "$path": path
+            };
+            this.invokeEventCallback('expand', eventParams);
+            const children = treeNode.children;
+            children?.map((el) => {
+                if (el.isParent) {
+                    let ele = $(`#${el.tId}_switch`);
+                    $(ele).addClass(self.treeicons || defaultTreeIconClass);
+                    $(ele).on("click", function (e) {
+                        setTimeout(() => {
+                            $(ele).addClass(self.treeicons || defaultTreeIconClass);
+                        }, 0);
+                    });
+                }
+            });
+            this.refreshTreeNodeTemplateHosts();
+        }
+        onCollapse(event, treeId, treeNode) {
+            let path = this.getPath(treeNode, "");
+            const eventParams = {
+                '$event': event,
+                "$item": i1.getClonedObject(treeNode.data),
+                "$path": path
+            };
+            this.invokeEventCallback('collapse', eventParams);
+            this.refreshTreeNodeTemplateHosts();
+        }
+        // function to support backward compatibility of objects
+        constructZTreeData(data, zTreeData) {
+            data.forEach(node => {
+                const zNode = {};
+                const evaluatedLabel = base.getEvaluatedData(node, { field: this.nodelabel, bindExpression: this.bindnodelabel }, this.viewParent);
+                // Avoid zTree rendering the literal "undefined" when label field is missing or nodelabel does not match dataset (e.g. data uses "key" only).
+                const name = evaluatedLabel !== undefined && evaluatedLabel !== null && evaluatedLabel !== ''
+                    ? evaluatedLabel
+                    : (node.label ?? node.key ?? node.name ?? '');
+                const icon = base.getEvaluatedData(node, { field: this.nodeicon, bindExpression: this.bindnodeicon }, this.viewParent) || node.icon;
+                const nodeId = base.getEvaluatedData(node, { field: this.nodeid, bindExpression: this.bindnodeid }, this.viewParent);
+                const children = base.getEvaluatedData(node, { field: this.nodechildren, bindExpression: this.bindnodechildren }, this.viewParent) || node.children;
+                zNode['name'] = name === undefined || name === null ? '' : String(name);
+                if (!this.template) {
+                    zNode['icon'] = icon;
+                }
+                zNode['nodeId'] = nodeId;
+                zNode['data'] = i1.getClonedObject(node);
+                if (node.selected) {
+                    zNode['selected'] = true;
+                }
+                if (node.disabled) {
+                    zNode['disabled'] = true;
+                    zNode['chkDisabled'] = true;
+                }
+                if (node.iconSkin != null && node.iconSkin !== '') {
+                    zNode['iconSkin'] = node.iconSkin;
+                }
+                if (node.iconOpen != null && node.iconOpen !== '') {
+                    zNode['iconOpen'] = node.iconOpen;
+                }
+                if (node.iconClose != null && node.iconClose !== '') {
+                    zNode['iconClose'] = node.iconClose;
+                }
+                if (lodashEs.isArray(children) && children.length) {
+                    zNode['children'] = [];
+                    this.constructZTreeData(children, zNode['children']);
+                }
+                zTreeData.push(zNode);
+            });
+        }
+        // Renders the tree on to the dom
+        renderTree() {
+            this.destroyNodeTemplateHostRefs();
+            this.setting.view['addDiyDom'] = this.template ? this.addDiyDom : function (treeId, treeNode) {
+                if (treeNode.disabled) {
+                    const switchObj = $("#" + treeNode.tId + "_switch");
+                    switchObj.addClass("wm-tree-node-disabled");
+                }
+            };
+            this.nativeElement.classList.toggle('app-tree-custom', !!this.template);
+            this.zTreeNodes = [];
+            if (this.nodes?.length) {
+                this.nativeElement.setAttribute('id', this.name);
+                this.constructZTreeData(this.nodes, this.zTreeNodes);
+                if (this.level > 0) {
+                    this.expandTree(this.level, this.zTreeNodes, 0);
+                }
+            }
+            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();
+        }
+        // --- Selection state persistence (statehandler → StatePersistence: URL | localStorage | sessionStorage | none) ---
+        isStatePersistenceEnabled() {
+            return !!this.statePersistence.computeMode(this.statehandler);
+        }
+        clearPersistedTreeSelection() {
+            if (!this.isStatePersistenceEnabled()) {
+                return;
+            }
+            this.statePersistence.removeWidgetState(this, TREE_STATE_SELECTED_ID);
+            this.statePersistence.removeWidgetState(this, TREE_STATE_SELECTED_PATH);
+        }
+        persistTreeSelection(path, nodeId) {
+            if (!this.isStatePersistenceEnabled()) {
+                return;
+            }
+            const payload = { [TREE_STATE_SELECTED_PATH]: path };
+            if (nodeId !== undefined && nodeId !== null && nodeId !== '') {
+                payload[TREE_STATE_SELECTED_ID] = nodeId;
+            }
+            this.statePersistence.setWidgetState(this, payload);
+        }
+        readPersistedTreeSelection() {
+            return this.isStatePersistenceEnabled() ? this.statePersistence.getWidgetState(this) : undefined;
+        }
+        hasPersistedTreeSelection(widgetState) {
+            if (!widgetState || typeof widgetState !== 'object') {
+                return false;
+            }
+            const id = lodashEs.get(widgetState, TREE_STATE_SELECTED_ID);
+            const path = lodashEs.get(widgetState, TREE_STATE_SELECTED_PATH);
+            const hasId = id !== undefined && id !== null && id !== '';
+            const hasPath = typeof path === 'string' && path.length > 0;
+            return hasId || hasPath;
+        }
+        restorePersistedSelectionAfterStatehandlerChange() {
+            if (!this.zTree || !this.isStatePersistenceEnabled()) {
+                return;
+            }
+            const state = this.readPersistedTreeSelection();
+            if (this.hasPersistedTreeSelection(state)) {
+                this.restoreTreeSelectionFromPersistedState(state);
+            }
+        }
+        getAllZTreeNodesFlat() {
+            return this.zTree ? this.zTree.transformToArray(this.zTree.getNodes()) : [];
+        }
+        /** String / number variants for zTree <code>getNodeByParam('nodeId', …)</code> and flatten fallback. */
+        nodeIdLookupCandidates(raw) {
+            const out = [];
+            const push = (v) => {
+                if (v !== undefined && v !== null && v !== '' && !out.includes(v)) {
+                    out.push(v);
+                }
+            };
+            push(raw);
+            push(String(raw));
+            if (typeof raw === 'string' && raw.trim() !== '' && !Number.isNaN(Number(raw))) {
+                push(Number(raw));
+            }
+            return out;
+        }
+        /** Resolve by stored <code>nodeId</code>: <code>getNodeByParam</code> first, then flattened tree scan. */
+        findZTreeNodeByStoredNodeId(nodeId) {
+            if (!this.zTree || nodeId === undefined || nodeId === null || nodeId === '') {
+                return null;
+            }
+            const candidates = this.nodeIdLookupCandidates(nodeId);
+            if (typeof this.zTree.getNodeByParam === 'function') {
+                for (const c of candidates) {
+                    const n = this.zTree.getNodeByParam('nodeId', c, null);
+                    if (n) {
+                        return n;
+                    }
+                }
+            }
+            const flat = this.getAllZTreeNodesFlat();
+            return (flat.find((n) => n.nodeId !== undefined &&
+                n.nodeId !== null &&
+                candidates.some((c) => String(n.nodeId) === String(c))) || null);
+        }
+        findZTreeNodeByStoredPath(persistedPath) {
+            if (!persistedPath || !this.zTree) {
+                return null;
+            }
+            return (this.getAllZTreeNodesFlat().find((n) => this.treePathsEqual(this.getPath(n, ''), persistedPath)) || null);
+        }
+        /** Expand parents, zTree <code>selectNode</code>, app <code>selectNode</code> (works for default + custom templates). */
+        applyStoredSelectionToTree(treeNode) {
+            if (!treeNode || !this.zTree || treeNode.disabled) {
+                return;
+            }
+            this.expandAncestors(treeNode);
+            this.zTree.selectNode(treeNode, false);
+            this.selectNode(undefined, treeNode);
+            this.expandNode(treeNode, true, false);
+        }
+        /** Prefer stored id, then stored path; no-op if node missing (stale URL/storage after data change). */
+        restoreTreeSelectionFromPersistedState(widgetState) {
+            if (!this.zTree || !widgetState) {
+                return false;
+            }
+            const persistedId = lodashEs.get(widgetState, TREE_STATE_SELECTED_ID);
+            if (persistedId !== undefined && persistedId !== null && persistedId !== '') {
+                const byId = this.findZTreeNodeByStoredNodeId(persistedId);
+                if (byId) {
+                    this.applyStoredSelectionToTree(byId);
+                    return true;
+                }
+            }
+            const persistedPath = lodashEs.get(widgetState, TREE_STATE_SELECTED_PATH);
+            if (typeof persistedPath === 'string' && persistedPath.length) {
+                const byPath = this.findZTreeNodeByStoredPath(persistedPath);
+                if (byPath) {
+                    this.applyStoredSelectionToTree(byPath);
+                    return true;
+                }
+            }
+            return false;
+        }
+        treePathsEqual(a, b) {
+            if (a === b) {
+                return true;
+            }
+            const norm = (p) => (p.startsWith('/') ? p : '/' + p).replace(/\/+/g, '/');
+            return norm(a) === norm(b);
+        }
+        expandAncestors(treeNode) {
+            if (!this.zTree || !treeNode?.getParentNode) {
+                return;
+            }
+            const chain = [];
+            let p = treeNode.getParentNode();
+            while (p) {
+                chain.push(p);
+                p = p.getParentNode();
+            }
+            for (let i = chain.length - 1; i >= 0; i--) {
+                this.zTree.expandNode(chain[i], true, false, false, true);
+            }
+        }
+        setChecked(zNode, node) {
+            node.checked = zNode.checked;
+            const children = base.getEvaluatedData(node, { field: this.nodechildren, bindExpression: this.bindnodechildren }, this.viewParent) || node.children;
+            if (children?.length) {
+                children.forEach((node, index) => {
+                    this.setChecked(zNode.children[index], node);
+                });
+            }
+        }
+        selectNode(event, node) {
+            const deSelectElm = $(`.app-tree[name=${this.name}] li[treenode].selected`);
+            deSelectElm.removeClass('selected');
+            if (!node) {
+                this.clearPersistedTreeSelection();
+                this.refreshTreeNodeTemplateHosts();
+                return;
+            }
+            if (node.disabled) {
+                return;
+            }
+            const selectElm = $(`#${node.tId}:has(.curSelectedNode)`);
+            selectElm.addClass('selected');
+            const classList = (this.treeClass || "").split(" ");
+            if (classList.includes('Checkbox') || classList.includes('Radio')) {
+                this.setChecked(node, node.data);
+            }
+            const path = this.getPath(node, "");
+            this.selecteditem = i1.getClonedObject(node.data) || {};
+            this.selecteditem.path = path;
+            this.persistTreeSelection(path, node.nodeId);
+            const eventParams = {
+                '$event': event,
+                "$item": i1.getClonedObject(node.data),
+                "$path": path
+            };
+            //[Todo-CSP]: this data will be dynamic, can not generate function upfront
+            const nodeAction = node.data[this.nodeaction || 'action'];
+            if (nodeAction) {
+                i1.$parseEvent(nodeAction)(this);
+            }
+            this.invokeEventCallback('select', eventParams);
+            this.refreshTreeNodeTemplateHosts();
+        }
+        expandNode(node, expand, eventFlag) {
+            this.zTree.expandNode(node, expand, false, false, eventFlag);
+            const el = $(`#${node.tId}_switch`);
+            $(el).addClass(this.treeicons || defaultTreeIconClass);
+            this.refreshTreeNodeTemplateHosts();
+        }
+        postRenderTree() {
+            setTimeout(() => {
+                this.changeTreeIcons(this.treeicons || defaultTreeIconClass);
+                this.syncSelectionAfterZTreeRender();
+            }, 200);
+        }
+        /**
+         * After zTree init: honor dataset <code>selected</code>, else persisted state, else <code>datavalue</code>
+         * (FirstNode / LastNode).
+         */
+        syncSelectionAfterZTreeRender() {
+            if (!this.zTree) {
+                return;
+            }
+            const allNodes = this.getAllZTreeNodesFlat();
+            const selectedFromDataset = allNodes.find((n) => n.selected && !n.disabled);
+            if (selectedFromDataset) {
+                this.zTree.selectNode(selectedFromDataset, false);
+                this.selectNode(undefined, selectedFromDataset);
+                this.expandNode(selectedFromDataset, true, false);
+                return;
+            }
+            const persisted = this.readPersistedTreeSelection();
+            if (this.hasPersistedTreeSelection(persisted) && this.restoreTreeSelectionFromPersistedState(persisted)) {
+                return;
+            }
+            this.applyDatavalueDefaultSelection();
+        }
+        applyDatavalueDefaultSelection() {
+            if (!this.datavalue || this.selecteditem) {
+                return;
+            }
+            const nodes = this.zTree.getNodes();
+            if (!nodes?.length) {
+                return;
+            }
+            let node;
+            if (this.datavalue === 'FirstNode') {
+                node = nodes.find((n) => !n.disabled) ?? null;
+            }
+            else if (this.datavalue === 'LastNode') {
+                for (let i = nodes.length - 1; i >= 0; i--) {
+                    if (!nodes[i].disabled) {
+                        node = nodes[i];
+                        break;
+                    }
+                }
+            }
+            if (node) {
+                this.zTree.selectNode(node, false);
+                this.selectNode(undefined, node);
+                this.expandNode(node, true, false);
+            }
+        }
+        selectById(value) {
+            const node = this.findZTreeNodeByStoredNodeId(value);
+            if (node) {
+                this.applyStoredSelectionToTree(node);
+            }
+        }
+        deselectById(value) {
+            this.selecteditem = {};
+            this.clearPersistedTreeSelection();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: TreeComponent, deps: [{ token: i0__namespace.Injector }, { token: 'datavalue.bind', attribute: true }, { token: 'nodelabel.bind', attribute: true }, { token: 'nodeicon.bind', attribute: true }, { token: 'nodechildren.bind', attribute: true }, { token: 'nodeid.bind', attribute: true }, { token: i1__namespace.StatePersistence }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: TreeComponent, isStandalone: true, selector: "ul[wmTree]", providers: [
+                base.provideAsWidgetRef(TreeComponent)
+            ], usesInheritance: true, ngImport: i0__namespace, template: "<ul #wmTree class=\"ztree\" id=\"ztree\"></ul>  ", encapsulation: i0__namespace.ViewEncapsulation.None }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: TreeComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, selector: 'ul[wmTree]', providers: [
+                            base.provideAsWidgetRef(TreeComponent)
+                        ], encapsulation: i0.ViewEncapsulation.None, template: "<ul #wmTree class=\"ztree\" id=\"ztree\"></ul>  " }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['datavalue.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['nodelabel.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['nodeicon.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['nodechildren.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['nodeid.bind']
+                    }] }, { type: i1__namespace.StatePersistence }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }] });
+
+    exports.TreeComponent = TreeComponent;
+
+}));