@wavemaker/app-runtime-wm-build 11.4.0-rc.5351 → 11.4.1-next.140983

app-runtime-wm-build/wmapp/scripts/wm-loader.js

@@ -4387,7 +4387,7 @@
     }();
     var MINIMUM_MOBILE_WIDTH = 480;
     var MINIMUM_TAB_WIDTH = 768;
-    var MINIMUM_LARGE_SCREEN_WIDTH = 1280;
+    var MINIMUM_LARGE_SCREEN_WIDTH = 1200;
     var IViewportService = function() {
         function IViewportService() {}
         return IViewportService;
@@ -4472,11 +4472,13 @@
             } else {
                 MINIMUM_MOBILE_WIDTH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--screen-xs")) || 480;
                 MINIMUM_TAB_WIDTH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--screen-sm")) || 768;
-                if (minValue >= MINIMUM_MOBILE_WIDTH && maxValue >= MINIMUM_TAB_WIDTH) {
+                MINIMUM_LARGE_SCREEN_WIDTH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--screen-lg")) || 1200;
+                if (this.screenWidth >= MINIMUM_LARGE_SCREEN_WIDTH) {
+                    this.isTabletType = isAndroid() || isIos() || isAndroidTablet();
+                    this.isMobileType = false;
+                } else if (this.screenWidth >= MINIMUM_TAB_WIDTH) {
                     this.type = 1;
-                    if (isAndroid() || isIos() || isAndroidTablet()) {
-                        this.isTabletType = true;
-                    }
+                    this.isTabletType = true;
                 } else {
                     this.type = 0;
                     this.isMobileType = true;
@@ -17102,6 +17104,10 @@
         value: 0
     }, base.PROP_NUMBER) ], [ "uncheckedvalue", Object.assign({
         value: false
+    }, base.PROP_STRING) ], [ "togglewithicon", base.PROP_BOOLEAN ], [ "checkedicon", Object.assign({
+        value: "wi wi-done"
+    }, base.PROP_STRING) ], [ "uncheckedicon", Object.assign({
+        value: "wi wi-close"
     }, base.PROP_STRING) ] ]);
     var registerProps$c = function() {
         base.register("wm-checkbox", checkboxProps);
@@ -17188,6 +17194,16 @@
                 type: "change"
             }, this.ngModel.valid);
         };
+        CheckboxComponent.prototype.getColor = function() {
+            var labelElement = $("div[widget-id='" + this.widgetId + "'] label");
+            var bgcolor = $(labelElement).css("background-color");
+            return bgcolor;
+        };
+        CheckboxComponent.prototype.onMouseOver = function() {
+            var labelElement = $("div.app-toggle[widget-id='" + this.widgetId + "'] label");
+            var bgcolor = $(labelElement).css("background-color");
+            document.documentElement.style.setProperty("--boxAfterBackColor", bgcolor);
+        };
         CheckboxComponent.prototype.onKeyDown = function($event) {
             $event.preventDefault();
             this.checkboxEl.nativeElement.click();
@@ -17203,7 +17219,7 @@
         type: core.Component,
         args: [ {
             selector: "[wmCheckbox]",
-            template: '<label [ngClass]="{\'unchecked\': !proxyModel, \'disabled\': (disabled || readonly), \'required\': (required && _caption)}">\n    <input type="checkbox"\n           role="checkbox"\n           #checkbox\n           [attr.name]="name"\n           [attr.aria-label]="hint"\n           [attr.aria-checked]="!!proxyModel"\n           focus-target\n           [(ngModel)]="proxyModel"\n           [readonly]="readonly"\n           [required]="required"\n           [disabled]="disabled || readonly"\n           [attr.accesskey]="shortcutkey"\n           [tabindex]="tabindex"\n           (blur)="invokeOnTouched($event)"\n           (ngModelChange)="handleChange($event)">\n    <span class="caption" [innerHtml]="_caption"></span>\n    <img alt="Checkbox Image" aria-hidden="true" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="switch"/>\n</label>\n<input type="hidden" class="ng-hide model-holder" aria-hidden="true" tabindex="-1" [disabled]="disabled" [value]="proxyModel">\n',
+            template: '<label [ngClass]="{\'unchecked\': !proxyModel, \'disabled\': (disabled || readonly), \'required\': (required && _caption)}" (mouseenter)="onMouseOver()">\n    <input type="checkbox"\n           role="checkbox"\n           #checkbox\n           [attr.name]="name"\n           [attr.aria-label]="hint"\n           [attr.aria-checked]="!!proxyModel"\n           focus-target\n           [(ngModel)]="proxyModel"\n           [readonly]="readonly"\n           [required]="required"\n           [disabled]="disabled || readonly"\n           [attr.accesskey]="shortcutkey"\n           [tabindex]="tabindex"\n           (blur)="invokeOnTouched($event)"\n           (ngModelChange)="handleChange($event)">\n           <span class="toggle_slider" ng-if="!isNativeMobileApplicationType">\n            <i class="app-icon {{checkedicon}} toggle-checked" aria-hidden="true" [ngStyle]="{width:iconwidth, height:iconheight, margin:iconmargin, color:getColor(), fontSize:iconwidth}" *ngIf="proxyModel && togglewithicon"></i>\n            <i class="app-icon {{uncheckedicon}} toggle-unchecked" aria-hidden="true" [ngStyle]="{width:iconwidth, height:iconheight, margin:iconmargin, fontSize:iconwidth}" *ngIf="!proxyModel && togglewithicon"></i>\n           </span>\n           <span class="caption" [innerHtml]="_caption"></span>\n    <img alt="Checkbox Image" aria-hidden="true" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="switch"/>\n</label>\n<input type="hidden" class="ng-hide model-holder" aria-hidden="true" tabindex="-1" [disabled]="disabled" [value]="proxyModel">\n',
             providers: [ base.provideAs(CheckboxComponent, forms.NG_VALUE_ACCESSOR, true), base.provideAs(CheckboxComponent, forms.NG_VALIDATORS, true), base.provideAsWidgetRef(CheckboxComponent) ]
         } ]
     } ];
