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

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

@@ -1,13 +1,14 @@
 import * as i0 from '@angular/core';
 import { Component, EventEmitter, ElementRef, Output, Input, ViewChild, Directive, Inject, Optional, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
 import { getLocaleDayPeriods, FormStyle, TranslationWidth, CommonModule } from '@angular/common';
-import * as i4 from '@angular/forms';
+import * as i5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
-import * as i2 from 'ngx-bootstrap/datepicker';
+import * as i3 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerConfig, BsDatepickerDirective, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import * as i3$1 from 'ngx-bootstrap/dropdown';
+import * as i4$1 from 'ngx-bootstrap/dropdown';
 import { BsDropdownDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import * as i5 from 'ngx-bootstrap/timepicker';
+import * as i6 from 'ngx-bootstrap/timepicker';
 import { TimepickerConfig, TimepickerComponent, TimepickerModule } from 'ngx-bootstrap/timepicker';
 import { ToDatePipe, getContainerTargetClass, PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, registerFormWidget, styler, setFocusTrap, provideAs, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
 import * as i1$1 from '@wm/core';
@@ -16,12 +17,12 @@ import { BaseFormCustomComponent } from '@wm/components/input';
 import * as i1 from 'ngx-bootstrap/modal';
 import { filter, isUndefined, isNaN as isNaN$1, parseInt as parseInt$1, isString, split, get, forEach, includes, debounce } from 'lodash-es';
 import IMask from 'imask';
-import * as i3 from 'angular-imask';
+import * as i4 from 'angular-imask';
 import { IMaskDirective, IMaskModule } from 'angular-imask';
 
 const _c0$4 = ["*"];
-function PickerComponent_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3);
+function PickerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -92,26 +93,26 @@ class PickerComponent {
         this.pickerAnimator = new PickerAnimator(this);
     }
     static { this.ɵfac = function PickerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PickerComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵ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.ɵɵ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.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
             i0.ɵɵtext(3, "E");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(4, "div", 2);
             i0.ɵɵtext(5, "E");
             i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(6, PickerComponent_For_7_Template, 2, 1, "div", 3, i0.ɵɵrepeaterTrackByIdentity);
-            i0.ɵɵelementStart(8, "div", 2);
-            i0.ɵɵtext(9, "E");
+            i0.ɵɵtemplate(6, PickerComponent_div_6_Template, 2, 1, "div", 3);
+            i0.ɵɵelementStart(7, "div", 2);
+            i0.ɵɵtext(8, "E");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "div", 2);
-            i0.ɵɵtext(11, "E");
+            i0.ɵɵelementStart(9, "div", 2);
+            i0.ɵɵtext(10, "E");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelement(12, "div", 4);
+            i0.ɵɵelement(11, "div", 4);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(6);
-            i0.ɵɵrepeater(ctx.options);
-        } }, encapsulation: 2 }); }
+            i0.ɵɵproperty("ngForOf", ctx.options);
+        } }, dependencies: [i2.NgForOf], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PickerComponent, [{
         type: Component,
@@ -119,20 +120,18 @@ class PickerComponent {
                 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.Injector }], { change: [{
             type: Output
@@ -141,7 +140,7 @@ class PickerComponent {
         }], options: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PickerComponent, { className: "PickerComponent", filePath: "picker/picker.component.ts", lineNumber: 36 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PickerComponent, { className: "PickerComponent", filePath: "picker/picker.component.ts", lineNumber: 34 }); })();
 class PickerAnimator {
     constructor(picker) {
         this.picker = picker;
@@ -198,28 +197,28 @@ class PickerAnimator {
 }
 
 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.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "bs-datepicker-inline", 11);
-    i0.ɵɵlistener("bsValueChange", function DateTimePickerComponent_ng_template_0_Conditional_3_Template_bs_datepicker_inline_bsValueChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDateUpdate($event)); });
+    i0.ɵɵlistener("bsValueChange", function DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template_bs_datepicker_inline_bsValueChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDateUpdate($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("bsConfig", ctx_r2.bsDatepickerConfig)("datesDisabled", ctx_r2.excludedDatesToDisable)("bsValue", ctx_r2.changedValue);
 } }
