mis-crystal-design-system 18.0.24 → 18.1.0-signal-test

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, Inject, HostListener, EventEmitter, Injector, Directive, Self, Optional, Input, Output, NgModule } from '@angular/core';
+import { InjectionToken, signal, computed, Component, Inject, HostListener, input, output, effect, Injector, Directive, Self, Optional, NgModule } from '@angular/core';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
@@ -72,6 +72,7 @@ const getMonth = (index) => {
             month = "December";
             break;
         default:
+            month = null;
             break;
     }
     return month;
@@ -92,7 +93,7 @@ function TzDpContainerComponent_div_6_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isYearSelectionFlow ? ctx_r1.selectedYear : ctx_r1.availableMonths[ctx_r1.currentMonthNumber], " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isYearSelectionFlow() ? ctx_r1.selectedYear() : ctx_r1.availableMonths()[ctx_r1.currentMonthNumber()], " ");
 } }
 function TzDpContainerComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -103,19 +104,19 @@ function TzDpContainerComponent_div_7_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isSelectingYear ? ctx_r1.yearRange : ctx_r1.currentYearNumber, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isSelectingYear() ? ctx_r1.yearRange : ctx_r1.currentYearNumber(), " ");
 } }
 function TzDpContainerComponent_div_12_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     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.ɵɵ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();
 } if (rf & 2) {
     const month_r6 = ctx.$implicit;
     const i_r7 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c1, ctx_r1.disabledMonths[i_r7], !ctx_r1.disabledMonths[ctx_r1.currentMonthNumber] && month_r6 === ctx_r1.availableMonths[ctx_r1.currentMonthNumber]));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c1, ctx_r1.disabledMonths()[i_r7], !ctx_r1.disabledMonths()[ctx_r1.currentMonthNumber()] && month_r6 === ctx_r1.availableMonths()[ctx_r1.currentMonthNumber()]));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", month_r6, " ");
 } }
@@ -126,19 +127,19 @@ function TzDpContainerComponent_div_12_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.availableMonths);
+    i0.ɵɵproperty("ngForOf", ctx_r1.availableMonths());
 } }
 function TzDpContainerComponent_div_13_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     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.ɵɵ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();
 } if (rf & 2) {
     const year_r10 = ctx.$implicit;
     const i_r11 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c2, ctx_r1.disabledYears[i_r11], year_r10 === ctx_r1.currentYearNumber));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c2, ctx_r1.disabledYears()[i_r11], year_r10 === ctx_r1.currentYearNumber()));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", year_r10, " ");
 } }
@@ -149,7 +150,7 @@ function TzDpContainerComponent_div_13_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.availableYears);
+    i0.ɵɵproperty("ngForOf", ctx_r1.availableYears());
 } }
 function TzDpContainerComponent_div_14_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 27)(1, "span", 28);
@@ -169,7 +170,7 @@ function TzDpContainerComponent_div_14_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.weekDays);
+    i0.ɵɵproperty("ngForOf", ctx_r1.weekDays());
 } }
 function TzDpContainerComponent_div_15_div_1_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 33);
@@ -179,7 +180,7 @@ function TzDpContainerComponent_div_15_div_1_span_1_Template(rf, ctx) { if (rf &
     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, day_r14.isSelectedDay, day_r14.isDisabledDay));
-    i0.ɵɵattribute("aria-label", ctx_r1.retractDayMonth(day_r14.date, ctx_r1.currentMonth, ctx_r1.currentYearNumber));
+    i0.ɵɵattribute("aria-label", ctx_r1.retractDayMonth(day_r14.date, ctx_r1.currentMonth(), ctx_r1.currentYearNumber()));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", day_r14.date, " ");
 } }
@@ -202,7 +203,7 @@ function TzDpContainerComponent_div_15_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.currentMonthDates);
+    i0.ɵɵproperty("ngForOf", ctx_r1.currentMonthDates());
 } }
 function TzDpContainerComponent_div_16_div_15_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
@@ -210,7 +211,7 @@ function TzDpContainerComponent_div_16_div_15_Template(rf, ctx) { if (rf & 1) {
     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.ɵɵlistener("ngModelChange", function TzDpContainerComponent_div_16_div_15_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectedAmPmSignal.set($event)); });
     i0.ɵɵelementStart(4, "option", 47);
     i0.ɵɵtext(5, "AM");
     i0.ɵɵelementEnd();
