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

package/fesm2022/mis-crystal-design-system-daterangepicker_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, Injector, Directive, Self, Optional, NgModule } from '@angular/core';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
@@ -86,7 +86,7 @@ function TzDrpContainerComponent_div_3_div_1_Template(rf, ctx) { if (rf & 1) {
     const item_r3 = ctx.$implicit;
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2, ctx_r3.selectedItemLabel === item_r3.label));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2, ctx_r3.selectedItemLabel() === item_r3.label));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", item_r3.label, " ");
 } }
@@ -104,7 +104,7 @@ function TzDrpContainerComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", (tmp_1_0 = ctx_r3.data == null ? null : ctx_r3.data.dpConfig == null ? null : ctx_r3.data.dpConfig.ranges) !== null && tmp_1_0 !== undefined ? tmp_1_0 : i0.ɵɵpureFunction0(2, _c1));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2, ctx_r3.selectedItemLabel === "Custom Range"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2, ctx_r3.selectedItemLabel() === "Custom Range"));
 } }
 function TzDrpContainerComponent_div_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24)(1, "span");
@@ -123,7 +123,7 @@ function TzDrpContainerComponent_div_19_span_1_Template(rf, ctx) { if (rf & 1) {
     const day_r7 = i0.ɵɵnextContext().$implicit;
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵproperty("tabindex", day_r7.isDisabledDay ? -1 : 0);
-    i0.ɵɵattribute("aria-label", ctx_r3.retractDayMonth(day_r7.date, ctx_r3.currentMonth, ctx_r3.currentYearNumber));
+    i0.ɵɵattribute("aria-label", ctx_r3.retractDayMonth(day_r7.date, ctx_r3.currentMonth(), ctx_r3.currentYearNumber()));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", day_r7.date, " ");
 } }
@@ -156,7 +156,7 @@ function TzDrpContainerComponent_div_32_span_1_Template(rf, ctx) { if (rf & 1) {
     const day_r10 = i0.ɵɵnextContext().$implicit;
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵproperty("tabindex", day_r10.isDisabledDay ? -1 : 0);
-    i0.ɵɵattribute("aria-label", ctx_r3.retractDayMonth(day_r10.date, ctx_r3.nextMonth, ctx_r3.nextYearNumber));
+    i0.ɵɵattribute("aria-label", ctx_r3.retractDayMonth(day_r10.date, ctx_r3.nextMonth(), ctx_r3.nextYearNumber()));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", day_r10.date, " ");
 } }
@@ -175,7 +175,7 @@ function TzDrpContainerComponent_div_32_Template(rf, ctx) { if (rf & 1) {
 function TzDrpContainerComponent_div_33_select_9_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "select", 35);
-    i0.ɵɵtwoWayListener("ngModelChange", function TzDrpContainerComponent_div_33_select_9_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r3 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r3.startAmPm, $event) || (ctx_r3.startAmPm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function TzDrpContainerComponent_div_33_select_9_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.startAmPmSignal.set($event)); });
     i0.ɵɵelementStart(1, "option", 36);
     i0.ɵɵtext(2, "AM");
     i0.ɵɵelementEnd();
@@ -184,12 +184,12 @@ function TzDrpContainerComponent_div_33_select_9_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r3.startAmPm);
+    i0.ɵɵproperty("ngModel", ctx_r3.startAmPm());
 } }
 function TzDrpContainerComponent_div_33_select_18_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "select", 35);
-    i0.ɵɵtwoWayListener("ngModelChange", function TzDrpContainerComponent_div_33_select_18_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r3 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r3.endAmPm, $event) || (ctx_r3.endAmPm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function TzDrpContainerComponent_div_33_select_18_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.endAmPmSignal.set($event)); });
     i0.ɵɵelementStart(1, "option", 36);
     i0.ɵɵtext(2, "AM");
     i0.ɵɵelementEnd();
@@ -198,7 +198,7 @@ function TzDrpContainerComponent_div_33_select_18_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r3.endAmPm);
+    i0.ɵɵproperty("ngModel", ctx_r3.endAmPm());
 } }
 function TzDrpContainerComponent_div_33_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
@@ -206,14 +206,13 @@ function TzDrpContainerComponent_div_33_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(3, "From");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 30)(5, "input", 31);
-    i0.ɵɵlistener("ngModelChange", function TzDrpContainerComponent_div_33_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); ctx_r3.is12HourFormat() ? ctx_r3.startHour = $event : ctx_r3.startHour24 = $event; return i0.ɵɵresetView(ctx_r3.onStartHourInput()); });
+    i0.ɵɵlistener("ngModelChange", function TzDrpContainerComponent_div_33_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); ctx_r3.is12HourFormat() ? ctx_r3.startHourSignal.set($event) : ctx_r3.startHour24Signal.set($event); return i0.ɵɵresetView(ctx_r3.onStartHourInput()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "span", 32);
     i0.ɵɵtext(7, ":");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "input", 33);
-    i0.ɵɵtwoWayListener("ngModelChange", function TzDrpContainerComponent_div_33_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r3.startMinute, $event) || (ctx_r3.startMinute = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("input", function TzDrpContainerComponent_div_33_Template_input_input_8_listener() { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onStartMinuteInput()); });
+    i0.ɵɵlistener("ngModelChange", function TzDrpContainerComponent_div_33_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.startMinuteSignal.set($event)); })("input", function TzDrpContainerComponent_div_33_Template_input_input_8_listener() { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onStartMinuteInput()); });
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(9, TzDrpContainerComponent_div_33_select_9_Template, 5, 1, "select", 34);
     i0.ɵɵelementEnd()();
@@ -221,29 +220,28 @@ function TzDrpContainerComponent_div_33_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(12, "To");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(13, "div", 30)(14, "input", 31);
-    i0.ɵɵlistener("ngModelChange", function TzDrpContainerComponent_div_33_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); ctx_r3.is12HourFormat() ? ctx_r3.endHour = $event : ctx_r3.endHour24 = $event; return i0.ɵɵresetView(ctx_r3.onEndHourInput()); });
+    i0.ɵɵlistener("ngModelChange", function TzDrpContainerComponent_div_33_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); ctx_r3.is12HourFormat() ? ctx_r3.endHourSignal.set($event) : ctx_r3.endHour24Signal.set($event); return i0.ɵɵresetView(ctx_r3.onEndHourInput()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(15, "span", 32);
     i0.ɵɵtext(16, ":");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(17, "input", 33);
-    i0.ɵɵtwoWayListener("ngModelChange", function TzDrpContainerComponent_div_33_Template_input_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r3.endMinute, $event) || (ctx_r3.endMinute = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("input", function TzDrpContainerComponent_div_33_Template_input_input_17_listener() { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onEndMinuteInput()); });
+    i0.ɵɵlistener("ngModelChange", function TzDrpContainerComponent_div_33_Template_input_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.endMinuteSignal.set($event)); })("input", function TzDrpContainerComponent_div_33_Template_input_input_17_listener() { i0.ɵɵrestoreView(_r11); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onEndMinuteInput()); });
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(18, TzDrpContainerComponent_div_33_select_18_Template, 5, 1, "select", 34);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngModel", ctx_r3.is12HourFormat() ? ctx_r3.startHour : ctx_r3.startHour24)("min", ctx_r3.is12HourFormat() ? 1 : 0)("max", ctx_r3.is12HourFormat() ? 12 : 23);
+    i0.ɵɵproperty("ngModel", ctx_r3.is12HourFormat() ? ctx_r3.startHour() : ctx_r3.startHour24())("min", ctx_r3.is12HourFormat() ? 1 : 0)("max", ctx_r3.is12HourFormat() ? 12 : 23);
     i0.ɵɵadvance(3);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r3.startMinute);
+    i0.ɵɵproperty("ngModel", ctx_r3.startMinute());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r3.is12HourFormat());
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngModel", ctx_r3.is12HourFormat() ? ctx_r3.endHour : ctx_r3.endHour24)("min", ctx_r3.is12HourFormat() ? 1 : 0)("max", ctx_r3.is12HourFormat() ? 12 : 23);
+    i0.ɵɵproperty("ngModel", ctx_r3.is12HourFormat() ? ctx_r3.endHour() : ctx_r3.endHour24())("min", ctx_r3.is12HourFormat() ? 1 : 0)("max", ctx_r3.is12HourFormat() ? 12 : 23);
     i0.ɵɵadvance(3);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r3.endMinute);
+    i0.ɵɵproperty("ngModel", ctx_r3.endMinute());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r3.is12HourFormat());
 } }
@@ -261,33 +259,65 @@ class TzDrpContainerComponent {
             return dayjs(...args);
         };
         this.rawWeekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
