@wavemaker/app-ng-runtime 11.7.5-rc.5649 → 11.8.0-next.1417111

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

@@ -38,7 +38,7 @@
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const option_r1 = ctx.$implicit;
-        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵtextInterpolate1(" ", option_r1.label, " ");
     } }
     class PickerGroupComponent {
@@ -50,7 +50,7 @@
                 i0__namespace.ɵɵelementEnd();
             } }, encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PickerGroupComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PickerGroupComponent, [{
             type: i0.Component,
             args: [{
                     selector: 'wm-pickergroup',
@@ -61,6 +61,7 @@
     `
                 }]
         }], null, null); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(PickerGroupComponent, { className: "PickerGroupComponent", filePath: "picker/picker.component.ts", lineNumber: 13 }); })();
     class PickerComponent {
         constructor(inj) {
             this.inj = inj;
@@ -124,7 +125,7 @@
                 i0__namespace.ɵɵproperty("ngForOf", ctx.options);
             } }, dependencies: [i2__namespace.NgForOf], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PickerComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PickerComponent, [{
             type: i0.Component,
             args: [{
                     selector: 'wm-picker',
@@ -143,13 +144,14 @@
         </div>
     `
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }]; }, { change: [{
+        }], () => [{ type: i0__namespace.Injector }], { change: [{
                 type: i0.Output
             }], selectedValue: [{
                 type: i0.Input
             }], options: [{
                 type: i0.Input
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(PickerComponent, { className: "PickerComponent", filePath: "picker/picker.component.ts", lineNumber: 34 }); })();
     class PickerAnimator {
         constructor(picker) {
             this.picker = picker;
@@ -207,75 +209,73 @@
 
     const _c0$3 = ["datetimepickerTemplate"];
     function DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template(rf, ctx) { if (rf & 1) {
-        const _r7 = i0__namespace.ɵɵgetCurrentView();
+        const _r2 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "bs-datepicker-inline", 11);
-        i0__namespace.ɵɵlistener("bsValueChange", function DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template_bs_datepicker_inline_bsValueChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r7); const ctx_r6 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r6.onDateUpdate($event)); });
+        i0__namespace.ɵɵlistener("bsValueChange", function DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template_bs_datepicker_inline_bsValueChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onDateUpdate($event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r2 = i0__namespace.ɵɵnextContext(2);
         i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+        const _r4 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "wm-timepicker", 12);
-        i0__namespace.ɵɵlistener("change", function DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template_wm_timepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ctx_r8 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r8.onTimeUpdate($event)); });
+        i0__namespace.ɵɵlistener("change", function DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template_wm_timepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onTimeUpdate($event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r3 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵproperty("value", ctx_r3.changedValue)("min", ctx_r3.minTime)("max", ctx_r3.maxTime);
+        const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+        const _r5 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "button", 13);
-        i0__namespace.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_8_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r11); const ctx_r10 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r10.setToday()); });
+        i0__namespace.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_8_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r5); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.setToday()); });
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r4 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵtextInterpolate(ctx_r4.appLocale.LABEL_TODAY_DATE || "Today");
+        const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_TODAY_DATE || "Today");
     } }
     function DateTimePickerComponent_ng_template_0_button_9_Template(rf, ctx) { if (rf & 1) {
-        const _r13 = i0__namespace.ɵɵgetCurrentView();
+        const _r6 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "button", 14);
-        i0__namespace.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_9_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r13); const ctx_r12 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r12.onOkClick()); });
+        i0__namespace.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_9_Template_button_click_0_listener() { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onOkClick()); });
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r5 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵtextInterpolate(ctx_r5.appLocale.LABEL_OK || "Ok");
+        const ctx_r2 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_OK || "Ok");
     } }
     function DateTimePickerComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-        const _r15 = i0__namespace.ɵɵgetCurrentView();
+        const _r1 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "div", 1)(1, "div", 2);
         i0__namespace.ɵɵelement(2, "div", 3);
-        i0__namespace.ɵɵtemplate(3, DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template, 1, 3, "bs-datepicker-inline", 4);
-        i0__namespace.ɵɵtemplate(4, DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template, 1, 3, "wm-timepicker", 5);
+        i0__namespace.ɵɵ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__namespace.ɵɵelementStart(5, "span", 6);
         i0__namespace.ɵɵtext(6);
         i0__namespace.ɵɵelementEnd()();
         i0__namespace.ɵɵelementStart(7, "div", 7);
