@wavemaker/app-runtime-wm-build 11.4.0-next.141707 → 11.4.0-next.1417071

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

@@ -5052,7 +5052,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 +8657,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 = ",";
@@ -11214,6 +11229,10 @@
             if (openedDialogs.indexOf(ref) !== -1) {
                 openedDialogs.splice(openedDialogs.indexOf(ref), 1);
             }
+            if (openedDialogs.length === 0 && core$1.isMobileApp()) {
+                var parentSelector = $("body > app-root")[0];
+                parentSelector.removeAttribute("aria-hidden");
+            }
         };
         DialogServiceImpl.prototype.getOpenedDialogs = function() {
             return openedDialogs;
@@ -12389,7 +12408,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 +13042,7 @@
     exports.getWidgetPropsByType = getWidgetPropsByType;
     exports.groupData = groupData;
     exports.handleHeaderClick = handleHeaderClick;
+    exports.hasLinkToCurrentPage = hasLinkToCurrentPage;
     exports.interpolateBindExpressions = interpolateBindExpressions;
     exports.isActiveNavItem = isActiveNavItem;
     exports.isBooleanAttr = isBooleanAttr;
@@ -14199,7 +14220,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);
@@ -14209,7 +14230,7 @@
                 } else {
                     setDefaultPlaceholder(attrs, widgetType, 2);
                 }
