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

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

@@ -3012,11 +3012,15 @@
     var isIos = function() {
         return isIphone() || isIpod() || isIpad();
     };
-    var isLargeTabletLandscape = function() {
-        return window.matchMedia("only screen and (min-device-width : 1366px) and (max-device-width : 1366px) and (min-device-height : 1024px) and (max-device-height : 1024px) and (min-width: 1366px) and (max-width: 1366px)").matches;
+    var isLargeTabletLandscape = function(landScapeWidth, landScapeHeight) {
+        var width = landScapeWidth || "1366px";
+        var height = landScapeHeight || "1024px";
+        return window.matchMedia("only screen and (min-device-width : " + width + ") and (max-device-width : " + width + ") and (min-device-height : " + height + ") and (max-device-height : " + height + ") and (min-width: " + width + ") and (max-width: " + width + ")").matches;
     };
-    var isLargeTabletPortrait = function() {
-        return window.matchMedia("only screen and (min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1024px) and (max-width: 1024px)").matches;
+    var isLargeTabletPortrait = function(landScapeWidth, landScapeHeight) {
+        var height = landScapeWidth || "1366px";
+        var width = landScapeHeight || "1024px";
+        return window.matchMedia("only screen and (min-device-width : " + width + ") and (max-device-width : " + width + ") and (min-device-height : " + height + ") and (max-device-height : " + height + ") and (min-width: " + width + ") and (max-width: " + width + ")").matches;
     };
     var isMobile = function() {
         return isAndroid() || isIos() || isAndroidTablet() || $("#wm-mobile-display:visible").length > 0;
@@ -4466,6 +4470,8 @@
                     this.isMobileType = true;
                 }
             } 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) {
                     this.type = 1;
                     if (isAndroid() || isIos() || isAndroidTablet()) {
@@ -5052,7 +5058,12 @@
                 fieldDefs = [];
                 parent.gridOptions.setCurrentPage(1);
             }
-            var currentPage = parent.currentPage;
+            var currentPage;
+            if (parent.widgetType === "wm-table") {
+                currentPage = parent.gridOptions.showviewlessbutton && parent.gridOptions.mode === "viewless" ? parent.gridOptions.getCurrentPage() : parent.currentPage;
+            } else {
+                currentPage = parent.currentPage;
+            }
             var dataNavigator = parent.dataNavigator;
             var pagesize = parent.pagesize;
             if (!isDefined(fieldDefs) || dataNavigator.isFirstPage()) {
@@ -8652,6 +8663,16 @@
         var routeRegex = new RegExp("^(#/|#)" + routeName + "$");
         return routeRegex.test(link);
     };
+    var hasLinkToCurrentPage = function(nodes, routeUrl) {
+        return nodes.some((function(node) {
+            if (isActiveNavItem(node.link, routeUrl)) {
+                return true;
+            }
+            if (node.children) {
+                return hasLinkToCurrentPage(node.children, routeUrl);
+            }
+        }));
+    };
     var getOrderByExpr = function(pageableObj) {
         pageableObj = pageableObj || [];
         var expressions = [], KEY_VAL_SEPARATOR = " ", FIELD_SEPARATOR = ",";
@@ -8958,9 +8979,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) {
@@ -10367,7 +10390,18 @@
             configurable: true
         });
         ShowInDeviceDirective.prototype.onResize = function($event) {
-            if (this.devices.indexOf("lg") > -1 && window.matchMedia("(min-width: 1200px)").matches && !core$1.isLargeTabletLandscape() || this.devices.indexOf("md") > -1 && (core$1.isLargeTabletLandscape() || window.matchMedia("(min-width: 992px) and (max-width: 1199px)").matches && !core$1.isLargeTabletPortrait()) || this.devices.indexOf("sm") > -1 && (window.matchMedia("(min-width: 768px) and (max-width: 991px)").matches || core$1.isLargeTabletPortrait()) || this.devices.indexOf("xs") > -1 && window.matchMedia("(max-width: 767px)").matches || this.devices.indexOf("all") > -1) {
+            var lgWidth = getComputedStyle(document.documentElement).getPropertyValue("--screen-lg") || "1200px";
+            var mdWidth = getComputedStyle(document.documentElement).getPropertyValue("--screen-md") || "992px";
+            var smWidth = getComputedStyle(document.documentElement).getPropertyValue("--screen-sm") || "768px";
+            var lgTabLandScapeWidth = getComputedStyle(document.documentElement).getPropertyValue("--screen-lg-tab-landscape") || "1366px";
+            var lgTabPortraitWidth = getComputedStyle(document.documentElement).getPropertyValue("--screen-lg-tab-portrait") || "1024px";
+            var lgWidthMin = parseFloat(lgWidth) - 1;
+            var lgUnit = lgWidthMin + "px";
+            var mdWidthMin = parseFloat(mdWidth) - 1;
+            var mdUnit = mdWidthMin + "px";
+            var smWidthMin = parseFloat(smWidth) - 1;
+            var smUnit = smWidthMin + "px";
+            if (this.devices.indexOf("lg") > -1 && window.matchMedia("(min-width: " + lgWidth + ")").matches && !core$1.isLargeTabletLandscape(lgTabLandScapeWidth, lgTabPortraitWidth) || this.devices.indexOf("md") > -1 && (core$1.isLargeTabletLandscape(lgTabLandScapeWidth, lgTabPortraitWidth) || window.matchMedia("(min-width: " + mdWidth + ") and (max-width: " + lgUnit + ")").matches && !core$1.isLargeTabletPortrait(lgTabLandScapeWidth, lgTabPortraitWidth)) || this.devices.indexOf("sm") > -1 && (window.matchMedia("(min-width: " + smWidth + ") and (max-width: " + mdUnit + ")").matches || core$1.isLargeTabletPortrait(lgTabLandScapeWidth, lgTabPortraitWidth)) || this.devices.indexOf("xs") > -1 && window.matchMedia("(max-width: " + smUnit + ")").matches || this.devices.indexOf("all") > -1) {
                 if (!this.embeddedView) {
                     this.embeddedView = this.viewContainerRef.createEmbeddedView(this.templateRef, this.context);
                 }
@@ -11214,6 +11248,10 @@
             if (openedDialogs.indexOf(ref) !== -1) {
                 openedDialogs.splice(openedDialogs.indexOf(ref), 1);
             }
+            if (openedDialogs.length === 0 && (core$1.isMobile() || core$1.isMobileApp())) {
+                var parentSelector = $("body > app-root")[0];
+                parentSelector.removeAttribute("aria-hidden");
+            }
         };
         DialogServiceImpl.prototype.getOpenedDialogs = function() {
             return openedDialogs;
@@ -12389,7 +12427,8 @@
         mindate: "mindate",
         maxdate: "maxdate",
         excludedates: "excludedates",
-        excludedays: "excludedays"
+        excludedays: "excludedays",
+        invalidNumber: "invalidNumber"
     };
     var BaseFieldValidations = function() {
         function BaseFieldValidations(instance, formwidget, widgettype, widgetControl, widgetContext, tableFieldType) {
@@ -13022,6 +13061,7 @@
     exports.getWidgetPropsByType = getWidgetPropsByType;
     exports.groupData = groupData;
     exports.handleHeaderClick = handleHeaderClick;
+    exports.hasLinkToCurrentPage = hasLinkToCurrentPage;
     exports.interpolateBindExpressions = interpolateBindExpressions;
     exports.isActiveNavItem = isActiveNavItem;
     exports.isBooleanAttr = isBooleanAttr;
@@ -13419,21 +13459,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() {
@@ -14199,7 +14237,7 @@
                 var eventsTmpl = widgetType === core.FormWidgetType.UPLOAD ? "" : getEventsTemplate(attrs);
                 var controlLayout = core.isMobileApp() ? "col-xs-12" : "col-sm-12";
                 var isInList = pCounter === (parentList && parentList.get("parent_form_reference"));
-                attrs.set("__errormsg", formFieldErrorMsgId);
+                attrs.set("__validationId", formFieldErrorMsgId);
                 attrs.set("__widgetType", widgetType);
                 attrs.delete("widget");
                 shared.set("counter", counter);
@@ -15039,7 +15077,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 : "");
                 }
@@ -15050,7 +15088,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 + ">";
             }
         };
     }));
@@ -16414,7 +16452,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;
@@ -23140,346 +23178,435 @@
             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: false
+                    },
+                    key: {
+                        children: "children",
+                        name: "label"
+                    }
+                },
+                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 "levels":
+                if (nv > 0) {
+                    this.level = nv;
+                }
+                this.renderTree();
+                break;
+
+              case "treeicons":
+                this.treeicon = nv;
                 this.renderTree();
                 break;
 
-              case "nodeicon":
               case "nodelabel":
+                this.setting.data.key.name = this.labelKey;
+                this.renderTree();
+                break;
+
               case "nodechildren":
-              case "orderby":
+                this.setting.data.key.children = this.childrenKey;
                 this.renderTree();
                 break;
 
-              case "treeicons":
-                this.changeTreeIcons(nv, ov);
+              case "nodeicon":
+                this.nodeicon = this.iconKey;
+                this.renderTree();
                 break;
 
-              case "datavalue":
-                this.selectById(nv);
+              case "orderby":
+                this.renderTree();
+                break;
+
+              case "class":
+                this.treeClass = nv;
+                this.renderTree();
                 break;
 
               default:
                 _super.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) {
+                var children = _this.getChildren(childNode);
+                if (children && !("open" in childNode) && childLevel < level) {
+                    childNode["open"] = true;
+                    _this.expandTree(level, children, childLevel + 1);
                 } else {
-                    if (!nodeIcon) {
-                        $iconNode.addClass("leaf-node");
-                    }
-                    $li.addClass("leaf-node");
+                    childLevel = 0;
+                    return;
                 }
             }));
         };
-        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()
                 };
             }));
         };
-        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);
+        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) {
+                $(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[this.labelKey] + path;
+            } else {
+                path = this.getPath(treeNode.getParentNode(), path) + "/" + treeNode[this.labelKey];
+            }
+            return path;
+        };
+        TreeComponent.prototype.onClick = function(event, treeId, treeNode, clickFlag) {
+            if (this.nodeclick === "expand") {
+                var nodes = this.treeObj.getSelectedNodes();
+                if (nodes.length > 0) {
+                    this.expandNode(nodes[0], !nodes[0].open, true);
+                }
+            }
+            var path = this.getPath(treeNode, "");
             var eventParams = {
-                $event: $event,
-                $item: $li.data("nodedata"),
+                $event: event,
+                $item: treeNode,
                 $path: path
             };
-            if ($i.hasClass("collapsed")) {
-                $i.removeClass("collapsed " + treeIcons.collapsed).addClass("expanded " + treeIcons.expanded);
-                $li.removeClass("collapsed").addClass("expanded");
-                this.invokeEventCallback("expand", eventParams);
-            } else if ($i.hasClass("expanded")) {
-                $i.removeClass("expanded " + treeIcons.expanded).addClass("collapsed " + treeIcons.collapsed);
-                $li.removeClass("expanded").addClass("collapsed");
-                this.invokeEventCallback("collapse", eventParams);
-            }
+            this.setSelectedItem(treeNode);
+            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);
+            var children = this.getChildren(treeNode);
+            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).on("click", (function(e) {
+                        setTimeout((function() {
+                            $(ele_1).addClass(self.treeicon || defaultTreeIconClass);
+                        }), 0);
+                    }));
+                }
+            }));
+        };
+        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.getChildren = function(node) {
+            return node[this.childrenKey];
         };
-        TreeDirective.prototype.renderTree = function(forceRender) {
+        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) {
             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);
-                }));
-                this.selecteditem = core.getClonedObject(data) || {};
-                this.selecteditem.path = path;
-                this.invokeEventCallback("select", {
-                    $event: undefined,
-                    $item: data,
-                    $path: path
-                });
-                core.$appDigest();
-            }
+            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);
+                }
+            }));
         };
-        TreeDirective.prototype.selectNode = function(evt, value) {
+        TreeComponent.prototype.setNodeChildren = function(nodes, depth, level, parentNode) {
             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) || {};
+            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);
+                    }
                 }
-            } else {
-                this.datavalue = value;
             }
-            if (nodeAction) {
-                core.$parseEvent(nodeAction)(this);
+            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;
+                }
             }
-            this.invokeEventCallback("select", {
-                $event: evt,
-                $item: data,
-                $path: path
-            });
-            core.$appDigest();
+            return count;
         };
