@wavemaker/app-runtime-wm-build 11.4.0-next.25703 → 11.4.0-next.25705

app-runtime-wm-build/wmmobile/scripts/wm-mobileloader.js

@@ -8973,9 +8973,11 @@
         });
     };
     var getKeyboardFocusableElements = function(element) {
-        return [ element.querySelectorAll('a, button, input, textarea, select, details, iframe, embed, object, summary dialog, audio[controls], video[controls], [contenteditable], [tabindex]:not([tabindex="-1"])') ].filter((function(el) {
-            return !el[0].hasAttribute("disabled") && !el[0].hasAttribute("hidden");
-        }))[0];
+        var elementNodeList = element.querySelectorAll("a, button, input, textarea, select, details, iframe, embed, object, summary dialog, audio[controls], video[controls], [contenteditable]");
+        var elements = Array.from(elementNodeList);
+        return elements.filter((function(el) {
+            return !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && (!el.hasAttribute("tabindex") || el.hasAttribute("tabindex") && !el.getAttribute("tabindex").startsWith("-"));
+        }));
     };
     exports.APPLY_STYLES_TYPE = void 0;
     (function(APPLY_STYLES_TYPE) {
@@ -13440,21 +13442,19 @@
         __proto__: null,
         default: search_build
     });
-    var tagName$1o = "div";
+    var tagName$1o = "ul";
     transpiler.register("wm-tree", (function() {
         return {
             pre: function(attrs) {
-                return "<" + tagName$1o + " wmTree " + transpiler.getAttrMarkup(attrs) + ">";
+                return "<" + tagName$1o + ' wmTree class="ztree" ' + transpiler.getAttrMarkup(attrs) + ">";
             },
             post: function() {
                 return "</" + tagName$1o + ">";
             }
         };
     }));
-    var tree_build = function() {};
-    var tree_build$1 = Object.freeze({
-        __proto__: null,
-        default: tree_build
+    var tree_build = Object.freeze({
+        __proto__: null
     });
     var tagName$1n = "div";
     transpiler.register("wm-card", (function() {
@@ -15060,7 +15060,7 @@
                 }
                 var markup = "<" + tagName$q + " wmPopover " + transpiler.getAttrMarkup(attrs) + ">";
                 var contextAttrs = table ? 'let-row="row"' : "";
-                markup += "<ng-template " + contextAttrs + '><button class="popover-start"></button>';
+                markup += "<ng-template " + contextAttrs + '><div tabindex="0" class="popover-start sr-only" aria-label="">popover content start</div>';
                 if (popoverTemplate) {
                     markup += "" + (popoverTemplate ? popoverTemplate : "");
                 }
@@ -15071,7 +15071,7 @@
                 if (shared.get("hasPopoverContent")) {
                     markup += "</div>";
                 }
-                return markup + '<button class="popover-end"></button></ng-template></' + tagName$q + ">";
+                return markup + '<div tabindex="0" class="popover-end sr-only" aria-label="">popover content ended</div></ng-template></' + tagName$q + ">";
             }
         };
     }));
@@ -16435,7 +16435,7 @@
     exports.tileBuild = tile_build$1;
     exports.timeBuild = time_build$1;
     exports.topNavBuild = topNav_build$1;
-    exports.treeBuild = tree_build$1;
+    exports.treeBuild = tree_build;
     exports.videoBuild = video_build$1;
     exports.wizardBuild = wizard_build$1;
     exports.wizardStepBuild = wizardStep_build$1;
@@ -22781,10 +22781,10 @@
 }));
 
 (function(global, factory) {
-    typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@angular/core"), require("@angular/common"), require("@wm/components/base"), require("@wm/core")) : typeof define === "function" && define.amd ? define("@wm/components/basic/tree", [ "exports", "@angular/core", "@angular/common", "@wm/components/base", "@wm/core" ], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, 
+    typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@angular/core"), require("@angular/common"), require("@wm/components/base")) : typeof define === "function" && define.amd ? define("@wm/components/basic/tree", [ "exports", "@angular/core", "@angular/common", "@wm/components/base" ], 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.ng.common, global.wm.components.base, global.wm.core));
-})(this, (function(exports, core$1, common, base, core) {
+    global.wm.components.basic = global.wm.components.basic || {}, global.wm.components.basic.tree = {}), global.ng.core, global.ng.common, global.wm.components.base));
+})(this, (function(exports, core, common, base) {
     "use strict";
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -23161,352 +23161,344 @@
             value: 0
         }, base.PROP_NUMBER) ], [ "treeicons", base.PROP_STRING ] ]));
     };
-    var defaultTreeIconClass = "plus-minus";
-    var 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"
-        }
-    };
     var WIDGET_INFO = {
         widgetType: "wm-tree",
         hostClass: "app-tree"
     };
-    var TreeDirective = function(_super) {
-        __extends(TreeDirective, _super);
-        function TreeDirective(inj, binddatavalue, bindnodelabel, bindnodeicon, bindnodechildren, bindnodeid) {
+    var defaultTreeIconClass = "plus-minus";
+    var TreeComponent = function(_super) {
+        __extends(TreeComponent, _super);
+        function TreeComponent(inj) {
             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: true
+                    }
+                },
+                view: {
+                    dblClickExpand: false,
+                    fontCss: {
+                        "font-awesome": true
+                    },
+                    switchIcon: {}
+                },
+                check: {},
+                callback: {}
+            };
             base.styler(_this.nativeElement, _this, base.APPLY_STYLES_TYPE.CONTAINER);
-            _this.bindEvents();
             return _this;
         }