-        i0__namespace.ɵɵtemplate(8, DateTimePickerComponent_ng_template_0_button_8_Template, 2, 1, "button", 8);
-        i0__namespace.ɵɵtemplate(9, DateTimePickerComponent_ng_template_0_button_9_Template, 2, 1, "button", 9);
+        i0__namespace.ɵɵ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__namespace.ɵɵelementStart(10, "button", 10);
-        i0__namespace.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_Template_button_click_10_listener() { i0__namespace.ɵɵrestoreView(_r15); const ctx_r14 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r14.clear()); });
+        i0__namespace.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_Template_button_click_10_listener() { i0__namespace.ɵɵrestoreView(_r1); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.clear()); });
         i0__namespace.ɵɵtext(11);
         i0__namespace.ɵɵelementEnd()()();
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
+        const ctx_r2 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance(3);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r1.mode === "DATE_TIME" || ctx_r1.mode === "DATE");
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r1.mode === "DATE_TIME" || ctx_r1.mode === "TIME");
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵtextInterpolate1(" ", ctx_r1.getDateLabel(), " ");
+        i0__namespace.ɵɵtextInterpolate1(" ", ctx_r2.getDateLabel(), " ");
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r1.mode === "DATE_TIME" || ctx_r1.mode === "DATE");
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngIf", ctx_r1.mode === "DATE_TIME" || ctx_r1.mode === "TIME");
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵtextInterpolate(ctx_r1.appLocale.LABEL_CLEAR_DATE || "Clear");
+        i0__namespace.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_CLEAR_DATE || "Clear");
     } }
     class DateTimePickerComponent {
         constructor(inj, bsModalService) {
@@ -450,11 +450,11 @@
             } if (rf & 2) {
                 let _t;
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵ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__namespace.ɵɵInputFlags.None, "config", "_bsDatepickerConfig"], minTime: "minTime", maxTime: "maxTime", _displayFormat: "_displayFormat", excludedDatesToDisable: "excludedDatesToDisable", value: "value", bsDatepickerConfig: [i0__namespace.ɵɵ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__namespace.ɵɵtemplate(0, DateTimePickerComponent_ng_template_0_Template, 12, 6, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
-            } }, dependencies: function () { return [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInlineDirective, TimePickerComponent]; }, encapsulation: 2 }); }
+            } }, dependencies: () => [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInlineDirective, TimePickerComponent], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DateTimePickerComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DateTimePickerComponent, [{
             type: i0.Component,
             args: [{
                     selector: 'wm-datetimepicker',
@@ -500,7 +500,7 @@
     </ng-template>
     `
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1__namespace.BsModalService }]; }, { datetimepickerTemplate: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.BsModalService }], { datetimepickerTemplate: [{
                 type: i0.ViewChild,
                 args: ['datetimepickerTemplate', { static: true }]
             }], mode: [{
@@ -530,6 +530,7 @@
             }], displayFormat: [{
                 type: i0.Input
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(DateTimePickerComponent, { className: "DateTimePickerComponent", filePath: "date-time/date-time-picker.component.ts", lineNumber: 53 }); })();
     class TimePickerComponent {
         constructor(inj) {
             this.inj = inj;
@@ -596,7 +597,7 @@
         ngAfterViewInit() {
         }
         static { this.ɵfac = function TimePickerComponent_Factory(t) { return new (t || TimePickerComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
-        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "wm-pickergroup")(1, "wm-picker", 0);
                 i0__namespace.ɵɵlistener("change", function TimePickerComponent_Template_wm_picker_change_1_listener($event) { return ctx.set($event, "HOUR"); });
                 i0__namespace.ɵɵelementEnd();
@@ -613,7 +614,7 @@
                 i0__namespace.ɵɵlistener("change", function TimePickerComponent_Template_wm_picker_change_7_listener($event) { return ctx.set($event, "SECOND"); });
                 i0__namespace.ɵɵelementEnd()();
             } if (rf & 2) {
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("options", ctx.options.hour)("selectedValue", ctx.hour);
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵproperty("options", ctx.options.minute)("selectedValue", ctx.minute);
@@ -621,7 +622,7 @@
                 i0__namespace.ɵɵproperty("options", ctx.options.minute)("selectedValue", ctx.second);
             } }, dependencies: [PickerComponent, PickerGroupComponent], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TimePickerComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TimePickerComponent, [{
             type: i0.Component,
             args: [{
                     selector: 'wm-timepicker',
@@ -644,7 +645,7 @@
         </wm-pickergroup>
     `
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }]; }, { value: [{
+        }], () => [{ type: i0__namespace.Injector }], { value: [{
                 type: i0.Input
             }], min: [{
                 type: i0.Input
@@ -653,6 +654,7 @@
             }], change: [{
                 type: i0.Output
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(TimePickerComponent, { className: "TimePickerComponent", filePath: "date-time/date-time-picker.component.ts", lineNumber: 304 }); })();
 
     const CURRENT_DATE$2 = 'CURRENT_DATE';
     const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
@@ -672,8 +674,8 @@
     }
     class BaseDateTimeComponent extends input.BaseFormCustomComponent {
         get timeZone() { return this.inj.get(i1$1.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': '' };
@@ -1632,9 +1634,14 @@
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.datetimepickerComponent = _t.first);
             } }, features: [i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseDateTimeComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BaseDateTimeComponent, [{
             type: i0.Directive
-        }], function () { return [{ type: i0__namespace.Injector }, { type: undefined }]; }, { bsDropdown: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: undefined }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { bsDropdown: [{
                 type: i0.ViewChild,
                 args: [i4$1.BsDropdownDirective]
             }], bsTimePicker: [{
@@ -1666,7 +1673,7 @@
         ['shortcutkey', base.PROP_STRING],
         ['show', { value: true, ...base.PROP_BOOLEAN }],
         ['showdropdownon', { value: 'default', ...base.PROP_STRING }],
-        ['showbuttonbar', { value: true, ...base.PROP_BOOLEAN }],
+        ['showbuttonbar', { value: true, ...base.PROP_BOOLEAN }], // TODO not addressed
         ['showcustompicker', { value: false, ...base.PROP_BOOLEAN }],
         ['showindevice', { displayType: 'inline-block', value: 'all', ...base.PROP_STRING }],
         ['showweeks', { value: false, ...base.PROP_BOOLEAN }],
@@ -1798,17 +1805,17 @@
     const _c0$2 = ["dateInput"];
     const _c1 = ["wmDate", ""];
     function DateComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
-        const _r4 = i0__namespace.ɵɵgetCurrentView();
+        const _r2 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 9);
-        i0__namespace.ɵɵlistener("change", function DateComponent_ng_template_8_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.onDateChange($event)); });
+        i0__namespace.ɵɵlistener("change", function DateComponent_ng_template_8_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onDateChange($event)); });
         i0__namespace.ɵɵelementEnd();
         i0__namespace.ɵɵelementStart(1, "div", 10);
-        i0__namespace.ɵɵlistener("click", function DateComponent_ng_template_8_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r4); const ctx_r5 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(!(ctx_r5.disabled || ctx_r5.readonly) && ctx_r5.showDatePickerModal(ctx_r5.bsDataValue)); })("focus", function DateComponent_ng_template_8_Template_div_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r6 = i0__namespace.ɵɵnextContext(); ctx_r6.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r6.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_8_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r7 = i0__namespace.ɵɵnextContext(); ctx_r7.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r7.invokeOnTouched($event)); });
+        i0__namespace.ɵɵlistener("click", function DateComponent_ng_template_8_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_8_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r2 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵproperty("config", ctx_r2._dateOptions)("placement", ctx_r2.modal)("excludedDaysToDisable", ctx_r2.excludedDaysToDisable)("excludedDatesToDisable", ctx_r2.excludedDatesToDisable)("displayFormat", ctx_r2.dateInputFormat)("value", ctx_r2.bsDataValue);
-        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
         i0__namespace.ɵɵattribute("aria-label", ctx_r2.displayValue ? "Change Date " + ctx_r2.displayValue : ctx_r2.hint || "Choose Date");
     } }
