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

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

@@ -3012,11 +3012,15 @@
     var isIos = function() {
         return isIphone() || isIpod() || isIpad();
     };
-    var isLargeTabletLandscape = function() {
-        return window.matchMedia("only screen and (min-device-width : 1366px) and (max-device-width : 1366px) and (min-device-height : 1024px) and (max-device-height : 1024px) and (min-width: 1366px) and (max-width: 1366px)").matches;
+    var isLargeTabletLandscape = function(landScapeWidth, landScapeHeight) {
+        var width = landScapeWidth || "1366px";
+        var height = landScapeHeight || "1024px";
+        return window.matchMedia("only screen and (min-device-width : " + width + ") and (max-device-width : " + width + ") and (min-device-height : " + height + ") and (max-device-height : " + height + ") and (min-width: " + width + ") and (max-width: " + width + ")").matches;
     };
-    var isLargeTabletPortrait = function() {
-        return window.matchMedia("only screen and (min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1024px) and (max-width: 1024px)").matches;
+    var isLargeTabletPortrait = function(landScapeWidth, landScapeHeight) {
+        var height = landScapeWidth || "1366px";
+        var width = landScapeHeight || "1024px";
+        return window.matchMedia("only screen and (min-device-width : " + width + ") and (max-device-width : " + width + ") and (min-device-height : " + height + ") and (max-device-height : " + height + ") and (min-width: " + width + ") and (max-width: " + width + ")").matches;
     };
     var isMobile = function() {
         return isAndroid() || isIos() || isAndroidTablet() || $("#wm-mobile-display:visible").length > 0;
@@ -4466,6 +4470,8 @@
                     this.isMobileType = true;
                 }
             } else {
+                MINIMUM_MOBILE_WIDTH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--screen-xs")) || 480;
+                MINIMUM_TAB_WIDTH = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--screen-sm")) || 768;
                 if (minValue >= MINIMUM_MOBILE_WIDTH && maxValue >= MINIMUM_TAB_WIDTH) {
                     this.type = 1;
                     if (isAndroid() || isIos() || isAndroidTablet()) {
@@ -8973,9 +8979,11 @@
         });
     };
     var getKeyboardFocusableElements = function(element) {
-        return [ element.querySelectorAll('a, button, input, textarea, select, details, iframe, embed, object, summary dialog, audio[controls], video[controls], [contenteditable], [tabindex]:not([tabindex="-1"])') ].filter((function(el) {
-            return !el[0].hasAttribute("disabled") && !el[0].hasAttribute("hidden");
-        }))[0];
+        var elementNodeList = element.querySelectorAll("a, button, input, textarea, select, details, iframe, embed, object, summary dialog, audio[controls], video[controls], [contenteditable]");
+        var elements = Array.from(elementNodeList);
+        return elements.filter((function(el) {
+            return !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && (!el.hasAttribute("tabindex") || el.hasAttribute("tabindex") && !el.getAttribute("tabindex").startsWith("-"));
+        }));
     };
     exports.APPLY_STYLES_TYPE = void 0;
     (function(APPLY_STYLES_TYPE) {
@@ -10382,7 +10390,18 @@
             configurable: true
         });
         ShowInDeviceDirective.prototype.onResize = function($event) {
-            if (this.devices.indexOf("lg") > -1 && window.matchMedia("(min-width: 1200px)").matches && !core$1.isLargeTabletLandscape() || this.devices.indexOf("md") > -1 && (core$1.isLargeTabletLandscape() || window.matchMedia("(min-width: 992px) and (max-width: 1199px)").matches && !core$1.isLargeTabletPortrait()) || this.devices.indexOf("sm") > -1 && (window.matchMedia("(min-width: 768px) and (max-width: 991px)").matches || core$1.isLargeTabletPortrait()) || this.devices.indexOf("xs") > -1 && window.matchMedia("(max-width: 767px)").matches || this.devices.indexOf("all") > -1) {
+            var lgWidth = getComputedStyle(document.documentElement).getPropertyValue("--screen-lg") || "1200px";
+            var mdWidth = getComputedStyle(document.documentElement).getPropertyValue("--screen-md") || "992px";
+            var smWidth = getComputedStyle(document.documentElement).getPropertyValue("--screen-sm") || "768px";
+            var lgTabLandScapeWidth = getComputedStyle(document.documentElement).getPropertyValue("--screen-lg-tab-landscape") || "1366px";
+            var lgTabPortraitWidth = getComputedStyle(document.documentElement).getPropertyValue("--screen-lg-tab-portrait") || "1024px";
+            var lgWidthMin = parseFloat(lgWidth) - 1;
+            var lgUnit = lgWidthMin + "px";
+            var mdWidthMin = parseFloat(mdWidth) - 1;
+            var mdUnit = mdWidthMin + "px";
+            var smWidthMin = parseFloat(smWidth) - 1;
+            var smUnit = smWidthMin + "px";
+            if (this.devices.indexOf("lg") > -1 && window.matchMedia("(min-width: " + lgWidth + ")").matches && !core$1.isLargeTabletLandscape(lgTabLandScapeWidth, lgTabPortraitWidth) || this.devices.indexOf("md") > -1 && (core$1.isLargeTabletLandscape(lgTabLandScapeWidth, lgTabPortraitWidth) || window.matchMedia("(min-width: " + mdWidth + ") and (max-width: " + lgUnit + ")").matches && !core$1.isLargeTabletPortrait(lgTabLandScapeWidth, lgTabPortraitWidth)) || this.devices.indexOf("sm") > -1 && (window.matchMedia("(min-width: " + smWidth + ") and (max-width: " + mdUnit + ")").matches || core$1.isLargeTabletPortrait(lgTabLandScapeWidth, lgTabPortraitWidth)) || this.devices.indexOf("xs") > -1 && window.matchMedia("(max-width: " + smUnit + ")").matches || this.devices.indexOf("all") > -1) {
                 if (!this.embeddedView) {
                     this.embeddedView = this.viewContainerRef.createEmbeddedView(this.templateRef, this.context);
                 }
@@ -15060,7 +15079,7 @@
                 }
                 var markup = "<" + tagName$q + " wmPopover " + transpiler.getAttrMarkup(attrs) + ">";
                 var contextAttrs = table ? 'let-row="row"' : "";
-                markup += "<ng-template " + contextAttrs + '><button class="popover-start"></button>';
+                markup += "<ng-template " + contextAttrs + '><div tabindex="0" class="popover-start sr-only" aria-label="">popover content start</div>';
                 if (popoverTemplate) {
                     markup += "" + (popoverTemplate ? popoverTemplate : "");
                 }
@@ -15071,7 +15090,7 @@
                 if (shared.get("hasPopoverContent")) {
                     markup += "</div>";
                 }
-                return markup + '<button class="popover-end"></button></ng-template></' + tagName$q + ">";
+                return markup + '<div tabindex="0" class="popover-end sr-only" aria-label="">popover content ended</div></ng-template></' + tagName$q + ">";
             }
         };
     }));
@@ -27414,14 +27433,18 @@
                 var newDay = newDate.getDate().toString();
                 _.filter($("span:contains(" + newDay + ")").not(".is-other-month"), (function(obj) {
                     if ($(obj).text() === newDay) {
+                        if ($(obj).hasClass("selected")) {
+                            $(obj).parent().attr("aria-selected", "true");
+                        }
                         $(obj).attr("aria-label", moment(newDate).format("dddd, MMMM Do YYYY"));
+                        $("[bsdatepickerdaydecorator]").not(".is-other-month").attr("tabindex", "-1");
+                        $(obj).attr("tabindex", "0");
                         $(obj).focus();
                         _this.activeDate = newDate;
                     }
                 }));
                 if (newDate.getMonth() === (new Date).getMonth() && newDate.getFullYear() === (new Date).getFullYear()) {
                     _this.hightlightToday();
-                    $("span:contains(" + (new Date).getDate().toString() + ")").not(".is-other-month").parent().attr("aria-selected", "true");
                 }
             }));
         };
@@ -27463,6 +27486,9 @@
                 if (event.originalEvent) {
                     _this.setFocusForDate(-1);
                 }
