@wavemaker/app-ng-runtime 11.8.0-next.141669 → 11.8.0-next.141671

package/components/input/epoch/fesm2022/index.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, ElementRef, Output, Input, ViewChild, Directive, NgModule } from '@angular/core';
+import { Component, EventEmitter, ElementRef, Output, Input, ViewChild, Directive, Inject, Optional, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
-import { getLocaleDayPeriods, FormStyle, TranslationWidth, CommonModule } from '@angular/common';
+import { FormStyle, TranslationWidth, getLocaleDayPeriods, CommonModule } from '@angular/common';
 import * as i5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
 import * as i3 from 'ngx-bootstrap/datepicker';
@@ -12,9 +12,10 @@ import * as i6 from 'ngx-bootstrap/timepicker';
 import { TimepickerConfig, TimepickerComponent, TimepickerModule } from 'ngx-bootstrap/timepicker';
 import { ToDatePipe, getContainerTargetClass, PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, registerFormWidget, styler, setFocusTrap, provideAs, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
 import * as i1$1 from '@wm/core';
-import { App, AbstractI18nService, isMobile, getFormattedDate, getDateObj, isString, setAttr, getNativeDateObject, hasCordova, isIos, FormWidgetType, getMomentLocaleObject, getDisplayDateTimeFormat, adjustContainerPosition, adjustContainerRightEdges, addEventListenerOnElement, addClass, $appDigest } from '@wm/core';
+import { App, AbstractI18nService, isMobile, getFormattedDate, getDateObj, setAttr, getNativeDateObject, hasCordova, isIos, FormWidgetType, getMomentLocaleObject, getDisplayDateTimeFormat, adjustContainerPosition, adjustContainerRightEdges, addEventListenerOnElement, addClass, $appDigest } from '@wm/core';
 import { BaseFormCustomComponent } from '@wm/components/input';
 import * as i1 from 'ngx-bootstrap/modal';
+import { filter, isUndefined, isNaN as isNaN$1, parseInt as parseInt$1, isString, split, get, forEach, includes, debounce } from 'lodash-es';
 import IMask from 'imask';
 import * as i4 from 'angular-imask';
 import { IMaskDirective, IMaskModule } from 'angular-imask';
@@ -26,7 +27,7 @@ function PickerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const option_r1 = ctx.$implicit;
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", option_r1.label, " ");
 } }
 class PickerGroupComponent {
@@ -38,7 +39,7 @@ class PickerGroupComponent {
             i0.ɵɵelementEnd();
         } }, encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PickerGroupComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PickerGroupComponent, [{
         type: Component,
         args: [{
                 selector: 'wm-pickergroup',
@@ -49,6 +50,7 @@ class PickerGroupComponent {
     `
             }]
     }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PickerGroupComponent, { className: "PickerGroupComponent", filePath: "picker/picker.component.ts", lineNumber: 13 }); })();
 class PickerComponent {
     constructor(inj) {
         this.inj = inj;
@@ -112,7 +114,7 @@ class PickerComponent {
             i0.ɵɵproperty("ngForOf", ctx.options);
         } }, dependencies: [i2.NgForOf], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PickerComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PickerComponent, [{
         type: Component,
         args: [{
                 selector: 'wm-picker',
@@ -131,13 +133,14 @@ class PickerComponent {
         </div>
     `
             }]
-    }], function () { return [{ type: i0.Injector }]; }, { change: [{
+    }], () => [{ type: i0.Injector }], { change: [{
             type: Output
         }], selectedValue: [{
             type: Input
         }], options: [{
             type: Input
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PickerComponent, { className: "PickerComponent", filePath: "picker/picker.component.ts", lineNumber: 34 }); })();
 class PickerAnimator {
     constructor(picker) {
         this.picker = picker;
@@ -195,75 +198,73 @@ class PickerAnimator {
 
 const _c0$3 = ["datetimepickerTemplate"];
 function DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
+    const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "bs-datepicker-inline", 11);
-    i0.ɵɵlistener("bsValueChange", function DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template_bs_datepicker_inline_bsValueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.onDateUpdate($event)); });
+    i0.ɵɵlistener("bsValueChange", function DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template_bs_datepicker_inline_bsValueChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDateUpdate($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("bsConfig", ctx_r2.bsDatepickerConfig)("datesDisabled", ctx_r2.excludedDatesToDisable)("bsValue", ctx_r2.changedValue);
 } }
 function DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
+    const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "wm-timepicker", 12);
-    i0.ɵɵlistener("change", function DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template_wm_timepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r8.onTimeUpdate($event)); });
+    i0.ɵɵlistener("change", function DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template_wm_timepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onTimeUpdate($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r3.changedValue)("min", ctx_r3.minTime)("max", ctx_r3.maxTime);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r2.changedValue)("min", ctx_r2.minTime)("max", ctx_r2.maxTime);
 } }
 function DateTimePickerComponent_ng_template_0_button_8_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
+    const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 13);
-    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r10.setToday()); });
+    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setToday()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r4.appLocale.LABEL_TODAY_DATE || "Today");
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_TODAY_DATE || "Today");
 } }
 function DateTimePickerComponent_ng_template_0_button_9_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
+    const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 14);
-    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r12.onOkClick()); });
+    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onOkClick()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r5 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r5.appLocale.LABEL_OK || "Ok");
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_OK || "Ok");
 } }
 function DateTimePickerComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
     i0.ɵɵelement(2, "div", 3);
-    i0.ɵɵtemplate(3, DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template, 1, 3, "bs-datepicker-inline", 4);
-    i0.ɵɵtemplate(4, DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template, 1, 3, "wm-timepicker", 5);
+    i0.ɵɵtemplate(3, DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template, 1, 3, "bs-datepicker-inline", 4)(4, DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template, 1, 3, "wm-timepicker", 5);
     i0.ɵɵelementStart(5, "span", 6);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(7, "div", 7);
-    i0.ɵɵtemplate(8, DateTimePickerComponent_ng_template_0_button_8_Template, 2, 1, "button", 8);
-    i0.ɵɵtemplate(9, DateTimePickerComponent_ng_template_0_button_9_Template, 2, 1, "button", 9);
+    i0.ɵɵtemplate(8, DateTimePickerComponent_ng_template_0_button_8_Template, 2, 1, "button", 8)(9, DateTimePickerComponent_ng_template_0_button_9_Template, 2, 1, "button", 9);
     i0.ɵɵelementStart(10, "button", 10);
