@wavemaker/app-runtime-wm-build 11.3.6-rc.5325 → 11.3.6-rc.5345

app-runtime-wm-build/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker/app-runtime-wm-build",
-    "version": "11.3.6-rc.5325",
+    "version": "11.3.6-rc.5345",
     "description": "All modules required for a wavemaker application.",
     "main": "index.js",
     "scripts": {

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

@@ -8973,11 +8973,9 @@
         });
     };
     var getKeyboardFocusableElements = function(element) {
-        var elementNodeList = element.querySelectorAll("a, button, input, textarea, select, details, iframe, embed, object, summary dialog, audio[controls], video[controls], [contenteditable]");
-        var elements = Array.from(elementNodeList);
-        return elements.filter((function(el) {
-            return !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && (!el.hasAttribute("tabindex") || el.hasAttribute("tabindex") && !el.getAttribute("tabindex").startsWith("-"));
-        }));
+        return [ element.querySelectorAll('a, button, input, textarea, select, details, iframe, embed, object, summary dialog, audio[controls], video[controls], [contenteditable], [tabindex]:not([tabindex="-1"])') ].filter((function(el) {
+            return !el[0].hasAttribute("disabled") && !el[0].hasAttribute("hidden");
+        }))[0];
     };
     exports.APPLY_STYLES_TYPE = void 0;
     (function(APPLY_STYLES_TYPE) {
@@ -15062,7 +15060,7 @@
                 }
                 var markup = "<" + tagName$q + " wmPopover " + transpiler.getAttrMarkup(attrs) + ">";
                 var contextAttrs = table ? 'let-row="row"' : "";
-                markup += "<ng-template " + contextAttrs + '><div tabindex="0" class="popover-start sr-only" aria-label="">popover content start</div>';
+                markup += "<ng-template " + contextAttrs + '><button class="popover-start"></button>';
                 if (popoverTemplate) {
                     markup += "" + (popoverTemplate ? popoverTemplate : "");
                 }
@@ -15073,7 +15071,7 @@
                 if (shared.get("hasPopoverContent")) {
                     markup += "</div>";
                 }
-                return markup + '<div tabindex="0" class="popover-end sr-only" aria-label="">popover content ended</div></ng-template></' + tagName$q + ">";
+                return markup + '<button class="popover-end"></button></ng-template></' + tagName$q + ">";
             }
         };
     }));
@@ -27416,18 +27414,14 @@
                 var newDay = newDate.getDate().toString();
                 _.filter($("span:contains(" + newDay + ")").not(".is-other-month"), (function(obj) {
                     if ($(obj).text() === newDay) {
-                        if ($(obj).hasClass("selected")) {
-                            $(obj).parent().attr("aria-selected", "true");
-                        }
                         $(obj).attr("aria-label", moment(newDate).format("dddd, MMMM Do YYYY"));
-                        $("[bsdatepickerdaydecorator]").not(".is-other-month").attr("tabindex", "-1");
-                        $(obj).attr("tabindex", "0");
                         $(obj).focus();
                         _this.activeDate = newDate;
                     }
                 }));
                 if (newDate.getMonth() === (new Date).getMonth() && newDate.getFullYear() === (new Date).getFullYear()) {
                     _this.hightlightToday();
+                    $("span:contains(" + (new Date).getDate().toString() + ")").not(".is-other-month").parent().attr("aria-selected", "true");
                 }
             }));
         };
@@ -27469,9 +27463,6 @@
                 if (event.originalEvent) {
                     _this.setFocusForDate(-1);
                 }