-        TreeDirective.prototype.bindEvents = function() {
-            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);
+        TreeComponent.prototype.renderTree = function() {
+            if (this.nodes) {
+                this.nativeElement.setAttribute("id", this.name);
+                if (this.nodeicon && this.nodeicon !== "icon") {
+                    this.modifyObjects(this.nodes);
                 }
-                if (target.is("i") || target.is("span.title") && _this.nodeclick === "expand") {
-                    _this.toggleExpandCollapseNode(evt, $i, li);
+                this.setTreeTemplate(this.treeClass);
+                if (this.nodelabel) {
+                    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);
         };
-        TreeDirective.prototype.findSelectedNodeParent = function($li) {
-            return $li.find("> span.title").parents(".app-tree li");
+        TreeComponent.prototype.setSelectedItem = function(treeNode) {
+            this.selecteditem = core.getClonedObject(treeNode) || {};
+            this.selecteditem.path = this.getPath(treeNode, "");
+            var deSelectElm = $("li[treenode].selected");
+            deSelectElm.removeClass("selected");
+            var selectElm = $("#" + treeNode.tId + ":has(.curSelectedNode)");
+            selectElm.addClass("selected");
         };
-        TreeDirective.prototype.selectById = function(value) {
-            this.selectNode(undefined, value);
+        TreeComponent.prototype.expandNode = function(node, expand, eventFlag) {
+            this.treeObj.expandNode(node, expand, false, false, eventFlag);
+            var el = $("#" + node.tId + "_switch");
+            $(el).addClass(this.treeicon || defaultTreeIconClass);
         };
-        TreeDirective.prototype.deselectById = function(value) {
-            this.selecteditem = {};
-            this.selectById();
+        TreeComponent.prototype.ngAfterViewInit = 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];
+                        }
+                    }
+                    if (_this.datavalue === "LastNode") {
+                        if (nodes.length) {
+                            selectNode = nodes[nodes.length - 1];
+                        }
+                    }
+                    _this.treeObj.selectNode(selectNode, false);
+                    _this.setSelectedItem(selectNode);
+                    _this.expandNode(selectNode, true, false);
+                }
+            }), 200);
         };
-        return TreeDirective;
+        return TreeComponent;
     }(base.StylableComponent);
-    TreeDirective.initializeProps = registerProps();
-    TreeDirective.decorators = [ {
-        type: core$1.Directive,
+    TreeComponent.initializeProps = registerProps();
+    TreeComponent.decorators = [ {
+        type: core$1.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$1.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" ]
-            } ]
         } ];
     };
-    var components = [ TreeDirective ];
+    var components = [ TreeComponent ];
     var TreeModule = function() {
         function TreeModule() {}
         return TreeModule;
@@ -23493,7 +23620,7 @@
             entryComponents: []
         } ]
     } ];
-    exports.TreeDirective = TreeDirective;
+    exports.TreeComponent = TreeComponent;
     exports.TreeModule = TreeModule;
     exports["\u0275a"] = registerProps;
     Object.defineProperty(exports, "__esModule", {
@@ -26903,22 +27030,24 @@
             configurable: true
         });
         DateTimePickerComponent.prototype.validateSelectedDate = function() {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e;
             if (!this.changedValue) {
                 return true;
             }
             var cd = moment(this.changedValue);
-            if (((_a = this._bsDatepickerConfig) === null || _a === void 0 ? void 0 : _a.minDate) && ((_b = this._bsDatepickerConfig) === null || _b === void 0 ? void 0 : _b.minDate) > this.changedValue) {
+            var minDate = (_a = this._bsDatepickerConfig) === null || _a === void 0 ? void 0 : _a.minDate;
+            var maxDate = (_b = this._bsDatepickerConfig) === null || _b === void 0 ? void 0 : _b.maxDate;
+            if (minDate && (this.mode === "DATE" && moment(minDate).startOf("day").toDate() > this.changedValue || this.mode !== "DATE" && minDate > this.changedValue)) {
                 return false;
             }
-            if (((_c = this._bsDatepickerConfig) === null || _c === void 0 ? void 0 : _c.maxDate) && ((_d = this._bsDatepickerConfig) === null || _d === void 0 ? void 0 : _d.maxDate) < this.changedValue) {
+            if (maxDate && (this.mode === "DATE" && moment(maxDate).endOf("day").toDate() < this.changedValue || this.mode !== "DATE" && maxDate < this.changedValue)) {
                 return false;
             }
-            if (((_f = (_e = this._bsDatepickerConfig) === null || _e === void 0 ? void 0 : _e.daysDisabled) === null || _f === void 0 ? void 0 : _f.indexOf(cd.day())) >= 0) {
+            if (((_d = (_c = this._bsDatepickerConfig) === null || _c === void 0 ? void 0 : _c.daysDisabled) === null || _d === void 0 ? void 0 : _d.indexOf(cd.day())) >= 0) {
                 return false;
             }
             var cdSt = cd.startOf("day").toDate().getTime();
-            if ((_g = this.excludedDatesToDisable) === null || _g === void 0 ? void 0 : _g.find((function(d) {
+            if ((_e = this.excludedDatesToDisable) === null || _e === void 0 ? void 0 : _e.find((function(d) {
                 return d.getTime() === cdSt;
             }))) {
                 return false;
@@ -26967,6 +27096,9 @@
                 newVal.setMilliseconds(oldVal.getMilliseconds());
             }
             this.changedValue = newVal;
+            if (this.mode === "DATE" && oldVal !== newVal && this.validateSelectedDate()) {
+                this.onOkClick();
+            }
         };
         DateTimePickerComponent.prototype.onTimeUpdate = function(newVal) {
             this.changedValue = newVal;
@@ -26988,6 +27120,10 @@
             this.triggerChange();
             this.hideModal();
         };
+        DateTimePickerComponent.prototype.setToday = function() {
+            var today = moment().startOf("day").toDate();
+            this.onDateUpdate(today);
+        };
         DateTimePickerComponent.prototype.reset = function() {
             this.changedValue = this._value;
         };
@@ -27022,7 +27158,7 @@
         type: core.Component,
         args: [ {
             selector: "wm-datetimepicker",
-            template: ' \n    <ng-template #datetimepickerTemplate>\n        <div class="app-datetime-picker">\n            <div class="modal-body">\n                <div class="mobile-datetime-picker-options">\n                    \n                </div>\n                <bs-datepicker-inline\n                    [bsConfig]="bsDatepickerConfig"\n                    [datesDisabled]="excludedDatesToDisable"\n                    bsDatepicker\n                    [bsValue]="changedValue"\n                    (bsValueChange)="onDateUpdate($event)"\n                    *ngIf="mode === \'DATE_TIME\' || mode === \'DATE\'">\n                </bs-datepicker-inline>\n                <wm-timepicker\n                    [value]="changedValue"\n                    [min]="minTime"\n                    [max]="maxTime"\n                    (change)="onTimeUpdate($event)"\n                    *ngIf="mode === \'DATE_TIME\' || mode === \'TIME\'"></wm-timepicker>\n                <span class="text-primary date-picker-value">\n                    {{getDateLabel()}}\n                </span>\n            </div>\n            <div class="modal-footer">\n                <button\n                    class="btn btn-secondary clear-btn"\n                    (click)="clear()">{{appLocale.MESSAGE_DATE_PICKER_CLEAR || "Clear" }}</button>\n                <button\n                    class="btn btn-primary pull-right ok-btn"\n                    (click)="onOkClick()">{{appLocale.MESSAGE_DATE_PICKER_OK || "Ok" }}</button>\n                <button\n                    class="btn btn-secondary pull-right cancel-btn"\n                    (click)="hideModal()">{{appLocale.MESSAGE_DATE_PICKER_CANCEL || "Cancel" }}</button>\n                \n            </div>\n        </div>\n    </ng-template>\n    '
+            template: ' \n    <ng-template #datetimepickerTemplate>\n        <div class="app-datetime-picker">\n            <div class="modal-body">\n                <div class="mobile-datetime-picker-options">\n                    \n                </div>\n                <bs-datepicker-inline\n                    [bsConfig]="bsDatepickerConfig"\n                    [datesDisabled]="excludedDatesToDisable"\n                    bsDatepicker\n                    [bsValue]="changedValue"\n                    (bsValueChange)="onDateUpdate($event)"\n                    *ngIf="mode === \'DATE_TIME\' || mode === \'DATE\'">\n                </bs-datepicker-inline>\n                <wm-timepicker\n                    [value]="changedValue"\n                    [min]="minTime"\n                    [max]="maxTime"\n                    (change)="onTimeUpdate($event)"\n                    *ngIf="mode === \'DATE_TIME\' || mode === \'TIME\'"></wm-timepicker>\n                <span class="text-primary date-picker-value">\n                    {{getDateLabel()}}\n                </span>\n            </div>\n            <div class="modal-footer">\n                <button\n                    *ngIf="mode === \'DATE_TIME\' || mode === \'DATE\'"\n                    class="btn btn-secondary today-btn"\n                    (click)="setToday()">{{appLocale.MESSAGE_DATE_PICKER_TODAY || "Today" }}</button>\n                <button\n                    class="btn btn-primary pull-right ok-btn"\n                    *ngIf="mode === \'DATE_TIME\' || mode === \'TIME\'"\n                    (click)="onOkClick()">{{appLocale.MESSAGE_DATE_PICKER_OK || "Ok" }}</button>\n                <button\n                    class="btn btn-secondary pull-right clear-btn"\n                    (click)="clear()">{{appLocale.MESSAGE_DATE_PICKER_CLEAR || "Clear" }}</button>\n            </div>\n        </div>\n    </ng-template>\n    '
         } ]
     } ];
     DateTimePickerComponent.ctorParameters = function() {
@@ -27105,8 +27241,8 @@
             }
             return arr;
         };
-        TimePickerComponent.prototype.set = function(_h, unit) {
-            var index = _h.index, value = _h.value;
+        TimePickerComponent.prototype.set = function(_f, unit) {
+            var index = _f.index, value = _f.value;
             if (unit === "HOUR") {
                 this.value = moment(this.value).hour(parseInt(value)).toDate();
             } else if (unit === "MINUTE") {
@@ -27371,6 +27507,7 @@
         };
         BaseDateTimeComponent.prototype.setActiveDateFocus = function(newDate, isMouseEvent) {
             var _this = this;
+            this.setNextData(newDate);
             var activeMonth = this.activeDate.getMonth();
             if (!isMouseEvent) {
                 if (newDate.getMonth() < activeMonth) {
@@ -27383,14 +27520,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");
                 }
             }));
         };
@@ -27432,6 +27573,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);
@@ -27440,6 +27584,9 @@
                 if (event.originalEvent) {
                     _this.setFocusForDate(1);
                 }
+                setTimeout((function() {
+                    $(".bs-datepicker-head .next").focus();
+                }));
             }));
             datePickerHead.find(".current").click((function(event) {
                 if (event.originalEvent) {
@@ -27452,8 +27599,21 @@
                     _this.setFocusForMonthOrDay();
                 }
             }));
-            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());
+            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();
@@ -27519,14 +27679,14 @@
             this.loadDays();
             this.setActiveDateFocus(this.activeDate);
         };
+        BaseDateTimeComponent.prototype.setNextData = function(nextDate) {
+            this.next = this.getMonth(nextDate, 1);
+            this.prev = this.getMonth(nextDate, -1);
+        };
         BaseDateTimeComponent.prototype.loadDays = function() {
             var _this = this;
             setTimeout((function() {
                 $("[bsdatepickerdaydecorator]").not(".is-other-month").attr("tabindex", "0");
-                if (_this.clicked === false) {
-                    _this.next = _this.getMonth(_this.activeDate, 1);
-                    _this.prev = _this.getMonth(_this.activeDate, -1);
-                }
                 _this.addKeyBoardEventsForDays();
                 _this.addDatepickerMouseEvents();
             }));
@@ -27589,8 +27749,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();
             }));
@@ -27633,14 +27791,13 @@
         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();
             }));
         };
         BaseDateTimeComponent.prototype.setActiveMonthFocus = function(newDate, isMoouseEvent) {
             var _this = this;
+            this.setNextData(newDate);
             var newMonth = months[newDate.getMonth()];
             if (!isMoouseEvent) {
                 if (newDate.getFullYear() < this.activeDate.getFullYear()) {
@@ -27650,6 +27807,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;
             }));
@@ -27698,6 +27857,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;
             }));
@@ -27864,11 +28025,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) {
@@ -27885,11 +28041,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) {
@@ -27972,7 +28123,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() {
@@ -28235,7 +28389,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
                     });
@@ -28277,7 +28431,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) ]
         } ]
     } ];
@@ -28729,7 +28883,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 ],
@@ -32280,7 +32434,7 @@
             var value = _.get(dataObj, xKey);
             if (isLineTypeChart(this.type) && !core.isNumberType(this.xAxisDataType)) {
                 this.xDataKeyArr.push(value);
-                return index;
+                return value;
             }
             return value;
         };
