mis-crystal-design-system 18.0.24 → 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);
+            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-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"] }]
+        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: [{