-                setTimeout((function() {
-                    $(".bs-datepicker-head .previous").focus();
-                }));
             }));
             datePickerHead.find(".next").click((function(event) {
                 _this.next = _this.getMonth(_this.activeDate, 2);
@@ -27480,9 +27471,6 @@
                 if (event.originalEvent) {
                     _this.setFocusForDate(1);
                 }
-                setTimeout((function() {
-                    $(".bs-datepicker-head .next").focus();
-                }));
             }));
             datePickerHead.find(".current").click((function(event) {
                 if (event.originalEvent) {
@@ -27497,19 +27485,6 @@
             }));
             datePickerHead.find(".next").attr("aria-label", "Next Month, " + this.next.fullMonth + " " + this.next.date.getFullYear());
             datePickerHead.find(".previous").attr("aria-label", "Previous Month, " + this.prev.fullMonth + " " + this.prev.date.getFullYear());
-            setTimeout((function() {
-                var currentNodes = datePickerHead.find(".current span");
-                var msg = "Changed to month ";
-                datePickerHead.find(".current").attr("aria-live", "assertive").attr("aria-atomic", "false");
-                if (_this.clicked) {
-                    if ($(currentNodes[0]).text()) {
-                        datePickerHead.find(".ng-star-inserted").prepend('<div class="sr-only">' + msg + "</div>");
-                    }
-                    if ($(currentNodes[1]).text()) {
-                        datePickerHead.find(".current").last().prepend('<div class="sr-only"> and year </div>');
-                    }
-                }
-            }));
         };
         BaseDateTimeComponent.prototype.setFocusForMonthOrDay = function() {
             var activeMonthOrYear = $(".bs-datepicker-head .current").first().text();
@@ -27645,6 +27620,8 @@
         BaseDateTimeComponent.prototype.loadMonths = function() {
             var _this = this;
             setTimeout((function() {
+                var datePickerBody = $(".bs-datepicker-body");
+                datePickerBody.find("table.months span").attr("tabindex", "0");
                 _this.addKeyBoardEventsForMonths();
                 _this.addDatepickerMouseEvents();
             }));
@@ -27687,6 +27664,8 @@
         BaseDateTimeComponent.prototype.loadYears = function() {
             var _this = this;
             setTimeout((function() {
+                var datePickerBody = $(".bs-datepicker-body");
+                datePickerBody.find("table.years span").attr("tabindex", "0");
                 _this.addKeyBoardEventsForYears();
                 _this.addDatepickerMouseEvents();
             }));
@@ -27703,8 +27682,6 @@
                 }
             }
             setTimeout((function() {
-                $(".bs-datepicker-body table.months span").attr("tabindex", "-1");
-                $(".bs-datepicker-body table.months span:contains(" + newMonth + ")").attr("tabindex", "0");
                 $(".bs-datepicker-body table.months span:contains(" + newMonth + ")").focus();
                 _this.activeDate = newDate;
             }));
@@ -27753,8 +27730,6 @@
                 }
             }
             setTimeout((function() {
-                $(".bs-datepicker-body table.years span").attr("tabindex", "-1");
-                $(".bs-datepicker-body table.years span:contains(" + newYear + ")").attr("tabindex", "0");
                 $(".bs-datepicker-body table.years span:contains(" + newYear + ")").focus();
                 _this.activeDate = newDate;
             }));
@@ -27921,6 +27896,11 @@
                     children[i].classList.remove("add-opacity");
                 }
                 displayInputElem.classList.remove("remove-opacity");
+                var allDateTimeElements = this.nativeElement.getElementsByTagName("*");
+                for (var i = 0; i < allDateTimeElements.length; i++) {
+                    allDateTimeElements[i].setAttribute("tabindex", this.tabindex);
+                }
+                displayInputElem.removeAttribute("tabindex");
             }
         };
         BaseDateTimeComponent.prototype.onDateTimeInputFocus = function(skipFocus) {
@@ -27937,6 +27917,11 @@
                     children[i].classList.add("add-opacity");
                 }
                 displayInputElem.classList.add("remove-opacity");