@@ -33596,9 +33750,10 @@
     };
     var MenuComponent = function(_super) {
         __extends(MenuComponent, _super);
-        function MenuComponent(inj, route, userDefinedExecutionContext, bsDropdown, parentNav, selectEventCB) {
+        function MenuComponent(inj, route, app, userDefinedExecutionContext, bsDropdown, parentNav, selectEventCB) {
             var _this = _super.call(this, inj, WIDGET_CONFIG$1) || this;
             _this.route = route;
+            _this.app = app;
             _this.userDefinedExecutionContext = userDefinedExecutionContext;
             _this.bsDropdown = bsDropdown;
             _this.parentNav = parentNav;
@@ -33612,6 +33767,9 @@
             }
             var datasetSubscription = _this.nodes$.subscribe((function() {
                 if (!_.isEmpty(_this.nodes)) {
+                    if (base.hasLinkToCurrentPage(_this.nodes, _this.route.url)) {
+                        core.addClass(_this.nativeElement.querySelector(".dropdown-toggle"), "active");
+                    }
                     if (_this.parentNav) {
                         return;
                     }
@@ -33686,26 +33844,22 @@
             }
             $event.preventDefault();
         };
-        MenuComponent.prototype.hasLinkToCurrentPage = function(nodes) {
-            var _this = this;
-            return nodes.some((function(node) {
-                if (base.isActiveNavItem(node.link, _this.route.url)) {
-                    return true;
-                }
-                if (node.children) {
-                    return _this.hasLinkToCurrentPage(node.children);
-                }
-            }));
-        };
         MenuComponent.prototype.resetNodes = function() {
             _super.prototype.resetNodes.call(this);
-            if (this.autoopen === AUTO_OPEN.ACTIVE_PAGE && this.hasLinkToCurrentPage(this.nodes) || this.autoopen === AUTO_OPEN.ALWAYS) {
+            if (this.autoopen === AUTO_OPEN.ACTIVE_PAGE && base.hasLinkToCurrentPage(this.nodes, this.route.url) || this.autoopen === AUTO_OPEN.ALWAYS) {
                 this.bsDropdown.show();
             }
         };
         MenuComponent.prototype.ngOnInit = function() {
+            var _this = this;
             _super.prototype.ngOnInit.call(this);
             this.setMenuPosition();
+            var cancelSubscription = this.app.subscribe("highlightActiveLink", (function(data) {
+                core.toggleClass(_this.nativeElement.querySelector(".dropdown-toggle"), "active", base.hasLinkToCurrentPage(_this.nodes, _this.route.url));
+            }));
+            this.registerDestroyListener((function() {
+                return cancelSubscription();
+            }));
         };
         MenuComponent.prototype.onPropertyChange = function(key, nv, ov) {
             if (key === "tabindex") {
@@ -33776,6 +33930,8 @@
             type: core$1.Injector
         }, {
             type: router.Router
+        }, {
+            type: core.App
         }, {
             type: core.UserDefinedExecutionContext
         }, {
@@ -33893,8 +34049,9 @@
         VERTICAL: "vertical"
     };
     var MenuDropdownItemComponent = function() {
-        function MenuDropdownItemComponent(menuRef, userDefinedExecutionContext, parentNav, elRef) {
+        function MenuDropdownItemComponent(app, menuRef, userDefinedExecutionContext, parentNav, elRef) {
             var _this = this;
+            this.app = app;
             this.menuRef = menuRef;
             this.userDefinedExecutionContext = userDefinedExecutionContext;
             this.parentNav = parentNav;
@@ -33920,10 +34077,14 @@
             this.menualign = menuAlignClass[this.menuRef.menualign] || menuAlignClass["pull-left"];
         }
         MenuDropdownItemComponent.prototype.ngOnInit = function() {
+            var _this = this;
             if (this.parentNav) {
-                if (base.isActiveNavItem(this.item.link, this.menuRef.route.url)) {
+                if (base.hasLinkToCurrentPage([ this.item ], this.menuRef.route.url)) {
                     core.addClass(this.nativeElement, "active");
                 }
+                this.highlightActiveLinkSubscription = this.app.subscribe("highlightActiveLink", (function(data) {
+                    core.toggleClass(_this.nativeElement, "active", base.hasLinkToCurrentPage([ _this.item ], _this.menuRef.route.url));
+                }));
             }
         };
         MenuDropdownItemComponent.prototype.getInitialKeyMovements = function() {
@@ -33992,6 +34153,11 @@
                 $event.stopPropagation();
             }
         };
+        MenuDropdownItemComponent.prototype.ngOnDestroy = function() {
+            if (this.highlightActiveLinkSubscription) {
+                this.highlightActiveLinkSubscription();
+            }
+        };
         return MenuDropdownItemComponent;
     }();
     MenuDropdownItemComponent.decorators = [ {
@@ -34003,6 +34169,8 @@
     } ];
     MenuDropdownItemComponent.ctorParameters = function() {
         return [ {
+            type: core.App
+        }, {
             type: MenuComponent
         }, {
             type: core.UserDefinedExecutionContext
@@ -35687,6 +35855,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();
@@ -35717,7 +35888,6 @@
                     return _this.close();
                 };
             }
-            core.setAttr(popoverContainer, "tabindex", 0);
             setTimeout((function() {
                 return popoverStartBtn.focus();
             }), 50);
@@ -36393,16 +36563,24 @@
             _this.dialogService = inj.get(core.AbstractDialogService);
             _this.bsModal = inj.get(modal.BsModalService);
             var router$1 = inj.get(router.Router);
-            var subscriptions = [ _this.bsModal.onShown.subscribe((function() {
+            var subscriptions = [ _this.bsModal.onShown.subscribe((function(_a) {
+                var id = _a.id;
                 var ref = _this.dialogService.getLastOpenedDialog();
-                if (ref === _this) {
+                if (ref === _this && !_this.dialogId) {
                     invokeOpenedCallback(ref);
+                    _this.dialogId = id;
                 }
             })), _this.bsModal.onShow.subscribe((function() {
                 focusTrapObj.activeElement = document.activeElement;
             })), _this.bsModal.onHidden.subscribe((function(closeReason) {
-                var ref = closeReason === "esc" || closeReason === "backdrop-click" ? _this.dialogService.getLastOpenedDialog() : _this.dialogService.getDialogRefFromClosedDialogs();
+                var ref = _this.dialogService.getDialogRefFromClosedDialogs();
+                if (_this.dialogId && (closeReason === null || closeReason === void 0 ? void 0 : closeReason.id) === _this.dialogId) {
+                    ref = _this;
+                } else if (closeReason === "esc" || closeReason === "backdrop-click") {
+                    ref = _this.dialogService.getLastOpenedDialog();
+                }
                 if (ref === _this) {
+                    _this.dialogId = null;
                     _this.dialogService.removeFromOpenedDialogs(ref);
                     _this.dialogService.removeFromClosedDialogs(ref);
                     invokeClosedCallback(ref);
@@ -36441,6 +36619,10 @@
             Object.assign(this.context, initState);
             this.modalOptions.ariaLabelledBy = this.titleId;
             this.dialogRef = this.bsModal.show(this.getTemplateRef(), this.modalOptions);
+            if (this.dialogService.getOpenedDialogs().length === 1 && (core.isMobile() || core.isMobileApp())) {
+                var parentSelector = $("body > app-root")[0];
+                parentSelector.setAttribute("aria-hidden", "true");
+            }
         };
         BaseDialog.prototype.close = function() {
             if (this.dialogRef) {
@@ -42272,11 +42454,31 @@
                         $index: _this.dn.currentPage
                     });
                     _this.goToPage();
+                    if (_this.navigation === "Basic") {
+                        _this._setAriaForBasicNavigation();
+                    }
                 }
             }), base.DEBOUNCE_TIMES.PAGINATION_DEBOUNCE_TIME);
             base.styler(_this.nativeElement, _this);
             return _this;
         }
+        PaginationComponent.prototype._setAriaForBasicNavigation = function() {
+            _.forEach(this.nativeElement.getElementsByTagName("a"), (function(item) {
+                item.setAttribute("href", "javascript:void(0);");
+                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");
+                } else {
+                    item.removeAttribute("aria-disabled");
+                }
+            }));
+        };
         PaginationComponent.prototype.setResult = function(result) {
             this.result = result;
             this.resultEmitter.emit(this.result);
@@ -42338,7 +42540,7 @@
             }
             this.isDisableCurrent = isCurrentPageFirst && isCurrentPageLast;
             if (this.dataset && this.dataset.length && this.isDisableNext && this.parent.onDemandLoad && this.parent.widgetType === "wm-table") {
-                this.parent.callDataGridMethod("hideLoadingIndicator", this.isDisableNext, false);
+                this.parent.callDataGridMethod("hideLoadingIndicator", this.isDisableNext, this.parent.infScroll);
             }
         };
         PaginationComponent.prototype.isDataSourceHasPaging = function() {
@@ -42393,9 +42595,7 @@
                     this.resetPageNavigation();
                 }
                 if (this.navigation === "Basic") {
-                    _.forEach(this.nativeElement.getElementsByTagName("a"), (function(item) {
-                        item.setAttribute("href", "javascript:void(0);");
-                    }));
+                    this._setAriaForBasicNavigation();
                 }
             } else {
                 if (newVal && !_.isString(newVal)) {
@@ -42672,7 +42872,7 @@
         type: core.Component,
         args: [ {
             selector: "[wmPagination]",
-            template: '\n<ul class="pagination advanced {{navigationClass}}" *ngIf="navcontrols === \'Classic\'">\n    <li [ngClass]="{\'disabled\':isDisableFirst}">\n        <a [title]="appLocale.LABEL_FIRST" name="first" href="javascript:void(0);" aria-label="First"\n           (click)="navigatePage(\'first\', $event)">\n            <span aria-hidden="true"><i class="wi wi-first-page"></i></span>\n            <span class="sr-only">{{appLocale.LABEL_FIRST}}</span>\n        </a>\n    </li>\n    <li [ngClass]="{\'disabled\':isDisablePrevious}">\n        <a [title]="appLocale.LABEL_PREVIOUS" name="prev" href="javascript:void(0);" aria-label="Previous"\n           (click)="navigatePage(\'prev\', $event)">\n            <span aria-hidden="true"><i class="wi wi-chevron-left"></i></span>\n            <span class="sr-only">{{appLocale.LABEL_PREVIOUS}}</span>\n        </a>\n    </li>\n    <li class="pagecount disabled">\n        <a><input type="number" [disabled]="isDisableCurrent" [(ngModel)]="dn.currentPage" [attr.aria-label]="\'Page Navigation \' + dn.currentPage"\n                  (keydown)="onKeyDown($event)" (change)="onModelChange($event)" class="form-control"/></a>\n    </li>\n    <li class="disabled">\n        <a [hidden]="isDisableCount"> / {{pageCount}}</a>\n    </li>\n    <li [ngClass]="{\'disabled\':isDisableNext}">\n        <a [title]="appLocale.LABEL_NEXT" name="next" href="javascript:void(0);" aria-label="Next"\n           (click)="navigatePage(\'next\', $event)">\n            <span aria-hidden="true"><i class="wi wi-chevron-right"></i></span>\n            <span class="sr-only">{{appLocale.LABEL_NEXT}}</span>\n        </a>\n    </li>\n    <li [ngClass]="{\'disabled\':isDisableLast}">\n        <a [title]="appLocale.LABEL_LAST" name="last" href="javascript:void(0);" aria-label="Last"\n           (click)="navigatePage(\'last\', $event)">\n            <span aria-hidden="true"><i class="wi wi-last-page"></i></span>\n            <span class="sr-only">{{appLocale.LABEL_LAST}}</span>\n        </a>\n    </li>\n    <li *ngIf="showrecordcount" class="totalcount disabled">\n        <a>{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n    </li>\n</ul>\n<ul class="pager {{navigationClass}}" *ngIf="navcontrols === \'Pager\'">\n    <li class="previous" [ngClass]="{\'disabled\':isDisablePrevious}">\n        <a href="javascript:void(0);" (click)="navigatePage(\'prev\', $event)" aria-label="Previous">\n            <span aria-hidden="true"><i class="wi wi-chevron-left"></i></span>\n            {{appLocale.LABEL_PREVIOUS}}\n            <span class="sr-only">{{appLocale.LABEL_PREVIOUS}}</span>\n        </a>\n    </li>\n    <li class="next" [ngClass]="{\'disabled\':isDisableNext}">\n        <a href="javascript:void(0);" (click)="navigatePage(\'next\', $event)" aria-label="Next">\n            {{appLocale.LABEL_NEXT}}\n            <span aria-hidden="true"><i class="wi wi-chevron-right"></i></span>\n            <span class="sr-only">{{appLocale.LABEL_NEXT}}</span>\n        </a>\n    </li>\n</ul>\n\n<pagination class="pagination basic" [ngClass]="navigationClass" *ngIf="navcontrols === \'Basic\'" role="navigation"\n            [itemsPerPage]="maxResults" [totalItems]="dataSize"\n            [ngModel]="dn.currentPage" (pageChanged)="pageChanged($event)"\n            [attr.aria-label]="\'Page \' + dn.currentPage + \' of \' + pageCount + \' pages\'"\n            [boundaryLinks]="boundarylinks" [maxSize]="maxsize"\n            [directionLinks]="directionlinks" previousText="." nextText="." firstText="." lastText="."></pagination>\n\n<ul *ngIf="navcontrols === \'Basic\' && showrecordcount" class="pagination">\n    <li class="totalcount disabled basiccount"><a>{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a></li>\n</ul>\n',
+            template: '\n<ul class="pagination advanced {{navigationClass}}" *ngIf="navcontrols === \'Classic\'">\n    <li [ngClass]="{\'disabled\':isDisableFirst}">\n        <a [title]="appLocale.LABEL_FIRST" name="first" href="javascript:void(0);"\n           [attr.aria-disabled]="isDisableFirst"\n           (click)="navigatePage(\'first\', $event)">\n            <span aria-hidden="true"><i class="wi wi-first-page"></i></span>\n            <span class="sr-only">Go to first page {{ isDisableFirst ? \' , Disabled\' : \'\'}}</span>\n        </a>\n    </li>\n    <li [ngClass]="{\'disabled\':isDisablePrevious}">\n        <a [title]="appLocale.LABEL_PREVIOUS" name="prev" href="javascript:void(0);"\n            [attr.aria-disabled]="isDisablePrevious"\n            (click)="navigatePage(\'prev\', $event)">\n            <span aria-hidden="true"><i class="wi wi-chevron-left"></i></span>\n            <span class="sr-only">Go to previous page {{ isDisablePrevious ? \', Disabled\' : \'\'}}</span>\n        </a>\n    </li>\n    <li class="pagecount disabled">\n        <a href="javascript:void(0);">\n            <input type="number" [disabled]="isDisableCurrent" [(ngModel)]="dn.currentPage" [attr.aria-label]="\'Showing Page \' + dn.currentPage + \' of \' + pageCount"\n                  (keydown)="onKeyDown($event)" (change)="onModelChange($event)" class="form-control"/>\n        </a>\n    </li>\n    <li class="disabled">\n        <a [hidden]="isDisableCount"> / {{pageCount}}</a>\n    </li>\n    <li [ngClass]="{\'disabled\':isDisableNext}">\n        <a [title]="appLocale.LABEL_NEXT" name="next" href="javascript:void(0);"\n           [attr.aria-disabled]="isDisableNext"\n           (click)="navigatePage(\'next\', $event)">\n            <span aria-hidden="true"><i class="wi wi-chevron-right"></i></span>\n            <span class="sr-only">Go to next page {{ isDisableNext ? \' , Disabled\' : \'\'}}</span>\n        </a>\n    </li>\n    <li [ngClass]="{\'disabled\':isDisableLast}">\n        <a [title]="appLocale.LABEL_LAST" name="last" href="javascript:void(0);"\n           [attr.aria-disabled]="isDisableLast"\n           (click)="navigatePage(\'last\', $event)">\n            <span aria-hidden="true"><i class="wi wi-last-page"></i></span>\n            <span class="sr-only">Go to last page {{ isDisableLast ? \' , Disabled\' : \'\'}}</span>\n        </a>\n    </li>\n    <li *ngIf="showrecordcount" class="totalcount disabled">\n        <a href="javascript:void(0);" tabindex="-1" aria-disabled="true">{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n    </li>\n</ul>\n<ul class="pager {{navigationClass}}" *ngIf="navcontrols === \'Pager\'">\n    <li class="previous" [ngClass]="{\'disabled\':isDisablePrevious}">\n        <a href="javascript:void(0);" (click)="navigatePage(\'prev\', $event)"\n           [attr.aria-disabled]="isDisablePrevious">\n            <span aria-hidden="true"><i class="wi wi-chevron-left"></i></span>\n            {{appLocale.LABEL_PREVIOUS}}\n            <span class="sr-only">{{ isDisablePrevious ? \' , Disabled\' : \'\'}}</span>\n        </a>\n    </li>\n    <li class="next" [ngClass]="{\'disabled\':isDisableNext}">\n        <a href="javascript:void(0);" (click)="navigatePage(\'next\', $event)"\n           [attr.aria-disabled]="isDisableNext">\n            <span aria-hidden="true"><i class="wi wi-chevron-right"></i></span>\n            {{appLocale.LABEL_NEXT}}\n            <span class="sr-only">{{ isDisableNext ? \' , Disabled\' : \'\'}}</span>\n        </a>\n    </li>\n</ul>\n\n<pagination class="pagination basic" [ngClass]="navigationClass" *ngIf="navcontrols === \'Basic\'" role="navigation"\n            [itemsPerPage]="maxResults" [totalItems]="dataSize"\n            [ngModel]="dn.currentPage" (pageChanged)="pageChanged($event)"\n            [attr.aria-label]="\'Showing Page \' + dn.currentPage + \' of \' + pageCount + \' pages\'"\n            [boundaryLinks]="boundarylinks" [maxSize]="maxsize"\n            [directionLinks]="directionlinks"\n            firstText="Firtst" lastText="Last"\n            [customPreviousTemplate]="prevTemplate"\n            [customNextTemplate]="nextTemplate"\n            [customPageTemplate]="pageTemplate"></pagination>\n\n<ul *ngIf="navcontrols === \'Basic\' && showrecordcount" class="pagination">\n    <li class="totalcount disabled basiccount">\n        <a href="javascript:void(0);" tabindex="-1" aria-disabled="true">{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n    </li>\n</ul>\n\n<ng-template #pageTemplate let-page>\n    <span class="sr-only" [attr.data-isacitvepage]="page.active">{{\'Page \'}}</span>\n    {{page.number}}\n    <span class="sr-only" *ngIf="page.active"> {{\', Showing page \' + page.number + \' of \' + pageCount}}</span>\n</ng-template>\n<ng-template #prevTemplate let-disabled="disabled">\n    <span class="sr-only" [attr.data-isdisabled]="disabled">Go to Previous page {{disabled ? \', Disabled\' : \'\'}}</span>\n</ng-template>\n<ng-template #nextTemplate let-disabled="disabled">\n    <span class="sr-only" [attr.data-isdisabled]="disabled">Go to Next page {{disabled ? \', Disabled\' : \'\'}}</span>\n</ng-template>\n',
             providers: [ base.provideAsWidgetRef(PaginationComponent) ]
         } ]
     } ];
@@ -44611,9 +44811,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 ]);
@@ -44705,9 +44905,9 @@
             return this.datasource.execute(operation, options);
         };
         ListComponent.prototype.handleKeyDown = function($event, action) {
-            var _this = this;
+            var _d, _e;
             $event.stopPropagation();
-            if ($event.keyCode !== 13 && $event.keyCode !== 9 && !($event.target.classList.contains("form-control") && $event.keyCode === 32)) {
+            if ($event.keyCode !== 13 && $event.keyCode !== 9 && !(($event.target.classList.contains("form-control") || $event.target.classList.contains("note-editable")) && $event.keyCode === 32)) {
                 $event.preventDefault();
             }
             var listItems = this.listItems;
@@ -44747,27 +44947,21 @@
             }
             if (action === "focusPrev") {
                 if (this.isListElementMovable) {
-                    var prev_1;
                     presentIndex = presentIndex <= 0 ? 0 : presentIndex;
-                    this.lastSelectedItem = this.getListItemByIndex(presentIndex);
                     if (presentIndex === 0) {
-                        prev_1 = this.listItems.last;
                         return;
                     }
-                    this.listItems.forEach((function($liItem, idx) {
-                        if (idx === presentIndex) {
-                            prev_1.nativeElement.before($liItem.nativeElement);
-                            _this.lastSelectedItem.nativeElement.focus();
-                            var arr = _this.listItems.toArray();
-                            var temp = arr[presentIndex];
-                            arr[presentIndex] = arr[presentIndex - 1];
-                            arr[presentIndex - 1] = temp;
-                            _this.listItems.reset(arr);
-                            _this.currentIndex = presentIndex;
-                            _this.ariaText = "selected ";
-                        }
-                        prev_1 = $liItem;
-                    }));
+                    this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                    var prevElt = this.getListItemByIndex(presentIndex - 1);
+                    prevElt.nativeElement.before(this.lastSelectedItem.nativeElement);
+                    this.lastSelectedItem.nativeElement.focus();
+                    this.statePersistence.removeWidgetState(this, "selectedItem");
+                    var arr = this.listItems.toArray();
+                    _d = __read([ arr[presentIndex], arr[presentIndex - 1] ], 2), arr[presentIndex - 1] = _d[0], 
+                    arr[presentIndex] = _d[1];
+                    this.listItems.reset(arr);
+                    this.currentIndex = presentIndex;
+                    this.ariaText = "selected ";
                 } else {
                     presentIndex = presentIndex <= 0 ? 0 : presentIndex - 1;
                     this.lastSelectedItem = this.getListItemByIndex(presentIndex);
@@ -44777,27 +44971,21 @@
                 }
             } else if (action === "focusNext") {
                 if (this.isListElementMovable) {
-                    var prev_2;
                     presentIndex = presentIndex < listItems.length - 1 ? presentIndex : listItems.length - 1;
-                    this.lastSelectedItem = this.getListItemByIndex(presentIndex);
                     if (presentIndex === this.listItems.length - 1) {
-                        prev_2 = this.listItems.first;
                         return;
                     }
-                    this.listItems.forEach((function($liItem, idx) {
-                        if (idx === presentIndex + 1) {
-                            prev_2.nativeElement.before($liItem.nativeElement);
-                            _this.lastSelectedItem.nativeElement.focus();
-                            var arr = _this.listItems.toArray();
-                            var temp = arr[presentIndex + 1];
-                            arr[presentIndex + 1] = arr[presentIndex];
-                            arr[presentIndex] = temp;
-                            _this.listItems.reset(arr);
-                            _this.currentIndex = idx + 1;
-                            _this.ariaText = "selected ";
-                        }
-                        prev_2 = $liItem;
-                    }));
+                    this.lastSelectedItem = this.getListItemByIndex(presentIndex);
+                    var nextElt = this.getListItemByIndex(presentIndex + 1);
+                    nextElt.nativeElement.after(this.lastSelectedItem.nativeElement);
+                    this.lastSelectedItem.nativeElement.focus();
+                    this.statePersistence.removeWidgetState(this, "selectedItem");
+                    var arr = this.listItems.toArray();
+                    _e = __read([ arr[presentIndex + 1], arr[presentIndex] ], 2), arr[presentIndex] = _e[0], 
+                    arr[presentIndex + 1] = _e[1];
+                    this.listItems.reset(arr);
+                    this.currentIndex = presentIndex + 2;
+                    this.ariaText = "selected ";
                 } else {
                     presentIndex = presentIndex < listItems.length - 1 ? presentIndex + 1 : listItems.length - 1;
                     this.lastSelectedItem = this.getListItemByIndex(presentIndex);
@@ -44819,11 +45007,12 @@
                 this.isListElementMovable = !this.isListElementMovable;
                 this.onItemClick($event, this.getListItemByIndex(presentIndex));
                 this.currentIndex = presentIndex + 1;
-                var name = this.getListItemByIndex(presentIndex).item.name;
                 if (this.isListElementMovable) {
-                    this.ariaText = name + " grabbed, current position ";
+                    this.ariaText = "Item " + this.currentIndex + " grabbed, current position ";
+                    this.$ulEle.data("oldIndex", presentIndex);
                 } else {
-                    this.ariaText = name + " dropped, final position ";
+                    this.ariaText = "Item " + this.currentIndex + " dropped, final position ";
+                    this.onUpdate($event, undefined, presentIndex);
                 }
             }
         };
@@ -44868,10 +45057,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 {
@@ -45025,9 +45216,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);
@@ -45037,6 +45237,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);
             }
@@ -45061,7 +45271,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                <i class="wi wi-chevron-left" aria-hidden="true"></i>\n                <span class="sr-only">Previous</span>\n            </a>\n        </li>\n    </ul>\n</nav>\n<div *ngIf="navigation === \'Inline\' && !noDataFound" aria-live="polite" aria-atomic="true" class="sr-only"> {{\'Item \' + dataNavigator.dn.currentPage + \' of \' + dataNavigator.pageCount }}</div>\n\n<div>\n    <div id={{titleId}} class="sr-only" >\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" 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                <i class="wi wi-chevron-right" aria-hidden="true"></i>\n                <span class="sr-only">Next</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) ]
         } ]
     } ];
@@ -45576,6 +45786,10 @@
             value: "No data found."
         }, base.PROP_STRING) ], [ "ondemandmessage", Object.assign({
             value: "Load More"
+        }, base.PROP_STRING) ], [ "showviewlessbutton", Object.assign({
+            value: false
+        }, base.PROP_BOOLEAN) ], [ "viewlessmessage", Object.assign({
+            value: "View Less"
         }, base.PROP_STRING) ], [ "pagesize", base.PROP_NUMBER ], [ "radioselect", base.PROP_BOOLEAN ], [ "rowclass", base.PROP_STRING ], [ "rowngclass", base.PROP_STRING ], [ "searchlabel", Object.assign({
             value: "Search"
         }, base.PROP_STRING) ], [ "show", Object.assign({
@@ -45656,6 +45870,7 @@
             _this.columns = {};
             _this.formfields = {};
             _this.enablesort = true;
+            _this.showviewlessbutton = false;
             _this.primaryKey = [];
             _this.selectedItems = [];
             _this.selectedItemChange = new rxjs.Subject;
@@ -45676,6 +45891,7 @@
             _this.rowDef = {};
             _this.rowInstance = {};
             _this.fullFieldDefs = [];
+            _this.variableInflight = true;
             _this.applyProps = new Map;
             _this.redraw = _.debounce(_this._redraw, 150);
             _this.debouncedHandleLoading = _.debounce(_this.handleLoading, 350);
@@ -45698,6 +45914,7 @@
                 data: [],
                 colDefs: [],
                 startRowIndex: 1,
+                mode: "",
                 sortInfo: {
                     field: "",
                     direction: ""
@@ -45728,6 +45945,10 @@
                 isSearchTrigerred: false,
                 isDatasetUpdated: false,
                 isDataUpdatedByUser: false,
+                showviewlessbutton: false,
+                ondemandmessage: "",
+                viewlessmessage: "",
+                loadingdatamsg: "",
                 isNextPageData: undefined,
                 ACTIONS: {
                     DELETE: "delete",
@@ -45752,6 +45973,14 @@
                 getPageSize: function() {
                     return _this.pagesize;
                 },
+                getPageCount: function() {
+                    return _this.dataNavigator.pageCount;
+                },
+                enableNavigation: function() {
+                    _this.dataNavigator.widget.isDisableNext = false;
+                    _this.dataNavigator.widget.isDisableLast = false;
+                    _this.gridOptions.mode = "viewless";
+                },
                 setDeletedRowIndex: function(id) {
                     _this.setDataGridOption("deletedRowIndex", id);
                 },
@@ -45786,7 +46015,9 @@
                         }
                         _this.callDataGridMethod("selectRows", _this.items);
                         _this.selectedItems = _this.callDataGridMethod("getSelectedRows");
-                        _this.selectedItemChange.next(_this.selectedItems);
+                        if (_this.selectedItems.length) {
+                            _this.selectedItemChange.next(_this.selectedItems);
+                        }
                         if (_this._isPageSearch && _this.filterInfo) {
                             _this.searchSortHandler(_this.filterInfo, undefined, "search");
                         }
@@ -45795,9 +46026,11 @@
                 onRowSelect: function(row, e) {
                     _this.ngZone.run((function() {
                         _this.selectedItems = _this.callDataGridMethod("getSelectedRows");
-                        _this.selectedItemChange.next(_this.selectedItems);
+                        if (_this.selectedItems.length) {
+                            _this.selectedItemChange.next(_this.selectedItems);
+                        }
                         var rowData = _this.addRowIndex(row);
-                        if (rowData.$index && _this.getConfiguredState() !== "none" && _this.dataNavigator && base.unsupportedStatePersistenceTypes.indexOf(_this.navigation) < 0) {
+                        if (_this.selectedItems.length && rowData.$index && _this.getConfiguredState() !== "none" && _this.dataNavigator && base.unsupportedStatePersistenceTypes.indexOf(_this.navigation) < 0) {
                             var obj = {
                                 page: _this.dataNavigator.dn.currentPage,
                                 index: rowData.$index - 1
@@ -46237,9 +46470,14 @@
                     _this.callDataGridMethod("addLoadMoreBtn", _this.ondemandmessage, _this.loadingdatamsg, (function($event) {
                         _this.gridOptions.setIsNextPageData(true);
                         _this.gridOptions.setIsDataUpdatedByUser(false);
-                        _this.dataNavigator.navigatePage("next", $event);
-                        _this.isDataLoading = true;
-                    }));
+                        if (_this.gridOptions.mode === "viewless") {
+                            _this.dataNavigator.navigatePage("first", $event, true);
+                            _this.gridOptions.mode = "";
+                        } else {
+                            _this.dataNavigator.navigatePage("next", $event);
+                            _this.isDataLoading = true;
+                        }
+                    }), _this.infScroll);
                 },
                 bindScrollEvt: function() {
                     if (_this._gridData && _this._gridData.length && _this.infScroll) {
@@ -46399,7 +46637,15 @@
             set: function(newValue) {
                 var _a;
                 this.isDataLoading = false;
+                if (this.variableInflight && _.isEmpty(newValue)) {
+                    return;
+                }
                 this.variableInflight = false;
+                if (newValue && newValue.length === 0) {
+                    this.callDataGridMethod("setStatus", "nodata", this.nodatamessage);
+                } else {
+                    this.callDataGridMethod("setStatus", "ready");
+                }
                 if (this.gridOptions.isNavTypeScrollOrOndemand()) {
                     _a = __read(this.paginationService.updateFieldsOnPagination(this, newValue), 2), 
                     this._gridData = _a[0], this.currentPage = _a[1];
@@ -46517,6 +46763,10 @@
             this.gridOptions.securityUtils.pipeTransform = this.trustAsPipe;
             this.gridOptions.navigation = this.navigation;
             this.gridOptions.isdynamictable = this.isdynamictable;
+            this.gridOptions.showviewlessbutton = this.showviewlessbutton;
+            this.gridOptions.ondemandmessage = this.ondemandmessage;
+            this.gridOptions.viewlessmessage = this.viewlessmessage;
+            this.gridOptions.loadingdatamsg = this.loadingdatamsg;
             if (!_.isEmpty(this.gridData)) {
                 this.gridOptions.data = core.getClonedObject(this.gridData);
             }
@@ -46848,6 +47098,9 @@
         };
         TableComponent.prototype.setGridData = function(serverData) {
             var data = this.filternullrecords ? this.removeEmptyRecords(serverData) : serverData;
+            if (_.get(this.datasource, "category") === "wm.Variable") {
+                this.variableInflight = false;
+            }
             if (!this.variableInflight) {
                 if (data && data.length === 0) {
                     this.callDataGridMethod("setStatus", "nodata", this.nodatamessage);
@@ -47142,10 +47395,8 @@
                     this.variableInflight = false;
                     this.callDataGridMethod("setStatus", "nodata", this.nodatamessage);
                 }
-                if (this.dataset) {
-                    this.watchVariableDataSet(this.dataset);
-                    this.onDataSourceChange();
-                }
+                this.watchVariableDataSet(this.dataset);
+                this.onDataSourceChange();
                 break;
 
               case "dataset":
@@ -47254,6 +47505,11 @@
                 if (nv) {
                     this.$element.find(".on-demand-datagrid > a").text(nv);
                 }
+                this.gridOptions.ondemandmessage = nv;
+                break;
+
+              case "viewlessmessage":
+                this.gridOptions.viewlessmessage = nv;
                 break;
 
               case "show":
@@ -50978,15 +51234,20 @@
         };
     };
     var \u02752 = findInvalidElement;
-    var setTouchedState = function(ngForm) {
+    var setTouchedState = function(self, ngForm, fieldName) {
+        var _a, _b;
         if (ngForm.valid) {
             return;
         }
         if (ngForm.controls) {
-            _.forEach(ngForm.controls, (function(ctrl) {
-                setTouchedState(ctrl);
+            _.forEach(ngForm.controls, (function(ctrl, fieldName) {
+                setTouchedState(self, ctrl, fieldName);
             }));
         } 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"));
             ngForm.markAsTouched();
         }
     };
@@ -51283,7 +51544,7 @@
             }));
         };
         FormComponent.prototype.highlightInvalidFields = function() {
-            setTouchedState(this.ngform);
+            setTouchedState(this, this.ngform, "");
         };
         FormComponent.prototype.validateFieldsOnSubmit = function() {
             this.setValidationMsgs();
@@ -51812,8 +52073,8 @@
         FormComponent.prototype.generateFormFields = function() {
             return __awaiter(this, void 0, void 0, (function() {
                 var noOfColumns, $gridLayout, columnWidth, fieldTemplate, colCount, index, userFields, fields, colTmpl, componentFactoryRef, component;
-                return __generator(this, (function(_b) {
-                    switch (_b.label) {
+                return __generator(this, (function(_c) {
+                    switch (_c.label) {
                       case 0:
                         if (_.isUndefined(this._isGridLayoutPresent)) {
                             this._isGridLayoutPresent = this.$element.find(".panel-body [wmlayoutgrid]").length > 0;
@@ -51872,7 +52133,7 @@
                         }) ];
 
                       case 1:
-                        componentFactoryRef = _b.sent();
+                        componentFactoryRef = _c.sent();
                         component = this.dynamicFormRef.createComponent(componentFactoryRef, 0, this.inj);
                         core.extendProto(component.instance, this._dynamicContext);
                         $gridLayout[0].appendChild(component.location.nativeElement);
@@ -52393,10 +52654,18 @@
             $($evt.target).closest(".live-field").addClass("active");
         };
         FormFieldDirective.prototype._onBlurField = function($evt) {
-            var _a, _b;
+            var _a, _b, _c, _d;
             $($evt.target).closest(".live-field").removeClass("active");
-            (_a = this.nativeElement.querySelector("input")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-invalid", "" + this.ngform.controls[this._fieldName].invalid);
-            (_b = this.nativeElement.querySelector("input")) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-describedby", "" + this.nativeElement.getAttribute("__errormsg"));
+            var ele = this.nativeElement.querySelector("p.text-danger");
+            if (this.ngform.controls[this._fieldName].invalid && this.ngform.controls[this._fieldName].touched && this.form.isUpdateMode) {
+                this.nativeElement.setAttribute("__errormsg", "" + this.nativeElement.getAttribute("__validationId"));
+                (_a = this.nativeElement.querySelector("input")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-invalid", "" + this.ngform.controls[this._fieldName].invalid);
+                (_b = this.nativeElement.querySelector("input")) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-describedby", "" + this.nativeElement.getAttribute("__validationId"));
+            } else {
+                this.nativeElement.removeAttribute("__errormsg");
+                (_c = this.nativeElement.querySelector("input")) === null || _c === void 0 ? void 0 : _c.removeAttribute("aria-invalid");
+                (_d = this.nativeElement.querySelector("input")) === null || _d === void 0 ? void 0 : _d.removeAttribute("aria-describedby");
+            }
             this._activeField = false;
             this._triggeredByUser = false;
             this._clicktriggeredByUser = false;
@@ -52618,7 +52887,7 @@
             });
         };
         FormFieldDirective.prototype.onValueChange = function(val) {
-            var _a, _b;
+            var _a, _b, _c, _d;
             if (!this.isDestroyed) {
                 var captionEl = $(this.nativeElement).find(".caption-floating");
                 if (captionEl.length > 0) {
@@ -52630,8 +52899,15 @@
                         isFocused: this._activeField
                     });
                 }
-                (_a = this.nativeElement.querySelector("input")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-invalid", this._triggeredByUser && this.ngform.controls[this._fieldName].invalid ? "true" : "false");
-                (_b = this.nativeElement.querySelector("input")) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-describedby", "" + this.nativeElement.getAttribute("__errormsg"));
+                if (this.ngform.controls[this._fieldName].invalid && this.ngform.controls[this._fieldName].touched && this.form.isUpdateMode) {
+                    this.nativeElement.setAttribute("__errormsg", "" + this.nativeElement.getAttribute("__validationId"));
+                    (_a = this.nativeElement.querySelector("input")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-invalid", this._triggeredByUser && this.ngform.controls[this._fieldName].invalid ? "true" : "false");
+                    (_b = this.nativeElement.querySelector("input")) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-describedby", "" + this.nativeElement.getAttribute("__validationId"));
+                } else {
+                    this.nativeElement.removeAttribute("__errormsg");
+                    (_c = this.nativeElement.querySelector("input")) === null || _c === void 0 ? void 0 : _c.removeAttribute("aria-invalid");
+                    (_d = this.nativeElement.querySelector("input")) === null || _d === void 0 ? void 0 : _d.removeAttribute("aria-describedby");
+                }
                 this.form.onFieldValueChange(this, val);
                 this.notifyChanges();
                 if (this.$element.find(".active").length > 0 || this.form.touched) {
@@ -58298,40 +58574,36 @@
     var TabsAnimator = function(_super) {
         __extends(TabsAnimator, _super);
         function TabsAnimator(tabs) {
-            var e_1, _a;
             var _this = _super.call(this) || this;
             _this.tabs = tabs;
             _this._$el = $(_this.tabs.getNativeElement()).find(">.tab-content");
-            var childEls = _this._$el.find(">[wmTabPane]");
-            _this._noOfTabs = childEls.length;
-            var maxWidth = _this._noOfTabs * 100 + "%";
-            core.addClass(_this.tabs.getNativeElement(), "has-transition");
-            core.setCSSFromObj(_this._$el[0], {
-                maxWidth: maxWidth,
-                width: maxWidth
-            });
-            var width = 100 / _this._noOfTabs + "%";
-            try {
-                for (var _b = __values(Array.from(childEls)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var child = _c.value;
-                    core.setCSS(child, "width", width);
-                }
-            } catch (e_1_1) {
-                e_1 = {
-                    error: e_1_1
-                };
-            } finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                } finally {
-                    if (e_1) throw e_1.error;
-                }
-            }
             _this.init(_this._$el);
             return _this;
         }
+        TabsAnimator.prototype.calibrate = function() {
+            var activeTabIndex = this.tabs.getActiveTabIndex();
+            var panes = this._$el.find(">.tab-pane");
+            var activeTabVisibleIndex = 0;
+            var noOfVisiblePanes = 0;
+            var visiblePanes = [];
+            panes.each((function(i, p) {
+                if (!$(p).prop("hidden")) {
+                    noOfVisiblePanes++;
+                    if (i === activeTabIndex) {
+                        activeTabVisibleIndex = noOfVisiblePanes - 1;
+                    }
+                    visiblePanes.push(p);
+                }
+                return true;
+            }));
+            return {
+                activeTabIndex: activeTabVisibleIndex,
+                noOfTabs: noOfVisiblePanes,
+                panes: visiblePanes
+            };
+        };
         TabsAnimator.prototype.bounds = function() {
-            var activeTabIndex = this.tabs.getActiveTabIndex(), w = this._$el.find(">.tab-pane").first().width(), noOfTabs = this._$el.find(">.tab-pane:visible").length, centerVal = -1 * activeTabIndex * w;
+            var _a = this.calibrate(), activeTabIndex = _a.activeTabIndex, noOfTabs = _a.noOfTabs, panes = _a.panes, w = $(panes[0]).width(), centerVal = -1 * activeTabIndex * w;
             this.clearContentFocus();
             return {
                 strict: false,
@@ -58358,8 +58630,18 @@
             }
         };
         TabsAnimator.prototype.transitionTabIntoView = function() {
-            var activeTabIndex = this.tabs.getActiveTabIndex();
-            core.setCSS(this._$el[0], "transform", "translate3d(" + -1 * activeTabIndex / this._noOfTabs * 100 + "%, 0, 0)");
+            var _a = this.calibrate(), activeTabIndex = _a.activeTabIndex, noOfTabs = _a.noOfTabs, panes = _a.panes;
+            var maxWidth = noOfTabs * 100 + "%";
+            core.setCSSFromObj(this._$el[0], {
+                maxWidth: maxWidth,
+                width: maxWidth
+            });
+            core.addClass(this.tabs.getNativeElement(), "has-transition");
+            var width = 100 / noOfTabs + "%";
+            panes.forEach((function(p) {
+                core.setCSS(p, "width", width);
+            }));
+            core.setCSS(this._$el[0], "transform", "translate3d(" + -1 * activeTabIndex / noOfTabs * 100 + "%, 0, 0)");
         };
         TabsAnimator.prototype.onUpper = function($event) {
             this.tabs.prev($event);
@@ -58485,6 +58767,7 @@
         };
         TabPaneComponent.prototype.onPropertyChange = function(key, nv, ov) {
             var _this = this;
+            var _a;
             if (key === "content") {
                 if (this.isActive) {
                     setTimeout((function() {
@@ -58495,6 +58778,10 @@
                 this.nativeElement.hidden = !nv;
                 if (this._isFirstLoad) {
                     this.tabsRef.selectDefaultPaneByIndex(this.tabsRef.defaultpaneindex);
+                } else if (!nv && this.isActive) {
+                    this.tabsRef.next();
+                } else if (nv || !this.isActive) {
+                    (_a = this.tabsRef.tabsAnimator) === null || _a === void 0 ? void 0 : _a.transitionTabIntoView();
                 }
                 this._isFirstLoad = false;
             } else {
@@ -59781,7 +60068,7 @@
             value: true
         }, base.PROP_BOOLEAN) ], [ "title", Object.assign({
             value: "Step Title"
-        }, base.PROP_STRING) ] ]));
+        }, base.PROP_STRING) ], [ "subtitle", base.PROP_STRING ] ]));
     };
     var DEFAULT_CLS$1 = "app-wizard-step-content";
     var WIDGET_CONFIG$1 = {
@@ -60085,6 +60372,7 @@
                     this.setDefaultStep(step);
                 }
             }
+            this.addMoreText();
         };
         WizardComponent.prototype.onWizardHeaderClick = function($event, currentStep) {
             var _this = this;
@@ -60100,6 +60388,7 @@
                 }));
                 this.currentStep = currentStep;
                 this.currentStep.active = true;
+                this.addMoreText();
             }
         };
         WizardComponent.prototype.next = function(eventName) {
@@ -60126,6 +60415,7 @@
                 nextStep.active = true;
                 this.currentStep = nextStep;
             }
+            this.addMoreText();
         };
         WizardComponent.prototype.prev = function() {
             var currentStep = this.currentStep;
@@ -60141,6 +60431,7 @@
                 prevStep.active = true;
                 this.currentStep = prevStep;
             }
+            this.addMoreText();
         };
         WizardComponent.prototype.skip = function() {
             this.next("skip");
@@ -60156,6 +60447,42 @@
                 steps: this.steps.toArray()
             });
         };
+        WizardComponent.prototype.addMoreText = function() {
+            setTimeout((function() {
+                var newWindowWidth = $(window).width();
+                if (newWindowWidth < 768) {
+                    $(".app-wizard-step.current .subtitle-wrapper .step-title").css({
+                        height: "auto",
+                        display: "block"
+                    });
+                    var subtitleTextLength = $(".app-wizard-step.current .subtitle-wrapper .step-title").height();
+                    $(".read_more").css("display", "none");
+                    $(".current .subtitle-wrapper").removeClass("readmore_subtitle");
+                    if (subtitleTextLength > 44) {
+                        $(".app-wizard-step.current .subtitle-wrapper .step-title").css({
+                            height: "44px",
+                            display: "-webkit-box"
+                        });
+                        $(".current .read_more").css("display", "block");
+                        $(".active .read_more").css("display", "none");
+                        $(".disable .read_more").css("display", "none");
+                        $(".app-wizard-step>a").css("height", "100px");
+                    }
+                }
+            }));
+        };
+        WizardComponent.prototype.readMoreSubtitle = function() {
+            $(".current .subtitle-wrapper").addClass("readmore_subtitle");
+            $(".current .read_more").css("display", "none");
+            $(document).on("mouseup", (function(e) {
+                var container = $(".subtitle-wrapper");
+                if (!container.is(e.target) && container.has(e.target).length === 0) {
+                    $(".current .subtitle-wrapper").removeClass("readmore_subtitle");
+                    $(".current .read_more").css("display", "block");
+                    $(document).off("mouseup");
+                }
+            }));
+        };
         WizardComponent.prototype.isFirstStep = function(stepRef) {
             return this.steps.first === stepRef;
         };
@@ -60178,6 +60505,11 @@
         WizardComponent.prototype.ngAfterViewInit = function() {
             _super.prototype.ngAfterViewInit.call(this);
             base.styler(this.nativeElement.querySelector(".panel-body"), this, base.APPLY_STYLES_TYPE.INNER_SHELL);
+            setTimeout((function() {
+                if ($(window).width() < 768) {
+                    $(".app-wizard").removeClass("vertical");
+                }
+            }));
         };
         return WizardComponent;
     }(base.StylableComponent);
@@ -60186,7 +60518,7 @@
         type: core.Component,
         args: [ {
             selector: "div[wmWizard]",
-            template: '<div class="app-wizard-heading" role="tab">\n    <ul class="app-wizard-steps nav nav-pills {{stepClass}}">\n        <li class="app-wizard-step" *ngFor="let step of steps; let i = index" [hidden]="!step.show"\n            [ngClass]="{active: step.done, current: step.active, disabled: step.disabled}"\n            (click)="onWizardHeaderClick($event, step)">\n            <a href="javascript:void(0)" [attr.aria-label]="step.title" [attr.title]="step.title">\n                <span class="arrow" *ngIf="class && class.includes(\'classic\')"></span>\n                <span class="wizard-step-number">\n                    <span class="count" *ngIf="class && class.includes(\'number\') && !step.isDone">{{i+1}}</span>\n                    <i class="dottedstepper" *ngIf="class && (class.includes(\'dottedstepper\') || class.includes(\'text-inline\') && !class.includes(\'iconstepper\')) && !step.isDone"></i>\n                    <i class="app-icon wi wi-done" *ngIf="class && (class.includes(\'dottedstepper\') || class.includes(\'number\')) && step.isDone"></i>\n                    <i class="app-icon {{step.iconclass}}" *ngIf="(class && class.includes(\'iconstepper\')) && ((step.iconclass && !step.isDone) || (step.iconclass && step.isDone && step.doneiconclass ===\'\'))"></i>\n                    <i class="app-icon {{step.doneiconclass}}" *ngIf="step.doneiconclass && step.isDone && (class && class.includes(\'iconstepper\'))"></i>\n                </span>\n                <span class="title-wrapper">\n                    <span *ngIf="class && class.includes(\'text-inline\')">{{\'0\' + (i+1)}}</span>\n                    <span class="step-title" [textContent]="step.title"></span>\n                </span>\n            </a>\n        </li>\n    </ul>\n</div>\n<div class="app-wizard-body panel-body" role="tabpanel">\n    <p wmMessage *ngIf="message.caption" caption.bind="message.caption" type.bind="message.type"></p>\n    <ng-content ngProjectAs="form[wmWizardStep]"></ng-content>\n</div>\n<div class="app-wizard-actions panel-footer {{actionsalignment}}">\n    <a class="app-wizard-skip" name="skipStep_{{name}}" *ngIf="currentStep?.enableskip" title="Skip step" (click)="skip()">Skip &raquo;</a>\n    <div class="app-wizard-actions-right">\n        <button type="button" name="cancelBtn_{{name}}" class="btn app-button btn-default" *ngIf="cancelable"\n                (click)="cancel()" [title]="cancelbtnlabel" [textContent]="cancelbtnlabel"></button>\n        <button type="button" name="previousBtn_{{name}}" class="btn app-button btn-default"\n                *ngIf="hasPrevStep" (click)="prev()" [disabled]="!enablePrev">\n            <i class="app-icon wi wi-chevron-left"></i>\n            <span class="btn-caption" [textContent]="previousbtnlabel"></span>\n        </button>\n        <button type="button" name="nextBtn_{{name}}" class="btn app-button btn-primary"\n                *ngIf="hasNextStep" (click)="next()" [disabled]="!enableNext">\n            <span class="btn-caption" [textContent]="nextbtnlabel"></span>\n            <i class="app-icon wi wi-chevron-right"></i>\n        </button>\n        <button type="button" name="doneBtn_{{name}}" class="btn app-button btn-success"\n                *ngIf="showDoneBtn" (click)="done()"\n                [disabled]="!enableDone">\n            <i class="app-icon wm-sl-l sl-check"></i>\n            <span class="btn-caption" [textContent]="donebtnlabel"></span>\n        </button>\n    </div>\n</div>\n',
+            template: '<div class="app-wizard-heading" role="tab">\n    <ul class="app-wizard-steps nav nav-pills {{stepClass}}">\n        <li class="app-wizard-step" *ngFor="let step of steps; let i = index" [hidden]="!step.show"\n            [ngClass]="{active: step.done, current: step.active, disabled: step.disabled}"\n            (click)="onWizardHeaderClick($event, step)">\n            <a href="javascript:void(0)" [attr.aria-label]="step.title" [attr.title]="step.title" [ngClass]="{\'title-center-align\':class && class.includes(\'classic\') && !step.subtitle}">\n                <span class="arrow" *ngIf="class && class.includes(\'classic\')"></span>\n                <span class="wizard-step-number">\n                    <span class="count" *ngIf="class && class.includes(\'number\') && !step.isDone">{{i+1}}</span>\n                    <i class="dottedstepper" *ngIf="class && (class.includes(\'dottedstepper\') || class.includes(\'text-inline\') && !class.includes(\'iconstepper\')) && !step.isDone"></i>\n                    <i class="app-icon wi wi-done" *ngIf="class && (class.includes(\'dottedstepper\') || class.includes(\'number\')) && step.isDone"></i>\n                    <i class="app-icon {{step.iconclass}}" *ngIf="(class && class.includes(\'iconstepper\')) && ((step.iconclass && !step.isDone) || (step.iconclass && step.isDone && step.doneiconclass ===\'\'))"></i>\n                    <i class="app-icon {{step.doneiconclass}}" *ngIf="step.doneiconclass && step.isDone && (class && class.includes(\'iconstepper\'))"></i>\n                </span>\n                <span class="title-wrapper">\n                    <span *ngIf="class && class.includes(\'text-inline\')">{{\'0\' + (i+1)}}</span>\n                    <span class="step-title" [textContent]="step.title"></span>\n                </span>\n                <span class="subtitle-wrapper" [attr.title]="step.subtitle" *ngIf="step.subtitle">\n                    <span class="step-title" [textContent]="step.subtitle"></span>\n                    <a class="read_more" (click)="readMoreSubtitle()" style="display:none">more</a>\n                </span>\n            </a>    \n        </li>\n    </ul>\n</div>\n<div class="app-wizard-body panel-body" role="tabpanel">\n    <p wmMessage *ngIf="message.caption" caption.bind="message.caption" type.bind="message.type"></p>\n    <ng-content ngProjectAs="form[wmWizardStep]"></ng-content>\n</div>\n<div class="app-wizard-actions panel-footer {{actionsalignment}}">\n    <a class="app-wizard-skip" name="skipStep_{{name}}" *ngIf="currentStep?.enableskip" title="Skip step" (click)="skip()">Skip &raquo;</a>\n    <div class="app-wizard-actions-right">\n        <button type="button" name="cancelBtn_{{name}}" class="btn app-button btn-default" *ngIf="cancelable"\n                (click)="cancel()" [title]="cancelbtnlabel" [textContent]="cancelbtnlabel"></button>\n        <button type="button" name="previousBtn_{{name}}" class="btn app-button btn-default"\n                *ngIf="hasPrevStep" (click)="prev()" [disabled]="!enablePrev">\n            <i class="app-icon wi wi-chevron-left"></i>\n            <span class="btn-caption" [textContent]="previousbtnlabel"></span>\n        </button>\n        <button type="button" name="nextBtn_{{name}}" class="btn app-button btn-primary"\n                *ngIf="hasNextStep" (click)="next()" [disabled]="!enableNext">\n            <span class="btn-caption" [textContent]="nextbtnlabel"></span>\n            <i class="app-icon wi wi-chevron-right"></i>\n        </button>\n        <button type="button" name="doneBtn_{{name}}" class="btn app-button btn-success"\n                *ngIf="showDoneBtn" (click)="done()"\n                [disabled]="!enableDone">\n            <i class="app-icon wm-sl-l sl-check"></i>\n            <span class="btn-caption" [textContent]="donebtnlabel"></span>\n        </button>\n    </div>\n</div>\n',
             providers: [ base.provideAsWidgetRef(WizardComponent) ]
         } ]
     } ];
@@ -67450,10 +67782,10 @@
 }));
 
 (function(global, factory) {
-    typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@angular/core"), require("@wm/core"), require("@wm/components/base"), require("@wm/components/page"), require("@wm/mobile/core"), require("@angular/common")) : typeof define === "function" && define.amd ? define("@wm/mobile/components/page", [ "exports", "@angular/core", "@wm/core", "@wm/components/base", "@wm/components/page", "@wm/mobile/core", "@angular/common" ], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, 
+    typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@angular/core"), require("@wm/core"), require("@wm/components/base"), require("ngx-bootstrap/modal"), require("@wm/components/page"), require("@wm/mobile/core"), require("@angular/common")) : typeof define === "function" && define.amd ? define("@wm/mobile/components/page", [ "exports", "@angular/core", "@wm/core", "@wm/components/base", "ngx-bootstrap/modal", "@wm/components/page", "@wm/mobile/core", "@angular/common" ], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, 
     factory((global.wm = global.wm || {}, global.wm.mobile = global.wm.mobile || {}, 
-    global.wm.mobile.components = global.wm.mobile.components || {}, global.wm.mobile.components.page = {}), global.ng.core, global.wm.core, global.wm.components.base, global.wm.components.page, global.wm.mobile.core, global.ng.common));
-})(this, (function(exports, core$1, core, base, page, core$2, common) {
+    global.wm.mobile.components = global.wm.mobile.components || {}, global.wm.mobile.components.page = {}), global.ng.core, global.wm.core, global.wm.components.base, global.modal, global.wm.components.page, global.wm.mobile.core, global.ng.common));
+})(this, (function(exports, core$1, core, base, modal, page, core$2, common) {
     "use strict";
     var PageContentLoaderComponent = function() {
         function PageContentLoaderComponent(el) {
@@ -67475,18 +67807,30 @@
         } ];
     };
     var MobilePageDirective = function() {
-        function MobilePageDirective(app, elRef, deviceService, page, navigationService) {
+        function MobilePageDirective(app, elRef, modalService, deviceService, page, navigationService) {
             var _this = this;
+            this.modalService = modalService;
             this.deviceService = deviceService;
             this.page = page;
             this.navigationService = navigationService;
+            this.subscriptions = [];
             core.addClass(elRef.nativeElement, "mobile-app-page");
             this._$ele = $(elRef.nativeElement);
             page.subscribe("wmMobileTabbar:ready", (function() {
                 return _this._$ele.addClass("has-tabbar");
             }));
+            var modalsOpened = [];
+            this.subscriptions = [ modalService.onShown.subscribe((function(_a) {
+                var id = _a.id;
+                id && modalsOpened.push(id);
+            })), modalService.onHidden.subscribe((function(_a) {
+                var id = _a.id;
+                id && _.remove(modalsOpened, id);
+            })) ];
             this._backBtnListenerDestroyer = deviceService.onBackButtonTap((function($event) {
-                if (app.landingPageName === app.activePageName) {
+                if (modalsOpened.length > 0) {
+                    modalService.hide(modalsOpened.pop());
+                } else if (app.landingPageName === app.activePageName) {
                     window.navigator["app"].exitApp();
                 } else {
                     _this.navigationService.goToPrevious();
@@ -67495,6 +67839,9 @@
             }));
         }
         MobilePageDirective.prototype.ngOnDestroy = function() {
+            this.subscriptions.map((function(s) {
+                return s.unsubscribe();
+            }));
             this._backBtnListenerDestroyer();
         };
         return MobilePageDirective;
@@ -67510,6 +67857,8 @@
             type: core.App
         }, {
             type: core$1.ElementRef
+        }, {
+            type: modal.BsModalService
         }, {
             type: core$2.DeviceService
         }, {
@@ -71391,30 +71740,37 @@
                 toaster.onHidden.subscribe(this.onToasterHide.bind(this, variable));
             }
         };
+        NotificationActionManager.prototype.getDialogConfig = function(variable, options, dialogId, closeCallBackFn) {
+            return {
+                title: options.title || variable.dataBinding.title,
+                text: options.message || variable.dataBinding.text,
+                okButtonText: options.okButtonText || variable.dataBinding.okButtonText || "OK",
+                cancelButtonText: options.cancelButtonText || variable.dataBinding.cancelButtonText || "CANCEL",
+                alerttype: options.alerttype || variable.dataBinding.alerttype || "information",
+                onOk: function() {
+                    exports.dialogService.close(dialogId, undefined, closeCallBackFn);
+                },
+                onCancel: function() {
+                    initiateCallback("onCancel", variable, options.data);
+                    exports.dialogService.close(dialogId, undefined);
+                },
+                onClose: function() {
+                    initiateCallback("onClose", variable, options.data);
+                }
+            };
+        };
         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 isPrefabType = core.getWmProjectProperties().type === "PREFAB";
+            var dialogPrefix = isPrefabType ? "Prefab" : "Common";
+            var dialogId = dialogPrefix + _.capitalize(variable.operation) + "Dialog";
             var closeCallBackFn = function() {
                 return initiateCallback("onOk", variable, options.data);
             };
-            exports.dialogService.open(dialogId, variable._context, {
-                notification: {
-                    title: options.title || variable.dataBinding.title,
-                    text: options.message || variable.dataBinding.text,
-                    okButtonText: options.okButtonText || variable.dataBinding.okButtonText || "OK",
-                    cancelButtonText: options.cancelButtonText || variable.dataBinding.cancelButtonText || "CANCEL",
-                    alerttype: options.alerttype || variable.dataBinding.alerttype || "information",
-                    onOk: function() {
-                        exports.dialogService.close(dialogId, variable._context, closeCallBackFn);
-                    },
-                    onCancel: function() {
-                        initiateCallback("onCancel", variable, options.data);
-                        exports.dialogService.close(dialogId, variable._context);
-                    },
-                    onClose: function() {
-                        initiateCallback("onClose", variable, options.data);
-                    }
-                }
-            });
+            var dialogConfig = this.getDialogConfig(variable, options, dialogId, closeCallBackFn);
+            dialogConfig = isPrefabType ? dialogConfig : {
+                notification: dialogConfig
+            };
+            exports.dialogService.open(dialogId, undefined, dialogConfig);
         };
         NotificationActionManager.prototype.notify = function(variable, options, success, error) {
             var operation = variable.operation;
@@ -72843,6 +73199,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;
@@ -72949,6 +73312,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);
                     }));
