mis-crystal-design-system 18.0.22-test-dynamic-theme-2 → 18.0.23

package/fesm2022/mis-crystal-design-system-datepicker_v2.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Component, Inject, HostListener, EventEmitter, Injector, Directive, Self, Optional, Input, Output, NgModule } from '@angular/core';
-import dayjs, { tz } from 'dayjs';
+import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
@@ -10,20 +10,27 @@ import * as i1 from 'mis-crystal-design-system/toast';
 import { ToastModule } from 'mis-crystal-design-system/toast';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from 'mis-crystal-design-system/button';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4 from 'mis-crystal-design-system/button';
 import { ButtonModule } from 'mis-crystal-design-system/button';
-import * as i4 from '@angular/cdk/a11y';
+import * as i5 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i2$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { take } from 'rxjs/operators';
 import { genPositionPairs } from 'mis-crystal-design-system/utils';
-import * as i1$1 from '@angular/forms';
 
 /** @format */
 const CONTAINER_DATA = new InjectionToken("CONTAINER_DATA");
 const DATE_FORMAT = "DD-MM-YYYY";
+const TIME_FORMAT_12 = "hh:mm A";
+const TIME_FORMAT_24 = "HH:mm";
+const DATETIME_FORMAT_12 = "DD-MM-YYYY hh:mm A";
+const DATETIME_FORMAT_24 = "DD-MM-YYYY HH:mm";
+const FORMAT_12 = "12";
+const FORMAT_24 = "24";
 
 const getMonth = (index) => {
     let month;
@@ -78,7 +85,7 @@ const _c4 = (a0, a1, a2) => ({ "selected-day": a0, "disabled-day": a1, "is-valid
 const _c5 = (a0, a1, a2) => ({ "current-day": a0, "selected-day": a1, "disabled-day": a2 });
 function TzDpContainerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵlistener("click", function TzDpContainerComponent_div_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleMonthSelector()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -89,7 +96,7 @@ function TzDpContainerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
 } }
 function TzDpContainerComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵelementStart(0, "div", 17);
     i0.ɵɵlistener("click", function TzDpContainerComponent_div_7_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleYearSelector()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -100,7 +107,7 @@ function TzDpContainerComponent_div_7_Template(rf, ctx) { if (rf & 1) {
 } }
 function TzDpContainerComponent_div_12_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelementStart(0, "div", 21);
     i0.ɵɵlistener("click", function TzDpContainerComponent_div_12_div_2_Template_div_click_0_listener() { const ctx_r4 = i0.ɵɵrestoreView(_r4); const month_r6 = ctx_r4.$implicit; const i_r7 = ctx_r4.index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(!ctx_r1.disabledMonths[i_r7] && ctx_r1.selectMonth(month_r6)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -113,8 +120,8 @@ function TzDpContainerComponent_div_12_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", month_r6, " ");
 } }
 function TzDpContainerComponent_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18);
-    i0.ɵɵtemplate(2, TzDpContainerComponent_div_12_div_2_Template, 2, 5, "div", 19);
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19);
+    i0.ɵɵtemplate(2, TzDpContainerComponent_div_12_div_2_Template, 2, 5, "div", 20);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -123,7 +130,7 @@ function TzDpContainerComponent_div_12_Template(rf, ctx) { if (rf & 1) {
 } }
 function TzDpContainerComponent_div_13_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵelementStart(0, "div", 24);
     i0.ɵɵlistener("click", function TzDpContainerComponent_div_13_div_2_Template_div_click_0_listener() { const ctx_r8 = i0.ɵɵrestoreView(_r8); const year_r10 = ctx_r8.$implicit; const i_r11 = ctx_r8.index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(!ctx_r1.disabledYears[i_r11] && ctx_r1.selectYear(year_r10)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -136,8 +143,8 @@ function TzDpContainerComponent_div_13_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", year_r10, " ");
 } }
 function TzDpContainerComponent_div_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 18);
-    i0.ɵɵtemplate(2, TzDpContainerComponent_div_13_div_2_Template, 2, 5, "div", 22);
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 19);
+    i0.ɵɵtemplate(2, TzDpContainerComponent_div_13_div_2_Template, 2, 5, "div", 23);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -145,7 +152,7 @@ function TzDpContainerComponent_div_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngForOf", ctx_r1.availableYears);
 } }
 function TzDpContainerComponent_div_14_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26)(1, "span", 27);
+    i0.ɵɵelementStart(0, "div", 27)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -156,8 +163,8 @@ function TzDpContainerComponent_div_14_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(weekDay_r12.label);
 } }
 function TzDpContainerComponent_div_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵtemplate(1, TzDpContainerComponent_div_14_div_1_Template, 3, 4, "div", 25);
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵtemplate(1, TzDpContainerComponent_div_14_div_1_Template, 3, 4, "div", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -165,47 +172,100 @@ function TzDpContainerComponent_div_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngForOf", ctx_r1.weekDays);
 } }
 function TzDpContainerComponent_div_15_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵelementStart(0, "span", 33);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const day_r14 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("tabindex", day_r14.isDisabledDay ? -1 : 0)("ngClass", i0.ɵɵpureFunction3(4, _c5, day_r14.isCurrentDay, !ctx_r1.localSelectedDate ? day_r14.isSelectedDay : day_r14 === ctx_r1.localSelectedDate, day_r14.isDisabledDay));
+    i0.ɵɵproperty("tabindex", day_r14.isDisabledDay ? -1 : 0)("ngClass", i0.ɵɵpureFunction3(4, _c5, day_r14.isCurrentDay, day_r14.isSelectedDay, day_r14.isDisabledDay));
     i0.ɵɵattribute("aria-label", ctx_r1.retractDayMonth(day_r14.date, ctx_r1.currentMonth, ctx_r1.currentYearNumber));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", day_r14.date, " ");
 } }
 function TzDpContainerComponent_div_15_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵelementStart(0, "div", 31);
     i0.ɵɵlistener("click", function TzDpContainerComponent_div_15_div_1_Template_div_click_0_listener() { const day_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectDay(day_r14)); })("keyup.enter", function TzDpContainerComponent_div_15_div_1_Template_div_keyup_enter_0_listener() { const day_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectDay(day_r14)); });
-    i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_div_1_span_1_Template, 2, 8, "span", 31);
+    i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_div_1_span_1_Template, 2, 8, "span", 32);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const day_r14 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(2, _c4, !ctx_r1.localSelectedDate ? day_r14.isSelectedDay : day_r14 === ctx_r1.localSelectedDate, day_r14.isDisabledDay, day_r14.date > 0 && !day_r14.isSelectedDay));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(2, _c4, day_r14.isSelectedDay, day_r14.isDisabledDay, day_r14.date > 0 && !day_r14.isSelectedDay));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", day_r14.date > 0);
 } }
 function TzDpContainerComponent_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28);
-    i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_div_1_Template, 2, 6, "div", 29);
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_div_1_Template, 2, 6, "div", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r1.currentMonthDates);
 } }
+function TzDpContainerComponent_div_16_div_15_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 44)(1, "label", 45);
+    i0.ɵɵtext(2, "AM/PM");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "select", 46);
+    i0.ɵɵtwoWayListener("ngModelChange", function TzDpContainerComponent_div_16_div_15_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedAmPm, $event) || (ctx_r1.selectedAmPm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(4, "option", 47);
+    i0.ɵɵtext(5, "AM");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "option", 48);
+    i0.ɵɵtext(7, "PM");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedAmPm);
+} }
 function TzDpContainerComponent_div_16_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 33)(1, "button", 34);