-                return "<" + tagName$X + ' data-role="' + dataRole + '" [formGroup]="' + pCounter + '.ngform" wmFormField captionPosition #' + counter + '="wmFormField" widgettype="' + widgetType + '" ' + transpiler.getFormMarkupAttr(attrs) + '>\n                        <div class="live-field form-group app-composite-widget clearfix caption-{{' + pCounter + '.captionposition}}" widget="' + widgetType + '">\n                            <label [hidden]="!' + counter + '.displayname" class="app-label control-label formfield-label {{' + pCounter + '._captionClass}}"\n                                        [ngStyle]="{width: ' + pCounter + ".captionsize}\" [ngClass]=\"{'text-danger': " + counter + "._control?.invalid && " + counter + "._control?.touched && " + pCounter + ".isUpdateMode,\n                                         required: " + pCounter + ".isUpdateMode && " + counter + '.required}" [textContent]="' + counter + '.displayname"> </label>\n                            <div [ngClass]="' + counter + ".displayname ? " + pCounter + "._widgetClass : '" + controlLayout + '\'">\n                                 <label class="form-control-static app-label" *ngIf="!(' + pCounter + ".isUpdateMode || " + counter + ".viewmodewidget === 'default' || " + counter + ".widgettype === 'upload')\"\n                                       [hidden]=\"" + pCounter + ".isUpdateMode || " + counter + ".viewmodewidget === 'default' || " + counter + ".widgettype === 'upload'\" [innerHTML]=\"" + getCaptionByWidget(attrs, widgetType, counter) + '"></label>\n                                ' + getTemplate(attrs, widgetType, eventsTmpl, counter, pCounter, isInList) + '\n                                <span aria-hidden="true" *ngIf="' + counter + '.showPendingSpinner" class="form-field-spinner fa fa-circle-o-notch fa-spin form-control-feedback"></span>\n                                <p *ngIf="!(' + counter + "._control?.invalid && " + counter + "._control?.touched) && " + pCounter + '.isUpdateMode"\n                                   class="help-block" aria-hidden="true" role="alert" aria-live="polite" [textContent]="' + counter + '.hint"></p>\n                                ' + validationMsg + "\n                            </div>\n                        </div>";
+                return "<" + tagName$X + ' data-role="' + dataRole + '" [formGroup]="' + pCounter + '.ngform" wmFormField captionPosition #' + counter + '="wmFormField" widgettype="' + widgetType + '" ' + transpiler.getFormMarkupAttr(attrs) + '>\n                        <div class="live-field form-group app-composite-widget clearfix caption-{{' + pCounter + '.captionposition}}" widget="' + widgetType + '">\n                            <label [hidden]="!' + counter + '.displayname" class="app-label control-label formfield-label {{' + pCounter + '._captionClass}}"\n                                        [ngStyle]="{width: ' + pCounter + ".captionsize}\" [ngClass]=\"{'text-danger': " + counter + "._control?.invalid && " + counter + "._control?.touched && " + pCounter + ".isUpdateMode,\n                                         required: " + pCounter + ".isUpdateMode && " + counter + '.required}" [textContent]="' + counter + '.displayname"> </label>\n                            <div [ngClass]="' + counter + ".displayname ? " + pCounter + "._widgetClass : '" + controlLayout + '\'">\n                                 <label class="form-control-static app-label"\n                                       [hidden]="' + pCounter + ".isUpdateMode || " + counter + ".viewmodewidget === 'default' || " + counter + ".widgettype === 'upload'\" [innerHTML]=\"" + getCaptionByWidget(attrs, widgetType, counter) + '"></label>\n                                ' + getTemplate(attrs, widgetType, eventsTmpl, counter, pCounter, isInList) + '\n                                <span aria-hidden="true" *ngIf="' + counter + '.showPendingSpinner" class="form-field-spinner fa fa-circle-o-notch fa-spin form-control-feedback"></span>\n                                <p *ngIf="!(' + counter + "._control?.invalid && " + counter + "._control?.touched) && " + pCounter + '.isUpdateMode"\n                                   class="help-block" aria-hidden="true" role="alert" aria-live="polite" [textContent]="' + counter + '.hint"></p>\n                                ' + validationMsg + "\n                            </div>\n                        </div>";
             },
             post: function() {
                 return "</" + tagName$X + ">";
@@ -21253,8 +21274,8 @@
     var \u02750 = getChangeEvt;
     var overrideSummerNote = function() {
         if (!$.summernote.__overidden) {
-            var origFn_1 = $.summernote.ui.button.bind($.summernote);
-            $.summernote.ui.button = function() {
+            var origFn_1 = $.summernote.ui_template().button.bind($.summernote);
+            $.summernote.ui_template.button = function() {
                 var args = [];
                 for (var _i = 0; _i < arguments.length; _i++) {
                     args[_i] = arguments[_i];
@@ -27204,6 +27225,7 @@
         function BaseDateTimeComponent(inj, WIDGET_CONFIG) {
             var _this = _super.call(this, inj, WIDGET_CONFIG) || this;
             _this.isReadOnly = false;
+            _this.clicked = false;
             _this.formatsByLocale = {
                 timezone: ""
             };
@@ -27370,6 +27392,7 @@
         };
         BaseDateTimeComponent.prototype.setActiveDateFocus = function(newDate, isMouseEvent) {
             var _this = this;
+            this.setNextData(newDate);
             var activeMonth = this.activeDate.getMonth();
             if (!isMouseEvent) {
                 if (newDate.getMonth() < activeMonth) {
@@ -27407,15 +27430,35 @@
                 this.loadYears();
             }
         };
+        BaseDateTimeComponent.prototype.getMonth = function(date, inc) {
+            var currentMonth = new Date(date);
+            var month = currentMonth.getMonth();
+            var year = currentMonth.getFullYear();
+            month += inc;
+            var newDate = new Date(year, month);
+            var fullMonth = newDate.toLocaleString("en-US", {
+                month: "long"
+            });
+            return {
+                date: newDate,
+                fullMonth: fullMonth
+            };
+        };
         BaseDateTimeComponent.prototype.addDatepickerMouseEvents = function() {
             var _this = this;
             var datePickerHead = $(".bs-datepicker-head");
             datePickerHead.find(".previous").click((function(event) {
+                _this.next = _this.getMonth(_this.activeDate, 0);
+                _this.prev = _this.getMonth(_this.activeDate, -2);
+                _this.clicked = true;
                 if (event.originalEvent) {
                     _this.setFocusForDate(-1);
                 }
             }));
             datePickerHead.find(".next").click((function(event) {
+                _this.next = _this.getMonth(_this.activeDate, 2);
+                _this.prev = _this.getMonth(_this.activeDate, 0);
+                _this.clicked = true;
                 if (event.originalEvent) {
                     _this.setFocusForDate(1);
                 }
@@ -27431,8 +27474,8 @@
                     _this.setFocusForMonthOrDay();
                 }
             }));
-            datePickerHead.find(".next").attr("aria-label", "Next");
-            datePickerHead.find(".previous").attr("aria-label", "Previous");
+            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());
         };
         BaseDateTimeComponent.prototype.setFocusForMonthOrDay = function() {
             var activeMonthOrYear = $(".bs-datepicker-head .current").first().text();
@@ -27498,6 +27541,10 @@
             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() {
@@ -27616,6 +27663,7 @@
         };
         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()) {
@@ -28179,7 +28227,6 @@
                 if (!skipFocus) {
                     this.onDateTimeInputFocus();
                 }
-                return;
             }
             if ($event.type === "click") {
                 this.invokeEventCallback("click", {
@@ -28253,7 +28300,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]="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',
             providers: [ base.provideAs(DateComponent, forms.NG_VALUE_ACCESSOR, true), base.provideAs(DateComponent, forms.NG_VALIDATORS, true), base.provideAsWidgetRef(DateComponent) ]
         } ]
     } ];
@@ -33572,9 +33619,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;
@@ -33588,6 +33636,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;
                     }
@@ -33662,26 +33713,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") {
@@ -33752,6 +33799,8 @@
             type: core$1.Injector
         }, {
             type: router.Router
+        }, {
+            type: core.App
         }, {
             type: core.UserDefinedExecutionContext
         }, {
@@ -33869,8 +33918,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;
@@ -33896,10 +33946,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() {
@@ -33968,6 +34022,11 @@
                 $event.stopPropagation();
             }
         };
+        MenuDropdownItemComponent.prototype.ngOnDestroy = function() {
+            if (this.highlightActiveLinkSubscription) {
+                this.highlightActiveLinkSubscription();
+            }
+        };
         return MenuDropdownItemComponent;
     }();
     MenuDropdownItemComponent.decorators = [ {
@@ -33979,6 +34038,8 @@
     } ];
     MenuDropdownItemComponent.ctorParameters = function() {
         return [ {
+            type: core.App
+        }, {
             type: MenuComponent
         }, {
             type: core.UserDefinedExecutionContext
@@ -35670,6 +35731,8 @@
             }));
             var popoverStartBtn = popoverContainer.querySelector(".popover-start");
             var popoverEndBtn = popoverContainer.querySelector(".popover-end");