+                setTimeout((function() {
+                    $(".bs-datepicker-head .previous").focus();
+                }));
             }));
             datePickerHead.find(".next").click((function(event) {
                 _this.next = _this.getMonth(_this.activeDate, 2);
@@ -27471,6 +27497,9 @@
                 if (event.originalEvent) {
                     _this.setFocusForDate(1);
                 }
+                setTimeout((function() {
+                    $(".bs-datepicker-head .next").focus();
+                }));
             }));
             datePickerHead.find(".current").click((function(event) {
                 if (event.originalEvent) {
@@ -27485,6 +27514,19 @@
             }));
             datePickerHead.find(".next").attr("aria-label", "Next Month, " + this.next.fullMonth + " " + this.next.date.getFullYear());
             datePickerHead.find(".previous").attr("aria-label", "Previous Month, " + this.prev.fullMonth + " " + this.prev.date.getFullYear());
+            setTimeout((function() {
+                var currentNodes = datePickerHead.find(".current span");
+                var msg = "Changed to month ";
+                datePickerHead.find(".current").attr("aria-live", "assertive").attr("aria-atomic", "false");
+                if (_this.clicked) {
+                    if ($(currentNodes[0]).text()) {
+                        datePickerHead.find(".ng-star-inserted").prepend('<div class="sr-only">' + msg + "</div>");
+                    }
+                    if ($(currentNodes[1]).text()) {
+                        datePickerHead.find(".current").last().prepend('<div class="sr-only"> and year </div>');
+                    }
+                }
+            }));
         };
         BaseDateTimeComponent.prototype.setFocusForMonthOrDay = function() {
             var activeMonthOrYear = $(".bs-datepicker-head .current").first().text();
@@ -27620,8 +27662,6 @@
         BaseDateTimeComponent.prototype.loadMonths = function() {
             var _this = this;
             setTimeout((function() {
-                var datePickerBody = $(".bs-datepicker-body");
-                datePickerBody.find("table.months span").attr("tabindex", "0");
                 _this.addKeyBoardEventsForMonths();
                 _this.addDatepickerMouseEvents();
             }));
@@ -27664,8 +27704,6 @@
         BaseDateTimeComponent.prototype.loadYears = function() {
             var _this = this;
             setTimeout((function() {
-                var datePickerBody = $(".bs-datepicker-body");
-                datePickerBody.find("table.years span").attr("tabindex", "0");
                 _this.addKeyBoardEventsForYears();
                 _this.addDatepickerMouseEvents();
             }));
@@ -27682,6 +27720,8 @@
                 }
             }
             setTimeout((function() {
+                $(".bs-datepicker-body table.months span").attr("tabindex", "-1");
+                $(".bs-datepicker-body table.months span:contains(" + newMonth + ")").attr("tabindex", "0");
                 $(".bs-datepicker-body table.months span:contains(" + newMonth + ")").focus();
                 _this.activeDate = newDate;
             }));
@@ -27730,6 +27770,8 @@
                 }
             }
             setTimeout((function() {
+                $(".bs-datepicker-body table.years span").attr("tabindex", "-1");
+                $(".bs-datepicker-body table.years span:contains(" + newYear + ")").attr("tabindex", "0");
                 $(".bs-datepicker-body table.years span:contains(" + newYear + ")").focus();
                 _this.activeDate = newDate;
             }));
@@ -27896,11 +27938,6 @@
                     children[i].classList.remove("add-opacity");
                 }
                 displayInputElem.classList.remove("remove-opacity");
-                var allDateTimeElements = this.nativeElement.getElementsByTagName("*");
-                for (var i = 0; i < allDateTimeElements.length; i++) {
-                    allDateTimeElements[i].setAttribute("tabindex", this.tabindex);
-                }
-                displayInputElem.removeAttribute("tabindex");
             }
         };
         BaseDateTimeComponent.prototype.onDateTimeInputFocus = function(skipFocus) {
@@ -27917,11 +27954,6 @@
                     children[i].classList.add("add-opacity");
                 }
                 displayInputElem.classList.add("remove-opacity");
