@wavemaker/app-runtime-wm-build 11.4.0-next.24565 → 11.4.0-next.24569

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

@@ -11229,6 +11229,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;
@@ -12404,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) {
@@ -14215,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);
@@ -26919,22 +26924,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;
@@ -26983,6 +26990,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;
@@ -27004,6 +27014,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;
         };
@@ -27038,7 +27052,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() {
@@ -27121,8 +27135,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") {
@@ -28295,7 +28309,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) ]
         } ]
     } ];
@@ -35726,6 +35740,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") {
@@ -36425,15 +36441,17 @@
             _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) {
                     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 = closeReason === "esc" || closeReason === "backdrop-click" || _this.dialogId && (closeReason === null || closeReason === void 0 ? void 0 : closeReason.id) === _this.dialogId ? _this.dialogService.getLastOpenedDialog() : _this.dialogService.getDialogRefFromClosedDialogs();
                 if (ref === _this) {
                     _this.dialogService.removeFromOpenedDialogs(ref);
                     _this.dialogService.removeFromClosedDialogs(ref);
@@ -36473,6 +36491,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) {
@@ -42304,11 +42326,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);
@@ -42425,9 +42467,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)) {
@@ -42704,7 +42744,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) ]
         } ]
     } ];
@@ -44737,7 +44777,7 @@
             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.target.classList.contains("note-editable")) && $event.keyCode === 32)) {
                 $event.preventDefault();
@@ -44779,27 +44819,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);
@@ -44809,27 +44843,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);
@@ -44851,11 +44879,10 @@
                 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 ";
                 } else {
-                    this.ariaText = name + " dropped, final position ";
+                    this.ariaText = "Item " + this.currentIndex + " dropped, final position ";
                 }
             }
         };
@@ -45093,7 +45120,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" [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<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) ]
         } ]
     } ];
@@ -45713,6 +45740,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);
@@ -46458,6 +46486,9 @@
             set: function(newValue) {
                 var _a;
                 this.isDataLoading = false;
+                if (this.variableInflight && _.isEmpty(newValue)) {
+                    return;
+                }
                 this.variableInflight = false;
                 if (this.gridOptions.isNavTypeScrollOrOndemand()) {
                     _a = __read(this.paginationService.updateFieldsOnPagination(this, newValue), 2), 
@@ -46911,6 +46942,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);
@@ -47205,10 +47239,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":
@@ -51046,15 +51078,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();
         }
     };
@@ -51351,7 +51388,7 @@
             }));
         };
         FormComponent.prototype.highlightInvalidFields = function() {
-            setTouchedState(this.ngform);
+            setTouchedState(this, this.ngform, "");
         };
         FormComponent.prototype.validateFieldsOnSubmit = function() {
             this.setValidationMsgs();
@@ -51880,8 +51917,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;
@@ -51940,7 +51977,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);
@@ -52461,10 +52498,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;
@@ -52686,7 +52731,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) {
@@ -52698,8 +52743,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) {
@@ -58366,40 +58418,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,
@@ -58426,8 +58474,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);
@@ -58553,6 +58611,7 @@
         };
         TabPaneComponent.prototype.onPropertyChange = function(key, nv, ov) {
             var _this = this;
+            var _a;
             if (key === "content") {
                 if (this.isActive) {
                     setTimeout((function() {
@@ -58563,6 +58622,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 {
@@ -67518,10 +67581,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) {
@@ -67543,18 +67606,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();
@@ -67563,6 +67638,9 @@
             }));
         }
         MobilePageDirective.prototype.ngOnDestroy = function() {
+            this.subscriptions.map((function(s) {
+                return s.unsubscribe();
+            }));
             this._backBtnListenerDestroyer();
         };
         return MobilePageDirective;
@@ -67578,6 +67656,8 @@
             type: core.App
         }, {
             type: core$1.ElementRef
+        }, {
+            type: modal.BsModalService
         }, {
             type: core$2.DeviceService
         }, {