@wavemaker/app-ng-runtime 11.8.0-rc.5653 → 11.8.0-rc.5659

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-bootstrap/datepicker'), require('ngx-bootstrap/dropdown'), require('ngx-bootstrap/timepicker'), require('@wm/components/base'), require('@wm/core'), require('@wm/components/input'), require('ngx-bootstrap/modal'), require('imask'), require('angular-imask')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'ngx-bootstrap/datepicker', 'ngx-bootstrap/dropdown', 'ngx-bootstrap/timepicker', '@wm/components/base', '@wm/core', '@wm/components/input', 'ngx-bootstrap/modal', 'imask', 'angular-imask'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.epoch = {}), global.ng.core, global.ng.common, global.ng.forms, global.datepicker, global.dropdown, global.timepicker, global.wm.components.base, global.wm.core, global.wm.components.input, global.modal, global.IMask, global.angularIMask));
-})(this, (function (exports, i0, i2, i5, i3, i4$1, i6, base, i1$1, input, i1, IMask, i4) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('ngx-bootstrap/datepicker'), require('ngx-bootstrap/dropdown'), require('ngx-bootstrap/timepicker'), require('@wm/components/base'), require('@wm/core'), require('@wm/components/input'), require('ngx-bootstrap/modal'), require('lodash-es'), require('imask'), require('angular-imask')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'ngx-bootstrap/datepicker', 'ngx-bootstrap/dropdown', 'ngx-bootstrap/timepicker', '@wm/components/base', '@wm/core', '@wm/components/input', 'ngx-bootstrap/modal', 'lodash-es', 'imask', 'angular-imask'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.epoch = {}), global.ng.core, global.ng.common, global.ng.forms, global.datepicker, global.dropdown, global.timepicker, global.wm.components.base, global.wm.core, global.wm.components.input, global.modal, global._, global.IMask, global.angularIMask));
+})(this, (function (exports, i0, i2, i5, i3, i4$1, i6, base, i1$1, input, i1, lodashEs, IMask, i4) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -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) {
@@ -351,7 +351,7 @@
          */
         hightlightToday() {
             const toDay = new Date().getDate().toString();
-            _.filter($(`body>modal-container .date-picker-modal span:contains(${toDay})`)
+            lodashEs.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');
@@ -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: 54 }); })();
     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: 305 }); })();
 
     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': '' };
@@ -729,14 +731,14 @@
                     }
                 };
             }