@@ -220,7 +221,7 @@ function TzDpContainerComponent_div_16_div_15_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedAmPm);
+    i0.ɵɵproperty("ngModel", ctx_r1.selectedAmPm());
 } }
 function TzDpContainerComponent_div_16_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
@@ -231,8 +232,7 @@ function TzDpContainerComponent_div_16_Template(rf, ctx) { if (rf & 1) {
     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.ɵɵlistener("ngModelChange", function TzDpContainerComponent_div_16_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectedHourSignal.set($event)); })("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, ":");
@@ -241,20 +241,16 @@ function TzDpContainerComponent_div_16_Template(rf, ctx) { if (rf & 1) {
     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.ɵɵlistener("ngModelChange", function TzDpContainerComponent_div_16_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectedMinuteSignal.set($event)); })("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.ɵɵproperty("min", ctx_r1.is12HourFormat() ? 1 : 0)("max", ctx_r1.is12HourFormat() ? 12 : 23)("step", 1)("ngModel", ctx_r1.selectedHour())("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.ɵɵproperty("step", 1)("ngModel", ctx_r1.selectedMinute());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.is12HourFormat());
 } }
@@ -269,9 +265,10 @@ function TzDpContainerComponent_div_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(4, "Apply");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
+    let tmp_1_0;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", !(ctx_r1.data.date || ctx_r1.localSelectedDate.date));
+    i0.ɵɵproperty("disabled", !(ctx_r1.data.date || ((tmp_1_0 = ctx_r1.localSelectedDate()) == null ? null : tmp_1_0.date)));
 } }
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -285,22 +282,52 @@ class TzDpContainerComponent {
             return dayjs(...args);
         };
         this.rawWeekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
-        this.weekDays = [];
-        this.currentMonthDates = [];
-        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 = [];
-        this.availableMonths = [];
-        this.disabledMonths = [];
-        this.disabledYears = [];
-        this.isYearSelectionFlow = false;
+        // Signal-based state management
+        this.weekDaysSignal = signal([]);
+        this.currentMonthNumberSignal = signal(0);
+        this.currentMonthSignal = signal("January");
+        this.currentYearNumberSignal = signal(0);
+        this.currentMonthDatesSignal = signal([]);
+        this.isPreviousMonthDisabledSignal = signal(false);
+        this.isNextMonthDisabledSignal = signal(false);
+        this.localSelectedDateSignal = signal(null);
+        this.allowBookingOnDisabledDaySignal = signal(false);
+        this.currentSelectionSignal = signal(null);
+        // Time functionality signals
+        this.selectedHourSignal = signal(0);
+        this.selectedMinuteSignal = signal(0);
+        this.selectedAmPmSignal = signal('AM');
+        this.isSelectingMonthSignal = signal(false);
+        this.isSelectingYearSignal = signal(false);
+        this.availableYearsSignal = signal([]);
+        this.availableMonthsSignal = signal([]);
+        this.disabledMonthsSignal = signal([]);
+        this.disabledYearsSignal = signal([]);
+        this.selectedYearSignal = signal(0);
+        this.isYearSelectionFlowSignal = signal(false);
+        // Computed properties for template access
+        this.weekDays = computed(() => this.weekDaysSignal());
+        this.currentMonthNumber = computed(() => this.currentMonthNumberSignal());
+        this.currentMonth = computed(() => this.currentMonthSignal());
+        this.currentYearNumber = computed(() => this.currentYearNumberSignal());
+        this.currentMonthDates = computed(() => this.currentMonthDatesSignal());
+        this.isPreviousMonthDisabled = computed(() => this.isPreviousMonthDisabledSignal());
+        this.isNextMonthDisabled = computed(() => this.isNextMonthDisabledSignal());
+        this.localSelectedDate = computed(() => this.localSelectedDateSignal());
+        this.allowBookingOnDisabledDay = computed(() => this.allowBookingOnDisabledDaySignal());
+        this.currentSelection = computed(() => this.currentSelectionSignal());
+        // Time functionality computed properties
+        this.selectedHour = computed(() => this.selectedHourSignal());
+        this.selectedMinute = computed(() => this.selectedMinuteSignal());
+        this.selectedAmPm = computed(() => this.selectedAmPmSignal());
+        this.isSelectingMonth = computed(() => this.isSelectingMonthSignal());
+        this.isSelectingYear = computed(() => this.isSelectingYearSignal());
+        this.availableYears = computed(() => this.availableYearsSignal());
+        this.availableMonths = computed(() => this.availableMonthsSignal());
+        this.disabledMonths = computed(() => this.disabledMonthsSignal());
+        this.disabledYears = computed(() => this.disabledYearsSignal());
+        this.selectedYear = computed(() => this.selectedYearSignal());
+        this.isYearSelectionFlow = computed(() => this.isYearSelectionFlowSignal());
         this.data = data;
         // Initialize parseZoneInstance with better error handling
         this.parseZoneInstance = (...args) => {
@@ -317,14 +344,14 @@ class TzDpContainerComponent {
                 return dayjs(...args);
             }
         };