-                var allDateTimeElements = this.nativeElement.getElementsByTagName("*");
-                for (var i = 0; i < allDateTimeElements.length; i++) {
-                    allDateTimeElements[i].setAttribute("tabindex", "-1");
-                }
-                displayInputElem.setAttribute("tabindex", this.tabindex);
                 return;
             }
             if (displayInputElem && this._triggeredByUser) {
@@ -28004,7 +28036,10 @@
             this.isReadOnly = this.dataentrymode != "undefined" && !this.isDataEntryModeEnabledOnInput(this.dataentrymode);
             var mobileInput = this.getMobileInput();
             if (mobileInput) {
-                mobileInput.style.width = mobileInput.parentElement.clientWidth + "px";
+                setTimeout((function() {
+                    mobileInput.style.width = mobileInput.parentElement.clientWidth + "px";
+                    mobileInput.style.height = mobileInput.parentElement.clientHeight + "px";
+                }));
             }
         };
         BaseDateTimeComponent.prototype.ngOnDestroy = function() {
@@ -28267,7 +28302,7 @@
             if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
                 event.stopPropagation();
                 var action = this.keyEventPlugin.constructor.getEventFullKey(event);
-                if (action === "enter" || action === "arrowdown") {
+                if (action === "enter") {
                     var newVal = core$1.getDateObj(event.target.value, {
                         pattern: this.datepattern
                     });
@@ -28309,7 +28344,7 @@
         type: core.Component,
         args: [ {
             selector: "[wmDate]",
-            template: '    <input class="form-control app-textbox app-dateinput display-input"\n        focus-target\n        type="text"\n        [name]="name"\n        [tabindex]="tabindex"\n        [value]="displayValue"\n        (click)="toggleDpDropdown($event, true)"\n        (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n        (blur)="onInputBlur($event)"\n        [disabled]="disabled || readonly"\n        [autofocus]="autofocus"\n        [required]="required"\n        [readOnly]="isReadOnly"\n        [attr.placeholder]="placeholder"\n        [attr.accesskey]="shortcutkey"\n        [attr.aria-label]="hint"\n        (change)="onDisplayDateChange($event)"\n        (keydown)="this._triggeredByUser = true; onDisplayKeydown($event);">\n\n    <span class="input-group-btn">\n        <button type="button"\n            class="btn btn-default btn-time"\n            [tabindex]="tabindex"\n            [disabled]="disabled || readonly"\n            [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n            aria-haspopup="true"\n            aria-expanded="false"\n            (click)="toggleDpDropdown($event, false)">\n            <i aria-hidden="true"\n                class="app-icon wm-sl-l sl-calendar"></i>\n        </button>\n    </span>\n    <div style="width: 0;display: inline-block;">\n    <input class="model-holder"\n        aria-label="datepicker dropdownmenu"\n        aria-controls="date"\n        [container]="containerTarget || \'body\'"\n        [bsConfig]="_dateOptions"\n        [isOpen]="isOpen"\n        #datepicker="bsDatepicker"\n        bsDatepicker\n        [daysDisabled]="excludedDaysToDisable"\n        [datesDisabled]="excludedDatesToDisable"\n        placement="bottom right"\n        [isDisabled]="disabled || readonly"\n        [bsValue]="bsDataValue"\n        (onShown)="onDatePickerOpen()"\n        (onHidden)="hideDatepickerDropdown()"\n        (bsValueChange)="onDateChange($event)">\n</div>\n\n<ng-template [ngIf]="loadNativeDateInput">\n    <wm-datetimepicker\n        dateTimePicker\n        mode="DATE"\n        [config]="_dateOptions"\n        [placement]="modal"\n        [excludedDaysToDisable]="excludedDaysToDisable"\n        [excludedDatesToDisable]="excludedDatesToDisable"\n        [displayFormat]="dateInputFormat"\n        [value]="bsDataValue"\n        (change)="onDateChange($event)">\n    </wm-datetimepicker>\n    <div class="mobile-input mobile-datepicker-container"\n         tabindex="1000000"\n        (focus)="onDateTimeInputFocus(true); invokeOnFocus($event);"\n        (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n        (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n    </div>\n</ng-template>\n',
+            template: '    <input class="form-control app-textbox app-dateinput display-input"\n        focus-target\n        type="text"\n        [name]="name"\n        [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n        [attr.aria-hidden]="!!loadNativeDateInput"\n        [value]="displayValue"\n        (click)="toggleDpDropdown($event, true)"\n        (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n        (blur)="onInputBlur($event)"\n        [disabled]="disabled || readonly"\n        [autofocus]="autofocus"\n        [required]="required"\n        [readOnly]="isReadOnly"\n        [attr.placeholder]="placeholder"\n        [attr.accesskey]="shortcutkey"\n        [attr.aria-label]="hint"\n        (change)="onDisplayDateChange($event)"\n        (keydown)="this._triggeredByUser = true; onDisplayKeydown($event);">\n\n    <span class="input-group-btn">\n        <button type="button"\n            class="btn btn-default btn-time"\n            [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n            [attr.aria-hidden]="!!loadNativeDateInput"\n            [disabled]="disabled || readonly"\n            [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n            aria-haspopup="true"\n            aria-expanded="false"\n            (click)="toggleDpDropdown($event, false)">\n            <i aria-hidden="true"\n                class="app-icon wm-sl-l sl-calendar"></i>\n        </button>\n    </span>\n    <div style="width: 0;display: inline-block;">\n    <input class="model-holder"\n        aria-label="datepicker dropdownmenu"\n        aria-controls="date"\n        [tabindex]="-1"\n        [attr.aria-hidden]="!!loadNativeDateInput"\n        [container]="containerTarget || \'body\'"\n        [bsConfig]="_dateOptions"\n        [isOpen]="isOpen"\n        #datepicker="bsDatepicker"\n        bsDatepicker\n        [daysDisabled]="excludedDaysToDisable"\n        [datesDisabled]="excludedDatesToDisable"\n        placement="bottom right"\n        [isDisabled]="disabled || readonly"\n        [bsValue]="bsDataValue"\n        (onShown)="onDatePickerOpen()"\n        (onHidden)="hideDatepickerDropdown()"\n        (bsValueChange)="onDateChange($event)">\n</div>\n\n<ng-template [ngIf]="loadNativeDateInput">\n    <wm-datetimepicker\n        dateTimePicker\n        mode="DATE"\n        [config]="_dateOptions"\n        [placement]="modal"\n        [excludedDaysToDisable]="excludedDaysToDisable"\n        [excludedDatesToDisable]="excludedDatesToDisable"\n        [displayFormat]="dateInputFormat"\n        [value]="bsDataValue"\n        (change)="onDateChange($event)">\n    </wm-datetimepicker>\n    <div class="mobile-input mobile-datepicker-container"\n        [tabindex]="tabindex || 0"\n        (focus)="onDateTimeInputFocus(true); invokeOnFocus($event);"\n        (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n        [attr.aria-label]="displayValue ? \'Change Date\' + displayValue : \'Choose Date\'"\n        (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n    </div>\n</ng-template>\n',
             providers: [ base.provideAs(DateComponent, forms.NG_VALUE_ACCESSOR, true), base.provideAs(DateComponent, forms.NG_VALIDATORS, true), base.provideAsWidgetRef(DateComponent) ]
         } ]
     } ];
@@ -28761,7 +28796,7 @@
         type: core.Component,
         args: [ {
             selector: "[wmDateTime]",
-            template: '    <div dropdown\n        [isOpen]="isTimeOpen"\n        autoClose="false"\n        [container]="\'body\'"\n        (onShown)="onTimepickerOpen()"\n        style="display: inherit;">\n        <input class="form-control app-textbox display-input"\n            [attr.aria-label]="hint"\n            focus-target\n            [name]="name"\n            [tabindex]="tabindex"\n            type="text"\n            [value]="displayValue"\n            (click)="toggleDpDropdown($event, true)"\n            (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n            (blur)="onInputBlur($event)"\n            (change)="onDateChange($event)"\n            [autofocus]="autofocus"\n            [disabled]="disabled || readonly || isCurrentDate"\n            [required]="required"\n            [readOnly]="isReadOnly"\n            [attr.placeholder]="placeholder"\n            [attr.accesskey]="shortcutkey"\n            (keydown)="this._triggeredByUser = true; onDisplayKeydown($event)">\n\n        <span class="input-group-btn">\n            <button type="button"\n                class="btn btn-default btn-date"\n                [tabindex]="tabindex"\n                [disabled]="disabled || readonly || isCurrentDate"\n                [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleDpDropdown($event, false)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-calendar"></i>\n            </button>\n            <button type="button"\n                class="btn btn-default btn-time"\n                [tabindex]="tabindex"\n                [disabled]="disabled || readonly || isCurrentDate"\n                aria-label="Select time"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleTimePicker(!isTimeOpen, $event)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-time"></i>\n            </button>\n        </span>\n        <div style="width: 0;display: inline-block;">\n        <input class="model-holder"\n            aria-label="datepicker dropdownmenu"\n            aria-controls="date"\n            focus-target\n            [container]="containerTarget || \'body\'"\n            [bsConfig]="_dateOptions"\n            [isOpen]="isDateOpen"\n             placement="bottom right"\n            (onShown)="onDatePickerOpen()"\n            (onHidden)="hideDatepickerDropdown()"\n            [daysDisabled]="excludedDaysToDisable"\n            [datesDisabled]="excludedDatesToDisable"\n            #datepicker=bsDatepicker\n            bsDatepicker\n            [isDisabled]="disabled || readonly || isCurrentDate"\n            [bsValue]="bsDateValue"\n            (bsValueChange)="onModelUpdate($event, \'date\')">\n    </div>\n        <div *dropdownMenu\n            class="dropdown-menu"\n            aria-label="timepicker dropdown"\n            aria-controls="time"\n            (click)="preventTpClose($event)">\n            <timepicker class="model-holder"\n                [showMeridian]="ismeridian"\n                [readonlyInput]="disabled || readonly || isCurrentDate"\n                [(ngModel)]="bsTimeValue"\n                [min]="minTime"\n                [max]="maxTime"\n                [hourStep]="hourstep"\n                [minuteStep]="minutestep"\n                [secondsStep]="secondsstep"\n                [mousewheel]="true"\n                [arrowkeys]="true"\n                (isValid)="isValid($event)"\n                [showSeconds]="showseconds"\n                (ngModelChange)="onModelUpdate($event, \'time\')"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]="loadNativeDateInput">\n    <wm-datetimepicker\n        dateTimePicker\n        [config]="_dateOptions"\n        [placement]="modal"\n        [excludedDaysToDisable]="excludedDaysToDisable"\n        [excludedDatesToDisable]="excludedDatesToDisable"\n        [displayFormat]="dateInputFormat"\n        [value]="bsDateValue"\n        (change)="onModelUpdate($event, \'date\')">\n    </wm-datetimepicker>\n    <div class="mobile-input mobile-datepicker-container"\n        tabindex="1000000"\n        (focus)="onDateTimeInputFocus(true); invokeOnFocus($event)"\n        (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n        (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n    </div>\n</ng-template>\n',
+            template: '    <div dropdown\n        [isOpen]="isTimeOpen"\n        autoClose="false"\n        [container]="\'body\'"\n        (onShown)="onTimepickerOpen()"\n        style="display: inherit;">\n        <input class="form-control app-textbox display-input"\n            [attr.aria-label]="hint"\n            focus-target\n            [name]="name"\n            [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n            [attr.aria-hidden]="!!loadNativeDateInput"\n            type="text"\n            [value]="displayValue"\n            (click)="toggleDpDropdown($event, true)"\n            (focus)="onDateTimeInputFocus(); invokeOnFocus($event);"\n            (blur)="onInputBlur($event)"\n            (change)="onDateChange($event)"\n            [autofocus]="autofocus"\n            [disabled]="disabled || readonly || isCurrentDate"\n            [required]="required"\n            [readOnly]="isReadOnly"\n            [attr.placeholder]="placeholder"\n            [attr.accesskey]="shortcutkey"\n            (keydown)="this._triggeredByUser = true; onDisplayKeydown($event)">\n\n        <span class="input-group-btn">\n            <button type="button"\n                class="btn btn-default btn-date"\n                [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n                [attr.aria-hidden]="!!loadNativeDateInput"\n                [disabled]="disabled || readonly || isCurrentDate"\n                [attr.aria-label]="displayValue ? \'Change Date \' + displayValue : \'Choose date by pressing enter\'"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleDpDropdown($event, false)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-calendar"></i>\n            </button>\n            <button type="button"\n                class="btn btn-default btn-time"\n                [tabindex]="loadNativeDateInput ? \'-1\' : tabindex"\n                [attr.aria-hidden]="!!loadNativeDateInput"\n                [disabled]="disabled || readonly || isCurrentDate"\n                aria-label="Select time"\n                aria-haspopup="true"\n                aria-expanded="false"\n                (click)="toggleTimePicker(!isTimeOpen, $event)">\n                <i aria-hidden="true"\n                    class="app-icon wm-sl-l sl-time"></i>\n            </button>\n        </span>\n        <div style="width: 0;display: inline-block;">\n        <input class="model-holder"\n            aria-label="datepicker dropdownmenu"\n            aria-controls="date"\n            focus-target\n            [tabindex]="-1"\n            [attr.aria-hidden]="!!loadNativeDateInput"\n            [container]="containerTarget || \'body\'"\n            [bsConfig]="_dateOptions"\n            [isOpen]="isDateOpen"\n             placement="bottom right"\n            (onShown)="onDatePickerOpen()"\n            (onHidden)="hideDatepickerDropdown()"\n            [daysDisabled]="excludedDaysToDisable"\n            [datesDisabled]="excludedDatesToDisable"\n            #datepicker=bsDatepicker\n            bsDatepicker\n            [isDisabled]="disabled || readonly || isCurrentDate"\n            [bsValue]="bsDateValue"\n            (bsValueChange)="onModelUpdate($event, \'date\')">\n    </div>\n        <div *dropdownMenu\n            class="dropdown-menu"\n            aria-label="timepicker dropdown"\n            aria-controls="time"\n            (click)="preventTpClose($event)">\n            <timepicker class="model-holder"\n                [showMeridian]="ismeridian"\n                [readonlyInput]="disabled || readonly || isCurrentDate"\n                [(ngModel)]="bsTimeValue"\n                [min]="minTime"\n                [max]="maxTime"\n                [hourStep]="hourstep"\n                [minuteStep]="minutestep"\n                [secondsStep]="secondsstep"\n                [mousewheel]="true"\n                [arrowkeys]="true"\n                (isValid)="isValid($event)"\n                [showSeconds]="showseconds"\n                (ngModelChange)="onModelUpdate($event, \'time\')"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]="loadNativeDateInput">\n    <wm-datetimepicker\n        dateTimePicker\n        [config]="_dateOptions"\n        [placement]="modal"\n        [excludedDaysToDisable]="excludedDaysToDisable"\n        [excludedDatesToDisable]="excludedDatesToDisable"\n        [displayFormat]="dateInputFormat"\n        [value]="bsDateValue"\n        (change)="onModelUpdate($event, \'date\')">\n    </wm-datetimepicker>\n    <div class="mobile-input mobile-datepicker-container"\n        [tabindex]="tabindex || 0"\n        (focus)="onDateTimeInputFocus(true); invokeOnFocus($event)"\n        (blur)="onDateTimeInputBlur(); invokeOnTouched($event)"\n        (click)="!(disabled || readonly || isCurrentDate) && showDatePickerModal()">\n    </div>\n</ng-template>\n',
             providers: [ base.provideAs(DatetimeComponent, forms.NG_VALUE_ACCESSOR, true), base.provideAs(DatetimeComponent, forms.NG_VALIDATORS, true), base.provideAsWidgetRef(DatetimeComponent), {
                 provide: timepicker.TimepickerConfig,
                 deps: [ core$1.AbstractI18nService ],
@@ -32312,7 +32347,7 @@
             var value = _.get(dataObj, xKey);
             if (isLineTypeChart(this.type) && !core.isNumberType(this.xAxisDataType)) {
                 this.xDataKeyArr.push(value);
-                return index;
+                return value;
             }
             return value;
         };
@@ -35733,6 +35768,9 @@
                     return _this.hidePopover();
                 };
             }
+            setTimeout((function() {
+                _this.anchorRef.nativeElement.removeAttribute("aria-describedby");
+            }));
             var deRegister = this.eventManager.addEventListener(popoverContainer, "keydown.esc", (function() {
                 _this.isOpen = false;
                 _this.setFocusToPopoverLink();
@@ -35740,8 +35778,6 @@
             }));
             var popoverStartBtn = popoverContainer.querySelector(".popover-start");
             var popoverEndBtn = popoverContainer.querySelector(".popover-end");
-            popoverStartBtn.setAttribute("aria-hidden", "true");
-            popoverEndBtn.setAttribute("aria-hidden", "true");
             popoverStartBtn.onkeydown = function(event) {
                 var action = _this.keyEventPlugin.constructor.getEventFullKey(event);
                 if (action === "shift.tab") {
@@ -35765,7 +35801,6 @@
                     return _this.close();
                 };
             }
-            core.setAttr(popoverContainer, "tabindex", 0);
             setTimeout((function() {
                 return popoverStartBtn.focus();
             }), 50);
@@ -36444,7 +36479,7 @@
             var subscriptions = [ _this.bsModal.onShown.subscribe((function(_a) {
                 var id = _a.id;
                 var ref = _this.dialogService.getLastOpenedDialog();
-                if (ref === _this && !_this.dialogId) {
+                if (ref === _this) {
                     invokeOpenedCallback(ref);
                     _this.dialogId = id;
                 }
@@ -36458,7 +36493,6 @@
                     ref = _this.dialogService.getLastOpenedDialog();
                 }
                 if (ref === _this) {
-                    _this.dialogId = null;
                     _this.dialogService.removeFromOpenedDialogs(ref);
                     _this.dialogService.removeFromClosedDialogs(ref);
                     invokeClosedCallback(ref);
@@ -44689,9 +44723,9 @@
                 }
             }
         };
-        ListComponent.prototype.onUpdate = function(evt, ui) {
+        ListComponent.prototype.onUpdate = function(evt, ui, presentIndex) {
             var data = this.fieldDefs;
-            var newIndex = ui.item.index();
+            var newIndex = ui === undefined ? presentIndex : ui.item.index();
             var oldIndex = this.$ulEle.data("oldIndex");
             var minIndex = _.min([ newIndex, oldIndex ]);
             var maxIndex = _.max([ newIndex, oldIndex ]);
@@ -44887,8 +44921,10 @@
                 this.currentIndex = presentIndex + 1;
                 if (this.isListElementMovable) {
                     this.ariaText = "Item " + this.currentIndex + " grabbed, current position ";
+                    this.$ulEle.data("oldIndex", presentIndex);
                 } else {
                     this.ariaText = "Item " + this.currentIndex + " dropped, final position ";
+                    this.onUpdate($event, undefined, presentIndex);
                 }
             }
         };
@@ -44933,10 +44969,12 @@
                 this.dataNavigator.widget.maxResults = nv;
                 this.dataNavigator.maxResults = nv;
             } else if (key === "enablereorder") {
-                if (nv) {
+                if (nv && this.$ulEle) {
+                    this.$ulEle.attr("aria-describedby", this.titleId);
                     this.configureDnD();
                     this.$ulEle.sortable("enable");
                 } else if (this.$ulEle && !nv) {
+                    this.$ulEle.removeAttr("aria-describedby");
                     this.$ulEle.sortable("disable");
                 }
             } else {
@@ -45090,9 +45128,18 @@
                 _super.prototype.ngAfterViewInit.call(_this);
                 _this.setUpCUDHandlers();
                 _this.selectedItemWidgets = _this.multiselect ? [] : {};
+                var ele = $(_this.nativeElement).find(".app-livelist-container");
                 if (_this.enablereorder && !_this.groupby) {
+                    if (ele) {
+                        ele.attr("aria-describedby", _this.titleId);
+                    }
                     _this.configureDnD();
                 }
+                if (!_this.enablereorder) {
+                    if (ele) {
+                        ele.removeAttr("aria-describedby");
+                    }
+                }
                 if (_this.groupby && _this.collapsible) {
                     _this.handleHeaderClick = base.handleHeaderClick;
                     _this.toggleAllHeaders = base.toggleAllHeaders.bind(undefined, _this);
@@ -45102,6 +45149,16 @@
             this.setupHandlers();
             var $ul = this.nativeElement.querySelector("ul.app-livelist-container");
             base.styler($ul, this, base.APPLY_STYLES_TYPE.SCROLLABLE_CONTAINER);
+            if (this.enablereorder) {
+                if ($ul) {
+                    $ul.setAttribute("aria-describedby", this.titleId);
+                }
+            }
+            if (!this.enablereorder) {
+                if ($ul) {
+                    $ul.removeAttribute("aria-describedby");
+                }
+            }
             if (core.isMobileApp() && $ul.querySelector(".app-list-item-action-panel")) {
                 this._listAnimator = new ListAnimator(this);
             }
@@ -45126,7 +45183,7 @@
         type: core$1.Component,
         args: [ {
             selector: "div[wmList]",
-            template: '<div class="panel-heading" *ngIf="title || subheading || iconclass">\n    <h3 class="panel-title">\n        <div class="pull-left">\n            <i class="app-icon panel-icon {{iconclass}}" aria-hidden="true" [hidden]="!iconclass"></i>\n        </div>\n        <div class="pull-left">\n            <div class="heading" [innerHTML]="title"></div>\n            <div class="description" [innerHTML]="subheading"></div>\n        </div>\n    </h3>\n</div>\n\n<nav class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisablePrevious" aria-label="Page navigation" *ngIf="navigation === \'Inline\' && !noDataFound">\n    <ul class="pager">\n        <li class="previous" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisablePrevious : true)}">\n            <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'prev\', $event)"\n               [attr.aria-disabled]="dataNavigator.isDisablePrevious">\n                <i class="wi wi-chevron-left" aria-hidden="true"></i>\n                <span class="sr-only">Go to Previous page {{dataNavigator.isDisablePrevious ? \', Disabled\' : \'\'}}</span>\n            </a>\n        </li>\n    </ul>\n</nav>\n<div *ngIf="navigation === \'Inline\' && !noDataFound" aria-live="polite" aria-atomic="true" class="sr-only"> {{\'Page \' + dataNavigator.dn.currentPage + \' of \' + dataNavigator.pageCount }}</div>\n\n<div>\n    <div id={{titleId}} class="sr-only" *ngIf="enablereorder">\n        Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n\n    <div aria-live="assertive" *ngIf="listItems && enablereorder && currentIndex" class="sr-only" >\n        {{ariaText + currentIndex + \' of \' +  listItems.length}}\n    </div>\n</div>\n\n<ul [attr.tabindex]="tabindex" [attr.aria-describedby] = "titleId"  class="app-livelist-container clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}} {{listclass}}" role="list"\n    (keydown.enter)="handleKeyDown($event, \'select\')"\n\n    (keydown.space)="handleKeyDown($event, \'space\')"\n\n    (keydown.arrowup)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowdown)="handleKeyDown($event, \'focusNext\')"\n    (keydown.arrowleft)="handleKeyDown($event, \'focusPrev\')"\n    (keydown.arrowright)="handleKeyDown($event, \'focusNext\')"\n\n    (keydown.shift.arrowup)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowdown)="handleKeyDown($event, \'selectNext\')"\n    (keydown.shift.arrowleft)="handleKeyDown($event, \'selectPrev\')"\n    (keydown.shift.arrowright)="handleKeyDown($event, \'selectNext\')"\n    [hidden]="noDataFound && !variableInflight"\n>\n    <ng-template [ngIf]="!groupby" [ngIfElse]="groupedListTemplate">\n        <li *ngFor="let item of fieldDefs; index as $index; first as $first; last as $last;" class="app-list-item {{direction === \'horizontal\' ? \'\' : itemsPerRowClass}}" [ngClass]="listItemRef.itemClass"\n            [wmListItem]="item"\n            #listItemRef="listItemRef"\n            [attr.tabindex]="tabindex"\n            role="listitem">\n            <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n        </li>\n    </ng-template>\n    <ng-container [ngTemplateOutlet]="listLeftActionTemplate"></ng-container>\n    <ng-container [ngTemplateOutlet]="listRightActionTemplate"></ng-container>\n</ul>\n\n<div class="no-data-msg" *ngIf="noDataFound && !variableInflight" [textContent]="nodatamessage"></div>\n\n<div class="loading-data-msg" *ngIf="variableInflight && !pulltorefresh">\n    <span>\n        <i class="app-icon panel-icon fa-spin" aria-hidden="true" [ngClass]="loadingicon"></i>\n        <span class="sr-only">Loading</span>\n        <span class="loading-text" [textContent]="loadingdatamsg"></span>\n    </span>\n</div>\n\n<nav class="app-datanavigator" [attr.aria-disabled]="dataNavigator.isDisableNext" *ngIf="navigation === \'Inline\' && !noDataFound">\n    <ul class="pager">\n        <li class="next" [ngClass]="{\'disabled\': (dataNavigator ? dataNavigator.isDisableNext  : true)}">\n            <a href="javascript:void(0);" (click)="dataNavigator.navigatePage(\'next\', $event)"\n               [attr.aria-disabled]="dataNavigator.isDisableNext">\n                <i class="wi wi-chevron-right" aria-hidden="true"></i>\n                <span class="sr-only">Go to Next page {{dataNavigator.isDisableNext ? \', Disabled\' : \'\'}}</span>\n            </a>\n        </li>\n    </ul>\n</nav>\n\n<div class="panel-footer" *ngIf="navigation !== \'None\'" [hidden]="!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator.dataSize <= pagesize) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)">\n    <nav wmPagination\n         navigationalign.bind="navigationalign"\n         navigation.bind="navControls"\n         showrecordcount.bind="showrecordcount"\n         maxsize.bind="maxsize"\n         boundarylinks.bind="boundarylinks"\n         forceellipses.bind="forceellipses"\n         directionlinks.bind="directionlinks"\n         show.bind="!onDemandLoad"\n         paginationchange.event="beforePaginationChange($event, $index)"\n    ></nav>\n    <a *ngIf="onDemandLoad" href="javascript:void(0);"\n       (click)="dataNavigator.navigatePage(\'next\', $event)"\n       class="app-button btn btn-block"\n       [ngClass]="paginationclass"\n       [textContent]="ondemandmessage"\n    ></a>\n</div>\n\n\x3c!--This template will be displayed when groupby is specified--\x3e\n<ng-template #groupedListTemplate>\n    <li *ngFor="let groupObj of groupedData" class="app-list-item-group clearfix">\n        <ul [attr.tabindex]="tabindex" class="list-group item-group" [ngClass]="listclass">\n            <li class="app-list-item-header list-item list-group-header" (click)="handleHeaderClick($event)" [ngClass]="{\'collapsible-content\': collapsible}">\n            <h4>{{groupObj.key}}\n                <div class="header-action">\n                    <i class="app-icon wi action wi-chevron-up" *ngIf="collapsible"></i>\n                    <span *ngIf="showcount" class="label label-default">{{groupObj.data.length}}</span>\n                    </div>\n                </h4>\n            </li>\n            <ul class="list-group clearfix {{direction === \'horizontal\' ? \'app-horizontal-list\': \'\'}}">\n                <li *ngFor="let item of groupObj.data; index as $index; first as $first; last as $last;" [attr.tabindex]="tabindex"\n                    class="app-list-item group-list-item {{itemsPerRowClass}}"\n                    [ngClass]="listItemRef.itemClass"\n                    [wmListItem]="item" #listItemRef="listItemRef">\n                    <ng-container [ngTemplateOutlet]="listTemplate" [ngTemplateOutletContext]="{item: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}"></ng-container>\n                </li>\n            </ul>\n        </ul>\n    </li>\n</ng-template>\n',
+            template: '<div class="panel-heading" *ngIf="title || subheading || iconclass">\n    <h3 class="panel-title">\n        <div class="pull-left">\n            <i class="app-icon panel-icon {{iconclass}}" aria-hidden="true" [hidden]="!iconclass"></i>\n        </div>\n        <div class="pull-left">\n            <div class="heading" [innerHTML]="title"></div>\n            <div class="description" [innerHTML]="subheading"></div>\n        </div>\n    </h3>\n</div>\n\n<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',
             providers: [ base.provideAsWidgetRef(ListComponent) ]
         } ]
     } ];
@@ -59923,7 +59980,7 @@
             value: true
         }, base.PROP_BOOLEAN) ], [ "title", Object.assign({
             value: "Step Title"
-        }, base.PROP_STRING) ] ]));
+        }, base.PROP_STRING) ], [ "subtitle", base.PROP_STRING ] ]));
     };
     var DEFAULT_CLS$1 = "app-wizard-step-content";
     var WIDGET_CONFIG$1 = {
@@ -60227,6 +60284,7 @@
                     this.setDefaultStep(step);
                 }
             }