@@ -1858,8 +1865,8 @@
             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;
@@ -2073,7 +2080,7 @@
                 super.onPropertyChange(key, nv, ov);
             }
         }
-        static { this.ɵfac = function DateComponent_Factory(t) { return new (t || DateComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AppDefaults)); }; }
+        static { this.ɵfac = function DateComponent_Factory(t) { return new (t || DateComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: DateComponent, selectors: [["", "wmDate", ""]], viewQuery: function DateComponent_Query(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵviewQuery(i3.BsDatepickerDirective, 5);
                 i0__namespace.ɵɵviewQuery(_c0$2, 5, i4.IMaskDirective);
@@ -2085,16 +2092,17 @@
                     base.provideAs(DateComponent, i5.NG_VALUE_ACCESSOR, true),
                     base.provideAs(DateComponent, i5.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(DateComponent)
-                ]), i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "input", 0, 1);
-                i0__namespace.ɵɵlistener("click", function DateComponent_Template_input_click_0_listener($event) { return ctx.toggleDpDropdown($event, true); })("focus", function DateComponent_Template_input_focus_0_listener($event) { ctx.onDateTimeInputFocus(); 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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+                i0__namespace.ɵɵelementStart(0, "input", 2, 0);
+                i0__namespace.ɵɵlistener("click", function DateComponent_Template_input_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.toggleDpDropdown($event, true)); })("focus", function DateComponent_Template_input_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.onDateTimeInputFocus(); ctx.invokeOnFocus($event); return i0__namespace.ɵɵresetView(ctx.updateIMask()); })("blur", function DateComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputBlur($event)); })("change", function DateComponent_Template_input_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onDisplayDateChange($event)); })("keydown", function DateComponent_Template_input_keydown_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx._triggeredByUser = true; return i0__namespace.ɵɵresetView(ctx.onDisplayKeydown($event)); });
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(2, "span", 2)(3, "button", 3);
-                i0__namespace.ɵɵlistener("click", function DateComponent_Template_button_click_3_listener($event) { return ctx.toggleDpDropdown($event, false); });
-                i0__namespace.ɵɵelement(4, "i", 4);
+                i0__namespace.ɵɵelementStart(2, "span", 3)(3, "button", 4);
+                i0__namespace.ɵɵlistener("click", function DateComponent_Template_button_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.toggleDpDropdown($event, false)); });
+                i0__namespace.ɵɵelement(4, "i", 5);
                 i0__namespace.ɵɵelementEnd()();