-        TreeDirective.prototype.onPropertyChange = function(key, nv, ov) {
+        TreeComponent.prototype.onPropertyChange = function(key, nv, ov) {
             switch (key) {
               case "dataset":
                 this.nodes = this.getNodes(nv);
-                this._selectNode = undefined;
+                if (this.level > 0) {
+                    this.expandTree(this.level, this.nodes, 0);
+                }
                 this.renderTree();
                 break;
 
-              case "nodeicon":
-              case "nodelabel":
-              case "nodechildren":
-              case "orderby":
-                this.renderTree();
+              case "levels":
+                if (nv > 0) {
+                    this.level = nv;
+                }
                 break;
 
               case "treeicons":
-                this.changeTreeIcons(nv, ov);
+                this.treeicon = nv;
                 break;
 
-              case "datavalue":
-                this.selectById(nv);
+              case "nodelabel":
+                this.nodelabel = nv;
+                break;
+
+              case "icon":
+                this.nodeicon = nv;
+
+              case "orderby":
+                this.renderTree();
+                break;
+
+              case "class":
+                this.treeClass = nv;
                 break;
 
               default:
                 _super.prototype.onPropertyChange.call(this, key, nv, ov);
+                break;
             }
         };
-        TreeDirective.prototype.constructNodes = function(nodes, parent, levels, deep, _evalDataValue) {
+        TreeComponent.prototype.expandTree = function(level, node, childLevel) {
             var _this = this;
-            var $ul = $("<ul></ul>");
-            var _iconClses = ICON_CLASSES[this.treeicons || defaultTreeIconClass];
-            var _expr = this.binddatavalue || this.datavalue;
-            var _iconCls, _cls;
-            _cls = levels > 0 ? " expanded " : " collapsed ";
-            _iconCls = _cls + (levels > 0 ? _iconClses.expanded : _iconClses.collapsed);
-            deep = deep || 0;
-            parent.append($ul);
-            nodes.forEach((function(node, idx) {
-                var $li = $("<li></li>"), $iconNode = $("<i></i>"), nodeLabel = base.getEvaluatedData(node, {
-                    field: _this.nodelabel,
-                    bindExpression: _this.bindnodelabel
-                }, _this.viewParent) || node.label, nodeIcon = base.getEvaluatedData(node, {
-                    field: _this.nodeicon,
-                    bindExpression: _this.bindnodeicon
-                }, _this.viewParent) || node.icon, nodeChildren = base.getEvaluatedData(node, {
-                    field: _this.nodechildren,
-                    bindExpression: _this.bindnodechildren
-                }, _this.viewParent) || node.children;
-                var nodeIdValue = base.getEvaluatedData(node, {
-                    field: _this.nodeid,
-                    bindExpression: _this.bindnodeid
-                }, _this.viewParent);
-                if (nodeIdValue === undefined) {
-                    nodeIdValue = node.children;
-                }
-                var isNodeMatched = false, expandCollapseIcon;
-                $li.data("nodedata", node).append($iconNode).append('<span class="title">' + nodeLabel + "</span>").appendTo($ul);
-                if (_this.bindnodeid || _this.nodeid) {
-                    isNodeMatched = _this.binddatavalue ? nodeIdValue === _evalDataValue : nodeIdValue === _expr;
-                    if (nodeIdValue !== undefined) {
-                        $li.attr("id", nodeIdValue);
-                    }
-                } else if (_this.binddatavalue) {
-                    isNodeMatched = !!core.$parseExpr(_expr)(_this, node);
-                }
-                if (!_this._selectNode) {
-                    if (_expr === "FirstNode" && idx === 0 || !deep && _expr === "LastNode" && idx === nodes.length - 1 || isNodeMatched) {
-                        _this._selectNode = $li;
-                        _this.datavalue = nodeIdValue;
-                    }
-                }
-                if (nodeIcon) {
-                    $iconNode.addClass(nodeIcon);
-                }
-                if (nodeChildren && nodeChildren.length) {
-                    $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);
+            node.map((function(childNode) {
+                if ("children" in childNode && !("open" in childNode) && childLevel < level) {
+                    childNode["open"] = true;
+                    _this.expandTree(level, childNode.children, childLevel + 1);
                 } else {
-                    if (!nodeIcon) {
-                        $iconNode.addClass("leaf-node");
-                    }
-                    $li.addClass("leaf-node");
+                    childLevel = 0;
+                    return;
                 }
             }));
         };
-        TreeDirective.prototype.getNodesFromString = function(value) {
+        TreeComponent.prototype.setTreeTemplate = function(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";
+            }
+        };
+        TreeComponent.prototype.getNodesFromString = function(value) {
             return value.split(",").map((function(item) {
                 return {
-                    label: item && item.trim()
+                    name: item && item.trim()
                 };
             }));
         };
-        TreeDirective.prototype.getNodes = function(newVal) {
+        TreeComponent.prototype.getNodes = function(newVal) {
             var nodes;
-            if (_.isString(newVal) && !_.isEmpty(newVal)) {
+            if (_.isArray(newVal)) {
+                nodes = base.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 = base.getOrderedDataset(newVal, this.orderby);
-                nodes = newVal;
-            } else if (_.isObject(newVal)) {
-                nodes = [ newVal ];
             }
             return nodes;
         };
-        TreeDirective.prototype.changeTreeIcons = function(nv, ov) {
-            var $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);
-        };
-        TreeDirective.prototype.toggleExpandCollapseNode = function($event, $i, $li) {
-            var treeIcons = ICON_CLASSES[this.treeicons || defaultTreeIconClass];
-            var $liPath = this.findSelectedNodeParent($li);
-            var path = "";
-            $liPath.each((function(i, el) {
-                var current = $(el).children(".title").text();
-                path = "/" + (current + path);
-            }));
-            var eventParams = {
-                $event: $event,
-                $item: $li.data("nodedata"),
-                $path: path
-            };
-            if ($i.hasClass("collapsed")) {
-                $i.removeClass("collapsed " + treeIcons.collapsed).addClass("expanded " + treeIcons.expanded);
-                $li.removeClass("collapsed").addClass("expanded");
-                this.invokeEventCallback("expand", eventParams);
-            } else if ($i.hasClass("expanded")) {
-                $i.removeClass("expanded " + treeIcons.expanded).addClass("collapsed " + treeIcons.collapsed);
-                $li.removeClass("expanded").addClass("collapsed");
-                this.invokeEventCallback("collapse", eventParams);
-            }
+        TreeComponent.prototype.setNodeclasses = function(treeId, treeNode) {
+            return treeNode.icon ? {
+                add: [ "" + treeNode.icon ]
+            } : "";
         };
-        TreeDirective.prototype.renderTree = function(forceRender) {
+        TreeComponent.prototype.setNodeData = function(nodes, depth, level, parentNode, type) {
             var _this = this;
-            var docFrag, $li, $liPath, data, path = "";
-            var levels = +this.nativeElement.getAttribute("levels") || 0, $el = $(this.nativeElement);
-            $el.empty();
-            if (forceRender) {
-                this._selectNode = undefined;
-            }
-            if (this.nodes && this.nodes.length) {
-                docFrag = document.createDocumentFragment();
-                this.constructNodes(this.nodes, $(docFrag), levels, 0, this.datavalue);
-                $el.append(docFrag);
-            }
-            if (this._selectNode) {
-                $li = this._selectNode;
-                $li.addClass("selected");
-                data = $li.data("nodedata");
-                $liPath = this.findSelectedNodeParent($li);
-                if (!$liPath.length) {
-                    $liPath = $li;
-                }
-                $liPath.each((function(i, el) {
-                    var $current = $(el), $i = $current.children("i.collapsed"), $title = $current.children(".title");
-                    _this.toggleExpandCollapseNode(undefined, $i, $current);
-                    path = "/" + ($title.text() + path);
+            if (depth === 0) {
+                nodes.map((function(node) {
+                    if (node.children) {
+                        _this.setNodeData(node.children, depth, level, parentNode, type);
+                    }
+                    if (node.icon && _this.nodelabel == "icon") {
+                        node[type] = node.icon;
+                    } else if (node.name && _this.nodelabel == "name") {
+                        node[type] = node.name;
+                    } else {
+                        return;
+                    }
+                }));
+            } else {
+                nodes.map((function(node) {
+                    if (node.children && level > 1) {
+                        if (depth === level) {
+                            parentNode = node;
+                        }
+                        _this.setNodeData(node.children, depth, level - 1, parentNode, type);
+                    }
+                    if (level === 1 && (type === "name" ? _this.nodelabel.includes("label") || _this.nodelabel.includes("name") : _this.nodeicon.includes("label") || _this.nodeicon.includes("name"))) {
+                        parentNode[type] = node.name || node.label;
+                        return;
+                    } else if (level === 1 && node.icon !== undefined && (type === "name" ? _this.nodelabel.includes("icon") : _this.nodeicon.includes("icon"))) {
+                        parentNode[type] = node.icon;
+                        return;
+                    } else {
+                        return;
+                    }
                 }));
-                this.selecteditem = core.getClonedObject(data) || {};
-                this.selecteditem.path = path;
-                this.invokeEventCallback("select", {
-                    $event: undefined,
-                    $item: data,
-                    $path: path
-                });
-                core.$appDigest();
             }
         };
-        TreeDirective.prototype.selectNode = function(evt, value) {
-            var _this = this;
-            var target = evt && $(evt.target), $el = $(this.nativeElement), $li = _.isObject(value) ? value : $el.find('li[id="' + value + '"]').first();
-            var data, path = "", $liPath, nodeAction;
-            $el.find(".selected").removeClass("selected");
-            if (!$li.length) {
-                return;
-            }
-            $li.addClass("selected");
-            data = $li.data("nodedata");
-            nodeAction = data[this.nodeaction || "action"];
-            $liPath = target ? target.parents(".app-tree li") : this.findSelectedNodeParent($li);
-            $liPath.each((function(i, el) {
-                var current = $(el).children(".title").text();
-                path = "/" + (current + path);
-            }));
-            $li.parentsUntil($el, "li.parent-node.collapsed").each((function(index, el) {
-                var $current = $(el), $i = $current.children("i.collapsed");
-                _this.toggleExpandCollapseNode(undefined, $i, $current);
-            }));
-            this.selecteditem = core.getClonedObject(data) || {};
-            this.selecteditem.path = path;
-            if (target) {
-                if (this.nodeid || this.bindnodeid) {
-                    this.datavalue = base.getEvaluatedData(data, {
-                        field: this.nodeid,
-                        bindExpression: this.bindnodeid
-                    }, this.viewParent);
-                } else {
-                    this.datavalue = core.getClonedObject(data) || {};
-                }
+        TreeComponent.prototype.changeTreeIcons = function(nv) {
+            var eleClose = $('ul[name="' + this.name + '"] li span.button.switch');
+            $(eleClose).map((function(idx, ele) {
+                $(ele).addClass(nv);
+                $(ele).on("click", (function(e) {
+                    setTimeout((function() {
+                        $(ele).addClass(nv);
+                    }), 0);
+                }));
+            }));
+        };
+        TreeComponent.prototype.getPath = function(treeNode, path) {
+            if (treeNode.getParentNode() === null) {
+                path = "/" + treeNode.name + path;
             } else {
-                this.datavalue = value;
-            }
-            if (nodeAction) {
-                core.$parseEvent(nodeAction)(this);
+                path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode.name;
             }
-            this.invokeEventCallback("select", {
-                $event: evt,
-                $item: data,
+            return path;
+        };
+        TreeComponent.prototype.onClick = function(event, treeId, treeNode, clickFlag) {
+            var treeObj = $.fn.zTree.getZTreeObj("" + this.name);
+            var path = this.getPath(treeNode, "");
+            var eventParams = {
+                $event: event,
+                $item: treeNode,
                 $path: path
-            });
-            core.$appDigest();
+            };
+            this.invokeEventCallback("select", eventParams);
+        };
+        TreeComponent.prototype.onExpand = function(event, treeId, treeNode) {
+            var self = this;
+            var path = this.getPath(treeNode, "");
+            var eventParams = {
+                $event: event,
+                $item: treeNode,
+                $path: path
+            };
+            this.invokeEventCallback("expand", eventParams);
+            treeNode.children ? treeNode.children.map((function(el) {
+                if (el.isParent) {
+                    var ele_1 = $("#" + el.tId + "_switch");
+                    $(ele_1).addClass(self.treeicon || defaultTreeIconClass);
+                    $(ele_1).on("click", (function(e) {
+                        setTimeout((function() {
+                            $(ele_1).addClass(self.treeicon || defaultTreeIconClass);
+                        }), 0);
+                    }));
+                }
+            })) : "";
         };
-        TreeDirective.prototype.bindEvents = function() {
+        TreeComponent.prototype.onCollapse = function(event, treeId, treeNode) {
+            var path = this.getPath(treeNode, "");
+            var eventParams = {
+                $event: event,
+                $item: treeNode,
+                $path: path
+            };
+            this.invokeEventCallback("collapse", eventParams);
+        };
+        TreeComponent.prototype.modifyObjects = function(array) {
             var _this = this;
-            $(this.nativeElement).on("click", (function(evt) {
-                var 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")) {
-                    _this.selecteditem = {};
-                    _this.selectNode(evt, li);
+            array.forEach((function(obj) {
+                if (obj.label !== undefined) {
+                    obj.name = obj.label;
+                    delete obj.label;
                 }
-                if (target.is("i") || target.is("span.title") && _this.nodeclick === "expand") {
-                    _this.toggleExpandCollapseNode(evt, $i, li);
+                if (obj.children !== undefined) {
+                    _this.modifyObjects(obj.children);
                 }
             }));
+            return array;
         };
-        TreeDirective.prototype.findSelectedNodeParent = function($li) {
-            return $li.find("> span.title").parents(".app-tree li");
+        TreeComponent.prototype.setNodeChildren = function(nodes, depth, level, parentNode) {
+            if (depth <= 0) {
+                return nodes;
+            }
+            for (var i = 0; i < nodes.length; i++) {
+                var node = nodes[i];
+                if (depth === level) {
+                    parentNode = nodes[i];
+                }
+                if (node.children && node.children.length > 0) {
+                    if (level === 1) {
+                        parentNode.children = node.children.map((function(child) {
+                            return {
+                                name: child.name,
+                                children: child === null || child === void 0 ? void 0 : child.children
+                            };
+                        }));
+                        return;
+                    } else {
+                        this.setNodeChildren(node.children, depth, level - 1, parentNode);
+                    }
+                }
+            }
+            return nodes;
         };
-        TreeDirective.prototype.selectById = function(value) {
-            this.selectNode(undefined, value);
+        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;
         };
-        TreeDirective.prototype.deselectById = function(value) {
-            this.selecteditem = {};
-            this.selectById();
+        TreeComponent.prototype.renderTree = function() {
+            console.log(this.nodes, "this.nodes");
+            if (this.nodes) {
+                this.nativeElement.setAttribute("id", this.name);
+                this.nodes = this.modifyObjects(this.nodes);
+                this.setTreeTemplate(this.treeClass);
+                if (this.nodelabel) {
+                    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.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);
         };
-        return TreeDirective;
+        TreeComponent.prototype.ngAfterViewInit = function() {
+            var _this = this;
+            setTimeout((function() {
+                _this.changeTreeIcons(_this.treeicon || defaultTreeIconClass);
+            }), 200);
+        };
+        return TreeComponent;
     }(base.StylableComponent);
-    TreeDirective.initializeProps = registerProps();
-    TreeDirective.decorators = [ {
-        type: core$1.Directive,
+    TreeComponent.initializeProps = registerProps();
+    TreeComponent.decorators = [ {
+        type: core.Component,
         args: [ {
-            selector: "div[wmTree]",
-            providers: [ base.provideAsWidgetRef(TreeDirective) ]
+            selector: "ul[wmTree]",
+            template: '<ul #wmTree class="ztree" id="ztree"></ul>  ',
+            providers: [ base.provideAsWidgetRef(TreeComponent) ],
+            encapsulation: core.ViewEncapsulation.None
         } ]
     } ];
-    TreeDirective.ctorParameters = function() {
+    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" ]
-            } ]
+            type: core.Injector
         } ];
     };
-    var components = [ TreeDirective ];
+    var components = [ TreeComponent ];
     var TreeModule = function() {
         function TreeModule() {}
         return TreeModule;
     }();
     TreeModule.decorators = [ {
-        type: core$1.NgModule,
+        type: core.NgModule,
         args: [ {
             imports: [ common.CommonModule, base.WmComponentsModule ],
             declarations: __spreadArray([], __read(components)),
@@ -23514,7 +23506,7 @@
             entryComponents: []
         } ]
     } ];
-    exports.TreeDirective = TreeDirective;
+    exports.TreeComponent = TreeComponent;
     exports.TreeModule = TreeModule;
     exports["\u0275a"] = registerProps;
     Object.defineProperty(exports, "__esModule", {
@@ -27414,14 +27406,18 @@
                 var newDay = newDate.getDate().toString();
                 _.filter($("span:contains(" + newDay + ")").not(".is-other-month"), (function(obj) {
                     if ($(obj).text() === newDay) {
+                        if ($(obj).hasClass("selected")) {
+                            $(obj).parent().attr("aria-selected", "true");
+                        }
                         $(obj).attr("aria-label", moment(newDate).format("dddd, MMMM Do YYYY"));
+                        $("[bsdatepickerdaydecorator]").not(".is-other-month").attr("tabindex", "-1");
+                        $(obj).attr("tabindex", "0");
                         $(obj).focus();
                         _this.activeDate = newDate;
                     }
                 }));
                 if (newDate.getMonth() === (new Date).getMonth() && newDate.getFullYear() === (new Date).getFullYear()) {
                     _this.hightlightToday();
-                    $("span:contains(" + (new Date).getDate().toString() + ")").not(".is-other-month").parent().attr("aria-selected", "true");
                 }
             }));
         };
@@ -27463,6 +27459,9 @@
                 if (event.originalEvent) {
                     _this.setFocusForDate(-1);
                 }
+                setTimeout((function() {
+                    $(".bs-datepicker-head .previous").focus();
+                }));
             }));
             datePickerHead.find(".next").click((function(event) {
                 _this.next = _this.getMonth(_this.activeDate, 2);
@@ -27471,6 +27470,9 @@
                 if (event.originalEvent) {
                     _this.setFocusForDate(1);
                 }
+                setTimeout((function() {
+                    $(".bs-datepicker-head .next").focus();
+                }));
             }));
             datePickerHead.find(".current").click((function(event) {
                 if (event.originalEvent) {
@@ -27485,6 +27487,19 @@
             }));
             datePickerHead.find(".next").attr("aria-label", "Next Month, " + this.next.fullMonth + " " + this.next.date.getFullYear());
             datePickerHead.find(".previous").attr("aria-label", "Previous Month, " + this.prev.fullMonth + " " + this.prev.date.getFullYear());
+            setTimeout((function() {
+                var currentNodes = datePickerHead.find(".current span");
+                var msg = "Changed to month ";
+                datePickerHead.find(".current").attr("aria-live", "assertive").attr("aria-atomic", "false");
+                if (_this.clicked) {
+                    if ($(currentNodes[0]).text()) {
+                        datePickerHead.find(".ng-star-inserted").prepend('<div class="sr-only">' + msg + "</div>");
+                    }
+                    if ($(currentNodes[1]).text()) {
+                        datePickerHead.find(".current").last().prepend('<div class="sr-only"> and year </div>');
+                    }
+                }
+            }));
         };
         BaseDateTimeComponent.prototype.setFocusForMonthOrDay = function() {
             var activeMonthOrYear = $(".bs-datepicker-head .current").first().text();
@@ -27620,8 +27635,6 @@
         BaseDateTimeComponent.prototype.loadMonths = function() {
             var _this = this;
             setTimeout((function() {
-                var datePickerBody = $(".bs-datepicker-body");
-                datePickerBody.find("table.months span").attr("tabindex", "0");
                 _this.addKeyBoardEventsForMonths();
                 _this.addDatepickerMouseEvents();
             }));
@@ -27664,8 +27677,6 @@
         BaseDateTimeComponent.prototype.loadYears = function() {
             var _this = this;
             setTimeout((function() {
-                var datePickerBody = $(".bs-datepicker-body");
-                datePickerBody.find("table.years span").attr("tabindex", "0");
                 _this.addKeyBoardEventsForYears();
                 _this.addDatepickerMouseEvents();
             }));
@@ -27682,6 +27693,8 @@
                 }
             }
             setTimeout((function() {
+                $(".bs-datepicker-body table.months span").attr("tabindex", "-1");
+                $(".bs-datepicker-body table.months span:contains(" + newMonth + ")").attr("tabindex", "0");
                 $(".bs-datepicker-body table.months span:contains(" + newMonth + ")").focus();
                 _this.activeDate = newDate;
             }));
@@ -27730,6 +27743,8 @@
                 }
             }
             setTimeout((function() {
+                $(".bs-datepicker-body table.years span").attr("tabindex", "-1");
+                $(".bs-datepicker-body table.years span:contains(" + newYear + ")").attr("tabindex", "0");
                 $(".bs-datepicker-body table.years span:contains(" + newYear + ")").focus();
                 _this.activeDate = newDate;
             }));
@@ -27896,11 +27911,6 @@
                     children[i].classList.remove("add-opacity");
                 }
                 displayInputElem.classList.remove("remove-opacity");
-                var allDateTimeElements = this.nativeElement.getElementsByTagName("*");
-                for (var i = 0; i < allDateTimeElements.length; i++) {
-                    allDateTimeElements[i].setAttribute("tabindex", this.tabindex);
-                }
-                displayInputElem.removeAttribute("tabindex");
             }
         };
         BaseDateTimeComponent.prototype.onDateTimeInputFocus = function(skipFocus) {
@@ -27917,11 +27927,6 @@
                     children[i].classList.add("add-opacity");
                 }
                 displayInputElem.classList.add("remove-opacity");
-                var allDateTimeElements = this.nativeElement.getElementsByTagName("*");
-                for (var i = 0; i < allDateTimeElements.length; i++) {
-                    allDateTimeElements[i].setAttribute("tabindex", "-1");
-                }
-                displayInputElem.setAttribute("tabindex", this.tabindex);
                 return;
             }
             if (displayInputElem && this._triggeredByUser) {
@@ -28004,7 +28009,10 @@
             this.isReadOnly = this.dataentrymode != "undefined" && !this.isDataEntryModeEnabledOnInput(this.dataentrymode);
             var mobileInput = this.getMobileInput();
             if (mobileInput) {
-                mobileInput.style.width = mobileInput.parentElement.clientWidth + "px";
+                setTimeout((function() {
+                    mobileInput.style.width = "100%";
+                    mobileInput.style.height = "100%";
+                }));
             }
         };
         BaseDateTimeComponent.prototype.ngOnDestroy = function() {
@@ -28267,7 +28275,7 @@
             if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
                 event.stopPropagation();
                 var action = this.keyEventPlugin.constructor.getEventFullKey(event);
-                if (action === "enter" || action === "arrowdown") {
+                if (action === "enter") {
                     var newVal = core$1.getDateObj(event.target.value, {
                         pattern: this.datepattern
                     });
@@ -28309,7 +28317,7 @@
         type: core.Component,
         args: [ {
             selector: "[wmDate]",
-            template: '    <input class="form-control app-textbox app-dateinput display-input"\n        focus-target\n        type="text"\n        [name]="name"\n        [tabindex]="tabindex"\n        [value]="displayValue"\n        (click)="toggleDpDropdown($event, true)"\n        (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n        (blur)="onInputBlur($event)"\n        [disabled]="disabled || readonly"\n        [autofocus]="autofocus"\n        [required]="required"\n        [readOnly]="isReadOnly"\n        [attr.placeholder]="placeholder"\n        [attr.accesskey]="shortcutkey"\n        [attr.aria-label]="hint"\n        (change)="onDisplayDateChange($event)"\n        (keydown)="this._triggeredByUser = true; onDisplayKeydown($event);">\n\n    <span class="input-group-btn">\n        <button type="button"\n            class="btn btn-default btn-time"\n            [tabindex]="tabindex"\n            [disabled]="disabled || readonly"\n            [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n            aria-haspopup="true"\n            aria-expanded="false"\n            (click)="toggleDpDropdown($event, false)">\n            <i aria-hidden="true"\n                class="app-icon wm-sl-l sl-calendar"></i>\n        </button>\n    </span>\n    <div style="width: 0;display: inline-block;">\n    <input class="model-holder"\n        aria-label="datepicker dropdownmenu"\n        aria-controls="date"\n        [container]="containerTarget || \'body\'"\n        [bsConfig]="_dateOptions"\n        [isOpen]="isOpen"\n        #datepicker="bsDatepicker"\n        bsDatepicker\n        [daysDisabled]="excludedDaysToDisable"\n        [datesDisabled]="excludedDatesToDisable"\n        placement="bottom right"\n        [isDisabled]="disabled || readonly"\n        [bsValue]="bsDataValue"\n        (onShown)="onDatePickerOpen()"\n        (onHidden)="hideDatepickerDropdown()"\n        (bsValueChange)="onDateChange($event)">\n</div>\n\n<ng-template [ngIf]="loadNativeDateInput">\n    <wm-datetimepicker\n        dateTimePicker\n        mode="DATE"\n        [config]="_dateOptions"\n        [placement]="modal"\n        [excludedDaysToDisable]="excludedDaysToDisable"\n        [excludedDatesToDisable]="excludedDatesToDisable"\n        [displayFormat]="dateInputFormat"\n        [value]="bsDataValue"\n        (change)="onDateChange($event)">\n    </wm-datetimepicker>\n    <div class="mobile-input mobile-datepicker-container"\n         tabindex="1000000"\n        (focus)="onDateTimeInputFocus(true); invokeOnFocus($event);"\n        (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n        (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n    </div>\n</ng-template>\n',
+            template: '    <input class="form-control app-textbox app-dateinput display-input"\n        focus-target\n        type="text"\n        [name]="name"\n        [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n        [attr.aria-hidden]="!!loadNativeDateInput"\n        [value]="displayValue"\n        (click)="toggleDpDropdown($event, true)"\n        (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n        (blur)="onInputBlur($event)"\n        [disabled]="disabled || readonly"\n        [autofocus]="autofocus"\n        [required]="required"\n        [readOnly]="isReadOnly"\n        [attr.placeholder]="placeholder"\n        [attr.accesskey]="shortcutkey"\n        [attr.aria-label]="hint"\n        (change)="onDisplayDateChange($event)"\n        (keydown)="this._triggeredByUser = true; onDisplayKeydown($event);">\n\n    <span class="input-group-btn">\n        <button type="button"\n            class="btn btn-default btn-time"\n            [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n            [attr.aria-hidden]="!!loadNativeDateInput"\n            [disabled]="disabled || readonly"\n            [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n            aria-haspopup="true"\n            aria-expanded="false"\n            (click)="toggleDpDropdown($event, false)">\n            <i aria-hidden="true"\n                class="app-icon wm-sl-l sl-calendar"></i>\n        </button>\n    </span>\n    <div style="width: 0;display: inline-block;">\n    <input class="model-holder"\n        aria-label="datepicker dropdownmenu"\n        aria-controls="date"\n        [tabindex]="-1"\n        [attr.aria-hidden]="!!loadNativeDateInput"\n        [container]="containerTarget || \'body\'"\n        [bsConfig]="_dateOptions"\n        [isOpen]="isOpen"\n        #datepicker="bsDatepicker"\n        bsDatepicker\n        [daysDisabled]="excludedDaysToDisable"\n        [datesDisabled]="excludedDatesToDisable"\n        placement="bottom right"\n        [isDisabled]="disabled || readonly"\n        [bsValue]="bsDataValue"\n        (onShown)="onDatePickerOpen()"\n        (onHidden)="hideDatepickerDropdown()"\n        (bsValueChange)="onDateChange($event)">\n</div>\n\n<ng-template [ngIf]="loadNativeDateInput">\n    <wm-datetimepicker\n        dateTimePicker\n        mode="DATE"\n        [config]="_dateOptions"\n        [placement]="modal"\n        [excludedDaysToDisable]="excludedDaysToDisable"\n        [excludedDatesToDisable]="excludedDatesToDisable"\n        [displayFormat]="dateInputFormat"\n        [value]="bsDataValue"\n        (change)="onDateChange($event)">\n    </wm-datetimepicker>\n    <div class="mobile-input mobile-datepicker-container"\n        [tabindex]="tabindex || 0"\n        (focus)="onDateTimeInputFocus(true); invokeOnFocus($event);"\n        (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n        [attr.aria-label]="displayValue ? \'Change Date\' + displayValue : \'Choose Date\'"\n        (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n    </div>\n</ng-template>\n',
             providers: [ base.provideAs(DateComponent, forms.NG_VALUE_ACCESSOR, true), base.provideAs(DateComponent, forms.NG_VALIDATORS, true), base.provideAsWidgetRef(DateComponent) ]
         } ]
     } ];
@@ -28761,7 +28769,7 @@
         type: core.Component,
         args: [ {
             selector: "[wmDateTime]",
-            template: '    <div dropdown\n        [isOpen]="isTimeOpen"\n        autoClose="false"\n        [container]="\'body\'"\n        (onShown)="onTimepickerOpen()"\n        style="display: inherit;">\n        <input class="form-control app-textbox display-input"\n            [attr.aria-label]="hint"\n            focus-target\n            [name]="name"\n            [tabindex]="tabindex"\n            type="text"\n            [value]="displayValue"\n            (click)="toggleDpDropdown($event, true)"\n            (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n            (blur)="onInputBlur($event)"\n            (change)="onDateChange($event)"\n            [autofocus]="autofocus"\n            [disabled]="disabled || readonly || isCurrentDate"\n            [required]="required"\n            [readOnly]="isReadOnly"\n            [attr.placeholder]="placeholder"\n            [attr.accesskey]="shortcutkey"\n            (keydown)="this._triggeredByUser = true; onDisplayKeydown($event)">\n\n        <span class="input-group-btn">\n            <button type="button"\n                class="btn btn-default btn-date"\n                [tabindex]="tabindex"\n                [disabled]="disabled || readonly || isCurrentDate"\n                [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleDpDropdown($event, false)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-calendar"></i>\n            </button>\n            <button type="button"\n                class="btn btn-default btn-time"\n                [tabindex]="tabindex"\n                [disabled]="disabled || readonly || isCurrentDate"\n                aria-label="Select time"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleTimePicker(!isTimeOpen, $event)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-time"></i>\n            </button>\n        </span>\n        <div style="width: 0;display: inline-block;">\n        <input class="model-holder"\n            aria-label="datepicker dropdownmenu"\n            aria-controls="date"\n            focus-target\n            [container]="containerTarget || \'body\'"\n            [bsConfig]="_dateOptions"\n            [isOpen]="isDateOpen"\n             placement="bottom right"\n            (onShown)="onDatePickerOpen()"\n            (onHidden)="hideDatepickerDropdown()"\n            [daysDisabled]="excludedDaysToDisable"\n            [datesDisabled]="excludedDatesToDisable"\n            #datepicker=bsDatepicker\n            bsDatepicker\n            [isDisabled]="disabled || readonly || isCurrentDate"\n            [bsValue]="bsDateValue"\n            (bsValueChange)="onModelUpdate($event, \'date\')">\n    </div>\n        <div *dropdownMenu\n            class="dropdown-menu"\n            aria-label="timepicker dropdown"\n            aria-controls="time"\n            (click)="preventTpClose($event)">\n            <timepicker class="model-holder"\n                [showMeridian]="ismeridian"\n                [readonlyInput]="disabled || readonly || isCurrentDate"\n                [(ngModel)]="bsTimeValue"\n                [min]="minTime"\n                [max]="maxTime"\n                [hourStep]="hourstep"\n                [minuteStep]="minutestep"\n                [secondsStep]="secondsstep"\n                [mousewheel]="true"\n                [arrowkeys]="true"\n                (isValid)="isValid($event)"\n                [showSeconds]="showseconds"\n                (ngModelChange)="onModelUpdate($event, \'time\')"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]="loadNativeDateInput">\n    <wm-datetimepicker\n        dateTimePicker\n        [config]="_dateOptions"\n        [placement]="modal"\n        [excludedDaysToDisable]="excludedDaysToDisable"\n        [excludedDatesToDisable]="excludedDatesToDisable"\n        [displayFormat]="dateInputFormat"\n        [value]="bsDateValue"\n        (change)="onModelUpdate($event, \'date\')">\n    </wm-datetimepicker>\n    <div class="mobile-input mobile-datepicker-container"\n        tabindex="1000000"\n        (focus)="onDateTimeInputFocus(true); invokeOnFocus($event)"\n        (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n        (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n    </div>\n</ng-template>\n',
+            template: '    <div dropdown\n        [isOpen]="isTimeOpen"\n        autoClose="false"\n        [container]="\'body\'"\n        (onShown)="onTimepickerOpen()"\n        style="display: inherit;">\n        <input class="form-control app-textbox display-input"\n            [attr.aria-label]="hint"\n            focus-target\n            [name]="name"\n            [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n            [attr.aria-hidden]="!!loadNativeDateInput"\n            type="text"\n            [value]="displayValue"\n            (click)="toggleDpDropdown($event, true)"\n            (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n            (blur)="onInputBlur($event)"\n            (change)="onDateChange($event)"\n            [autofocus]="autofocus"\n            [disabled]="disabled || readonly || isCurrentDate"\n            [required]="required"\n            [readOnly]="isReadOnly"\n            [attr.placeholder]="placeholder"\n            [attr.accesskey]="shortcutkey"\n            (keydown)="this._triggeredByUser = true; onDisplayKeydown($event)">\n\n        <span class="input-group-btn">\n            <button type="button"\n                class="btn btn-default btn-date"\n                [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n                [attr.aria-hidden]="!!loadNativeDateInput"\n                [disabled]="disabled || readonly || isCurrentDate"\n                [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleDpDropdown($event, false)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-calendar"></i>\n            </button>\n            <button type="button"\n                class="btn btn-default btn-time"\n                [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n                [attr.aria-hidden]="!!loadNativeDateInput"\n                [disabled]="disabled || readonly || isCurrentDate"\n                aria-label="Select time"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleTimePicker(!isTimeOpen, $event)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-time"></i>\n            </button>\n        </span>\n        <div style="width: 0;display: inline-block;">\n        <input class="model-holder"\n            aria-label="datepicker dropdownmenu"\n            aria-controls="date"\n            focus-target\n            [tabindex]="-1"\n            [attr.aria-hidden]="!!loadNativeDateInput"\n            [container]="containerTarget || \'body\'"\n            [bsConfig]="_dateOptions"\n            [isOpen]="isDateOpen"\n             placement="bottom right"\n            (onShown)="onDatePickerOpen()"\n            (onHidden)="hideDatepickerDropdown()"\n            [daysDisabled]="excludedDaysToDisable"\n            [datesDisabled]="excludedDatesToDisable"\n            #datepicker=bsDatepicker\n            bsDatepicker\n            [isDisabled]="disabled || readonly || isCurrentDate"\n            [bsValue]="bsDateValue"\n            (bsValueChange)="onModelUpdate($event, \'date\')">\n    </div>\n        <div *dropdownMenu\n            class="dropdown-menu"\n            aria-label="timepicker dropdown"\n            aria-controls="time"\n            (click)="preventTpClose($event)">\n            <timepicker class="model-holder"\n                [showMeridian]="ismeridian"\n                [readonlyInput]="disabled || readonly || isCurrentDate"\n                [(ngModel)]="bsTimeValue"\n                [min]="minTime"\n                [max]="maxTime"\n                [hourStep]="hourstep"\n                [minuteStep]="minutestep"\n                [secondsStep]="secondsstep"\n                [mousewheel]="true"\n                [arrowkeys]="true"\n                (isValid)="isValid($event)"\n                [showSeconds]="showseconds"\n                (ngModelChange)="onModelUpdate($event, \'time\')"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]="loadNativeDateInput">\n    <wm-datetimepicker\n        dateTimePicker\n        [config]="_dateOptions"\n        [placement]="modal"\n        [excludedDaysToDisable]="excludedDaysToDisable"\n        [excludedDatesToDisable]="excludedDatesToDisable"\n        [displayFormat]="dateInputFormat"\n        [value]="bsDateValue"\n        (change)="onModelUpdate($event, \'date\')">\n    </wm-datetimepicker>\n    <div class="mobile-input mobile-datepicker-container"\n        [tabindex]="tabindex || 0"\n        (focus)="onDateTimeInputFocus(true); invokeOnFocus($event)"\n        (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n        (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n    </div>\n</ng-template>\n',
             providers: [ base.provideAs(DatetimeComponent, forms.NG_VALUE_ACCESSOR, true), base.provideAs(DatetimeComponent, forms.NG_VALIDATORS, true), base.provideAsWidgetRef(DatetimeComponent), {
                 provide: timepicker.TimepickerConfig,
                 deps: [ core$1.AbstractI18nService ],
@@ -35733,6 +35741,9 @@
                     return _this.hidePopover();
                 };
             }
+            setTimeout((function() {
+                _this.anchorRef.nativeElement.removeAttribute("aria-describedby");
+            }));
             var deRegister = this.eventManager.addEventListener(popoverContainer, "keydown.esc", (function() {
                 _this.isOpen = false;
                 _this.setFocusToPopoverLink();
@@ -35740,8 +35751,6 @@
             }));
             var popoverStartBtn = popoverContainer.querySelector(".popover-start");
             var popoverEndBtn = popoverContainer.querySelector(".popover-end");
-            popoverStartBtn.setAttribute("aria-hidden", "true");
-            popoverEndBtn.setAttribute("aria-hidden", "true");
             popoverStartBtn.onkeydown = function(event) {
                 var action = _this.keyEventPlugin.constructor.getEventFullKey(event);
                 if (action === "shift.tab") {
@@ -35765,7 +35774,6 @@
                     return _this.close();
                 };
             }
-            core.setAttr(popoverContainer, "tabindex", 0);
             setTimeout((function() {
                 return popoverStartBtn.focus();
             }), 50);
@@ -44689,9 +44697,9 @@
                 }
             }
         };
-        ListComponent.prototype.onUpdate = function(evt, ui) {
+        ListComponent.prototype.onUpdate = function(evt, ui, presentIndex) {
             var data = this.fieldDefs;
-            var newIndex = ui.item.index();
+            var newIndex = ui === undefined ? presentIndex : ui.item.index();
             var oldIndex = this.$ulEle.data("oldIndex");
             var minIndex = _.min([ newIndex, oldIndex ]);
             var maxIndex = _.max([ newIndex, oldIndex ]);
@@ -44887,8 +44895,10 @@
                 this.currentIndex = presentIndex + 1;
                 if (this.isListElementMovable) {
                     this.ariaText = "Item " + this.currentIndex + " grabbed, current position ";
+                    this.$ulEle.data("oldIndex", presentIndex);
                 } else {
                     this.ariaText = "Item " + this.currentIndex + " dropped, final position ";
+                    this.onUpdate($event, undefined, presentIndex);
                 }
             }
         };
@@ -44933,10 +44943,12 @@
                 this.dataNavigator.widget.maxResults = nv;
                 this.dataNavigator.maxResults = nv;
             } else if (key === "enablereorder") {
-                if (nv) {
+                if (nv && this.$ulEle) {
+                    this.$ulEle.attr("aria-describedby", this.titleId);
                     this.configureDnD();
                     this.$ulEle.sortable("enable");
                 } else if (this.$ulEle && !nv) {
+                    this.$ulEle.removeAttr("aria-describedby");
                     this.$ulEle.sortable("disable");
                 }
             } else {
@@ -45090,9 +45102,18 @@
                 _super.prototype.ngAfterViewInit.call(_this);
                 _this.setUpCUDHandlers();
                 _this.selectedItemWidgets = _this.multiselect ? [] : {};
+                var ele = $(_this.nativeElement).find(".app-livelist-container");
                 if (_this.enablereorder && !_this.groupby) {
+                    if (ele) {
+                        ele.attr("aria-describedby", _this.titleId);
+                    }
                     _this.configureDnD();
                 }
+                if (!_this.enablereorder) {
+                    if (ele) {
+                        ele.removeAttr("aria-describedby");
+                    }
+                }
                 if (_this.groupby && _this.collapsible) {
                     _this.handleHeaderClick = base.handleHeaderClick;
                     _this.toggleAllHeaders = base.toggleAllHeaders.bind(undefined, _this);
@@ -45102,6 +45123,16 @@
             this.setupHandlers();
             var $ul = this.nativeElement.querySelector("ul.app-livelist-container");
             base.styler($ul, this, base.APPLY_STYLES_TYPE.SCROLLABLE_CONTAINER);
+            if (this.enablereorder) {
+                if ($ul) {
+                    $ul.setAttribute("aria-describedby", this.titleId);
+                }
+            }
+            if (!this.enablereorder) {
+                if ($ul) {
+                    $ul.removeAttribute("aria-describedby");
+                }
+            }
             if (core.isMobileApp() && $ul.querySelector(".app-list-item-action-panel")) {
                 this._listAnimator = new ListAnimator(this);
             }
@@ -45126,7 +45157,7 @@
         type: core$1.Component,
         args: [ {
             selector: "div[wmList]",
-            template: '<div class="panel-heading" *ngIf="title || subheading || iconclass">\n    <h3 class="panel-title">\n        <div class="pull-left">\n            <i class="app-icon panel-icon {{iconclass}}" aria-hidden="true" [hidden]="!iconclass"></i>\n        </div>\n        <div class="pull-left">\n            <div class="heading" [innerHTML]="title"></div>\n            <div class="description" [innerHTML]="subheading"></div>\n        </div>\n    </h3>\n</div>\n\n<nav class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisablePrevious" aria-label="Page navigation" *ngIf="navigation === \'Inline\' && !noDataFound">\n    <ul class="pager">\n        <li class="previous" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisablePrevious : true)}">\n            <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'prev\', $event)"\n               [attr.aria-disabled]="dataNavigator.isDisablePrevious">\n                <i class="wi wi-chevron-left" aria-hidden="true"></i>\n                <span class="sr-only">Go to Previous page {{dataNavigator.isDisablePrevious ? \', Disabled\' : \'\'}}</span>\n            </a>\n        </li>\n    </ul>\n</nav>\n<div *ngIf="navigation === \'Inline\' && !noDataFound" aria-live="polite" aria-atomic="true" class="sr-only"> {{\'Page \' + dataNavigator.dn.currentPage + \' of \' + dataNavigator.pageCount }}</div>\n\n<div>\n    <div id={{titleId}} class="sr-only" *ngIf="enablereorder">\n        Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n\n    <div aria-live="assertive" *ngIf="listItems && enablereorder && currentIndex" class="sr-only" >\n        {{ariaText + currentIndex + \' of \' +  listItems.length}}\n    </div>\n</div>\n\n<ul [attr.tabindex]="tabindex" [attr.aria-describedby] = "titleId"  class="app-livelist-container clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}} {{listclass}}" role="list"\n    (keydown.enter)="handleKeyDown($event, \'select\')"\n\n    (keydown.space)="handleKeyDown($event, \'space\')"\n\n    (keydown.arrowup)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowdown)="handleKeyDown($event, \'focusNext\')"\n    (keydown.arrowleft)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowright)="handleKeyDown($event, \'focusNext\')"\n\n    (keydown.shift.arrowup)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowdown)="handleKeyDown($event, \'selectNext\')"\n    (keydown.shift.arrowleft)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowright)="handleKeyDown($event, \'selectNext\')"\n    [hidden]="noDataFound && !variableInflight"\n>\n    <ng-template [ngIf]="!groupby" [ngIfElse]="groupedListTemplate">\n        <li *ngFor="let item of fieldDefs; index as $index; first as $first; last as $last;" class="app-list-item {{direction === \'horizontal\' ? \'\' : itemsPerRowClass}}" [ngClass]="listItemRef.itemClass"\n            [wmListItem]="item"\n            #listItemRef="listItemRef"\n            [attr.tabindex]="tabindex"\n            role="listitem">\n            <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n        </li>\n    </ng-template>\n    <ng-container [ngTemplateOutlet]="listLeftActionTemplate"></ng-container>\n    <ng-container [ngTemplateOutlet]="listRightActionTemplate"></ng-container>\n</ul>\n\n<div class="no-data-msg" *ngIf="noDataFound && !variableInflight" [textContent]="nodatamessage"></div>\n\n<div class="loading-data-msg" *ngIf="variableInflight && !pulltorefresh">\n    <span>\n        <i class="app-icon panel-icon fa-spin" aria-hidden="true" [ngClass]="loadingicon"></i>\n        <span class="sr-only">Loading</span>\n        <span class="loading-text" [textContent]="loadingdatamsg"></span>\n    </span>\n</div>\n\n<nav class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisableNext" *ngIf="navigation === \'Inline\' && !noDataFound">\n    <ul class="pager">\n        <li class="next" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisableNext  : true)}">\n            <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'next\', $event)"\n               [attr.aria-disabled]="dataNavigator.isDisableNext">\n                <i class="wi wi-chevron-right" aria-hidden="true"></i>\n                <span class="sr-only">Go to Next page {{dataNavigator.isDisableNext ? \', Disabled\' : \'\'}}</span>\n            </a>\n        </li>\n    </ul>\n</nav>\n\n<div class="panel-footer" *ngIf="navigation !== \'None\'" [hidden]="!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator.dataSize <= pagesize) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)">\n    <nav wmPagination\n         navigationalign.bind="navigationalign"\n         navigation.bind="navControls"\n         showrecordcount.bind="showrecordcount"\n         maxsize.bind="maxsize"\n         boundarylinks.bind="boundarylinks"\n         forceellipses.bind="forceellipses"\n         directionlinks.bind="directionlinks"\n         show.bind="!onDemandLoad"\n         paginationchange.event="beforePaginationChange($event, $index)"\n    ></nav>\n    <a *ngIf="onDemandLoad" href="javascript:void(0);"\n       (click)="dataNavigator.navigatePage(\'next\', $event)"\n       class="app-button btn btn-block"\n       [ngClass]="paginationclass"\n       [textContent]="ondemandmessage"\n    ></a>\n</div>\n\n\x3c!--This template will be displayed when groupby is specified--\x3e\n<ng-template #groupedListTemplate>\n    <li *ngFor="let groupObj of groupedData" class="app-list-item-group clearfix">\n        <ul [attr.tabindex]="tabindex" class="list-group item-group" [ngClass]="listclass">\n            <li class="app-list-item-header list-item list-group-header" (click)="handleHeaderClick($event)" [ngClass]="{\'collapsible-content\': collapsible}">\n            <h4>{{groupObj.key}}\n                <div class="header-action">\n                    <i class="app-icon wi action wi-chevron-up" *ngIf="collapsible"></i>\n                    <span *ngIf="showcount" class="label label-default">{{groupObj.data.length}}</span>\n                    </div>\n                </h4>\n            </li>\n            <ul class="list-group clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}}">\n                <li *ngFor="let item of groupObj.data; index as $index; first as $first; last as $last;" [attr.tabindex]="tabindex"\n                    class="app-list-item group-list-item {{itemsPerRowClass}}"\n                    [ngClass]="listItemRef.itemClass"\n                    [wmListItem]="item" #listItemRef="listItemRef">\n                    <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n                </li>\n            </ul>\n        </ul>\n    </li>\n</ng-template>\n',
+            template: '<div class="panel-heading" *ngIf="title || subheading || iconclass">\n    <h3 class="panel-title">\n        <div class="pull-left">\n            <i class="app-icon panel-icon {{iconclass}}" aria-hidden="true" [hidden]="!iconclass"></i>\n        </div>\n        <div class="pull-left">\n            <div class="heading" [innerHTML]="title"></div>\n            <div class="description" [innerHTML]="subheading"></div>\n        </div>\n    </h3>\n</div>\n\n<div class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisablePrevious" aria-label="Page navigation" *ngIf="navigation === \'Inline\' && !noDataFound">\n    <ul class="pager">\n        <li class="previous" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisablePrevious : true)}">\n            <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'prev\', $event)"\n               [attr.aria-disabled]="dataNavigator.isDisablePrevious">\n                <i class="wi wi-chevron-left" aria-hidden="true"></i>\n                <span class="sr-only">Go to Previous page {{dataNavigator.isDisablePrevious ? \', Disabled\' : \'\'}}</span>\n            </a>\n        </li>\n    </ul>\n</div>\n<div *ngIf="navigation === \'Inline\' && !noDataFound" aria-live="polite" aria-atomic="true" class="sr-only"> {{\'Page \' + dataNavigator.dn.currentPage + \' of \' + dataNavigator.pageCount }}</div>\n\n<div>\n    <div id={{titleId}} class="sr-only" *ngIf="enablereorder">\n        Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n\n    <div aria-live="assertive" *ngIf="listItems && enablereorder && currentIndex" class="sr-only" >\n        {{ariaText + currentIndex + \' of \' +  listItems.length}}\n    </div>\n</div>\n\n<ul [attr.tabindex]="tabindex"  class="app-livelist-container clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}} {{listclass}}" role="list"\n    (keydown.enter)="handleKeyDown($event, \'select\')"\n\n    (keydown.space)="handleKeyDown($event, \'space\')"\n\n    (keydown.arrowup)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowdown)="handleKeyDown($event, \'focusNext\')"\n    (keydown.arrowleft)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowright)="handleKeyDown($event, \'focusNext\')"\n\n    (keydown.shift.arrowup)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowdown)="handleKeyDown($event, \'selectNext\')"\n    (keydown.shift.arrowleft)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowright)="handleKeyDown($event, \'selectNext\')"\n    [hidden]="noDataFound && !variableInflight"\n>\n    <ng-template [ngIf]="!groupby" [ngIfElse]="groupedListTemplate">\n        <li *ngFor="let item of fieldDefs; index as $index; first as $first; last as $last;" class="app-list-item {{direction === \'horizontal\' ? \'\' : itemsPerRowClass}}" [ngClass]="listItemRef.itemClass"\n            [wmListItem]="item"\n            #listItemRef="listItemRef"\n            [attr.tabindex]="tabindex"\n            role="listitem">\n            <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n        </li>\n    </ng-template>\n    <ng-container [ngTemplateOutlet]="listLeftActionTemplate"></ng-container>\n    <ng-container [ngTemplateOutlet]="listRightActionTemplate"></ng-container>\n</ul>\n\n<div class="no-data-msg" *ngIf="noDataFound && !variableInflight" [textContent]="nodatamessage"></div>\n\n<div class="loading-data-msg" *ngIf="variableInflight && !pulltorefresh">\n    <span>\n        <i class="app-icon panel-icon fa-spin" aria-hidden="true" [ngClass]="loadingicon"></i>\n        <span class="sr-only">Loading</span>\n        <span class="loading-text" [textContent]="loadingdatamsg"></span>\n    </span>\n</div>\n\n<div class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisableNext" *ngIf="navigation === \'Inline\' && !noDataFound">\n    <ul class="pager">\n        <li class="next" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisableNext  : true)}">\n            <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'next\', $event)"\n               [attr.aria-disabled]="dataNavigator.isDisableNext">\n                <i class="wi wi-chevron-right" aria-hidden="true"></i>\n                <span class="sr-only">Go to Next page {{dataNavigator.isDisableNext ? \', Disabled\' : \'\'}}</span>\n            </a>\n        </li>\n    </ul>\n</div>\n\n<div class="panel-footer" *ngIf="navigation !== \'None\'" [hidden]="!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator.dataSize <= pagesize) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)">\n    <nav wmPagination\n         navigationalign.bind="navigationalign"\n         navigation.bind="navControls"\n         showrecordcount.bind="showrecordcount"\n         maxsize.bind="maxsize"\n         boundarylinks.bind="boundarylinks"\n         forceellipses.bind="forceellipses"\n         directionlinks.bind="directionlinks"\n         show.bind="!onDemandLoad"\n         paginationchange.event="beforePaginationChange($event, $index)"\n    ></nav>\n    <a *ngIf="onDemandLoad" href="javascript:void(0);"\n       (click)="dataNavigator.navigatePage(\'next\', $event)"\n       class="app-button btn btn-block"\n       [ngClass]="paginationclass"\n       [textContent]="ondemandmessage"\n    ></a>\n</div>\n\n\x3c!--This template will be displayed when groupby is specified--\x3e\n<ng-template #groupedListTemplate>\n    <li *ngFor="let groupObj of groupedData" class="app-list-item-group clearfix">\n        <ul [attr.tabindex]="tabindex" class="list-group item-group" [ngClass]="listclass">\n            <li class="app-list-item-header list-item list-group-header" (click)="handleHeaderClick($event)" [ngClass]="{\'collapsible-content\': collapsible}">\n            <h4>{{groupObj.key}}\n                <div class="header-action">\n                    <i class="app-icon wi action wi-chevron-up" *ngIf="collapsible"></i>\n                    <span *ngIf="showcount" class="label label-default">{{groupObj.data.length}}</span>\n                    </div>\n                </h4>\n            </li>\n            <ul class="list-group clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}}">\n                <li *ngFor="let item of groupObj.data; index as $index; first as $first; last as $last;" [attr.tabindex]="tabindex"\n                    class="app-list-item group-list-item {{itemsPerRowClass}}"\n                    [ngClass]="listItemRef.itemClass"\n                    [wmListItem]="item" #listItemRef="listItemRef">\n                    <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n                </li>\n            </ul>\n        </ul>\n    </li>\n</ng-template>\n',
             providers: [ base.provideAsWidgetRef(ListComponent) ]
         } ]
     } ];
@@ -71551,11 +71582,11 @@
             }
         };
         NotificationActionManager.prototype.notifyViaDialog = function(variable, options) {
-            var commonPageDialogId = "Common" + _.capitalize(variable.operation) + "Dialog", variableOwner = variable.owner, dialogId = variableOwner === VARIABLE_CONSTANTS.OWNER.APP ? commonPageDialogId : "notification" + variable.operation + "dialog";
+            var commonPageDialogId = "Common" + _.capitalize(variable.operation) + "Dialog", dialogId = commonPageDialogId;
             var closeCallBackFn = function() {
                 return initiateCallback("onOk", variable, options.data);
             };
-            exports.dialogService.open(dialogId, variable._context, {
+            exports.dialogService.open(dialogId, undefined, {
                 notification: {
                     title: options.title || variable.dataBinding.title,
                     text: options.message || variable.dataBinding.text,
@@ -71563,11 +71594,11 @@
                     cancelButtonText: options.cancelButtonText || variable.dataBinding.cancelButtonText || "CANCEL",
                     alerttype: options.alerttype || variable.dataBinding.alerttype || "information",
                     onOk: function() {
-                        exports.dialogService.close(dialogId, variable._context, closeCallBackFn);
+                        exports.dialogService.close(dialogId, undefined, closeCallBackFn);
                     },
                     onCancel: function() {
                         initiateCallback("onCancel", variable, options.data);
-                        exports.dialogService.close(dialogId, variable._context);
+                        exports.dialogService.close(dialogId, undefined);
                     },
                     onClose: function() {
                         initiateCallback("onClose", variable, options.data);
@@ -73002,6 +73033,13 @@
             type: core.AbstractHttpService
         } ];
     };
+    var Formatter = function() {
+        function Formatter() {}
+        Formatter.prototype.format = function(value, format) {
+            return exports.appManager.getPipe("date").transform(value, format);
+        };
+        return Formatter;
+    }();
     var VariablesService = function() {
         function VariablesService(httpService, metadataService, navigationService, routerService, toasterService, oAuthService, securityService, dialogService) {
             this.httpService = httpService;
@@ -73108,6 +73146,7 @@
                 if (this.isVariableSeperated(variablesJson, variableName)) {
                     this.processBinding(varInstance, scope, "dataBinding", this.getBindSourceTarget(varInstance));
                     varInstance.httpService = this.httpService;
+                    varInstance.dateFormatter = new Formatter;
                     varInstance.subscribe("afterInvoke", (function() {
                         return core.$invokeWatchers(true);
                     }));
@@ -73197,6 +73236,7 @@
     exports.DB_CONSTANTS = DB_CONSTANTS;
     exports.DeviceVariableManager = DeviceVariableManager;
     exports.DeviceVariableService = DeviceVariableService;
+    exports.Formatter = Formatter;
     exports.MetadataService = MetadataService;
     exports.SWAGGER_CONSTANTS = SWAGGER_CONSTANTS;
     exports.VARIABLE_CONSTANTS = VARIABLE_CONSTANTS;