-    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r15); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.clear()); });
+    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clear()); });
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r1.mode === "DATE_TIME" || ctx_r1.mode === "DATE");
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.mode === "DATE_TIME" || ctx_r1.mode === "TIME");
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getDateLabel(), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getDateLabel(), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.mode === "DATE_TIME" || ctx_r1.mode === "DATE");
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r1.mode === "DATE_TIME" || ctx_r1.mode === "TIME");
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.appLocale.LABEL_CLEAR_DATE || "Clear");
+    i0.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_CLEAR_DATE || "Clear");
 } }
 class DateTimePickerComponent {
     constructor(inj, bsModalService) {
@@ -339,7 +340,7 @@ class DateTimePickerComponent {
      */
     hightlightToday() {
         const toDay = new Date().getDate().toString();
-        _.filter($(`body>modal-container .date-picker-modal span:contains(${toDay})`)
+        filter($(`body > modal-container .date-picker-modal span:contains(${toDay})`)
             .not('.is-other-month,.current-date'), (obj) => {
             if ($(obj).text() === toDay) {
                 $(obj).addClass('current-date text-info');
@@ -438,11 +439,11 @@ class DateTimePickerComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.datetimepickerTemplate = _t.first);
-        } }, inputs: { mode: "mode", placement: "placement", _bsDatepickerConfig: ["config", "_bsDatepickerConfig"], minTime: "minTime", maxTime: "maxTime", _displayFormat: "_displayFormat", excludedDatesToDisable: "excludedDatesToDisable", value: "value", bsDatepickerConfig: ["config", "bsDatepickerConfig"], excludedDaysToDisable: "excludedDaysToDisable", displayFormat: "displayFormat" }, outputs: { change: "change" }, decls: 2, vars: 0, consts: [["datetimepickerTemplate", ""], [1, "app-datetime-picker"], [1, "modal-body"], [1, "mobile-datetime-picker-options"], ["bsDatepicker", "", 3, "bsConfig", "datesDisabled", "bsValue", "bsValueChange", 4, "ngIf"], [3, "value", "min", "max", "change", 4, "ngIf"], [1, "text-primary", "date-picker-value"], [1, "modal-footer"], ["class", "btn btn-secondary today-btn", 3, "click", 4, "ngIf"], ["class", "btn btn-primary pull-right ok-btn", 3, "click", 4, "ngIf"], [1, "btn", "btn-secondary", "pull-right", "clear-btn", 3, "click"], ["bsDatepicker", "", 3, "bsConfig", "datesDisabled", "bsValue", "bsValueChange"], [3, "value", "min", "max", "change"], [1, "btn", "btn-secondary", "today-btn", 3, "click"], [1, "btn", "btn-primary", "pull-right", "ok-btn", 3, "click"]], template: function DateTimePickerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { mode: "mode", placement: "placement", _bsDatepickerConfig: [i0.ɵɵInputFlags.None, "config", "_bsDatepickerConfig"], minTime: "minTime", maxTime: "maxTime", _displayFormat: "_displayFormat", excludedDatesToDisable: "excludedDatesToDisable", value: "value", bsDatepickerConfig: [i0.ɵɵInputFlags.None, "config", "bsDatepickerConfig"], excludedDaysToDisable: "excludedDaysToDisable", displayFormat: "displayFormat" }, outputs: { change: "change" }, decls: 2, vars: 0, consts: [["datetimepickerTemplate", ""], [1, "app-datetime-picker"], [1, "modal-body"], [1, "mobile-datetime-picker-options"], ["bsDatepicker", "", 3, "bsConfig", "datesDisabled", "bsValue", "bsValueChange", 4, "ngIf"], [3, "value", "min", "max", "change", 4, "ngIf"], [1, "text-primary", "date-picker-value"], [1, "modal-footer"], ["class", "btn btn-secondary today-btn", 3, "click", 4, "ngIf"], ["class", "btn btn-primary pull-right ok-btn", 3, "click", 4, "ngIf"], [1, "btn", "btn-secondary", "pull-right", "clear-btn", 3, "click"], ["bsDatepicker", "", 3, "bsValueChange", "bsConfig", "datesDisabled", "bsValue"], [3, "change", "value", "min", "max"], [1, "btn", "btn-secondary", "today-btn", 3, "click"], [1, "btn", "btn-primary", "pull-right", "ok-btn", 3, "click"]], template: function DateTimePickerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, DateTimePickerComponent_ng_template_0_Template, 12, 6, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-        } }, dependencies: function () { return [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInlineDirective, TimePickerComponent]; }, encapsulation: 2 }); }
+        } }, dependencies: () => [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInlineDirective, TimePickerComponent], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateTimePickerComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateTimePickerComponent, [{
         type: Component,
         args: [{
                 selector: 'wm-datetimepicker',
@@ -488,7 +489,7 @@ class DateTimePickerComponent {
     </ng-template>
     `
             }]
-    }], function () { return [{ type: i0.Injector }, { type: i1.BsModalService }]; }, { datetimepickerTemplate: [{
+    }], () => [{ type: i0.Injector }, { type: i1.BsModalService }], { datetimepickerTemplate: [{
             type: ViewChild,
             args: ['datetimepickerTemplate', { static: true }]
         }], mode: [{
@@ -518,6 +519,7 @@ class DateTimePickerComponent {
         }], displayFormat: [{
             type: Input
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateTimePickerComponent, { className: "DateTimePickerComponent", filePath: "date-time/date-time-picker.component.ts", lineNumber: 54 }); })();
 class TimePickerComponent {
     constructor(inj) {
         this.inj = inj;
@@ -584,7 +586,7 @@ class TimePickerComponent {
     ngAfterViewInit() {
     }
     static { this.ɵfac = function TimePickerComponent_Factory(t) { return new (t || TimePickerComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimePickerComponent, selectors: [["wm-timepicker"]], inputs: { value: "value", min: "min", max: "max" }, outputs: { change: "change" }, decls: 8, vars: 6, consts: [[3, "options", "selectedValue", "change"], [1, "app-time-separator"]], template: function TimePickerComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimePickerComponent, selectors: [["wm-timepicker"]], inputs: { value: "value", min: "min", max: "max" }, outputs: { change: "change" }, decls: 8, vars: 6, consts: [[3, "change", "options", "selectedValue"], [1, "app-time-separator"]], template: function TimePickerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "wm-pickergroup")(1, "wm-picker", 0);
             i0.ɵɵlistener("change", function TimePickerComponent_Template_wm_picker_change_1_listener($event) { return ctx.set($event, "HOUR"); });
             i0.ɵɵelementEnd();
@@ -601,7 +603,7 @@ class TimePickerComponent {
             i0.ɵɵlistener("change", function TimePickerComponent_Template_wm_picker_change_7_listener($event) { return ctx.set($event, "SECOND"); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("options", ctx.options.hour)("selectedValue", ctx.hour);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("options", ctx.options.minute)("selectedValue", ctx.minute);
@@ -609,7 +611,7 @@ class TimePickerComponent {
             i0.ɵɵproperty("options", ctx.options.minute)("selectedValue", ctx.second);
         } }, dependencies: [PickerComponent, PickerGroupComponent], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimePickerComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimePickerComponent, [{
         type: Component,
         args: [{
                 selector: 'wm-timepicker',
@@ -632,7 +634,7 @@ class TimePickerComponent {
         </wm-pickergroup>
     `
             }]
-    }], function () { return [{ type: i0.Injector }]; }, { value: [{
+    }], () => [{ type: i0.Injector }], { value: [{
             type: Input
         }], min: [{
             type: Input
@@ -641,6 +643,7 @@ class TimePickerComponent {
         }], change: [{
             type: Output
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimePickerComponent, { className: "TimePickerComponent", filePath: "date-time/date-time-picker.component.ts", lineNumber: 305 }); })();
 
 const CURRENT_DATE$2 = 'CURRENT_DATE';
 const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
@@ -660,8 +663,8 @@ function getTimepickerConfig(i18nService) {
 }
 class BaseDateTimeComponent extends BaseFormCustomComponent {
     get timeZone() { return this.inj.get(AbstractI18nService).getTimezone(this); }
-    constructor(inj, WIDGET_CONFIG) {
-        super(inj, WIDGET_CONFIG);
+    constructor(inj, WIDGET_CONFIG, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
         this.isReadOnly = false;
         this.clicked = false;
         this.formatsByLocale = { 'timezone': '' };
@@ -717,14 +720,14 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
                 }
             };
         }
-        if (!_.isUndefined(this.dateNotInRange) && this.dateNotInRange) {
+        if (!isUndefined(this.dateNotInRange) && this.dateNotInRange) {
             return {
                 dateNotInRange: {
                     valid: false
                 },
             };
         }
-        if (!_.isUndefined(this.timeNotInRange) && this.timeNotInRange) {
+        if (!isUndefined(this.timeNotInRange) && this.timeNotInRange) {
             return {
                 timeNotInRange: {
                     valid: false
@@ -749,7 +752,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         inputVal = inputVal.trim();
         if (inputVal) {
             if (pattern === 'timestamp') {
-                if (!_.isNaN(inputVal) && _.parseInt(inputVal) !== formattedDate) {
+                if (!isNaN$1(inputVal) && parseInt$1(inputVal) !== formattedDate) {
                     this.invalidDateTimeFormat = true;
                     this.validateType = 'incorrectformat';
                     this.invokeOnChange(this.datavalue, undefined, false);
@@ -805,7 +808,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             if (this.excludedates) {
                 let excludeDatesArray;
                 if (isString(this.excludedates)) {
-                    excludeDatesArray = _.split(this.excludedates, ',');
+                    excludeDatesArray = split(this.excludedates, ',');
                 }
                 else {
                     excludeDatesArray = this.excludedates;
@@ -819,8 +822,8 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
                 }
             }
             if (this.excludedays) {
-                const excludeDaysArray = _.split(this.excludedays, ',');
-                const day = _.get(dateTimeVal, 'getDay') ? dateTimeVal.getDay() : dateTimeVal;
+                const excludeDaysArray = split(this.excludedays, ',');
+                const day = get(dateTimeVal, 'getDay') ? dateTimeVal.getDay() : dateTimeVal;
                 if (excludeDaysArray.indexOf(day.toString()) > -1) {
                     this.dateNotInRange = true;
                     this.validateType = 'excludedays';
@@ -840,10 +843,11 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
     hightlightToday(newDate) {
         const activeMonth = $(`.bs-datepicker-head .current`).first().text();
         const activeYear = $(".bs-datepicker-head .current").eq(1).text();
-        const monthName = new Date().toLocaleString('default', { month: 'long' });
-        if (activeMonth == monthName && activeYear == new Date().getFullYear() && newDate.getDate() === new Date().getDate() && newDate.getMonth() === new Date().getMonth() && newDate.getFullYear() === new Date().getFullYear()) {
+        const month = new Date(newDate).toLocaleString('default', { month: 'long' });
+        const year = newDate.getFullYear().toString();
+        if (activeMonth == month && activeYear == new Date().getFullYear() && newDate.getDate() === new Date().getDate() && newDate.getMonth() === new Date().getMonth() && newDate.getFullYear() === new Date().getFullYear()) {
             const toDay = new Date().getDate().toString();
-            _.filter($(`span:contains(${toDay})`).not('.is-other-month'), (obj) => {
+            filter($(`span:contains(${toDay})`).not('.is-other-month'), (obj) => {
                 if ($(obj).text() === toDay) {
                     $(obj).addClass('current-date text-info');
                 }
@@ -908,7 +912,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         }
         setTimeout(() => {
             const newDay = newDate.getDate().toString();
-            _.filter($(`span:contains(${newDay})`).not('.is-other-month'), (obj) => {
+            filter($(`span:contains(${newDay})`).not('.is-other-month'), (obj) => {
                 const activeMonth = $(`.bs-datepicker-head .current`).first().text();
                 const activeYear = $(".bs-datepicker-head .current").eq(1).text();
                 const monthName = new Date().toLocaleString('default', { month: 'long' });
@@ -947,10 +951,10 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         const activeMonthOrYear = $(`.bs-datepicker-head .current`).first().text();
         const datePickerBody = $('.bs-datepicker-body');
         if (datePickerBody.find('table.months').length > 0) {
-            if (_.parseInt(activeMonthOrYear) !== this.activeDate.getFullYear()) {
+            if (parseInt$1(activeMonthOrYear) !== this.activeDate.getFullYear()) {
                 this.loadMonths();
             }
-            const newDate = new Date(_.parseInt(activeMonthOrYear), this.activeDate.getMonth(), this.activeDate.getDate());
+            const newDate = new Date(parseInt$1(activeMonthOrYear), this.activeDate.getMonth(), this.activeDate.getDate());
             this.setActiveMonthFocus(newDate, true);
         }
         else if (datePickerBody.find('table.days').length > 0) {
@@ -989,7 +993,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         else if (datePickerBody.find('table.years').length > 0) {
             this.loadYears();
             const startYear = datePickerBody.find('table.years span').first().text();
-            const newDate = new Date(_.parseInt(startYear), this.activeDate.getMonth(), this.activeDate.getDate());
+            const newDate = new Date(parseInt$1(startYear), this.activeDate.getMonth(), this.activeDate.getDate());
             this.setActiveYearFocus(newDate, true);
         }
         else if (datePickerBody.find('table.days').length > 0) {
@@ -1221,10 +1225,10 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         const endYear = datePickerYears.last().text();
         // check for keyboard event
         if (!isMouseEvent) {
-            if (newDate.getFullYear() < _.parseInt(startYear)) {
+            if (newDate.getFullYear() < parseInt$1(startYear)) {
                 this.goToOtherMonthOryear('previous', 'year');
             }
-            else if (newDate.getFullYear() > _.parseInt(endYear)) {
+            else if (newDate.getFullYear() > parseInt$1(endYear)) {
                 this.goToOtherMonthOryear('next', 'year');
             }
         }
@@ -1306,7 +1310,8 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         // WMS-19382: update minutes and seconds to 0 when we enter hour value
         inputFields.first().on('keyup', evt => {
             const hourValue = evt.target.value;
-            _.forEach(inputFields, (field, index) => {
+            forEach(inputFields, (field, index) => {
+                // @ts-ignore
                 if (evt.target !== field && field.value === '' && hourValue.length) {
                     const fieldName = index === 1 ? 'minutes' : 'seconds';
                     this.updateTimeValue($el, hourValue, fieldName);
@@ -1399,12 +1404,12 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
     updateFormat(pattern) {
         if (pattern === 'datepattern') {
             this._dateOptions.dateInputFormat = this.datepattern;
-            this.showseconds = _.includes(this.datepattern, 's');
-            this.ismeridian = _.includes(this.datepattern, 'h');
+            this.showseconds = includes(this.datepattern, 's');
+            this.ismeridian = includes(this.datepattern, 'h');
         }
         else if (pattern === 'timepattern') {
-            this.showseconds = _.includes(this.timepattern, 's');
-            this.ismeridian = _.includes(this.timepattern, 'h');
+            this.showseconds = includes(this.timepattern, 's');
+            this.ismeridian = includes(this.timepattern, 'h');
         }
     }
     getMobileInput() {
@@ -1442,15 +1447,15 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
     }
     getCordovaPluginDatePickerApi() {
         if (isIos()) {
-            return _.get(window, 'cordova.wavemaker.datePicker.selectDate');
+            return get(window, 'cordova.wavemaker.datePicker.selectDate');
         }
     }
     /**
      * 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 .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);
@@ -1461,8 +1466,8 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             }
             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 .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>`);
@@ -1482,8 +1487,8 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             }
             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 .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>`);
@@ -1541,14 +1546,15 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
         }
         else if (key === 'excludedates' || key === 'excludedays') {
             if (this.excludedays) {
-                this.excludedDaysToDisable = _.split(this.excludedays, ',').map((day) => {
+                this.excludedDaysToDisable = split(this.excludedays, ',').map((day) => {
                     return +day;
                 });
             }
             if (this.excludedates) {
                 this.excludedDatesToDisable = this.excludedates;
                 if (isString(this.excludedates)) {
-                    this.excludedDatesToDisable = _.split(this.excludedates, ',');
+                    // @ts-ignore
+                    this.excludedDatesToDisable = split(this.excludedates, ',');
                 }
                 this.excludedDatesToDisable = this.excludedDatesToDisable.map(d => getDateObj(d));
             }
@@ -1619,9 +1625,14 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.datetimepickerComponent = _t.first);
         } }, features: [i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseDateTimeComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseDateTimeComponent, [{
         type: Directive
-    }], function () { return [{ type: i0.Injector }, { type: undefined }]; }, { bsDropdown: [{
+    }], () => [{ type: i0.Injector }, { type: undefined }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { bsDropdown: [{
             type: ViewChild,
             args: [BsDropdownDirective]
         }], bsTimePicker: [{
@@ -1653,7 +1664,7 @@ const dateProps = new Map([
     ['shortcutkey', PROP_STRING],
     ['show', { value: true, ...PROP_BOOLEAN }],
     ['showdropdownon', { value: 'default', ...PROP_STRING }],
-    ['showbuttonbar', { value: true, ...PROP_BOOLEAN }],
+    ['showbuttonbar', { value: true, ...PROP_BOOLEAN }], // TODO not addressed
     ['showcustompicker', { value: false, ...PROP_BOOLEAN }],
     ['showindevice', { displayType: 'inline-block', value: 'all', ...PROP_STRING }],
     ['showweeks', { value: false, ...PROP_BOOLEAN }],
@@ -1675,7 +1686,13 @@ function validateTheMaskedDate(format, locale) {
     if (format == 'timestamp') {
         return false;
     }
-    const modifiedFormat = format.toUpperCase().replace(/E/g, 'd');
+    let modifiedFormat = format.toUpperCase().replace(/E/g, 'd');
+    if ((modifiedFormat.split('D').length - 1) === 1) {
+        modifiedFormat = modifiedFormat.replace('D', 'DD');
+    }
+    if ((modifiedFormat.split('M').length - 1) === 1) {
+        modifiedFormat = modifiedFormat.replace('M', 'MM');
+    }
     const parseFn = str => {
         return moment(str, modifiedFormat).toDate();
     };
@@ -1779,17 +1796,17 @@ function validateTheMaskedDate(format, locale) {
 const _c0$2 = ["dateInput"];
 const _c1 = ["wmDate", ""];
 function DateComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
+    const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "wm-datetimepicker", 9);
-    i0.ɵɵlistener("change", function DateComponent_ng_template_8_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onDateChange($event)); });
+    i0.ɵɵlistener("change", function DateComponent_ng_template_8_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDateChange($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(1, "div", 10);
-    i0.ɵɵlistener("click", function DateComponent_ng_template_8_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r5.disabled || ctx_r5.readonly || ctx_r5.isCurrentDate) && ctx_r5.showDatePickerModal(ctx_r5.bsDataValue)); })("focus", function DateComponent_ng_template_8_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r6 = i0.ɵɵnextContext(); ctx_r6.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r6.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_8_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r7 = i0.ɵɵnextContext(); ctx_r7.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r7.invokeOnTouched($event)); });
+    i0.ɵɵlistener("click", function DateComponent_ng_template_8_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r2.disabled || ctx_r2.readonly) && ctx_r2.showDatePickerModal(ctx_r2.bsDataValue)); })("focus", function DateComponent_ng_template_8_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_8_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("config", ctx_r2._dateOptions)("placement", ctx_r2.modal)("excludedDaysToDisable", ctx_r2.excludedDaysToDisable)("excludedDatesToDisable", ctx_r2.excludedDatesToDisable)("displayFormat", ctx_r2.dateInputFormat)("value", ctx_r2.bsDataValue);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
     i0.ɵɵattribute("aria-label", ctx_r2.displayValue ? "Change Date " + ctx_r2.displayValue : ctx_r2.hint || "Choose Date");
 } }
@@ -1808,6 +1825,9 @@ class DateComponent extends BaseDateTimeComponent {
         return this._dateOptions.dateInputFormat || 'yyyy-MM-dd';
     }
     get displayValue() {
+        if (this.showdateformatasplaceholder && this.imask?.maskRef && this.maskDateInputFormat) {
+            return getFormattedDate(this.datePipe, this.bsDataValue, this.maskDateInputFormat, this.timeZone, null, this.isCurrentDate, this) || '';
+        }
         return getFormattedDate(this.datePipe, this.bsDataValue, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this) || '';
     }
     get nativeDisplayValue() {
@@ -1836,8 +1856,8 @@ class DateComponent extends BaseDateTimeComponent {
         this.cdRef.detectChanges();
     }
     // TODO use BsLocaleService to set the current user's locale to see the localized labels
-    constructor(inj, cdRef, appDefaults) {
-        super(inj, WIDGET_CONFIG$2);
+    constructor(inj, cdRef, appDefaults, explicitContext) {
+        super(inj, WIDGET_CONFIG$2, explicitContext);
         this.cdRef = cdRef;
         this.appDefaults = appDefaults;
         this.isOpen = false;
@@ -1893,7 +1913,7 @@ class DateComponent extends BaseDateTimeComponent {
     }
     onDatePickerOpen() {
         this.isOpen = true;
-        this.bsDataValue ? this.activeDate = this.bsDataValue : this.activeDate = new Date();
+        this.activeDate = this.bsDataValue ? this.bsDataValue : (this.timeZone ? getMomentLocaleObject(this.timeZone) : new Date());
         if (!this.bsDataValue) {
             this.hightlightToday(this.activeDate);
         }
@@ -1911,6 +1931,17 @@ class DateComponent extends BaseDateTimeComponent {
         this.addDatepickerKeyboardEvents(this, false);
         adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
         adjustContainerRightEdges($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
+        if (this.timeZone) {
+            const todayBtn = document.querySelector(`.${this.dateContainerCls} .bs-datepicker-buttons .btn-today-wrapper button`);
+            const setTodayTZHandler = (event) => {
+                const todayTZ = getMomentLocaleObject(this.timeZone);
+                if (new Date(this.bsDataValue).toDateString() !== new Date(todayTZ).toDateString()) {
+                    this.bsDataValue = todayTZ;
+                }
+                todayBtn.removeEventListener('click', setTodayTZHandler);
+            };
+            todayBtn.addEventListener('click', setTodayTZHandler);
+        }
     }
     onInputBlur($event) {
         this.updateIMask();
@@ -1934,7 +1965,7 @@ class DateComponent extends BaseDateTimeComponent {
     }
     // change and blur events are added from the template
     handleEvent(node, eventName, callback, locals) {
-        if (!_.includes(['blur', 'focus', 'change', 'click'], eventName)) {
+        if (!includes(['blur', 'focus', 'change', 'click'], eventName)) {
             super.handleEvent(node, eventName, callback, locals);
         }
     }
@@ -1983,7 +2014,7 @@ class DateComponent extends BaseDateTimeComponent {
                 const formattedDate = getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this);
                 const inputVal = event.target.value.trim();
                 if (inputVal && this.datepattern === 'timestamp') {
-                    if (!_.isNaN(inputVal) && _.parseInt(inputVal) !== formattedDate) {
+                    if (!isNaN$1(inputVal) && parseInt$1(inputVal) !== formattedDate) {
                         this.invalidDateTimeFormat = true;
                         this.invokeOnChange(this.datavalue, event, false);
                     }
@@ -2030,6 +2061,9 @@ class DateComponent extends BaseDateTimeComponent {
             this.imask?.destroyMask();
             if (this.showdateformatasplaceholder && this.datepattern !== 'timestamp') {
                 this.mask = validateTheMaskedDate(this.datepattern, this.selectedLocale);
+                this.maskDateInputFormat = this.dateInputFormat;
+                this.maskDateInputFormat = (this.dateInputFormat.split('d').length - 1) === 1 ? this.maskDateInputFormat.replace('d', 'dd') : this.maskDateInputFormat;
+                this.maskDateInputFormat = (this.dateInputFormat.split('M').length - 1) === 1 ? this.maskDateInputFormat.replace('M', 'MM') : this.maskDateInputFormat;
                 this.updateIMask();
             }
         }
@@ -2037,7 +2071,7 @@ class DateComponent extends BaseDateTimeComponent {
             super.onPropertyChange(key, nv, ov);
         }
     }
-    static { this.ɵfac = function DateComponent_Factory(t) { return new (t || DateComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.AppDefaults)); }; }
+    static { this.ɵfac = function DateComponent_Factory(t) { return new (t || DateComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.AppDefaults), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DateComponent, selectors: [["", "wmDate", ""]], viewQuery: function DateComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(BsDatepickerDirective, 5);
             i0.ɵɵviewQuery(_c0$2, 5, IMaskDirective);
@@ -2049,16 +2083,17 @@ class DateComponent extends BaseDateTimeComponent {
                 provideAs(DateComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(DateComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(DateComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 9, vars: 27, consts: [["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "app-dateinput", "display-input", 3, "name", "imask", "unmask", "tabindex", "value", "disabled", "autofocus", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], ["dateInput", ""], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "bsDatepicker", "", "placement", "bottom right", 1, "model-holder", 3, "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue", "onShown", "onHidden", "bsValueChange"], ["datepicker", "bsDatepicker"], [3, "ngIf"], ["dateTimePicker", "", "mode", "DATE", 3, "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value", "change"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "tabindex", "click", "focus", "blur"]], template: function DateComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "input", 0, 1);
-            i0.ɵɵlistener("click", function DateComponent_Template_input_click_0_listener($event) { return ctx.toggleDpDropdown($event, true); })("focus", function DateComponent_Template_input_focus_0_listener($event) { ctx.onDateTimeInputFocus(); ctx.invokeOnFocus($event); return ctx.updateIMask(); })("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.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 9, vars: 27, consts: [["dateInput", ""], ["datepicker", "bsDatepicker"], ["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "app-dateinput", "display-input", 3, "click", "focus", "blur", "change", "keydown", "name", "imask", "unmask", "tabindex", "value", "disabled", "autofocus", "required", "readOnly"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "click", "tabindex", "disabled"], ["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, "onShown", "onHidden", "bsValueChange", "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue"], [3, "ngIf"], ["dateTimePicker", "", "mode", "DATE", 3, "change", "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur", "tabindex"]], template: function DateComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "input", 2, 0);
+            i0.ɵɵlistener("click", function DateComponent_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDpDropdown($event, true)); })("focus", function DateComponent_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.onDateTimeInputFocus(); ctx.invokeOnFocus($event); return i0.ɵɵresetView(ctx.updateIMask()); })("blur", function DateComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputBlur($event)); })("change", function DateComponent_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDisplayDateChange($event)); })("keydown", function DateComponent_Template_input_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx._triggeredByUser = true; return i0.ɵɵresetView(ctx.onDisplayKeydown($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(2, "span", 2)(3, "button", 3);
-            i0.ɵɵlistener("click", function DateComponent_Template_button_click_3_listener($event) { return ctx.toggleDpDropdown($event, false); });
-            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementStart(2, "span", 3)(3, "button", 4);
+            i0.ɵɵlistener("click", function DateComponent_Template_button_click_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDpDropdown($event, false)); });
+            i0.ɵɵelement(4, "i", 5);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(5, "div", 5)(6, "input", 6, 7);
-            i0.ɵɵlistener("onShown", function DateComponent_Template_input_onShown_6_listener() { return ctx.onDatePickerOpen(); })("onHidden", function DateComponent_Template_input_onHidden_6_listener() { return ctx.hideDatepickerDropdown(); })("bsValueChange", function DateComponent_Template_input_bsValueChange_6_listener($event) { return ctx.onDateChange($event); });
+            i0.ɵɵelementStart(5, "div", 6)(6, "input", 7, 1);
+            i0.ɵɵlistener("onShown", function DateComponent_Template_input_onShown_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDatePickerOpen()); })("onHidden", function DateComponent_Template_input_onHidden_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.hideDatepickerDropdown()); })("bsValueChange", function DateComponent_Template_input_bsValueChange_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDateChange($event)); });
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(8, DateComponent_ng_template_8_Template, 2, 8, "ng-template", 8);
         } if (rf & 2) {
@@ -2074,20 +2109,26 @@ class DateComponent extends BaseDateTimeComponent {
             i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
         } }, dependencies: [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInputDirective, i4.IMaskDirective, DateTimePickerComponent], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateComponent, [{
         type: Component,
         args: [{ selector: '[wmDate]', providers: [
                     provideAs(DateComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(DateComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(DateComponent)
-                ], template: "    <input class=\"form-control app-textbox app-dateinput display-input\"\n        focus-target\n        type=\"text\"\n        [name]=\"name\"\n        #dateInput\n        [imask]=\"mask\"\n        [unmask]=\"true\"\n        [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n        [attr.aria-hidden]=\"!!loadNativeDateInput\"\n        [value]=\"displayValue\"\n        (click)=\"toggleDpDropdown($event, true)\"\n        (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event); updateIMask()\"\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 || '.wm-app'\"\n        [bsConfig]=\"_dateOptions\"\n        [isOpen]=\"isOpen\"\n        #datepicker=\"bsDatepicker\"\n        bsDatepicker\n        [daysDisabled]=\"excludedDaysToDisable\"\n        [datesDisabled]=\"excludedDatesToDisable\"\n        placement=\"bottom right\"\n        [isDisabled]=\"disabled || readonly\"\n        [bsValue]=\"bsDataValue\"\n        (onShown)=\"onDatePickerOpen()\"\n        (onHidden)=\"hideDatepickerDropdown()\"\n        (bsValueChange)=\"onDateChange($event)\">\n</div>\n\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"DATE\"\n        [config]=\"_dateOptions\"\n        [placement]=\"modal\"\n        [excludedDaysToDisable]=\"excludedDaysToDisable\"\n        [excludedDatesToDisable]=\"excludedDatesToDisable\"\n        [displayFormat]=\"dateInputFormat\"\n        [value]=\"bsDataValue\"\n        (change)=\"onDateChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        [tabindex]=\"tabindex || 0\"\n         (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal(bsDataValue)\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event);\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : hint || 'Choose Date'\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
-    }], function () { return [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }]; }, { bsDatePickerDirective: [{
+                ], template: "    <input class=\"form-control app-textbox app-dateinput display-input\"\n        focus-target\n        type=\"text\"\n        [name]=\"name\"\n        #dateInput\n        [imask]=\"mask\"\n        [unmask]=\"true\"\n        [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n        [attr.aria-hidden]=\"!!loadNativeDateInput\"\n        [value]=\"displayValue\"\n        (click)=\"toggleDpDropdown($event, true)\"\n        (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event); updateIMask()\"\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 || '.wm-app'\"\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) && 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" }]
+    }], () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { bsDatePickerDirective: [{
             type: ViewChild,
             args: [BsDatepickerDirective]
         }], imask: [{
             type: ViewChild,
             args: ['dateInput', { read: IMaskDirective }]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateComponent, { className: "DateComponent", filePath: "date/date.component.ts", lineNumber: 43 }); })();
 
 const dateTimeProps = new Map([
     ['autofocus', PROP_BOOLEAN],
@@ -2134,29 +2175,32 @@ const registerProps$1 = () => {
 
 const _c0$1 = ["wmDateTime", ""];
 function DatetimeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
+    const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵlistener("click", function DatetimeComponent_div_10_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.preventTpClose($event)); });
+    i0.ɵɵlistener("click", function DatetimeComponent_div_10_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.preventTpClose($event)); });
     i0.ɵɵelementStart(1, "timepicker", 13);
-    i0.ɵɵlistener("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.bsTimeValue = $event); })("isValid", function DatetimeComponent_div_10_Template_timepicker_isValid_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.isValid($event)); })("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.onModelUpdate($event, "time")); });
+    i0.ɵɵtwoWayListener("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.bsTimeValue, $event) || (ctx_r2.bsTimeValue = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("isValid", function DatetimeComponent_div_10_Template_timepicker_isValid_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.isValid($event)); })("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModelUpdate($event, "time")); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("showMeridian", ctx_r1.ismeridian)("readonlyInput", ctx_r1.disabled || ctx_r1.readonly || ctx_r1.isCurrentDate)("ngModel", ctx_r1.bsTimeValue)("min", ctx_r1.minTime)("max", ctx_r1.maxTime)("hourStep", ctx_r1.hourstep)("minuteStep", ctx_r1.minutestep)("secondsStep", ctx_r1.secondsstep)("mousewheel", true)("arrowkeys", true)("showSeconds", ctx_r1.showseconds);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("showMeridian", ctx_r2.ismeridian)("readonlyInput", ctx_r2.disabled || ctx_r2.readonly || ctx_r2.isCurrentDate);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.bsTimeValue);
+    i0.ɵɵproperty("min", ctx_r2.minTime)("max", ctx_r2.maxTime)("hourStep", ctx_r2.hourstep)("minuteStep", ctx_r2.minutestep)("secondsStep", ctx_r2.secondsstep)("mousewheel", true)("arrowkeys", true)("showSeconds", ctx_r2.showseconds);
 } }
 function DatetimeComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
+    const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "wm-datetimepicker", 14);
-    i0.ɵɵlistener("change", function DatetimeComponent_ng_template_11_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onModelUpdate($event, "date")); });
+    i0.ɵɵlistener("change", function DatetimeComponent_ng_template_11_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModelUpdate($event, "date")); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(1, "div", 15);
-    i0.ɵɵlistener("click", function DatetimeComponent_ng_template_11_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r10.disabled || ctx_r10.readonly || ctx_r10.isCurrentDate) && ctx_r10.showDatePickerModal(ctx_r10.bsDateValue)); })("focus", function DatetimeComponent_ng_template_11_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r11 = i0.ɵɵnextContext(); ctx_r11.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r11.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r12 = i0.ɵɵnextContext(); ctx_r12.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r12.invokeOnTouched($event)); });
+    i0.ɵɵlistener("click", function DatetimeComponent_ng_template_11_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r2.disabled || ctx_r2.readonly) && ctx_r2.showDatePickerModal(ctx_r2.bsDateValue)); })("focus", function DatetimeComponent_ng_template_11_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("config", ctx_r2._dateOptions)("placement", ctx_r2.modal)("excludedDaysToDisable", ctx_r2.excludedDaysToDisable)("excludedDatesToDisable", ctx_r2.excludedDatesToDisable)("displayFormat", ctx_r2.dateInputFormat)("value", ctx_r2.bsDateValue);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
     i0.ɵɵattribute("aria-label", ctx_r2.displayValue ? "Change Date " + ctx_r2.displayValue : ctx_r2.hint || "Choose Date");
 } }
@@ -2205,8 +2249,8 @@ class DatetimeComponent extends BaseDateTimeComponent {
         this.bsTimeValue = this.bsDateValue = this.proxyModel;
         this.cdRef.detectChanges();
     }
-    constructor(inj, ngZone, cdRef, appDefaults, app) {
-        super(inj, WIDGET_CONFIG$1);
+    constructor(inj, ngZone, cdRef, appDefaults, app, explicitContext) {
+        super(inj, WIDGET_CONFIG$1, explicitContext);
         this.ngZone = ngZone;
         this.cdRef = cdRef;
         this.appDefaults = appDefaults;
@@ -2223,7 +2267,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
          * This property is set to TRUE if the time component value is set to CURRENT_TIME; In this case the timer keeps changing the time value until the widget is available.
          */
         this.isCurrentDate = false;
-        this._debouncedOnChange = _.debounce(this.invokeOnChange, 10);
+        this._debouncedOnChange = debounce(this.invokeOnChange, 10);
         this.registerDestroyListener(() => this.clearTimeInterval());
         styler(this.nativeElement, this);
         this.app = app;
@@ -2304,7 +2348,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
     onTimepickerOpen() {
         // adding class for time widget dropdown menu
         const tpElements = document.querySelectorAll('timepicker');
-        _.forEach(tpElements, (element) => {
+        forEach(tpElements, (element) => {
             addClass(element.parentElement, 'app-datetime', true);
         });
         this.bsDatePickerDirective.hide();
@@ -2503,7 +2547,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
                 const formattedDate = getFormattedDate(this.datePipe, newVal, this.dateInputFormat, this.timeZone, this.key, this.isCurrentDate, this);
                 const inputVal = event.target.value.trim();
                 if (inputVal && this.datepattern === 'timestamp') {
-                    if (!_.isNaN(inputVal) && _.parseInt(inputVal) !== formattedDate) {
+                    if (!isNaN$1(inputVal) && parseInt$1(inputVal) !== formattedDate) {
                         this.invalidDateTimeFormat = true;
                         this.invokeOnChange(this.datavalue, event, false);
                     }
@@ -2540,7 +2584,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
     }
     // change and blur events are added from the template
     handleEvent(node, eventName, callback, locals) {
-        if (!_.includes(['blur', 'focus', 'change', 'click'], eventName)) {
+        if (!includes(['blur', 'focus', 'change', 'click'], eventName)) {
             super.handleEvent(node, eventName, callback, locals);
         }
     }
@@ -2550,7 +2594,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
             this.invokeEventCallback('blur', { $event });
         }
     }
-    static { this.ɵfac = function DatetimeComponent_Factory(t) { return new (t || DatetimeComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.AppDefaults), i0.ɵɵdirectiveInject(i1$1.App)); }; }
+    static { this.ɵfac = function DatetimeComponent_Factory(t) { return new (t || DatetimeComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.AppDefaults), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatetimeComponent, selectors: [["", "wmDateTime", ""]], viewQuery: function DatetimeComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(BsDatepickerDirective, 5);
         } if (rf & 2) {
@@ -2561,29 +2605,30 @@ class DatetimeComponent extends BaseDateTimeComponent {
                 provideAs(DatetimeComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(DatetimeComponent),
                 { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$1, decls: 12, vars: 30, consts: [["dropdown", "", "autoClose", "false", 2, "display", "inherit", 3, "isOpen", "container", "onShown"], ["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "display-input", 3, "name", "tabindex", "value", "autofocus", "disabled", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "focus-target", "", "placement", "bottom right", "bsDatepicker", "", 1, "model-holder", 3, "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue", "onShown", "onHidden", "bsValueChange"], ["datepicker", "bsDatepicker"], ["class", "dropdown-menu", "aria-label", "timepicker dropdown", "aria-controls", "time", 3, "click", 4, "dropdownMenu"], [3, "ngIf"], ["aria-label", "timepicker dropdown", "aria-controls", "time", 1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "showMeridian", "readonlyInput", "ngModel", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds", "ngModelChange", "isValid"], ["dateTimePicker", "", 3, "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value", "change"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "tabindex", "click", "focus", "blur"]], template: function DatetimeComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵlistener("onShown", function DatetimeComponent_Template_div_onShown_0_listener() { return ctx.onTimepickerOpen(); });
-            i0.ɵɵelementStart(1, "input", 1);
-            i0.ɵɵlistener("click", function DatetimeComponent_Template_input_click_1_listener($event) { return ctx.toggleDpDropdown($event, true); })("focus", function DatetimeComponent_Template_input_focus_1_listener($event) { ctx.onDateTimeInputFocus(); return ctx.invokeOnFocus($event); })("blur", function DatetimeComponent_Template_input_blur_1_listener($event) { return ctx.onInputBlur($event); })("change", function DatetimeComponent_Template_input_change_1_listener($event) { return ctx.onDateChange($event); })("keydown", function DatetimeComponent_Template_input_keydown_1_listener($event) { ctx._triggeredByUser = true; return ctx.onDisplayKeydown($event); });
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$1, decls: 12, vars: 30, consts: [["datepicker", "bsDatepicker"], ["dropdown", "", "autoClose", "false", 2, "display", "inherit", 3, "onShown", "isOpen", "container"], ["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "display-input", 3, "click", "focus", "blur", "change", "keydown", "name", "tabindex", "value", "autofocus", "disabled", "required", "readOnly"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "click", "tabindex", "disabled"], ["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, "click", "tabindex", "disabled"], ["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, "onShown", "onHidden", "bsValueChange", "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue"], ["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, "ngModelChange", "isValid", "showMeridian", "readonlyInput", "ngModel", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds"], ["dateTimePicker", "", 3, "change", "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur", "tabindex"]], template: function DatetimeComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵlistener("onShown", function DatetimeComponent_Template_div_onShown_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTimepickerOpen()); });
+            i0.ɵɵelementStart(1, "input", 2);
+            i0.ɵɵlistener("click", function DatetimeComponent_Template_input_click_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDpDropdown($event, true)); })("focus", function DatetimeComponent_Template_input_focus_1_listener($event) { i0.ɵɵrestoreView(_r1); ctx.onDateTimeInputFocus(); return i0.ɵɵresetView(ctx.invokeOnFocus($event)); })("blur", function DatetimeComponent_Template_input_blur_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputBlur($event)); })("change", function DatetimeComponent_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDateChange($event)); })("keydown", function DatetimeComponent_Template_input_keydown_1_listener($event) { i0.ɵɵrestoreView(_r1); ctx._triggeredByUser = true; return i0.ɵɵresetView(ctx.onDisplayKeydown($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(2, "span", 2)(3, "button", 3);
-            i0.ɵɵlistener("click", function DatetimeComponent_Template_button_click_3_listener($event) { return ctx.toggleDpDropdown($event, false); });
-            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementStart(2, "span", 3)(3, "button", 4);
+            i0.ɵɵlistener("click", function DatetimeComponent_Template_button_click_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDpDropdown($event, false)); });
+            i0.ɵɵelement(4, "i", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "button", 5);
-            i0.ɵɵlistener("click", function DatetimeComponent_Template_button_click_5_listener($event) { return ctx.toggleTimePicker(!ctx.isTimeOpen, $event); });
-            i0.ɵɵelement(6, "i", 6);
+            i0.ɵɵelementStart(5, "button", 6);
+            i0.ɵɵlistener("click", function DatetimeComponent_Template_button_click_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleTimePicker(!ctx.isTimeOpen, $event)); });
+            i0.ɵɵelement(6, "i", 7);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(7, "div", 7)(8, "input", 8, 9);
-            i0.ɵɵlistener("onShown", function DatetimeComponent_Template_input_onShown_8_listener() { return ctx.onDatePickerOpen(); })("onHidden", function DatetimeComponent_Template_input_onHidden_8_listener() { return ctx.hideDatepickerDropdown(); })("bsValueChange", function DatetimeComponent_Template_input_bsValueChange_8_listener($event) { return ctx.onModelUpdate($event, "date"); });
+            i0.ɵɵelementStart(7, "div", 8)(8, "input", 9, 0);
+            i0.ɵɵlistener("onShown", function DatetimeComponent_Template_input_onShown_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDatePickerOpen()); })("onHidden", function DatetimeComponent_Template_input_onHidden_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.hideDatepickerDropdown()); })("bsValueChange", function DatetimeComponent_Template_input_bsValueChange_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onModelUpdate($event, "date")); });
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 2, 11, "div", 10);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(11, DatetimeComponent_ng_template_11_Template, 2, 8, "ng-template", 11);
         } if (rf & 2) {
             i0.ɵɵproperty("isOpen", ctx.isTimeOpen)("container", "body");
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("name", ctx.name)("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("value", ctx.displayValue)("autofocus", ctx.autofocus)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentDate)("required", ctx.required)("readOnly", ctx.isReadOnly);
             i0.ɵɵattribute("aria-label", ctx.hint)("aria-hidden", !!ctx.loadNativeDateInput)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
             i0.ɵɵadvance(2);
@@ -2599,18 +2644,24 @@ class DatetimeComponent extends BaseDateTimeComponent {
             i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
         } }, dependencies: [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInputDirective, i4$1.BsDropdownMenuDirective, i4$1.BsDropdownDirective, i5.NgControlStatus, i5.NgModel, i6.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatetimeComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatetimeComponent, [{
         type: Component,
         args: [{ selector: '[wmDateTime]', providers: [
                     provideAs(DatetimeComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(DatetimeComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(DatetimeComponent),
                     { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-                ], template: "    <div dropdown\n        [isOpen]=\"isTimeOpen\"\n        autoClose=\"false\"\n        [container]=\"'body'\"\n        (onShown)=\"onTimepickerOpen()\"\n        style=\"display: inherit;\">\n        <input class=\"form-control app-textbox display-input\"\n            [attr.aria-label]=\"hint\"\n            focus-target\n            [name]=\"name\"\n            [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            type=\"text\"\n            [value]=\"displayValue\"\n            (click)=\"toggleDpDropdown($event, true)\"\n            (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n            (blur)=\"onInputBlur($event)\"\n            (change)=\"onDateChange($event)\"\n            [autofocus]=\"autofocus\"\n            [disabled]=\"disabled || readonly || isCurrentDate\"\n            [required]=\"required\"\n            [readOnly]=\"isReadOnly\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.accesskey]=\"shortcutkey\"\n            (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n\n        <span class=\"input-group-btn\">\n            <button type=\"button\"\n                class=\"btn btn-default btn-date\"\n                [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n                [attr.aria-hidden]=\"!!loadNativeDateInput\"\n                [disabled]=\"disabled || readonly || isCurrentDate\"\n                [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                (click)=\"toggleDpDropdown($event, false)\">\n                <i aria-hidden=\"true\"\n                    class=\"app-icon wm-sl-l sl-calendar\"></i>\n            </button>\n            <button type=\"button\"\n                class=\"btn btn-default btn-time\"\n                [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n                [attr.aria-hidden]=\"!!loadNativeDateInput\"\n                [disabled]=\"disabled || readonly || isCurrentDate\"\n                aria-label=\"Select time\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                (click)=\"toggleTimePicker(!isTimeOpen, $event)\">\n                <i aria-hidden=\"true\"\n                    class=\"app-icon wm-sl-l sl-time\"></i>\n            </button>\n        </span>\n        <div style=\"width: 0;display: inline-block;\">\n        <input class=\"model-holder\"\n            aria-label=\"datepicker dropdownmenu\"\n            aria-controls=\"date\"\n            focus-target\n            [tabindex]=\"-1\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            [container]=\"containerTarget || '.wm-app'\"\n            [bsConfig]=\"_dateOptions\"\n            [isOpen]=\"isDateOpen\"\n             placement=\"bottom right\"\n            (onShown)=\"onDatePickerOpen()\"\n            (onHidden)=\"hideDatepickerDropdown()\"\n            [daysDisabled]=\"excludedDaysToDisable\"\n            [datesDisabled]=\"excludedDatesToDisable\"\n            #datepicker=bsDatepicker\n            bsDatepicker\n            [isDisabled]=\"disabled || readonly || isCurrentDate\"\n            [bsValue]=\"bsDateValue\"\n            (bsValueChange)=\"onModelUpdate($event, 'date')\">\n    </div>\n        <div *dropdownMenu\n            class=\"dropdown-menu\"\n            aria-label=\"timepicker dropdown\"\n            aria-controls=\"time\"\n            (click)=\"preventTpClose($event)\">\n            <timepicker class=\"model-holder\"\n                [showMeridian]=\"ismeridian\"\n                [readonlyInput]=\"disabled || readonly || isCurrentDate\"\n                [(ngModel)]=\"bsTimeValue\"\n                [min]=\"minTime\"\n                [max]=\"maxTime\"\n                [hourStep]=\"hourstep\"\n                [minuteStep]=\"minutestep\"\n                [secondsStep]=\"secondsstep\"\n                [mousewheel]=\"true\"\n                [arrowkeys]=\"true\"\n                (isValid)=\"isValid($event)\"\n                [showSeconds]=\"showseconds\"\n                (ngModelChange)=\"onModelUpdate($event, 'time')\"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        [config]=\"_dateOptions\"\n        [placement]=\"modal\"\n        [excludedDaysToDisable]=\"excludedDaysToDisable\"\n        [excludedDatesToDisable]=\"excludedDatesToDisable\"\n        [displayFormat]=\"dateInputFormat\"\n        [value]=\"bsDateValue\"\n        (change)=\"onModelUpdate($event, 'date')\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        [tabindex]=\"tabindex || 0\"\n         (click)=\"!(disabled || readonly || isCurrentDate) && showDatePickerModal(bsDateValue)\"\n         [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : hint || 'Choose Date'\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event)\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
-    }], function () { return [{ type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }, { type: i1$1.App }]; }, { bsDatePickerDirective: [{
+                ], 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 || '.wm-app'\"\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) && 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" }]
+    }], () => [{ type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }, { type: i1$1.App }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { bsDatePickerDirective: [{
             type: ViewChild,
             args: [BsDatepickerDirective]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatetimeComponent, { className: "DatetimeComponent", filePath: "date-time/date-time.component.ts", lineNumber: 56 }); })();
 
 const timeProps = new Map([
     ['autofocus', PROP_BOOLEAN],
@@ -2645,29 +2696,32 @@ const registerProps = () => {
 
 const _c0 = ["wmTime", ""];
 function TimeComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵlistener("click", function TimeComponent_div_5_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.preventTpClose($event)); });
+    i0.ɵɵlistener("click", function TimeComponent_div_5_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.preventTpClose($event)); });
     i0.ɵɵelementStart(1, "timepicker", 8);
-    i0.ɵɵlistener("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.bsTimeValue = $event); })("isValid", function TimeComponent_div_5_Template_timepicker_isValid_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.isValid($event)); })("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.onTimeChange($event)); });
+    i0.ɵɵtwoWayListener("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.bsTimeValue, $event) || (ctx_r1.bsTimeValue = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("isValid", function TimeComponent_div_5_Template_timepicker_isValid_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.isValid($event)); })("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTimeChange($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("showMeridian", ctx_r0.ismeridian)("readonlyInput", ctx_r0.isDisabled)("ngModel", ctx_r0.bsTimeValue)("disabled", ctx_r0.disabled || ctx_r0.readonly || ctx_r0.isCurrentTime)("min", ctx_r0.minTime)("max", ctx_r0.maxTime)("hourStep", ctx_r0.hourstep)("minuteStep", ctx_r0.minutestep)("secondsStep", ctx_r0.secondsstep)("mousewheel", true)("arrowkeys", true)("showSeconds", ctx_r0.showseconds);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("showMeridian", ctx_r1.ismeridian)("readonlyInput", ctx_r1.isDisabled);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.bsTimeValue);
+    i0.ɵɵproperty("disabled", ctx_r1.disabled || ctx_r1.readonly || ctx_r1.isCurrentTime)("min", ctx_r1.minTime)("max", ctx_r1.maxTime)("hourStep", ctx_r1.hourstep)("minuteStep", ctx_r1.minutestep)("secondsStep", ctx_r1.secondsstep)("mousewheel", true)("arrowkeys", true)("showSeconds", ctx_r1.showseconds);
 } }
 function TimeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
+    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "wm-datetimepicker", 9);
-    i0.ɵɵlistener("change", function TimeComponent_ng_template_6_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.onTimeChange($event)); });
+    i0.ɵɵlistener("change", function TimeComponent_ng_template_6_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTimeChange($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(1, "div", 10);
-    i0.ɵɵlistener("click", function TimeComponent_ng_template_6_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r9.disabled || ctx_r9.readonly || ctx_r9.isCurrentTime) && ctx_r9.showDatePickerModal(ctx_r9.bsTimeValue)); })("focus", function TimeComponent_ng_template_6_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r10 = i0.ɵɵnextContext(); ctx_r10.onDateTimeInputFocus(true); ctx_r10.invokeOnFocus($event); return i0.ɵɵresetView(ctx_r10.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r11 = i0.ɵɵnextContext(); ctx_r11.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r11.invokeOnTouched($event)); });
+    i0.ɵɵlistener("click", function TimeComponent_ng_template_6_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r1.disabled || ctx_r1.readonly) && ctx_r1.showDatePickerModal(ctx_r1.bsTimeValue)); })("focus", function TimeComponent_ng_template_6_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputFocus(true); ctx_r1.invokeOnFocus($event); return i0.ɵɵresetView(ctx_r1.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r1.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("minTime", ctx_r1.minTime)("maxTime", ctx_r1.maxTime)("placement", ctx_r1.modal)("displayFormat", ctx_r1.timepattern)("value", ctx_r1.bsTimeValue);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵattribute("aria-label", ctx_r1.displayValue ? "Change time  " + ctx_r1.displayValue : ctx_r1.hint || "Select time");
 } }
 const CURRENT_TIME = 'CURRENT_TIME';
@@ -2716,8 +2770,8 @@ class TimeComponent extends BaseDateTimeComponent {
     get nativeDisplayValue() {
         return getFormattedDate(this.datePipe, this.bsTimeValue, 'HH:mm:ss', this.timeZone, null, null, this) || '';
     }
-    constructor(inj, ngZone, appDefaults, app) {
-        super(inj, WIDGET_CONFIG);
+    constructor(inj, ngZone, appDefaults, app, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
         this.ngZone = ngZone;
         this.appDefaults = appDefaults;
         /**
@@ -2915,7 +2969,7 @@ class TimeComponent extends BaseDateTimeComponent {
     }
     // Change event is registered from the template, Prevent the framework from registering one more event
     handleEvent(node, eventName, eventCallback, locals) {
-        if (!_.includes(['blur', 'focus', 'change', 'click'], eventName)) {
+        if (!includes(['blur', 'focus', 'change', 'click'], eventName)) {
             super.handleEvent(node, eventName, eventCallback, locals);
         }
     }
@@ -2946,7 +3000,7 @@ class TimeComponent extends BaseDateTimeComponent {
      */
     onShown() {
         const tpElements = document.querySelectorAll('timepicker');
-        _.forEach(tpElements, element => {
+        forEach(tpElements, element => {
             addClass(element.parentElement, 'app-datetime', true);
         });
         this.focusTimePickerPopover(this);
@@ -2957,15 +3011,15 @@ class TimeComponent extends BaseDateTimeComponent {
         if (!this.displayInputElem) {
             this.displayInputElem = this.getMobileInput();
         }
-        this.displayInputElem.value = _.get(this, 'nativeDisplayValue');
+        this.displayInputElem.value = get(this, 'nativeDisplayValue');
     }
-    static { this.ɵfac = function TimeComponent_Factory(t) { return new (t || TimeComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1$1.AppDefaults), i0.ɵɵdirectiveInject(i1$1.App)); }; }
+    static { this.ɵfac = function TimeComponent_Factory(t) { return new (t || TimeComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1$1.AppDefaults), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimeComponent, selectors: [["", "wmTime", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAs(TimeComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(TimeComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(TimeComponent),
                 { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 7, vars: 16, consts: [["dropdown", "", 2, "display", "inherit", 3, "isOpen", "container", "onShown", "onHidden"], ["focus-target", "", "type", "text", "role", "timer", 1, "form-control", "app-textbox", "display-input", 3, "tabindex", "name", "value", "disabled", "autofocus", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], [1, "input-group-btn", "dropdown-toggle"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], ["class", "dropdown-menu", 3, "click", 4, "dropdownMenu"], [3, "ngIf"], [1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "showMeridian", "readonlyInput", "ngModel", "disabled", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds", "ngModelChange", "isValid"], ["dateTimePicker", "", "mode", "TIME", 3, "minTime", "maxTime", "placement", "displayFormat", "value", "change"], ["tabindex", "1000000", "role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur"]], template: function TimeComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 7, vars: 16, consts: [["dropdown", "", 2, "display", "inherit", 3, "onShown", "onHidden", "isOpen", "container"], ["focus-target", "", "type", "text", "role", "timer", 1, "form-control", "app-textbox", "display-input", 3, "click", "focus", "blur", "change", "keydown", "tabindex", "name", "value", "disabled", "autofocus", "required", "readOnly"], [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, "click", "tabindex", "disabled"], ["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, "ngModelChange", "isValid", "showMeridian", "readonlyInput", "ngModel", "disabled", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds"], ["dateTimePicker", "", "mode", "TIME", 3, "change", "minTime", "maxTime", "placement", "displayFormat", "value"], ["tabindex", "1000000", "role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur"]], template: function TimeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("onShown", function TimeComponent_Template_div_onShown_0_listener() { return ctx.onShown(); })("onHidden", function TimeComponent_Template_div_onHidden_0_listener() { return ctx.hideTimepickerDropdown(); });
             i0.ɵɵelementStart(1, "input", 1);
@@ -2980,7 +3034,7 @@ class TimeComponent extends BaseDateTimeComponent {
             i0.ɵɵtemplate(6, TimeComponent_ng_template_6_Template, 2, 6, "ng-template", 6);
         } if (rf & 2) {
             i0.ɵɵproperty("isOpen", ctx.status.isopen)("container", "body");
-            i0.ɵɵadvance(1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("tabindex", ctx.tabindex)("name", ctx.name)("value", ctx.displayValue)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentTime)("autofocus", ctx.autofocus)("required", ctx.required)("readOnly", ctx.isReadOnly);
             i0.ɵɵattribute("aria-label", ctx.hint)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-atomic", ctx.isCurrentTime ? "true" : "false");
             i0.ɵɵadvance(2);
@@ -2989,15 +3043,21 @@ class TimeComponent extends BaseDateTimeComponent {
             i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
         } }, dependencies: [i2.NgIf, i4$1.BsDropdownMenuDirective, i4$1.BsDropdownDirective, i5.NgControlStatus, i5.NgModel, i6.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeComponent, [{
         type: Component,
         args: [{ selector: '[wmTime]', providers: [
                     provideAs(TimeComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(TimeComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(TimeComponent),
                     { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-                ], template: "    <div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n        <input class=\"form-control app-textbox display-input\" [attr.aria-label]=\"hint\"\n               focus-target\n               [tabindex]=\"tabindex\"\n               [name]=\"name\"\n               type=\"text\"\n               role=\"timer\"\n               [value]=\"displayValue\"\n               [disabled]=\"disabled || readonly || isCurrentTime\"\n               [autofocus]=\"autofocus\"\n               [attr.placeholder]=\"placeholder\"\n               [attr.accesskey]=\"shortcutkey\"\n               [attr.aria-atomic]=\"isCurrentTime ? 'true' : 'false'\"\n               [required]=\"required\"\n               [readOnly]=\"isReadOnly\"\n               (click)=\"toggleDropdown($event, true)\"\n               (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n               (blur)=\"onInputBlur($event)\"\n               (change)=\"onDisplayTimeChange($event)\"\n               (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n        <span class=\"input-group-btn dropdown-toggle\">\n            <button type=\"button\" class=\"btn btn-default btn-date\" [tabindex]=\"tabindex\" [disabled]=\"disabled || readonly || isCurrentTime\" aria-label=\"Select time\" aria-haspopup=\"true\" aria-expanded=\"false\" (click)=\"toggleDropdown($event, false)\"><i aria-hidden=\"true\" class=\"app-icon wm-sl-l sl-time\"></i></button>\n        </span>\n        <div *dropdownMenu class=\"dropdown-menu\" (click)=\"preventTpClose($event)\">\n            <timepicker class=\"model-holder\"\n                        [showMeridian]=\"ismeridian\"\n                        [readonlyInput]=\"isDisabled\"\n                        [(ngModel)]=\"bsTimeValue\"\n                        [disabled]=\"disabled || readonly || isCurrentTime\"\n                        [min]=\"minTime\"\n                        [max]=\"maxTime\"\n                        [hourStep]=\"hourstep\"\n                        [minuteStep]=\"minutestep\"\n                        [secondsStep]=\"secondsstep\"\n                        [mousewheel]=\"true\"\n                        [arrowkeys]=\"true\"\n                        (isValid)=\"isValid($event)\"\n                        [showSeconds]=\"showseconds\" (ngModelChange)=\"onTimeChange($event)\"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"TIME\"\n        [minTime]=\"minTime\"\n        [maxTime]=\"maxTime\"\n        [placement]=\"modal\"\n        [displayFormat]=\"timepattern\"\n        [value]=\"bsTimeValue\"\n        (change)=\"onTimeChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        tabindex=\"1000000\"\n         (click)=\"!(disabled || readonly || isCurrentTime) && showDatePickerModal(bsTimeValue)\"\n         [attr.aria-label]=\"displayValue ? 'Change time  ' + displayValue : hint || 'Select time'\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event); assignModel()\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
-    }], function () { return [{ type: i0.Injector }, { type: i0.NgZone }, { type: i1$1.AppDefaults }, { type: i1$1.App }]; }, null); })();
+                ], 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) && 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" }]
+    }], () => [{ type: i0.Injector }, { type: i0.NgZone }, { type: i1$1.AppDefaults }, { type: i1$1.App }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimeComponent, { className: "TimeComponent", filePath: "time/time.component.ts", lineNumber: 42 }); })();
 
 const components = [
     DateComponent,
@@ -3019,7 +3079,7 @@ class EpochModule {
             WmComponentsModule,
             IMaskModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EpochModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EpochModule, [{
         type: NgModule,
         args: [{
                 imports: [