-        this.weekDays = [];
-        this.currentMonthDates = [];
-        this.nextMonthDates = [];
-        this.isPreviousMonthDisabled = false;
-        this.isNextMonthDisabled = false;
-        this.selectionStarted = false;
-        this.isDatesValid = false;
-        this.selectedItemLabel = this.CUSTOM_RANGE_LABEL;
-        // Time selection properties
-        this.startHour = 12;
-        this.startMinute = 0;
-        this.startAmPm = 'AM';
-        this.endHour = 12;
-        this.endMinute = 0;
-        this.endAmPm = 'AM';
-        // For 24-hour format, store actual 24-hour values
-        this.startHour24 = 12;
-        this.endHour24 = 12;
+        // Signal-based state management
+        this.weekDaysSignal = signal([]);
+        this.currentMonthNumberSignal = signal(0);
+        this.currentMonthSignal = signal("January");
+        this.currentYearNumberSignal = signal(0);
+        this.currentMonthDatesSignal = signal([]);
+        this.nextMonthNumberSignal = signal(0);
+        this.nextMonthSignal = signal("January");
+        this.nextYearNumberSignal = signal(0);
+        this.nextMonthDatesSignal = signal([]);
+        this.isPreviousMonthDisabledSignal = signal(false);
+        this.isNextMonthDisabledSignal = signal(false);
+        this.selectionStartedSignal = signal(false);
+        this.localSelectedDatesSignal = signal({ startDate: null, endDate: null });
+        this.isDatesValidSignal = signal(false);
+        this.selectedItemLabelSignal = signal(this.CUSTOM_RANGE_LABEL);
+        // Time selection signals
+        this.startHourSignal = signal(12);
+        this.startMinuteSignal = signal(0);
+        this.startAmPmSignal = signal('AM');
+        this.endHourSignal = signal(12);
+        this.endMinuteSignal = signal(0);
+        this.endAmPmSignal = signal('AM');
+        this.startHour24Signal = signal(12);
+        this.endHour24Signal = signal(12);
+        // 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.nextMonthNumber = computed(() => this.nextMonthNumberSignal());
+        this.nextMonth = computed(() => this.nextMonthSignal());
+        this.nextYearNumber = computed(() => this.nextYearNumberSignal());
+        this.nextMonthDates = computed(() => this.nextMonthDatesSignal());
+        this.isPreviousMonthDisabled = computed(() => this.isPreviousMonthDisabledSignal());
+        this.isNextMonthDisabled = computed(() => this.isNextMonthDisabledSignal());
+        this.selectionStarted = computed(() => this.selectionStartedSignal());
+        this.localSelectedDates = computed(() => this.localSelectedDatesSignal());
+        this.isDatesValid = computed(() => this.isDatesValidSignal());
+        this.selectedItemLabel = computed(() => this.selectedItemLabelSignal());
+        // Time functionality computed properties
+        this.startHour = computed(() => this.startHourSignal());
+        this.startMinute = computed(() => this.startMinuteSignal());
+        this.startAmPm = computed(() => this.startAmPmSignal());
+        this.endHour = computed(() => this.endHourSignal());
+        this.endMinute = computed(() => this.endMinuteSignal());
+        this.endAmPm = computed(() => this.endAmPmSignal());
+        this.startHour24 = computed(() => this.startHour24Signal());
+        this.endHour24 = computed(() => this.endHour24Signal());
         this.data = data;
-        this.localSelectedDates = this.data.dates;
-        this.isDatesValid = false;
-        if (this.localSelectedDates.startDate && this.localSelectedDates.endDate) {
-            this.isDatesValid = true;
+        this.localSelectedDatesSignal.set(this.data.dates);
+        this.isDatesValidSignal.set(false);
+        if (this.data.dates.startDate && this.data.dates.endDate) {
+            this.isDatesValidSignal.set(true);
         }
         // Initialize selectedItemLabel from data.selectedRangeLabel if available
         if (this.data.selectedRangeLabel) {
-            this.selectedItemLabel = this.data.selectedRangeLabel;
+            this.selectedItemLabelSignal.set(this.data.selectedRangeLabel);
         }
         // Initialize dayjsInstance with timezone handling
         if (this.data?.dpConfig?.timezone) {
@@ -301,16 +331,17 @@ class TzDrpContainerComponent {
                 }
             };
         }
-        this.currentMonthNumber = this.dayjsInstance().month();
-        this.nextMonthNumber = this.dayjsInstance().add(1, "month").month();
-        this.currentMonth = getMonth(this.currentMonthNumber);
-        this.nextMonth = getMonth(this.nextMonthNumber);
-        this.currentYearNumber = this.dayjsInstance().year();
-        this.nextYearNumber = this.dayjsInstance().add(1, "month").year();
-        this.weekDays = this.rawWeekDays.map((day, index) => ({
+        // Set default values safely using signals
+        this.currentMonthNumberSignal.set(this.dayjsInstance().month());
+        this.nextMonthNumberSignal.set(this.dayjsInstance().add(1, "month").month());
+        this.currentMonthSignal.set(getMonth(this.currentMonthNumberSignal()));
+        this.nextMonthSignal.set(getMonth(this.nextMonthNumberSignal()));
+        this.currentYearNumberSignal.set(this.dayjsInstance().year());
+        this.nextYearNumberSignal.set(this.dayjsInstance().add(1, "month").year());
+        this.weekDaysSignal.set(this.rawWeekDays.map((day, index) => ({
             label: `${day[0]}${day.slice(1).toLowerCase()}`,
             isCurrentDay: this.dayjsInstance().day() === index
-        }));
+        })));
         if (!this.data?.dpConfig?.format) {
             this.data.dpConfig = {
                 ...this.data.dpConfig,
@@ -333,85 +364,85 @@ class TzDrpContainerComponent {
         this.cancelDatePicker();
     }
     currentDateInstance() {
-        if (!this.localSelectedDates?.startDate) {
-            this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-            this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
+        if (!this.localSelectedDatesSignal()?.startDate) {
+            this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
+            this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumberSignal(), this.nextYearNumberSignal()));
             return;
         }
         // Extract date part for parsing (handle both date-only and datetime formats)
-        const startDateString = this.localSelectedDates?.startDate?.split(' ')[0] || this.localSelectedDates?.startDate;
-        const endDateString = this.localSelectedDates?.endDate?.split(' ')[0] || this.localSelectedDates?.endDate;
+        const startDateString = this.localSelectedDatesSignal()?.startDate?.split(' ')[0] || this.localSelectedDatesSignal()?.startDate;
+        const endDateString = this.localSelectedDatesSignal()?.endDate?.split(' ')[0] || this.localSelectedDatesSignal()?.endDate;
         // Validate date strings before parsing
         if (!startDateString || startDateString === 'Invalid Date' || startDateString === 'undefined' || startDateString === 'null') {
-            this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-            this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
+            this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
+            this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumberSignal(), this.nextYearNumberSignal()));
             return;
         }
         const selectedStartDate = this.dayjsInstance(startDateString, 'DD/MM/YYYY');
         const selectedEndDate = endDateString ? this.dayjsInstance(endDateString, 'DD/MM/YYYY') : null;
         if (selectedStartDate.isValid()) {
-            this.currentYearNumber = selectedStartDate.year();
-            this.nextYearNumber = selectedStartDate.add(1, "month").year();
-            this.currentMonthNumber = selectedStartDate.get("month");
-            this.nextMonthNumber = selectedStartDate.add(1, "month").month();
-            if (this.currentMonthNumber === -1) {
-                this.currentMonthNumber = 11;
+            this.currentYearNumberSignal.set(selectedStartDate.year());
+            this.nextYearNumberSignal.set(selectedStartDate.add(1, "month").year());
+            this.currentMonthNumberSignal.set(selectedStartDate.get("month"));
+            this.nextMonthNumberSignal.set(selectedStartDate.add(1, "month").month());
+            if (this.currentMonthNumberSignal() === -1) {
+                this.currentMonthNumberSignal.set(11);
             }
-            if (this.nextMonthNumber === -1) {
-                this.nextMonthNumber = 11;
+            if (this.nextMonthNumberSignal() === -1) {
+                this.nextMonthNumberSignal.set(11);
             }
-            this.currentMonth = getMonth(this.currentMonthNumber);
-            this.nextMonth = getMonth(this.nextMonthNumber);
+            this.currentMonthSignal.set(getMonth(this.currentMonthNumberSignal()));
+            this.nextMonthSignal.set(getMonth(this.nextMonthNumberSignal()));
         }
         // If we have an end date, use it to determine the next month
         if (selectedEndDate && selectedEndDate.isValid() && selectedEndDate.isAfter(selectedStartDate, 'month')) {
-            this.nextMonthNumber = selectedEndDate.month();
-            this.nextYearNumber = selectedEndDate.year();
-            this.nextMonth = getMonth(this.nextMonthNumber);
+            this.nextMonthNumberSignal.set(selectedEndDate.month());
+            this.nextYearNumberSignal.set(selectedEndDate.year());
+            this.nextMonthSignal.set(getMonth(this.nextMonthNumberSignal()));
         }
-        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-        this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
+        this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
+        this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumberSignal(), this.nextYearNumberSignal()));
     }
     calculateMinMaxDays() {
-        const currentInstance = this.dayjsInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
+        const currentInstance = this.dayjsInstance().year(this.currentYearNumberSignal()).month(this.currentMonthNumberSignal());
         const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
         if (minDate.isValid()) {
-            this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, "month");
+            this.isPreviousMonthDisabledSignal.set(minDate.isSameOrAfter(currentInstance, "month"));
         }
         const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
         if (maxDate.isValid()) {
-            this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
+            this.isNextMonthDisabledSignal.set(maxDate.isSameOrBefore(currentInstance, "month"));
         }
     }
     navigateMonth(direction) {
-        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.nextMonthNumber = thisMonth.clone().add(1, "month").month();
-        this.currentMonth = getMonth(this.currentMonthNumber);
-        this.nextMonth = getMonth(this.nextMonthNumber);
-        if (this.nextMonthNumber === 0 && direction === "PREVIOUS") {
-            this.currentYearNumber--;
+        this.currentMonthNumberSignal.set(thisMonth.month());
+        this.nextMonthNumberSignal.set(thisMonth.clone().add(1, "month").month());
+        this.currentMonthSignal.set(getMonth(this.currentMonthNumber()));
+        this.nextMonthSignal.set(getMonth(this.nextMonthNumber()));
+        if (this.nextMonthNumberSignal() === 0 && direction === "PREVIOUS") {
+            this.currentYearNumberSignal.set(this.currentYearNumberSignal() - 1);
         }
-        else if (this.currentMonthNumber === 11 && direction === "NEXT") {
-            this.nextYearNumber++;
+        else if (this.currentMonthNumberSignal() === 11 && direction === "NEXT") {
+            this.nextYearNumberSignal.set(this.nextYearNumberSignal() + 1);
         }
-        else if (this.currentMonthNumber === 0 && direction === "NEXT") {
-            this.currentYearNumber++;
+        else if (this.currentMonthNumberSignal() === 0 && direction === "NEXT") {
+            this.currentYearNumberSignal.set(this.currentYearNumberSignal() + 1);
         }
-        else if (this.nextMonthNumber === 11 && direction === "PREVIOUS") {
-            this.nextYearNumber--;
+        else if (this.nextMonthNumberSignal() === 11 && direction === "PREVIOUS") {
+            this.nextYearNumberSignal.set(this.nextYearNumberSignal() - 1);
         }
         else {
-            this.nextYearNumber = this.currentYearNumber;
+            this.nextYearNumberSignal.set(this.currentYearNumberSignal());
         }
-        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-        this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
+        this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumber(), this.currentYearNumber()));
+        this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumber(), this.nextYearNumber()));
         this.calculateMinMaxDays();
     }
     generateDates(month, currentYearNumber) {
@@ -457,25 +488,27 @@ class TzDrpContainerComponent {
             }
             if (this.data?.dpConfig?.maxAllowedRange > 0 &&
                 !isDisabledDay &&
-                (this.localSelectedDates?.startDate ?? false) && (!(this.localSelectedDates.endDate ?? false))) {
-                const startDate = dayjs(this.localSelectedDates.startDate, this.data.dpConfig.format).startOf('day');
+                (this.localSelectedDatesSignal()?.startDate ?? false) && (!(this.localSelectedDatesSignal().endDate ?? false))) {
+                const startDate = dayjs(this.localSelectedDatesSignal().startDate, this.data.dpConfig.format).startOf('day');
                 const maxEndDate = startDate.clone().add(this.data.dpConfig.maxAllowedRange - 1, 'days');
                 isDisabledDay = date.isAfter(maxEndDate, 'day');
             }
             const isCurrentDay = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
                 this.dayjsInstance().format(this.data.dpConfig.format);
             // Extract date part for comparison (handle both date-only and datetime formats)
-            const startDateString = this.localSelectedDates?.startDate?.split(' ')[0] || this.localSelectedDates?.startDate;
-            const endDateString = this.localSelectedDates?.endDate?.split(' ')[0] || this.localSelectedDates?.endDate;
+            const startDateString = this.localSelectedDatesSignal()?.startDate?.split(' ')[0] || this.localSelectedDatesSignal()?.startDate;
+            const endDateString = this.localSelectedDatesSignal()?.endDate?.split(' ')[0] || this.localSelectedDatesSignal()?.endDate;
+            // Use the custom format for comparison instead of hardcoded DD/MM/YYYY
+            const dateFormatted = date.format(this.data.dpConfig.format);
             const isSelectedStartDay = !isDisabledDay &&
                 (startDateString ?? false) &&
-                date.format('DD/MM/YYYY') === startDateString;
+                dateFormatted === startDateString;
             const isSelectedEndDay = !isDisabledDay &&
                 (endDateString ?? false) &&
-                date.format('DD/MM/YYYY') === endDateString;
-            // For range calculation, parse dates properly
-            const startDate = startDateString ? dayjs(startDateString, 'DD/MM/YYYY') : null;
-            const endDate = endDateString ? dayjs(endDateString, 'DD/MM/YYYY') : null;
+                dateFormatted === endDateString;
+            // For range calculation, parse dates properly using custom format
+            const startDate = startDateString ? dayjs(startDateString, this.data.dpConfig.format) : null;
+            const endDate = endDateString ? dayjs(endDateString, this.data.dpConfig.format) : null;
             const isAfterSelectedStartDate = startDate ? this.dayjsInstance(date).isAfter(startDate, "day") : false;
             const isBeforeSelectedEndDate = endDate ? this.dayjsInstance(date).isBefore(endDate, "day") : false;
             const inRangeDay = startDate && endDate &&
@@ -498,53 +531,67 @@ class TzDrpContainerComponent {
         return dates;
     }
     selectDay(from, day) {
-        if (day.date <= 0)
+        if (day.date <= 0) {
             return;
+        }
         if (!day.isDisabledDay) {
-            this.selectedItemLabel = this.CUSTOM_RANGE_LABEL;
-            if (this.selectionStarted) {
+            this.selectedItemLabelSignal.set(this.CUSTOM_RANGE_LABEL);
+            if (this.selectionStarted()) {
                 const dayjsDay = dayjs()
-                    .year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
-                    .month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
+                    .year(from === "LEFT" ? this.currentYearNumberSignal() : this.nextYearNumberSignal())
+                    .month(from === "LEFT" ? this.currentMonthNumberSignal() : this.nextMonthNumberSignal())
                     .date(day.date);
                 // Extract date part from existing start date for comparison
-                const startDateString = this.localSelectedDates.startDate?.split(' ')[0] || this.localSelectedDates.startDate;
-                const startDate = startDateString ? dayjs(startDateString, 'DD/MM/YYYY') : null;
+                const startDateString = this.localSelectedDatesSignal().startDate?.split(' ')[0] || this.localSelectedDatesSignal().startDate;
+                const startDate = startDateString ? dayjs(startDateString, this.data.dpConfig.format) : null;
+                // If the selected date is the same as the start date, make it a single day selection
+                if (startDate && dayjsDay.isSame(startDate, "day")) {
+                    this.localSelectedDatesSignal.set({
+                        startDate: dayjsDay.format(this.data.dpConfig.format),
+                        endDate: dayjsDay.format(this.data.dpConfig.format),
+                        selectedRangeLabel: this.CUSTOM_RANGE_LABEL
+                    });
+                    this.selectionStartedSignal.set(false);
+                    this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumber(), this.currentYearNumber()));
+                    this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumber(), this.nextYearNumber()));
+                    this.isDatesValidSignal.set(true);
+                    return;
+                }
                 // If the selected date is before the start date, make it the new start date
                 if (startDate && dayjsDay.isBefore(startDate, "day")) {
-                    this.localSelectedDates = {
+                    this.localSelectedDatesSignal.set({
                         startDate: dayjsDay.format(this.data.dpConfig.format),
                         endDate: null,
                         selectedRangeLabel: this.CUSTOM_RANGE_LABEL
-                    };
-                    this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-                    this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
+                    });
+                    this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumber(), this.currentYearNumber()));
+                    this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumber(), this.nextYearNumber()));
                     return;
                 }