-                i0__namespace.ɵɵelementStart(5, "div", 5)(6, "input", 6, 7);
-                i0__namespace.ɵɵ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__namespace.ɵɵelementStart(5, "div", 6)(6, "input", 7, 1);
+                i0__namespace.ɵɵlistener("onShown", function DateComponent_Template_input_onShown_6_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onDatePickerOpen()); })("onHidden", function DateComponent_Template_input_onHidden_6_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.hideDatepickerDropdown()); })("bsValueChange", function DateComponent_Template_input_bsValueChange_6_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onDateChange($event)); });
                 i0__namespace.ɵɵelementEnd()();
                 i0__namespace.ɵɵtemplate(8, DateComponent_ng_template_8_Template, 2, 8, "ng-template", 8);
             } if (rf & 2) {
@@ -2110,20 +2118,26 @@
                 i0__namespace.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
             } }, dependencies: [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInputDirective, i4__namespace.IMaskDirective, DateTimePickerComponent], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DateComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DateComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmDate]', providers: [
                         base.provideAs(DateComponent, i5.NG_VALUE_ACCESSOR, true),
                         base.provideAs(DateComponent, i5.NG_VALIDATORS, true),
                         base.provideAsWidgetRef(DateComponent)
                     ], template: "    <input class=\"form-control app-textbox app-dateinput display-input\"\n        focus-target\n        type=\"text\"\n        [name]=\"name\"\n        #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" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }]; }, { bsDatePickerDirective: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { bsDatePickerDirective: [{
                 type: i0.ViewChild,
                 args: [i3.BsDatepickerDirective]
             }], imask: [{
                 type: i0.ViewChild,
                 args: ['dateInput', { read: i4.IMaskDirective }]
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(DateComponent, { className: "DateComponent", filePath: "date/date.component.ts", lineNumber: 42 }); })();
 
     const dateTimeProps = new Map([
         ['autofocus', base.PROP_BOOLEAN],
@@ -2170,29 +2184,32 @@
 
     const _c0$1 = ["wmDateTime", ""];
     function DatetimeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-        const _r4 = i0__namespace.ɵɵgetCurrentView();
+        const _r2 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "div", 12);
-        i0__namespace.ɵɵlistener("click", function DatetimeComponent_div_10_Template_div_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r3 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r3.preventTpClose($event)); });
+        i0__namespace.ɵɵlistener("click", function DatetimeComponent_div_10_Template_div_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.preventTpClose($event)); });
         i0__namespace.ɵɵelementStart(1, "timepicker", 13);
-        i0__namespace.ɵɵlistener("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r5 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r5.bsTimeValue = $event); })("isValid", function DatetimeComponent_div_10_Template_timepicker_isValid_1_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r6 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r6.isValid($event)); })("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r7 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r7.onModelUpdate($event, "time")); });
+        i0__namespace.ɵɵtwoWayListener("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); i0__namespace.ɵɵtwoWayBindingSet(ctx_r2.bsTimeValue, $event) || (ctx_r2.bsTimeValue = $event); return i0__namespace.ɵɵresetView($event); });
+        i0__namespace.ɵɵlistener("isValid", function DatetimeComponent_div_10_Template_timepicker_isValid_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.isValid($event)); })("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r2); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onModelUpdate($event, "time")); });
         i0__namespace.ɵɵelementEnd()();
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵ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__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("showMeridian", ctx_r2.ismeridian)("readonlyInput", ctx_r2.disabled || ctx_r2.readonly || ctx_r2.isCurrentDate);
+        i0__namespace.ɵɵtwoWayProperty("ngModel", ctx_r2.bsTimeValue);
+        i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+        const _r4 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 14);
-        i0__namespace.ɵɵlistener("change", function DatetimeComponent_ng_template_11_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ctx_r8 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r8.onModelUpdate($event, "date")); });
+        i0__namespace.ɵɵlistener("change", function DatetimeComponent_ng_template_11_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.onModelUpdate($event, "date")); });
         i0__namespace.ɵɵelementEnd();
         i0__namespace.ɵɵelementStart(1, "div", 15);