+                var allDateTimeElements = this.nativeElement.getElementsByTagName("*");
+                for (var i = 0; i < allDateTimeElements.length; i++) {
+                    allDateTimeElements[i].setAttribute("tabindex", "-1");
+                }
+                displayInputElem.setAttribute("tabindex", this.tabindex);
                 return;
             }
             if (displayInputElem && this._triggeredByUser) {
@@ -28019,10 +28004,7 @@
             this.isReadOnly = this.dataentrymode != "undefined" && !this.isDataEntryModeEnabledOnInput(this.dataentrymode);
             var mobileInput = this.getMobileInput();
             if (mobileInput) {
-                setTimeout((function() {
-                    mobileInput.style.width = mobileInput.parentElement.clientWidth + "px";
-                    mobileInput.style.height = mobileInput.parentElement.clientHeight + "px";
-                }));
+                mobileInput.style.width = mobileInput.parentElement.clientWidth + "px";
             }
         };
         BaseDateTimeComponent.prototype.ngOnDestroy = function() {
@@ -28285,7 +28267,7 @@
             if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
                 event.stopPropagation();
                 var action = this.keyEventPlugin.constructor.getEventFullKey(event);
-                if (action === "enter") {
+                if (action === "enter" || action === "arrowdown") {
                     var newVal = core$1.getDateObj(event.target.value, {
                         pattern: this.datepattern
                     });
@@ -28327,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]="loadNativeDateInput ? \'-1\' : tabindex"\n        [attr.aria-hidden]="!!loadNativeDateInput"\n        [value]="displayValue"\n        (click)="toggleDpDropdown($event, true)"\n        (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n        (blur)="onInputBlur($event)"\n        [disabled]="disabled || readonly"\n        [autofocus]="autofocus"\n        [required]="required"\n        [readOnly]="isReadOnly"\n        [attr.placeholder]="placeholder"\n        [attr.accesskey]="shortcutkey"\n        [attr.aria-label]="hint"\n        (change)="onDisplayDateChange($event)"\n        (keydown)="this._triggeredByUser = true; onDisplayKeydown($event);">\n\n    <span class="input-group-btn">\n        <button type="button"\n            class="btn btn-default btn-time"\n            [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n            [attr.aria-hidden]="!!loadNativeDateInput"\n            [disabled]="disabled || readonly"\n            [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n            aria-haspopup="true"\n            aria-expanded="false"\n            (click)="toggleDpDropdown($event, false)">\n            <i aria-hidden="true"\n                class="app-icon wm-sl-l sl-calendar"></i>\n        </button>\n    </span>\n    <div style="width: 0;display: inline-block;">\n    <input class="model-holder"\n        aria-label="datepicker dropdownmenu"\n        aria-controls="date"\n        [tabindex]="-1"\n        [attr.aria-hidden]="!!loadNativeDateInput"\n        [container]="containerTarget || \'body\'"\n        [bsConfig]="_dateOptions"\n        [isOpen]="isOpen"\n        #datepicker="bsDatepicker"\n        bsDatepicker\n        [daysDisabled]="excludedDaysToDisable"\n        [datesDisabled]="excludedDatesToDisable"\n        placement="bottom right"\n        [isDisabled]="disabled || readonly"\n        [bsValue]="bsDataValue"\n        (onShown)="onDatePickerOpen()"\n        (onHidden)="hideDatepickerDropdown()"\n        (bsValueChange)="onDateChange($event)">\n</div>\n\n<ng-template [ngIf]="loadNativeDateInput">\n    <wm-datetimepicker\n        dateTimePicker\n        mode="DATE"\n        [config]="_dateOptions"\n        [placement]="modal"\n        [excludedDaysToDisable]="excludedDaysToDisable"\n        [excludedDatesToDisable]="excludedDatesToDisable"\n        [displayFormat]="dateInputFormat"\n        [value]="bsDataValue"\n        (change)="onDateChange($event)">\n    </wm-datetimepicker>\n    <div class="mobile-input mobile-datepicker-container"\n        [tabindex]="tabindex || 0"\n        (focus)="onDateTimeInputFocus(true); invokeOnFocus($event);"\n        (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n        [attr.aria-label]="displayValue ? \'Change Date\' + displayValue : \'Choose Date\'"\n        (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n    </div>\n</ng-template>\n',
+            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) ]
         } ]
     } ];