-                this.selectionStarted = false;
-                this.localSelectedDates = {
-                    ...this.localSelectedDates,
+                this.selectionStartedSignal.set(false);
+                this.localSelectedDatesSignal.set({
+                    ...this.localSelectedDatesSignal(),
                     endDate: dayjsDay.format(this.data.dpConfig.format),
                     selectedRangeLabel: this.CUSTOM_RANGE_LABEL
-                };
+                });
             }
             else {
-                this.selectionStarted = true;
-                this.localSelectedDates = {
+                this.selectionStartedSignal.set(true);
+                this.localSelectedDatesSignal.set({
                     startDate: dayjs()
-                        .year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
-                        .month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
+                        .year(from === "LEFT" ? this.currentYearNumberSignal() : this.nextYearNumberSignal())
+                        .month(from === "LEFT" ? this.currentMonthNumberSignal() : this.nextMonthNumberSignal())
                         .date(day.date)
                         .format(this.data.dpConfig.format),
                     endDate: null,
                     selectedRangeLabel: this.CUSTOM_RANGE_LABEL
-                };
+                });
             }
-            this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-            this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
-            this.isDatesValid = false;
-            if (this.localSelectedDates.startDate && this.localSelectedDates.endDate) {
-                this.isDatesValid = true;
+            this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumber(), this.currentYearNumber()));
+            this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumber(), this.nextYearNumber()));
+            this.isDatesValidSignal.set(false);
+            if (this.localSelectedDatesSignal().startDate && this.localSelectedDatesSignal().endDate) {
+                this.isDatesValidSignal.set(true);
             }
         }
         if (day.toastMessage) {
@@ -567,39 +614,39 @@ class TzDrpContainerComponent {
             this.toast.displayMsg("Selected range contains disabled dates or is out of bounds.", 4000);
             return;
         }
-        this.selectedItemLabel = item.label;
-        this.currentMonthNumber = startDate.month();
-        this.currentYearNumber = startDate.year();
-        if (this.currentMonthNumber === 11) {
-            this.nextMonthNumber = 0;
-            this.nextYearNumber = this.currentYearNumber + 1;
+        this.selectedItemLabelSignal.set(item.label);
+        this.currentMonthNumberSignal.set(startDate.month());
+        this.currentYearNumberSignal.set(startDate.year());
+        if (this.currentMonthNumberSignal() === 11) {
+            this.nextMonthNumberSignal.set(0);
+            this.nextYearNumberSignal.set(this.currentYearNumberSignal() + 1);
         }
         else {
-            this.nextMonthNumber = this.currentMonthNumber + 1;
-            this.nextYearNumber = this.currentYearNumber;
+            this.nextMonthNumberSignal.set(this.currentMonthNumberSignal() + 1);
+            this.nextYearNumberSignal.set(this.currentYearNumberSignal());
         }
-        this.localSelectedDates = {
+        this.localSelectedDatesSignal.set({
             startDate: startDateStr,
             endDate: endDateStr,
             selectedRangeLabel: item.label
-        };
-        this.currentMonth = getMonth(this.currentMonthNumber);
-        this.nextMonth = getMonth(this.nextMonthNumber);
-        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-        this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
-        this.isDatesValid = !!(this.localSelectedDates.startDate && this.localSelectedDates.endDate);
+        });
+        this.currentMonthSignal.set(getMonth(this.currentMonthNumber()));
+        this.nextMonthSignal.set(getMonth(this.nextMonthNumber()));
+        this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumber(), this.currentYearNumber()));
+        this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumber(), this.nextYearNumber()));
+        this.isDatesValidSignal.set(!!(this.localSelectedDatesSignal().startDate && this.localSelectedDatesSignal().endDate));
     }
     resetRange() {
-        this.selectedItemLabel = this.CUSTOM_RANGE_LABEL;
-        this.localSelectedDates = {
+        this.selectedItemLabelSignal.set(this.CUSTOM_RANGE_LABEL);
+        this.localSelectedDatesSignal.set({
             startDate: null,
             endDate: null,
             selectedRangeLabel: this.CUSTOM_RANGE_LABEL
-        };
-        this.selectionStarted = false;
-        this.isDatesValid = false;
-        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-        this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
+        });
+        this.selectionStartedSignal.set(false);
+        this.isDatesValidSignal.set(false);
+        this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumber(), this.currentYearNumber()));
+        this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumber(), this.nextYearNumber()));
     }
     applyDates() {
         // If time is enabled, append time to the dates before applying
@@ -607,16 +654,16 @@ class TzDrpContainerComponent {
             let startTime;
             let endTime;
             if (this.is12HourFormat()) {
-                startTime = this.formatTime(this.startHour, this.startMinute, this.startAmPm);
-                endTime = this.formatTime(this.endHour, this.endMinute, this.endAmPm);
+                startTime = this.formatTime(this.startHour(), this.startMinute(), this.startAmPm());
+                endTime = this.formatTime(this.endHour(), this.endMinute(), this.endAmPm());
             }
             else {
-                startTime = this.formatTime(this.startHour24, this.startMinute, '');
-                endTime = this.formatTime(this.endHour24, this.endMinute, '');
+                startTime = this.formatTime(this.startHour24(), this.startMinute(), '');
+                endTime = this.formatTime(this.endHour24(), this.endMinute(), '');
             }
             // Extract only the date part (before any existing time) and append the selected time
-            const startDateOnly = this.localSelectedDates.startDate?.split(' ')[0] || this.localSelectedDates.startDate;
-            const endDateOnly = this.localSelectedDates.endDate?.split(' ')[0] || this.localSelectedDates.endDate;
+            const startDateOnly = this.localSelectedDatesSignal().startDate?.split(' ')[0] || this.localSelectedDatesSignal().startDate;
+            const endDateOnly = this.localSelectedDatesSignal().endDate?.split(' ')[0] || this.localSelectedDatesSignal().endDate;
             const startDateWithTime = startDateOnly + ' ' + startTime;
             const endDateWithTime = endDateOnly + ' ' + endTime;
             this.data.dateChange({
@@ -625,7 +672,7 @@ class TzDrpContainerComponent {
             });
         }
         else {
-            this.data.dateChange(this.localSelectedDates);
+            this.data.dateChange(this.localSelectedDatesSignal());
         }
     }
     cancelDatePicker() {
@@ -634,25 +681,25 @@ class TzDrpContainerComponent {
     // Time-related methods
     onStartHourInput() {
         if (this.is12HourFormat()) {
-            this.startHour = this.validateHourInput(this.startHour);
+            this.startHourSignal.set(this.validateHourInput(this.startHour()));
         }
         else {
-            this.startHour24 = this.validateHourInput24(this.startHour24);
+            this.startHour24Signal.set(this.validateHourInput24(this.startHour24()));
         }
     }
     onStartMinuteInput() {
-        this.startMinute = this.validateMinuteInput(this.startMinute);
+        this.startMinuteSignal.set(this.validateMinuteInput(this.startMinute()));
     }
     onEndHourInput() {
         if (this.is12HourFormat()) {
-            this.endHour = this.validateHourInput(this.endHour);
+            this.endHourSignal.set(this.validateHourInput(this.endHour()));
         }
         else {
-            this.endHour24 = this.validateHourInput24(this.endHour24);
+            this.endHour24Signal.set(this.validateHourInput24(this.endHour24()));
         }
     }
     onEndMinuteInput() {
-        this.endMinute = this.validateMinuteInput(this.endMinute);
+        this.endMinuteSignal.set(this.validateMinuteInput(this.endMinute()));
     }
     validateHourInput(hour) {
         // Apply bounds based on format
@@ -703,16 +750,16 @@ class TzDrpContainerComponent {
         // Initialize time values from existing selected dates if they contain time
         let startTimeInitialized = false;
         let endTimeInitialized = false;
-        if (this.data.dpConfig.enableTime && this.localSelectedDates.startDate) {
-            const startDateParts = this.localSelectedDates.startDate.split(' ');
+        if (this.data.dpConfig.enableTime && this.localSelectedDatesSignal().startDate) {
+            const startDateParts = this.localSelectedDatesSignal().startDate.split(' ');
             if (startDateParts.length > 1) {
                 const timePart = startDateParts.slice(1).join(' '); // Handle multiple spaces
                 this.parseTimeString(timePart, true);
                 startTimeInitialized = true;
             }
         }
-        if (this.data.dpConfig.enableTime && this.localSelectedDates.endDate) {
-            const endDateParts = this.localSelectedDates.endDate.split(' ');
+        if (this.data.dpConfig.enableTime && this.localSelectedDatesSignal().endDate) {
+            const endDateParts = this.localSelectedDatesSignal().endDate.split(' ');
             if (endDateParts.length > 1) {
                 const timePart = endDateParts.slice(1).join(' '); // Handle multiple spaces
                 this.parseTimeString(timePart, false);
@@ -753,60 +800,60 @@ class TzDrpContainerComponent {
                 amPm = 'AM';
             }
             if (isStart) {
-                this.startHour = hour12;
-                this.startMinute = currentMinute;
-                this.startAmPm = amPm;
-                this.startHour24 = currentHour;
+                this.startHourSignal.set(hour12);
+                this.startMinuteSignal.set(currentMinute);
+                this.startAmPmSignal.set(amPm);
+                this.startHour24Signal.set(currentHour);
             }
             else {
-                this.endHour = hour12;
-                this.endMinute = currentMinute;
-                this.endAmPm = amPm;
-                this.endHour24 = currentHour;
+                this.endHourSignal.set(hour12);
+                this.endMinuteSignal.set(currentMinute);
+                this.endAmPmSignal.set(amPm);
+                this.endHour24Signal.set(currentHour);
             }
         }
         else {
             // Use current time directly for 24-hour format
             if (isStart) {
-                this.startHour24 = currentHour;
-                this.startMinute = currentMinute;
+                this.startHour24Signal.set(currentHour);
+                this.startMinuteSignal.set(currentMinute);
                 // Also set 12-hour values for consistency
                 if (currentHour === 0) {
-                    this.startHour = 12;
-                    this.startAmPm = 'AM';
+                    this.startHourSignal.set(12);
+                    this.startAmPmSignal.set('AM');
                 }
                 else if (currentHour === 12) {
-                    this.startHour = 12;
-                    this.startAmPm = 'PM';
+                    this.startHourSignal.set(12);
+                    this.startAmPmSignal.set('PM');
                 }
                 else if (currentHour > 12) {
-                    this.startHour = currentHour - 12;
-                    this.startAmPm = 'PM';
+                    this.startHourSignal.set(currentHour - 12);
+                    this.startAmPmSignal.set('PM');
                 }
                 else {
-                    this.startHour = currentHour;
-                    this.startAmPm = 'AM';
+                    this.startHourSignal.set(currentHour);
+                    this.startAmPmSignal.set('AM');
                 }
             }
             else {
-                this.endHour24 = currentHour;
-                this.endMinute = currentMinute;
+                this.endHour24Signal.set(currentHour);
+                this.endMinuteSignal.set(currentMinute);
                 // Also set 12-hour values for consistency
                 if (currentHour === 0) {
-                    this.endHour = 12;
-                    this.endAmPm = 'AM';
+                    this.endHourSignal.set(12);
+                    this.endAmPmSignal.set('AM');
                 }
                 else if (currentHour === 12) {
-                    this.endHour = 12;
-                    this.endAmPm = 'PM';
+                    this.endHourSignal.set(12);
+                    this.endAmPmSignal.set('PM');
                 }
                 else if (currentHour > 12) {
-                    this.endHour = currentHour - 12;
-                    this.endAmPm = 'PM';
+                    this.endHourSignal.set(currentHour - 12);
+                    this.endAmPmSignal.set('PM');
                 }
                 else {
-                    this.endHour = currentHour;
-                    this.endAmPm = 'AM';
+                    this.endHourSignal.set(currentHour);
+                    this.endAmPmSignal.set('AM');
                 }
             }
         }
@@ -820,18 +867,18 @@ class TzDrpContainerComponent {
                 const minute = parseInt(match[2]);
                 const amPm = match[3].toUpperCase();
                 if (isStart) {
-                    this.startHour = hour;
-                    this.startMinute = minute;
-                    this.startAmPm = amPm;
+                    this.startHourSignal.set(hour);
+                    this.startMinuteSignal.set(minute);
+                    this.startAmPmSignal.set(amPm);
                     // Also set 24-hour value for consistency
-                    this.startHour24 = hour === 12 ? (amPm === 'PM' ? 12 : 0) : (amPm === 'PM' ? hour + 12 : hour);
+                    this.startHour24Signal.set(hour === 12 ? (amPm === 'PM' ? 12 : 0) : (amPm === 'PM' ? hour + 12 : hour));
                 }
                 else {
-                    this.endHour = hour;
-                    this.endMinute = minute;
-                    this.endAmPm = amPm;
+                    this.endHourSignal.set(hour);
+                    this.endMinuteSignal.set(minute);
+                    this.endAmPmSignal.set(amPm);
                     // Also set 24-hour value for consistency
-                    this.endHour24 = hour === 12 ? (amPm === 'PM' ? 12 : 0) : (amPm === 'PM' ? hour + 12 : hour);
+                    this.endHour24Signal.set(hour === 12 ? (amPm === 'PM' ? 12 : 0) : (amPm === 'PM' ? hour + 12 : hour));
                 }
             }
         }
@@ -843,46 +890,46 @@ class TzDrpContainerComponent {
                 const minute = parseInt(match[2]);
                 if (isStart) {
                     // Store directly in 24-hour format
-                    this.startHour24 = hour24;
-                    this.startMinute = minute;
+                    this.startHour24Signal.set(hour24);
+                    this.startMinuteSignal.set(minute);
                     // Also set 12-hour values for consistency (though not used in 24-hour mode)
                     if (hour24 === 0) {
-                        this.startHour = 12;
-                        this.startAmPm = 'AM';
+                        this.startHourSignal.set(12);
+                        this.startAmPmSignal.set('AM');
                     }
                     else if (hour24 === 12) {
-                        this.startHour = 12;
-                        this.startAmPm = 'PM';
+                        this.startHourSignal.set(12);
+                        this.startAmPmSignal.set('PM');
                     }
                     else if (hour24 > 12) {
-                        this.startHour = hour24 - 12;
-                        this.startAmPm = 'PM';
+                        this.startHourSignal.set(hour24 - 12);
+                        this.startAmPmSignal.set('PM');
                     }
                     else {
-                        this.startHour = hour24;
-                        this.startAmPm = 'AM';
+                        this.startHourSignal.set(hour24);
+                        this.startAmPmSignal.set('AM');
                     }
                 }
                 else {
                     // Store directly in 24-hour format
-                    this.endHour24 = hour24;
-                    this.endMinute = minute;
+                    this.endHour24Signal.set(hour24);
+                    this.endMinuteSignal.set(minute);
                     // Also set 12-hour values for consistency (though not used in 24-hour mode)
                     if (hour24 === 0) {
-                        this.endHour = 12;
-                        this.endAmPm = 'AM';
+                        this.endHourSignal.set(12);
+                        this.endAmPmSignal.set('AM');
                     }
                     else if (hour24 === 12) {
-                        this.endHour = 12;
-                        this.endAmPm = 'PM';
+                        this.endHourSignal.set(12);
+                        this.endAmPmSignal.set('PM');
                     }
                     else if (hour24 > 12) {
-                        this.endHour = hour24 - 12;
-                        this.endAmPm = 'PM';
+                        this.endHourSignal.set(hour24 - 12);
+                        this.endAmPmSignal.set('PM');
                     }
                     else {
-                        this.endHour = hour24;
-                        this.endAmPm = 'AM';
+                        this.endHourSignal.set(hour24);
+                        this.endAmPmSignal.set('AM');
                     }
                 }
             }
@@ -896,7 +943,7 @@ class TzDrpContainerComponent {
             i0.ɵɵelement(2, "div", 2);
             i0.ɵɵtemplate(3, TzDrpContainerComponent_div_3_Template, 5, 5, "div", 3);
             i0.ɵɵelementStart(4, "div", 4)(5, "div", 5)(6, "div", 6);
-            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_6_listener() { return !ctx.isPreviousMonthDisabled && ctx.navigateMonth("PREVIOUS"); })("keyup.enter", function TzDrpContainerComponent_Template_div_keyup_enter_6_listener() { return !ctx.isPreviousMonthDisabled && ctx.navigateMonth("PREVIOUS"); });
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_6_listener() { return !ctx.isPreviousMonthDisabled() && ctx.navigateMonth("PREVIOUS"); })("keyup.enter", function TzDrpContainerComponent_Template_div_keyup_enter_6_listener() { return !ctx.isPreviousMonthDisabled() && ctx.navigateMonth("PREVIOUS"); });
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(7, "svg", 7);
             i0.ɵɵelement(8, "path", 8);
@@ -907,7 +954,7 @@ class TzDrpContainerComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵelement(11, "div");
             i0.ɵɵelementStart(12, "div", 9);
-            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_12_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); })("keyup.enter", function TzDrpContainerComponent_Template_div_keyup_enter_12_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); });
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_12_listener() { return !ctx.isNextMonthDisabled() && ctx.navigateMonth("NEXT"); })("keyup.enter", function TzDrpContainerComponent_Template_div_keyup_enter_12_listener() { return !ctx.isNextMonthDisabled() && ctx.navigateMonth("NEXT"); });
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(13, "svg", 7);
             i0.ɵɵelement(14, "path", 8);