+            this.addMoreText();
         };
         WizardComponent.prototype.onWizardHeaderClick = function($event, currentStep) {
             var _this = this;
@@ -60242,6 +60300,7 @@
                 }));
                 this.currentStep = currentStep;
                 this.currentStep.active = true;
+                this.addMoreText();
             }
         };
         WizardComponent.prototype.next = function(eventName) {
@@ -60268,6 +60327,7 @@
                 nextStep.active = true;
                 this.currentStep = nextStep;
             }
+            this.addMoreText();
         };
         WizardComponent.prototype.prev = function() {
             var currentStep = this.currentStep;
@@ -60283,6 +60343,7 @@
                 prevStep.active = true;
                 this.currentStep = prevStep;
             }
+            this.addMoreText();
         };
         WizardComponent.prototype.skip = function() {
             this.next("skip");
@@ -60298,6 +60359,42 @@
                 steps: this.steps.toArray()
             });
         };
+        WizardComponent.prototype.addMoreText = function() {
+            setTimeout((function() {
+                var newWindowWidth = $(window).width();
+                if (newWindowWidth < 768) {
+                    $(".app-wizard-step.current .subtitle-wrapper .step-title").css({
+                        height: "auto",
+                        display: "block"
+                    });
+                    var subtitleTextLength = $(".app-wizard-step.current .subtitle-wrapper .step-title").height();
+                    $(".read_more").css("display", "none");
+                    $(".current .subtitle-wrapper").removeClass("readmore_subtitle");
+                    if (subtitleTextLength > 44) {
+                        $(".app-wizard-step.current .subtitle-wrapper .step-title").css({
+                            height: "44px",
+                            display: "-webkit-box"
+                        });
+                        $(".current .read_more").css("display", "block");
+                        $(".active .read_more").css("display", "none");
+                        $(".disable .read_more").css("display", "none");
+                        $(".app-wizard-step>a").css("height", "100px");
+                    }
+                }
+            }));
+        };
+        WizardComponent.prototype.readMoreSubtitle = function() {
+            $(".current .subtitle-wrapper").addClass("readmore_subtitle");
+            $(".current .read_more").css("display", "none");
+            $(document).on("mouseup", (function(e) {
+                var container = $(".subtitle-wrapper");
+                if (!container.is(e.target) && container.has(e.target).length === 0) {
+                    $(".current .subtitle-wrapper").removeClass("readmore_subtitle");
+                    $(".current .read_more").css("display", "block");
+                    $(document).off("mouseup");
+                }
+            }));
+        };
         WizardComponent.prototype.isFirstStep = function(stepRef) {
             return this.steps.first === stepRef;
         };
