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

app-ng-runtime/components/input/default/select/select.component.d.ts

@@ -1,4 +1,5 @@
 import { AfterViewInit, ElementRef, Injector } from '@angular/core';
+import { App } from '@wm/core';
 import { DatasetAwareFormComponent } from '../dataset-aware-form.component';
 import * as i0 from "@angular/core";
 export declare class SelectComponent extends DatasetAwareFormComponent implements AfterViewInit {
@@ -13,13 +14,15 @@ export declare class SelectComponent extends DatasetAwareFormComponent implement
     name: string;
     autofocus: boolean;
     hint: string;
+    private app;
     selectEl: ElementRef;
     set datasource(ds: any);
-    constructor(inj: Injector);
+    constructor(inj: Injector, app: App);
     ngAfterViewInit(): void;
     protected handleEvent(node: HTMLElement, eventName: string, eventCallback: Function, locals: any): void;
     onSelectValueChange($event: any): void;
     onPropertyChange(key: string, nv: any, ov?: any): void;
+    isIosPlatform(): boolean;
     /**
      * When caption floating is enabled and placeholder is given, do not show placeholder until user focuses on the field
      * When focused add the placeholder to the option which is selected

app-ng-runtime/components/input/epoch/base-date-time.component.d.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Injector, OnDestroy } from '@angular/core';
-import { Validator, AbstractControl } from '@angular/forms';
+import { AbstractControl, Validator } from '@angular/forms';
 import { TimepickerConfig } from 'ngx-bootstrap/timepicker';
 import { BaseFormCustomComponent } from '@wm/components/input';
 import { BsDatepickerConfig, BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
@@ -125,23 +125,20 @@ export declare abstract class BaseDateTimeComponent extends BaseFormCustomCompon
      * @param newDate - newly selected date value
      */
     private isOtheryear;
-    /**
-     * This method is used to set focus for active day
-     * @param newDate - newly selected date value
-     * @param isMouseEvent - boolean value represents the event is mouse event/ keyboard event
-     */
-    private setActiveDateFocus;
+    showDatePickerModal(bsDataval: any): void;
     /**
      * 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
      */
     private goToOtherMonthOryear;
-    private getMonth;
     /**
-    * This method sets the mouse events to Datepicker popup. These events are required when we navigate date picker through mouse.
+     * This method is used to set focus for active day
+     * @param newDate - newly selected date value
+     * @param isMouseEvent - boolean value represents the event is mouse event/ keyboard event
      */
-    private addDatepickerMouseEvents;
+    private setActiveDateFocus;
+    private getMonth;
     /**
      * This method sets focus for months/days depending on the loaded datepicker table
      */
@@ -224,7 +221,10 @@ export declare abstract class BaseDateTimeComponent extends BaseFormCustomCompon
     onDateTimeInputBlur(): void;
     onDateTimeInputFocus(skipFocus?: boolean): void;
     getCordovaPluginDatePickerApi(): any;
-    showDatePickerModal(): void;
+    /**
+     * This method sets the mouse events to Datepicker popup. These events are required when we navigate date picker through mouse.
+     */
+    private addDatepickerMouseEvents;
     blurDateInput(isPickerOpen: any): void;
     onPropertyChange(key: any, nv: any, ov?: any): void;
     ngAfterViewInit(): void;

app-ng-runtime/components/input/epoch/bundles/index.umd.js

@@ -863,6 +863,37 @@
         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
@@ -870,6 +901,7 @@
          */
         setActiveDateFocus(newDate, isMouseEvent) {
             this.setNextData(newDate);
+            this.clicked = false;
             const activeMonth = this.activeDate.getMonth();
             // check for keyboard event
             if (!isMouseEvent) {
@@ -899,27 +931,6 @@
                 }
             });
         }
-        /**
-         * 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();
@@ -932,57 +943,6 @@
                 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
          */
@@ -1488,9 +1448,71 @@
                 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');