-            if (!_.isUndefined(this.dateNotInRange) && this.dateNotInRange) {
+            if (!lodashEs.isUndefined(this.dateNotInRange) && this.dateNotInRange) {
                 return {
                     dateNotInRange: {
                         valid: false
                     },
                 };
             }
-            if (!_.isUndefined(this.timeNotInRange) && this.timeNotInRange) {
+            if (!lodashEs.isUndefined(this.timeNotInRange) && this.timeNotInRange) {
                 return {
                     timeNotInRange: {
                         valid: false
@@ -761,7 +763,7 @@
             inputVal = inputVal.trim();
             if (inputVal) {
                 if (pattern === 'timestamp') {
-                    if (!_.isNaN(inputVal) && _.parseInt(inputVal) !== formattedDate) {
+                    if (!lodashEs.isNaN(inputVal) && lodashEs.parseInt(inputVal) !== formattedDate) {
                         this.invalidDateTimeFormat = true;
                         this.validateType = 'incorrectformat';
                         this.invokeOnChange(this.datavalue, undefined, false);
@@ -816,8 +818,8 @@
                 }
                 if (this.excludedates) {
                     let excludeDatesArray;
-                    if (i1$1.isString(this.excludedates)) {
-                        excludeDatesArray = _.split(this.excludedates, ',');
+                    if (lodashEs.isString(this.excludedates)) {
+                        excludeDatesArray = lodashEs.split(this.excludedates, ',');
                     }
                     else {
                         excludeDatesArray = this.excludedates;
@@ -831,8 +833,8 @@
                     }
                 }
                 if (this.excludedays) {
-                    const excludeDaysArray = _.split(this.excludedays, ',');
-                    const day = _.get(dateTimeVal, 'getDay') ? dateTimeVal.getDay() : dateTimeVal;
+                    const excludeDaysArray = lodashEs.split(this.excludedays, ',');
+                    const day = lodashEs.get(dateTimeVal, 'getDay') ? dateTimeVal.getDay() : dateTimeVal;
                     if (excludeDaysArray.indexOf(day.toString()) > -1) {
                         this.dateNotInRange = true;
                         this.validateType = 'excludedays';
@@ -852,10 +854,11 @@
         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' });
+            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) => {
+                lodashEs.filter($(`span:contains(${toDay})`).not('.is-other-month'), (obj) => {
                     if ($(obj).text() === toDay) {
                         $(obj).addClass('current-date text-info');
                     }
@@ -920,7 +923,7 @@
             }
             setTimeout(() => {
                 const newDay = newDate.getDate().toString();
-                _.filter($(`span:contains(${newDay})`).not('.is-other-month'), (obj) => {
+                lodashEs.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' });
@@ -959,10 +962,10 @@
             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 (lodashEs.parseInt(activeMonthOrYear) !== this.activeDate.getFullYear()) {
                     this.loadMonths();
                 }
-                const newDate = new Date(_.parseInt(activeMonthOrYear), this.activeDate.getMonth(), this.activeDate.getDate());
+                const newDate = new Date(lodashEs.parseInt(activeMonthOrYear), this.activeDate.getMonth(), this.activeDate.getDate());
                 this.setActiveMonthFocus(newDate, true);
             }
             else if (datePickerBody.find('table.days').length > 0) {
@@ -1001,7 +1004,7 @@
             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(lodashEs.parseInt(startYear), this.activeDate.getMonth(), this.activeDate.getDate());
                 this.setActiveYearFocus(newDate, true);
             }
             else if (datePickerBody.find('table.days').length > 0) {
@@ -1233,10 +1236,10 @@
             const endYear = datePickerYears.last().text();
             // check for keyboard event
             if (!isMouseEvent) {
-                if (newDate.getFullYear() < _.parseInt(startYear)) {
+                if (newDate.getFullYear() < lodashEs.parseInt(startYear)) {
                     this.goToOtherMonthOryear('previous', 'year');
                 }
-                else if (newDate.getFullYear() > _.parseInt(endYear)) {
+                else if (newDate.getFullYear() > lodashEs.parseInt(endYear)) {
                     this.goToOtherMonthOryear('next', 'year');
                 }
             }
@@ -1318,7 +1321,8 @@
             // 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) => {
+                lodashEs.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);
@@ -1411,12 +1415,12 @@
         updateFormat(pattern) {
             if (pattern === 'datepattern') {
                 this._dateOptions.dateInputFormat = this.datepattern;
-                this.showseconds = _.includes(this.datepattern, 's');
-                this.ismeridian = _.includes(this.datepattern, 'h');
+                this.showseconds = lodashEs.includes(this.datepattern, 's');
+                this.ismeridian = lodashEs.includes(this.datepattern, 'h');
             }
             else if (pattern === 'timepattern') {
-                this.showseconds = _.includes(this.timepattern, 's');
-                this.ismeridian = _.includes(this.timepattern, 'h');
+                this.showseconds = lodashEs.includes(this.timepattern, 's');
+                this.ismeridian = lodashEs.includes(this.timepattern, 'h');
             }
         }
         getMobileInput() {
@@ -1454,15 +1458,15 @@
         }
         getCordovaPluginDatePickerApi() {
             if (i1$1.isIos()) {
-                return _.get(window, 'cordova.wavemaker.datePicker.selectDate');
+                return lodashEs.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);
@@ -1473,8 +1477,8 @@
                 }
                 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>`);
@@ -1494,8 +1498,8 @@
                 }
                 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>`);
@@ -1553,14 +1557,15 @@
             }
             else if (key === 'excludedates' || key === 'excludedays') {
                 if (this.excludedays) {
-                    this.excludedDaysToDisable = _.split(this.excludedays, ',').map((day) => {
+                    this.excludedDaysToDisable = lodashEs.split(this.excludedays, ',').map((day) => {
                         return +day;
                     });
                 }
                 if (this.excludedates) {
                     this.excludedDatesToDisable = this.excludedates;
-                    if (i1$1.isString(this.excludedates)) {
-                        this.excludedDatesToDisable = _.split(this.excludedates, ',');
+                    if (lodashEs.isString(this.excludedates)) {
+                        // @ts-ignore
+                        this.excludedDatesToDisable = lodashEs.split(this.excludedates, ',');
                     }
                     this.excludedDatesToDisable = this.excludedDatesToDisable.map(d => i1$1.getDateObj(d));
                 }
@@ -1631,9 +1636,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: [{
@@ -1665,7 +1675,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 }],
@@ -1687,7 +1697,13 @@
         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();
         };
@@ -1789,19 +1805,19 @@
     }
 
     const _c0$2 = ["dateInput"];
-    const _c1 = ["wmDate", ""];
+    const _c1$2 = ["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.isCurrentDate) && 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");
     } }
@@ -1820,6 +1836,9 @@
             return this._dateOptions.dateInputFormat || 'yyyy-MM-dd';
         }
         get displayValue() {
+            if (this.showdateformatasplaceholder && this.imask?.maskRef && this.maskDateInputFormat) {
+                return i1$1.getFormattedDate(this.datePipe, this.bsDataValue, this.maskDateInputFormat, this.timeZone, null, this.isCurrentDate, this) || '';
+            }
             return i1$1.getFormattedDate(this.datePipe, this.bsDataValue, this.dateInputFormat, this.timeZone, null, this.isCurrentDate, this) || '';
         }
         get nativeDisplayValue() {
@@ -1848,8 +1867,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;
@@ -1905,7 +1924,7 @@
         }
         onDatePickerOpen() {
             this.isOpen = true;
-            this.bsDataValue ? this.activeDate = this.bsDataValue : this.activeDate = new Date();
+            this.activeDate = this.bsDataValue ? this.bsDataValue : (this.timeZone ? i1$1.getMomentLocaleObject(this.timeZone) : new Date());
             if (!this.bsDataValue) {
                 this.hightlightToday(this.activeDate);
             }
@@ -1923,6 +1942,17 @@
             this.addDatepickerKeyboardEvents(this, false);
             i1$1.adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
             i1$1.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 = i1$1.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();
@@ -1946,7 +1976,7 @@
         }
         // change and blur events are added from the template
         handleEvent(node, eventName, callback, locals) {
-            if (!_.includes(['blur', 'focus', 'change', 'click'], eventName)) {
+            if (!lodashEs.includes(['blur', 'focus', 'change', 'click'], eventName)) {
                 super.handleEvent(node, eventName, callback, locals);
             }
         }
@@ -1995,7 +2025,7 @@
                     const formattedDate = i1$1.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 (!lodashEs.isNaN(inputVal) && lodashEs.parseInt(inputVal) !== formattedDate) {
                             this.invalidDateTimeFormat = true;
                             this.invokeOnChange(this.datavalue, event, false);
                         }
@@ -2042,6 +2072,9 @@
                 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();
                 }
             }
@@ -2049,7 +2082,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);
@@ -2061,16 +2094,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$2, 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) {
@@ -2086,20 +2120,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 || isCurrentDate) && showDatePickerModal(bsDataValue)\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event);\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : hint || 'Choose Date'\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }]; }, { bsDatePickerDirective: [{
+                    ], 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__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: 44 }); })();
 
     const dateTimeProps = new Map([
         ['autofocus', base.PROP_BOOLEAN],
@@ -2145,30 +2185,34 @@
     };
 
     const _c0$1 = ["wmDateTime", ""];
+    const _c1$1 = () => ({ standalone: true });
     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("ngModelOptions", i0__namespace.ɵɵpureFunction0(12, _c1$1))("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.isCurrentDate) && ctx_r10.showDatePickerModal(ctx_r10.bsDateValue)); })("focus", function DatetimeComponent_ng_template_11_Template_div_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ctx_r11 = i0__namespace.ɵɵnextContext(); ctx_r11.onDateTimeInputFocus(true); return i0__namespace.ɵɵresetView(ctx_r11.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r9); const ctx_r12 = i0__namespace.ɵɵnextContext(); ctx_r12.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r12.invokeOnTouched($event)); });
+        i0__namespace.ɵɵ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");
     } }
@@ -2217,8 +2261,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;
@@ -2235,7 +2279,7 @@
              * 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 = lodashEs.debounce(this.invokeOnChange, 10);
             this.registerDestroyListener(() => this.clearTimeInterval());
             base.styler(this.nativeElement, this);
             this.app = app;
@@ -2316,7 +2360,7 @@
         onTimepickerOpen() {
             // adding class for time widget dropdown menu
             const tpElements = document.querySelectorAll('timepicker');
-            _.forEach(tpElements, (element) => {
+            lodashEs.forEach(tpElements, (element) => {
                 i1$1.addClass(element.parentElement, 'app-datetime', true);
             });
             this.bsDatePickerDirective.hide();
@@ -2515,7 +2559,7 @@
                     const formattedDate = i1$1.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 (!lodashEs.isNaN(inputVal) && lodashEs.parseInt(inputVal) !== formattedDate) {
                             this.invalidDateTimeFormat = true;
                             this.invokeOnChange(this.datavalue, event, false);
                         }
@@ -2552,7 +2596,7 @@
         }
         // change and blur events are added from the template
         handleEvent(node, eventName, callback, locals) {
-            if (!_.includes(['blur', 'focus', 'change', 'click'], eventName)) {
+            if (!lodashEs.includes(['blur', 'focus', 'change', 'click'], eventName)) {
                 super.handleEvent(node, eventName, callback, locals);
             }
         }
@@ -2562,7 +2606,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) {
@@ -2573,29 +2617,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", "ngModelOptions", "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.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 2, 13, "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);
@@ -2611,18 +2656,24 @@
                 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),
                         base.provideAs(DatetimeComponent, i5.NG_VALIDATORS, true),
                         base.provideAsWidgetRef(DatetimeComponent),
                         { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
-                    ], template: "    <div dropdown\n        [isOpen]=\"isTimeOpen\"\n        autoClose=\"false\"\n        [container]=\"'body'\"\n        (onShown)=\"onTimepickerOpen()\"\n        style=\"display: inherit;\">\n        <input class=\"form-control app-textbox display-input\"\n            [attr.aria-label]=\"hint\"\n            focus-target\n            [name]=\"name\"\n            [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            type=\"text\"\n            [value]=\"displayValue\"\n            (click)=\"toggleDpDropdown($event, true)\"\n            (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n            (blur)=\"onInputBlur($event)\"\n            (change)=\"onDateChange($event)\"\n            [autofocus]=\"autofocus\"\n            [disabled]=\"disabled || readonly || isCurrentDate\"\n            [required]=\"required\"\n            [readOnly]=\"isReadOnly\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.accesskey]=\"shortcutkey\"\n            (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n\n        <span class=\"input-group-btn\">\n            <button type=\"button\"\n                class=\"btn btn-default btn-date\"\n                [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n                [attr.aria-hidden]=\"!!loadNativeDateInput\"\n                [disabled]=\"disabled || readonly || isCurrentDate\"\n                [attr.aria-label]=\"displayValue ? 'Change Date ' + displayValue : 'Choose date by pressing enter'\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                (click)=\"toggleDpDropdown($event, false)\">\n                <i aria-hidden=\"true\"\n                    class=\"app-icon wm-sl-l sl-calendar\"></i>\n            </button>\n            <button type=\"button\"\n                class=\"btn btn-default btn-time\"\n                [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n                [attr.aria-hidden]=\"!!loadNativeDateInput\"\n                [disabled]=\"disabled || readonly || isCurrentDate\"\n                aria-label=\"Select time\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n                (click)=\"toggleTimePicker(!isTimeOpen, $event)\">\n                <i aria-hidden=\"true\"\n                    class=\"app-icon wm-sl-l sl-time\"></i>\n            </button>\n        </span>\n        <div style=\"width: 0;display: inline-block;\">\n        <input class=\"model-holder\"\n            aria-label=\"datepicker dropdownmenu\"\n            aria-controls=\"date\"\n            focus-target\n            [tabindex]=\"-1\"\n            [attr.aria-hidden]=\"!!loadNativeDateInput\"\n            [container]=\"containerTarget || '.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__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.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                        [ngModelOptions]=\"{standalone: true}\"\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__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: 56 }); })();
 
     const timeProps = new Map([
         ['autofocus', base.PROP_BOOLEAN],
@@ -2656,30 +2707,34 @@
     };
 
     const _c0 = ["wmTime", ""];
+    const _c1 = () => ({ standalone: true });
     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("ngModelOptions", i0__namespace.ɵɵpureFunction0(13, _c1))("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.isCurrentTime) && ctx_r9.showDatePickerModal(ctx_r9.bsTimeValue)); })("focus", function TimeComponent_ng_template_6_Template_div_focus_1_listener($event) { i0__namespace.ɵɵrestoreView(_r8); const ctx_r10 = i0__namespace.ɵɵnextContext(); ctx_r10.onDateTimeInputFocus(true); ctx_r10.invokeOnFocus($event); return i0__namespace.ɵɵresetView(ctx_r10.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0__namespace.ɵɵrestoreView(_r8); const ctx_r11 = i0__namespace.ɵɵnextContext(); ctx_r11.onDateTimeInputBlur(); return i0__namespace.ɵɵresetView(ctx_r11.invokeOnTouched($event)); });
+        i0__namespace.ɵɵ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';
@@ -2728,8 +2783,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;
             /**
@@ -2927,7 +2982,7 @@
         }
         // 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 (!lodashEs.includes(['blur', 'focus', 'change', 'click'], eventName)) {
                 super.handleEvent(node, eventName, eventCallback, locals);
             }
         }
@@ -2958,7 +3013,7 @@
          */
         onShown() {
             const tpElements = document.querySelectorAll('timepicker');
-            _.forEach(tpElements, element => {
+            lodashEs.forEach(tpElements, element => {
                 i1$1.addClass(element.parentElement, 'app-datetime', true);
             });
             this.focusTimePickerPopover(this);
@@ -2969,15 +3024,15 @@
             if (!this.displayInputElem) {
                 this.displayInputElem = this.getMobileInput();
             }
-            this.displayInputElem.value = _.get(this, 'nativeDisplayValue');
+            this.displayInputElem.value = lodashEs.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", "ngModelOptions", "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);
@@ -2987,12 +3042,12 @@
                 i0__namespace.ɵɵlistener("click", function TimeComponent_Template_button_click_3_listener($event) { return ctx.toggleDropdown($event, false); });
                 i0__namespace.ɵɵelement(4, "i", 4);
                 i0__namespace.ɵɵelementEnd()();
-                i0__namespace.ɵɵtemplate(5, TimeComponent_div_5_Template, 2, 12, "div", 5);
+                i0__namespace.ɵɵtemplate(5, TimeComponent_div_5_Template, 2, 14, "div", 5);
                 i0__namespace.ɵɵelementEnd();
                 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);
@@ -3001,15 +3056,21 @@
                 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),
                         base.provideAs(TimeComponent, i5.NG_VALIDATORS, true),
                         base.provideAsWidgetRef(TimeComponent),
                         { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
-                    ], template: "    <div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n        <input class=\"form-control app-textbox display-input\" [attr.aria-label]=\"hint\"\n               focus-target\n               [tabindex]=\"tabindex\"\n               [name]=\"name\"\n               type=\"text\"\n               role=\"timer\"\n               [value]=\"displayValue\"\n               [disabled]=\"disabled || readonly || isCurrentTime\"\n               [autofocus]=\"autofocus\"\n               [attr.placeholder]=\"placeholder\"\n               [attr.accesskey]=\"shortcutkey\"\n               [attr.aria-atomic]=\"isCurrentTime ? 'true' : 'false'\"\n               [required]=\"required\"\n               [readOnly]=\"isReadOnly\"\n               (click)=\"toggleDropdown($event, true)\"\n               (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n               (blur)=\"onInputBlur($event)\"\n               (change)=\"onDisplayTimeChange($event)\"\n               (keydown)=\"this._triggeredByUser = true; onDisplayKeydown($event)\">\n        <span class=\"input-group-btn dropdown-toggle\">\n            <button type=\"button\" class=\"btn btn-default btn-date\" [tabindex]=\"tabindex\" [disabled]=\"disabled || readonly || isCurrentTime\" aria-label=\"Select time\" aria-haspopup=\"true\" aria-expanded=\"false\" (click)=\"toggleDropdown($event, false)\"><i aria-hidden=\"true\" class=\"app-icon wm-sl-l sl-time\"></i></button>\n        </span>\n        <div *dropdownMenu class=\"dropdown-menu\" (click)=\"preventTpClose($event)\">\n            <timepicker class=\"model-holder\"\n                        [showMeridian]=\"ismeridian\"\n                        [readonlyInput]=\"isDisabled\"\n                        [(ngModel)]=\"bsTimeValue\"\n                        [disabled]=\"disabled || readonly || isCurrentTime\"\n                        [min]=\"minTime\"\n                        [max]=\"maxTime\"\n                        [hourStep]=\"hourstep\"\n                        [minuteStep]=\"minutestep\"\n                        [secondsStep]=\"secondsstep\"\n                        [mousewheel]=\"true\"\n                        [arrowkeys]=\"true\"\n                        (isValid)=\"isValid($event)\"\n                        [showSeconds]=\"showseconds\" (ngModelChange)=\"onTimeChange($event)\"></timepicker>\n        </div>\n    </div>\n<ng-template [ngIf]=\"loadNativeDateInput\">\n    <wm-datetimepicker\n        dateTimePicker\n        mode=\"TIME\"\n        [minTime]=\"minTime\"\n        [maxTime]=\"maxTime\"\n        [placement]=\"modal\"\n        [displayFormat]=\"timepattern\"\n        [value]=\"bsTimeValue\"\n        (change)=\"onTimeChange($event)\">\n    </wm-datetimepicker>\n    <div class=\"mobile-input mobile-datepicker-container\"\n        tabindex=\"1000000\"\n         (click)=\"!(disabled || readonly || isCurrentTime) && showDatePickerModal(bsTimeValue)\"\n         [attr.aria-label]=\"displayValue ? 'Change time  ' + displayValue : hint || 'Select time'\"\n        (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event); assignModel()\"\n        (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n         role=\"button\">\n    </div>\n</ng-template>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i1$1__namespace.AppDefaults }, { type: i1$1__namespace.App }]; }, null); })();
+                    ], 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                        [ngModelOptions]=\"{standalone: true}\"\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__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: 42 }); })();
 
     const components = [
         DateComponent,
@@ -3031,7 +3092,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: [