@@ -60320,6 +60417,11 @@
         WizardComponent.prototype.ngAfterViewInit = function() {
             _super.prototype.ngAfterViewInit.call(this);
             base.styler(this.nativeElement.querySelector(".panel-body"), this, base.APPLY_STYLES_TYPE.INNER_SHELL);
+            setTimeout((function() {
+                if ($(window).width() < 768) {
+                    $(".app-wizard").removeClass("vertical");
+                }
+            }));
         };
         return WizardComponent;
     }(base.StylableComponent);
@@ -60328,7 +60430,7 @@
         type: core.Component,
         args: [ {
             selector: "div[wmWizard]",
-            template: '<div class="app-wizard-heading" role="tab">\n    <ul class="app-wizard-steps nav nav-pills {{stepClass}}">\n        <li class="app-wizard-step" *ngFor="let step of steps; let i = index" [hidden]="!step.show"\n            [ngClass]="{active: step.done, current: step.active, disabled: step.disabled}"\n            (click)="onWizardHeaderClick($event, step)">\n            <a href="javascript:void(0)" [attr.aria-label]="step.title" [attr.title]="step.title">\n                <span class="arrow" *ngIf="class && class.includes(\'classic\')"></span>\n                <span class="wizard-step-number">\n                    <span class="count" *ngIf="class && class.includes(\'number\') && !step.isDone">{{i+1}}</span>\n                    <i class="dottedstepper" *ngIf="class && (class.includes(\'dottedstepper\') || class.includes(\'text-inline\') && !class.includes(\'iconstepper\')) && !step.isDone"></i>\n                    <i class="app-icon wi wi-done" *ngIf="class && (class.includes(\'dottedstepper\') || class.includes(\'number\')) && step.isDone"></i>\n                    <i class="app-icon {{step.iconclass}}" *ngIf="(class && class.includes(\'iconstepper\')) && ((step.iconclass && !step.isDone) || (step.iconclass && step.isDone && step.doneiconclass ===\'\'))"></i>\n                    <i class="app-icon {{step.doneiconclass}}" *ngIf="step.doneiconclass && step.isDone && (class && class.includes(\'iconstepper\'))"></i>\n                </span>\n                <span class="title-wrapper">\n                    <span *ngIf="class && class.includes(\'text-inline\')">{{\'0\' + (i+1)}}</span>\n                    <span class="step-title" [textContent]="step.title"></span>\n                </span>\n            </a>\n        </li>\n    </ul>\n</div>\n<div class="app-wizard-body panel-body" role="tabpanel">\n    <p wmMessage *ngIf="message.caption" caption.bind="message.caption" type.bind="message.type"></p>\n    <ng-content ngProjectAs="form[wmWizardStep]"></ng-content>\n</div>\n<div class="app-wizard-actions panel-footer {{actionsalignment}}">\n    <a class="app-wizard-skip" name="skipStep_{{name}}" *ngIf="currentStep?.enableskip" title="Skip step" (click)="skip()">Skip &raquo;</a>\n    <div class="app-wizard-actions-right">\n        <button type="button" name="cancelBtn_{{name}}" class="btn app-button btn-default" *ngIf="cancelable"\n                (click)="cancel()" [title]="cancelbtnlabel" [textContent]="cancelbtnlabel"></button>\n        <button type="button" name="previousBtn_{{name}}" class="btn app-button btn-default"\n                *ngIf="hasPrevStep" (click)="prev()" [disabled]="!enablePrev">\n            <i class="app-icon wi wi-chevron-left"></i>\n            <span class="btn-caption" [textContent]="previousbtnlabel"></span>\n        </button>\n        <button type="button" name="nextBtn_{{name}}" class="btn app-button btn-primary"\n                *ngIf="hasNextStep" (click)="next()" [disabled]="!enableNext">\n            <span class="btn-caption" [textContent]="nextbtnlabel"></span>\n            <i class="app-icon wi wi-chevron-right"></i>\n        </button>\n        <button type="button" name="doneBtn_{{name}}" class="btn app-button btn-success"\n                *ngIf="showDoneBtn" (click)="done()"\n                [disabled]="!enableDone">\n            <i class="app-icon wm-sl-l sl-check"></i>\n            <span class="btn-caption" [textContent]="donebtnlabel"></span>\n        </button>\n    </div>\n</div>\n',
+            template: '<div class="app-wizard-heading" role="tab">\n    <ul class="app-wizard-steps nav nav-pills {{stepClass}}">\n        <li class="app-wizard-step" *ngFor="let step of steps; let i = index" [hidden]="!step.show"\n            [ngClass]="{active: step.done, current: step.active, disabled: step.disabled}"\n            (click)="onWizardHeaderClick($event, step)">\n            <a href="javascript:void(0)" [attr.aria-label]="step.title" [attr.title]="step.title" [ngClass]="{\'title-center-align\':class && class.includes(\'classic\') && !step.subtitle}">\n                <span class="arrow" *ngIf="class && class.includes(\'classic\')"></span>\n                <span class="wizard-step-number">\n                    <span class="count" *ngIf="class && class.includes(\'number\') && !step.isDone">{{i+1}}</span>\n                    <i class="dottedstepper" *ngIf="class && (class.includes(\'dottedstepper\') || class.includes(\'text-inline\') && !class.includes(\'iconstepper\')) && !step.isDone"></i>\n                    <i class="app-icon wi wi-done" *ngIf="class && (class.includes(\'dottedstepper\') || class.includes(\'number\')) && step.isDone"></i>\n                    <i class="app-icon {{step.iconclass}}" *ngIf="(class && class.includes(\'iconstepper\')) && ((step.iconclass && !step.isDone) || (step.iconclass && step.isDone && step.doneiconclass ===\'\'))"></i>\n                    <i class="app-icon {{step.doneiconclass}}" *ngIf="step.doneiconclass && step.isDone && (class && class.includes(\'iconstepper\'))"></i>\n                </span>\n                <span class="title-wrapper">\n                    <span *ngIf="class && class.includes(\'text-inline\')">{{\'0\' + (i+1)}}</span>\n                    <span class="step-title" [textContent]="step.title"></span>\n                </span>\n                <span class="subtitle-wrapper" [attr.title]="step.subtitle" *ngIf="step.subtitle">\n                    <span class="step-title" [textContent]="step.subtitle"></span>\n                    <a class="read_more" (click)="readMoreSubtitle()" style="display:none">more</a>\n                </span>\n            </a>    \n        </li>\n    </ul>\n</div>\n<div class="app-wizard-body panel-body" role="tabpanel">\n    <p wmMessage *ngIf="message.caption" caption.bind="message.caption" type.bind="message.type"></p>\n    <ng-content ngProjectAs="form[wmWizardStep]"></ng-content>\n</div>\n<div class="app-wizard-actions panel-footer {{actionsalignment}}">\n    <a class="app-wizard-skip" name="skipStep_{{name}}" *ngIf="currentStep?.enableskip" title="Skip step" (click)="skip()">Skip &raquo;</a>\n    <div class="app-wizard-actions-right">\n        <button type="button" name="cancelBtn_{{name}}" class="btn app-button btn-default" *ngIf="cancelable"\n                (click)="cancel()" [title]="cancelbtnlabel" [textContent]="cancelbtnlabel"></button>\n        <button type="button" name="previousBtn_{{name}}" class="btn app-button btn-default"\n                *ngIf="hasPrevStep" (click)="prev()" [disabled]="!enablePrev">\n            <i class="app-icon wi wi-chevron-left"></i>\n            <span class="btn-caption" [textContent]="previousbtnlabel"></span>\n        </button>\n        <button type="button" name="nextBtn_{{name}}" class="btn app-button btn-primary"\n                *ngIf="hasNextStep" (click)="next()" [disabled]="!enableNext">\n            <span class="btn-caption" [textContent]="nextbtnlabel"></span>\n            <i class="app-icon wi wi-chevron-right"></i>\n        </button>\n        <button type="button" name="doneBtn_{{name}}" class="btn app-button btn-success"\n                *ngIf="showDoneBtn" (click)="done()"\n                [disabled]="!enableDone">\n            <i class="app-icon wm-sl-l sl-check"></i>\n            <span class="btn-caption" [textContent]="donebtnlabel"></span>\n        </button>\n    </div>\n</div>\n',
             providers: [ base.provideAsWidgetRef(WizardComponent) ]
         } ]
     } ];