-    i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelDatePicker()); });
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "span");
+    i0.ɵɵtext(3, "Time");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 36)(5, "div", 37)(6, "label", 38);
+    i0.ɵɵtext(7, "Hour");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "input", 39);
+    i0.ɵɵtwoWayListener("ngModelChange", function TzDpContainerComponent_div_16_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedHour, $event) || (ctx_r1.selectedHour = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("input", function TzDpContainerComponent_div_16_Template_input_input_8_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onHourInput($event)); })("blur", function TzDpContainerComponent_div_16_Template_input_blur_8_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.validateHourInput()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 40);
+    i0.ɵɵtext(10, ":");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 37)(12, "label", 41);
+    i0.ɵɵtext(13, "Minute");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "input", 42);
+    i0.ɵɵtwoWayListener("ngModelChange", function TzDpContainerComponent_div_16_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedMinute, $event) || (ctx_r1.selectedMinute = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("input", function TzDpContainerComponent_div_16_Template_input_input_14_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMinuteInput($event)); })("blur", function TzDpContainerComponent_div_16_Template_input_blur_14_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.validateMinuteInput()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(15, TzDpContainerComponent_div_16_div_15_Template, 8, 1, "div", 43);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("min", ctx_r1.is12HourFormat() ? 1 : 0)("max", ctx_r1.is12HourFormat() ? 12 : 23)("step", 1);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedHour);
+    i0.ɵɵproperty("title", ctx_r1.is12HourFormat() ? "Enter hour (1-12)" : "Enter hour (0-23)");
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("step", 1);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedMinute);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.is12HourFormat());
+} }
+function TzDpContainerComponent_div_17_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
+    i0.ɵɵlistener("click", function TzDpContainerComponent_div_17_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelDatePicker()); });
     i0.ɵɵtext(2, "Cancel");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 35);