@@ -73038,6 +73402,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;
@@ -82189,9 +82554,152 @@
             type: ComponentRefProvider
         } ];
     };
+    var PipeProvider = function() {
+        function PipeProvider(compiler, injector, domSanitizer, i18service) {
+            var _this = this;
+            var _a;
+            this.compiler = compiler;
+            this.injector = injector;
+            this.domSanitizer = domSanitizer;
+            this.i18service = i18service;
+            this._locale = i2.getSessionStorageItem("selectedLocale") || "en";
+            this.formatsByLocale = (_a = this.i18service) === null || _a === void 0 ? void 0 : _a.getwidgetLocale();
+            this.preparePipeMeta = function(reference, name, pure, diDeps) {
+                if (diDeps === void 0) {
+                    diDeps = [];
+                }
+                return {
+                    type: {
+                        reference: reference,
+                        diDeps: diDeps
+                    },
+                    name: name,
+                    pure: pure
+                };
+            };
+            this._pipeData = [ this.preparePipeMeta(common.AsyncPipe, "async", false, [ i0.ChangeDetectorRef ]), this.preparePipeMeta(common.SlicePipe, "slice", false), this.preparePipeMeta(common.PercentPipe, "percent", true, [ this._locale ]), this.preparePipeMeta(common.I18nPluralPipe, "i18nPlural", true, [ common.NgLocalization ]), this.preparePipeMeta(common.I18nSelectPipe, "i18nSelect", true), this.preparePipeMeta(common.KeyValuePipe, "keyvalue", false, [ i0.KeyValueDiffers ]), this.preparePipeMeta(base.FileIconClassPipe, "fileIconClass", true), this.preparePipeMeta(base.FileExtensionFromMimePipe, "fileExtensionFromMime", true), this.preparePipeMeta(base.StateClassPipe, "stateClass", true), this.preparePipeMeta(base.FileSizePipe, "filesize", true), this.preparePipeMeta(base.FilterPipe, "filter", true), this.preparePipeMeta(common.UpperCasePipe, "uppercase", true), this.preparePipeMeta(common.LowerCasePipe, "lowercase", true), this.preparePipeMeta(common.JsonPipe, "json", false), this.preparePipeMeta(common.DecimalPipe, "number", true, [ this._locale ]), this.preparePipeMeta(common.TitleCasePipe, "titlecase", true), this.preparePipeMeta(common.CurrencyPipe, "currency", true, [ this._locale ]), this.preparePipeMeta(common.DatePipe, "date", true, [ this._locale ]), this.preparePipeMeta(base.ToDatePipe, "toDate", true, [ new common.DatePipe(this._locale) ]), this.preparePipeMeta(base.ToNumberPipe, "toNumber", true, [ new common.DecimalPipe(this._locale), this.i18service ]), this.preparePipeMeta(base.ToCurrencyPipe, "toCurrency", true, [ new common.DecimalPipe(this._locale), this.i18service ]), this.preparePipeMeta(base.PrefixPipe, "prefix", true), this.preparePipeMeta(base.SuffixPipe, "suffix", true), this.preparePipeMeta(base.TimeFromNowPipe, "timeFromNow", true), this.preparePipeMeta(base.NumberToStringPipe, "numberToString", true, [ new common.DecimalPipe(this._locale) ]), this.preparePipeMeta(base.StringToNumberPipe, "stringToNumber", true), this.preparePipeMeta(base.CustomPipe, "custom", true, [ this.injector.get(i2.CustomPipeManager) ]), this.preparePipeMeta(base.TrustAsPipe, "trustAs", true, [ this.domSanitizer ]), this.preparePipeMeta(base.SanitizePipe, "sanitize", true, [ this.domSanitizer ]) ];
+            this._pipeMeta = new Map;
+            this._pipeData.forEach((function(v) {
+                _this._pipeMeta.set(v.name, v);
+            }));
+        }
+        PipeProvider.prototype.unknownPipe = function(name) {
+            throw Error("The pipe '" + name + "' could not be found");
+        };
+        PipeProvider.prototype.meta = function(name) {
+            var meta = this._pipeMeta.get(name);
+            if (!meta) {
+                this.unknownPipe(name);
+            }
+            return meta;
+        };
+        PipeProvider.prototype.getPipeNameVsIsPureMap = function() {
+            var _map = new Map;
+            this._pipeMeta.forEach((function(v, k) {
+                _map.set(k, v.pure);
+            }));
+            return _map;
+        };
+        PipeProvider.prototype.resolveDep = function(dep) {
+            return this.injector.get(dep.token.identifier.reference);
+        };
+        PipeProvider.prototype.getInstance = function(name) {
+            var e_1, _b;
+            var _c = this.meta(name).type, ref = _c.reference, deps = _c.diDeps;
+            if (!ref) {
+                this.unknownPipe(name);
+            }
+            if (!deps.length) {
+                return new ref;
+            } else {
+                var args = [];
+                try {
+                    for (var deps_1 = __values(deps), deps_1_1 = deps_1.next(); !deps_1_1.done; deps_1_1 = deps_1.next()) {
+                        var dep = deps_1_1.value;
+                        args.push(dep);
+                    }
+                } catch (e_1_1) {
+                    e_1 = {
+                        error: e_1_1
+                    };
+                } finally {
+                    try {
+                        if (deps_1_1 && !deps_1_1.done && (_b = deps_1.return)) _b.call(deps_1);
+                    } finally {
+                        if (e_1) throw e_1.error;
+                    }
+                }
+                return new (ref.bind.apply(ref, __spreadArray([ void 0 ], __read(args))));
+            }
+        };
+        return PipeProvider;
+    }();
+    PipeProvider.\u0275prov = i0__namespace.\u0275\u0275defineInjectable({
+        factory: function PipeProvider_Factory() {
+            return new PipeProvider(i0__namespace.\u0275\u0275inject(i0__namespace.Compiler), i0__namespace.\u0275\u0275inject(i0__namespace.INJECTOR), i0__namespace.\u0275\u0275inject(i1__namespace.DomSanitizer), i0__namespace.\u0275\u0275inject(i2__namespace.AbstractI18nService));
+        },
+        token: PipeProvider,
+        providedIn: "root"
+    });
+    PipeProvider.decorators = [ {
+        type: i0.Injectable,
+        args: [ {
+            providedIn: "root"
+        } ]
+    } ];
+    PipeProvider.ctorParameters = function() {
+        return [ {
+            type: i0.Compiler
+        }, {
+            type: i0.Injector
+        }, {
+            type: i1.DomSanitizer
+        }, {
+            type: i2.AbstractI18nService
+        } ];
+    };
+    var PipeService = function() {
+        function PipeService(pipeProvider, $app) {
+            this.pipeProvider = pipeProvider;
+            this.$app = $app;
+            this.supportedPipes = [ "toDate", "toCurrency", "prefix", "suffix", "numberToString", "stringToNumber", "timeFromNow", "trustAs", "sanitize" ];
+            if (this.$app.isApplicationType) {
+                this.supportedPipes.push("custom");
+            }
+        }
+        PipeService.prototype.getPipe = function(name) {
+            if (this.supportedPipes.includes(name)) {
+                return this.pipeProvider.getInstance(name);
+            } else {
+                throw Error("The pipe '" + name + "' could not be found");
+            }
+        };
+        return PipeService;
+    }();
+    PipeService.\u0275prov = i0__namespace.\u0275\u0275defineInjectable({
+        factory: function PipeService_Factory() {
+            return new PipeService(i0__namespace.\u0275\u0275inject(PipeProvider), i0__namespace.\u0275\u0275inject(i2__namespace.App));
+        },
+        token: PipeService,
+        providedIn: "root"
+    });
+    PipeService.decorators = [ {
+        type: i0.Injectable,
+        args: [ {
+            providedIn: "root"
+        } ]
+    } ];
+    PipeService.ctorParameters = function() {
+        return [ {
+            type: PipeProvider
+        }, {
+            type: i2.App
+        } ];
+    };
     var injectorMap = {
         DialogService: i2.AbstractDialogService,
         i18nService: i2.AbstractI18nService,
+        PipeService: PipeService,
         statePersistence: i2.StatePersistence,
         SpinnerService: i2.AbstractSpinnerService,
         StatePersistenceService: i2.StatePersistence,
@@ -83308,110 +83816,6 @@
             type: i2.AbstractI18nService
         } ];
     };