+            popoverStartBtn.setAttribute("aria-hidden", "true");
+            popoverEndBtn.setAttribute("aria-hidden", "true");
             popoverStartBtn.onkeydown = function(event) {
                 var action = _this.keyEventPlugin.constructor.getEventFullKey(event);
                 if (action === "shift.tab") {
@@ -36417,6 +36480,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.isMobileApp()) {
+                var parentSelector = $("body > app-root")[0];
+                parentSelector.setAttribute("aria-hidden", "true");
+            }
         };
         BaseDialog.prototype.close = function() {
             if (this.dialogRef) {
@@ -42314,7 +42381,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() {
@@ -44220,10 +44287,15 @@
             var dataSource = this.datasource;
             if (dataSource && dataSource.execute(core.DataSource.Operation.IS_API_AWARE) && core.isDataSourceEqual(data.variable, dataSource)) {
                 this.ngZone.run((function() {
-                    var _a;
+                    var _a, _b, _c;
                     _this.handleStateParams(data);
                     _this.variableInflight = data.active;
-                    _this.noDataFound = !((_a = data.data) === null || _a === void 0 ? void 0 : _a.pagination.totalElements);
+                    var totalEle = (_b = (_a = data.data) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.totalElements;
+                    if (!_.isUndefined(totalEle)) {
+                        _this.noDataFound = totalEle === 0 ? true : false;
+                    } else {
+                        _this.noDataFound = _.isEmpty((_c = data.data) === null || _c === void 0 ? void 0 : _c.data);
+                    }
                 }));
             }
         };
@@ -44293,10 +44365,10 @@
             }
         };
         ListComponent.prototype.updateFieldDefs = function(newVal) {
-            var _b;
+            var _d;
             if (this.infScroll || this.onDemandLoad) {
-                _b = __read(this.paginationService.updateFieldsOnPagination(this, newVal), 2), this.fieldDefs = _b[0], 
-                this.currentPage = _b[1];
+                _d = __read(this.paginationService.updateFieldsOnPagination(this, newVal), 2), this.fieldDefs = _d[0], 
+                this.currentPage = _d[1];
             } else {
                 this.fieldDefs = newVal;
             }
@@ -44678,7 +44750,7 @@
         ListComponent.prototype.handleKeyDown = function($event, action) {
             var _this = this;
             $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;
@@ -45032,7 +45104,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<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" *ngIf="enablereorder">\n        Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n\n    <div aria-live="assertive" *ngIf="listItems && enablereorder && currentIndex" class="sr-only" >\n        {{ariaText + currentIndex + \' of \' +  listItems.length}}\n    </div>    \n</div>\n\n<ul [attr.tabindex]="tabindex" [attr.aria-describedby] = "titleId"  class="app-livelist-container clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}} {{listclass}}" role="list"\n    (keydown.enter)="handleKeyDown($event, \'select\')"\n\n    (keydown.space)="handleKeyDown($event, \'space\')"\n\n    (keydown.arrowup)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowdown)="handleKeyDown($event, \'focusNext\')"\n    (keydown.arrowleft)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowright)="handleKeyDown($event, \'focusNext\')"\n\n    (keydown.shift.arrowup)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowdown)="handleKeyDown($event, \'selectNext\')"\n    (keydown.shift.arrowleft)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowright)="handleKeyDown($event, \'selectNext\')"\n    [hidden]="noDataFound && !variableInflight"\n>\n    <ng-template [ngIf]="!groupby" [ngIfElse]="groupedListTemplate">\n        <li *ngFor="let item of fieldDefs; index as $index; first as $first; last as $last;" class="app-list-item {{direction === \'horizontal\' ? \'\' : itemsPerRowClass}}" [ngClass]="listItemRef.itemClass"\n            [wmListItem]="item"\n            #listItemRef="listItemRef"\n            [attr.tabindex]="tabindex"\n            role="listitem">\n            <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n        </li>\n    </ng-template>\n    <ng-container [ngTemplateOutlet]="listLeftActionTemplate"></ng-container>\n    <ng-container [ngTemplateOutlet]="listRightActionTemplate"></ng-container>\n</ul>\n\n<div class="no-data-msg" *ngIf="noDataFound && !variableInflight" [textContent]="nodatamessage"></div>\n\n<div class="loading-data-msg" *ngIf="variableInflight && !pulltorefresh">\n    <span>\n        <i class="app-icon panel-icon fa-spin" aria-hidden="true" [ngClass]="loadingicon"></i>\n        <span class="sr-only">Loading</span>\n        <span class="loading-text" [textContent]="loadingdatamsg"></span>\n    </span>\n</div>\n\n<nav class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisableNext" *ngIf="navigation === \'Inline\' && !noDataFound">\n    <ul class="pager">\n        <li class="next" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisableNext  : true)}">\n            <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'next\', $event)">\n                <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',
             providers: [ base.provideAsWidgetRef(ListComponent) ]
         } ]
     } ];