-    i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.applyDate()); });
+    i0.ɵɵelementStart(3, "button", 51);
+    i0.ɵɵlistener("click", function TzDpContainerComponent_div_17_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.applyDate()); });
     i0.ɵɵtext(4, "Apply");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -230,6 +290,10 @@ class TzDpContainerComponent {
         this.isPreviousMonthDisabled = false;
         this.isNextMonthDisabled = false;
         this.allowBookingOnDisabledDay = false;
+        // Time functionality - only what's needed
+        this.selectedHour = 0;
+        this.selectedMinute = 0;
+        this.selectedAmPm = 'AM';
         this.isSelectingMonth = false;
         this.isSelectingYear = false;
         this.availableYears = [];
@@ -238,11 +302,22 @@ class TzDpContainerComponent {
         this.disabledYears = [];
         this.isYearSelectionFlow = false;
         this.data = data;
-        if (this.data?.dpConfig?.timezone) {
-            this.parseZoneInstance = (...args) => {
-                return tz(args[0], args[1] || 'DD/MM/YYYY', this.data.dpConfig.timezone);
-            };
-        }
+        // Initialize parseZoneInstance with better error handling
+        this.parseZoneInstance = (...args) => {
+            try {
+                if (this.data?.dpConfig?.timezone) {
+                    return dayjs.tz(args[0], args[1] || 'DD/MM/YYYY', this.data.dpConfig.timezone);
+                }
+                else {
+                    return dayjs(...args);
+                }
+            }
+            catch (error) {
+                // Silently handle timezone parsing error, fallback to local time
+                return dayjs(...args);
+            }
+        };
+        // Set default values safely
         this.currentMonthNumber = this.parseZoneInstance().month();
         this.currentMonth = getMonth(this.currentMonthNumber);
         this.currentYearNumber = this.parseZoneInstance().year();
@@ -262,6 +337,59 @@ class TzDpContainerComponent {
         this.availableMonths = Array.from({ length: 12 }, (_, i) => dayjs().month(i).format('MMMM'));
         this.availableYears = Array.from({ length: 12 }, (_, index) => this.currentYearNumber - 6 + index);
     }
+    onHourInput(event) {
+        if (this.data.dpConfig.enableTime !== true)
+            return;
+        const value = parseInt(event.target.value);
+        if (!isNaN(value)) {
+            if (this.is12HourFormat()) {
+                if (value >= 1 && value <= 12) {
+                    this.selectedHour = value;
+                }
+            }
+            else {
+                if (value >= 0 && value <= 23) {
+                    this.selectedHour = value;
+                }
+            }
+        }
+    }
+    onMinuteInput(event) {
+        if (this.data.dpConfig.enableTime !== true)
+            return;
+        const value = parseInt(event.target.value);
+        if (!isNaN(value) && value >= 0 && value <= 59) {
+            this.selectedMinute = value;
+        }
+    }
+    validateHourInput() {
+        if (this.data.dpConfig.enableTime !== true)
+            return;
+        if (this.is12HourFormat()) {
+            if (this.selectedHour < 1)
+                this.selectedHour = 1;
+            if (this.selectedHour > 12)
+                this.selectedHour = 12;
+        }
+        else {
+            if (this.selectedHour < 0)
+                this.selectedHour = 0;
+            if (this.selectedHour > 23)
+                this.selectedHour = 23;
+        }
+    }
+    validateMinuteInput() {
+        if (this.data.dpConfig.enableTime !== true)
+            return;
+        if (this.selectedMinute < 0)
+            this.selectedMinute = 0;
+        if (this.selectedMinute > 59)
+            this.selectedMinute = 59;
+    }
+    is12HourFormat() {
+        return this.data.dpConfig.enableTime === true &&
+            (this.data.dpConfig.format.includes('A') || this.data.dpConfig.format.includes('a'));
+    }
     retractDayMonth(day, month, year) {
         return `${day} ${month} ${year}`;
     }
@@ -269,25 +397,133 @@ class TzDpContainerComponent {
         this.currentDateInstance();
         this.calculateMinMaxDays();
         this.calculateDisabledMonthsAndYears();
+        this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+        // Initialize time if enabled
+        if (this.data.dpConfig.enableTime === true) {
+            this.initializeTimeValues();
+        }
+    }
+    get yearRange() {
+        return `${this.selectedYear - 6} - ${this.selectedYear + 5}`;
+    }
+    initializeTimeValues() {
+        if (this.data.dpConfig.enableTime === true) {
+            if (this.data.date) {
+                // Try to parse existing date for time values
+                try {
+                    const currentDate = this.parseZoneInstance(this.data.date, this.data.dpConfig.format);
+                    if (currentDate.isValid()) {
+                        let hour = currentDate.hour();
+                        this.selectedMinute = currentDate.minute();
+                        if (this.is12HourFormat()) {
+                            if (hour === 0) {
+                                hour = 12;
+                                this.selectedAmPm = 'AM';
+                            }
+                            else if (hour > 12) {
+                                hour = hour - 12;
+                                this.selectedAmPm = 'PM';
+                            }
+                            else if (hour === 12) {
+                                this.selectedAmPm = 'PM';
+                            }
+                            else {
+                                this.selectedAmPm = 'AM';
+                            }
+                        }
+                        this.selectedHour = hour;
+                    }
+                    else {
+                        // Invalid date, use defaults
+                        this.setDefaultTimeValues();
+                    }
+                }
+                catch (error) {
+                    // Parsing error, use defaults
+                    this.setDefaultTimeValues();
+                }
+            }
+        }
+        else {
+            // No existing date, use defaults
+            this.setDefaultTimeValues();
+        }
+    }
+    setDefaultTimeValues() {
+        // Use current time as default instead of 12:00 PM
+        const now = dayjs();
+        const currentHour = now.hour();
+        const currentMinute = now.minute();
+        if (this.is12HourFormat()) {
+            // Convert current time to 12-hour format
+            let hour12 = currentHour;
+            let amPm = 'AM';
+            if (currentHour === 0) {
+                hour12 = 12;
+                amPm = 'AM';
+            }
+            else if (currentHour === 12) {
+                hour12 = 12;
+                amPm = 'PM';
+            }
+            else if (currentHour > 12) {
+                hour12 = currentHour - 12;
+                amPm = 'PM';
+            }
+            else {
+                amPm = 'AM';
+            }
+            this.selectedHour = hour12;
+            this.selectedMinute = currentMinute;
+            this.selectedAmPm = amPm;
+        }
+        else {
+            // Use current time directly for 24-hour format
+            this.selectedHour = currentHour;
+            this.selectedMinute = currentMinute;
+            this.selectedAmPm = 'AM'; // Not used in 24-hour format but keep consistent
+        }
     }
     currentDateInstance() {
-        const selectedDate = dayjs(this.data.date, this.data.dpConfig.format);
-        if (selectedDate.isValid()) {
-            this.selectedYear = this.currentYearNumber = selectedDate.year();
-            this.currentMonthNumber = selectedDate.month();
+        try {
+            if (this.data.date) {
+                const selectedDate = dayjs(this.data.date, this.data.dpConfig.format);
+                if (selectedDate.isValid()) {
+                    this.selectedYear = this.currentYearNumber = selectedDate.year();
+                    this.currentMonthNumber = selectedDate.month();
+                    this.currentMonth = getMonth(this.currentMonthNumber);
+                    if (!this.localSelectedDate) {
+                        this.localSelectedDate = {
+                            date: selectedDate.date(),
+                            weekDay: selectedDate.day(),
+                            month: selectedDate.month(),
+                            year: selectedDate.year(),
+                            isSelectedDay: true
+                        };
+                    }
+                }
+            }
+        }
+        catch (error) {
+            this.currentYearNumber = this.parseZoneInstance().year();
+            this.currentMonthNumber = this.parseZoneInstance().month();
             this.currentMonth = getMonth(this.currentMonthNumber);
         }
         this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
     }
     calculateMinMaxDays() {
         const currentInstance = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
-        const minDate = !!this.data.dpConfig.minDate ? this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
-        if (minDate.isValid()) {
-            this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, "month");
+        if (this.data.dpConfig.minDate) {
+            const minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);
+            if (minDate?.isValid()) {
+                this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, "month");
+            }
         }
-        const maxDate = !!this.data.dpConfig.maxDate ? this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
-        if (maxDate.isValid()) {
-            this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
+        if (this.data.dpConfig.maxDate) {
+            const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);
+            if (maxDate?.isValid()) {
+                this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
+            }
         }
     }
     calculateDisabledMonthsAndYears() {
@@ -308,9 +544,6 @@ class TzDpContainerComponent {
             this.isNextMonthDisabled = maxDate.isValid() && ((this.selectedYear + 5) >= maxDate.year());
         }
     }
-    get yearRange() {
-        return `${this.selectedYear - 6} - ${this.selectedYear + 5}`;
-    }
     navigateView(direction) {
         if ((direction === 'NEXT' && (this.isNextMonthDisabled || this.isSelectingMonth)) ||
             (direction === 'PREVIOUS' && (this.isPreviousMonthDisabled || this.isSelectingMonth))) {
@@ -321,7 +554,7 @@ class TzDpContainerComponent {
             this.availableYears = Array.from({ length: 12 }, (_, index) => this.selectedYear - 6 + index);
         }
         else {
-            let thisMonth = dayjs().year(this.currentYearNumber).month(this.currentMonthNumber);
+            let thisMonth = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
             thisMonth = direction === "NEXT" ? thisMonth.add(1, "month") : thisMonth.subtract(1, "month");
             this.currentMonthNumber = thisMonth.month();
             this.currentMonth = getMonth(this.currentMonthNumber);
@@ -331,63 +564,239 @@ class TzDpContainerComponent {
         this.calculateMinMaxDays();
         this.calculateDisabledMonthsAndYears();
     }
+    navigateMonth(direction) {
+        try {
+            let thisMonth = dayjs().year(this.currentYearNumber).month(this.currentMonthNumber);
+            if (direction === "NEXT") {
+                thisMonth = thisMonth.add(1, "month");
+            }
+            else if (direction === "PREVIOUS") {
+                thisMonth = thisMonth.subtract(1, "month");
+            }
+            this.currentMonthNumber = thisMonth.month();
+            this.currentMonth = getMonth(this.currentMonthNumber);
+            this.currentYearNumber = thisMonth.year();
+            this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+            this.calculateMinMaxDays();
+        }
+        catch (error) {
+            // Silently handle navigateMonth error
+        }
+    }
     generateDates(month, currentYearNumber) {
-        let dates = [];
-        const daysInMonth = dayjs().year(currentYearNumber).month(month).daysInMonth();
-        for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
-            const date = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate);
-            const dateString = date.format(this.data.dpConfig.format);
-            let isDisabledDay = this.data.datesDisabled.some(d => d === dateString);
-            const minDate = !!this.data.dpConfig.minDate ? this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
-            if (!isDisabledDay && minDate.isValid()) {
-                isDisabledDay = minDate.isAfter(date, "day");
+        const dates = [];
+        try {
+            const daysInMonth = dayjs().year(currentYearNumber).month(month).daysInMonth();
+            let minDate = null;
+            let maxDate = null;
+            if (this.data.dpConfig.minDate) {
+                try {
+                    minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);
+                }
+                catch (error) {
+                    // Silently handle min date parsing error
+                }
+            }
+            if (this.data.dpConfig.maxDate) {
+                try {
+                    maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);
+                }
+                catch (error) {
+                    // Silently handle max date parsing error
+                }
+            }
+            for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
+                try {
+                    const date = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate);
+                    const dateString = date.format(this.data.dpConfig.format);
+                    let isDisabledDay = this.data.datesDisabled?.some(d => d === dateString) || false;
+                    if (!isDisabledDay && minDate?.isValid() && this.data.dpConfig.minDate) {
+                        isDisabledDay = minDate.isAfter(date, "day");
+                    }
+                    if (!isDisabledDay && maxDate?.isValid() && this.data.dpConfig.maxDate) {
+                        isDisabledDay = maxDate.isBefore(date, "day");
+                    }
+                    const currentDateInstance = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate);
+                    const isCurrentDay = currentDateInstance.format(this.data.dpConfig.format) === dayjs().format(this.data.dpConfig.format);
+                    let isSelectedDay = false;
+                    // Prioritize current selection over previously applied date
+                    if (this.localSelectedDate &&
+                        this.localSelectedDate.date === currentDate &&
+                        this.localSelectedDate.month === month &&
+                        this.localSelectedDate.year === currentYearNumber) {
+                        isSelectedDay = true;
+                    }
+                    else if (this.data.date && !this.localSelectedDate) {
+                        // Only check previously applied date if no current selection
+                        try {
+                            if (this.data.dpConfig.enableTime) {
+                                const selectedDate = this.parseZoneInstance(this.data.date, this.data.dpConfig.format);
+                                if (selectedDate.isValid()) {
+                                    isSelectedDay = selectedDate.isSame(currentDateInstance, 'day');
+                                }
+                            }
+                            else {
+                                // For date-only format, compare the date parts only
+                                const selectedDate = this.parseZoneInstance(this.data.date, this.data.dpConfig.format);
+                                if (selectedDate.isValid()) {
+                                    isSelectedDay = selectedDate.isSame(currentDateInstance, 'day');
+                                }
+                                else {
+                                    // Fallback to string comparison if parsing fails
+                                    isSelectedDay = dateString === this.data.date;
+                                }
+                            }
+                        }
+                        catch (error) {
+                            // Silently handle date comparison error
+                        }
+                    }
+                    dates.push({
+                        date: currentDate,
+                        weekDay: date.day(),
+                        month: month,
+                        year: currentYearNumber,
+                        isCurrentDay,
+                        isSelectedDay,
+                        toastMessage: this.data.messages?.find(q => dateString === q.date)?.message || "",
+                        isDisabledDay
+                    });
+                }
+                catch (error) {
+                    // Silently handle date processing error
+                    dates.push({
+                        date: currentDate,
+                        weekDay: this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate).day(),
+                        month: month,
+                        year: currentYearNumber,
+                        isDisabledDay: true
+                    });
+                }
             }