-    var PipeProvider = function() {
-        function PipeProvider(compiler, injector, domSanitizer, i18service) {
-            var _this = this;
-            var _a;
-            this.compiler = compiler;
-            this.injector = injector;
-            this.domSanitizer = domSanitizer;
-            this.i18service = i18service;
-            this._locale = i2.getSessionStorageItem("selectedLocale") || "en";
-            this.formatsByLocale = (_a = this.i18service) === null || _a === void 0 ? void 0 : _a.getwidgetLocale();
-            this.preparePipeMeta = function(reference, name, pure, diDeps) {
-                if (diDeps === void 0) {
-                    diDeps = [];
-                }
-                return {
-                    type: {
-                        reference: reference,
-                        diDeps: diDeps
-                    },
-                    name: name,
-                    pure: pure
-                };
-            };
-            this._pipeData = [ this.preparePipeMeta(common.AsyncPipe, "async", false, [ i0.ChangeDetectorRef ]), this.preparePipeMeta(common.SlicePipe, "slice", false), this.preparePipeMeta(common.PercentPipe, "percent", true, [ this._locale ]), this.preparePipeMeta(common.I18nPluralPipe, "i18nPlural", true, [ common.NgLocalization ]), this.preparePipeMeta(common.I18nSelectPipe, "i18nSelect", true), this.preparePipeMeta(common.KeyValuePipe, "keyvalue", false, [ i0.KeyValueDiffers ]), this.preparePipeMeta(base.FileIconClassPipe, "fileIconClass", true), this.preparePipeMeta(base.FileExtensionFromMimePipe, "fileExtensionFromMime", true), this.preparePipeMeta(base.StateClassPipe, "stateClass", true), this.preparePipeMeta(base.FileSizePipe, "filesize", true), this.preparePipeMeta(base.FilterPipe, "filter", true), this.preparePipeMeta(common.UpperCasePipe, "uppercase", true), this.preparePipeMeta(common.LowerCasePipe, "lowercase", true), this.preparePipeMeta(common.JsonPipe, "json", false), this.preparePipeMeta(common.DecimalPipe, "number", true, [ this._locale ]), this.preparePipeMeta(common.TitleCasePipe, "titlecase", true), this.preparePipeMeta(common.CurrencyPipe, "currency", true, [ this._locale ]), this.preparePipeMeta(common.DatePipe, "date", true, [ this._locale ]), this.preparePipeMeta(base.ToDatePipe, "toDate", true, [ new common.DatePipe(this._locale) ]), this.preparePipeMeta(base.ToNumberPipe, "toNumber", true, [ new common.DecimalPipe(this._locale), this.i18service ]), this.preparePipeMeta(base.ToCurrencyPipe, "toCurrency", true, [ new common.DecimalPipe(this._locale), this.i18service ]), this.preparePipeMeta(base.PrefixPipe, "prefix", true), this.preparePipeMeta(base.SuffixPipe, "suffix", true), this.preparePipeMeta(base.TimeFromNowPipe, "timeFromNow", true), this.preparePipeMeta(base.NumberToStringPipe, "numberToString", true, [ new common.DecimalPipe(this._locale) ]), this.preparePipeMeta(base.StringToNumberPipe, "stringToNumber", true), this.preparePipeMeta(base.CustomPipe, "custom", true, [ this.injector.get(i2.CustomPipeManager) ]), this.preparePipeMeta(base.TrustAsPipe, "trustAs", true, [ this.domSanitizer ]), this.preparePipeMeta(base.SanitizePipe, "sanitize", true, [ this.domSanitizer ]) ];
-            this._pipeMeta = new Map;
-            this._pipeData.forEach((function(v) {
-                _this._pipeMeta.set(v.name, v);
-            }));
-        }
-        PipeProvider.prototype.unknownPipe = function(name) {
-            throw Error("The pipe '" + name + "' could not be found");
-        };
-        PipeProvider.prototype.meta = function(name) {
-            var meta = this._pipeMeta.get(name);
-            if (!meta) {
-                this.unknownPipe(name);
-            }
-            return meta;
-        };
-        PipeProvider.prototype.getPipeNameVsIsPureMap = function() {
-            var _map = new Map;
-            this._pipeMeta.forEach((function(v, k) {
-                _map.set(k, v.pure);
-            }));
-            return _map;
-        };
-        PipeProvider.prototype.resolveDep = function(dep) {
-            return this.injector.get(dep.token.identifier.reference);
-        };
-        PipeProvider.prototype.getInstance = function(name) {
-            var e_1, _b;
-            var _c = this.meta(name).type, ref = _c.reference, deps = _c.diDeps;
-            if (!ref) {
-                this.unknownPipe(name);
-            }
-            if (!deps.length) {
-                return new ref;
-            } else {
-                var args = [];
-                try {
-                    for (var deps_1 = __values(deps), deps_1_1 = deps_1.next(); !deps_1_1.done; deps_1_1 = deps_1.next()) {
-                        var dep = deps_1_1.value;
-                        args.push(dep);
-                    }
-                } catch (e_1_1) {
-                    e_1 = {
-                        error: e_1_1
-                    };
-                } finally {
-                    try {
-                        if (deps_1_1 && !deps_1_1.done && (_b = deps_1.return)) _b.call(deps_1);
-                    } finally {
-                        if (e_1) throw e_1.error;
-                    }
-                }
-                return new (ref.bind.apply(ref, __spreadArray([ void 0 ], __read(args))));
-            }
-        };
-        return PipeProvider;
-    }();
-    PipeProvider.\u0275prov = i0__namespace.\u0275\u0275defineInjectable({
-        factory: function PipeProvider_Factory() {
-            return new PipeProvider(i0__namespace.\u0275\u0275inject(i0__namespace.Compiler), i0__namespace.\u0275\u0275inject(i0__namespace.INJECTOR), i0__namespace.\u0275\u0275inject(i1__namespace.DomSanitizer), i0__namespace.\u0275\u0275inject(i2__namespace.AbstractI18nService));
-        },
-        token: PipeProvider,
-        providedIn: "root"
-    });
-    PipeProvider.decorators = [ {
-        type: i0.Injectable,
-        args: [ {
-            providedIn: "root"
-        } ]
-    } ];
-    PipeProvider.ctorParameters = function() {
-        return [ {
-            type: i0.Compiler
-        }, {
-            type: i0.Injector
-        }, {
-            type: i1.DomSanitizer
-        }, {
-            type: i2.AbstractI18nService
-        } ];
-    };
     var AppComponent = function() {
         function AppComponent(_pipeProvider, _appRef, elRef, oAuthService, dialogService, spinnerService, ngZone, router$1, app, appManager) {
             var _this = this;
@@ -83548,7 +83952,7 @@
         type: i0.Component,
         args: [ {
             selector: "app-root",
-            template: '<ng-container *ngIf="startApp">\n    <router-outlet></router-outlet>\n    <div wmContainer partialContainer content="Common" hidden class="ng-hide" *ngIf="isApplicationType"></div>\n    <app-spinner name="globalspinner" classname="global-spinner" role="alert" aria-live="assertive" [attr.aria-label]="spinner.arialabel || \'Loading\'" [show]="spinner.show" [spinnermessages]="spinner.messages"></app-spinner>\n    <div wmDialog name="oAuthLoginDialog" title="Application is requesting you to sign in with"\n         close.event="closeOAuthDialog()">\n        <ng-template #dialogBody>\n            <ul class="list-items">\n                <li class="list-item" *ngFor="let provider of providersConfig">\n                    <button class="btn" (click)="provider.invoke()">{{provider.name}}</button>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n    <div wmConfirmDialog name="_app-confirm-dialog" title.bind="title" message.bind="message" oktext.bind="oktext"\n         canceltext.bind="canceltext" closable="false" iconclass.bind="iconclass"\n         escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>\n    <div wmAppExt></div>\n    <i id="wm-mobile-display"></i>\n</ng-container>\n\x3c!--Dummy container to create the component dynamically--\x3e\n<ng-container #dynamicComponent></ng-container>\n',
+            template: '<ng-container *ngIf="startApp">\n    <router-outlet></router-outlet>\n    <div wmContainer partialContainer content="Common" hidden class="ng-hide" *ngIf="isApplicationType"></div>\n    <app-spinner name="globalspinner" classname="global-spinner" role="alert" aria-live="assertive" [attr.aria-label]="spinner.arialabel || \'Loading\'" [show]="spinner.show" [spinnermessages]="spinner.messages"></app-spinner>\n    <div wmDialog name="oAuthLoginDialog" title="Application is requesting you to sign in with"\n         close.event="closeOAuthDialog()">\n        <ng-template #dialogBody>\n            <ul class="list-items">\n                <li class="list-item" *ngFor="let provider of providersConfig">\n                    <button class="btn" (click)="provider.invoke()">{{provider.name}}</button>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n    <div wmConfirmDialog name="_app-confirm-dialog" title.bind="title" message.bind="message" oktext.bind="oktext"\n         canceltext.bind="canceltext" closable="false" iconclass.bind="iconclass"\n         escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>\n    <div  *ngIf="!isApplicationType" wmConfirmDialog name="PrefabConfirmDialog" title.bind="title" message.bind="text" oktext.bind="okButtonText"\n         canceltext.bind="cancelButtonText" closable="false" iconclass.bind="iconclass"\n         escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>\n    <div  *ngIf="!isApplicationType" wmAlertDialog name="PrefabAlertDialog" title.bind="title" message.bind="text" oktext.bind="okButtonText"\n         canceltext.bind="cancelButtonText" closable="false" iconclass.bind="iconclass"\n         escape.event="onEscape()" ok.event="onOk()" cancel.event="onCancel()" close.event="onClose()" opened.event="onOpen()"></div>\n    <div wmAppExt></div>\n    <i id="wm-mobile-display"></i>\n</ng-container>\n\x3c!--Dummy container to create the component dynamically--\x3e\n<ng-container #dynamicComponent></ng-container>\n',
             encapsulation: i0.ViewEncapsulation.None
         } ]
     } ];
