@wavemaker/app-ng-runtime 11.10.3-next.25128 → 11.10.3-rc.6079

package/components/input/epoch/bundles/index.umd.js

@@ -2,7 +2,7 @@
     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, common, i4, i2, i3$1, i5, base, i1$1, input, i1, lodashEs, IMask, i3) { 'use strict';
+})(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);
@@ -22,17 +22,18 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
-    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
     var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
-    var i3$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i3$1);
     var i5__namespace = /*#__PURE__*/_interopNamespaceDefault(i5);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var i4$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i4$1);
+    var i6__namespace = /*#__PURE__*/_interopNamespaceDefault(i6);
     var i1$1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1$1);
     var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
-    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
 
     const _c0$4 = ["*"];
-    function PickerComponent_For_7_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵelementStart(0, "div", 3);
+    function PickerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelementStart(0, "div", 5);
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
@@ -103,26 +104,26 @@
             this.pickerAnimator = new PickerAnimator(this);
         }
         static { this.ɵfac = function PickerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PickerComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
-        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: PickerComponent, selectors: [["wm-picker"]], inputs: { selectedValue: "selectedValue", options: "options" }, outputs: { change: "change" }, decls: 13, vars: 0, consts: [[1, "app-picker"], [1, "app-picker-option-container"], [1, "app-picker-option", "app-picker-empty-option"], [1, "app-picker-option"], [1, "app-picker-ruler"]], template: function PickerComponent_Template(rf, ctx) { if (rf & 1) {
+        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: PickerComponent, selectors: [["wm-picker"]], inputs: { selectedValue: "selectedValue", options: "options" }, outputs: { change: "change" }, decls: 12, vars: 1, consts: [[1, "app-picker"], [1, "app-picker-option-container"], [1, "app-picker-option", "app-picker-empty-option"], ["class", "app-picker-option", 4, "ngFor", "ngForOf"], [1, "app-picker-ruler"], [1, "app-picker-option"]], template: function PickerComponent_Template(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
                 i0__namespace.ɵɵtext(3, "E");
                 i0__namespace.ɵɵelementEnd();
                 i0__namespace.ɵɵelementStart(4, "div", 2);
                 i0__namespace.ɵɵtext(5, "E");
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵrepeaterCreate(6, PickerComponent_For_7_Template, 2, 1, "div", 3, i0__namespace.ɵɵrepeaterTrackByIdentity);
-                i0__namespace.ɵɵelementStart(8, "div", 2);
-                i0__namespace.ɵɵtext(9, "E");
+                i0__namespace.ɵɵtemplate(6, PickerComponent_div_6_Template, 2, 1, "div", 3);
+                i0__namespace.ɵɵelementStart(7, "div", 2);
+                i0__namespace.ɵɵtext(8, "E");
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(10, "div", 2);
-                i0__namespace.ɵɵtext(11, "E");
+                i0__namespace.ɵɵelementStart(9, "div", 2);
+                i0__namespace.ɵɵtext(10, "E");
                 i0__namespace.ɵɵelementEnd()();
-                i0__namespace.ɵɵelement(12, "div", 4);
+                i0__namespace.ɵɵelement(11, "div", 4);
                 i0__namespace.ɵɵelementEnd();
             } if (rf & 2) {
                 i0__namespace.ɵɵadvance(6);
-                i0__namespace.ɵɵrepeater(ctx.options);
-            } }, encapsulation: 2 }); }
+                i0__namespace.ɵɵproperty("ngForOf", ctx.options);
+            } }, dependencies: [i2__namespace.NgForOf], encapsulation: 2 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PickerComponent, [{
             type: i0.Component,
@@ -130,20 +131,18 @@
                     selector: 'wm-picker',
                     template: `
         <div class="app-picker">
-          <div class="app-picker-option-container">
-            <div class="app-picker-option app-picker-empty-option">E</div>
-            <div class="app-picker-option app-picker-empty-option">E</div>
-            @for (option of options; track option; let i = $index) {
-              <div class="app-picker-option">
-                {{option.label}}
-              </div>
-            }
-            <div class="app-picker-option app-picker-empty-option">E</div>
-            <div class="app-picker-option app-picker-empty-option">E</div>
-          </div>
-          <div class="app-picker-ruler"></div>
+            <div class="app-picker-option-container">
+                <div class="app-picker-option app-picker-empty-option">E</div>
+                <div class="app-picker-option app-picker-empty-option">E</div>
+                <div *ngFor="let option of options; index as i;" class="app-picker-option">
+                    {{option.label}}
+                </div>
+                <div class="app-picker-option app-picker-empty-option">E</div>
+                <div class="app-picker-option app-picker-empty-option">E</div>
+            </div>
+            <div class="app-picker-ruler"></div>
         </div>
-        `
+    `
                 }]
         }], () => [{ type: i0__namespace.Injector }], { change: [{
                 type: i0.Output
@@ -152,7 +151,7 @@
             }], options: [{
                 type: i0.Input
             }] }); })();
-    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(PickerComponent, { className: "PickerComponent", filePath: "picker/picker.component.ts", lineNumber: 36 }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(PickerComponent, { className: "PickerComponent", filePath: "picker/picker.component.ts", lineNumber: 34 }); })();
     class PickerAnimator {
         constructor(picker) {
             this.picker = picker;
@@ -209,28 +208,28 @@
     }
 
     const _c0$3 = ["datetimepickerTemplate"];
-    function DateTimePickerComponent_ng_template_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    function DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template(rf, ctx) { if (rf & 1) {
         const _r2 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "bs-datepicker-inline", 11);
-        i0__namespace.ɵɵlistener("bsValueChange", function DateTimePickerComponent_ng_template_0_Conditional_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.ɵɵ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_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    function DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template(rf, ctx) { if (rf & 1) {
         const _r4 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "wm-timepicker", 12);
-        i0__namespace.ɵɵlistener("change", function DateTimePickerComponent_ng_template_0_Conditional_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.ɵɵ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_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_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    function DateTimePickerComponent_ng_template_0_button_8_Template(rf, ctx) { if (rf & 1) {
         const _r5 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "button", 13);
-        i0__namespace.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_Conditional_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.ɵɵ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) {
@@ -238,10 +237,10 @@
         i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_TODAY_DATE || "Today");
     } }
-    function DateTimePickerComponent_ng_template_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    function DateTimePickerComponent_ng_template_0_button_9_Template(rf, ctx) { if (rf & 1) {
         const _r6 = i0__namespace.ɵɵgetCurrentView();
         i0__namespace.ɵɵelementStart(0, "button", 14);
-        i0__namespace.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_Conditional_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.ɵɵ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) {
@@ -253,12 +252,12 @@
         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_Conditional_3_Template, 1, 3, "bs-datepicker-inline", 4)(4, DateTimePickerComponent_ng_template_0_Conditional_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_Conditional_8_Template, 2, 1, "button", 8)(9, DateTimePickerComponent_ng_template_0_Conditional_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(_r1); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.clear()); });
         i0__namespace.ɵɵtext(11);
@@ -266,15 +265,15 @@
     } if (rf & 2) {
         const ctx_r2 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵadvance(3);
-        i0__namespace.ɵɵconditional(ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE" ? 3 : -1);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME" ? 4 : -1);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
         i0__namespace.ɵɵadvance(2);
         i0__namespace.ɵɵtextInterpolate1(" ", ctx_r2.getDateLabel(), " ");
         i0__namespace.ɵɵadvance(2);
-        i0__namespace.ɵɵconditional(ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE" ? 8 : -1);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
         i0__namespace.ɵɵadvance();
-        i0__namespace.ɵɵconditional(ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME" ? 9 : -1);
+        i0__namespace.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
         i0__namespace.ɵɵadvance(2);
         i0__namespace.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_CLEAR_DATE || "Clear");
     } }
@@ -451,9 +450,9 @@
             } if (rf & 2) {
                 let _t;
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.datetimepickerTemplate = _t.first);
-            } }, inputs: { mode: "mode", placement: "placement", _bsDatepickerConfig: [0, "config", "_bsDatepickerConfig"], minTime: "minTime", maxTime: "maxTime", _displayFormat: "_displayFormat", excludedDatesToDisable: "excludedDatesToDisable", value: "value", bsDatepickerConfig: [0, "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"], [3, "value", "min", "max"], [1, "text-primary", "date-picker-value"], [1, "modal-footer"], [1, "btn", "btn-secondary", "today-btn"], [1, "btn", "btn-primary", "pull-right", "ok-btn"], [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) {
+            } }, inputs: { mode: "mode", placement: "placement", _bsDatepickerConfig: [0, "config", "_bsDatepickerConfig"], minTime: "minTime", maxTime: "maxTime", _displayFormat: "_displayFormat", excludedDatesToDisable: "excludedDatesToDisable", value: "value", bsDatepickerConfig: [0, "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: () => [i2__namespace.BsDatepickerDirective, i2__namespace.BsDatepickerInlineDirective, TimePickerComponent], encapsulation: 2 }); }
+            } }, dependencies: () => [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInlineDirective, TimePickerComponent], encapsulation: 2 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DateTimePickerComponent, [{
             type: i0.Component,
@@ -461,49 +460,43 @@
                     selector: 'wm-datetimepicker',
                     template: `
     <ng-template #datetimepickerTemplate>
-      <div class="app-datetime-picker">
-        <div class="modal-body">
-          <div class="mobile-datetime-picker-options">
-    
-          </div>
-          @if (mode === 'DATE_TIME' || mode === 'DATE') {
-            <bs-datepicker-inline
-              [bsConfig]="bsDatepickerConfig"
-              [datesDisabled]="excludedDatesToDisable"
-              bsDatepicker
-              [bsValue]="changedValue"
-              (bsValueChange)="onDateUpdate($event)"
-              >
-            </bs-datepicker-inline>
-          }
-          @if (mode === 'DATE_TIME' || mode === 'TIME') {
-            <wm-timepicker
-              [value]="changedValue"
-              [min]="minTime"
-              [max]="maxTime"
-              (change)="onTimeUpdate($event)"
-            ></wm-timepicker>
-          }
-          <span class="text-primary date-picker-value">
-            {{getDateLabel()}}
-          </span>
-        </div>
-        <div class="modal-footer">
-          @if (mode === 'DATE_TIME' || mode === 'DATE') {
-            <button
-              class="btn btn-secondary today-btn"
-            (click)="setToday()">{{appLocale.LABEL_TODAY_DATE || "Today" }}</button>
-          }
-          @if (mode === 'DATE_TIME' || mode === 'TIME') {
-            <button
-              class="btn btn-primary pull-right ok-btn"
-            (click)="onOkClick()">{{appLocale.LABEL_OK || "Ok" }}</button>
-          }
-          <button
-            class="btn btn-secondary pull-right clear-btn"
-          (click)="clear()">{{appLocale.LABEL_CLEAR_DATE || "Clear" }}</button>
+        <div class="app-datetime-picker">
+            <div class="modal-body">
+                <div class="mobile-datetime-picker-options">
+
+                </div>
+                <bs-datepicker-inline
+                    [bsConfig]="bsDatepickerConfig"
+                    [datesDisabled]="excludedDatesToDisable"
+                    bsDatepicker
+                    [bsValue]="changedValue"
+                    (bsValueChange)="onDateUpdate($event)"
+                    *ngIf="mode === 'DATE_TIME' || mode === 'DATE'">
+                </bs-datepicker-inline>
+                <wm-timepicker
+                    [value]="changedValue"
+                    [min]="minTime"
+                    [max]="maxTime"
+                    (change)="onTimeUpdate($event)"
+                    *ngIf="mode === 'DATE_TIME' || mode === 'TIME'"></wm-timepicker>
+                <span class="text-primary date-picker-value">
+                    {{getDateLabel()}}
+                </span>
+            </div>
+            <div class="modal-footer">
+                <button
+                    *ngIf="mode === 'DATE_TIME' || mode === 'DATE'"
+                    class="btn btn-secondary today-btn"
+                    (click)="setToday()">{{appLocale.LABEL_TODAY_DATE || "Today" }}</button>
+                <button
+                    class="btn btn-primary pull-right ok-btn"
+                    *ngIf="mode === 'DATE_TIME' || mode === 'TIME'"
+                    (click)="onOkClick()">{{appLocale.LABEL_OK || "Ok" }}</button>
+                <button
+                    class="btn btn-secondary pull-right clear-btn"
+                    (click)="clear()">{{appLocale.LABEL_CLEAR_DATE || "Clear" }}</button>
+            </div>
         </div>
-      </div>
     </ng-template>
     `
                 }]
@@ -537,7 +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: 60 }); })();
+    (() => { (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;
@@ -661,7 +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: 311 }); })();
+    (() => { (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'];
@@ -673,8 +666,8 @@
     };
     // Providing meridians to the timepicker baesd on selected locale
     function getTimepickerConfig(i18nService) {
-        return Object.assign(new i5.TimepickerConfig(), {
-            meridians: common.getLocaleDayPeriods(i18nService.getSelectedLocale(), common.FormStyle.Format, common.TranslationWidth.Abbreviated)
+        return Object.assign(new i6.TimepickerConfig(), {
+            meridians: i2.getLocaleDayPeriods(i18nService.getSelectedLocale(), i2.FormStyle.Format, i2.TranslationWidth.Abbreviated)
         });
     }
     class BaseDateTimeComponent extends input.BaseFormCustomComponent {
@@ -687,14 +680,14 @@
             /**
              * This is an internal property used to map the containerClass, showWeekNumbers etc., to the bsDatepicker
              */
-            this._dateOptions = new i2.BsDatepickerConfig();
+            this._dateOptions = new i3.BsDatepickerConfig();
             this.i18nService = this.inj.get(i1$1.AbstractI18nService);
             this.invokeEventCallback('beforeload');
             this.datePipe = this.inj.get(base.ToDatePipe);
             this.selectedLocale = this.i18nService.getSelectedLocale();
             this._dateOptions.todayPosition = 'left';
             this._dateOptions.clearPosition = 'right';
-            this.meridians = common.getLocaleDayPeriods(this.selectedLocale, common.FormStyle.Format, common.TranslationWidth.Abbreviated);
+            this.meridians = i2.getLocaleDayPeriods(this.selectedLocale, i2.FormStyle.Format, i2.TranslationWidth.Abbreviated);
             this.loadNativeDateInput = i1$1.isMobile() && !this.showcustompicker;
             this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe("locale-changed", (locale) => {
                 this.datePipe.datePipe.locale = locale.angular;
@@ -1638,8 +1631,8 @@
         }
         static { this.ɵfac = function BaseDateTimeComponent_Factory(__ngFactoryType__) { i0__namespace.ɵɵinvalidFactory(); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: BaseDateTimeComponent, viewQuery: function BaseDateTimeComponent_Query(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵviewQuery(i3$1.BsDropdownDirective, 5);
-                i0__namespace.ɵɵviewQuery(i5.TimepickerComponent, 5);
+                i0__namespace.ɵɵviewQuery(i4$1.BsDropdownDirective, 5);
+                i0__namespace.ɵɵviewQuery(i6.TimepickerComponent, 5);
                 i0__namespace.ɵɵviewQuery(DateTimePickerComponent, 5);
             } if (rf & 2) {
                 let _t;
@@ -1657,10 +1650,10 @@
                     type: i0.Optional
                 }] }], { bsDropdown: [{
                 type: i0.ViewChild,
-                args: [i3$1.BsDropdownDirective]
+                args: [i4$1.BsDropdownDirective]
             }], bsTimePicker: [{
                 type: i0.ViewChild,
-                args: [i5.TimepickerComponent]
+                args: [i6.TimepickerComponent]
             }], datetimepickerComponent: [{
                 type: i0.ViewChild,
                 args: [DateTimePickerComponent]
@@ -1820,13 +1813,13 @@
 
     const _c0$2 = ["dateInput"];
     const _c1$2 = ["wmDate", ""];
-    function DateComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    function DateComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
         const _r2 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 8);
-        i0__namespace.ɵɵlistener("change", function DateComponent_Conditional_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.ɵɵelementStart(0, "wm-datetimepicker", 9);
+        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", 9);
-        i0__namespace.ɵɵlistener("click", function DateComponent_Conditional_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_Conditional_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_Conditional_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.ɵɵelementStart(1, "div", 10);
+        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();
@@ -2108,17 +2101,17 @@
         }
         static { this.ɵfac = function DateComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(i2.BsDatepickerDirective, 5);
-                i0__namespace.ɵɵviewQuery(_c0$2, 5, i3.IMaskDirective);
+                i0__namespace.ɵɵviewQuery(i3.BsDatepickerDirective, 5);
+                i0__namespace.ɵɵviewQuery(_c0$2, 5, i4.IMaskDirective);
             } if (rf & 2) {
                 let _t;
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.bsDatePickerDirective = _t.first);
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.imask = _t.first);
             } }, features: [i0__namespace.ɵɵProvidersFeature([
-                    base.provideAs(DateComponent, i4.NG_VALUE_ACCESSOR, true),
-                    base.provideAs(DateComponent, i4.NG_VALIDATORS, true),
+                    base.provideAs(DateComponent, i5.NG_VALUE_ACCESSOR, true),
+                    base.provideAs(DateComponent, i5.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(DateComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 9, vars: 28, 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", 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"], ["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) {
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 9, vars: 28, 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", 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)); });
@@ -2130,7 +2123,7 @@
                 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_Conditional_8_Template, 2, 8);
+                i0__namespace.ɵɵtemplate(8, DateComponent_ng_template_8_Template, 2, 8, "ng-template", 8);
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("name", ctx.name)("imask", ctx.mask)("unmask", true)("tabindex", ctx.loadNativeDateInput ? "-1" : ctx.tabindex)("value", ctx.displayValue)("disabled", ctx.disabled || ctx.readonly)("autofocus", ctx.autofocus)("required", ctx.required)("readOnly", ctx.isReadOnly);
                 i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
@@ -2141,16 +2134,16 @@
                 i0__namespace.ɵɵproperty("tabindex", -1)("container", ctx.containerTarget || ".wm-app")("bsConfig", ctx._dateOptions)("isOpen", ctx.isOpen)("daysDisabled", ctx.excludedDaysToDisable)("datesDisabled", ctx.excludedDatesToDisable)("isDisabled", ctx.disabled || ctx.readonly)("bsValue", ctx.bsDataValue);
                 i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
                 i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵconditional(ctx.loadNativeDateInput ? 8 : -1);
-            } }, dependencies: [i2__namespace.BsDatepickerDirective, i2__namespace.BsDatepickerInputDirective, i3__namespace.IMaskDirective, DateTimePickerComponent], encapsulation: 2 }); }
+                i0__namespace.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
+            } }, dependencies: [i2__namespace.NgIf, i3__namespace.BsDatepickerDirective, i3__namespace.BsDatepickerInputDirective, i4__namespace.IMaskDirective, DateTimePickerComponent], encapsulation: 2 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DateComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmDate]', providers: [
-                        base.provideAs(DateComponent, i4.NG_VALUE_ACCESSOR, true),
-                        base.provideAs(DateComponent, i4.NG_VALIDATORS, true),
+                        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]=\"arialabel\"\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    [attr.aria-expanded]=\"isOpen\"\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@if (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 : arialabel || 'Choose Date'\"\n    role=\"button\">\n  </div>\n}\n" }]
+                    ], 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]=\"arialabel\"\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                [attr.aria-expanded]=\"isOpen\"\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 : arialabel || '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']
@@ -2158,10 +2151,10 @@
                     type: i0.Optional
                 }] }], { bsDatePickerDirective: [{
                 type: i0.ViewChild,
-                args: [i2.BsDatepickerDirective]
+                args: [i3.BsDatepickerDirective]
             }], imask: [{
                 type: i0.ViewChild,
-                args: ['dateInput', { read: i3.IMaskDirective }]
+                args: ['dateInput', { read: i4.IMaskDirective }]
             }] }); })();
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(DateComponent, { className: "DateComponent", filePath: "date/date.component.ts", lineNumber: 44 }); })();
 
@@ -2213,9 +2206,9 @@
     const _c1$1 = () => ({ standalone: true });
     function DatetimeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
         const _r2 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "div", 11);
+        i0__namespace.ɵɵelementStart(0, "div", 12);
         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", 12);
+        i0__namespace.ɵɵelementStart(1, "timepicker", 13);
         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()();
@@ -2226,13 +2219,13 @@
         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_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    function DatetimeComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
         const _r4 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 13);
-        i0__namespace.ɵɵlistener("change", function DatetimeComponent_Conditional_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.ɵɵelementStart(0, "wm-datetimepicker", 14);
+        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", 14);
-        i0__namespace.ɵɵlistener("click", function DatetimeComponent_Conditional_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_Conditional_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_Conditional_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.ɵɵelementStart(1, "div", 15);
+        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();
@@ -2636,16 +2629,16 @@
         }
         static { this.ɵfac = function DatetimeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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(i2.BsDatepickerDirective, 5);
+                i0__namespace.ɵɵviewQuery(i3.BsDatepickerDirective, 5);
             } if (rf & 2) {
                 let _t;
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.bsDatePickerDirective = _t.first);
             } }, features: [i0__namespace.ɵɵProvidersFeature([
-                    base.provideAs(DatetimeComponent, i4.NG_VALUE_ACCESSOR, true),
-                    base.provideAs(DatetimeComponent, i4.NG_VALIDATORS, true),
+                    base.provideAs(DatetimeComponent, i5.NG_VALUE_ACCESSOR, true),
+                    base.provideAs(DatetimeComponent, i5.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(DatetimeComponent),
-                    { provide: i5.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$1, decls: 12, vars: 31, 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", 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"], ["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) {
+                    { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$1, decls: 12, vars: 31, 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", 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()); });
@@ -2665,7 +2658,7 @@
                 i0__namespace.ɵɵelementEnd()();
                 i0__namespace.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 2, 13, "div", 10);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵtemplate(11, DatetimeComponent_Conditional_11_Template, 2, 8);
+                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();
@@ -2681,17 +2674,17 @@
                 i0__namespace.ɵɵproperty("tabindex", -1)("container", ctx.containerTarget || ".wm-app")("bsConfig", ctx._dateOptions)("isOpen", ctx.isDateOpen)("daysDisabled", ctx.excludedDaysToDisable)("datesDisabled", ctx.excludedDatesToDisable)("isDisabled", ctx.disabled || ctx.readonly || ctx.isCurrentDate)("bsValue", ctx.bsDateValue);
                 i0__namespace.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
                 i0__namespace.ɵɵadvance(3);
-                i0__namespace.ɵɵconditional(ctx.loadNativeDateInput ? 11 : -1);
-            } }, dependencies: [i2__namespace.BsDatepickerDirective, i2__namespace.BsDatepickerInputDirective, i3$1__namespace.BsDropdownMenuDirective, i3$1__namespace.BsDropdownDirective, i4__namespace.NgControlStatus, i4__namespace.NgModel, i5__namespace.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+                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 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatetimeComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmDateTime]', providers: [
-                        base.provideAs(DatetimeComponent, i4.NG_VALUE_ACCESSOR, true),
-                        base.provideAs(DatetimeComponent, i4.NG_VALIDATORS, true),
+                        base.provideAs(DatetimeComponent, i5.NG_VALUE_ACCESSOR, true),
+                        base.provideAs(DatetimeComponent, i5.NG_VALIDATORS, true),
                         base.provideAsWidgetRef(DatetimeComponent),
-                        { provide: i5.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]=\"arialabel\"\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      [attr.aria-expanded]=\"isDateOpen\"\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@if (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 : arialabel || 'Choose Date'\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event)\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    role=\"button\">\n  </div>\n}\n" }]
+                        { 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]=\"arialabel\"\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                    [attr.aria-expanded]=\"isDateOpen\"\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 : arialabel || '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']
@@ -2699,7 +2692,7 @@
                     type: i0.Optional
                 }] }], { bsDatePickerDirective: [{
                 type: i0.ViewChild,
-                args: [i2.BsDatepickerDirective]
+                args: [i3.BsDatepickerDirective]
             }] }); })();
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(DatetimeComponent, { className: "DatetimeComponent", filePath: "date-time/date-time.component.ts", lineNumber: 56 }); })();
 
@@ -2739,9 +2732,9 @@
     const _c1 = () => ({ standalone: true });
     function TimeComponent_div_5_Template(rf, ctx) { if (rf & 1) {
         const _r1 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "div", 6);
+        i0__namespace.ɵɵelementStart(0, "div", 7);
         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", 7);
+        i0__namespace.ɵɵelementStart(1, "timepicker", 8);
         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()();
@@ -2752,13 +2745,13 @@
         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_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    function TimeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
         const _r3 = i0__namespace.ɵɵgetCurrentView();
-        i0__namespace.ɵɵelementStart(0, "wm-datetimepicker", 8);
-        i0__namespace.ɵɵlistener("change", function TimeComponent_Conditional_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.ɵɵelementStart(0, "wm-datetimepicker", 9);
+        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", 9);
-        i0__namespace.ɵɵlistener("click", function TimeComponent_Conditional_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_Conditional_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_Conditional_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.ɵɵelementStart(1, "div", 10);
+        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();
@@ -3057,11 +3050,11 @@
         }
         static { this.ɵfac = function TimeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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, i4.NG_VALUE_ACCESSOR, true),
-                    base.provideAs(TimeComponent, i4.NG_VALIDATORS, true),
+                    base.provideAs(TimeComponent, i5.NG_VALUE_ACCESSOR, true),
+                    base.provideAs(TimeComponent, i5.NG_VALIDATORS, true),
                     base.provideAsWidgetRef(TimeComponent),
-                    { provide: i5.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
-                ]), 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"], [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) {
+                    { provide: i6.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
+                ]), 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);
@@ -3073,7 +3066,7 @@
                 i0__namespace.ɵɵelementEnd()();
                 i0__namespace.ɵɵtemplate(5, TimeComponent_div_5_Template, 2, 14, "div", 5);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵtemplate(6, TimeComponent_Conditional_6_Template, 2, 6);
+                i0__namespace.ɵɵtemplate(6, TimeComponent_ng_template_6_Template, 2, 6, "ng-template", 6);
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("isOpen", ctx.status.isopen)("container", "body");
                 i0__namespace.ɵɵadvance();
@@ -3082,17 +3075,17 @@
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵproperty("tabindex", ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentTime);
                 i0__namespace.ɵɵadvance(3);
-                i0__namespace.ɵɵconditional(ctx.loadNativeDateInput ? 6 : -1);
-            } }, dependencies: [i3$1__namespace.BsDropdownMenuDirective, i3$1__namespace.BsDropdownDirective, i4__namespace.NgControlStatus, i4__namespace.NgModel, i5__namespace.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+                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 }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TimeComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmTime]', providers: [
-                        base.provideAs(TimeComponent, i4.NG_VALUE_ACCESSOR, true),
-                        base.provideAs(TimeComponent, i4.NG_VALIDATORS, true),
+                        base.provideAs(TimeComponent, i5.NG_VALUE_ACCESSOR, true),
+                        base.provideAs(TimeComponent, i5.NG_VALIDATORS, true),
                         base.provideAsWidgetRef(TimeComponent),
-                        { provide: i5.TimepickerConfig, deps: [i1$1.AbstractI18nService], useFactory: getTimepickerConfig }
-                    ], template: "<div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n  <input [attr.aria-label]=\"arialabel\" class=\"form-control app-textbox display-input\"\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@if (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 : arialabel || 'Select time'\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event); assignModel()\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    role=\"button\">\n  </div>\n}\n" }]
+                        { 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 [attr.aria-label]=\"arialabel\" class=\"form-control app-textbox display-input\"\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 : arialabel || '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']
@@ -3113,25 +3106,25 @@
     class EpochModule {
         static { this.ɵfac = function EpochModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EpochModule)(); }; }
         static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: EpochModule }); }
-        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [common.CommonModule,
-                i2.BsDatepickerModule,
-                i3$1.BsDropdownModule,
-                i4.FormsModule,
-                i5.TimepickerModule,
+        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i2.CommonModule,
+                i3.BsDatepickerModule,
+                i4$1.BsDropdownModule,
+                i5.FormsModule,
+                i6.TimepickerModule,
                 base.WmComponentsModule,
-                i3.IMaskModule] }); }
+                i4.IMaskModule] }); }
     }
     (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(EpochModule, [{
             type: i0.NgModule,
             args: [{
                     imports: [
-                        common.CommonModule,
-                        i2.BsDatepickerModule,
-                        i3$1.BsDropdownModule,
-                        i4.FormsModule,
-                        i5.TimepickerModule,
+                        i2.CommonModule,
+                        i3.BsDatepickerModule,
+                        i4$1.BsDropdownModule,
+                        i5.FormsModule,
+                        i6.TimepickerModule,
                         base.WmComponentsModule,
-                        i3.IMaskModule
+                        i4.IMaskModule
                     ],
                     declarations: [...components],
                     exports: [...components]
@@ -3143,13 +3136,13 @@
             DateTimePickerComponent,
             TimePickerComponent,
             PickerComponent,
-            PickerGroupComponent], imports: [common.CommonModule,
-            i2.BsDatepickerModule,
-            i3$1.BsDropdownModule,
-            i4.FormsModule,
-            i5.TimepickerModule,
+            PickerGroupComponent], imports: [i2.CommonModule,
+            i3.BsDatepickerModule,
+            i4$1.BsDropdownModule,
+            i5.FormsModule,
+            i6.TimepickerModule,
             base.WmComponentsModule,
-            i3.IMaskModule], exports: [DateComponent,
+            i4.IMaskModule], exports: [DateComponent,
             DatetimeComponent,
             TimeComponent,
             DateTimePickerComponent,