@@ -45547,6 +45619,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({
@@ -45627,6 +45703,7 @@
             _this.columns = {};
             _this.formfields = {};
             _this.enablesort = true;
+            _this.showviewlessbutton = false;
             _this.primaryKey = [];
             _this.selectedItems = [];
             _this.selectedItemChange = new rxjs.Subject;
@@ -45669,6 +45746,7 @@
                 data: [],
                 colDefs: [],
                 startRowIndex: 1,
+                mode: "",
                 sortInfo: {
                     field: "",
                     direction: ""
@@ -45699,6 +45777,10 @@
                 isSearchTrigerred: false,
                 isDatasetUpdated: false,
                 isDataUpdatedByUser: false,
+                showviewlessbutton: false,
+                ondemandmessage: "",
+                viewlessmessage: "",
+                loadingdatamsg: "",
                 isNextPageData: undefined,
                 ACTIONS: {
                     DELETE: "delete",
@@ -45723,6 +45805,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);
                 },
@@ -45757,7 +45847,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");
                         }
@@ -45766,9 +45858,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
@@ -46208,9 +46302,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) {
@@ -46488,6 +46587,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);
             }
@@ -47225,6 +47328,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":
@@ -50949,15 +51057,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();
         }
     };
@@ -51254,7 +51367,7 @@
             }));
         };
         FormComponent.prototype.highlightInvalidFields = function() {
-            setTouchedState(this.ngform);
+            setTouchedState(this, this.ngform, "");
         };
         FormComponent.prototype.validateFieldsOnSubmit = function() {
             this.setValidationMsgs();
@@ -51783,8 +51896,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;
@@ -51843,7 +51956,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);
@@ -52364,10 +52477,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;
@@ -52589,7 +52710,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) {
@@ -52601,8 +52722,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) {
@@ -61798,9 +61926,9 @@
 }));
 
 (function(global, factory) {
-    typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@wm/core"), require("angular2-websocket/angular2-websocket"), require("@metrichor/jmespath"), require("@angular/core"), require("@angular/router"), require("@wm/oAuth"), require("@wm/security"), require("@wavemaker/variables"), require("@angular/common"), require("@angular/common/http"), require("ngx-toastr"), require("@wm/http")) : typeof define === "function" && define.amd ? define("@wm/variables", [ "exports", "@wm/core", "angular2-websocket/angular2-websocket", "@metrichor/jmespath", "@angular/core", "@angular/router", "@wm/oAuth", "@wm/security", "@wavemaker/variables", "@angular/common", "@angular/common/http", "ngx-toastr", "@wm/http" ], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, 
-    factory((global.wm = global.wm || {}, global.wm.variables = {}), global.wm.core, global.angularWebSocket, global.jmespath, global.ng.core, global.ng.router, global.wm.oAuth, global.wm.security, global.wm_common_variables, global.ng.common, global.ng.common.http, global.ngxToastr, global.wm.http));
-})(this, (function(exports, core, angular2Websocket, jmespath, core$1, router, oAuth, security, variables, common, http, ngxToastr, http$1) {
+    typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@wavemaker/variables"), require("@wm/core"), require("angular2-websocket/angular2-websocket"), require("@metrichor/jmespath"), require("@angular/core"), require("@angular/router"), require("@wm/oAuth"), require("@wm/security"), require("@angular/common"), require("@angular/common/http"), require("ngx-toastr"), require("@wm/http")) : typeof define === "function" && define.amd ? define("@wm/variables", [ "exports", "@wavemaker/variables", "@wm/core", "angular2-websocket/angular2-websocket", "@metrichor/jmespath", "@angular/core", "@angular/router", "@wm/oAuth", "@wm/security", "@angular/common", "@angular/common/http", "ngx-toastr", "@wm/http" ], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, 
+    factory((global.wm = global.wm || {}, global.wm.variables = {}), global.wm_common_variables, global.wm.core, global.angularWebSocket, global.jmespath, global.ng.core, global.ng.router, global.wm.oAuth, global.wm.security, global.ng.common, global.ng.common.http, global.ngxToastr, global.wm.http));
+})(this, (function(exports, variables, core, angular2Websocket, jmespath, core$1, router, oAuth, security, common, http, ngxToastr, http$1) {
     "use strict";
     var CONSTANTS = {
         hasCordova: window["cordova"] !== undefined,
@@ -62102,14 +62230,7 @@
             }
         }
     };
-    var $rootScope = {
-        project: {
-            deployedUrl: "./",
-            id: "temp_id"
-        },
-        projectName: "test_project_name",
-        isApplicationType: true
-    };
+    var $rootScope = variables.$rootScope;
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -65413,6 +65534,9 @@
                 }
             } : _a, scripts = _b.resources.scripts;
             var baseUrl = getPrefabBaseUrl(prefabName);
+            scripts = scripts.filter((function(script) {
+                return !script.startsWith("npm://");
+            }));
             var _scripts = scripts.map((function(url) {
                 return getPrefabResourceUrl(url, baseUrl);
             }));