-        i0__namespace.ɵɵlistener("click", function DatetimeComponent_ng_template_11_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r9); const ctx_r10 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(!(ctx_r10.disabled || ctx_r10.readonly) && ctx_r10.showDatePickerModal(ctx_r10.bsDateValue)); })("focus", function DatetimeComponent_ng_template_11_Template_div_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ctx_r11 = i0__namespace.ɵɵnextContext(); ctx_r11.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r11.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ctx_r12 = i0__namespace.ɵɵnextContext(); ctx_r12.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r12.invokeOnTouched($event)); });
+        i0__namespace.ɵɵlistener("click", function DatetimeComponent_ng_template_11_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r4); const ctx_r2 = i0__namespace.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r2 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵproperty("config", ctx_r2._dateOptions)("placement", ctx_r2.modal)("excludedDaysToDisable", ctx_r2.excludedDaysToDisable)("excludedDatesToDisable", ctx_r2.excludedDatesToDisable)("displayFormat", ctx_r2.dateInputFormat)("value", ctx_r2.bsDateValue);
-        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("tabindex", ctx_r2.tabindex || 0);
         i0__namespace.ɵɵattribute("aria-label", ctx_r2.displayValue ? "Change Date " + ctx_r2.displayValue : ctx_r2.hint || "Choose Date");
     } }
@@ -2241,8 +2258,8 @@
             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;
@@ -2586,7 +2603,7 @@
                 this.invokeEventCallback('blur', { $event });
             }
         }
-        static { this.ɵfac = function DatetimeComponent_Factory(t) { return new (t || DatetimeComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App)); }; }
+        static { this.ɵfac = function DatetimeComponent_Factory(t) { return new (t || DatetimeComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: DatetimeComponent, selectors: [["", "wmDateTime", ""]], viewQuery: function DatetimeComponent_Query(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵviewQuery(i3.BsDatepickerDirective, 5);
             } if (rf & 2) {
@@ -2597,29 +2614,30 @@
                     base.provideAs(DatetimeComponent, i5.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(DatetimeComponent),
                     { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$1, decls: 12, vars: 30, consts: [["dropdown", "", "autoClose", "false", 2, "display", "inherit", 3, "isOpen", "container", "onShown"], ["focus-target", "", "type", "text", 1, "form-control", "app-textbox", "display-input", 3, "name", "tabindex", "value", "autofocus", "disabled", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], [1, "input-group-btn"], ["type", "button", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-calendar"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-time", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], [2, "width", "0", "display", "inline-block"], ["aria-label", "datepicker dropdownmenu", "aria-controls", "date", "focus-target", "", "placement", "bottom right", "bsDatepicker", "", 1, "model-holder", 3, "tabindex", "container", "bsConfig", "isOpen", "daysDisabled", "datesDisabled", "isDisabled", "bsValue", "onShown", "onHidden", "bsValueChange"], ["datepicker", "bsDatepicker"], ["class", "dropdown-menu", "aria-label", "timepicker dropdown", "aria-controls", "time", 3, "click", 4, "dropdownMenu"], [3, "ngIf"], ["aria-label", "timepicker dropdown", "aria-controls", "time", 1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "showMeridian", "readonlyInput", "ngModel", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds", "ngModelChange", "isValid"], ["dateTimePicker", "", 3, "config", "placement", "excludedDaysToDisable", "excludedDatesToDisable", "displayFormat", "value", "change"], ["role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "tabindex", "click", "focus", "blur"]], template: function DatetimeComponent_Template(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵelementStart(0, "div", 0);
-                i0__namespace.ɵɵlistener("onShown", function DatetimeComponent_Template_div_onShown_0_listener() { return ctx.onTimepickerOpen(); });
-                i0__namespace.ɵɵelementStart(1, "input", 1);
-                i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+                i0__namespace.ɵɵelementStart(0, "div", 1);
+                i0__namespace.ɵɵlistener("onShown", function DatetimeComponent_Template_div_onShown_0_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onTimepickerOpen()); });
+                i0__namespace.ɵɵelementStart(1, "input", 2);
+                i0__namespace.ɵɵlistener("click", function DatetimeComponent_Template_input_click_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.toggleDpDropdown($event, true)); })("focus", function DatetimeComponent_Template_input_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.onDateTimeInputFocus(); return i0__namespace.ɵɵresetView(ctx.invokeOnFocus($event)); })("blur", function DatetimeComponent_Template_input_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputBlur($event)); })("change", function DatetimeComponent_Template_input_change_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onDateChange($event)); })("keydown", function DatetimeComponent_Template_input_keydown_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx._triggeredByUser = true; return i0__namespace.ɵɵresetView(ctx.onDisplayKeydown($event)); });
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(2, "span", 2)(3, "button", 3);
-                i0__namespace.ɵɵlistener("click", function DatetimeComponent_Template_button_click_3_listener($event) { return ctx.toggleDpDropdown($event, false); });
-                i0__namespace.ɵɵelement(4, "i", 4);
+                i0__namespace.ɵɵelementStart(2, "span", 3)(3, "button", 4);
+                i0__namespace.ɵɵlistener("click", function DatetimeComponent_Template_button_click_3_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.toggleDpDropdown($event, false)); });
+                i0__namespace.ɵɵelement(4, "i", 5);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(5, "button", 5);
-                i0__namespace.ɵɵlistener("click", function DatetimeComponent_Template_button_click_5_listener($event) { return ctx.toggleTimePicker(!ctx.isTimeOpen, $event); });
-                i0__namespace.ɵɵelement(6, "i", 6);
+                i0__namespace.ɵɵelementStart(5, "button", 6);
+                i0__namespace.ɵɵlistener("click", function DatetimeComponent_Template_button_click_5_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.toggleTimePicker(!ctx.isTimeOpen, $event)); });
+                i0__namespace.ɵɵelement(6, "i", 7);
                 i0__namespace.ɵɵelementEnd()();