@@ -28779,7 +28761,7 @@
         type: core.Component,
         args: [ {
             selector: "[wmDateTime]",
-            template: '    <div dropdown\n        [isOpen]="isTimeOpen"\n        autoClose="false"\n        [container]="\'body\'"\n        (onShown)="onTimepickerOpen()"\n        style="display: inherit;">\n        <input class="form-control app-textbox display-input"\n            [attr.aria-label]="hint"\n            focus-target\n            [name]="name"\n            [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n            [attr.aria-hidden]="!!loadNativeDateInput"\n            type="text"\n            [value]="displayValue"\n            (click)="toggleDpDropdown($event, true)"\n            (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n            (blur)="onInputBlur($event)"\n            (change)="onDateChange($event)"\n            [autofocus]="autofocus"\n            [disabled]="disabled || readonly || isCurrentDate"\n            [required]="required"\n            [readOnly]="isReadOnly"\n            [attr.placeholder]="placeholder"\n            [attr.accesskey]="shortcutkey"\n            (keydown)="this._triggeredByUser = true; onDisplayKeydown($event)">\n\n        <span class="input-group-btn">\n            <button type="button"\n                class="btn btn-default btn-date"\n                [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n                [attr.aria-hidden]="!!loadNativeDateInput"\n                [disabled]="disabled || readonly || isCurrentDate"\n                [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleDpDropdown($event, false)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-calendar"></i>\n            </button>\n            <button type="button"\n                class="btn btn-default btn-time"\n                [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n                [attr.aria-hidden]="!!loadNativeDateInput"\n                [disabled]="disabled || readonly || isCurrentDate"\n                aria-label="Select time"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleTimePicker(!isTimeOpen, $event)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-time"></i>\n            </button>\n        </span>\n        <div style="width: 0;display: inline-block;">\n        <input class="model-holder"\n            aria-label="datepicker dropdownmenu"\n            aria-controls="date"\n            focus-target\n            [tabindex]="-1"\n            [attr.aria-hidden]="!!loadNativeDateInput"\n            [container]="containerTarget || \'body\'"\n            [bsConfig]="_dateOptions"\n            [isOpen]="isDateOpen"\n             placement="bottom right"\n            (onShown)="onDatePickerOpen()"\n            (onHidden)="hideDatepickerDropdown()"\n            [daysDisabled]="excludedDaysToDisable"\n            [datesDisabled]="excludedDatesToDisable"\n            #datepicker=bsDatepicker\n            bsDatepicker\n            [isDisabled]="disabled || readonly || isCurrentDate"\n            [bsValue]="bsDateValue"\n            (bsValueChange)="onModelUpdate($event, \'date\')">\n    </div>\n        <div *dropdownMenu\n            class="dropdown-menu"\n            aria-label="timepicker dropdown"\n            aria-controls="time"\n            (click)="preventTpClose($event)">\n            <timepicker class="model-holder"\n                [showMeridian]="ismeridian"\n                [readonlyInput]="disabled || readonly || isCurrentDate"\n                [(ngModel)]="bsTimeValue"\n                [min]="minTime"\n                [max]="maxTime"\n                [hourStep]="hourstep"\n                [minuteStep]="minutestep"\n                [secondsStep]="secondsstep"\n                [mousewheel]="true"\n                [arrowkeys]="true"\n                (isValid)="isValid($event)"\n                [showSeconds]="showseconds"\n                (ngModelChange)="onModelUpdate($event, \'time\')"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]="loadNativeDateInput">\n    <wm-datetimepicker\n        dateTimePicker\n        [config]="_dateOptions"\n        [placement]="modal"\n        [excludedDaysToDisable]="excludedDaysToDisable"\n        [excludedDatesToDisable]="excludedDatesToDisable"\n        [displayFormat]="dateInputFormat"\n        [value]="bsDateValue"\n        (change)="onModelUpdate($event, \'date\')">\n    </wm-datetimepicker>\n    <div class="mobile-input mobile-datepicker-container"\n        [tabindex]="tabindex || 0"\n        (focus)="onDateTimeInputFocus(true); invokeOnFocus($event)"\n        (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n        (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n    </div>\n</ng-template>\n',
+            template: '    <div dropdown\n        [isOpen]="isTimeOpen"\n        autoClose="false"\n        [container]="\'body\'"\n        (onShown)="onTimepickerOpen()"\n        style="display: inherit;">\n        <input class="form-control app-textbox display-input"\n            [attr.aria-label]="hint"\n            focus-target\n            [name]="name"\n            [tabindex]="tabindex"\n            type="text"\n            [value]="displayValue"\n            (click)="toggleDpDropdown($event, true)"\n            (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n            (blur)="onInputBlur($event)"\n            (change)="onDateChange($event)"\n            [autofocus]="autofocus"\n            [disabled]="disabled || readonly || isCurrentDate"\n            [required]="required"\n            [readOnly]="isReadOnly"\n            [attr.placeholder]="placeholder"\n            [attr.accesskey]="shortcutkey"\n            (keydown)="this._triggeredByUser = true; onDisplayKeydown($event)">\n\n        <span class="input-group-btn">\n            <button type="button"\n                class="btn btn-default btn-date"\n                [tabindex]="tabindex"\n                [disabled]="disabled || readonly || isCurrentDate"\n                [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleDpDropdown($event, false)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-calendar"></i>\n            </button>\n            <button type="button"\n                class="btn btn-default btn-time"\n                [tabindex]="tabindex"\n                [disabled]="disabled || readonly || isCurrentDate"\n                aria-label="Select time"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleTimePicker(!isTimeOpen, $event)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-time"></i>\n            </button>\n        </span>\n        <div style="width: 0;display: inline-block;">\n        <input class="model-holder"\n            aria-label="datepicker dropdownmenu"\n            aria-controls="date"\n            focus-target\n            [container]="containerTarget || \'body\'"\n            [bsConfig]="_dateOptions"\n            [isOpen]="isDateOpen"\n             placement="bottom right"\n            (onShown)="onDatePickerOpen()"\n            (onHidden)="hideDatepickerDropdown()"\n            [daysDisabled]="excludedDaysToDisable"\n            [datesDisabled]="excludedDatesToDisable"\n            #datepicker=bsDatepicker\n            bsDatepicker\n            [isDisabled]="disabled || readonly || isCurrentDate"\n            [bsValue]="bsDateValue"\n            (bsValueChange)="onModelUpdate($event, \'date\')">\n    </div>\n        <div *dropdownMenu\n            class="dropdown-menu"\n            aria-label="timepicker dropdown"\n            aria-controls="time"\n            (click)="preventTpClose($event)">\n            <timepicker class="model-holder"\n                [showMeridian]="ismeridian"\n                [readonlyInput]="disabled || readonly || isCurrentDate"\n                [(ngModel)]="bsTimeValue"\n                [min]="minTime"\n                [max]="maxTime"\n                [hourStep]="hourstep"\n                [minuteStep]="minutestep"\n                [secondsStep]="secondsstep"\n                [mousewheel]="true"\n                [arrowkeys]="true"\n                (isValid)="isValid($event)"\n                [showSeconds]="showseconds"\n                (ngModelChange)="onModelUpdate($event, \'time\')"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]="loadNativeDateInput">\n    <wm-datetimepicker\n        dateTimePicker\n        [config]="_dateOptions"\n        [placement]="modal"\n        [excludedDaysToDisable]="excludedDaysToDisable"\n        [excludedDatesToDisable]="excludedDatesToDisable"\n        [displayFormat]="dateInputFormat"\n        [value]="bsDateValue"\n        (change)="onModelUpdate($event, \'date\')">\n    </wm-datetimepicker>\n    <div class="mobile-input mobile-datepicker-container"\n        tabindex="1000000"\n        (focus)="onDateTimeInputFocus(true); invokeOnFocus($event)"\n        (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n        (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n    </div>\n</ng-template>\n',
             providers: [ base.provideAs(DatetimeComponent, forms.NG_VALUE_ACCESSOR, true), base.provideAs(DatetimeComponent, forms.NG_VALIDATORS, true), base.provideAsWidgetRef(DatetimeComponent), {
                 provide: timepicker.TimepickerConfig,
                 deps: [ core$1.AbstractI18nService ],
@@ -35751,9 +35733,6 @@
                     return _this.hidePopover();
                 };
             }
-            setTimeout((function() {
-                _this.anchorRef.nativeElement.removeAttribute("aria-describedby");
-            }));
             var deRegister = this.eventManager.addEventListener(popoverContainer, "keydown.esc", (function() {
                 _this.isOpen = false;
                 _this.setFocusToPopoverLink();
@@ -35761,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") {
@@ -35784,6 +35765,7 @@
                     return _this.close();
                 };
             }
+            core.setAttr(popoverContainer, "tabindex", 0);
             setTimeout((function() {
                 return popoverStartBtn.focus();
             }), 50);
@@ -36462,7 +36444,7 @@
             var subscriptions = [ _this.bsModal.onShown.subscribe((function(_a) {
                 var id = _a.id;
                 var ref = _this.dialogService.getLastOpenedDialog();
-                if (ref === _this) {
+                if (ref === _this && !_this.dialogId) {
                     invokeOpenedCallback(ref);
                     _this.dialogId = id;
                 }
@@ -36476,6 +36458,7 @@
                     ref = _this.dialogService.getLastOpenedDialog();
                 }
                 if (ref === _this) {
+                    _this.dialogId = null;
                     _this.dialogService.removeFromOpenedDialogs(ref);
                     _this.dialogService.removeFromClosedDialogs(ref);
                     invokeClosedCallback(ref);
@@ -44706,9 +44689,9 @@
                 }
             }
         };
-        ListComponent.prototype.onUpdate = function(evt, ui, presentIndex) {
+        ListComponent.prototype.onUpdate = function(evt, ui) {
             var data = this.fieldDefs;
-            var newIndex = ui === undefined ? presentIndex : ui.item.index();
+            var newIndex = ui.item.index();
             var oldIndex = this.$ulEle.data("oldIndex");
             var minIndex = _.min([ newIndex, oldIndex ]);
             var maxIndex = _.max([ newIndex, oldIndex ]);
@@ -44904,10 +44887,8 @@
                 this.currentIndex = presentIndex + 1;
                 if (this.isListElementMovable) {
                     this.ariaText = "Item " + this.currentIndex + " grabbed, current position ";
-                    this.$ulEle.data("oldIndex", presentIndex);
                 } else {
                     this.ariaText = "Item " + this.currentIndex + " dropped, final position ";
-                    this.onUpdate($event, undefined, presentIndex);
                 }
             }
         };
@@ -44952,12 +44933,10 @@
                 this.dataNavigator.widget.maxResults = nv;
                 this.dataNavigator.maxResults = nv;
             } else if (key === "enablereorder") {
-                if (nv && this.$ulEle) {
-                    this.$ulEle.attr("aria-describedby", this.titleId);
+                if (nv) {
                     this.configureDnD();
                     this.$ulEle.sortable("enable");
                 } else if (this.$ulEle && !nv) {
-                    this.$ulEle.removeAttr("aria-describedby");
                     this.$ulEle.sortable("disable");
                 }
             } else {
@@ -45111,18 +45090,9 @@
                 _super.prototype.ngAfterViewInit.call(_this);
                 _this.setUpCUDHandlers();
                 _this.selectedItemWidgets = _this.multiselect ? [] : {};
-                var ele = $(_this.nativeElement).find(".app-livelist-container");
                 if (_this.enablereorder && !_this.groupby) {
-                    if (ele) {
-                        ele.attr("aria-describedby", _this.titleId);
-                    }
                     _this.configureDnD();
                 }
-                if (!_this.enablereorder) {
-                    if (ele) {
-                        ele.removeAttr("aria-describedby");
-                    }
-                }
                 if (_this.groupby && _this.collapsible) {
                     _this.handleHeaderClick = base.handleHeaderClick;
                     _this.toggleAllHeaders = base.toggleAllHeaders.bind(undefined, _this);
@@ -45132,16 +45102,6 @@
             this.setupHandlers();
             var $ul = this.nativeElement.querySelector("ul.app-livelist-container");
             base.styler($ul, this, base.APPLY_STYLES_TYPE.SCROLLABLE_CONTAINER);
-            if (this.enablereorder) {
-                if ($ul) {
-                    $ul.setAttribute("aria-describedby", this.titleId);
-                }
-            }
-            if (!this.enablereorder) {
-                if ($ul) {
-                    $ul.removeAttribute("aria-describedby");
-                }
-            }
             if (core.isMobileApp() && $ul.querySelector(".app-list-item-action-panel")) {
                 this._listAnimator = new ListAnimator(this);
             }
@@ -45166,7 +45126,7 @@
         type: core$1.Component,
         args: [ {
             selector: "div[wmList]",
-            template: '<div class="panel-heading" *ngIf="title || subheading || iconclass">\n    <h3 class="panel-title">\n        <div class="pull-left">\n            <i class="app-icon panel-icon {{iconclass}}" aria-hidden="true" [hidden]="!iconclass"></i>\n        </div>\n        <div class="pull-left">\n            <div class="heading" [innerHTML]="title"></div>\n            <div class="description" [innerHTML]="subheading"></div>\n        </div>\n    </h3>\n</div>\n\n<nav class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisablePrevious" aria-label="Page navigation" *ngIf="navigation === \'Inline\' && !noDataFound">\n    <ul class="pager">\n        <li class="previous" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisablePrevious : true)}">\n            <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'prev\', $event)"\n               [attr.aria-disabled]="dataNavigator.isDisablePrevious">\n                <i class="wi wi-chevron-left" aria-hidden="true"></i>\n                <span class="sr-only">Go to Previous page {{dataNavigator.isDisablePrevious ? \', Disabled\' : \'\'}}</span>\n            </a>\n        </li>\n    </ul>\n</nav>\n<div *ngIf="navigation === \'Inline\' && !noDataFound" aria-live="polite" aria-atomic="true" class="sr-only"> {{\'Page \' + dataNavigator.dn.currentPage + \' of \' + dataNavigator.pageCount }}</div>\n\n<div>\n    <div id={{titleId}} class="sr-only" *ngIf="enablereorder">\n        Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n\n    <div aria-live="assertive" *ngIf="listItems && enablereorder && currentIndex" class="sr-only" >\n        {{ariaText + currentIndex + \' of \' +  listItems.length}}\n    </div>\n</div>\n\n<ul [attr.tabindex]="tabindex"  class="app-livelist-container clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}} {{listclass}}" role="list"\n    (keydown.enter)="handleKeyDown($event, \'select\')"\n\n    (keydown.space)="handleKeyDown($event, \'space\')"\n\n    (keydown.arrowup)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowdown)="handleKeyDown($event, \'focusNext\')"\n    (keydown.arrowleft)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowright)="handleKeyDown($event, \'focusNext\')"\n\n    (keydown.shift.arrowup)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowdown)="handleKeyDown($event, \'selectNext\')"\n    (keydown.shift.arrowleft)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowright)="handleKeyDown($event, \'selectNext\')"\n    [hidden]="noDataFound && !variableInflight"\n>\n    <ng-template [ngIf]="!groupby" [ngIfElse]="groupedListTemplate">\n        <li *ngFor="let item of fieldDefs; index as $index; first as $first; last as $last;" class="app-list-item {{direction === \'horizontal\' ? \'\' : itemsPerRowClass}}" [ngClass]="listItemRef.itemClass"\n            [wmListItem]="item"\n            #listItemRef="listItemRef"\n            [attr.tabindex]="tabindex"\n            role="listitem">\n            <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n        </li>\n    </ng-template>\n    <ng-container [ngTemplateOutlet]="listLeftActionTemplate"></ng-container>\n    <ng-container [ngTemplateOutlet]="listRightActionTemplate"></ng-container>\n</ul>\n\n<div class="no-data-msg" *ngIf="noDataFound && !variableInflight" [textContent]="nodatamessage"></div>\n\n<div class="loading-data-msg" *ngIf="variableInflight && !pulltorefresh">\n    <span>\n        <i class="app-icon panel-icon fa-spin" aria-hidden="true" [ngClass]="loadingicon"></i>\n        <span class="sr-only">Loading</span>\n        <span class="loading-text" [textContent]="loadingdatamsg"></span>\n    </span>\n</div>\n\n<nav class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisableNext" *ngIf="navigation === \'Inline\' && !noDataFound">\n    <ul class="pager">\n        <li class="next" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisableNext  : true)}">\n            <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'next\', $event)"\n               [attr.aria-disabled]="dataNavigator.isDisableNext">\n                <i class="wi wi-chevron-right" aria-hidden="true"></i>\n                <span class="sr-only">Go to Next page {{dataNavigator.isDisableNext ? \', Disabled\' : \'\'}}</span>\n            </a>\n        </li>\n    </ul>\n</nav>\n\n<div class="panel-footer" *ngIf="navigation !== \'None\'" [hidden]="!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator.dataSize <= pagesize) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)">\n    <nav wmPagination\n         navigationalign.bind="navigationalign"\n         navigation.bind="navControls"\n         showrecordcount.bind="showrecordcount"\n         maxsize.bind="maxsize"\n         boundarylinks.bind="boundarylinks"\n         forceellipses.bind="forceellipses"\n         directionlinks.bind="directionlinks"\n         show.bind="!onDemandLoad"\n         paginationchange.event="beforePaginationChange($event, $index)"\n    ></nav>\n    <a *ngIf="onDemandLoad" href="javascript:void(0);"\n       (click)="dataNavigator.navigatePage(\'next\', $event)"\n       class="app-button btn btn-block"\n       [ngClass]="paginationclass"\n       [textContent]="ondemandmessage"\n    ></a>\n</div>\n\n\x3c!--This template will be displayed when groupby is specified--\x3e\n<ng-template #groupedListTemplate>\n    <li *ngFor="let groupObj of groupedData" class="app-list-item-group clearfix">\n        <ul [attr.tabindex]="tabindex" class="list-group item-group" [ngClass]="listclass">\n            <li class="app-list-item-header list-item list-group-header" (click)="handleHeaderClick($event)" [ngClass]="{\'collapsible-content\': collapsible}">\n            <h4>{{groupObj.key}}\n                <div class="header-action">\n                    <i class="app-icon wi action wi-chevron-up" *ngIf="collapsible"></i>\n                    <span *ngIf="showcount" class="label label-default">{{groupObj.data.length}}</span>\n                    </div>\n                </h4>\n            </li>\n            <ul class="list-group clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}}">\n                <li *ngFor="let item of groupObj.data; index as $index; first as $first; last as $last;" [attr.tabindex]="tabindex"\n                    class="app-list-item group-list-item {{itemsPerRowClass}}"\n                    [ngClass]="listItemRef.itemClass"\n                    [wmListItem]="item" #listItemRef="listItemRef">\n                    <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n                </li>\n            </ul>\n        </ul>\n    </li>\n</ng-template>\n',
+            template: '<div class="panel-heading" *ngIf="title || subheading || iconclass">\n    <h3 class="panel-title">\n        <div class="pull-left">\n            <i class="app-icon panel-icon {{iconclass}}" aria-hidden="true" [hidden]="!iconclass"></i>\n        </div>\n        <div class="pull-left">\n            <div class="heading" [innerHTML]="title"></div>\n            <div class="description" [innerHTML]="subheading"></div>\n        </div>\n    </h3>\n</div>\n\n<nav class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisablePrevious" aria-label="Page navigation" *ngIf="navigation === \'Inline\' && !noDataFound">\n    <ul class="pager">\n        <li class="previous" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisablePrevious : true)}">\n            <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'prev\', $event)"\n               [attr.aria-disabled]="dataNavigator.isDisablePrevious">\n                <i class="wi wi-chevron-left" aria-hidden="true"></i>\n                <span class="sr-only">Go to Previous page {{dataNavigator.isDisablePrevious ? \', Disabled\' : \'\'}}</span>\n            </a>\n        </li>\n    </ul>\n</nav>\n<div *ngIf="navigation === \'Inline\' && !noDataFound" aria-live="polite" aria-atomic="true" class="sr-only"> {{\'Page \' + dataNavigator.dn.currentPage + \' of \' + dataNavigator.pageCount }}</div>\n\n<div>\n    <div id={{titleId}} class="sr-only" *ngIf="enablereorder">\n        Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n\n    <div aria-live="assertive" *ngIf="listItems && enablereorder && currentIndex" class="sr-only" >\n        {{ariaText + currentIndex + \' of \' +  listItems.length}}\n    </div>\n</div>\n\n<ul [attr.tabindex]="tabindex" [attr.aria-describedby] = "titleId"  class="app-livelist-container clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}} {{listclass}}" role="list"\n    (keydown.enter)="handleKeyDown($event, \'select\')"\n\n    (keydown.space)="handleKeyDown($event, \'space\')"\n\n    (keydown.arrowup)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowdown)="handleKeyDown($event, \'focusNext\')"\n    (keydown.arrowleft)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowright)="handleKeyDown($event, \'focusNext\')"\n\n    (keydown.shift.arrowup)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowdown)="handleKeyDown($event, \'selectNext\')"\n    (keydown.shift.arrowleft)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowright)="handleKeyDown($event, \'selectNext\')"\n    [hidden]="noDataFound && !variableInflight"\n>\n    <ng-template [ngIf]="!groupby" [ngIfElse]="groupedListTemplate">\n        <li *ngFor="let item of fieldDefs; index as $index; first as $first; last as $last;" class="app-list-item {{direction === \'horizontal\' ? \'\' : itemsPerRowClass}}" [ngClass]="listItemRef.itemClass"\n            [wmListItem]="item"\n            #listItemRef="listItemRef"\n            [attr.tabindex]="tabindex"\n            role="listitem">\n            <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n        </li>\n    </ng-template>\n    <ng-container [ngTemplateOutlet]="listLeftActionTemplate"></ng-container>\n    <ng-container [ngTemplateOutlet]="listRightActionTemplate"></ng-container>\n</ul>\n\n<div class="no-data-msg" *ngIf="noDataFound && !variableInflight" [textContent]="nodatamessage"></div>\n\n<div class="loading-data-msg" *ngIf="variableInflight && !pulltorefresh">\n    <span>\n        <i class="app-icon panel-icon fa-spin" aria-hidden="true" [ngClass]="loadingicon"></i>\n        <span class="sr-only">Loading</span>\n        <span class="loading-text" [textContent]="loadingdatamsg"></span>\n    </span>\n</div>\n\n<nav class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisableNext" *ngIf="navigation === \'Inline\' && !noDataFound">\n    <ul class="pager">\n        <li class="next" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisableNext  : true)}">\n            <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'next\', $event)"\n               [attr.aria-disabled]="dataNavigator.isDisableNext">\n                <i class="wi wi-chevron-right" aria-hidden="true"></i>\n                <span class="sr-only">Go to Next page {{dataNavigator.isDisableNext ? \', Disabled\' : \'\'}}</span>\n            </a>\n        </li>\n    </ul>\n</nav>\n\n<div class="panel-footer" *ngIf="navigation !== \'None\'" [hidden]="!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator.dataSize <= pagesize) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)">\n    <nav wmPagination\n         navigationalign.bind="navigationalign"\n         navigation.bind="navControls"\n         showrecordcount.bind="showrecordcount"\n         maxsize.bind="maxsize"\n         boundarylinks.bind="boundarylinks"\n         forceellipses.bind="forceellipses"\n         directionlinks.bind="directionlinks"\n         show.bind="!onDemandLoad"\n         paginationchange.event="beforePaginationChange($event, $index)"\n    ></nav>\n    <a *ngIf="onDemandLoad" href="javascript:void(0);"\n       (click)="dataNavigator.navigatePage(\'next\', $event)"\n       class="app-button btn btn-block"\n       [ngClass]="paginationclass"\n       [textContent]="ondemandmessage"\n    ></a>\n</div>\n\n\x3c!--This template will be displayed when groupby is specified--\x3e\n<ng-template #groupedListTemplate>\n    <li *ngFor="let groupObj of groupedData" class="app-list-item-group clearfix">\n        <ul [attr.tabindex]="tabindex" class="list-group item-group" [ngClass]="listclass">\n            <li class="app-list-item-header list-item list-group-header" (click)="handleHeaderClick($event)" [ngClass]="{\'collapsible-content\': collapsible}">\n            <h4>{{groupObj.key}}\n                <div class="header-action">\n                    <i class="app-icon wi action wi-chevron-up" *ngIf="collapsible"></i>\n                    <span *ngIf="showcount" class="label label-default">{{groupObj.data.length}}</span>\n                    </div>\n                </h4>\n            </li>\n            <ul class="list-group clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}}">\n                <li *ngFor="let item of groupObj.data; index as $index; first as $first; last as $last;" [attr.tabindex]="tabindex"\n                    class="app-list-item group-list-item {{itemsPerRowClass}}"\n                    [ngClass]="listItemRef.itemClass"\n                    [wmListItem]="item" #listItemRef="listItemRef">\n                    <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n                </li>\n            </ul>\n        </ul>\n    </li>\n</ng-template>\n',
             providers: [ base.provideAsWidgetRef(ListComponent) ]
         } ]
     } ];
@@ -46536,6 +46496,11 @@
                     return;
                 }
                 this.variableInflight = false;
+                if (newValue && newValue.length === 0) {
+                    this.callDataGridMethod("setStatus", "nodata", this.nodatamessage);
+                } else {
+                    this.callDataGridMethod("setStatus", "ready");
+                }
                 if (this.gridOptions.isNavTypeScrollOrOndemand()) {
                     _a = __read(this.paginationService.updateFieldsOnPagination(this, newValue), 2), 
                     this._gridData = _a[0], this.currentPage = _a[1];