@@ -925,7 +972,7 @@ class TzDrpContainerComponent {
             i0.ɵɵtext(24);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(25, "div", 16);
-            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_25_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); })("keyup.enter", function TzDrpContainerComponent_Template_div_keyup_enter_25_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); });
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_25_listener() { return !ctx.isNextMonthDisabled() && ctx.navigateMonth("NEXT"); })("keyup.enter", function TzDrpContainerComponent_Template_div_keyup_enter_25_listener() { return !ctx.isNextMonthDisabled() && ctx.navigateMonth("NEXT"); });
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(26, "svg", 7);
             i0.ɵɵelement(27, "path", 8);
@@ -951,32 +998,32 @@ class TzDrpContainerComponent {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", (ctx.data == null ? null : ctx.data.dpConfig == null ? null : ctx.data.dpConfig.ranges == null ? null : ctx.data.dpConfig.ranges.length) > 0);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c0, ctx.isPreviousMonthDisabled));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c0, ctx.isPreviousMonthDisabled()));
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate2(" ", ctx.currentMonth, " ", ctx.currentYearNumber, " ");
+            i0.ɵɵtextInterpolate2(" ", ctx.currentMonth(), " ", ctx.currentYearNumber(), " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(17, _c0, ctx.isNextMonthDisabled));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(17, _c0, ctx.isNextMonthDisabled()));
             i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngForOf", ctx.weekDays);
+            i0.ɵɵproperty("ngForOf", ctx.weekDays());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngForOf", ctx.currentMonthDates);
+            i0.ɵɵproperty("ngForOf", ctx.currentMonthDates());
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate2(" ", ctx.nextMonth, " ", ctx.nextYearNumber, " ");
+            i0.ɵɵtextInterpolate2(" ", ctx.nextMonth(), " ", ctx.nextYearNumber(), " ");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(19, _c0, ctx.isNextMonthDisabled));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(19, _c0, ctx.isNextMonthDisabled()));
             i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngForOf", ctx.weekDays);