-            const maxDate = !!this.data.dpConfig.maxDate ? this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
-            if (!isDisabledDay && maxDate.isValid()) {
-                isDisabledDay = maxDate.isBefore(date, "day");
+            if (dates.length > 0) {
+                for (let i = dates[0].weekDay; i > 0; i--) {
+                    dates.unshift({
+                        date: 0,
+                        weekDay: i - 1,
+                        month: month,
+                        year: currentYearNumber
+                    });
+                }
             }
-            dates.push({
-                date: currentDate,
-                weekDay: date.day(),
-                isCurrentDay: this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
-                    this.parseZoneInstance().format(this.data.dpConfig.format),
-                isSelectedDay: !isDisabledDay && date.format(this.data.dpConfig.format) === this.data.date,
-                toastMessage: this.data.messages.find(q => date.format(this.data.dpConfig.format) === q.date)?.message || "",
-                isDisabledDay
-            });
-        }
-        for (let i = dates[0].weekDay; i > 0; i--) {
-            dates.unshift({ date: 0, weekDay: i - 1 });
+        }
+        catch (error) {
+            // Silently handle generateDates error
         }
         return dates;
     }
     selectDay(day) {
-        this.currentSelection = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber).date(day.date);
-        const maxDate = !!this.data.dpConfig.maxDate ? this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format).endOf("day") : dayjs('invalid');
-        const minDate = !!this.data.dpConfig.maxDate ? this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format).startOf("day") : dayjs('invalid');
-        this.allowBookingOnDisabledDay = this.data.allowBookingOnDisabledDay;
         if (day.date <= 0)
             return;
-        if ((this.currentSelection.isSameOrAfter(minDate) && this.currentSelection.isSameOrBefore(maxDate) && this.allowBookingOnDisabledDay) || (!day.isDisabledDay && !this.allowBookingOnDisabledDay)) {
-            this.localSelectedDate = day;
-            if (!this.data.dpConfig.showApplyButton) {
-                this.applyDate(day);
+        try {
+            // Create the base date selection without time
+            this.currentSelection = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber).date(day.date).hour(0).minute(0).second(0).millisecond(0);
+            // Apply the current time values to the selection
+            if (this.data.dpConfig.enableTime === true) {
+                let hour = this.selectedHour;
+                if (this.is12HourFormat()) {
+                    if (this.selectedAmPm === 'PM' && hour !== 12) {
+                        hour += 12;
+                    }
+                    else if (this.selectedAmPm === 'AM' && hour === 12) {
+                        hour = 0;
+                    }
+                }
+                this.currentSelection = this.currentSelection
+                    .hour(hour)
+                    .minute(this.selectedMinute);
+            }
+            let maxDate = null;
+            let minDate = null;
+            if (this.data.dpConfig.maxDate) {
+                try {
+                    maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format).endOf("day");
+                }
+                catch (error) {
+                    // Silently handle max date parsing error
+                }
+            }
+            if (this.data.dpConfig.minDate) {
+                try {
+                    minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format).startOf("day");
+                }
+                catch (error) {
+                    // Silently handle min date parsing error
+                }
+            }
+            this.allowBookingOnDisabledDay = this.data.allowBookingOnDisabledDay;
+            if (((!minDate || this.currentSelection.isSameOrAfter(minDate)) && (!maxDate || this.currentSelection.isSameOrBefore(maxDate)) && this.allowBookingOnDisabledDay) || (!day.isDisabledDay && !this.allowBookingOnDisabledDay)) {
+                this.localSelectedDate = {
+                    ...day,
+                    month: this.currentMonthNumber,
+                    year: this.currentYearNumber
+                };
+                // Force calendar re-render to show highlighting
+                this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+                // Automatically show apply button when time is enabled, otherwise apply immediately
+                if (!this.data.dpConfig.enableTime) {
+                    this.applyDate(day);
+                }
+            }
+            if (day.toastMessage || (this.allowBookingOnDisabledDay && day.toastMessage)) {
+                this.toast.displayMsg(day.toastMessage, 4000);
             }
         }