-                i0__namespace.ɵɵelementStart(7, "div", 7)(8, "input", 8, 9);
-                i0__namespace.ɵɵ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__namespace.ɵɵelementStart(7, "div", 8)(8, "input", 9, 0);
+                i0__namespace.ɵɵlistener("onShown", function DatetimeComponent_Template_input_onShown_8_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onDatePickerOpen()); })("onHidden", function DatetimeComponent_Template_input_onHidden_8_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.hideDatepickerDropdown()); })("bsValueChange", function DatetimeComponent_Template_input_bsValueChange_8_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onModelUpdate($event, "date")); });
                 i0__namespace.ɵɵelementEnd()();
                 i0__namespace.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 2, 11, "div", 10);
                 i0__namespace.ɵɵelementEnd();
                 i0__namespace.ɵɵtemplate(11, DatetimeComponent_ng_template_11_Template, 2, 8, "ng-template", 11);
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("isOpen", ctx.isTimeOpen)("container", "body");
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵ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__namespace.ɵɵattribute("aria-label", ctx.hint)("aria-hidden", !!ctx.loadNativeDateInput)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
                 i0__namespace.ɵɵadvance(2);
@@ -2635,7 +2653,7 @@
                 i0__namespace.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
             } }, dependencies: [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInputDirective, i4$1__namespace.BsDropdownMenuDirective, i4$1__namespace.BsDropdownDirective, i5__namespace.NgControlStatus, i5__namespace.NgModel, i6__namespace.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatetimeComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatetimeComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmDateTime]', providers: [
                         base.provideAs(DatetimeComponent, i5.NG_VALUE_ACCESSOR, true),
@@ -2643,10 +2661,16 @@
                         base.provideAsWidgetRef(DatetimeComponent),
                         { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
                     ], template: "    <div dropdown\n        [isOpen]=\"isTimeOpen\"\n        autoClose=\"false\"\n        [container]=\"'body'\"\n        (onShown)=\"onTimepickerOpen()\"\n        style=\"display: inherit;\">\n        <input class=\"form-control app-textbox display-input\"\n            [attr.aria-label]=\"hint\"\n            focus-target\n            [name]=\"name\"\n            [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            type=\"text\"\n            [value]=\"displayValue\"\n            (click)=\"toggleDpDropdown($event, true)\"\n            (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n            (blur)=\"onInputBlur($event)\"\n            (change)=\"onDateChange($event)\"\n            [autofocus]=\"autofocus\"\n            [disabled]=\"disabled || readonly || isCurrentDate\"\n            [required]=\"required\"\n            [readOnly]=\"isReadOnly\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.accesskey]=\"shortcutkey\"\n            (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n\n        <span class=\"input-group-btn\">\n            <button type=\"button\"\n                class=\"btn btn-default btn-date\"\n                [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n                [attr.aria-hidden]=\"!!loadNativeDateInput\"\n                [disabled]=\"disabled || readonly || isCurrentDate\"\n                [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                (click)=\"toggleDpDropdown($event, false)\">\n                <i aria-hidden=\"true\"\n                    class=\"app-icon wm-sl-l sl-calendar\"></i>\n            </button>\n            <button type=\"button\"\n                class=\"btn btn-default btn-time\"\n                [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n                [attr.aria-hidden]=\"!!loadNativeDateInput\"\n                [disabled]=\"disabled || readonly || isCurrentDate\"\n                aria-label=\"Select time\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                (click)=\"toggleTimePicker(!isTimeOpen, $event)\">\n                <i aria-hidden=\"true\"\n                    class=\"app-icon wm-sl-l sl-time\"></i>\n            </button>\n        </span>\n        <div style=\"width: 0;display: inline-block;\">\n        <input class=\"model-holder\"\n            aria-label=\"datepicker dropdownmenu\"\n            aria-controls=\"date\"\n            focus-target\n            [tabindex]=\"-1\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            [container]=\"containerTarget || '.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" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.App }]; }, { bsDatePickerDirective: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.App }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { bsDatePickerDirective: [{
                 type: i0.ViewChild,
                 args: [i3.BsDatepickerDirective]
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(DatetimeComponent, { className: "DatetimeComponent", filePath: "date-time/date-time.component.ts", lineNumber: 54 }); })();
 
     const timeProps = new Map([
         ['autofocus', base.PROP_BOOLEAN],
@@ -2681,29 +2705,32 @@
 
     const _c0 = ["wmTime", ""];
     function TimeComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-        const _r3 = i0__namespace.ɵɵgetCurrentView();
+        const _r1 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "div", 7);
-        i0__namespace.ɵɵlistener("click", function TimeComponent_div_5_Template_div_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.preventTpClose($event)); });
+        i0__namespace.ɵɵlistener("click", function TimeComponent_div_5_Template_div_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.preventTpClose($event)); });
         i0__namespace.ɵɵelementStart(1, "timepicker", 8);