-function DateTimePickerComponent_ng_template_0_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.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "wm-timepicker", 12);
-    i0.ɵɵlistener("change", function DateTimePickerComponent_ng_template_0_Conditional_4_Template_wm_timepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onTimeUpdate($event)); });
+    i0.ɵɵlistener("change", function DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template_wm_timepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onTimeUpdate($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵ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.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 13);
-    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setToday()); });
+    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setToday()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -227,10 +226,10 @@ function DateTimePickerComponent_ng_template_0_Conditional_8_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵ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.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 14);
-    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onOkClick()); });
+    i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onOkClick()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -242,12 +241,12 @@ function DateTimePickerComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
     i0.ɵɵelement(2, "div", 3);
-    i0.ɵɵ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.ɵɵtemplate(3, DateTimePickerComponent_ng_template_0_bs_datepicker_inline_3_Template, 1, 3, "bs-datepicker-inline", 4)(4, DateTimePickerComponent_ng_template_0_wm_timepicker_4_Template, 1, 3, "wm-timepicker", 5);
     i0.ɵɵelementStart(5, "span", 6);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(7, "div", 7);
-    i0.ɵɵtemplate(8, DateTimePickerComponent_ng_template_0_Conditional_8_Template, 2, 1, "button", 8)(9, DateTimePickerComponent_ng_template_0_Conditional_9_Template, 2, 1, "button", 9);
+    i0.ɵɵtemplate(8, DateTimePickerComponent_ng_template_0_button_8_Template, 2, 1, "button", 8)(9, DateTimePickerComponent_ng_template_0_button_9_Template, 2, 1, "button", 9);
     i0.ɵɵelementStart(10, "button", 10);
     i0.ɵɵlistener("click", function DateTimePickerComponent_ng_template_0_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clear()); });
     i0.ɵɵtext(11);
@@ -255,15 +254,15 @@ function DateTimePickerComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE" ? 3 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME" ? 4 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.getDateLabel(), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE" ? 8 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "DATE");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME" ? 9 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.mode === "DATE_TIME" || ctx_r2.mode === "TIME");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.appLocale.LABEL_CLEAR_DATE || "Clear");
 } }
