npm - @wavemaker/app-ng-runtime - Versions diffs - 11.6.0-next.140456 → 11.6.0-next.140458 - Mend

@wavemaker/app-ng-runtime 11.6.0-next.140456 → 11.6.0-next.140458

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

app-ng-runtime/components/input/epoch/fesm2022/index.mjs CHANGED Viewed

@@ -849,6 +849,37 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
     isOtheryear(newDate) {
         return (newDate.getMonth() === 0 && this.activeDate.getMonth() === 11) || (newDate.getMonth() === 11 && this.activeDate.getMonth() === 0);
     }
+    showDatePickerModal(bsDataval) {
+        bsDataval ? this.activeDate = bsDataval : this.activeDate = new Date();
+        this.setNextData(this.activeDate);
+        this.datetimepickerComponent.show();
+        setTimeout(() => {
+            this.addDatepickerMouseEvents();
+            this.setActiveDateFocus(this.activeDate, true);
+        }, 500);
+        return;
+    }
+    /**
+     * This method is used to load other month days or other month or other year
+     * @param btnClass - class(previous/next) of the button which we have to click
+     * @param timePeriod - String value decides to load other month days or other month or other year
+     */
+    goToOtherMonthOryear(btnClass, timePeriod) {
+        const $node = $(`.bs-datepicker-head .${btnClass}`);
+        if ($node.attr('disabled')) {
+            return;
+        }
+        $node.trigger('click');
+        if (timePeriod === 'days') {
+            this.loadDays();
+        }
+        else if (timePeriod === 'month') {
+            this.loadMonths();
+        }
+        else if (timePeriod === 'year') {
+            this.loadYears();
+        }
+    }
     /**
      * This method is used to set focus for active day
      * @param newDate - newly selected date value
@@ -856,6 +887,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
      */
     setActiveDateFocus(newDate, isMouseEvent) {
         this.setNextData(newDate);
+        this.clicked = false;
         const activeMonth = this.activeDate.getMonth();
         // check for keyboard event
         if (!isMouseEvent) {
@@ -885,27 +917,6 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             }
         });
     }
-    /**
-     * This method is used to load other month days or other month or other year
-     * @param btnClass - class(previous/next) of the button which we have to click
-     * @param timePeriod - String value decides to load other month days or other month or other year
-     */
-    goToOtherMonthOryear(btnClass, timePeriod) {
-        const $node = $(`.bs-datepicker-head .${btnClass}`);
-        if ($node.attr('disabled')) {
-            return;
-        }
-        $node.trigger('click');
-        if (timePeriod === 'days') {
-            this.loadDays();
-        }
-        else if (timePeriod === 'month') {
-            this.loadMonths();
-        }
-        else if (timePeriod === 'year') {
-            this.loadYears();
-        }
-    }
     getMonth(date, inc) {
         const currentMonth = new Date(date);
         let month = currentMonth.getMonth();
@@ -918,57 +929,6 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             fullMonth: fullMonth
         };
     }