-        i0__namespace.ɵɵlistener("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r4 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r4.bsTimeValue = $event); })("isValid", function TimeComponent_div_5_Template_timepicker_isValid_1_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r5 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r5.isValid($event)); })("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r6 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r6.onTimeChange($event)); });
+        i0__namespace.ɵɵtwoWayListener("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); i0__namespace.ɵɵtwoWayBindingSet(ctx_r1.bsTimeValue, $event) || (ctx_r1.bsTimeValue = $event); return i0__namespace.ɵɵresetView($event); });
+        i0__namespace.ɵɵlistener("isValid", function TimeComponent_div_5_Template_timepicker_isValid_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.isValid($event)); })("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onTimeChange($event)); });
         i0__namespace.ɵɵelementEnd()();
     } if (rf & 2) {
-        const ctx_r0 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵ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__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("showMeridian", ctx_r1.ismeridian)("readonlyInput", ctx_r1.isDisabled);
+        i0__namespace.ɵɵtwoWayProperty("ngModel", ctx_r1.bsTimeValue);
+        i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
+        const _r3 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 9);
-        i0__namespace.ɵɵlistener("change", function TimeComponent_ng_template_6_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r8); const ctx_r7 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r7.onTimeChange($event)); });
+        i0__namespace.ɵɵlistener("change", function TimeComponent_ng_template_6_Template_wm_datetimepicker_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r1.onTimeChange($event)); });
         i0__namespace.ɵɵelementEnd();
         i0__namespace.ɵɵelementStart(1, "div", 10);
-        i0__namespace.ɵɵlistener("click", function TimeComponent_ng_template_6_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r8); const ctx_r9 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(!(ctx_r9.disabled || ctx_r9.readonly) && ctx_r9.showDatePickerModal(ctx_r9.bsTimeValue)); })("focus", function TimeComponent_ng_template_6_Template_div_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r8); const ctx_r10 = i0__namespace.ɵɵnextContext(); ctx_r10.onDateTimeInputFocus(true); ctx_r10.invokeOnFocus($event); return i0__namespace.ɵɵresetView(ctx_r10.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r8); const ctx_r11 = i0__namespace.ɵɵnextContext(); ctx_r11.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r11.invokeOnTouched($event)); });
+        i0__namespace.ɵɵlistener("click", function TimeComponent_ng_template_6_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵ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__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.onDateTimeInputFocus(true); ctx_r1.invokeOnFocus($event); return i0__namespace.ɵɵresetView(ctx_r1.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r3); const ctx_r1 = i0__namespace.ɵɵnextContext(); ctx_r1.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r1.invokeOnTouched($event)); });
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r1 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵproperty("minTime", ctx_r1.minTime)("maxTime", ctx_r1.maxTime)("placement", ctx_r1.modal)("displayFormat", ctx_r1.timepattern)("value", ctx_r1.bsTimeValue);
-        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵattribute("aria-label", ctx_r1.displayValue ? "Change time  " + ctx_r1.displayValue : ctx_r1.hint || "Select time");
     } }
     const CURRENT_TIME = 'CURRENT_TIME';