@@ -82348,9 +82450,152 @@
             type: ComponentRefProvider
         } ];
     };
+    var PipeProvider = function() {
+        function PipeProvider(compiler, injector, domSanitizer, i18service) {
+            var _this = this;
+            var _a;
+            this.compiler = compiler;
+            this.injector = injector;
+            this.domSanitizer = domSanitizer;
+            this.i18service = i18service;
+            this._locale = i2.getSessionStorageItem("selectedLocale") || "en";
+            this.formatsByLocale = (_a = this.i18service) === null || _a === void 0 ? void 0 : _a.getwidgetLocale();
+            this.preparePipeMeta = function(reference, name, pure, diDeps) {
+                if (diDeps === void 0) {
+                    diDeps = [];
+                }
+                return {
+                    type: {
+                        reference: reference,
+                        diDeps: diDeps
+                    },
+                    name: name,
+                    pure: pure
+                };
+            };
+            this._pipeData = [ this.preparePipeMeta(common.AsyncPipe, "async", false, [ i0.ChangeDetectorRef ]), this.preparePipeMeta(common.SlicePipe, "slice", false), this.preparePipeMeta(common.PercentPipe, "percent", true, [ this._locale ]), this.preparePipeMeta(common.I18nPluralPipe, "i18nPlural", true, [ common.NgLocalization ]), this.preparePipeMeta(common.I18nSelectPipe, "i18nSelect", true), this.preparePipeMeta(common.KeyValuePipe, "keyvalue", false, [ i0.KeyValueDiffers ]), this.preparePipeMeta(base.FileIconClassPipe, "fileIconClass", true), this.preparePipeMeta(base.FileExtensionFromMimePipe, "fileExtensionFromMime", true), this.preparePipeMeta(base.StateClassPipe, "stateClass", true), this.preparePipeMeta(base.FileSizePipe, "filesize", true), this.preparePipeMeta(base.FilterPipe, "filter", true), this.preparePipeMeta(common.UpperCasePipe, "uppercase", true), this.preparePipeMeta(common.LowerCasePipe, "lowercase", true), this.preparePipeMeta(common.JsonPipe, "json", false), this.preparePipeMeta(common.DecimalPipe, "number", true, [ this._locale ]), this.preparePipeMeta(common.TitleCasePipe, "titlecase", true), this.preparePipeMeta(common.CurrencyPipe, "currency", true, [ this._locale ]), this.preparePipeMeta(common.DatePipe, "date", true, [ this._locale ]), this.preparePipeMeta(base.ToDatePipe, "toDate", true, [ new common.DatePipe(this._locale) ]), this.preparePipeMeta(base.ToNumberPipe, "toNumber", true, [ new common.DecimalPipe(this._locale), this.i18service ]), this.preparePipeMeta(base.ToCurrencyPipe, "toCurrency", true, [ new common.DecimalPipe(this._locale), this.i18service ]), this.preparePipeMeta(base.PrefixPipe, "prefix", true), this.preparePipeMeta(base.SuffixPipe, "suffix", true), this.preparePipeMeta(base.TimeFromNowPipe, "timeFromNow", true), this.preparePipeMeta(base.NumberToStringPipe, "numberToString", true, [ new common.DecimalPipe(this._locale) ]), this.preparePipeMeta(base.StringToNumberPipe, "stringToNumber", true), this.preparePipeMeta(base.CustomPipe, "custom", true, [ this.injector.get(i2.CustomPipeManager) ]), this.preparePipeMeta(base.TrustAsPipe, "trustAs", true, [ this.domSanitizer ]), this.preparePipeMeta(base.SanitizePipe, "sanitize", true, [ this.domSanitizer ]) ];
+            this._pipeMeta = new Map;
+            this._pipeData.forEach((function(v) {
+                _this._pipeMeta.set(v.name, v);
+            }));
+        }
+        PipeProvider.prototype.unknownPipe = function(name) {
+            throw Error("The pipe '" + name + "' could not be found");
+        };
+        PipeProvider.prototype.meta = function(name) {
+            var meta = this._pipeMeta.get(name);
+            if (!meta) {
+                this.unknownPipe(name);
+            }
+            return meta;
+        };
+        PipeProvider.prototype.getPipeNameVsIsPureMap = function() {
+            var _map = new Map;
+            this._pipeMeta.forEach((function(v, k) {
+                _map.set(k, v.pure);
+            }));
+            return _map;
+        };
+        PipeProvider.prototype.resolveDep = function(dep) {
+            return this.injector.get(dep.token.identifier.reference);
+        };
+        PipeProvider.prototype.getInstance = function(name) {
+            var e_1, _b;
+            var _c = this.meta(name).type, ref = _c.reference, deps = _c.diDeps;
+            if (!ref) {
+                this.unknownPipe(name);
+            }
+            if (!deps.length) {
+                return new ref;
+            } else {
+                var args = [];
+                try {
+                    for (var deps_1 = __values(deps), deps_1_1 = deps_1.next(); !deps_1_1.done; deps_1_1 = deps_1.next()) {
+                        var dep = deps_1_1.value;
+                        args.push(dep);
+                    }
+                } catch (e_1_1) {
+                    e_1 = {
+                        error: e_1_1
+                    };
+                } finally {
+                    try {
+                        if (deps_1_1 && !deps_1_1.done && (_b = deps_1.return)) _b.call(deps_1);
+                    } finally {
+                        if (e_1) throw e_1.error;
+                    }
+                }
+                return new (ref.bind.apply(ref, __spreadArray([ void 0 ], __read(args))));
+            }
+        };
+        return PipeProvider;
+    }();
+    PipeProvider.\u0275prov = i0__namespace.\u0275\u0275defineInjectable({
+        factory: function PipeProvider_Factory() {
+            return new PipeProvider(i0__namespace.\u0275\u0275inject(i0__namespace.Compiler), i0__namespace.\u0275\u0275inject(i0__namespace.INJECTOR), i0__namespace.\u0275\u0275inject(i1__namespace.DomSanitizer), i0__namespace.\u0275\u0275inject(i2__namespace.AbstractI18nService));
+        },
+        token: PipeProvider,
+        providedIn: "root"
+    });
+    PipeProvider.decorators = [ {
+        type: i0.Injectable,
+        args: [ {
+            providedIn: "root"
+        } ]
+    } ];
+    PipeProvider.ctorParameters = function() {
+        return [ {
+            type: i0.Compiler
+        }, {
+            type: i0.Injector
+        }, {
+            type: i1.DomSanitizer
+        }, {
+            type: i2.AbstractI18nService
+        } ];
+    };
+    var PipeService = function() {
+        function PipeService(pipeProvider, $app) {
+            this.pipeProvider = pipeProvider;
+            this.$app = $app;
+            this.supportedPipes = [ "toDate", "toCurrency", "prefix", "suffix", "numberToString", "stringToNumber", "timeFromNow", "trustAs", "sanitize" ];
+            if (this.$app.isApplicationType) {
+                this.supportedPipes.push("custom");
+            }
+        }
+        PipeService.prototype.getPipe = function(name) {
+            if (this.supportedPipes.includes(name)) {
+                return this.pipeProvider.getInstance(name);
+            } else {
+                throw Error("The pipe '" + name + "' could not be found");
+            }
+        };
+        return PipeService;
+    }();
+    PipeService.\u0275prov = i0__namespace.\u0275\u0275defineInjectable({
+        factory: function PipeService_Factory() {
+            return new PipeService(i0__namespace.\u0275\u0275inject(PipeProvider), i0__namespace.\u0275\u0275inject(i2__namespace.App));
+        },
+        token: PipeService,
+        providedIn: "root"
+    });
+    PipeService.decorators = [ {
+        type: i0.Injectable,
+        args: [ {
+            providedIn: "root"
+        } ]
+    } ];
+    PipeService.ctorParameters = function() {
+        return [ {
+            type: PipeProvider
+        }, {
+            type: i2.App
+        } ];
+    };
     var injectorMap = {
         DialogService: i2.AbstractDialogService,
         i18nService: i2.AbstractI18nService,
+        PipeService: PipeService,
         statePersistence: i2.StatePersistence,
         SpinnerService: i2.AbstractSpinnerService,
         StatePersistenceService: i2.StatePersistence,
@@ -83467,110 +83712,6 @@
             type: i2.AbstractI18nService
         } ];
     };