@@ -1658,14 +1680,14 @@
         i0__namespace.ɵɵlistener("change", function DateComponent_ng_template_7_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onDateChange($event)); });
         i0__namespace.ɵɵelementEnd();
         i0__namespace.ɵɵelementStart(1, "div", 9);
-        i0__namespace.ɵɵlistener("focus", function DateComponent_ng_template_7_Template_div_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r4 = i0__namespace.ɵɵnextContext(); ctx_r4.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r4.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_7_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r5 = i0__namespace.ɵɵnextContext(); ctx_r5.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r5.invokeOnTouched($event)); })("click", function DateComponent_ng_template_7_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r3); const ctx_r6 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(!(ctx_r6.disabled || ctx_r6.readonly || ctx_r6.isCurrentDate) && ctx_r6.showDatePickerModal()); });
+        i0__namespace.ɵɵlistener("click", function DateComponent_ng_template_7_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r3); const ctx_r4 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r3); const ctx_r5 = i0__namespace.ɵɵnextContext(); ctx_r5.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r5.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_7_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r6 = i0__namespace.ɵɵnextContext(); ctx_r6.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r6.invokeOnTouched($event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r1 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵ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__namespace.ɵɵadvance(1);
         i0__namespace.ɵɵproperty("tabindex", ctx_r1.tabindex || 0);
-        i0__namespace.ɵɵattribute("aria-label", ctx_r1.displayValue ? "Change Date" + ctx_r1.displayValue : "Choose Date");
+        i0__namespace.ɵɵ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';
@@ -1899,7 +1921,7 @@
                     base.provideAs(DateComponent, i5.NG_VALUE_ACCESSOR, true),
                     base.provideAs(DateComponent, i5.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(DateComponent)
-                ]), i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "input", 0);
                 i0__namespace.ɵɵ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__namespace.ɵɵelementEnd();
@@ -1930,7 +1952,7 @@
                         base.provideAs(DateComponent, i5.NG_VALUE_ACCESSOR, true),
                         base.provideAs(DateComponent, i5.NG_VALIDATORS, true),
                         base.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__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }]; }, { bsDatePickerDirective: [{
                 type: i0.ViewChild,
                 args: [i3.BsDatepickerDirective]
@@ -1998,13 +2020,14 @@
         i0__namespace.ɵɵlistener("change", function DatetimeComponent_ng_template_11_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ctx_r8 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r8.onModelUpdate($event, "date")); });
         i0__namespace.ɵɵelementEnd();
         i0__namespace.ɵɵelementStart(1, "div", 15);
-        i0__namespace.ɵɵlistener("focus", function DatetimeComponent_ng_template_11_Template_div_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ctx_r10 = i0__namespace.ɵɵnextContext(); ctx_r10.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r10.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ctx_r11 = i0__namespace.ɵɵnextContext(); ctx_r11.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r11.invokeOnTouched($event)); })("click", function DatetimeComponent_ng_template_11_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r9); const ctx_r12 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(!(ctx_r12.disabled || ctx_r12.readonly || ctx_r12.isCurrentDate) && ctx_r12.showDatePickerModal()); });
+        i0__namespace.ɵɵlistener("click", function DatetimeComponent_ng_template_11_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r9); const ctx_r10 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r9); const ctx_r11 = i0__namespace.ɵɵnextContext(); ctx_r11.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r11.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ctx_r12 = i0__namespace.ɵɵnextContext(); ctx_r12.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r12.invokeOnTouched($event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r2 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵ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__namespace.ɵɵadvance(1);
         i0__namespace.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
+        i0__namespace.ɵɵ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 };
@@ -2407,7 +2430,7 @@
                     base.provideAs(DatetimeComponent, i5.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(DatetimeComponent),
                     { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
-                ]), i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "div", 0);
                 i0__namespace.ɵɵlistener("onShown", function DatetimeComponent_Template_div_onShown_0_listener() { return ctx.onTimepickerOpen(); });
                 i0__namespace.ɵɵelementStart(1, "input", 1);