-    /**
-    * This method sets the mouse events to Datepicker popup. These events are required when we navigate date picker through mouse.
-     */
-    addDatepickerMouseEvents() {
-        const datePickerHead = $(`.bs-datepicker-head`);
-        datePickerHead.find(`.previous`).click((event) => {
-            this.next = this.getMonth(this.activeDate, 0);
-            this.prev = this.getMonth(this.activeDate, -2);
-            this.clicked = true;
-            // check for original mouse click
-            if (event.originalEvent) {
-                this.setFocusForDate(-1);
-            }
-            var prevMon = this.getMonth(this.activeDate, -1);
-            $(`.bs-datepicker-head .previous`).prepend(`<p aria-hidden="false" class="sr-only">Changed to Previous Month, ${prevMon.fullMonth} and year ${prevMon.date.getFullYear()}</p>`);
-            setTimeout(() => {
-                $(`.bs-datepicker-head .previous`).focus();
-            });
-        });
-        datePickerHead.find(`.next`).click((event) => {
-            this.next = this.getMonth(this.activeDate, 2);
-            this.prev = this.getMonth(this.activeDate, 0);
-            this.clicked = true;
-            // check for original mouse click
-            if (event.originalEvent) {
-                this.setFocusForDate(1);
-            }
-            var nextMon = this.getMonth(this.activeDate, 1);
-            $(`.bs-datepicker-head .next`).prepend(`<p aria-hidden="false" class="sr-only">Changed to Next Month, ${nextMon.fullMonth} and year ${nextMon.date.getFullYear()}</p>`);
-            setTimeout(() => {
-                $(`.bs-datepicker-head .next`).focus();
-            });
-        });
-        datePickerHead.find(`.current`).click((event) => {
-            // check for original mouse click
-            if (event.originalEvent) {
-                this.setFocusForCurrentMonthOryear();
-            }
-        });
-        $('.bs-datepicker-body, .bs-datepicker-action-buttons').click((event) => {
-            event.stopPropagation();
-            // check for original mouse click
-            if (event.originalEvent) {
-                this.setFocusForMonthOrDay();
-            }
-        });
-        if (!this.clicked) {
-            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()}`);
-        }
-    }
     /**
      * This method sets focus for months/days depending on the loaded datepicker table
      */
@@ -1474,9 +1434,71 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             return _.get(window, 'cordova.wavemaker.datePicker.selectDate');
         }
     }
-    showDatePickerModal() {
-        this.datetimepickerComponent.show();
-        return;
+    /**
+     * This method sets the mouse events to Datepicker popup. These events are required when we navigate date picker through mouse.
+     */
+    addDatepickerMouseEvents() {
+        $(".bs-datepicker-head .previous span").attr("aria-hidden", true);
+        $(".bs-datepicker-head .next span").attr("aria-hidden", true);
+        $(".bs-datepicker-head").on("click", ".previous", (event) => {
+            this.next = this.getMonth(this.activeDate, 0);
+            this.prev = this.getMonth(this.activeDate, -2);
+            this.clicked = true;
+            // check for original mouse click
+            if (event.originalEvent) {
+                this.setFocusForDate(-1);
+            }
+            var prevMon = this.getMonth(this.activeDate, -1);
+            setTimeout(() => {
+                $(".bs-datepicker-head .previous span").attr("aria-hidden", true);
+                $(".bs-datepicker-head .next span").attr("aria-hidden", true);
+                $(".bs-datepicker-head .next").attr('aria-label', `Next Month, ${this.next.fullMonth} ${this.next.date.getFullYear()}`);
+                $(".bs-datepicker-head .previous").attr('aria-label', `Previous Month, ${this.prev.fullMonth} ${this.prev.date.getFullYear()}`);
+                $('.bs-datepicker-head .current').first().append(`<h2 aria-hidden="false" aria-atomic="true" aria-live='polite' class="sr-only">Changed to Previous Month, ${prevMon.fullMonth} and year ${prevMon.date.getFullYear()}</h2>`);
+                $('.bs-datepicker-head').on('focus', '.current', function () {
+                    $('.bs-datepicker-head .current').find('h2').remove();
+                });
+                $(`.bs-datepicker-head .previous`).focus();
+            });
+        });
+        $(".bs-datepicker-head").on("click", ".next", (event) => {
+            this.next = this.getMonth(this.activeDate, 2);
+            this.prev = this.getMonth(this.activeDate, 0);
+            this.clicked = true;
+            // check for original mouse click
+            if (event.originalEvent) {
+                this.setFocusForDate(1);
+            }
+            var nextMon = this.getMonth(this.activeDate, 1);
+            setTimeout(() => {
+                $(".bs-datepicker-head .previous span").attr("aria-hidden", true);
+                $(".bs-datepicker-head .next span").attr("aria-hidden", true);
+                $(".bs-datepicker-head .next").attr('aria-label', `Next Month, ${this.next.fullMonth} ${this.next.date.getFullYear()}`);
+                $(".bs-datepicker-head .previous").attr('aria-label', `Previous Month, ${this.prev.fullMonth} ${this.prev.date.getFullYear()}`);
+                $('.bs-datepicker-head .current').first().append(`<h2 aria-hidden="false" aria-atomic="true" aria-live='polite' class="sr-only">Changed to Next Month, ${nextMon.fullMonth} and year ${nextMon.date.getFullYear()}</h2>`);
+                $('.bs-datepicker-head').on('focus', '.current', function () {
+                    $('.bs-datepicker-head .current').find('h2').remove();
+                });
+                $(`.bs-datepicker-head .next`).focus();
+            });
+        });
+        $(".bs-datepicker-head").on("click", ".current", (event) => {
+            // check for original mouse click
+            if (event.originalEvent) {
+                this.setFocusForCurrentMonthOryear();
+            }
+        });
+        $('.bs-datepicker-body').on("click", ".bs-datepicker-action-buttons", (event) => {
+            event.stopPropagation();
+            // check for original mouse click
+            if (event.originalEvent) {
+                this.setFocusForMonthOrDay();
+            }
+        });
+        // if(!this.clicked) {
+        $(".bs-datepicker-head .next").attr('aria-label', `Next Month, ${this.next.fullMonth} ${this.next.date.getFullYear()}`);
+        $(".bs-datepicker-head .previous").attr('aria-label', `Previous Month, ${this.prev.fullMonth} ${this.prev.date.getFullYear()}`);
+        //  }
     }
     blurDateInput(isPickerOpen) {
         const displayInputElem = this.nativeElement.querySelector('.display-input');
@@ -1644,14 +1666,14 @@ function DateComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("change", function DateComponent_ng_template_7_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDateChange($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(1, "div", 9);
-    i0.ɵɵlistener("focus", function DateComponent_ng_template_7_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r4 = i0.ɵɵnextContext(); ctx_r4.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r4.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_7_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r5 = i0.ɵɵnextContext(); ctx_r5.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r5.invokeOnTouched($event)); })("click", function DateComponent_ng_template_7_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r6.disabled || ctx_r6.readonly || ctx_r6.isCurrentDate) && ctx_r6.showDatePickerModal()); });
+    i0.ɵɵlistener("click", function DateComponent_ng_template_7_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r4.disabled || ctx_r4.readonly || ctx_r4.isCurrentDate) && ctx_r4.showDatePickerModal(ctx_r4.bsDataValue)); })("focus", function DateComponent_ng_template_7_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r5 = i0.ɵɵnextContext(); ctx_r5.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r5.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_7_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r6 = i0.ɵɵnextContext(); ctx_r6.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r6.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("config", ctx_r1._dateOptions)("placement", ctx_r1.modal)("excludedDaysToDisable", ctx_r1.excludedDaysToDisable)("excludedDatesToDisable", ctx_r1.excludedDatesToDisable)("displayFormat", ctx_r1.dateInputFormat)("value", ctx_r1.bsDataValue);
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("tabindex", ctx_r1.tabindex || 0);
-    i0.ɵɵattribute("aria-label", ctx_r1.displayValue ? "Change Date" + ctx_r1.displayValue : "Choose Date");
+    i0.ɵɵattribute("aria-label", ctx_r1.displayValue ? "Change Date " + ctx_r1.displayValue : ctx_r1.hint || "Choose Date");
 } }
 const CURRENT_DATE$1 = 'CURRENT_DATE';
 const DEFAULT_CLS$2 = 'app-date input-group';
@@ -1885,7 +1907,7 @@ class DateComponent extends BaseDateTimeComponent {
                 provideAs(DateComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(DateComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(DateComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$2, decls: 8, vars: 25, consts: [["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "app-dateinput", "display-input", 3, "name", "tabindex", "value", "disabled", "autofocus", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "bsDatepicker", "", "placement", "bottom right", 1, "model-holder", 3, "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue", "onShown", "onHidden", "bsValueChange"], ["datepicker", "bsDatepicker"], [3, "ngIf"], ["dateTimePicker", "", "mode", "DATE", 3, "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value", "change"], [1, "mobile-input", "mobile-datepicker-container", 3, "tabindex", "focus", "blur", "click"]], template: function DateComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$2, decls: 8, vars: 25, consts: [["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "app-dateinput", "display-input", 3, "name", "tabindex", "value", "disabled", "autofocus", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "bsDatepicker", "", "placement", "bottom right", 1, "model-holder", 3, "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue", "onShown", "onHidden", "bsValueChange"], ["datepicker", "bsDatepicker"], [3, "ngIf"], ["dateTimePicker", "", "mode", "DATE", 3, "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value", "change"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "tabindex", "click", "focus", "blur"]], template: function DateComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "input", 0);
             i0.ɵɵlistener("click", function DateComponent_Template_input_click_0_listener($event) { return ctx.toggleDpDropdown($event, true); })("focus", function DateComponent_Template_input_focus_0_listener($event) { ctx.onDateTimeInputFocus(); return ctx.invokeOnFocus($event); })("blur", function DateComponent_Template_input_blur_0_listener($event) { return ctx.onInputBlur($event); })("change", function DateComponent_Template_input_change_0_listener($event) { return ctx.onDisplayDateChange($event); })("keydown", function DateComponent_Template_input_keydown_0_listener($event) { ctx._triggeredByUser = true; return ctx.onDisplayKeydown($event); });
             i0.ɵɵelementEnd();
@@ -1916,7 +1938,7 @@ class DateComponent extends BaseDateTimeComponent {
                     provideAs(DateComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(DateComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(DateComponent)
-                ], 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]=\"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         (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal(bsDataValue)\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event);\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : hint || 'Choose Date'\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }]; }, { bsDatePickerDirective: [{
             type: ViewChild,
             args: [BsDatepickerDirective]
@@ -1984,13 +2006,14 @@ function DatetimeComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("change", function DatetimeComponent_ng_template_11_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onModelUpdate($event, "date")); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(1, "div", 15);
-    i0.ɵɵlistener("focus", function DatetimeComponent_ng_template_11_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r10 = i0.ɵɵnextContext(); ctx_r10.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r10.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r11 = i0.ɵɵnextContext(); ctx_r11.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r11.invokeOnTouched($event)); })("click", function DatetimeComponent_ng_template_11_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r12.disabled || ctx_r12.readonly || ctx_r12.isCurrentDate) && ctx_r12.showDatePickerModal()); });
+    i0.ɵɵlistener("click", function DatetimeComponent_ng_template_11_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r10.disabled || ctx_r10.readonly || ctx_r10.isCurrentDate) && ctx_r10.showDatePickerModal(ctx_r10.bsDateValue)); })("focus", function DatetimeComponent_ng_template_11_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r11 = i0.ɵɵnextContext(); ctx_r11.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r11.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r12 = i0.ɵɵnextContext(); ctx_r12.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r12.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("config", ctx_r2._dateOptions)("placement", ctx_r2.modal)("excludedDaysToDisable", ctx_r2.excludedDaysToDisable)("excludedDatesToDisable", ctx_r2.excludedDatesToDisable)("displayFormat", ctx_r2.dateInputFormat)("value", ctx_r2.bsDateValue);
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
+    i0.ɵɵattribute("aria-label", ctx_r2.displayValue ? "Change Date " + ctx_r2.displayValue : ctx_r2.hint || "Choose Date");
 } }
 const DEFAULT_CLS$1 = 'app-datetime input-group';
 const WIDGET_CONFIG$1 = { widgetType: 'wm-datetime', hostClass: DEFAULT_CLS$1 };
@@ -2393,7 +2416,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
                 provideAs(DatetimeComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(DatetimeComponent),
                 { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$1, decls: 12, vars: 30, consts: [["dropdown", "", "autoClose", "false", 2, "display", "inherit", 3, "isOpen", "container", "onShown"], ["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "display-input", 3, "name", "tabindex", "value", "autofocus", "disabled", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "focus-target", "", "placement", "bottom right", "bsDatepicker", "", 1, "model-holder", 3, "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue", "onShown", "onHidden", "bsValueChange"], ["datepicker", "bsDatepicker"], ["class", "dropdown-menu", "aria-label", "timepicker dropdown", "aria-controls", "time", 3, "click", 4, "dropdownMenu"], [3, "ngIf"], ["aria-label", "timepicker dropdown", "aria-controls", "time", 1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "showMeridian", "readonlyInput", "ngModel", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds", "ngModelChange", "isValid"], ["dateTimePicker", "", 3, "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value", "change"], [1, "mobile-input", "mobile-datepicker-container", 3, "tabindex", "focus", "blur", "click"]], template: function DatetimeComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$1, decls: 12, vars: 30, consts: [["dropdown", "", "autoClose", "false", 2, "display", "inherit", 3, "isOpen", "container", "onShown"], ["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "display-input", 3, "name", "tabindex", "value", "autofocus", "disabled", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "focus-target", "", "placement", "bottom right", "bsDatepicker", "", 1, "model-holder", 3, "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue", "onShown", "onHidden", "bsValueChange"], ["datepicker", "bsDatepicker"], ["class", "dropdown-menu", "aria-label", "timepicker dropdown", "aria-controls", "time", 3, "click", 4, "dropdownMenu"], [3, "ngIf"], ["aria-label", "timepicker dropdown", "aria-controls", "time", 1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "showMeridian", "readonlyInput", "ngModel", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds", "ngModelChange", "isValid"], ["dateTimePicker", "", 3, "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value", "change"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "tabindex", "click", "focus", "blur"]], template: function DatetimeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("onShown", function DatetimeComponent_Template_div_onShown_0_listener() { return ctx.onTimepickerOpen(); });
             i0.ɵɵelementStart(1, "input", 1);
@@ -2412,7 +2435,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 2, 11, "div", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(11, DatetimeComponent_ng_template_11_Template, 2, 7, "ng-template", 11);
+            i0.ɵɵtemplate(11, DatetimeComponent_ng_template_11_Template, 2, 8, "ng-template", 11);
         } if (rf & 2) {
             i0.ɵɵproperty("isOpen", ctx.isTimeOpen)("container", "body");
             i0.ɵɵadvance(1);
@@ -2438,7 +2461,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
                     provideAs(DatetimeComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(DatetimeComponent),
                     { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-                ], 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]=\"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         (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal(bsDateValue)\"\n         [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : hint || 'Choose Date'\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event)\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }, { type: i1$1.App }]; }, { bsDatePickerDirective: [{
             type: ViewChild,
             args: [BsDatepickerDirective]
@@ -2494,11 +2517,13 @@ function TimeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("change", function TimeComponent_ng_template_6_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.onTimeChange($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(1, "div", 10);
-    i0.ɵɵlistener("focus", function TimeComponent_ng_template_6_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); ctx_r9.onDateTimeInputFocus(true); ctx_r9.invokeOnFocus($event); return i0.ɵɵresetView(ctx_r9.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r10 = i0.ɵɵnextContext(); ctx_r10.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r10.invokeOnTouched($event)); })("click", function TimeComponent_ng_template_6_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r11.disabled || ctx_r11.readonly || ctx_r11.isCurrentTime) && ctx_r11.showDatePickerModal()); });
+    i0.ɵɵlistener("click", function TimeComponent_ng_template_6_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r9.disabled || ctx_r9.readonly || ctx_r9.isCurrentTime) && ctx_r9.showDatePickerModal(ctx_r9.bsTimeValue)); })("focus", function TimeComponent_ng_template_6_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r10 = i0.ɵɵnextContext(); ctx_r10.onDateTimeInputFocus(true); ctx_r10.invokeOnFocus($event); return i0.ɵɵresetView(ctx_r10.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r11 = i0.ɵɵnextContext(); ctx_r11.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r11.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("minTime", ctx_r1.minTime)("maxTime", ctx_r1.maxTime)("placement", ctx_r1.modal)("displayFormat", ctx_r1.timepattern)("value", ctx_r1.bsTimeValue);
+    i0.ɵɵadvance(1);
+    i0.ɵɵattribute("aria-label", ctx_r1.displayValue ? "Change time  " + ctx_r1.displayValue : ctx_r1.hint || "Select time");
 } }
 const CURRENT_TIME = 'CURRENT_TIME';
 const DEFAULT_CLS = 'input-group app-timeinput';
@@ -2795,7 +2820,7 @@ class TimeComponent extends BaseDateTimeComponent {
                 provideAs(TimeComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(TimeComponent),
                 { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 7, vars: 16, consts: [["dropdown", "", 2, "display", "inherit", 3, "isOpen", "container", "onShown", "onHidden"], ["focus-target", "", "type", "text", "role", "timer", 1, "form-control", "app-textbox", "display-input", 3, "tabindex", "name", "value", "disabled", "autofocus", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], [1, "input-group-btn", "dropdown-toggle"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], ["class", "dropdown-menu", 3, "click", 4, "dropdownMenu"], [3, "ngIf"], [1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "showMeridian", "readonlyInput", "ngModel", "disabled", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds", "ngModelChange", "isValid"], ["dateTimePicker", "", "mode", "TIME", 3, "minTime", "maxTime", "placement", "displayFormat", "value", "change"], ["tabindex", "1000000", 1, "mobile-input", "mobile-datepicker-container", 3, "focus", "blur", "click"]], template: function TimeComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 7, vars: 16, consts: [["dropdown", "", 2, "display", "inherit", 3, "isOpen", "container", "onShown", "onHidden"], ["focus-target", "", "type", "text", "role", "timer", 1, "form-control", "app-textbox", "display-input", 3, "tabindex", "name", "value", "disabled", "autofocus", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], [1, "input-group-btn", "dropdown-toggle"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], ["class", "dropdown-menu", 3, "click", 4, "dropdownMenu"], [3, "ngIf"], [1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "showMeridian", "readonlyInput", "ngModel", "disabled", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds", "ngModelChange", "isValid"], ["dateTimePicker", "", "mode", "TIME", 3, "minTime", "maxTime", "placement", "displayFormat", "value", "change"], ["tabindex", "1000000", "role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur"]], template: function TimeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("onShown", function TimeComponent_Template_div_onShown_0_listener() { return ctx.onShown(); })("onHidden", function TimeComponent_Template_div_onHidden_0_listener() { return ctx.hideTimepickerDropdown(); });
             i0.ɵɵelementStart(1, "input", 1);
@@ -2807,7 +2832,7 @@ class TimeComponent extends BaseDateTimeComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(5, TimeComponent_div_5_Template, 2, 12, "div", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, TimeComponent_ng_template_6_Template, 2, 5, "ng-template", 6);
+            i0.ɵɵtemplate(6, TimeComponent_ng_template_6_Template, 2, 6, "ng-template", 6);
         } if (rf & 2) {
             i0.ɵɵproperty("isOpen", ctx.status.isopen)("container", "body");
             i0.ɵɵadvance(1);
@@ -2826,7 +2851,7 @@ class TimeComponent extends BaseDateTimeComponent {
                     provideAs(TimeComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(TimeComponent),
                     { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-                ], template: "    <div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n        <input class=\"form-control app-textbox display-input\" [attr.aria-label]=\"hint\"\n               focus-target\n               [tabindex]=\"tabindex\"\n               [name]=\"name\"\n               type=\"text\"\n               role=\"timer\"\n               [value]=\"displayValue\"\n               [disabled]=\"disabled || readonly || isCurrentTime\"\n               [autofocus]=\"autofocus\"\n               [attr.placeholder]=\"placeholder\"\n               [attr.accesskey]=\"shortcutkey\"\n               [attr.aria-atomic]=\"isCurrentTime ? 'true' : 'false'\"\n               [required]=\"required\"\n               [readOnly]=\"isReadOnly\"\n               (click)=\"toggleDropdown($event, true)\"\n               (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n               (blur)=\"onInputBlur($event)\"\n               (change)=\"onDisplayTimeChange($event)\"\n               (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n        <span class=\"input-group-btn dropdown-toggle\">\n            <button type=\"button\" class=\"btn btn-default btn-date\" [tabindex]=\"tabindex\" [disabled]=\"disabled || readonly || isCurrentTime\" aria-label=\"Select time\" aria-haspopup=\"true\" aria-expanded=\"false\" (click)=\"toggleDropdown($event, false)\"><i aria-hidden=\"true\" class=\"app-icon wm-sl-l sl-time\"></i></button>\n        </span>\n        <div *dropdownMenu class=\"dropdown-menu\" (click)=\"preventTpClose($event)\">\n            <timepicker class=\"model-holder\"\n                        [showMeridian]=\"ismeridian\"\n                        [readonlyInput]=\"isDisabled\"\n                        [(ngModel)]=\"bsTimeValue\"\n                        [disabled]=\"disabled || readonly || isCurrentTime\"\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\" (ngModelChange)=\"onTimeChange($event)\"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"TIME\"\n        [minTime]=\"minTime\"\n        [maxTime]=\"maxTime\"\n        [placement]=\"modal\"\n        [displayFormat]=\"timepattern\"\n        [value]=\"bsTimeValue\"\n        (change)=\"onTimeChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        tabindex=\"1000000\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event); assignModel()\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n        (click)=\"!(disabled || readonly || isCurrentTime) && showDatePickerModal()\">\n    </div>\n</ng-template>\n" }]
+                ], template: "    <div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n        <input class=\"form-control app-textbox display-input\" [attr.aria-label]=\"hint\"\n               focus-target\n               [tabindex]=\"tabindex\"\n               [name]=\"name\"\n               type=\"text\"\n               role=\"timer\"\n               [value]=\"displayValue\"\n               [disabled]=\"disabled || readonly || isCurrentTime\"\n               [autofocus]=\"autofocus\"\n               [attr.placeholder]=\"placeholder\"\n               [attr.accesskey]=\"shortcutkey\"\n               [attr.aria-atomic]=\"isCurrentTime ? 'true' : 'false'\"\n               [required]=\"required\"\n               [readOnly]=\"isReadOnly\"\n               (click)=\"toggleDropdown($event, true)\"\n               (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n               (blur)=\"onInputBlur($event)\"\n               (change)=\"onDisplayTimeChange($event)\"\n               (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n        <span class=\"input-group-btn dropdown-toggle\">\n            <button type=\"button\" class=\"btn btn-default btn-date\" [tabindex]=\"tabindex\" [disabled]=\"disabled || readonly || isCurrentTime\" aria-label=\"Select time\" aria-haspopup=\"true\" aria-expanded=\"false\" (click)=\"toggleDropdown($event, false)\"><i aria-hidden=\"true\" class=\"app-icon wm-sl-l sl-time\"></i></button>\n        </span>\n        <div *dropdownMenu class=\"dropdown-menu\" (click)=\"preventTpClose($event)\">\n            <timepicker class=\"model-holder\"\n                        [showMeridian]=\"ismeridian\"\n                        [readonlyInput]=\"isDisabled\"\n                        [(ngModel)]=\"bsTimeValue\"\n                        [disabled]=\"disabled || readonly || isCurrentTime\"\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\" (ngModelChange)=\"onTimeChange($event)\"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"TIME\"\n        [minTime]=\"minTime\"\n        [maxTime]=\"maxTime\"\n        [placement]=\"modal\"\n        [displayFormat]=\"timepattern\"\n        [value]=\"bsTimeValue\"\n        (change)=\"onTimeChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        tabindex=\"1000000\"\n         (click)=\"!(disabled || readonly || isCurrentTime) && showDatePickerModal(bsTimeValue)\"\n         [attr.aria-label]=\"displayValue ? 'Change time  ' + displayValue : hint || 'Select time'\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event); assignModel()\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.Injector }, { type: i0.NgZone }, { type: i1$1.AppDefaults }, { type: i1$1.App }]; }, null); })();
 const components = [