-        if (day.toastMessage || (this.allowBookingOnDisabledDay && day.toastMessage)) {
-            this.toast.displayMsg(day.toastMessage, 4000);
+        catch (error) {
+            // Silently handle selectDay error
         }
     }
     applyDate(day) {
-        if (day || this.localSelectedDate) {
-            this.data.dateChange(dayjs()
-                .year(this.currentYearNumber)
-                .month(this.currentMonthNumber)
-                .date(day ? day.date : this.localSelectedDate.date)
-                .format(this.data.dpConfig.format));
+        let date;
+        try {
+            if (this.data.dpConfig.enableTime === true) {
+                // Always use time input values when time is enabled, regardless of currentSelection
+                let hour = this.selectedHour;
+                if (this.is12HourFormat()) {
+                    if (this.selectedAmPm === 'PM' && hour !== 12) {
+                        hour += 12;
+                    }
+                    else if (this.selectedAmPm === 'AM' && hour === 12) {
+                        hour = 0;
+                    }
+                }
+                // Create a new date instance with the selected time
+                const finalSelection = dayjs()
+                    .year(this.currentYearNumber)
+                    .month(this.currentMonthNumber)
+                    .date(this.localSelectedDate?.date || day?.date || dayjs().date())
+                    .hour(hour)
+                    .minute(this.selectedMinute)
+                    .second(0)
+                    .millisecond(0);
+                date = finalSelection.format(this.data.dpConfig.format);
+            }
+            else {
+                // Date-only format - no time
+                date = dayjs()
+                    .year(this.currentYearNumber)
+                    .month(this.currentMonthNumber)
+                    .date(day ? day.date : this.localSelectedDate?.date || dayjs().date())
+                    .hour(0)
+                    .minute(0)
+                    .second(0)
+                    .millisecond(0)
+                    .format(this.data.dpConfig.format);
+            }
+            if (day || this.localSelectedDate || (this.data.dpConfig.enableTime === true)) {
+                this.data.dateChange(date);
+            }
+            else {
+                this.cancelDatePicker();
+            }
         }
-        else {
-            this.cancelDatePicker();
+        catch (error) {
+            // Silently handle applyDate error
+            this.data.dateChange("");
         }
     }
     closeOnEsc() {
@@ -438,10 +847,10 @@ class TzDpContainerComponent {
         this.resetDateSelection();
         this.calculateDisabledMonthsAndYears();
     }
-    static { this.ɵfac = function TzDpContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TzDpContainerComponent)(i0.ɵɵdirectiveInject(CONTAINER_DATA), i0.ɵɵdirectiveInject(i1.ToastService)); }; }
+    static { this.ɵfac = function TzDpContainerComponent_Factory(t) { return new (t || TzDpContainerComponent)(i0.ɵɵdirectiveInject(CONTAINER_DATA), i0.ɵɵdirectiveInject(i1.ToastService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzDpContainerComponent, selectors: [["mis-tz-dp"]], hostBindings: function TzDpContainerComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.esc", function TzDpContainerComponent_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
-        } }, decls: 17, vars: 15, consts: [["aria-label", "date picker", "cdkTrapFocus", "", 1, "datepicker-container", 3, "ngClass", "cdkTrapFocusAutoCapture"], ["tabindex", "-1", "cdkFocusInitial", ""], [1, "datepicker-container__header"], ["tabindex", "0", "aria-label", "Previous Month", 1, "datepicker-container__arrow__icon", 3, "click", "keyup.enter", "ngClass"], ["width", "20", "height", "16", "viewBox", "0 0 20 16", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z", "fill", "#181F33"], ["class", "month-header", 3, "click", 4, "ngIf"], ["class", "year-header", 3, "click", 4, "ngIf"], ["tabindex", "0", "aria-label", "Next Month", 1, "datepicker-container__arrow__icon", 3, "click", "keyup.enter", "ngClass"], [1, "datepicker-container__body"], ["class", "month-selector", 4, "ngIf"], ["class", "year-selector", 4, "ngIf"], ["class", "datepicker-container__weekdays", 4, "ngIf"], ["class", "datepicker-container__days", 4, "ngIf"], ["class", "datepicker-container__footer", 4, "ngIf"], [1, "month-header", 3, "click"], [1, "year-header", 3, "click"], [1, "month-selector"], [1, "row"], ["class", "month", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "month", 3, "click", "ngClass"], [1, "year-selector"], ["class", "year", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "year", 3, "click", "ngClass"], [1, "datepicker-container__weekdays"], ["class", "datepicker-container__weekday", 4, "ngFor", "ngForOf"], [1, "datepicker-container__weekday"], [3, "ngClass"], [1, "datepicker-container__days"], ["class", "datepicker-container__day", 3, "ngClass", "click", "keyup.enter", 4, "ngFor", "ngForOf"], [1, "datepicker-container__day", 3, "click", "keyup.enter", "ngClass"], [3, "tabindex", "ngClass", 4, "ngIf"], [3, "tabindex", "ngClass"], [1, "datepicker-container__footer"], ["mis-button", "", "size", "md", "type", "'none'", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "click", "disabled"]], template: function TzDpContainerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 18, vars: 16, consts: [["aria-label", "date picker", "cdkTrapFocus", "", 1, "datepicker-container", 3, "ngClass", "cdkTrapFocusAutoCapture"], ["tabindex", "-1", "cdkFocusInitial", ""], [1, "datepicker-container__header"], ["tabindex", "0", "aria-label", "Previous Month", 1, "datepicker-container__arrow__icon", 3, "click", "keyup.enter", "ngClass"], ["width", "20", "height", "16", "viewBox", "0 0 20 16", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z", "fill", "#181F33"], ["class", "month-header", 3, "click", 4, "ngIf"], ["class", "year-header", 3, "click", 4, "ngIf"], ["tabindex", "0", "aria-label", "Next Month", 1, "datepicker-container__arrow__icon", 3, "click", "keyup.enter", "ngClass"], [1, "datepicker-container__body"], ["class", "month-selector", 4, "ngIf"], ["class", "year-selector", 4, "ngIf"], ["class", "datepicker-container__weekdays", 4, "ngIf"], ["class", "datepicker-container__days", 4, "ngIf"], ["class", "datepicker-container__time", 4, "ngIf"], ["class", "datepicker-container__footer", 4, "ngIf"], [1, "month-header", 3, "click"], [1, "year-header", 3, "click"], [1, "month-selector"], [1, "row"], ["class", "month", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "month", 3, "click", "ngClass"], [1, "year-selector"], ["class", "year", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "year", 3, "click", "ngClass"], [1, "datepicker-container__weekdays"], ["class", "datepicker-container__weekday", 4, "ngFor", "ngForOf"], [1, "datepicker-container__weekday"], [3, "ngClass"], [1, "datepicker-container__days"], ["class", "datepicker-container__day", 3, "ngClass", "click", "keyup.enter", 4, "ngFor", "ngForOf"], [1, "datepicker-container__day", 3, "click", "keyup.enter", "ngClass"], [3, "tabindex", "ngClass", 4, "ngIf"], [3, "tabindex", "ngClass"], [1, "datepicker-container__time"], [1, "time-picker-header"], [1, "time-picker-controls"], [1, "time-input-group"], ["for", "hourInput"], ["id", "hourInput", "type", "number", 1, "time-input", 3, "ngModelChange", "input", "blur", "min", "max", "step", "ngModel", "title"], [1, "time-separator"], ["for", "minuteInput"], ["id", "minuteInput", "type", "number", "min", "0", "max", "59", "title", "Enter minute (0-59)", 1, "time-input", 3, "ngModelChange", "input", "blur", "step", "ngModel"], ["class", "am-pm-selector", 4, "ngIf"], [1, "am-pm-selector"], ["for", "amPmSelect"], ["id", "amPmSelect", 1, "am-pm-select", 3, "ngModelChange", "ngModel"], ["value", "AM"], ["value", "PM"], [1, "datepicker-container__footer"], ["mis-button", "", "size", "md", "type", "'none'", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "click", "disabled"]], template: function TzDpContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "div", 1);
             i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
@@ -462,18 +871,18 @@ class TzDpContainerComponent {
             i0.ɵɵelementStart(11, "div", 9);
             i0.ɵɵtemplate(12, TzDpContainerComponent_div_12_Template, 3, 1, "div", 10)(13, TzDpContainerComponent_div_13_Template, 3, 1, "div", 11)(14, TzDpContainerComponent_div_14_Template, 2, 1, "div", 12)(15, TzDpContainerComponent_div_15_Template, 2, 1, "div", 13);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(16, TzDpContainerComponent_div_16_Template, 5, 1, "div", 14);
+            i0.ɵɵtemplate(16, TzDpContainerComponent_div_16_Template, 16, 8, "div", 14)(17, TzDpContainerComponent_div_17_Template, 5, 1, "div", 15);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.data.disableBoxShadow ? "remove-box-shadow" : "")("cdkTrapFocusAutoCapture", true);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c0, ctx.isPreviousMonthDisabled || ctx.isSelectingMonth));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c0, ctx.isPreviousMonthDisabled || ctx.isSelectingMonth));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", !ctx.isSelectingYear);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c0, ctx.isNextMonthDisabled || ctx.isSelectingMonth));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c0, ctx.isNextMonthDisabled || ctx.isSelectingMonth));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngIf", ctx.isSelectingMonth && !ctx.isSelectingYear);
             i0.ɵɵadvance();