-    var PipeProvider = function() {
-        function PipeProvider(compiler, injector, domSanitizer, i18service) {
-            var _this = this;
-            var _a;
-            this.compiler = compiler;
-            this.injector = injector;
-            this.domSanitizer = domSanitizer;
-            this.i18service = i18service;
-            this._locale = i2.getSessionStorageItem("selectedLocale") || "en";
-            this.formatsByLocale = (_a = this.i18service) === null || _a === void 0 ? void 0 : _a.getwidgetLocale();
-            this.preparePipeMeta = function(reference, name, pure, diDeps) {
-                if (diDeps === void 0) {
-                    diDeps = [];
-                }
-                return {
-                    type: {
-                        reference: reference,
-                        diDeps: diDeps
-                    },
-                    name: name,
-                    pure: pure
-                };
-            };
-            this._pipeData = [ this.preparePipeMeta(common.AsyncPipe, "async", false, [ i0.ChangeDetectorRef ]), this.preparePipeMeta(common.SlicePipe, "slice", false), this.preparePipeMeta(common.PercentPipe, "percent", true, [ this._locale ]), this.preparePipeMeta(common.I18nPluralPipe, "i18nPlural", true, [ common.NgLocalization ]), this.preparePipeMeta(common.I18nSelectPipe, "i18nSelect", true), this.preparePipeMeta(common.KeyValuePipe, "keyvalue", false, [ i0.KeyValueDiffers ]), this.preparePipeMeta(base.FileIconClassPipe, "fileIconClass", true), this.preparePipeMeta(base.FileExtensionFromMimePipe, "fileExtensionFromMime", true), this.preparePipeMeta(base.StateClassPipe, "stateClass", true), this.preparePipeMeta(base.FileSizePipe, "filesize", true), this.preparePipeMeta(base.FilterPipe, "filter", true), this.preparePipeMeta(common.UpperCasePipe, "uppercase", true), this.preparePipeMeta(common.LowerCasePipe, "lowercase", true), this.preparePipeMeta(common.JsonPipe, "json", false), this.preparePipeMeta(common.DecimalPipe, "number", true, [ this._locale ]), this.preparePipeMeta(common.TitleCasePipe, "titlecase", true), this.preparePipeMeta(common.CurrencyPipe, "currency", true, [ this._locale ]), this.preparePipeMeta(common.DatePipe, "date", true, [ this._locale ]), this.preparePipeMeta(base.ToDatePipe, "toDate", true, [ new common.DatePipe(this._locale) ]), this.preparePipeMeta(base.ToNumberPipe, "toNumber", true, [ new common.DecimalPipe(this._locale), this.i18service ]), this.preparePipeMeta(base.ToCurrencyPipe, "toCurrency", true, [ new common.DecimalPipe(this._locale), this.i18service ]), this.preparePipeMeta(base.PrefixPipe, "prefix", true), this.preparePipeMeta(base.SuffixPipe, "suffix", true), this.preparePipeMeta(base.TimeFromNowPipe, "timeFromNow", true), this.preparePipeMeta(base.NumberToStringPipe, "numberToString", true, [ new common.DecimalPipe(this._locale) ]), this.preparePipeMeta(base.StringToNumberPipe, "stringToNumber", true), this.preparePipeMeta(base.CustomPipe, "custom", true, [ this.injector.get(i2.CustomPipeManager) ]), this.preparePipeMeta(base.TrustAsPipe, "trustAs", true, [ this.domSanitizer ]), this.preparePipeMeta(base.SanitizePipe, "sanitize", true, [ this.domSanitizer ]) ];
-            this._pipeMeta = new Map;
-            this._pipeData.forEach((function(v) {
-                _this._pipeMeta.set(v.name, v);
-            }));
-        }
-        PipeProvider.prototype.unknownPipe = function(name) {
-            throw Error("The pipe '" + name + "' could not be found");
-        };
-        PipeProvider.prototype.meta = function(name) {
-            var meta = this._pipeMeta.get(name);
-            if (!meta) {
-                this.unknownPipe(name);
-            }
-            return meta;
-        };
-        PipeProvider.prototype.getPipeNameVsIsPureMap = function() {
-            var _map = new Map;
-            this._pipeMeta.forEach((function(v, k) {
-                _map.set(k, v.pure);
-            }));
-            return _map;
-        };
-        PipeProvider.prototype.resolveDep = function(dep) {
-            return this.injector.get(dep.token.identifier.reference);
-        };
-        PipeProvider.prototype.getInstance = function(name) {
-            var e_1, _b;
-            var _c = this.meta(name).type, ref = _c.reference, deps = _c.diDeps;
-            if (!ref) {
-                this.unknownPipe(name);
-            }
-            if (!deps.length) {
-                return new ref;
-            } else {
-                var args = [];
-                try {
-                    for (var deps_1 = __values(deps), deps_1_1 = deps_1.next(); !deps_1_1.done; deps_1_1 = deps_1.next()) {
-                        var dep = deps_1_1.value;
-                        args.push(dep);
-                    }
-                } catch (e_1_1) {
-                    e_1 = {
-                        error: e_1_1
-                    };
-                } finally {
-                    try {
-                        if (deps_1_1 && !deps_1_1.done && (_b = deps_1.return)) _b.call(deps_1);
-                    } finally {
-                        if (e_1) throw e_1.error;
-                    }
-                }
-                return new (ref.bind.apply(ref, __spreadArray([ void 0 ], __read(args))));
-            }
-        };
-        return PipeProvider;
-    }();
-    PipeProvider.\u0275prov = i0__namespace.\u0275\u0275defineInjectable({
-        factory: function PipeProvider_Factory() {
-            return new PipeProvider(i0__namespace.\u0275\u0275inject(i0__namespace.Compiler), i0__namespace.\u0275\u0275inject(i0__namespace.INJECTOR), i0__namespace.\u0275\u0275inject(i1__namespace.DomSanitizer), i0__namespace.\u0275\u0275inject(i2__namespace.AbstractI18nService));
-        },
-        token: PipeProvider,
-        providedIn: "root"
-    });
-    PipeProvider.decorators = [ {
-        type: i0.Injectable,
-        args: [ {
-            providedIn: "root"
-        } ]
-    } ];
-    PipeProvider.ctorParameters = function() {
-        return [ {
-            type: i0.Compiler
-        }, {
-            type: i0.Injector
-        }, {
-            type: i1.DomSanitizer
-        }, {
-            type: i2.AbstractI18nService
-        } ];
-    };
     var AppComponent = function() {
         function AppComponent(_pipeProvider, _appRef, elRef, oAuthService, dialogService, spinnerService, ngZone, router$1, app, appManager) {
             var _this = this;
@@ -84561,7 +84702,7 @@
                     provide: http.HTTP_INTERCEPTORS,
                     useClass: HttpCallInterceptor,
                     multi: true
-                }, common.DecimalPipe, common.DatePipe, AppManagerService, PrefabManagerService, AuthGuard, RoleGuard, PageNotFoundGaurd, CanDeactivatePageGuard, AppJSResolve, AppExtensionJSResolve, I18nResolve, getSettingProvider(MAX_CACHE_SIZE, 10), getSettingProvider(MAX_CACHE_AGE, 30 * 60) ]
+                }, PipeService, common.DecimalPipe, common.DatePipe, AppManagerService, PrefabManagerService, AuthGuard, RoleGuard, PageNotFoundGaurd, CanDeactivatePageGuard, AppJSResolve, AppExtensionJSResolve, I18nResolve, getSettingProvider(MAX_CACHE_SIZE, 10), getSettingProvider(MAX_CACHE_AGE, 30 * 60) ]
             };
         };
         RuntimeBaseModule.prototype.getDeviceDetails = function() {
@@ -84754,6 +84895,7 @@
     exports.NavigationServiceImpl = NavigationServiceImpl;
     exports.PageNotFoundGaurd = PageNotFoundGaurd;
     exports.PipeProvider = PipeProvider;
+    exports.PipeService = PipeService;
     exports.PrefabConfigProvider = PrefabConfigProvider;
     exports.PrefabDirective = PrefabDirective;
     exports.PrefabManagerService = PrefabManagerService;