+            i0.ɵɵproperty("ngForOf", ctx.weekDays());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngForOf", ctx.nextMonthDates);
+            i0.ɵɵproperty("ngForOf", ctx.nextMonthDates());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.data.dpConfig.enableTime === true);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("disabled", !ctx.isDatesValid);
-        } }, 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: ["[_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}.daterangepicker-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;overflow:hidden;-webkit-user-select:none;user-select:none}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]{max-width:100vw;border:none}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]{display:flex;gap:24px;padding:16px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__ranges[_ngcontent-%COMP%]{display:flex;flex-direction:column}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .mis-btn[_ngcontent-%COMP%]{background:none;outline:none;border:none;cursor:pointer;border-radius:4px;vertical-align:middle;text-align:center;box-sizing:border-box;display:flex;align-items:center;text-decoration:none;justify-content:center;padding:10px 16px;font-size:16px;line-height:24px;background-color:transparent;color:var(--brand-primary, #0937B2)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .active-range[_ngcontent-%COMP%]{background-color:var(--brand-primary-lightest, #CBDDFB)}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]{flex-direction:column;align-items:center;position:fixed;bottom:0;left:0;background-color:#fff;width:100%;max-height:68vh;overflow-y:auto;border-radius:30px;gap:24px;padding:10% 0 30%;box-shadow:0 -4px 8px 10000px #0000001f;scrollbar-width:none;-ms-overflow-style:none}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__left[_ngcontent-%COMP%], .daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__right[_ngcontent-%COMP%]{display:flex;flex-direction:column}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__left[_ngcontent-%COMP%], .daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__right[_ngcontent-%COMP%]{width:90%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:10%}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{margin:0 auto;font-size:4vw}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]{width:7%}}@media only screen and (min-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .mobile_view[_ngcontent-%COMP%]{display:none}}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .pc_view[_ngcontent-%COMP%]{display:none}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]{height:100%;width:252px}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]{width:100%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]{margin:0 auto}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-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-secondary, #6A737D)}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:3vw}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:var(--text-primary, #181F33)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]{width:36px;height:36px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]{flex:0 0 14.2857142857%;width:14.2857142857%;height:14.2857142857%;aspect-ratio:1}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:var(--text-secondary, #6A737D)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-start-day):not(.selected-end-day) > span[_ngcontent-%COMP%]{color:var(--text-primary, #181F33)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:var(--brand-primary-lightest, #CBDDFB);cursor:pointer}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-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)}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:3.4vw}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.selected-day[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.disabled-day[_ngcontent-%COMP%]{color:var(--text-secondary, #6A737D)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-same-day[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);border-radius:50%!important}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-same-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-start-day[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);border-radius:20px 4px 4px 20px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-start-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);border-radius:0 20px 20px 0}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .in-range-day[_ngcontent-%COMP%]:not(.disabled-day){background-color:var(--brand-primary-lightest, #CBDDFB)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]{border-top:1px solid var(--border-primary, #E0E0E0);padding:16px 24px;background-color:#f8f9fa;display:flex;gap:24px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]{flex:1}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]{margin:0 0 8px;font-size:14px;font-weight:600;color:#333}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .time-input[_ngcontent-%COMP%]{width:60px;padding:8px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:14px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .time-input[_ngcontent-%COMP%]:focus{outline:none;border-color:var(--brand-primary, #0937B2);box-shadow:0 0 0 2px #0937b233}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .time-input.hour-input[_ngcontent-%COMP%], .daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .time-input.minute-input[_ngcontent-%COMP%]{width:50px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .time-separator[_ngcontent-%COMP%]{font-size:16px;font-weight:600;color:#666}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .am-pm-selector[_ngcontent-%COMP%]{padding:7.1px 12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:14px;cursor:pointer}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .am-pm-selector[_ngcontent-%COMP%]:focus{outline:none;border-color:var(--brand-primary, #0937B2)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;border-top:1px solid var(--border-primary, #E0E0E0);padding:16px 24px;gap:24px}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]{justify-content:space-evenly;padding:2% 0;background-color:var(--bg-primary, #FFFFFF);position:fixed;bottom:0;left:0;width:100%;height:8vh;border-top:2px solid var(--text-disabled, #C8CDD3)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   #mobile-footer-btn[_ngcontent-%COMP%]{width:36%;font-size:3.8vw}}"] }); }
+            i0.ɵɵproperty("disabled", !ctx.isDatesValid());
+        } }, 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: ["[_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}.daterangepicker-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;overflow:hidden;-webkit-user-select:none;user-select:none}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]{max-width:100vw;border:none}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]{display:flex;gap:24px;padding:16px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__ranges[_ngcontent-%COMP%]{display:flex;flex-direction:column}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .mis-btn[_ngcontent-%COMP%]{background:none;outline:none;border:none;cursor:pointer;border-radius:4px;vertical-align:middle;text-align:center;box-sizing:border-box;display:flex;align-items:center;text-decoration:none;justify-content:center;padding:10px 16px;font-size:16px;line-height:24px;background-color:transparent;color:#0937b2}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .active-range[_ngcontent-%COMP%]{background-color:#cadcfb}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]{flex-direction:column;align-items:center;position:fixed;bottom:0;left:0;background-color:#fff;width:100%;max-height:68vh;overflow-y:auto;border-radius:30px;gap:24px;padding:10% 0 30%;box-shadow:0 -4px 8px 10000px #0000001f;scrollbar-width:none;-ms-overflow-style:none}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__left[_ngcontent-%COMP%], .daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__right[_ngcontent-%COMP%]{display:flex;flex-direction:column}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__left[_ngcontent-%COMP%], .daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__right[_ngcontent-%COMP%]{width:90%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:10%}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{margin:0 auto;font-size:4vw}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]{width:7%}}@media only screen and (min-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .mobile_view[_ngcontent-%COMP%]{display:none}}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .pc_view[_ngcontent-%COMP%]{display:none}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]{height:100%;width:252px}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]{width:100%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]{margin:0 auto}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-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:#6a737d}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:3vw}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]{width:36px;height:36px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]{flex:0 0 14.2857142857%;width:14.2857142857%;height:14.2857142857%;aspect-ratio:1}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-start-day):not(.selected-end-day) > span[_ngcontent-%COMP%]{color:#181f33}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-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}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:3.4vw}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.selected-day[_ngcontent-%COMP%]{color:#fff}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.disabled-day[_ngcontent-%COMP%]{color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-same-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:50%!important}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-same-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-start-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-start-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .in-range-day[_ngcontent-%COMP%]:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]{border-top:1px solid #e0e0e0;padding:16px 24px;background-color:#f8f9fa;display:flex;gap:24px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]{flex:1}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]{margin:0 0 8px;font-size:14px;font-weight:600;color:#333}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .time-input[_ngcontent-%COMP%]{width:60px;padding:8px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:14px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .time-input[_ngcontent-%COMP%]:focus{outline:none;border-color:#0937b2;box-shadow:0 0 0 2px #0937b233}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .time-input.hour-input[_ngcontent-%COMP%], .daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .time-input.minute-input[_ngcontent-%COMP%]{width:50px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .time-separator[_ngcontent-%COMP%]{font-size:16px;font-weight:600;color:#666}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .am-pm-selector[_ngcontent-%COMP%]{padding:7.1px 12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:14px;cursor:pointer}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__time[_ngcontent-%COMP%]   .time-section[_ngcontent-%COMP%]   .time-inputs[_ngcontent-%COMP%]   .am-pm-selector[_ngcontent-%COMP%]:focus{outline:none;border-color:#0937b2}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;border-top:1px solid #e0e0e0;padding:16px 24px;gap:24px}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]{justify-content:space-evenly;padding:2% 0;background-color:#fff;position:fixed;bottom:0;left:0;width:100%;height:8vh;border-top:2px solid #C8CDD3}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   #mobile-footer-btn[_ngcontent-%COMP%]{width:36%;font-size:3.8vw}}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
         type: Component,
-        args: [{ selector: "mis-tz-drp", template: "<div class=\"daterangepicker-container\" aria-label=\"date range picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <div class=\"daterangepicker-container__view\">\n    <div tabindex=\"-1\" cdkFocusInitial></div>\n    <div *ngIf=\"data?.dpConfig?.ranges?.length > 0\" class=\"daterangepicker-container__ranges\">\n      <div *ngFor=\"let item of data?.dpConfig?.ranges ?? []\" >\n        <button\n        [ngClass]=\"{'active-range' : selectedItemLabel === item.label}\"\n          (click)=\"selectRange(item)\"\n          class=\"mis-btn\"\n        >\n          {{ item.label }}\n        </button>\n      </div>\n      <div> <button class=\"mis-btn\" [ngClass]=\"{'active-range' : selectedItemLabel === 'Custom Range'}\" (click)=\"resetRange()\">Custom Range</button> </div>\n  </div>\n    <div class=\"datepicker__left\">\n      <div class=\"daterangepicker-container__header__prabu\">\n        <div\n          class=\"daterangepicker-container__arrow__icon\"\n          tabindex=\"0\"\n          (click)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n          (keyup.enter)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n          aria-label=\"Previous Month\"\n          [ngClass]=\"{\n            'disabled-month': isPreviousMonthDisabled\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        <span> {{ currentMonth }} {{ currentYearNumber }} </span>\n        <div></div>\n        <!-- Button visible in mobile view -->\n        <div\n          class=\"daterangepicker-container__arrow__icon mobile_view\"\n          tabindex=\"0\"\n          (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n          (keyup.enter)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n          aria-label=\"Next Month\"\n          [ngClass]=\"{\n            'disabled-month': isNextMonthDisabled\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=\"daterangepicker-container__body\">\n        <div class=\"daterangepicker-container__weekdays\">\n          <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n            <span>{{ weekDay.label }}</span>\n          </div>\n        </div>\n        <div class=\"daterangepicker-container__days\">\n          <div\n            class=\"daterangepicker-container__day\" \n            [ngClass]=\"{\n              'selected-same-day': day.isSelectedStartDay && day.isSelectedEndDay,\n              'selected-start-day': day.isSelectedStartDay,\n              'selected-end-day': day.isSelectedEndDay,\n              'disabled-day': day.isDisabledDay,\n              'in-range-day': day.inRangeDay,\n              'is-valid-date': day.date > 0 && !(day.isSelectedStartDay && day.isSelectedEndDay)\n            }\"\n            *ngFor=\"let day of currentMonthDates\"\n            (click)=\"selectDay('LEFT', day)\"\n            (keyup.enter)=\"selectDay('LEFT', day)\"\n          >\n            <span *ngIf=\"day.date > 0\"\n              [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n              [attr.aria-label]=\"retractDayMonth(day.date, currentMonth, currentYearNumber)\">\n              {{ day.date }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"datepicker__right\">\n      <div class=\"daterangepicker-container__header__prabu\">\n        <div></div>\n        <span> {{ nextMonth }} {{ nextYearNumber }} </span>\n        <div\n          class=\"daterangepicker-container__arrow__icon pc_view\"\n          tabindex=\"0\"\n          (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n          (keyup.enter)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n          [ngClass]=\"{\n            'disabled-month': isNextMonthDisabled\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=\"daterangepicker-container__body\">\n        <div class=\"daterangepicker-container__weekdays\">\n          <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n            <span>{{ weekDay.label }}</span>\n          </div>\n        </div>\n        <div class=\"daterangepicker-container__days\">\n          <div\n            class=\"daterangepicker-container__day\"\n            [ngClass]=\"{\n              'selected-same-day': day.isSelectedStartDay && day.isSelectedEndDay,\n              'selected-start-day': day.isSelectedStartDay,\n              'selected-end-day': day.isSelectedEndDay,\n              'disabled-day': day.isDisabledDay,\n              'in-range-day': day.inRangeDay,\n              'is-valid-date': day.date > 0 && !(day.isSelectedStartDay && day.isSelectedEndDay)\n            }\"\n            *ngFor=\"let day of nextMonthDates\"\n            (click)=\"selectDay('RIGHT', day)\"\n            (keyup.enter)=\"selectDay('RIGHT', day)\"\n          >\n            <span *ngIf=\"day.date > 0\"\n              [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n              [attr.aria-label]=\"retractDayMonth(day.date, nextMonth, nextYearNumber)\">\n              {{ day.date }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <!-- Time Selection Section -->\n  <div class=\"daterangepicker-container__time\" *ngIf=\"data.dpConfig.enableTime === true\">\n    <div class=\"time-section\">\n      <h4>From</h4>\n      <div class=\"time-inputs\">\n        <input \n          type=\"number\" \n          [ngModel]=\"is12HourFormat() ? startHour : startHour24\" \n          (ngModelChange)=\"is12HourFormat() ? (startHour = $event) : (startHour24 = $event); onStartHourInput()\"\n          [min]=\"is12HourFormat() ? 1 : 0\" \n          [max]=\"is12HourFormat() ? 12 : 23\" \n          step=\"1\"\n          class=\"time-input hour-input\"\n          placeholder=\"HH\">\n        <span class=\"time-separator\">:</span>\n        <input \n          type=\"number\" \n          [(ngModel)]=\"startMinute\" \n          (input)=\"onStartMinuteInput()\"\n          min=\"0\" \n          max=\"59\" \n          step=\"1\"\n          class=\"time-input minute-input\"\n          placeholder=\"MM\">\n        <select \n          [(ngModel)]=\"startAmPm\" \n          class=\"am-pm-selector\"\n          *ngIf=\"is12HourFormat()\">\n          <option value=\"AM\">AM</option>\n          <option value=\"PM\">PM</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"time-section\">\n      <h4>To</h4>\n      <div class=\"time-inputs\">\n        <input \n          type=\"number\" \n          [ngModel]=\"is12HourFormat() ? endHour : endHour24\" \n          (ngModelChange)=\"is12HourFormat() ? (endHour = $event) : (endHour24 = $event); onEndHourInput()\"\n          [min]=\"is12HourFormat() ? 1 : 0\" \n          [max]=\"is12HourFormat() ? 12 : 23\" \n          step=\"1\"\n          class=\"time-input hour-input\"\n          placeholder=\"HH\">\n        <span class=\"time-separator\">:</span>\n        <input \n          type=\"number\" \n          [(ngModel)]=\"endMinute\" \n          (input)=\"onEndMinuteInput()\"\n          min=\"0\" \n          max=\"59\" \n          step=\"1\"\n          class=\"time-input minute-input\"\n          placeholder=\"MM\">\n        <select \n          [(ngModel)]=\"endAmPm\" \n          class=\"am-pm-selector\"\n          *ngIf=\"is12HourFormat()\">\n          <option value=\"AM\">AM</option>\n          <option value=\"PM\">PM</option>\n        </select>\n      </div>\n    </div>\n  </div>\n  \n  <div class=\"daterangepicker__footer\">\n    <button mis-button type=\"none\" id='mobile-footer-btn' (click)=\"cancelDatePicker()\">Cancel</button>\n    <button mis-button type=\"primary\" id=\"mobile-footer-btn\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid\">Apply</button>\n  </div>\n</div>", styles: [":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}.daterangepicker-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;overflow:hidden;-webkit-user-select:none;user-select:none}@media only screen and (max-width: 900px){.daterangepicker-container{max-width:100vw;border:none}}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__ranges{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .mis-btn{background:none;outline:none;border:none;cursor:pointer;border-radius:4px;vertical-align:middle;text-align:center;box-sizing:border-box;display:flex;align-items:center;text-decoration:none;justify-content:center;padding:10px 16px;font-size:16px;line-height:24px;background-color:transparent;color:var(--brand-primary, #0937B2)}.daterangepicker-container .daterangepicker-container__view .active-range{background-color:var(--brand-primary-lightest, #CBDDFB)}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view{flex-direction:column;align-items:center;position:fixed;bottom:0;left:0;background-color:#fff;width:100%;max-height:68vh;overflow-y:auto;border-radius:30px;gap:24px;padding:10% 0 30%;box-shadow:0 -4px 8px 10000px #0000001f;scrollbar-width:none;-ms-overflow-style:none}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__view::-webkit-scrollbar{display:none}}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{width:90%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:10%}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{margin:0 auto;font-size:4vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{width:7%}}@media only screen and (min-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .mobile_view{display:none}}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .pc_view{display:none}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{width:100%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{margin:0 auto}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:var(--text-secondary, #6A737D)}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:3vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:var(--text-primary, #181F33)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-wrap:wrap}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{width:36px;height:36px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex:0 0 14.2857142857%;width:14.2857142857%;height:14.2857142857%;aspect-ratio:1}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day{cursor:default}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day:hover{background-color:transparent}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day>span{color:var(--text-secondary, #6A737D)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day)>span{color:var(--text-primary, #181F33)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:var(--brand-primary-lightest, #CBDDFB);cursor:pointer}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-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)}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:3.4vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.selected-day{color:var(--bg-primary, #FFFFFF)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.disabled-day{color:var(--text-secondary, #6A737D)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-same-day{background-color:var(--brand-primary, #0937B2);border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-same-day>span{color:var(--bg-primary, #FFFFFF)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day{background-color:var(--brand-primary, #0937B2);border-radius:20px 4px 4px 20px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day>span{color:var(--bg-primary, #FFFFFF)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day{background-color:var(--brand-primary, #0937B2);border-radius:0 20px 20px 0}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day>span{color:var(--bg-primary, #FFFFFF)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:var(--brand-primary-lightest, #CBDDFB)}.daterangepicker-container .daterangepicker-container__time{border-top:1px solid var(--border-primary, #E0E0E0);padding:16px 24px;background-color:#f8f9fa;display:flex;gap:24px}.daterangepicker-container .daterangepicker-container__time .time-section{flex:1}.daterangepicker-container .daterangepicker-container__time .time-section h4{margin:0 0 8px;font-size:14px;font-weight:600;color:#333}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs{display:flex;align-items:center;gap:8px}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .time-input{width:60px;padding:8px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:14px}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .time-input:focus{outline:none;border-color:var(--brand-primary, #0937B2);box-shadow:0 0 0 2px #0937b233}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .time-input.hour-input,.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .time-input.minute-input{width:50px}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .time-separator{font-size:16px;font-weight:600;color:#666}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .am-pm-selector{padding:7.1px 12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:14px;cursor:pointer}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .am-pm-selector:focus{outline:none;border-color:var(--brand-primary, #0937B2)}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:flex-end;border-top:1px solid var(--border-primary, #E0E0E0);padding:16px 24px;gap:24px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker__footer{justify-content:space-evenly;padding:2% 0;background-color:var(--bg-primary, #FFFFFF);position:fixed;bottom:0;left:0;width:100%;height:8vh;border-top:2px solid var(--text-disabled, #C8CDD3)}.daterangepicker-container .daterangepicker__footer #mobile-footer-btn{width:36%;font-size:3.8vw}}\n"] }]
+        args: [{ selector: "mis-tz-drp", template: "<div class=\"daterangepicker-container\" aria-label=\"date range picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <div class=\"daterangepicker-container__view\">\n    <div tabindex=\"-1\" cdkFocusInitial></div>\n    <div *ngIf=\"data?.dpConfig?.ranges?.length > 0\" class=\"daterangepicker-container__ranges\">\n      <div *ngFor=\"let item of data?.dpConfig?.ranges ?? []\" >\n        <button\n        [ngClass]=\"{'active-range' : selectedItemLabel() === item.label}\"\n          (click)=\"selectRange(item)\"\n          class=\"mis-btn\"\n        >\n          {{ item.label }}\n        </button>\n      </div>\n      <div> <button class=\"mis-btn\" [ngClass]=\"{'active-range' : selectedItemLabel() === 'Custom Range'}\" (click)=\"resetRange()\">Custom Range</button> </div>\n  </div>\n    <div class=\"datepicker__left\">\n      <div class=\"daterangepicker-container__header__prabu\">\n        <div\n          class=\"daterangepicker-container__arrow__icon\"\n          tabindex=\"0\"\n          (click)=\"!isPreviousMonthDisabled() && navigateMonth('PREVIOUS')\"\n          (keyup.enter)=\"!isPreviousMonthDisabled() && navigateMonth('PREVIOUS')\"\n          aria-label=\"Previous Month\"\n          [ngClass]=\"{\n            'disabled-month': isPreviousMonthDisabled()\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        <span> {{ currentMonth() }} {{ currentYearNumber() }} </span>\n        <div></div>\n        <!-- Button visible in mobile view -->\n        <div\n          class=\"daterangepicker-container__arrow__icon mobile_view\"\n          tabindex=\"0\"\n          (click)=\"!isNextMonthDisabled() && navigateMonth('NEXT')\"\n          (keyup.enter)=\"!isNextMonthDisabled() && navigateMonth('NEXT')\"\n          aria-label=\"Next Month\"\n          [ngClass]=\"{\n            'disabled-month': isNextMonthDisabled()\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=\"daterangepicker-container__body\">\n        <div class=\"daterangepicker-container__weekdays\">\n          <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays()\">\n            <span>{{ weekDay.label }}</span>\n          </div>\n        </div>\n        <div class=\"daterangepicker-container__days\">\n          <div\n            class=\"daterangepicker-container__day\" \n            [ngClass]=\"{\n              'selected-same-day': day.isSelectedStartDay && day.isSelectedEndDay,\n              'selected-start-day': day.isSelectedStartDay,\n              'selected-end-day': day.isSelectedEndDay,\n              'disabled-day': day.isDisabledDay,\n              'in-range-day': day.inRangeDay,\n              'is-valid-date': day.date > 0 && !(day.isSelectedStartDay && day.isSelectedEndDay)\n            }\"\n            *ngFor=\"let day of currentMonthDates()\"\n            (click)=\"selectDay('LEFT', day)\"\n            (keyup.enter)=\"selectDay('LEFT', day)\"\n          >\n            <span *ngIf=\"day.date > 0\"\n              [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n              [attr.aria-label]=\"retractDayMonth(day.date, currentMonth(), currentYearNumber())\">\n              {{ day.date }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"datepicker__right\">\n      <div class=\"daterangepicker-container__header__prabu\">\n        <div></div>\n        <span> {{ nextMonth() }} {{ nextYearNumber() }} </span>\n        <div\n          class=\"daterangepicker-container__arrow__icon pc_view\"\n          tabindex=\"0\"\n          (click)=\"!isNextMonthDisabled() && navigateMonth('NEXT')\"\n          (keyup.enter)=\"!isNextMonthDisabled() && navigateMonth('NEXT')\"\n          [ngClass]=\"{\n            'disabled-month': isNextMonthDisabled()\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=\"daterangepicker-container__body\">\n        <div class=\"daterangepicker-container__weekdays\">\n          <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays()\">\n            <span>{{ weekDay.label }}</span>\n          </div>\n        </div>\n        <div class=\"daterangepicker-container__days\">\n          <div\n            class=\"daterangepicker-container__day\"\n            [ngClass]=\"{\n              'selected-same-day': day.isSelectedStartDay && day.isSelectedEndDay,\n              'selected-start-day': day.isSelectedStartDay,\n              'selected-end-day': day.isSelectedEndDay,\n              'disabled-day': day.isDisabledDay,\n              'in-range-day': day.inRangeDay,\n              'is-valid-date': day.date > 0 && !(day.isSelectedStartDay && day.isSelectedEndDay)\n            }\"\n            *ngFor=\"let day of nextMonthDates()\"\n            (click)=\"selectDay('RIGHT', day)\"\n            (keyup.enter)=\"selectDay('RIGHT', day)\"\n          >\n            <span *ngIf=\"day.date > 0\"\n              [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n              [attr.aria-label]=\"retractDayMonth(day.date, nextMonth(), nextYearNumber())\">\n              {{ day.date }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <!-- Time Selection Section -->\n  <div class=\"daterangepicker-container__time\" *ngIf=\"data.dpConfig.enableTime === true\">\n    <div class=\"time-section\">\n      <h4>From</h4>\n      <div class=\"time-inputs\">\n        <input \n          type=\"number\" \n          [ngModel]=\"is12HourFormat() ? startHour() : startHour24()\" \n          (ngModelChange)=\"is12HourFormat() ? startHourSignal.set($event) : startHour24Signal.set($event); onStartHourInput()\"\n          [min]=\"is12HourFormat() ? 1 : 0\" \n          [max]=\"is12HourFormat() ? 12 : 23\" \n          step=\"1\"\n          class=\"time-input hour-input\"\n          placeholder=\"HH\">\n        <span class=\"time-separator\">:</span>\n        <input \n          type=\"number\" \n          [ngModel]=\"startMinute()\" (ngModelChange)=\"startMinuteSignal.set($event)\" \n          (input)=\"onStartMinuteInput()\"\n          min=\"0\" \n          max=\"59\" \n          step=\"1\"\n          class=\"time-input minute-input\"\n          placeholder=\"MM\">\n        <select \n          [ngModel]=\"startAmPm()\" (ngModelChange)=\"startAmPmSignal.set($event)\" \n          class=\"am-pm-selector\"\n          *ngIf=\"is12HourFormat()\">\n          <option value=\"AM\">AM</option>\n          <option value=\"PM\">PM</option>\n        </select>\n      </div>\n    </div>\n    \n    <div class=\"time-section\">\n      <h4>To</h4>\n      <div class=\"time-inputs\">\n        <input \n          type=\"number\" \n          [ngModel]=\"is12HourFormat() ? endHour() : endHour24()\" \n          (ngModelChange)=\"is12HourFormat() ? endHourSignal.set($event) : endHour24Signal.set($event); onEndHourInput()\"\n          [min]=\"is12HourFormat() ? 1 : 0\" \n          [max]=\"is12HourFormat() ? 12 : 23\" \n          step=\"1\"\n          class=\"time-input hour-input\"\n          placeholder=\"HH\">\n        <span class=\"time-separator\">:</span>\n        <input \n          type=\"number\" \n          [ngModel]=\"endMinute()\" (ngModelChange)=\"endMinuteSignal.set($event)\" \n          (input)=\"onEndMinuteInput()\"\n          min=\"0\" \n          max=\"59\" \n          step=\"1\"\n          class=\"time-input minute-input\"\n          placeholder=\"MM\">\n        <select \n          [ngModel]=\"endAmPm()\" (ngModelChange)=\"endAmPmSignal.set($event)\" \n          class=\"am-pm-selector\"\n          *ngIf=\"is12HourFormat()\">\n          <option value=\"AM\">AM</option>\n          <option value=\"PM\">PM</option>\n        </select>\n      </div>\n    </div>\n  </div>\n  \n  <div class=\"daterangepicker__footer\">\n    <button mis-button type=\"none\" id='mobile-footer-btn' (click)=\"cancelDatePicker()\">Cancel</button>\n    <button mis-button type=\"primary\" id=\"mobile-footer-btn\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid()\">Apply</button>\n  </div>\n</div>", styles: [":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}.daterangepicker-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;overflow:hidden;-webkit-user-select:none;user-select:none}@media only screen and (max-width: 900px){.daterangepicker-container{max-width:100vw;border:none}}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__ranges{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .mis-btn{background:none;outline:none;border:none;cursor:pointer;border-radius:4px;vertical-align:middle;text-align:center;box-sizing:border-box;display:flex;align-items:center;text-decoration:none;justify-content:center;padding:10px 16px;font-size:16px;line-height:24px;background-color:transparent;color:#0937b2}.daterangepicker-container .daterangepicker-container__view .active-range{background-color:#cadcfb}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view{flex-direction:column;align-items:center;position:fixed;bottom:0;left:0;background-color:#fff;width:100%;max-height:68vh;overflow-y:auto;border-radius:30px;gap:24px;padding:10% 0 30%;box-shadow:0 -4px 8px 10000px #0000001f;scrollbar-width:none;-ms-overflow-style:none}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__view::-webkit-scrollbar{display:none}}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{width:90%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:10%}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{margin:0 auto;font-size:4vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{width:7%}}@media only screen and (min-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .mobile_view{display:none}}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .pc_view{display:none}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{width:100%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{margin:0 auto}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#6a737d}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:3vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-wrap:wrap}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{width:36px;height:36px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex:0 0 14.2857142857%;width:14.2857142857%;height:14.2857142857%;aspect-ratio:1}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day{cursor:default}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day:hover{background-color:transparent}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day>span{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day)>span{color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:3.4vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.selected-day{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.disabled-day{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-same-day{background-color:#0937b2;border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-same-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__time{border-top:1px solid #e0e0e0;padding:16px 24px;background-color:#f8f9fa;display:flex;gap:24px}.daterangepicker-container .daterangepicker-container__time .time-section{flex:1}.daterangepicker-container .daterangepicker-container__time .time-section h4{margin:0 0 8px;font-size:14px;font-weight:600;color:#333}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs{display:flex;align-items:center;gap:8px}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .time-input{width:60px;padding:8px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:14px}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .time-input:focus{outline:none;border-color:#0937b2;box-shadow:0 0 0 2px #0937b233}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .time-input.hour-input,.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .time-input.minute-input{width:50px}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .time-separator{font-size:16px;font-weight:600;color:#666}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .am-pm-selector{padding:7.1px 12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:14px;cursor:pointer}.daterangepicker-container .daterangepicker-container__time .time-section .time-inputs .am-pm-selector:focus{outline:none;border-color:#0937b2}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:flex-end;border-top:1px solid #e0e0e0;padding:16px 24px;gap:24px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker__footer{justify-content:space-evenly;padding:2% 0;background-color:#fff;position:fixed;bottom:0;left:0;width:100%;height:8vh;border-top:2px solid #C8CDD3}.daterangepicker-container .daterangepicker__footer #mobile-footer-btn{width:36%;font-size:3.8vw}}\n"] }]
     }], () => [{ type: undefined, decorators: [{
                 type: Inject,
                 args: [CONTAINER_DATA]
@@ -987,34 +1034,30 @@ class TzDrpContainerComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TzDrpContainerComponent, { className: "TzDrpContainerComponent" }); })();
 
 class TzDaterangepickerDirective {
-    // dd-mm-yyyy 01-12-2022
-    set selectedDates(dates) {
-        this.dates = { startDate: null, endDate: null, ...dates };
-    }
-    set datesDisabled(dates) {
-        this.dpDisabledDates = dates;
-    }
     constructor(control, element, overlay, viewContainerRef) {
         this.control = control;
         this.element = element;
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
-        this.dpConfig = {
+        // Signal-based inputs
+        this.dpConfig = input({
             format: DATE_FORMAT,
             minDate: "",
             maxDate: "",
             maxAllowedRange: 0,
             ranges: []
-        };
-        this.selectedRangeLabel = 'Custom Range';
-        this.dateMessages = [];
-        this.positionX = "center";
-        this.positionY = "bottom";
-        this.offsetX = 0;
-        this.offsetY = 0;
-        this.dateChange = new EventEmitter(true);
+        });
+        this.selectedDates = input({ startDate: null, endDate: null });
+        this.datesDisabled = input([]);
+        this.selectedRangeLabel = input('Custom Range');
+        this.dateMessages = input([]);
+        this.positionX = input("center");
+        this.positionY = input("bottom");
+        this.offsetX = input(0);
+        this.offsetY = input(0);
+        // Signal-based output
+        this.dateChange = output();
         this.isOpen = false;
-        this.dpDisabledDates = [];
     }
     toggleDatePicker() {
         if (this.isOpen) {
@@ -1043,10 +1086,10 @@ class TzDaterangepickerDirective {
             .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({
@@ -1061,11 +1104,11 @@ class TzDaterangepickerDirective {
                 {
                     provide: CONTAINER_DATA,
                     useValue: {
-                        messages: this.dateMessages,
-                        dates: this.control?.control.value || this.dates,
-                        dpConfig: this.dpConfig,
-                        datesDisabled: this.dpDisabledDates,
-                        selectedRangeLabel: this.selectedRangeLabel,
+                        messages: this.dateMessages(),
+                        dates: this.control?.control.value || this.selectedDates(),
+                        dpConfig: this.dpConfig(),
+                        datesDisabled: this.datesDisabled(),
+                        selectedRangeLabel: this.selectedRangeLabel(),
                         dateChange: this.applyDate.bind(this),
                         close: this.close.bind(this)
                     }
@@ -1088,7 +1131,6 @@ class TzDaterangepickerDirective {
         };
         this.dateChange.emit(result);
         this.control?.control.patchValue(result);
-        this.dates = result;
         this.close();
     }
     close() {
@@ -1099,7 +1141,7 @@ class TzDaterangepickerDirective {
     static { this.ɵfac = function TzDaterangepickerDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TzDaterangepickerDirective)(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: TzDaterangepickerDirective, selectors: [["input", "misTzDrp", ""]], hostBindings: function TzDaterangepickerDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function TzDaterangepickerDirective_click_HostBindingHandler() { return ctx.toggleDatePicker(); })("keydown.enter", function TzDaterangepickerDirective_keydown_enter_HostBindingHandler() { return ctx.toggleDatePickerOnEnter(); })("keydown.esc", function TzDaterangepickerDirective_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
-        } }, inputs: { dpConfig: "dpConfig", selectedDates: "selectedDates", datesDisabled: "datesDisabled", selectedRangeLabel: "selectedRangeLabel", dateMessages: "dateMessages", positionX: "positionX", positionY: "positionY", offsetX: "offsetX", offsetY: "offsetY" }, outputs: { dateChange: "dateChange" } }); }
+        } }, inputs: { dpConfig: [1, "dpConfig"], selectedDates: [1, "selectedDates"], datesDisabled: [1, "datesDisabled"], selectedRangeLabel: [1, "selectedRangeLabel"], dateMessages: [1, "dateMessages"], positionX: [1, "positionX"], positionY: [1, "positionY"], offsetX: [1, "offsetX"], offsetY: [1, "offsetY"] }, outputs: { dateChange: "dateChange" } }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDaterangepickerDirective, [{
         type: Directive,
@@ -1110,27 +1152,7 @@ class TzDaterangepickerDirective {
                 type: Self
             }, {
                 type: Optional
-            }] }, { type: i0.ElementRef }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], { dpConfig: [{
-            type: Input
-        }], selectedDates: [{
-            type: Input
-        }], datesDisabled: [{
-            type: Input
-        }], selectedRangeLabel: [{
-            type: Input
-        }], dateMessages: [{
-            type: Input
-        }], positionX: [{
-            type: Input
-        }], positionY: [{
-            type: Input
-        }], offsetX: [{
-            type: Input
-        }], offsetY: [{
-            type: Input
-        }], dateChange: [{
-            type: Output
-        }], toggleDatePicker: [{
+            }] }, { type: i0.ElementRef }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], { toggleDatePicker: [{
             type: HostListener,
             args: ["click"]
         }], toggleDatePickerOnEnter: [{