@@ -483,12 +892,14 @@ class TzDpContainerComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth && !ctx.isSelectingYear);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.data.dpConfig.showApplyButton);
-        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.ButtonDirective, i4.CdkTrapFocus], styles: [".h1[_ngcontent-%COMP%]{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2[_ngcontent-%COMP%]{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3[_ngcontent-%COMP%]{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4[_ngcontent-%COMP%]{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b[_ngcontent-%COMP%]{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5[_ngcontent-%COMP%]{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b[_ngcontent-%COMP%]{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .year[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b[_ngcontent-%COMP%]{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8[_ngcontent-%COMP%]{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9[_ngcontent-%COMP%]{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1[_ngcontent-%COMP%]{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.datepicker-container[_ngcontent-%COMP%]{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .month-header[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .year-header[_ngcontent-%COMP%]{padding:8px;border-radius:10px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .month-header[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .year-header[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:var(--brand-primary-active, #DAE1F3)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]{width:258px;height:100%;margin:0 16px 16px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .row[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .year[_ngcontent-%COMP%]{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:var(--bg-primary, #FFFFFF)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .year[_ngcontent-%COMP%]:hover{background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-year[_ngcontent-%COMP%]{cursor:default;color:var(--text-disabled, #C8CDD3)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-year[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-year[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);color:var(--bg-primary, #FFFFFF)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-year[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]   .datepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]   .datepicker-container__weekday[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:var(--text-disabled, #C8CDD3)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]   .datepicker-container__weekday[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:var(--text-primary, #181F33)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.selected-day[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);cursor:pointer}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover{background-color:var(--brand-primary-lightest, #CBDDFB);cursor:pointer}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover   span.selected-day[_ngcontent-%COMP%]{color:var(--text-primary, #181F33)!important}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:var(--text-primary, #181F33)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]   span.selected-day[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]   span.disabled-day[_ngcontent-%COMP%]{color:var(--text-disabled, #C8CDD3)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__footer[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid var(--border-primary, #E0E0E0)}.remove-box-shadow[_ngcontent-%COMP%]{box-shadow:none!important;border:none!important;border-radius:0!important}"] }); }
+            i0.ɵɵproperty("ngIf", ctx.data.dpConfig.enableTime === true);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.data.dpConfig.showApplyButton || ctx.data.dpConfig.enableTime);
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.NumberValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.MinValidator, i3.MaxValidator, i3.NgModel, i4.ButtonDirective, i5.CdkTrapFocus], styles: [".h1[_ngcontent-%COMP%]{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2[_ngcontent-%COMP%]{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3[_ngcontent-%COMP%]{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4[_ngcontent-%COMP%]{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b[_ngcontent-%COMP%]{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5[_ngcontent-%COMP%]{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b[_ngcontent-%COMP%]{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .year[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b[_ngcontent-%COMP%]{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8[_ngcontent-%COMP%]{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9[_ngcontent-%COMP%]{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1[_ngcontent-%COMP%]{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}.datepicker-container[_ngcontent-%COMP%]{background:#fff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .month-header[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .year-header[_ngcontent-%COMP%]{padding:8px;border-radius:10px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .month-header[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .year-header[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:#e6ebf7}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]{width:258px;height:100%;margin:0 16px 16px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .row[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .year[_ngcontent-%COMP%]{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:#fff}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .year[_ngcontent-%COMP%]:hover{background-color:#cbddfb}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-year[_ngcontent-%COMP%]{cursor:default;color:#c8cdd3}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-year[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-year[_ngcontent-%COMP%]{background-color:#0937b2;color:#fff}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-year[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:#cbddfb}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]   .datepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]   .datepicker-container__weekday[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#c7c7c7}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]   .datepicker-container__weekday[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#181f33}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.selected-day[_ngcontent-%COMP%]{background-color:#0937b2;cursor:pointer}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover{background-color:#cbddfb;cursor:pointer}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover   span.selected-day[_ngcontent-%COMP%]{color:#181f33!important}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]   span.selected-day[_ngcontent-%COMP%]{color:#fff}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]   span.disabled-day[_ngcontent-%COMP%]{color:#c7c7c7}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]{border-top:1px solid #e0e0e0;padding:16px;margin:0 16px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-header[_ngcontent-%COMP%]{margin-bottom:12px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:14px;font-weight:600;color:#181f33}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .time-input-group[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:4px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .time-input-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{font-size:12px;font-weight:500;color:#6a737d}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .time-input-group[_ngcontent-%COMP%]   .time-input[_ngcontent-%COMP%]{width:50px;height:32px;padding:4px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;text-align:center}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .time-input-group[_ngcontent-%COMP%]   .time-input[_ngcontent-%COMP%]:focus{outline:none;border-color:#0937b2;box-shadow:0 0 0 2px #0937b21a}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .time-input-group[_ngcontent-%COMP%]   .time-input[_ngcontent-%COMP%]:invalid{border-color:#dc3545;background-color:#fff5f5}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .time-input-group[_ngcontent-%COMP%]   .time-input[_ngcontent-%COMP%]::-webkit-inner-spin-button, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .time-input-group[_ngcontent-%COMP%]   .time-input[_ngcontent-%COMP%]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .time-input-group[_ngcontent-%COMP%]   .time-input[type=number][_ngcontent-%COMP%]{-moz-appearance:textfield}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .time-separator[_ngcontent-%COMP%]{font-size:18px;font-weight:600;color:#181f33;margin-top:20px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .am-pm-selector[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:4px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .am-pm-selector[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{font-size:12px;font-weight:500;color:#6a737d}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .am-pm-selector[_ngcontent-%COMP%]   .am-pm-select[_ngcontent-%COMP%]{width:60px;height:42px;padding:4px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;background-color:#fff}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__time[_ngcontent-%COMP%]   .time-picker-controls[_ngcontent-%COMP%]   .am-pm-selector[_ngcontent-%COMP%]   .am-pm-select[_ngcontent-%COMP%]:focus{outline:none;border-color:#0937b2;box-shadow:0 0 0 2px #0937b21a}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__footer[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid #e0e0e0}.remove-box-shadow[_ngcontent-%COMP%]{box-shadow:none!important;border:none!important;border-radius:0!important}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDpContainerComponent, [{
         type: Component,
-        args: [{ selector: "mis-tz-dp", template: "<div class=\"datepicker-container\" [ngClass]=\"data.disableBoxShadow?'remove-box-shadow':''\" aria-label=\"date picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <div tabindex=\"-1\" cdkFocusInitial></div>\n  <div class=\"datepicker-container__header\">\n    <div\n      class=\"datepicker-container__arrow__icon\"\n      (click)=\"navigateView('PREVIOUS')\"\n      tabindex=\"0\"\n      aria-label=\"Previous Month\"\n      (keyup.enter)=\"navigateView('PREVIOUS')\"\n      [ngClass]=\"{\n        'disabled-month': isPreviousMonthDisabled || isSelectingMonth\n      }\"\n    >\n      <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n          fill=\"#181F33\"\n        ></path>\n      </svg>\n    </div>\n\n    <div *ngIf=\"!isSelectingYear\" (click)=\"toggleMonthSelector()\" class=\"month-header\">\n      {{ isYearSelectionFlow ? selectedYear : availableMonths[currentMonthNumber] }}\n    </div>\n    <div *ngIf=\"!isSelectingMonth\" (click)=\"toggleYearSelector()\" class=\"year-header\">\n      {{ isSelectingYear ? yearRange : currentYearNumber }}\n    </div>\n\n\n    <div\n      class=\"datepicker-container__arrow__icon\"\n      (click)=\"navigateView('NEXT')\"\n      tabindex=\"0\"\n      aria-label=\"Next Month\"\n      (keyup.enter)=\"navigateView('NEXT')\"\n      [ngClass]=\"{\n        'disabled-month': isNextMonthDisabled || isSelectingMonth\n      }\"\n    >\n      <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n          fill=\"#181F33\"\n        ></path>\n      </svg>\n    </div>\n  </div>\n  <div class=\"datepicker-container__body\">\n\n    <div *ngIf=\"isSelectingMonth && !isSelectingYear\" class=\"month-selector\">\n      <div class=\"row\">\n        <div *ngFor=\"let month of availableMonths; let i = index\" \n            class=\"month\" \n            (click)=\"!disabledMonths[i] && selectMonth(month)\" \n            [ngClass]=\"{\n              'disable-month': disabledMonths[i],\n              'select-month': !disabledMonths[currentMonthNumber] && month === availableMonths[currentMonthNumber]\n            }\">\n          {{ month }}\n        </div>\n      </div>\n    </div>\n  \n    <div *ngIf=\"isSelectingYear && !isSelectingMonth\" class=\"year-selector\">\n      <div class=\"row\">\n        <div *ngFor=\"let year of availableYears; let i = index\" \n            class=\"year\" \n            (click)=\"!disabledYears[i] && selectYear(year)\" \n            [ngClass]=\"{\n              'disable-year': disabledYears[i],\n              'select-year': year === currentYearNumber\n            }\">\n          {{ year }}\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__weekdays\">\n      <div class=\"datepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n        <span [ngClass]=\"{ 'current-day': weekDay.isCurrentDay }\">{{ weekDay.label }}</span>\n      </div>\n    </div>\n    <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__days\">\n      <div\n        class=\"datepicker-container__day\"\n        [ngClass]=\"{\n          'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n          'disabled-day': day.isDisabledDay,\n          'is-valid-date': day.date > 0 && !day.isSelectedDay\n        }\"\n        *ngFor=\"let day of currentMonthDates\"\n        (click)=\"selectDay(day)\"\n        (keyup.enter)=\"selectDay(day)\"\n      >\n        <span\n          *ngIf=\"day.date > 0\"\n          [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n          [ngClass]=\"{\n            'current-day': day.isCurrentDay,\n            'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n            'disabled-day': day.isDisabledDay\n          }\"\n          [attr.aria-label]=\"retractDayMonth(day.date, currentMonth, currentYearNumber)\"\n        >\n          {{ day.date }}\n        </span>\n      </div>\n    </div>\n  </div>\n  <div class=\"datepicker-container__footer\" *ngIf=\"data.dpConfig.showApplyButton\">\n    <button mis-button size=\"md\" type=\"'none'\" (click)=\"cancelDatePicker()\">Cancel</button>\n    <button mis-button size=\"md\" type=\"primary\" (click)=\"applyDate()\" [disabled]=\"!(data.date || localSelectedDate.date)\">Apply</button>\n  </div>\n</div>\n", styles: [".h1{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7,.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.datepicker-container{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container .datepicker-container__header{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container .datepicker-container__header span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container .datepicker-container__header .month-header,.datepicker-container .datepicker-container__header .year-header{padding:8px;border-radius:10px}.datepicker-container .datepicker-container__header .month-header:hover,.datepicker-container .datepicker-container__header .year-header:hover{cursor:pointer;background-color:var(--brand-primary-active, #DAE1F3)}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}.datepicker-container .datepicker-container__body{width:258px;height:100%;margin:0 16px 16px}.datepicker-container .datepicker-container__body .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:var(--bg-primary, #FFFFFF)}.datepicker-container .datepicker-container__body .month:hover,.datepicker-container .datepicker-container__body .year:hover{background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container .datepicker-container__body .disable-month,.datepicker-container .datepicker-container__body .disable-year{cursor:default;color:var(--text-disabled, #C8CDD3)}.datepicker-container .datepicker-container__body .disable-month:hover,.datepicker-container .datepicker-container__body .disable-year:hover{background-color:transparent}.datepicker-container .datepicker-container__body .select-month,.datepicker-container .datepicker-container__body .select-year{background-color:var(--brand-primary, #0937B2);color:var(--bg-primary, #FFFFFF)}.datepicker-container .datepicker-container__body .select-month:hover,.datepicker-container .datepicker-container__body .select-year:hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.datepicker-container .datepicker-container__body .datepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday{width:36px;height:18px;text-align:center}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:var(--text-disabled, #C8CDD3)}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:var(--text-primary, #181F33)}.datepicker-container .datepicker-container__body .datepicker-container__days{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.selected-day{background-color:var(--brand-primary, #0937B2);cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day{cursor:default}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day:hover{background-color:transparent}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover{background-color:var(--brand-primary-lightest, #CBDDFB);cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover span.selected-day{color:var(--text-primary, #181F33)!important}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:var(--text-primary, #181F33)}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.selected-day{color:var(--bg-primary, #FFFFFF)}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.disabled-day{color:var(--text-disabled, #C8CDD3)}.datepicker-container .datepicker-container__footer{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid var(--border-primary, #E0E0E0)}.remove-box-shadow{box-shadow:none!important;border:none!important;border-radius:0!important}\n"] }]
+        args: [{ selector: "mis-tz-dp", template: "<div class=\"datepicker-container\" [ngClass]=\"data.disableBoxShadow?'remove-box-shadow':''\" aria-label=\"date picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <div tabindex=\"-1\" cdkFocusInitial></div>\n  <div class=\"datepicker-container__header\">\n    <div\n      class=\"datepicker-container__arrow__icon\"\n      (click)=\"navigateView('PREVIOUS')\"\n      tabindex=\"0\"\n      aria-label=\"Previous Month\"\n      (keyup.enter)=\"navigateView('PREVIOUS')\"\n      [ngClass]=\"{\n        'disabled-month': isPreviousMonthDisabled || isSelectingMonth\n      }\"\n    >\n      <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n          fill=\"#181F33\"\n        ></path>\n      </svg>\n    </div>\n\n    <div *ngIf=\"!isSelectingYear\" (click)=\"toggleMonthSelector()\" class=\"month-header\">\n      {{ isYearSelectionFlow ? selectedYear : availableMonths[currentMonthNumber] }}\n    </div>\n    <div *ngIf=\"!isSelectingMonth\" (click)=\"toggleYearSelector()\" class=\"year-header\">\n      {{ isSelectingYear ? yearRange : currentYearNumber }}\n    </div>\n\n\n    <div\n      class=\"datepicker-container__arrow__icon\"\n      (click)=\"navigateView('NEXT')\"\n      tabindex=\"0\"\n      aria-label=\"Next Month\"\n      (keyup.enter)=\"navigateView('NEXT')\"\n      [ngClass]=\"{\n        'disabled-month': isNextMonthDisabled || isSelectingMonth\n      }\"\n    >\n      <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n          fill=\"#181F33\"\n        ></path>\n      </svg>\n    </div>\n  </div>\n  <div class=\"datepicker-container__body\">\n\n    <div *ngIf=\"isSelectingMonth && !isSelectingYear\" class=\"month-selector\">\n      <div class=\"row\">\n        <div *ngFor=\"let month of availableMonths; let i = index\" \n            class=\"month\" \n            (click)=\"!disabledMonths[i] && selectMonth(month)\" \n            [ngClass]=\"{\n              'disable-month': disabledMonths[i],\n              'select-month': !disabledMonths[currentMonthNumber] && month === availableMonths[currentMonthNumber]\n            }\">\n          {{ month }}\n        </div>\n      </div>\n    </div>\n  \n    <div *ngIf=\"isSelectingYear && !isSelectingMonth\" class=\"year-selector\">\n      <div class=\"row\">\n        <div *ngFor=\"let year of availableYears; let i = index\" \n            class=\"year\" \n            (click)=\"!disabledYears[i] && selectYear(year)\" \n            [ngClass]=\"{\n              'disable-year': disabledYears[i],\n              'select-year': year === currentYearNumber\n            }\">\n          {{ year }}\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__weekdays\">\n      <div class=\"datepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n        <span [ngClass]=\"{ 'current-day': weekDay.isCurrentDay }\">{{ weekDay.label }}</span>\n      </div>\n    </div>\n    <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__days\">\n      <div\n        class=\"datepicker-container__day\"\n        [ngClass]=\"{\n          'selected-day': day.isSelectedDay,\n          'disabled-day': day.isDisabledDay,\n          'is-valid-date': day.date > 0 && !day.isSelectedDay\n        }\"\n        *ngFor=\"let day of currentMonthDates\"\n        (click)=\"selectDay(day)\"\n        (keyup.enter)=\"selectDay(day)\"\n      >\n        <span\n          *ngIf=\"day.date > 0\"\n          [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n          [ngClass]=\"{\n            'current-day': day.isCurrentDay,\n            'selected-day': day.isSelectedDay,\n            'disabled-day': day.isDisabledDay\n          }\"\n          [attr.aria-label]=\"retractDayMonth(day.date, currentMonth, currentYearNumber)\"\n        >\n          {{ day.date }}\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Time Picker Section -->\n  <div class=\"datepicker-container__time\" *ngIf=\"data.dpConfig.enableTime === true\">\n    <div class=\"time-picker-header\">\n      <span>Time</span>\n    </div>\n    <div class=\"time-picker-controls\">\n      <div class=\"time-input-group\">\n        <label for=\"hourInput\">Hour</label>\n        <input \n          id=\"hourInput\"\n          type=\"number\" \n          [min]=\"is12HourFormat() ? 1 : 0\"\n          [max]=\"is12HourFormat() ? 12 : 23\"\n          [step]=\"1\"\n          [(ngModel)]=\"selectedHour\"\n          (input)=\"onHourInput($event)\"\n          (blur)=\"validateHourInput()\"\n          class=\"time-input\"\n          [title]=\"is12HourFormat() ? 'Enter hour (1-12)' : 'Enter hour (0-23)'\">\n      </div>\n      <div class=\"time-separator\">:</div>\n      <div class=\"time-input-group\">\n        <label for=\"minuteInput\">Minute</label>\n        <input \n          id=\"minuteInput\"\n          type=\"number\" \n          min=\"0\" \n          max=\"59\"\n          [step]=\"1\"\n          [(ngModel)]=\"selectedMinute\"\n          (input)=\"onMinuteInput($event)\"\n          (blur)=\"validateMinuteInput()\"\n          class=\"time-input\"\n          title=\"Enter minute (0-59)\">\n      </div>\n      <div class=\"am-pm-selector\" *ngIf=\"is12HourFormat()\">\n        <label for=\"amPmSelect\">AM/PM</label>\n        <select \n          id=\"amPmSelect\"\n          [(ngModel)]=\"selectedAmPm\"\n          class=\"am-pm-select\">\n          <option value=\"AM\">AM</option>\n          <option value=\"PM\">PM</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"datepicker-container__footer\" *ngIf=\"data.dpConfig.showApplyButton || data.dpConfig.enableTime\">\n    <button mis-button size=\"md\" type=\"'none'\" (click)=\"cancelDatePicker()\">Cancel</button>\n    <button mis-button size=\"md\" type=\"primary\" (click)=\"applyDate()\" [disabled]=\"!(data.date || localSelectedDate.date)\">Apply</button>\n  </div>\n</div>\n", styles: [".h1{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7,.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}.datepicker-container{background:#fff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container .datepicker-container__header{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container .datepicker-container__header span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container .datepicker-container__header .month-header,.datepicker-container .datepicker-container__header .year-header{padding:8px;border-radius:10px}.datepicker-container .datepicker-container__header .month-header:hover,.datepicker-container .datepicker-container__header .year-header:hover{cursor:pointer;background-color:#e6ebf7}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}.datepicker-container .datepicker-container__body{width:258px;height:100%;margin:0 16px 16px}.datepicker-container .datepicker-container__body .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:#fff}.datepicker-container .datepicker-container__body .month:hover,.datepicker-container .datepicker-container__body .year:hover{background-color:#cbddfb}.datepicker-container .datepicker-container__body .disable-month,.datepicker-container .datepicker-container__body .disable-year{cursor:default;color:#c8cdd3}.datepicker-container .datepicker-container__body .disable-month:hover,.datepicker-container .datepicker-container__body .disable-year:hover{background-color:transparent}.datepicker-container .datepicker-container__body .select-month,.datepicker-container .datepicker-container__body .select-year{background-color:#0937b2;color:#fff}.datepicker-container .datepicker-container__body .select-month:hover,.datepicker-container .datepicker-container__body .select-year:hover{cursor:pointer;background-color:#cbddfb}.datepicker-container .datepicker-container__body .datepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday{width:36px;height:18px;text-align:center}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#c7c7c7}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:#181f33}.datepicker-container .datepicker-container__body .datepicker-container__days{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.selected-day{background-color:#0937b2;cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day{cursor:default}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day:hover{background-color:transparent}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover{background-color:#cbddfb;cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover span.selected-day{color:#181f33!important}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.selected-day{color:#fff}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.disabled-day{color:#c7c7c7}.datepicker-container .datepicker-container__time{border-top:1px solid #e0e0e0;padding:16px;margin:0 16px}.datepicker-container .datepicker-container__time .time-picker-header{margin-bottom:12px}.datepicker-container .datepicker-container__time .time-picker-header span{font-size:14px;font-weight:600;color:#181f33}.datepicker-container .datepicker-container__time .time-picker-controls{display:flex;align-items:center;gap:8px}.datepicker-container .datepicker-container__time .time-picker-controls .time-input-group{display:flex;flex-direction:column;gap:4px}.datepicker-container .datepicker-container__time .time-picker-controls .time-input-group label{font-size:12px;font-weight:500;color:#6a737d}.datepicker-container .datepicker-container__time .time-picker-controls .time-input-group .time-input{width:50px;height:32px;padding:4px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;text-align:center}.datepicker-container .datepicker-container__time .time-picker-controls .time-input-group .time-input:focus{outline:none;border-color:#0937b2;box-shadow:0 0 0 2px #0937b21a}.datepicker-container .datepicker-container__time .time-picker-controls .time-input-group .time-input:invalid{border-color:#dc3545;background-color:#fff5f5}.datepicker-container .datepicker-container__time .time-picker-controls .time-input-group .time-input::-webkit-inner-spin-button,.datepicker-container .datepicker-container__time .time-picker-controls .time-input-group .time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.datepicker-container .datepicker-container__time .time-picker-controls .time-input-group .time-input[type=number]{-moz-appearance:textfield}.datepicker-container .datepicker-container__time .time-picker-controls .time-separator{font-size:18px;font-weight:600;color:#181f33;margin-top:20px}.datepicker-container .datepicker-container__time .time-picker-controls .am-pm-selector{display:flex;flex-direction:column;gap:4px}.datepicker-container .datepicker-container__time .time-picker-controls .am-pm-selector label{font-size:12px;font-weight:500;color:#6a737d}.datepicker-container .datepicker-container__time .time-picker-controls .am-pm-selector .am-pm-select{width:60px;height:42px;padding:4px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;background-color:#fff}.datepicker-container .datepicker-container__time .time-picker-controls .am-pm-selector .am-pm-select:focus{outline:none;border-color:#0937b2;box-shadow:0 0 0 2px #0937b21a}.datepicker-container .datepicker-container__footer{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid #e0e0e0}.remove-box-shadow{box-shadow:none!important;border:none!important;border-radius:0!important}\n"] }]
     }], () => [{ type: undefined, decorators: [{
                 type: Inject,
                 args: [CONTAINER_DATA]
@@ -620,7 +1031,7 @@ class TzDatepickerDirective {
         this.overlayRef?.detach();
         this.overlayRef?.dispose();
     }
-    static { this.ɵfac = function TzDatepickerDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TzDatepickerDirective)(i0.ɵɵdirectiveInject(i1$1.NgControl, 10), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i2$1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); }; }
+    static { this.ɵfac = function TzDatepickerDirective_Factory(t) { return new (t || TzDatepickerDirective)(i0.ɵɵdirectiveInject(i3.NgControl, 10), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i2$1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TzDatepickerDirective, selectors: [["input", "misTzDp", ""]], hostBindings: function TzDatepickerDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function TzDatepickerDirective_click_HostBindingHandler() { return ctx.toggleDatePicker(); })("keydown.enter", function TzDatepickerDirective_keydown_enter_HostBindingHandler() { return ctx.toggleDatePickerOnEnter(); })("keydown.esc", function TzDatepickerDirective_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
         } }, inputs: { dpConfig: "dpConfig", selectedDate: "selectedDate", datesDisabled: "datesDisabled", dateMessages: "dateMessages", positionX: "positionX", positionY: "positionY", offsetX: "offsetX", offsetY: "offsetY", allowBookingOnDisabledDay: "allowBookingOnDisabledDay", disableBoxShadow: "disableBoxShadow", disableOverLay: "disableOverLay", openElement: "openElement" }, outputs: { dateChange: "dateChange" }, features: [i0.ɵɵNgOnChangesFeature] }); }