@@ -2426,7 +2449,7 @@
                 i0__namespace.ɵɵelementEnd()();
                 i0__namespace.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 2, 11, "div", 10);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵtemplate(11, DatetimeComponent_ng_template_11_Template, 2, 7, "ng-template", 11);
+                i0__namespace.ɵɵtemplate(11, DatetimeComponent_ng_template_11_Template, 2, 8, "ng-template", 11);
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("isOpen", ctx.isTimeOpen)("container", "body");
                 i0__namespace.ɵɵadvance(1);
@@ -2452,7 +2475,7 @@
                         base.provideAs(DatetimeComponent, i5.NG_VALIDATORS, true),
                         base.provideAsWidgetRef(DatetimeComponent),
                         { provide: i6.TimepickerConfig, deps: [i1$1.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__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.App }]; }, { bsDatePickerDirective: [{
                 type: i0.ViewChild,
                 args: [i3.BsDatepickerDirective]
@@ -2508,11 +2531,13 @@
         i0__namespace.ɵɵlistener("change", function TimeComponent_ng_template_6_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r8); const ctx_r7 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r7.onTimeChange($event)); });
         i0__namespace.ɵɵelementEnd();
         i0__namespace.ɵɵelementStart(1, "div", 10);
-        i0__namespace.ɵɵlistener("focus", function TimeComponent_ng_template_6_Template_div_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r8); const ctx_r9 = i0__namespace.ɵɵnextContext(); ctx_r9.onDateTimeInputFocus(true); ctx_r9.invokeOnFocus($event); return i0__namespace.ɵɵresetView(ctx_r9.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r8); const ctx_r10 = i0__namespace.ɵɵnextContext(); ctx_r10.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r10.invokeOnTouched($event)); })("click", function TimeComponent_ng_template_6_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r8); const ctx_r11 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(!(ctx_r11.disabled || ctx_r11.readonly || ctx_r11.isCurrentTime) && ctx_r11.showDatePickerModal()); });
+        i0__namespace.ɵɵlistener("click", function TimeComponent_ng_template_6_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r8); const ctx_r9 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r8); const ctx_r10 = i0__namespace.ɵɵnextContext(); ctx_r10.onDateTimeInputFocus(true); ctx_r10.invokeOnFocus($event); return i0__namespace.ɵɵresetView(ctx_r10.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r8); const ctx_r11 = i0__namespace.ɵɵnextContext(); ctx_r11.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r11.invokeOnTouched($event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r1 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵproperty("minTime", ctx_r1.minTime)("maxTime", ctx_r1.maxTime)("placement", ctx_r1.modal)("displayFormat", ctx_r1.timepattern)("value", ctx_r1.bsTimeValue);
+        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵ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';
@@ -2809,7 +2834,7 @@
                     base.provideAs(TimeComponent, i5.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(TimeComponent),
                     { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
-                ]), i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "div", 0);
                 i0__namespace.ɵɵlistener("onShown", function TimeComponent_Template_div_onShown_0_listener() { return ctx.onShown(); })("onHidden", function TimeComponent_Template_div_onHidden_0_listener() { return ctx.hideTimepickerDropdown(); });
                 i0__namespace.ɵɵelementStart(1, "input", 1);
@@ -2821,7 +2846,7 @@
                 i0__namespace.ɵɵelementEnd()();
                 i0__namespace.ɵɵtemplate(5, TimeComponent_div_5_Template, 2, 12, "div", 5);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵtemplate(6, TimeComponent_ng_template_6_Template, 2, 5, "ng-template", 6);
+                i0__namespace.ɵɵtemplate(6, TimeComponent_ng_template_6_Template, 2, 6, "ng-template", 6);
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("isOpen", ctx.status.isopen)("container", "body");
                 i0__namespace.ɵɵadvance(1);
@@ -2840,7 +2865,7 @@
                         base.provideAs(TimeComponent, i5.NG_VALIDATORS, true),
                         base.provideAsWidgetRef(TimeComponent),
                         { provide: i6.TimepickerConfig, deps: [i1$1.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__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.App }]; }, null); })();
 
     const components = [