@@ -84402,7 +84806,7 @@
                     provide: http.HTTP_INTERCEPTORS,
                     useClass: HttpCallInterceptor,
                     multi: true
-                }, common.DecimalPipe, common.DatePipe, AppManagerService, PrefabManagerService, AuthGuard, RoleGuard, PageNotFoundGaurd, CanDeactivatePageGuard, AppJSResolve, AppExtensionJSResolve, I18nResolve, getSettingProvider(MAX_CACHE_SIZE, 10), getSettingProvider(MAX_CACHE_AGE, 30 * 60) ]
+                }, PipeService, common.DecimalPipe, common.DatePipe, AppManagerService, PrefabManagerService, AuthGuard, RoleGuard, PageNotFoundGaurd, CanDeactivatePageGuard, AppJSResolve, AppExtensionJSResolve, I18nResolve, getSettingProvider(MAX_CACHE_SIZE, 10), getSettingProvider(MAX_CACHE_AGE, 30 * 60) ]
             };
         };
         RuntimeBaseModule.prototype.getDeviceDetails = function() {
@@ -84595,6 +84999,7 @@
     exports.NavigationServiceImpl = NavigationServiceImpl;
     exports.PageNotFoundGaurd = PageNotFoundGaurd;
     exports.PipeProvider = PipeProvider;
+    exports.PipeService = PipeService;
     exports.PrefabConfigProvider = PrefabConfigProvider;
     exports.PrefabDirective = PrefabDirective;
     exports.PrefabManagerService = PrefabManagerService;