@@ -630,7 +1041,7 @@ class TzDatepickerDirective {
         args: [{
                 selector: "input[misTzDp]"
             }]
-    }], () => [{ type: i1$1.NgControl, decorators: [{
+    }], () => [{ type: i3.NgControl, decorators: [{
                 type: Self
             }, {
                 type: Optional
@@ -672,19 +1083,19 @@ class TzDatepickerDirective {
         }] }); })();
 
 class DatepickerModuleV2 {
-    static { this.ɵfac = function DatepickerModuleV2_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DatepickerModuleV2)(); }; }
+    static { this.ɵfac = function DatepickerModuleV2_Factory(t) { return new (t || DatepickerModuleV2)(); }; }
     static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: DatepickerModuleV2 }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, OverlayModule, ToastModule.forRoot(), ButtonModule, A11yModule] }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, FormsModule, OverlayModule, ToastModule.forRoot(), ButtonModule, A11yModule] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatepickerModuleV2, [{
         type: NgModule,
         args: [{
                 declarations: [TzDpContainerComponent, TzDatepickerDirective],
-                imports: [CommonModule, OverlayModule, ToastModule.forRoot(), ButtonModule, A11yModule],
+                imports: [CommonModule, FormsModule, OverlayModule, ToastModule.forRoot(), ButtonModule, A11yModule],
                 exports: [TzDpContainerComponent, TzDatepickerDirective]
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DatepickerModuleV2, { declarations: [TzDpContainerComponent, TzDatepickerDirective], imports: [CommonModule, OverlayModule, i1.ToastModule, ButtonModule, A11yModule], exports: [TzDpContainerComponent, TzDatepickerDirective] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DatepickerModuleV2, { declarations: [TzDpContainerComponent, TzDatepickerDirective], imports: [CommonModule, FormsModule, OverlayModule, i1.ToastModule, ButtonModule, A11yModule], exports: [TzDpContainerComponent, TzDatepickerDirective] }); })();
 
 /**
  * Generated bundle index. Do not edit.