@@ -2752,8 +2779,8 @@
         get nativeDisplayValue() {
             return i1$1.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;
             /**
@@ -2995,13 +3022,13 @@
             }
             this.displayInputElem.value = _.get(this, 'nativeDisplayValue');
         }
-        static { this.ɵfac = function TimeComponent_Factory(t) { return new (t || TimeComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App)); }; }
+        static { this.ɵfac = function TimeComponent_Factory(t) { return new (t || TimeComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.AppDefaults), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: TimeComponent, selectors: [["", "wmTime", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     base.provideAs(TimeComponent, i5.NG_VALUE_ACCESSOR, true),
                     base.provideAs(TimeComponent, i5.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(TimeComponent),
                     { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 7, vars: 16, consts: [["dropdown", "", 2, "display", "inherit", 3, "isOpen", "container", "onShown", "onHidden"], ["focus-target", "", "type", "text", "role", "timer", 1, "form-control", "app-textbox", "display-input", 3, "tabindex", "name", "value", "disabled", "autofocus", "required", "readOnly", "click", "focus", "blur", "change", "keydown"], [1, "input-group-btn", "dropdown-toggle"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "tabindex", "disabled", "click"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], ["class", "dropdown-menu", 3, "click", 4, "dropdownMenu"], [3, "ngIf"], [1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "showMeridian", "readonlyInput", "ngModel", "disabled", "min", "max", "hourStep", "minuteStep", "secondsStep", "mousewheel", "arrowkeys", "showSeconds", "ngModelChange", "isValid"], ["dateTimePicker", "", "mode", "TIME", 3, "minTime", "maxTime", "placement", "displayFormat", "value", "change"], ["tabindex", "1000000", "role", "button", 1, "mobile-input", "mobile-datepicker-container", 3, "click", "focus", "blur"]], template: function TimeComponent_Template(rf, ctx) { if (rf & 1) {
+                ]), i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "div", 0);
                 i0__namespace.ɵɵlistener("onShown", function TimeComponent_Template_div_onShown_0_listener() { return ctx.onShown(); })("onHidden", function TimeComponent_Template_div_onHidden_0_listener() { return ctx.hideTimepickerDropdown(); });
                 i0__namespace.ɵɵelementStart(1, "input", 1);
@@ -3016,7 +3043,7 @@
                 i0__namespace.ɵɵtemplate(6, TimeComponent_ng_template_6_Template, 2, 6, "ng-template", 6);
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("isOpen", ctx.status.isopen)("container", "body");
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵ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__namespace.ɵɵattribute("aria-label", ctx.hint)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-atomic", ctx.isCurrentTime ? "true" : "false");
                 i0__namespace.ɵɵadvance(2);
@@ -3025,7 +3052,7 @@
                 i0__namespace.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
             } }, dependencies: [i2__namespace.NgIf, i4$1__namespace.BsDropdownMenuDirective, i4$1__namespace.BsDropdownDirective, i5__namespace.NgControlStatus, i5__namespace.NgModel, i6__namespace.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TimeComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TimeComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmTime]', providers: [
                         base.provideAs(TimeComponent, i5.NG_VALUE_ACCESSOR, true),
@@ -3033,7 +3060,13 @@
                         base.provideAsWidgetRef(TimeComponent),
                         { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
                     ], template: "    <div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n        <input class=\"form-control app-textbox display-input\" [attr.aria-label]=\"hint\"\n               focus-target\n               [tabindex]=\"tabindex\"\n               [name]=\"name\"\n               type=\"text\"\n               role=\"timer\"\n               [value]=\"displayValue\"\n               [disabled]=\"disabled || readonly || isCurrentTime\"\n               [autofocus]=\"autofocus\"\n               [attr.placeholder]=\"placeholder\"\n               [attr.accesskey]=\"shortcutkey\"\n               [attr.aria-atomic]=\"isCurrentTime ? 'true' : 'false'\"\n               [required]=\"required\"\n               [readOnly]=\"isReadOnly\"\n               (click)=\"toggleDropdown($event, true)\"\n               (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n               (blur)=\"onInputBlur($event)\"\n               (change)=\"onDisplayTimeChange($event)\"\n               (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n        <span class=\"input-group-btn dropdown-toggle\">\n            <button type=\"button\" class=\"btn btn-default btn-date\" [tabindex]=\"tabindex\" [disabled]=\"disabled || readonly || isCurrentTime\" aria-label=\"Select time\" aria-haspopup=\"true\" aria-expanded=\"false\" (click)=\"toggleDropdown($event, false)\"><i aria-hidden=\"true\" class=\"app-icon wm-sl-l sl-time\"></i></button>\n        </span>\n        <div *dropdownMenu class=\"dropdown-menu\" (click)=\"preventTpClose($event)\">\n            <timepicker class=\"model-holder\"\n                        [showMeridian]=\"ismeridian\"\n                        [readonlyInput]=\"isDisabled\"\n                        [(ngModel)]=\"bsTimeValue\"\n                        [disabled]=\"disabled || readonly || isCurrentTime\"\n                        [min]=\"minTime\"\n                        [max]=\"maxTime\"\n                        [hourStep]=\"hourstep\"\n                        [minuteStep]=\"minutestep\"\n                        [secondsStep]=\"secondsstep\"\n                        [mousewheel]=\"true\"\n                        [arrowkeys]=\"true\"\n                        (isValid)=\"isValid($event)\"\n                        [showSeconds]=\"showseconds\" (ngModelChange)=\"onTimeChange($event)\"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"TIME\"\n        [minTime]=\"minTime\"\n        [maxTime]=\"maxTime\"\n        [placement]=\"modal\"\n        [displayFormat]=\"timepattern\"\n        [value]=\"bsTimeValue\"\n        (change)=\"onTimeChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        tabindex=\"1000000\"\n         (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" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.App }]; }, null); })();
+        }], () => [{ type: i0__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.App }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(TimeComponent, { className: "TimeComponent", filePath: "time/time.component.ts", lineNumber: 40 }); })();
 
     const components = [
         DateComponent,
@@ -3055,7 +3088,7 @@
                 base.WmComponentsModule,
                 i4.IMaskModule] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(EpochModule, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(EpochModule, [{
             type: i0.NgModule,
             args: [{
                     imports: [