-        // Set default values safely
-        this.currentMonthNumber = this.parseZoneInstance().month();
-        this.currentMonth = getMonth(this.currentMonthNumber);
-        this.currentYearNumber = this.parseZoneInstance().year();
-        this.weekDays = this.rawWeekDays.map((day, index) => ({
+        // Set default values safely using signals
+        this.currentMonthNumberSignal.set(this.parseZoneInstance().month());
+        this.currentMonthSignal.set(getMonth(this.currentMonthNumberSignal()));
+        this.currentYearNumberSignal.set(this.parseZoneInstance().year());
+        this.weekDaysSignal.set(this.rawWeekDays.map((day, index) => ({
             label: `${day[0]}${day.slice(1).toLowerCase()}`,
             isCurrentDay: this.parseZoneInstance().day() === index
-        }));
+        })));
         if (!this.data?.dpConfig?.format) {
             this.data.dpConfig = {
                 ...this.data.dpConfig,
@@ -334,8 +361,8 @@ class TzDpContainerComponent {
         if (!this.data?.date) {
             this.data.date = this.parseZoneInstance().format(this.data.dpConfig.format);
         }
-        this.availableMonths = Array.from({ length: 12 }, (_, i) => dayjs().month(i).format('MMMM'));
-        this.availableYears = Array.from({ length: 12 }, (_, index) => this.currentYearNumber - 6 + index);
+        this.availableMonthsSignal.set(Array.from({ length: 12 }, (_, i) => dayjs().month(i).format('MMMM')));
+        this.availableYearsSignal.set(Array.from({ length: 12 }, (_, index) => this.currentYearNumberSignal() - 6 + index));
     }
     onHourInput(event) {
         if (this.data.dpConfig.enableTime !== true)
@@ -344,12 +371,12 @@ class TzDpContainerComponent {
         if (!isNaN(value)) {
             if (this.is12HourFormat()) {
                 if (value >= 1 && value <= 12) {
-                    this.selectedHour = value;
+                    this.selectedHourSignal.set(value);
                 }
             }
             else {
                 if (value >= 0 && value <= 23) {
-                    this.selectedHour = value;
+                    this.selectedHourSignal.set(value);
                 }
             }
         }
@@ -359,32 +386,32 @@ class TzDpContainerComponent {
             return;
         const value = parseInt(event.target.value);
         if (!isNaN(value) && value >= 0 && value <= 59) {
-            this.selectedMinute = value;
+            this.selectedMinuteSignal.set(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;
+            if (this.selectedHourSignal() < 1)
+                this.selectedHourSignal.set(1);
+            if (this.selectedHourSignal() > 12)
+                this.selectedHourSignal.set(12);
         }
         else {
-            if (this.selectedHour < 0)
-                this.selectedHour = 0;
-            if (this.selectedHour > 23)
-                this.selectedHour = 23;
+            if (this.selectedHourSignal() < 0)
+                this.selectedHourSignal.set(0);
+            if (this.selectedHourSignal() > 23)
+                this.selectedHourSignal.set(23);
         }
     }
     validateMinuteInput() {
         if (this.data.dpConfig.enableTime !== true)
             return;
-        if (this.selectedMinute < 0)
-            this.selectedMinute = 0;
-        if (this.selectedMinute > 59)
-            this.selectedMinute = 59;
+        if (this.selectedMinuteSignal() < 0)
+            this.selectedMinuteSignal.set(0);
+        if (this.selectedMinuteSignal() > 59)
+            this.selectedMinuteSignal.set(59);
     }
     is12HourFormat() {
         return this.data.dpConfig.enableTime === true &&
@@ -397,14 +424,14 @@ class TzDpContainerComponent {
         this.currentDateInstance();
         this.calculateMinMaxDays();
         this.calculateDisabledMonthsAndYears();
-        this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+        this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
         // Initialize time if enabled
         if (this.data.dpConfig.enableTime === true) {
             this.initializeTimeValues();
         }
     }
     get yearRange() {
-        return `${this.selectedYear - 6} - ${this.selectedYear + 5}`;
+        return `${this.selectedYearSignal() - 6} - ${this.selectedYearSignal() + 5}`;
     }
     initializeTimeValues() {
         if (this.data.dpConfig.enableTime === true) {
@@ -414,24 +441,24 @@ class TzDpContainerComponent {
                     const currentDate = this.parseZoneInstance(this.data.date, this.data.dpConfig.format);
                     if (currentDate.isValid()) {
                         let hour = currentDate.hour();
-                        this.selectedMinute = currentDate.minute();
+                        this.selectedMinuteSignal.set(currentDate.minute());
                         if (this.is12HourFormat()) {
                             if (hour === 0) {
                                 hour = 12;
-                                this.selectedAmPm = 'AM';
+                                this.selectedAmPmSignal.set('AM');
                             }
                             else if (hour > 12) {
                                 hour = hour - 12;
-                                this.selectedAmPm = 'PM';
+                                this.selectedAmPmSignal.set('PM');
                             }
                             else if (hour === 12) {
-                                this.selectedAmPm = 'PM';
+                                this.selectedAmPmSignal.set('PM');
                             }
                             else {
-                                this.selectedAmPm = 'AM';
+                                this.selectedAmPmSignal.set('AM');
                             }
                         }
-                        this.selectedHour = hour;
+                        this.selectedHourSignal.set(hour);
                     }
                     else {
                         // Invalid date, use defaults
@@ -473,15 +500,15 @@ class TzDpContainerComponent {
             else {
                 amPm = 'AM';
             }
-            this.selectedHour = hour12;
-            this.selectedMinute = currentMinute;
-            this.selectedAmPm = amPm;
+            this.selectedHourSignal.set(hour12);
+            this.selectedMinuteSignal.set(currentMinute);
+            this.selectedAmPmSignal.set(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
+            this.selectedHourSignal.set(currentHour);
+            this.selectedMinuteSignal.set(currentMinute);
+            this.selectedAmPmSignal.set('AM'); // Not used in 24-hour format but keep consistent
         }
     }
     currentDateInstance() {
@@ -489,94 +516,97 @@ class TzDpContainerComponent {
             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 = {
+                    this.selectedYearSignal.set(selectedDate.year());
+                    this.currentYearNumberSignal.set(selectedDate.year());
+                    this.currentMonthNumberSignal.set(selectedDate.month());
+                    this.currentMonthSignal.set(getMonth(selectedDate.month()));
+                    if (!this.localSelectedDateSignal()) {
+                        this.localSelectedDateSignal.set({
                             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.currentYearNumberSignal.set(this.parseZoneInstance().year());
+            this.currentMonthNumberSignal.set(this.parseZoneInstance().month());
+            this.currentMonthSignal.set(getMonth(this.currentMonthNumberSignal()));
         }
-        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+        this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
     }
     calculateMinMaxDays() {
-        const currentInstance = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
+        const currentInstance = this.parseZoneInstance().year(this.currentYearNumberSignal()).month(this.currentMonthNumberSignal());
         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");
+                this.isPreviousMonthDisabledSignal.set(minDate.isSameOrAfter(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");
+                this.isNextMonthDisabledSignal.set(maxDate.isSameOrBefore(currentInstance, "month"));
             }
         }
     }
     calculateDisabledMonthsAndYears() {
         const minDate = !!this.data.dpConfig.minDate ? this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
         const maxDate = !!this.data.dpConfig.maxDate ? this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
-        this.disabledMonths = this.availableMonths.map((month, index) => {
-            const monthDate = this.parseZoneInstance().year(this.selectedYear).month(index);
+        this.disabledMonthsSignal.set(this.availableMonthsSignal().map((month, index) => {
+            const monthDate = this.parseZoneInstance().year(this.selectedYearSignal()).month(index);
             return (minDate.isValid() && monthDate.isBefore(minDate, 'month')) ||
                 (maxDate.isValid() && monthDate.isAfter(maxDate, 'month'));
-        });
-        this.disabledYears = this.availableYears.map((year) => {
+        }));
+        this.disabledYearsSignal.set(this.availableYearsSignal().map((year) => {
             const yearDate = this.parseZoneInstance().year(year);
             return (minDate.isValid() && yearDate.isBefore(minDate, 'year')) ||
                 (maxDate.isValid() && yearDate.isAfter(maxDate, 'year'));
-        });
-        if (this.isSelectingYear) {
-            this.isPreviousMonthDisabled = minDate.isValid() && ((this.selectedYear - 6) <= minDate.year());
-            this.isNextMonthDisabled = maxDate.isValid() && ((this.selectedYear + 5) >= maxDate.year());
+        }));
+        if (this.isSelectingYearSignal()) {
+            this.isPreviousMonthDisabledSignal.set(minDate.isValid() && ((this.selectedYearSignal() - 6) <= minDate.year()));
+            this.isNextMonthDisabledSignal.set(maxDate.isValid() && ((this.selectedYearSignal() + 5) >= maxDate.year()));
         }
     }
     navigateView(direction) {
-        if ((direction === 'NEXT' && (this.isNextMonthDisabled || this.isSelectingMonth)) ||
-            (direction === 'PREVIOUS' && (this.isPreviousMonthDisabled || this.isSelectingMonth))) {
+        if ((direction === 'NEXT' && (this.isNextMonthDisabledSignal() || this.isSelectingMonthSignal())) ||
+            (direction === 'PREVIOUS' && (this.isPreviousMonthDisabledSignal() || this.isSelectingMonthSignal()))) {
             return;
         }
-        if (this.isSelectingYear) {
-            this.selectedYear += direction === "NEXT" ? 12 : -12;
-            this.availableYears = Array.from({ length: 12 }, (_, index) => this.selectedYear - 6 + index);
+        if (this.isSelectingYearSignal()) {
+            const newSelectedYear = this.selectedYearSignal() + (direction === "NEXT" ? 12 : -12);
+            this.selectedYearSignal.set(newSelectedYear);
+            this.availableYearsSignal.set(Array.from({ length: 12 }, (_, index) => newSelectedYear - 6 + index));
         }
         else {
-            let thisMonth = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
+            let thisMonth = this.parseZoneInstance().year(this.currentYearNumberSignal()).month(this.currentMonthNumberSignal());
             thisMonth = direction === "NEXT" ? thisMonth.add(1, "month") : thisMonth.subtract(1, "month");
-            this.currentMonthNumber = thisMonth.month();
-            this.currentMonth = getMonth(this.currentMonthNumber);
-            this.selectedYear = this.currentYearNumber = thisMonth.year();
-            this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+            this.currentMonthNumberSignal.set(thisMonth.month());
+            this.currentMonthSignal.set(getMonth(thisMonth.month()));
+            this.selectedYearSignal.set(thisMonth.year());
+            this.currentYearNumberSignal.set(thisMonth.year());
+            this.currentMonthDatesSignal.set(this.generateDates(thisMonth.month(), thisMonth.year()));
         }
         this.calculateMinMaxDays();
         this.calculateDisabledMonthsAndYears();
     }
     navigateMonth(direction) {
         try {
-            let thisMonth = dayjs().year(this.currentYearNumber).month(this.currentMonthNumber);
+            let thisMonth = dayjs().year(this.currentYearNumberSignal()).month(this.currentMonthNumberSignal());
             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.currentMonthNumberSignal.set(thisMonth.month());
+            this.currentMonthSignal.set(getMonth(thisMonth.month()));
+            this.currentYearNumberSignal.set(thisMonth.year());
+            this.currentMonthDatesSignal.set(this.generateDates(thisMonth.month(), thisMonth.year()));
             this.calculateMinMaxDays();
         }
         catch (error) {
@@ -620,13 +650,13 @@ class TzDpContainerComponent {
                     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) {
+                    if (this.localSelectedDateSignal() &&
+                        this.localSelectedDateSignal().date === currentDate &&
+                        this.localSelectedDateSignal().month === month &&
+                        this.localSelectedDateSignal().year === currentYearNumber) {
                         isSelectedDay = true;
                     }
-                    else if (this.data.date && !this.localSelectedDate) {
+                    else if (this.data.date && !this.localSelectedDateSignal()) {
                         // Only check previously applied date if no current selection
                         try {
                             if (this.data.dpConfig.enableTime) {
@@ -694,21 +724,21 @@ class TzDpContainerComponent {
             return;
         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);
+            this.currentSelectionSignal.set(this.parseZoneInstance().year(this.currentYearNumberSignal()).month(this.currentMonthNumberSignal()).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;
+                let hour = this.selectedHourSignal();
                 if (this.is12HourFormat()) {
-                    if (this.selectedAmPm === 'PM' && hour !== 12) {
+                    if (this.selectedAmPmSignal() === 'PM' && hour !== 12) {
                         hour += 12;
                     }
-                    else if (this.selectedAmPm === 'AM' && hour === 12) {
+                    else if (this.selectedAmPmSignal() === 'AM' && hour === 12) {
                         hour = 0;
                     }
                 }
-                this.currentSelection = this.currentSelection
+                this.currentSelectionSignal.set(this.currentSelectionSignal()
                     .hour(hour)
-                    .minute(this.selectedMinute);
+                    .minute(this.selectedMinuteSignal()));
             }
             let maxDate = null;
             let minDate = null;
@@ -728,17 +758,17 @@ class TzDpContainerComponent {
                     // 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 = {
+            this.allowBookingOnDisabledDaySignal.set(this.data.allowBookingOnDisabledDay);
+            if (((!minDate || this.currentSelectionSignal().isSameOrAfter(minDate)) && (!maxDate || this.currentSelectionSignal().isSameOrBefore(maxDate)) && this.allowBookingOnDisabledDaySignal()) || (!day.isDisabledDay && !this.allowBookingOnDisabledDaySignal())) {
+                this.localSelectedDateSignal.set({
                     ...day,
-                    month: this.currentMonthNumber,
-                    year: this.currentYearNumber
-                };
+                    month: this.currentMonthNumberSignal(),
+                    year: this.currentYearNumberSignal()
+                });
                 // 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.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
+                // Automatically apply when neither time nor apply button is enabled, otherwise wait for user action
+                if (!this.data.dpConfig.enableTime && !this.data.dpConfig.showApplyButton) {
                     this.applyDate(day);
                 }
             }
@@ -755,22 +785,22 @@ class TzDpContainerComponent {
         try {
             if (this.data.dpConfig.enableTime === true) {
                 // Always use time input values when time is enabled, regardless of currentSelection
-                let hour = this.selectedHour;
+                let hour = this.selectedHourSignal();
                 if (this.is12HourFormat()) {
-                    if (this.selectedAmPm === 'PM' && hour !== 12) {
+                    if (this.selectedAmPmSignal() === 'PM' && hour !== 12) {
                         hour += 12;
                     }
-                    else if (this.selectedAmPm === 'AM' && hour === 12) {
+                    else if (this.selectedAmPmSignal() === '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())
+                    .year(this.currentYearNumberSignal())
+                    .month(this.currentMonthNumberSignal())
+                    .date(this.localSelectedDateSignal()?.date || day?.date || dayjs().date())
                     .hour(hour)
-                    .minute(this.selectedMinute)
+                    .minute(this.selectedMinuteSignal())
                     .second(0)
                     .millisecond(0);
                 date = finalSelection.format(this.data.dpConfig.format);
@@ -778,16 +808,16 @@ class TzDpContainerComponent {
             else {
                 // Date-only format - no time
                 date = dayjs()
-                    .year(this.currentYearNumber)
-                    .month(this.currentMonthNumber)
-                    .date(day ? day.date : this.localSelectedDate?.date || dayjs().date())
+                    .year(this.currentYearNumberSignal())
+                    .month(this.currentMonthNumberSignal())
+                    .date(day ? day.date : this.localSelectedDateSignal()?.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)) {
+            if (day || this.localSelectedDateSignal() || (this.data.dpConfig.enableTime === true)) {
                 this.data.dateChange(date);
             }
             else {
@@ -806,44 +836,45 @@ class TzDpContainerComponent {
         this.data.dateChange("");
     }
     toggleMonthSelector() {
-        if (this.isYearSelectionFlow)
+        if (this.isYearSelectionFlowSignal())
             return;
-        this.isSelectingMonth = !this.isSelectingMonth;
-        this.isSelectingYear = false;
+        this.isSelectingMonthSignal.set(!this.isSelectingMonthSignal());
+        this.isSelectingYearSignal.set(false);
         this.calculateDisabledMonthsAndYears();
     }
     toggleYearSelector() {
-        this.isSelectingYear = !this.isSelectingYear;
-        this.selectedYear = this.currentYearNumber;
-        this.availableYears = Array.from({ length: 12 }, (_, index) => this.selectedYear - 6 + index);
-        this.isSelectingMonth = false;
+        this.isSelectingYearSignal.set(!this.isSelectingYearSignal());
+        this.selectedYearSignal.set(this.currentYearNumberSignal());
+        this.availableYearsSignal.set(Array.from({ length: 12 }, (_, index) => this.selectedYearSignal() - 6 + index));
+        this.isSelectingMonthSignal.set(false);
         this.calculateDisabledMonthsAndYears();
     }
     resetDateSelection() {
-        this.localSelectedDate = {
+        this.localSelectedDateSignal.set({
             date: 0,
             weekDay: 0,
             isCurrentDay: false,
             isSelectedDay: false,
             isDisabledDay: false,
             toastMessage: ''
-        };
+        });
         this.data.date = '';
     }
     selectMonth(month) {
-        this.currentMonthNumber = this.availableMonths.indexOf(month);
-        this.currentMonth = getMonth(this.currentMonthNumber);
-        this.isSelectingMonth = false;
-        this.isYearSelectionFlow = false;
+        this.currentMonthNumberSignal.set(this.availableMonthsSignal().indexOf(month));
+        this.currentMonthSignal.set(getMonth(this.currentMonthNumberSignal()));
+        this.isSelectingMonthSignal.set(false);
+        this.isYearSelectionFlowSignal.set(false);
         this.resetDateSelection();
-        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+        this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
         this.calculateMinMaxDays();
     }
     selectYear(year) {
-        this.selectedYear = this.currentYearNumber = year;
-        this.isSelectingYear = false;
-        this.isSelectingMonth = true;
-        this.isYearSelectionFlow = true;
+        this.selectedYearSignal.set(year);
+        this.currentYearNumberSignal.set(year);
+        this.isSelectingYearSignal.set(false);
+        this.isSelectingMonthSignal.set(true);
+        this.isYearSelectionFlowSignal.set(true);
         this.resetDateSelection();
         this.calculateDisabledMonthsAndYears();
     }
@@ -876,21 +907,21 @@ class TzDpContainerComponent {
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.data.disableBoxShadow ? "remove-box-shadow" : "")("cdkTrapFocusAutoCapture", true);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _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.ɵɵproperty("ngIf", !ctx.isSelectingYear());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth);
+            i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _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.ɵɵproperty("ngIf", ctx.isSelectingMonth() && !ctx.isSelectingYear());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.isSelectingYear && !ctx.isSelectingMonth);
+            i0.ɵɵproperty("ngIf", ctx.isSelectingYear() && !ctx.isSelectingMonth());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth && !ctx.isSelectingYear);
+            i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth() && !ctx.isSelectingYear());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth && !ctx.isSelectingYear);
+            i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth() && !ctx.isSelectingYear());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.data.dpConfig.enableTime === true);
             i0.ɵɵadvance();
@@ -899,7 +930,7 @@ class TzDpContainerComponent {
 }
 (() => { (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': 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"] }]
+        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          (ngModelChange)=\"selectedHourSignal.set($event)\"\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          (ngModelChange)=\"selectedMinuteSignal.set($event)\"\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          (ngModelChange)=\"selectedAmPmSignal.set($event)\"\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]
@@ -910,39 +941,37 @@ class TzDpContainerComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TzDpContainerComponent, { className: "TzDpContainerComponent" }); })();
 
 class TzDatepickerDirective {
-    // dd-mm-yyyy 01-12-2022
-    set selectedDate(date) {
-        this.date = date;
-    }
-    set datesDisabled(dates) {
-        this.dpDisabledDates = dates;
-    }
     constructor(control, element, overlay, viewContainerRef) {
         this.control = control;
         this.element = element;
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
-        this.dateMessages = [];
-        this.positionX = "center";
-        this.positionY = "bottom";
-        this.offsetX = 0;
-        this.offsetY = 0;
-        this.allowBookingOnDisabledDay = false;
-        this.dateChange = new EventEmitter(true);
-        //to be passed from Specific date picker
-        this.disableBoxShadow = false;
-        this.disableOverLay = false;
-        this.openElement = false;
+        // Signal-based inputs
+        this.dpConfig = input();
+        this.selectedDate = input('');
+        this.datesDisabled = input([]);
+        this.dateMessages = input([]);
+        this.positionX = input("center");
+        this.positionY = input("bottom");
+        this.offsetX = input(0);
+        this.offsetY = input(0);
+        this.allowBookingOnDisabledDay = input(false);
+        this.disableBoxShadow = input(false);
+        this.disableOverLay = input(false);
+        this.openElement = input(false);
+        // Signal-based output
+        this.dateChange = output();
         this.isOpen = false;
-        this.dpDisabledDates = [];
-    }
-    ngOnChanges(changes) {
-        if (changes['openElement']?.currentValue) {
-            this.open();
-        }
-        else if (!changes['openElement']?.currentValue) {
-            this.close();
-        }
+        // Effect to watch openElement signal changes
+        effect(() => {
+            const openElement = this.openElement();
+            if (openElement) {
+                this.open();
+            }
+            else {
+                this.close();
+            }
+        });
     }
     ngOnInit() { }
     toggleDatePicker() {
@@ -967,26 +996,26 @@ class TzDatepickerDirective {
         }
     }
     open() {
-        this.dpConfig = {
+        const dpConfig = {
             format: DATE_FORMAT,
             minDate: "",
             maxDate: "",
             showApplyButton: false,
-            ...this.dpConfig
+            ...this.dpConfig()
         };
         this.isOpen = true;
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(this.element)
             .withPositions(genPositionPairs({
-            positionX: this.positionX,
-            positionY: this.positionY,
-            offsetX: this.offsetX,
-            offsetY: this.offsetY
+            positionX: this.positionX(),
+            positionY: this.positionY(),
+            offsetX: this.offsetX(),
+            offsetY: this.offsetY()
         }, true))
             .withPush(true);
         const config = new OverlayConfig({
-            hasBackdrop: !this.disableOverLay,
+            hasBackdrop: !this.disableOverLay(),
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
             backdropClass: "cdk-overlay-transparent-backdrop"
@@ -997,13 +1026,13 @@ class TzDatepickerDirective {
                 {
                     provide: CONTAINER_DATA,
                     useValue: {
-                        messages: this.dateMessages,
-                        date: this.control?.control.value || this.date,
-                        allowBookingOnDisabledDay: this.allowBookingOnDisabledDay,
-                        dpConfig: this.dpConfig,
-                        datesDisabled: this.dpDisabledDates,
+                        messages: this.dateMessages(),
+                        date: this.control?.control.value || this.selectedDate(),
+                        allowBookingOnDisabledDay: this.allowBookingOnDisabledDay(),
+                        dpConfig: dpConfig,
+                        datesDisabled: this.datesDisabled(),
                         dateChange: this.applyDate.bind(this),
-                        disableBoxShadow: this.disableBoxShadow,
+                        disableBoxShadow: this.disableBoxShadow(),
                     }
                 }
             ]
@@ -1023,7 +1052,6 @@ class TzDatepickerDirective {
         }
         this.dateChange.emit(date);
         this.control?.control.patchValue(date);
-        this.date = date;
         this.close();
     }
     close() {
@@ -1034,7 +1062,7 @@ class TzDatepickerDirective {
     static { this.ɵfac = function TzDatepickerDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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] }); }
+        } }, inputs: { dpConfig: [1, "dpConfig"], selectedDate: [1, "selectedDate"], datesDisabled: [1, "datesDisabled"], dateMessages: [1, "dateMessages"], positionX: [1, "positionX"], positionY: [1, "positionY"], offsetX: [1, "offsetX"], offsetY: [1, "offsetY"], allowBookingOnDisabledDay: [1, "allowBookingOnDisabledDay"], disableBoxShadow: [1, "disableBoxShadow"], disableOverLay: [1, "disableOverLay"], openElement: [1, "openElement"] }, outputs: { dateChange: "dateChange" } }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDatepickerDirective, [{
         type: Directive,
@@ -1045,33 +1073,7 @@ class TzDatepickerDirective {
                 type: Self
             }, {
                 type: Optional
-            }] }, { type: i0.ElementRef }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], { dpConfig: [{
-            type: Input
-        }], selectedDate: [{
-            type: Input
-        }], datesDisabled: [{
-            type: Input
-        }], dateMessages: [{
-            type: Input
-        }], positionX: [{
-            type: Input
-        }], positionY: [{
-            type: Input
-        }], offsetX: [{
-            type: Input
-        }], offsetY: [{
-            type: Input
-        }], allowBookingOnDisabledDay: [{
-            type: Input
-        }], dateChange: [{
-            type: Output
-        }], disableBoxShadow: [{
-            type: Input
-        }], disableOverLay: [{
-            type: Input
-        }], openElement: [{
-            type: Input
-        }], toggleDatePicker: [{
+            }] }, { type: i0.ElementRef }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], { toggleDatePicker: [{
             type: HostListener,
             args: ["click"]
         }], toggleDatePickerOnEnter: [{