@@ -22301,17 +22317,11 @@
             });
         };
         SearchComponent.prototype.onFocusOut = function() {
-            var _this = this;
             this._unsubscribeDv = false;
             this._loadingItems = false;
             this.page = 1;
             if (!this._domUpdated && this._isOpen) {
                 this.listenQuery = false;
-                setTimeout((function() {
-                    if (_this.typeahead._typeahead.isShown) {
-                        _this.typeahead.hide();
-                    }
-                }), 200);
             }
             this._isOpen = false;
             if (this._domUpdated && this.typeahead && this.typeahead._container) {
@@ -23185,16 +23195,17 @@
     var defaultTreeIconClass = "plus-minus";
     var TreeComponent = function(_super) {
         __extends(TreeComponent, _super);
-        function TreeComponent(inj) {
+        function TreeComponent(inj, binddatavalue, bindnodelabel, bindnodeicon, bindnodechildren, bindnodeid) {
             var _this = _super.call(this, inj, WIDGET_INFO) || this;
+            _this.binddatavalue = binddatavalue;
+            _this.bindnodelabel = bindnodelabel;
+            _this.bindnodeicon = bindnodeicon;
+            _this.bindnodechildren = bindnodechildren;
+            _this.bindnodeid = bindnodeid;
             _this.setting = {
                 data: {
                     simpleData: {
                         enable: false
-                    },
-                    key: {
-                        children: "children",
-                        name: "label"
                     }
                 },
                 view: {
@@ -23208,53 +23219,53 @@
                 callback: {}
             };
             base.styler(_this.nativeElement, _this, base.APPLY_STYLES_TYPE.CONTAINER);
+            _this.setting.view["nodeClasses"] = _this.setNodeClasses;
+            _this.setting.callback["onClick"] = _this.onClick.bind(_this);
+            _this.setting.callback["onExpand"] = _this.onExpand.bind(_this);
+            _this.setting.callback["onCollapse"] = _this.onCollapse.bind(_this);
             return _this;
         }
         TreeComponent.prototype.onPropertyChange = function(key, nv, ov) {
             switch (key) {
               case "dataset":
                 this.nodes = this.getNodes(nv);
-                if (this.level > 0) {
-                    this.expandTree(this.level, this.nodes, 0);
-                }
                 this.renderTree();
                 break;
 
               case "levels":
-                if (nv > 0) {
-                    this.level = nv;
-                }
+                this.level = nv;
                 this.renderTree();
                 break;
 
-              case "treeicons":
-                this.treeicon = nv;
+              case "nodeicon":
+                this.nodeicon = nv;
                 this.renderTree();
                 break;
 
               case "nodelabel":
-                this.setting.data.key.name = this.labelKey;
+                this.nodelabel = nv;
                 this.renderTree();
                 break;
 
               case "nodechildren":
-                this.setting.data.key.children = this.childrenKey;
+                this.nodechildren = nv;
                 this.renderTree();
                 break;
 
-              case "nodeicon":
-                this.nodeicon = this.iconKey;
+              case "orderby":
+                this.orderby = nv;
                 this.renderTree();
                 break;
 
-              case "orderby":
+              case "treeicons":
+                this.treeicons = nv;
                 this.renderTree();
                 break;
 
               case "class":
                 this.treeClass = nv;
+                this.setTreeTemplate(this.treeClass);
                 this.renderTree();
-                break;
 
               default:
                 _super.prototype.onPropertyChange.call(this, key, nv, ov);
@@ -23264,9 +23275,9 @@
         TreeComponent.prototype.expandTree = function(level, node, childLevel) {
             var _this = this;
             node.map((function(childNode) {
-                var children = _this.getChildren(childNode);
-                if (children && !("open" in childNode) && childLevel < level) {
-                    childNode["open"] = true;
+                var children = childNode.children;
+                if (children && childLevel < level) {
+                    childNode.open = true;
                     _this.expandTree(level, children, childLevel + 1);
                 } else {
                     childLevel = 0;
@@ -23275,12 +23286,13 @@
             }));
         };
         TreeComponent.prototype.setTreeTemplate = function(value) {
-            if (value === "Classic") {
+            var classList = value.split(" ");
+            if (classList.includes("Classic")) {
                 this.setting.check["enable"] = false;
-            } else if (value === "Checkbox") {
+            } else if (classList.includes("Checkbox")) {
                 this.setting.check["enable"] = true;
                 this.setting.check["chkStyle"] = "checkbox";
-            } else if (value === "Radio") {
+            } else if (classList.includes("Radio")) {
                 this.setting.check["enable"] = true;
                 this.setting.check["chkStyle"] = "radio";
                 this.setting.check["radioType"] = "all";
@@ -23307,48 +23319,11 @@
             }
             return nodes;
         };
-        TreeComponent.prototype.setNodeclasses = function(treeId, treeNode) {
+        TreeComponent.prototype.setNodeClasses = function(treeId, treeNode) {
             return treeNode.icon ? {
                 add: [ "" + treeNode.icon ]
             } : "";
         };
-        TreeComponent.prototype.setNodeData = function(nodes, depth, level, parentNode, type) {
-            var _this = this;
-            if (depth === 0) {
-                nodes.map((function(node) {
-                    var children = _this.getChildren(node);
-                    if (children) {
-                        _this.setNodeData(children, depth, level, parentNode, type);
-                    }
-                    if (node.icon && _this.nodelabel == "icon") {
-                        node[type] = node.icon;
-                    } else if (node.name && _this.nodelabel == "name") {
-                        node[type] = node.name;
-                    } else {
-                        return;
-                    }
-                }));
-            } else {
-                nodes.map((function(node) {
-                    var children = _this.getChildren(node);
-                    if (children && level > 1) {
-                        if (depth === level) {
-                            parentNode = node;
-                        }
-                        _this.setNodeData(children, depth, level - 1, parentNode, type);
-                    }
-                    if (level === 1 && (type === "name" ? _this.nodelabel.includes("label") || _this.nodelabel.includes("name") : _this.nodeicon.includes("label") || _this.nodeicon.includes("name"))) {
-                        parentNode[type] = node.name || node.label;
-                        return;
-                    } else if (level === 1 && node.icon !== undefined && (type === "name" ? _this.nodelabel.includes("icon") : _this.nodeicon.includes("icon"))) {
-                        parentNode[type] = node.icon;
-                        return;
-                    } else {
-                        return;
-                    }
-                }));
-            }
-        };
         TreeComponent.prototype.changeTreeIcons = function(nv) {
             var eleClose = $('ul[name="' + this.name + '"] li span.button.switch');
             $(eleClose).map((function(idx, ele) {
@@ -23362,45 +23337,38 @@
         };
         TreeComponent.prototype.getPath = function(treeNode, path) {
             if (treeNode.getParentNode() === null) {
-                path = "/" + treeNode[this.labelKey] + path;
+                path = "/" + treeNode.name + path;
             } else {
-                path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode[this.labelKey];
+                path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode.name;
             }
             return path;
         };
         TreeComponent.prototype.onClick = function(event, treeId, treeNode, clickFlag) {
             if (this.nodeclick === "expand") {
-                var nodes = this.treeObj.getSelectedNodes();
+                var nodes = this.zTree.getSelectedNodes();
                 if (nodes.length > 0) {
                     this.expandNode(nodes[0], !nodes[0].open, true);
                 }
             }
-            var path = this.getPath(treeNode, "");
-            var eventParams = {
-                $event: event,
-                $item: treeNode,
-                $path: path
-            };
-            this.setSelectedItem(treeNode);
-            this.invokeEventCallback("select", eventParams);
+            this.selectNode(event, treeNode);
         };
         TreeComponent.prototype.onExpand = function(event, treeId, treeNode) {
             var self = this;
             var path = this.getPath(treeNode, "");
             var eventParams = {
                 $event: event,
-                $item: treeNode,
+                $item: core.getClonedObject(treeNode.data),
                 $path: path
             };
             this.invokeEventCallback("expand", eventParams);
-            var children = this.getChildren(treeNode);
+            var children = treeNode.children;
             children === null || children === void 0 ? void 0 : children.map((function(el) {
                 if (el.isParent) {
                     var ele_1 = $("#" + el.tId + "_switch");
-                    $(ele_1).addClass(self.treeicon || defaultTreeIconClass);
+                    $(ele_1).addClass(self.treeicons || defaultTreeIconClass);
                     $(ele_1).on("click", (function(e) {
                         setTimeout((function() {
-                            $(ele_1).addClass(self.treeicon || defaultTreeIconClass);
+                            $(ele_1).addClass(self.treeicons || defaultTreeIconClass);
                         }), 0);
                     }));
                 }
@@ -23410,185 +23378,138 @@
             var path = this.getPath(treeNode, "");
             var eventParams = {
                 $event: event,
-                $item: treeNode,
+                $item: core.getClonedObject(treeNode.data),
                 $path: path
             };
             this.invokeEventCallback("collapse", eventParams);
         };
-        TreeComponent.prototype.getChildren = function(node) {
-            return node[this.childrenKey];
-        };
-        Object.defineProperty(TreeComponent.prototype, "childrenKey", {
-            get: function() {
-                if (!this.nodechildren) {
-                    return "children";
-                }
-                var depth = this.countDepth(this.nodechildren);
-                return depth ? this.nodechildren.split(".").pop() : this.nodechildren;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TreeComponent.prototype, "labelKey", {
-            get: function() {
-                if (!this.nodelabel) {
-                    return "label";
-                }
-                var depth = this.countDepth(this.nodelabel);
-                return depth ? this.nodelabel.split(".").pop() : this.nodelabel;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TreeComponent.prototype, "iconKey", {
-            get: function() {
-                if (!this.nodeicon) {
-                    return "icon";
-                }
-                var depth = this.countDepth(this.nodeicon);
-                return depth ? this.nodeicon.split(".").pop() : this.nodeicon;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TreeComponent.prototype, "treeObj", {
-            get: function() {
-                return $.fn.zTree.getZTreeObj("" + this.name);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TreeComponent.prototype.modifyObjects = function(array) {
+        TreeComponent.prototype.constructZTreeData = function(data, zTreeData) {
             var _this = this;
-            array.forEach((function(obj) {
-                obj.icon = obj[_this.nodeicon];
-                var children = _this.getChildren(obj);
-                if (children === null || children === void 0 ? void 0 : children.length) {
-                    _this.modifyObjects(children);
-                }
+            data.forEach((function(node) {
+                var zNode = {};
+                var name = base.getEvaluatedData(node, {
+                    field: _this.nodelabel,
+                    bindExpression: _this.bindnodelabel
+                }, _this.viewParent) || node.label;
+                var icon = base.getEvaluatedData(node, {
+                    field: _this.nodeicon,
+                    bindExpression: _this.bindnodeicon
+                }, _this.viewParent) || node.icon;
+                var nodeId = base.getEvaluatedData(node, {
+                    field: _this.nodeid,
+                    bindExpression: _this.bindnodeid
+                }, _this.viewParent);
+                var children = base.getEvaluatedData(node, {
+                    field: _this.nodechildren,
+                    bindExpression: _this.bindnodechildren
+                }, _this.viewParent) || node.children;
+                zNode["name"] = name;
+                zNode["icon"] = icon;
+                zNode["nodeId"] = nodeId;
+                zNode["data"] = core.getClonedObject(node);
+                if (_.isArray(children) && children.length) {
+                    zNode["children"] = [];
+                    _this.constructZTreeData(children, zNode["children"]);
+                }
+                zTreeData.push(zNode);
             }));
         };
-        TreeComponent.prototype.setNodeChildren = function(nodes, depth, level, parentNode) {
-            var _this = this;
-            if (depth <= 0) {
-                return nodes;
-            }
-            for (var i = 0; i < nodes.length; i++) {
-                var node = nodes[i];
-                if (depth === level) {
-                    parentNode = nodes[i];
-                }
-                var children = this.getChildren(node);
-                if (children === null || children === void 0 ? void 0 : children.length) {
-                    if (level === 1) {
-                        parentNode[this.childrenKey] = children.map((function(child) {
-                            var _a;
-                            return _a = {}, _a[_this.labelKey] = child[_this.labelKey], _a[_this.childrenKey] = _this.getChildren(child), 
-                            _a.icon = child[_this.iconKey], _a;
-                        }));
-                        return;
-                    } else {
-                        this.setNodeChildren(children, depth, level - 1, parentNode);
-                    }
-                }
-            }
-            return nodes;
-        };
-        TreeComponent.prototype.countDepth = function(str) {
-            var e_1, _a;
-            var regex = /\[.*?\]/g;
-            var matches = str.match(regex);
-            var count = 1;
-            if (matches === null) return count;
-            try {
-                for (var matches_1 = __values(matches), matches_1_1 = matches_1.next(); !matches_1_1.done; matches_1_1 = matches_1.next()) {
-                    var match = matches_1_1.value;
-                    count++;
-                }
-            } catch (e_1_1) {
-                e_1 = {
-                    error: e_1_1
-                };
-            } finally {
-                try {
-                    if (matches_1_1 && !matches_1_1.done && (_a = matches_1.return)) _a.call(matches_1);
-                } finally {
-                    if (e_1) throw e_1.error;
-                }
-            }
-            return count;
-        };
         TreeComponent.prototype.renderTree = function() {
-            if (this.nodes) {
+            var _a;
+            this.zTreeNodes = [];
+            if ((_a = this.nodes) === null || _a === void 0 ? void 0 : _a.length) {
                 this.nativeElement.setAttribute("id", this.name);
-                if (this.nodeicon && this.nodeicon !== "icon") {
-                    this.modifyObjects(this.nodes);
-                }
-                this.setTreeTemplate(this.treeClass);
-                if (this.nodelabel) {
-                    var depth = 0;
-                    if (this.nodelabel.includes("children")) {
-                        depth = this.countDepth(this.nodelabel);
-                    }
-                    this.setNodeData(this.nodes, depth, depth, null, "name");
-                }
-                if (this.nodeicon) {
-                    var depth = 0;
-                    if (this.nodeicon.includes("children")) {
-                        depth = this.countDepth(this.nodeicon);
-                    }
-                    this.setNodeData(this.nodes, depth, depth, null, "icon");
-                }
-                if (this.nodechildren) {
-                    var depth = this.countDepth(this.nodechildren);
-                    if (depth > 1) {
-                        this.nodes = this.setNodeChildren(this.nodes, depth, depth, null);
-                    }
+                this.constructZTreeData(this.nodes, this.zTreeNodes);
+                if (this.level > 0) {
+                    this.expandTree(this.level, this.zTreeNodes, 0);
                 }
             }
-            this.setting.view["nodeClasses"] = this.setNodeclasses;
-            this.setting.callback["onClick"] = this.onClick.bind(this);
-            this.setting.callback["onExpand"] = this.onExpand.bind(this);
-            this.setting.callback["onCollapse"] = this.onCollapse.bind(this);
-            var zTree = $.fn.zTree.init($('ul[name="' + this.name + '"]'), this.setting, this.nodes);
-            $.fn.zTreeKeyboardNavigation(zTree, $('ul[name="' + this.name + '"]'), null, this.treeicon || defaultTreeIconClass);
+            this.zTree = $.fn.zTree.init($('ul[name="' + this.name + '"]'), this.setting, this.zTreeNodes);
+            $.fn.zTreeKeyboardNavigation(this.zTree, $('ul[name="' + this.name + '"]'), null, this.treeicons || defaultTreeIconClass);
+            this.postRenderTree();
         };
-        TreeComponent.prototype.setSelectedItem = function(treeNode) {
-            this.selecteditem = core.getClonedObject(treeNode) || {};
-            this.selecteditem.path = this.getPath(treeNode, "");
-            var deSelectElm = $("li[treenode].selected");
+        TreeComponent.prototype.setChecked = function(zNode, node) {
+            var _this = this;
+            node.checked = zNode.checked;
+            var children = base.getEvaluatedData(node, {
+                field: this.nodechildren,
+                bindExpression: this.bindnodechildren
+            }, this.viewParent) || node.children;
+            if (children === null || children === void 0 ? void 0 : children.length) {
+                children.forEach((function(node, index) {
+                    _this.setChecked(zNode.children[index], node);
+                }));
+            }
+        };
+        TreeComponent.prototype.selectNode = function(event, node) {
+            var deSelectElm = $(".app-tree[name=" + this.name + "] li[treenode].selected");
             deSelectElm.removeClass("selected");
-            var selectElm = $("#" + treeNode.tId + ":has(.curSelectedNode)");
+            if (!node) {
+                return;
+            }
+            var selectElm = $("#" + node.tId + ":has(.curSelectedNode)");
             selectElm.addClass("selected");
+            var classList = (this.treeClass || "").split(" ");
+            if (classList.includes("Checkbox") || classList.includes("Radio")) {
+                this.setChecked(node, node.data);
+            }
+            var path = this.getPath(node, "");
+            this.selecteditem = core.getClonedObject(node.data) || {};
+            this.selecteditem.path = path;
+            var eventParams = {
+                $event: event,
+                $item: core.getClonedObject(node.data),
+                $path: path
+            };
+            var nodeAction = node.data[this.nodeaction || "action"];
+            if (nodeAction) {
+                core.$parseEvent(nodeAction)(this);
+            }
+            this.invokeEventCallback("select", eventParams);
         };
         TreeComponent.prototype.expandNode = function(node, expand, eventFlag) {
-            this.treeObj.expandNode(node, expand, false, false, eventFlag);
+            this.zTree.expandNode(node, expand, false, false, eventFlag);
             var el = $("#" + node.tId + "_switch");
-            $(el).addClass(this.treeicon || defaultTreeIconClass);
+            $(el).addClass(this.treeicons || defaultTreeIconClass);
         };
-        TreeComponent.prototype.ngAfterViewInit = function() {
+        TreeComponent.prototype.postRenderTree = function() {
             var _this = this;
             setTimeout((function() {
-                _this.changeTreeIcons(_this.treeicon || defaultTreeIconClass);
-                if (_this.datavalue) {
-                    var nodes = _this.treeObj.getNodes();
-                    var selectNode = void 0;
-                    if (_this.datavalue === "FirstNode") {
-                        if (nodes.length) {
-                            selectNode = nodes[0];
+                _this.changeTreeIcons(_this.treeicons || defaultTreeIconClass);
+                if (_this.datavalue && !_this.selecteditem) {
+                    var nodes = _this.zTree.getNodes();
+                    var node = void 0;
+                    if (nodes.length) {
+                        if (_this.datavalue === "FirstNode") {
+                            node = nodes[0];
                         }
-                    }
-                    if (_this.datavalue === "LastNode") {
-                        if (nodes.length) {
-                            selectNode = nodes[nodes.length - 1];
+                        if (_this.datavalue === "LastNode") {
+                            node = nodes[nodes.length - 1];
                         }
                     }
-                    _this.treeObj.selectNode(selectNode, false);
-                    _this.setSelectedItem(selectNode);
-                    _this.expandNode(selectNode, true, false);
+                    if (node) {
+                        _this.zTree.selectNode(node, false);
+                        _this.selectNode(undefined, node);
+                        _this.expandNode(node, true, false);
+                    }
                 }
             }), 200);
         };
+        TreeComponent.prototype.selectById = function(value) {
+            var _a;
+            var simpleNodes = (_a = this.zTree) === null || _a === void 0 ? void 0 : _a.transformToArray(this.zTree.getNodes());
+            var node = simpleNodes === null || simpleNodes === void 0 ? void 0 : simpleNodes.find((function(node) {
+                return value === node.nodeId;
+            }));
+            if (node) {
+                this.zTree.selectNode(node, false);
+                this.selectNode(undefined, node);
+            }
+        };
+        TreeComponent.prototype.deselectById = function(value) {
+            this.selecteditem = {};
+            this.selectById();
+        };
         return TreeComponent;
     }(base.StylableComponent);
     TreeComponent.initializeProps = registerProps();
@@ -23604,6 +23525,36 @@
     TreeComponent.ctorParameters = function() {
         return [ {
             type: core$1.Injector
+        }, {
+            type: undefined,
+            decorators: [ {
+                type: core$1.Attribute,
+                args: [ "datavalue.bind" ]
+            } ]
+        }, {
+            type: undefined,
+            decorators: [ {
+                type: core$1.Attribute,
+                args: [ "nodelabel.bind" ]
+            } ]
+        }, {
+            type: undefined,
+            decorators: [ {
+                type: core$1.Attribute,
+                args: [ "nodeicon.bind" ]
+            } ]
+        }, {
+            type: undefined,
+            decorators: [ {
+                type: core$1.Attribute,
+                args: [ "nodechildren.bind" ]
+            } ]
+        }, {
+            type: undefined,
+            decorators: [ {
+                type: core$1.Attribute,
+                args: [ "nodeid.bind" ]
+            } ]
         } ];
     };
     var components = [ TreeComponent ];
@@ -28261,8 +28212,11 @@
                 return core$1.getFormattedDate(this.datePipe, this.bsDataValue, this.outputformat, this.timeZone, null, this.isCurrentDate, this) || "";
             },
             set: function(newVal) {
+                var _this = this;
                 if (newVal === CURRENT_DATE$1) {
-                    this.bsDataValue = this.timeZone ? core$1.getMomentLocaleObject(this.timeZone) : new Date;
+                    setTimeout((function() {
+                        _this.bsDataValue = _this.timeZone ? core$1.getMomentLocaleObject(_this.timeZone) : new Date;
+                    }), 50);
                     this.isCurrentDate = true;
                 } else {
                     this.bsDataValue = newVal ? core$1.getDateObj(newVal, {
@@ -32434,7 +32388,11 @@
             var value = _.get(dataObj, xKey);
             if (isLineTypeChart(this.type) && !core.isNumberType(this.xAxisDataType)) {
                 this.xDataKeyArr.push(value);
-                return value;
+                if (value instanceof Date) {
+                    return value;
+                } else {
+                    return index;
+                }
             }
             return value;
         };
@@ -42468,9 +42426,6 @@
                 var childNode = item.querySelector("span");
                 if ((childNode === null || childNode === void 0 ? void 0 : childNode.dataset.isacitvepage) === "true") {
                     item.setAttribute("aria-current", "true");
-                    setTimeout((function() {
-                        return item.focus();
-                    }));
                 }
                 if ((childNode === null || childNode === void 0 ? void 0 : childNode.dataset.isdisabled) === "true") {
                     item.setAttribute("aria-disabled", "true");
@@ -51245,9 +51200,14 @@
             }));
         } else {
             var element = self.$element.find('[wmformfield][key="' + fieldName + '"]');
-            element[0].setAttribute("__errormsg", element[0].getAttribute("__validationId"));
-            (_a = element[0].querySelector("input")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-invalid", ngForm.invalid);
-            (_b = element[0].querySelector("input")) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-describedby", element[0].getAttribute("__validationId"));
+            if (!element.length) {
+                element = self.$element.find('[wmformfield][name="' + fieldName + '"]');
+            }
+            if (element.length) {
+                element[0].setAttribute("__errormsg", element[0].getAttribute("__validationId"));
+                (_a = element[0].querySelector("input")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-invalid", ngForm.invalid);
+                (_b = element[0].querySelector("input")) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-describedby", element[0].getAttribute("__validationId"));
+            }
             ngForm.markAsTouched();
         }
     };
@@ -58667,7 +58627,9 @@
             value: true
         }, base.PROP_BOOLEAN) ], [ "statehandler", Object.assign({
             value: "none"
-        }, base.PROP_STRING) ], [ "transition", base.PROP_STRING ], [ "type", base.PROP_STRING ] ]);
+        }, base.PROP_STRING) ], [ "transition", base.PROP_STRING ], [ "type", base.PROP_STRING ], [ "tabwithicon", base.PROP_BOOLEAN ], [ "iconposition", Object.assign({
+            value: "left"
+        }, base.PROP_STRING) ] ]);
         if (core.isMobileApp()) {
             props.set("transition", Object.assign({
                 value: "slide"
@@ -58678,7 +58640,9 @@
     var registerProps = function() {
         base.register("wm-tabpane", new Map([ [ "active", base.PROP_BOOLEAN ], [ "badgevalue", base.PROP_STRING ], [ "badgetype", Object.assign({
             value: "default"
-        }, base.PROP_STRING) ], [ "class", base.PROP_STRING ], [ "content", base.PROP_STRING ], [ "disabled", base.PROP_BOOLEAN ], [ "dynamicPaneIndex", base.PROP_NUMBER ], [ "heading", base.PROP_STRING ], [ "isdefaulttab", base.PROP_STRING ], [ "isdynamic", base.PROP_BOOLEAN ], [ "name", base.PROP_STRING ], [ "paneicon", base.PROP_STRING ], [ "show", Object.assign({
+        }, base.PROP_STRING) ], [ "class", base.PROP_STRING ], [ "content", base.PROP_STRING ], [ "disabled", base.PROP_BOOLEAN ], [ "dynamicPaneIndex", base.PROP_NUMBER ], [ "heading", base.PROP_STRING ], [ "isdefaulttab", base.PROP_STRING ], [ "isdynamic", base.PROP_BOOLEAN ], [ "name", base.PROP_STRING ], [ "paneicon", Object.assign({
+            value: "wi wi-home"
+        }, base.PROP_STRING) ], [ "show", Object.assign({
             value: true
         }, base.PROP_BOOLEAN) ], [ "smoothscroll", Object.assign({
             value: false
@@ -58699,6 +58663,7 @@
             _this.heading = heading;
             _this.title = title;
             _this._isFirstLoad = true;
+            _this._isOnLoadTriggered = false;
             _this.$lazyLoad = core.noop;
             _this.isActive = false;
             _this.disabled = false;
@@ -58749,6 +58714,10 @@
                         return c.redraw();
                     }));
                 }
+                if (!_this._isOnLoadTriggered && !_this.content) {
+                    _this.invokeEventCallback("load");
+                    _this._isOnLoadTriggered = true;
+                }
             }), 100);
         };
         TabPaneComponent.prototype.notifyParent = function(evt) {
@@ -59087,6 +59056,18 @@
                 core.addClass(this.nativeElement, "inverted");
             }
         };
+        TabsComponent.prototype.setIconPosition = function() {
+            var _tabdiv = this.nativeElement.children[0], _tabheader = $(_tabdiv).find("li a.tab-heading");
+            if (this.iconposition === "right") {
+                _tabheader.addClass("icon_right");
+            } else if (this.iconposition === "top") {
+                _tabheader.addClass("icon_top");
+                _tabheader.removeClass("icon_right");
+            } else {
+                _tabheader.removeClass("icon_top");
+                _tabheader.removeClass("icon_right");
+            }
+        };
         TabsComponent.prototype.onDataChange = function(newVal) {
             var _this = this;
             this.fieldDefs = base.createArrayFrom(newVal);
@@ -59123,6 +59104,8 @@
                         return _this.selectDefaultPaneByIndex(_this.defaultpaneindex || 0);
                     }), 20);
                 }
+            } else if (key === "iconposition") {
+                this.setIconPosition();
             } else {
                 _super.prototype.onPropertyChange.call(this, key, nv, ov);
             }