@@ -440,9 +439,9 @@ class DateTimePickerComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵ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.ɵɵtemplate(0, DateTimePickerComponent_ng_template_0_Template, 12, 6, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-        } }, dependencies: () => [i2.BsDatepickerDirective, i2.BsDatepickerInlineDirective, TimePickerComponent], encapsulation: 2 }); }
+        } }, dependencies: () => [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInlineDirective, TimePickerComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateTimePickerComponent, [{
         type: Component,
@@ -450,49 +449,43 @@ class DateTimePickerComponent {
                 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>
     `
             }]
@@ -526,7 +519,7 @@ class DateTimePickerComponent {
         }], displayFormat: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateTimePickerComponent, { className: "DateTimePickerComponent", filePath: "date-time/date-time-picker.component.ts", lineNumber: 60 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateTimePickerComponent, { className: "DateTimePickerComponent", filePath: "date-time/date-time-picker.component.ts", lineNumber: 54 }); })();
 class TimePickerComponent {
     constructor(inj) {
         this.inj = inj;
@@ -650,7 +643,7 @@ class TimePickerComponent {
         }], change: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimePickerComponent, { className: "TimePickerComponent", filePath: "date-time/date-time-picker.component.ts", lineNumber: 311 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimePickerComponent, { className: "TimePickerComponent", filePath: "date-time/date-time-picker.component.ts", lineNumber: 305 }); })();
 
 const CURRENT_DATE$2 = 'CURRENT_DATE';
 const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
@@ -1811,13 +1804,13 @@ function validateTheMaskedDate(format, locale) {
 
 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.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "wm-datetimepicker", 8);
-    i0.ɵɵlistener("change", function DateComponent_Conditional_8_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDateChange($event)); });
+    i0.ɵɵelementStart(0, "wm-datetimepicker", 9);
+    i0.ɵɵlistener("change", function DateComponent_ng_template_8_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDateChange($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 9);
-    i0.ɵɵlistener("click", function DateComponent_Conditional_8_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r2.disabled || ctx_r2.readonly) && ctx_r2.showDatePickerModal(ctx_r2.bsDataValue)); })("focus", function DateComponent_Conditional_8_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DateComponent_Conditional_8_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
+    i0.ɵɵelementStart(1, "div", 10);
+    i0.ɵɵlistener("click", function DateComponent_ng_template_8_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r2.disabled || ctx_r2.readonly) && ctx_r2.showDatePickerModal(ctx_r2.bsDataValue)); })("focus", function DateComponent_ng_template_8_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DateComponent_ng_template_8_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -2109,7 +2102,7 @@ class DateComponent extends BaseDateTimeComponent {
                 provideAs(DateComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(DateComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(DateComponent)
-            ]), i0.ɵɵ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.ɵɵ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.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 2, 0);
             i0.ɵɵlistener("click", function DateComponent_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleDpDropdown($event, true)); })("focus", function DateComponent_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.onDateTimeInputFocus(); ctx.invokeOnFocus($event); return i0.ɵɵresetView(ctx.updateIMask()); })("blur", function DateComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputBlur($event)); })("change", function DateComponent_Template_input_change_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDisplayDateChange($event)); })("keydown", function DateComponent_Template_input_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx._triggeredByUser = true; return i0.ɵɵresetView(ctx.onDisplayKeydown($event)); });
@@ -2121,7 +2114,7 @@ class DateComponent extends BaseDateTimeComponent {
             i0.ɵɵelementStart(5, "div", 6)(6, "input", 7, 1);
             i0.ɵɵlistener("onShown", function DateComponent_Template_input_onShown_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDatePickerOpen()); })("onHidden", function DateComponent_Template_input_onHidden_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.hideDatepickerDropdown()); })("bsValueChange", function DateComponent_Template_input_bsValueChange_6_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDateChange($event)); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(8, DateComponent_Conditional_8_Template, 2, 8);
+            i0.ɵɵtemplate(8, DateComponent_ng_template_8_Template, 2, 8, "ng-template", 8);
         } if (rf & 2) {
             i0.ɵɵ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.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
@@ -2132,8 +2125,8 @@ class DateComponent extends BaseDateTimeComponent {
             i0.ɵɵ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.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.loadNativeDateInput ? 8 : -1);
-        } }, dependencies: [i2.BsDatepickerDirective, i2.BsDatepickerInputDirective, i3.IMaskDirective, DateTimePickerComponent], encapsulation: 2 }); }
+            i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
+        } }, dependencies: [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInputDirective, i4.IMaskDirective, DateTimePickerComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateComponent, [{
         type: Component,
@@ -2141,7 +2134,7 @@ class DateComponent extends BaseDateTimeComponent {
                     provideAs(DateComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(DateComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(DateComponent)
-                ], template: "<input class=\"form-control app-textbox app-dateinput display-input\"\n  focus-target\n  type=\"text\"\n  [name]=\"name\"\n  #dateInput\n  [imask]=\"mask\"\n  [unmask]=\"true\"\n  [tabindex]=\"loadNativeDateInput ? '-1' : tabindex\"\n  [attr.aria-hidden]=\"!!loadNativeDateInput\"\n  [value]=\"displayValue\"\n  (click)=\"toggleDpDropdown($event, true)\"\n  (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event); updateIMask()\"\n  (blur)=\"onInputBlur($event)\"\n  [disabled]=\"disabled || readonly\"\n  [autofocus]=\"autofocus\"\n  [required]=\"required\"\n  [readOnly]=\"isReadOnly\"\n  [attr.placeholder]=\"placeholder\"\n  [attr.accesskey]=\"shortcutkey\"\n  [attr.aria-label]=\"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.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2204,9 +2197,9 @@ const _c0$1 = ["wmDateTime", ""];
 const _c1$1 = () => ({ standalone: true });
 function DatetimeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelementStart(0, "div", 12);
     i0.ɵɵlistener("click", function DatetimeComponent_div_10_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.preventTpClose($event)); });
-    i0.ɵɵelementStart(1, "timepicker", 12);
+    i0.ɵɵelementStart(1, "timepicker", 13);
     i0.ɵɵtwoWayListener("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.bsTimeValue, $event) || (ctx_r2.bsTimeValue = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("isValid", function DatetimeComponent_div_10_Template_timepicker_isValid_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.isValid($event)); })("ngModelChange", function DatetimeComponent_div_10_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModelUpdate($event, "time")); });
     i0.ɵɵelementEnd()();
@@ -2217,13 +2210,13 @@ function DatetimeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.bsTimeValue);
     i0.ɵɵproperty("ngModelOptions", i0.ɵɵ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.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "wm-datetimepicker", 13);
-    i0.ɵɵlistener("change", function DatetimeComponent_Conditional_11_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModelUpdate($event, "date")); });
+    i0.ɵɵelementStart(0, "wm-datetimepicker", 14);
+    i0.ɵɵlistener("change", function DatetimeComponent_ng_template_11_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModelUpdate($event, "date")); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 14);
-    i0.ɵɵlistener("click", function DatetimeComponent_Conditional_11_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r2.disabled || ctx_r2.readonly) && ctx_r2.showDatePickerModal(ctx_r2.bsDateValue)); })("focus", function DatetimeComponent_Conditional_11_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DatetimeComponent_Conditional_11_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
+    i0.ɵɵelementStart(1, "div", 15);
+    i0.ɵɵlistener("click", function DatetimeComponent_ng_template_11_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r2.disabled || ctx_r2.readonly) && ctx_r2.showDatePickerModal(ctx_r2.bsDateValue)); })("focus", function DatetimeComponent_ng_template_11_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputFocus(true); return i0.ɵɵresetView(ctx_r2.invokeOnFocus($event)); })("blur", function DatetimeComponent_ng_template_11_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r2.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -2636,7 +2629,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
                 provideAs(DatetimeComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(DatetimeComponent),
                 { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$1, decls: 12, vars: 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) {
+            ]), i0.ɵɵ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.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵlistener("onShown", function DatetimeComponent_Template_div_onShown_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTimepickerOpen()); });
@@ -2656,7 +2649,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(10, DatetimeComponent_div_10_Template, 2, 13, "div", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(11, DatetimeComponent_Conditional_11_Template, 2, 8);
+            i0.ɵɵtemplate(11, DatetimeComponent_ng_template_11_Template, 2, 8, "ng-template", 11);
         } if (rf & 2) {
             i0.ɵɵproperty("isOpen", ctx.isTimeOpen)("container", "body");
             i0.ɵɵadvance();
@@ -2672,8 +2665,8 @@ class DatetimeComponent extends BaseDateTimeComponent {
             i0.ɵɵ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.ɵɵattribute("aria-hidden", !!ctx.loadNativeDateInput);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.loadNativeDateInput ? 11 : -1);
-        } }, dependencies: [i2.BsDatepickerDirective, i2.BsDatepickerInputDirective, i3$1.BsDropdownMenuDirective, i3$1.BsDropdownDirective, i4.NgControlStatus, i4.NgModel, i5.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+            i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
+        } }, dependencies: [i2.NgIf, i3.BsDatepickerDirective, i3.BsDatepickerInputDirective, i4$1.BsDropdownMenuDirective, i4$1.BsDropdownDirective, i5.NgControlStatus, i5.NgModel, i6.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatetimeComponent, [{
         type: Component,
@@ -2682,7 +2675,7 @@ class DatetimeComponent extends BaseDateTimeComponent {
                     provideAs(DatetimeComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(DatetimeComponent),
                     { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-                ], template: "<div dropdown\n  [isOpen]=\"isTimeOpen\"\n  autoClose=\"false\"\n  [container]=\"'body'\"\n  (onShown)=\"onTimepickerOpen()\"\n  style=\"display: inherit;\">\n  <input class=\"form-control app-textbox display-input\"\n    [attr.aria-label]=\"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" }]
+                ], 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.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$1.AppDefaults }, { type: i1$1.App }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2730,9 +2723,9 @@ const _c0 = ["wmTime", ""];
 const _c1 = () => ({ standalone: true });
 function TimeComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵelementStart(0, "div", 7);
     i0.ɵɵlistener("click", function TimeComponent_div_5_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.preventTpClose($event)); });
-    i0.ɵɵelementStart(1, "timepicker", 7);
+    i0.ɵɵelementStart(1, "timepicker", 8);
     i0.ɵɵtwoWayListener("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.bsTimeValue, $event) || (ctx_r1.bsTimeValue = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("isValid", function TimeComponent_div_5_Template_timepicker_isValid_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.isValid($event)); })("ngModelChange", function TimeComponent_div_5_Template_timepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTimeChange($event)); });
     i0.ɵɵelementEnd()();
@@ -2743,13 +2736,13 @@ function TimeComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.bsTimeValue);
     i0.ɵɵproperty("ngModelOptions", i0.ɵɵ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.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "wm-datetimepicker", 8);
-    i0.ɵɵlistener("change", function TimeComponent_Conditional_6_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTimeChange($event)); });
+    i0.ɵɵelementStart(0, "wm-datetimepicker", 9);
+    i0.ɵɵlistener("change", function TimeComponent_ng_template_6_Template_wm_datetimepicker_change_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTimeChange($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 9);
-    i0.ɵɵlistener("click", function TimeComponent_Conditional_6_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r1.disabled || ctx_r1.readonly) && ctx_r1.showDatePickerModal(ctx_r1.bsTimeValue)); })("focus", function TimeComponent_Conditional_6_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputFocus(true); ctx_r1.invokeOnFocus($event); return i0.ɵɵresetView(ctx_r1.assignModel()); })("blur", function TimeComponent_Conditional_6_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r1.invokeOnTouched($event)); });
+    i0.ɵɵelementStart(1, "div", 10);
+    i0.ɵɵlistener("click", function TimeComponent_ng_template_6_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(!(ctx_r1.disabled || ctx_r1.readonly) && ctx_r1.showDatePickerModal(ctx_r1.bsTimeValue)); })("focus", function TimeComponent_ng_template_6_Template_div_focus_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputFocus(true); ctx_r1.invokeOnFocus($event); return i0.ɵɵresetView(ctx_r1.assignModel()); })("blur", function TimeComponent_ng_template_6_Template_div_blur_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.onDateTimeInputBlur(); return i0.ɵɵresetView(ctx_r1.invokeOnTouched($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -3052,7 +3045,7 @@ class TimeComponent extends BaseDateTimeComponent {
                 provideAs(TimeComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(TimeComponent),
                 { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 7, vars: 16, consts: [["dropdown", "", 2, "display", "inherit", 3, "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) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 7, vars: 16, consts: [["dropdown", "", 2, "display", "inherit", 3, "onShown", "onHidden", "isOpen", "container"], ["focus-target", "", "type", "text", "role", "timer", 1, "form-control", "app-textbox", "display-input", 3, "click", "focus", "blur", "change", "keydown", "tabindex", "name", "value", "disabled", "autofocus", "required", "readOnly"], [1, "input-group-btn", "dropdown-toggle"], ["type", "button", "aria-label", "Select time", "aria-haspopup", "true", "aria-expanded", "false", 1, "btn", "btn-default", "btn-date", 3, "click", "tabindex", "disabled"], ["aria-hidden", "true", 1, "app-icon", "wm-sl-l", "sl-time"], ["class", "dropdown-menu", 3, "click", 4, "dropdownMenu"], [3, "ngIf"], [1, "dropdown-menu", 3, "click"], [1, "model-holder", 3, "ngModelChange", "isValid", "showMeridian", "readonlyInput", "ngModel", "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.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("onShown", function TimeComponent_Template_div_onShown_0_listener() { return ctx.onShown(); })("onHidden", function TimeComponent_Template_div_onHidden_0_listener() { return ctx.hideTimepickerDropdown(); });
             i0.ɵɵelementStart(1, "input", 1);
@@ -3064,7 +3057,7 @@ class TimeComponent extends BaseDateTimeComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(5, TimeComponent_div_5_Template, 2, 14, "div", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, TimeComponent_Conditional_6_Template, 2, 6);
+            i0.ɵɵtemplate(6, TimeComponent_ng_template_6_Template, 2, 6, "ng-template", 6);
         } if (rf & 2) {
             i0.ɵɵproperty("isOpen", ctx.status.isopen)("container", "body");
             i0.ɵɵadvance();
@@ -3073,8 +3066,8 @@ class TimeComponent extends BaseDateTimeComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("tabindex", ctx.tabindex)("disabled", ctx.disabled || ctx.readonly || ctx.isCurrentTime);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.loadNativeDateInput ? 6 : -1);
-        } }, dependencies: [i3$1.BsDropdownMenuDirective, i3$1.BsDropdownDirective, i4.NgControlStatus, i4.NgModel, i5.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
+            i0.ɵɵproperty("ngIf", ctx.loadNativeDateInput);
+        } }, dependencies: [i2.NgIf, i4$1.BsDropdownMenuDirective, i4$1.BsDropdownDirective, i5.NgControlStatus, i5.NgModel, i6.TimepickerComponent, DateTimePickerComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeComponent, [{
         type: Component,
@@ -3083,7 +3076,7 @@ class TimeComponent extends BaseDateTimeComponent {
                     provideAs(TimeComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(TimeComponent),
                     { provide: TimepickerConfig, deps: [AbstractI18nService], useFactory: getTimepickerConfig }
-                ], template: "<div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n  <input [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" }]
+                ], 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.Injector }, { type: i0.NgZone }, { type: i1$1.AppDefaults }, { type: i1$1.App }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']