@wavemaker/app-ng-runtime 11.6.0-next.40753 → 11.6.0-next.41002

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

@@ -139,7 +139,7 @@ export declare abstract class BaseDateTimeComponent extends BaseFormCustomCompon
     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 sets the mouse events to Datepicker popup. These events are required when we navigate date picker through mouse.
      */
     private addDatepickerMouseEvents;
     /**
@@ -224,7 +224,7 @@ export declare abstract class BaseDateTimeComponent extends BaseFormCustomCompon
     onDateTimeInputBlur(): void;
     onDateTimeInputFocus(skipFocus?: boolean): void;
     getCordovaPluginDatePickerApi(): any;
-    showDatePickerModal(): void;
+    showDatePickerModal(bsDataval: any): void;
     blurDateInput(isPickerOpen: any): void;
     onPropertyChange(key: any, nv: any, ov?: any): void;
     ngAfterViewInit(): void;

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

@@ -912,6 +912,7 @@
          */
         setActiveDateFocus(newDate, isMouseEvent) {
             this.setNextData(newDate);
+            this.clicked = false;
             const activeMonth = this.activeDate.getMonth();
             // check for keyboard event
             if (!isMouseEvent) {
@@ -975,11 +976,12 @@
             };
         }
         /**
-        * This method sets the mouse events to Datepicker popup. These events are required when we navigate date picker through mouse.
+         * 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) => {
+            $(".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;
@@ -988,12 +990,19 @@
                     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 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();
                 });
             });
-            datePickerHead.find(`.next`).click((event) => {
+            $(".bs-datepicker-head").on("click", ".next", (event) => {
                 this.next = this.getMonth(this.activeDate, 2);
                 this.prev = this.getMonth(this.activeDate, 0);
                 this.clicked = true;
@@ -1002,28 +1011,35 @@
                     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 .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();
                 });
             });
-            datePickerHead.find(`.current`).click((event) => {
+            $(".bs-datepicker-head").on("click", ".current", (event) => {
                 // check for original mouse click
                 if (event.originalEvent) {
                     this.setFocusForCurrentMonthOryear();
                 }
             });
-            $('.bs-datepicker-body, .bs-datepicker-action-buttons').click((event) => {
+            $('.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) {
-                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()}`);
-            }
+            // 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()}`);
+            //  }
         }
         /**
          * This method sets focus for months/days depending on the loaded datepicker table
@@ -1530,8 +1546,14 @@
                 return _.get(window, 'cordova.wavemaker.datePicker.selectDate');
             }
         }
-        showDatePickerModal() {
+        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;
         }
         blurDateInput(isPickerOpen) {
@@ -1707,7 +1729,7 @@
             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("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(ctx_r6.bsDataValue)); });
             i0__namespace.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -1715,7 +1737,7 @@
             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';
@@ -1955,7 +1977,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) {
+            ]), 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", "focus", "blur", "click"]], 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); });
@@ -1989,7 +2011,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         role=\"button\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event);\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n        [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : hint || 'Choose Date'\"\n        (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal(bsDataValue)\">\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]
@@ -2062,7 +2084,7 @@
             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("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(ctx_r12.bsDateValue)); });
             i0__namespace.ɵɵelementEnd();
         }
         if (rf & 2) {
@@ -2070,6 +2092,7 @@
             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';
@@ -2479,7 +2502,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) {
+            ]), 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", "focus", "blur", "click"]], 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(); });
@@ -2499,7 +2522,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");
@@ -2527,7 +2550,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         role=\"button\"\n         [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : hint || 'Choose Date'\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event)\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n        (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal(bsDateValue)\">\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]
@@ -2588,12 +2611,14 @@
             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("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(ctx_r11.bsTimeValue)); });
             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';
@@ -2892,7 +2917,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) {
+            ]), 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, "focus", "blur", "click"]], 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(); });
@@ -2905,7 +2930,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");
@@ -2926,7 +2951,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         role=\"button\"\n         [attr.aria-label]=\"displayValue ? 'Change time  ' + displayValue : hint || 'Select time'\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event); assignModel()\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n        (click)=\"!(disabled || readonly || isCurrentTime) && showDatePickerModal(bsTimeValue)\">\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);
     })();