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

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, Inject, ViewChild, EventEmitter, Injector, Directive, Self, Optional, Input, Output, HostListener, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/forms';
+import { InjectionToken, signal, computed, effect, Component, Inject, ViewChild, input, output, Injector, Directive, Optional, HostListener, NgModule } from '@angular/core';
+import * as i2$1 from '@angular/forms';
 import { UntypedFormControl } from '@angular/forms';
 import * as i5 from 'mis-crystal-design-system/datepicker_v2';
 import { TzDatepickerDirective, DatepickerModuleV2 } from 'mis-crystal-design-system/datepicker_v2';
@@ -10,6 +10,7 @@ import utc from 'dayjs/plugin/utc';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import isBetween from 'dayjs/plugin/isBetween';
 import * as i1 from 'mis-crystal-design-system/toast';
 import { ToastModule } from 'mis-crystal-design-system/toast';
 import * as i2 from '@angular/common';
@@ -18,7 +19,7 @@ import * as i3 from 'mis-crystal-design-system/button';
 import { ButtonModule } from 'mis-crystal-design-system/button';
 import * as i4 from 'mis-crystal-design-system/radio-button';
 import { RadioButtonModule } from 'mis-crystal-design-system/radio-button';
-import * as i2$1 from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { take } from 'rxjs/operators';
@@ -84,7 +85,7 @@ const _c7 = a0 => ({ "circular-dot": a0 });
 const _c8 = (a0, a1) => ({ "current-day": a0, "holiday-text": a1 });
 function TzDrpContainerComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27)(1, "mis-radio", 28);
+    i0.ɵɵelementStart(0, "div", 28)(1, "mis-radio", 29);
     i0.ɵɵlistener("valueChange", function TzDrpContainerComponent_div_2_Template_mis_radio_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changePicker($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "span");
@@ -99,19 +100,19 @@ function TzDrpContainerComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(picker_r4);
 } }
 function TzDrpContainerComponent_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "span", 30);
+    i0.ɵɵelementStart(0, "div", 30)(1, "span", 31);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const weekDay_r5 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c4, weekDay_r5.isCurrentDay && ctx_r2.currentMonthNumber === ctx_r2.todayMonthNumber));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c4, weekDay_r5.isCurrentDay && ctx_r2.currentMonthNumber() === ctx_r2.todayMonthNumber()));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(weekDay_r5.label);
 } }
 function TzDrpContainerComponent_div_17_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵelementStart(0, "span", 31);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -122,22 +123,22 @@ function TzDrpContainerComponent_div_17_span_2_Template(rf, ctx) { if (rf & 1) {
 } }
 function TzDrpContainerComponent_div_17_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵelementStart(0, "div", 32);
     i0.ɵɵlistener("click", function TzDrpContainerComponent_div_17_Template_div_click_0_listener() { const day_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectDay("LEFT", day_r7)); });
-    i0.ɵɵelement(1, "div", 30);
-    i0.ɵɵtemplate(2, TzDrpContainerComponent_div_17_span_2_Template, 2, 5, "span", 32);
+    i0.ɵɵelement(1, "div", 31);
+    i0.ɵɵtemplate(2, TzDrpContainerComponent_div_17_span_2_Template, 2, 5, "span", 33);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const day_r7 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(4, _c5, day_r7.isSelectedDay && ctx_r2.data.isSPickerSelected, day_r7.isDisabledDay, day_r7.isSelectedStartDay && !ctx_r2.data.isSPickerSelected, day_r7.isSelectedEndDay && !ctx_r2.data.isSPickerSelected, day_r7.inRangeDay && !ctx_r2.data.isSPickerSelected, day_r7.date > 0 && !ctx_r2.data.isSPickerSelected && !(day_r7.isSelectedStartDay && day_r7.isSelectedEndDay)))("ngStyle", i0.ɵɵpureFunction5(11, _c6, !ctx_r2.data.isSPickerSelected ? "0px" : "1px", !ctx_r2.data.isSPickerSelected ? "36px" : "35px", day_r7.isHoliday ? "flex-start" : "center", day_r7.isHoliday ? "2.8px" : "0px", day_r7.isHoliday ? "33px" : "36px"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(4, _c5, day_r7.isSelectedDay && ctx_r2.isSpecificPickerSelected(), day_r7.isDisabledDay, day_r7.isSelectedStartDay && !ctx_r2.isSpecificPickerSelected(), day_r7.isSelectedEndDay && !ctx_r2.isSpecificPickerSelected(), day_r7.inRangeDay && !ctx_r2.isSpecificPickerSelected(), day_r7.date > 0 && !ctx_r2.isSpecificPickerSelected() && !(day_r7.isSelectedStartDay && day_r7.isSelectedEndDay)))("ngStyle", i0.ɵɵpureFunction5(11, _c6, !ctx_r2.isSpecificPickerSelected() ? "0px" : "1px", !ctx_r2.isSpecificPickerSelected() ? "36px" : "35px", day_r7.isHoliday ? "flex-start" : "center", day_r7.isHoliday ? "2.8px" : "0px", day_r7.isHoliday ? "33px" : "36px"));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(17, _c7, day_r7.isHoliday));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", day_r7.date > 0);
 } }
 function TzDrpContainerComponent_div_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "span");
+    i0.ɵɵelementStart(0, "div", 30)(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -146,29 +147,29 @@ function TzDrpContainerComponent_div_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(weekDay_r8.label);
 } }
 function TzDrpContainerComponent_div_30_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵelementStart(0, "span", 31);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const day_r10 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c8, day_r10.isCurrentDay && ctx_r2.currentMonthNumber === ctx_r2.todayMonthNumber, day_r10.isHoliday || day_r10.isWeekOff));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c8, day_r10.isCurrentDay && ctx_r2.currentMonthNumber() === ctx_r2.todayMonthNumber(), day_r10.isHoliday || day_r10.isWeekOff));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", day_r10.date, " ");
 } }
 function TzDrpContainerComponent_div_30_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵelementStart(0, "div", 34);
     i0.ɵɵlistener("click", function TzDrpContainerComponent_div_30_Template_div_click_0_listener() { const day_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectDay("RIGHT", day_r10)); });
-    i0.ɵɵelement(1, "div", 30);
-    i0.ɵɵtemplate(2, TzDrpContainerComponent_div_30_span_2_Template, 2, 5, "span", 32);
+    i0.ɵɵelement(1, "div", 31);
+    i0.ɵɵtemplate(2, TzDrpContainerComponent_div_30_span_2_Template, 2, 5, "span", 33);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const day_r10 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(4, _c5, day_r10.isSelectedDay && ctx_r2.data.isSPickerSelected, day_r10.isDisabledDay, day_r10.isSelectedStartDay && !ctx_r2.data.isSPickerSelected, day_r10.isSelectedEndDay && !ctx_r2.data.isSPickerSelected, day_r10.inRangeDay && !ctx_r2.data.isSPickerSelected, day_r10.date > 0 && !ctx_r2.data.isSPickerSelected && !(day_r10.isSelectedStartDay && day_r10.isSelectedEndDay)))("ngStyle", i0.ɵɵpureFunction5(11, _c6, !ctx_r2.data.isSPickerSelected ? "0px" : "1px", !ctx_r2.data.isSPickerSelected ? "36px" : "35px", day_r10.isHoliday ? "flex-start" : "center", day_r10.isHoliday ? "3px" : "0px", day_r10.isHoliday ? "33px" : "36px"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(3, _c5, day_r10.isSelectedDay && ctx_r2.isSpecificPickerSelected(), day_r10.isDisabledDay, day_r10.isSelectedStartDay && !ctx_r2.isSpecificPickerSelected(), day_r10.isSelectedEndDay && !ctx_r2.isSpecificPickerSelected(), day_r10.inRangeDay && !ctx_r2.isSpecificPickerSelected(), day_r10.date > 0 && !ctx_r2.isSpecificPickerSelected() && !(day_r10.isSelectedStartDay && day_r10.isSelectedEndDay)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(17, _c7, day_r10.isHoliday));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c7, day_r10.isHoliday));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", day_r10.date > 0);
 } }
@@ -180,7 +181,7 @@ function TzDrpContainerComponent_span_34_span_2_Template(rf, ctx) { if (rf & 1)
 function TzDrpContainerComponent_span_34_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
-    i0.ɵɵtemplate(2, TzDrpContainerComponent_span_34_span_2_Template, 2, 0, "span", 21);
+    i0.ɵɵtemplate(2, TzDrpContainerComponent_span_34_span_2_Template, 2, 0, "span", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const weekOff_r11 = ctx.$implicit;
@@ -197,9 +198,10 @@ function TzDrpContainerComponent_span_39_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(3, "day(s) selected");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_2_0;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r2.data.isSPickerSelected && (ctx_r2.localSelectedDates[0] == null ? null : ctx_r2.localSelectedDates[0].selectedDate) ? ctx_r2.localSelectedDates.length : ctx_r2.localSelectedDates.length - 1 && 0, " ");
+    i0.ɵɵtextInterpolate1("", ctx_r2.isSpecificPickerSelected() && ((tmp_2_0 = ctx_r2.localSelectedDates()[0]) == null ? null : tmp_2_0.selectedDate) ? ctx_r2.localSelectedDates().length : ctx_r2.localSelectedDates().length - 1 && 0, " ");
 } }
 function TzDrpContainerComponent_span_40_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span")(1, "span");
@@ -210,228 +212,162 @@ function TzDrpContainerComponent_span_40_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r2.dateRangeLength > 0 ? ctx_r2.dateRangeLength : 0, " ");
+    i0.ɵɵtextInterpolate1("", ctx_r2.dateRangeLength() > 0 ? ctx_r2.dateRangeLength() : 0, " ");
 } }
 function TzDrpContainerComponent_button_44_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 33);
+    i0.ɵɵelementStart(0, "button", 35);
     i0.ɵɵlistener("click", function TzDrpContainerComponent_button_44_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.applyDates()); });
     i0.ɵɵtext(1, "Apply");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", !ctx_r2.isDatesValid);
+    i0.ɵɵproperty("disabled", !ctx_r2.isDatesValid());
 } }
 function TzDrpContainerComponent_button_45_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 33);
+    i0.ɵɵelementStart(0, "button", 35);
     i0.ɵɵlistener("click", function TzDrpContainerComponent_button_45_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.applyDatesRange()); });
     i0.ɵɵtext(1, "Apply");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", !ctx_r2.isDatesValid || ctx_r2.dateRangeLength === 0);
+    i0.ɵɵproperty("disabled", !ctx_r2.isDatesValid() || ctx_r2.dateRangeLength() === 0);
 } }
+dayjs.extend(isBetween);
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(customParseFormat);
 dayjs.extend(isSameOrAfter);
 dayjs.extend(isSameOrBefore);
 class TzDrpContainerComponent {
-    constructor(data, toast, cdr) {
+    constructor(injectedData, toast) {
+        this.injectedData = injectedData;
         this.toast = toast;
-        this.cdr = cdr;
-        this.dayjsInstance = (...args) => {
-            return dayjs(...args);
-        };
+        this.data = signal(this.injectedData);
+        this.dayjsInstance = computed(() => {
+            return (...args) => 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.today = new Date();
-        this.todayMonthNumber = this.today.getMonth();
-        this.dateRangeSelected = false;
-        this.dateRangeLength = 0;
+        this.localSelectedDates = signal([]);
+        this.localSelectedDatesRange = signal({ startDate: null, endDate: null });
+        this.isDatesValid = signal(false);
+        this.dateRangeSelected = signal(false);
+        this.singleDatePickerSelected = signal(false);
+        this.openElement = signal(false);
+        this.singleDateSelectedValue = signal('');
+        this.selectionStarted = signal(false);
+        this.isSpecificPickerSelected = signal(false);
         this.formControl = new UntypedFormControl('Specific Date(s)');
-        this.datePickerValue = ['Specific Date(s)', 'Date Range'];
-        this.singleDatePickerSelected = false;
-        this.openElement = false;
-        this.singleDateSelectedValue = '';
-        this.data = data;
-        this.localSelectedDatesRange = this.data.datesRange;
-        const startDate = dayjs(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format);
-        const endDate = dayjs(this.localSelectedDatesRange?.endDate, this.data.dpConfig.format);
-        if (startDate && endDate) {
-            this.dateRangeLength = endDate.diff(startDate, 'day') + 1;
-        }
-        this.localSelectedDates = this.data.dates;
-        if (!this.data.isSPickerSelected) {
-            this.formControl.setValue("Date Range");
-            this.isDatesValid = false;
-            if (this.localSelectedDatesRange?.startDate && this.localSelectedDatesRange?.endDate) {
-                this.isDatesValid = true;
-                this.calculateDateRangeLength();
+        this.datePickerValue = signal(['Specific Date(s)', 'Date Range']);
+        this.currentMonthNumber = signal(this.dayjsInstance()().month());
+        this.currentYearNumber = signal(this.dayjsInstance()().year());
+        this.nextMonthNumber = signal(this.dayjsInstance()().add(1, "month").month());
+        this.nextYearNumber = signal(this.dayjsInstance()().add(1, "month").year());
+        this.weekDays = computed(() => {
+            return this.rawWeekDays.map((day, index) => ({
+                label: `${day[0]}${day.slice(1).toLowerCase()}`,
+                isCurrentDay: this.dayjsInstance()().day() === index
+            }));
+        });
+        this.currentMonth = computed(() => getMonth(this.currentMonthNumber()));
+        this.nextMonth = computed(() => getMonth(this.nextMonthNumber()));
+        this.todayMonthNumber = computed(() => this.dayjsInstance()().month());
+        this.dateRangeLength = computed(() => {
+            const range = this.localSelectedDatesRange();
+            if (range?.startDate && range?.endDate) {
+                const start = this.dayjsInstance()(range.startDate, this.data().dpConfig.format);
+                const end = this.dayjsInstance()(range.endDate, this.data().dpConfig.format);
+                if (start.isValid() && end.isValid()) {
+                    return end.diff(start, 'day') + 1;
+                }
             }
-        }
-        else {
-            this.isDatesValid = false;
-            if (this.localSelectedDates.length > 0) {
-                this.isDatesValid = true;
+            return 0;
+        });
+        this.isPreviousMonthDisabled = computed(() => {
+            const currentInstance = this.dayjsInstance()().year(this.currentYearNumber()).month(this.currentMonthNumber());
+            const minDate = !!this.data().dpConfig.minDate ? this.dayjsInstance()(this.data().dpConfig.minDate, this.data().dpConfig.format) : dayjs('invalid');
+            return minDate.isValid() && minDate.isSameOrAfter(currentInstance, "month");
+        });
+        this.isNextMonthDisabled = computed(() => {
+            const currentInstance = this.dayjsInstance()().year(this.currentYearNumber()).month(this.currentMonthNumber());
+            const maxDate = !!this.data().dpConfig.maxDate ? this.dayjsInstance()(this.data().dpConfig.maxDate, this.data().dpConfig.format) : dayjs('invalid');
+            return maxDate.isValid() && maxDate.isSameOrBefore(currentInstance, "month");
+        });
+        this.currentMonthDates = computed(() => {
+            return this.generateDates(this.currentMonthNumber(), this.currentYearNumber());
+        });
+        this.nextMonthDates = computed(() => {
+            return this.generateDates(this.nextMonthNumber(), this.nextYearNumber());
+        });
+        this.localSelectedDates.set(this.data().dates);
+        this.localSelectedDatesRange.set(this.injectedData.datesRange || { startDate: null, endDate: null });
+        this.isSpecificPickerSelected.set(this.data().isSPickerSelected);
+        this.isDatesValid.set(this.data().isSPickerSelected ? this.localSelectedDates().length > 0 : !!(this.localSelectedDatesRange()?.startDate && this.localSelectedDatesRange()?.endDate));
+        this.dateRangeSelected.set(!this.isSpecificPickerSelected());
+        this.singleDatePickerSelected.set(this.data().isSingleDatePickerEnable);
+        effect(() => {
+            let selectedStartDate;
+            if (!this.isSpecificPickerSelected()) {
+                selectedStartDate = this.dayjsInstance()(this.localSelectedDatesRange()?.startDate, this.data().dpConfig.format);
             }
-        }
-        if (this.data?.dpConfig?.timezone) {
-            this.dayjsInstance = (...args) => {
-                return dayjs(...args).tz(this.data.dpConfig.timezone);
-            };
-        }
-        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) => ({
-            label: `${day[0]}${day.slice(1).toLowerCase()}`,
-            isCurrentDay: this.dayjsInstance().day() === index
-        }));
-        if (!this.data?.dpConfig?.format) {
-            this.data.dpConfig = {
-                ...this.data.dpConfig,
-                format: DATE_FORMAT
-            };
-        }
-    }
-    ngOnInit() {
-        if (this.data.isSingleDatePickerEnable) {
-            this.datePickerValue.unshift('Single Date');
-            this.formControl.setValue('Single Date');
-            this.singleDatePickerSelected = true;
-            this.openElement = true;
-            this.singleDateSelectedValue = this.data?.dates[0]?.selectedDate;
-        }
-        this.currentDateInstance();
-        this.calculateMinMaxDays();
-    }
-    currentDateInstance() {
-        let selectedStartDate;
-        if (!this.data.isSPickerSelected) {
-            if (!this.localSelectedDatesRange?.startDate) {
-                this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-                this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
-                return;
+            else {
+                selectedStartDate = this.dayjsInstance()(this.localSelectedDates()?.[0]?.selectedDate, this.data().dpConfig.format);
             }
-            selectedStartDate = this.dayjsInstance(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format);
-        }
-        else {
-            selectedStartDate = this.dayjsInstance(this.localSelectedDates?.[0].selectedDate, this.data.dpConfig.format);
-        }
-        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;
+            if (selectedStartDate.isValid()) {
+                this.currentYearNumber.set(selectedStartDate.year());
+                this.nextYearNumber.set(selectedStartDate.add(1, "month").year());
+                this.currentMonthNumber.set(selectedStartDate.get("month"));
+                this.nextMonthNumber.set(selectedStartDate.add(1, "month").month());
             }
-            if (this.nextMonthNumber === -1) {
-                this.nextMonthNumber = 11;
+        }, { allowSignalWrites: true });
+        effect(() => {
+            if (this.data().isSingleDatePickerEnable) {
+                const pickerValue = 'Single Date';
+                if (!this.datePickerValue().includes(pickerValue)) {
+                    this.datePickerValue.update(currentValue => [pickerValue, ...currentValue]);
+                }
+                this.formControl.setValue(pickerValue);
+                this.singleDatePickerSelected.set(true);
+                this.openElement.set(true);
+                this.singleDateSelectedValue.set(this.data().dates[0]?.selectedDate || '');
             }
-            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);
-    }
-    calculateMinMaxDays() {
-        const currentInstance = this.dayjsInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
-        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");
-        }
-        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");
+        });
+        if (this.data()?.dpConfig?.timezone) {
+            this.dayjsInstance = computed(() => (...args) => dayjs(...args).tz(this.data().dpConfig.timezone));
         }
     }
-    navigateMonth(direction) {
-        let thisMonth = dayjs().year(this.currentYearNumber).month(this.currentMonthNumber);
-        if (direction === "NEXT") {
-            thisMonth = thisMonth.add(1, "month");
-        }
-        else if (direction === "PREVIOUS") {
-            thisMonth = thisMonth.subtract(1, "month");
-        }
-        this.currentMonthNumber = thisMonth.month();
-        this.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--;
-        }
-        else if (this.currentMonthNumber === 11 && direction === "NEXT") {
-            this.nextYearNumber++;
-        }
-        else if (this.currentMonthNumber === 0 && direction === "NEXT") {
-            this.currentYearNumber++;
-        }
-        else if (this.nextMonthNumber === 11 && direction === "PREVIOUS") {
-            this.nextYearNumber--;
-        }
-        else {
-            this.nextYearNumber = this.currentYearNumber;
+    ngOnInit() {
+        if (!this.data()?.dpConfig?.format) {
+            this.data().dpConfig = {
+                ...this.data().dpConfig,
+                format: DATE_FORMAT
+            };
         }
-        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-        this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
-        this.calculateMinMaxDays();
     }
     generateDates(month, currentYearNumber) {
-        let dates = [];
-        const daysInMonth = dayjs().year(currentYearNumber).month(month).daysInMonth();
+        const dates = [];
+        const daysInMonth = this.dayjsInstance()().year(currentYearNumber).month(month).daysInMonth();
         for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
-            const date = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate);
-            const dateString = date.format(this.data.dpConfig.format);
-            let isDisabledDay = this.data.datesDisabled.some(d => d === dateString);
-            const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
+            const date = this.dayjsInstance()().year(currentYearNumber).month(month).date(currentDate);
+            const dateString = date.format(this.data().dpConfig.format);
+            let isDisabledDay = this.data().datesDisabled.some(d => d === dateString);
+            const minDate = !!this.data().dpConfig.minDate ? this.dayjsInstance()(this.data().dpConfig.minDate, this.data().dpConfig.format) : dayjs('invalid');
             if (!isDisabledDay && minDate.isValid()) {
                 isDisabledDay = minDate.isAfter(date, "day");
             }
-            const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
+            const maxDate = !!this.data().dpConfig.maxDate ? this.dayjsInstance()(this.data().dpConfig.maxDate, this.data().dpConfig.format) : dayjs('invalid');
             if (!isDisabledDay && maxDate.isValid()) {
                 isDisabledDay = maxDate.isBefore(date, "day");
             }
-            const isCurrentDay = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
-                this.dayjsInstance().format(this.data.dpConfig.format);
-            let isSelectedDay = false;
-            console.log('abhay12', this.localSelectedDates);
-            for (const selectedDateConfig of this.localSelectedDates) {
-                if (!isSelectedDay && date.format(this.data.dpConfig.format) === selectedDateConfig.selectedDate) {
-                    isSelectedDay = true;
-                }
-            }
-            let isHoliday = false;
-            for (const day of this.data.holidays) {
-                if (date.format(this.data.dpConfig.format) === day) {
-                    isHoliday = true;
-                }
-            }
-            const dayOfWeek = date.format('ddd');
-            const isWeekOff = this.data.weekOffs.includes(dayOfWeek);
-            const isSelectedStartDay = !isDisabledDay &&
-                (this.localSelectedDatesRange?.startDate ?? false) &&
-                date.format(this.data.dpConfig.format) === this.localSelectedDatesRange?.startDate;
-            const isAfterSelectedStartDate = this.dayjsInstance(date).isAfter(dayjs(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format), "day");
-            const isBeforeSelectedEndDate = this.dayjsInstance(date).isBefore(dayjs(this.localSelectedDatesRange?.endDate, this.data.dpConfig.format), "day");
-            const inRangeDay = (this.localSelectedDatesRange?.startDate ?? false) &&
-                (this.localSelectedDatesRange?.endDate ?? false) &&
-                isAfterSelectedStartDate &&
-                isBeforeSelectedEndDate;
-            const isSelectedEndDay = !isDisabledDay &&
-                ((this.localSelectedDatesRange?.startDate && this.localSelectedDatesRange?.endDate) ?? false) &&
-                date.format(this.data.dpConfig.format) === this.localSelectedDatesRange?.endDate;
+            const isCurrentDay = date.isSame(this.dayjsInstance()(), 'day');
+            let isSelectedDay = this.localSelectedDates().some(d => d.selectedDate === dateString);
+            const isSelectedStartDay = !!this.localSelectedDatesRange()?.startDate && date.format(this.data().dpConfig.format) === this.localSelectedDatesRange()?.startDate;
+            const isSelectedEndDay = !!this.localSelectedDatesRange()?.endDate && date.format(this.data().dpConfig.format) === this.localSelectedDatesRange()?.endDate;
+            const inRangeDay = !!(this.localSelectedDatesRange()?.startDate && this.localSelectedDatesRange()?.endDate) &&
+                date.isBetween(this.dayjsInstance()(this.localSelectedDatesRange()?.startDate, this.data().dpConfig.format), this.dayjsInstance()(this.localSelectedDatesRange()?.endDate, this.data().dpConfig.format), 'day', '()');
+            const isHoliday = this.data().holidays.includes(dateString);
+            const isWeekOff = this.data().weekOffs.includes(date.format('ddd'));
             dates.push({
                 date: currentDate,
                 weekDay: date.day(),
@@ -442,161 +378,112 @@ class TzDrpContainerComponent {
                 inRangeDay,
                 isHoliday,
                 isWeekOff,
-                toastMessage: this.data.messages.find(q => date.format(this.data.dpConfig.format) === q.date)?.message || "",
+                toastMessage: this.data().messages.find(q => date.format(this.data().dpConfig.format) === q.date)?.message || "",
                 isDisabledDay
             });
         }
-        for (let i = dates[0].weekDay; i > 0; i--) {
+        for (let i = dates[0]?.weekDay || 0; i > 0; i--) {
             dates.unshift({ date: 0, weekDay: i - 1 });
         }
         return dates;
     }
+    navigateMonth(direction) {
+        let thisMonth = this.dayjsInstance()().year(this.currentYearNumber()).month(this.currentMonthNumber());
+        thisMonth = direction === "NEXT" ? thisMonth.add(1, "month") : thisMonth.subtract(1, "month");
+        this.currentMonthNumber.set(thisMonth.month());
+        this.currentYearNumber.set(thisMonth.year());
+        this.nextMonthNumber.set(thisMonth.clone().add(1, "month").month());
+        this.nextYearNumber.set(thisMonth.clone().add(1, "month").year());
+    }
     selectDay(from, day) {
-        if (day.date <= 0)
+        if (day.date <= 0 || day.isDisabledDay) {
+            if (day.toastMessage)
+                this.toast.displayMsg(day.toastMessage, 4000);
             return;
-        if (!this.data.isSPickerSelected) {
-            if (!day.isDisabledDay) {
-                if (this.selectionStarted) {
-                    const dayjsDay = dayjs()
-                        .year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
-                        .month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
-                        .date(day.date);
-                    if (dayjsDay.isBefore(dayjs(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format), "day")) {
-                        this.localSelectedDatesRange = {
-                            startDate: dayjsDay.format(this.data.dpConfig.format),
-                            endDate: null
-                        };
-                        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-                        this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
-                        return;
-                    }
-                    this.selectionStarted = false;
-                    this.localSelectedDatesRange = {
-                        ...this.localSelectedDatesRange,
-                        endDate: dayjsDay.format(this.data.dpConfig.format)
-                    };
-                }
-                else {
-                    this.selectionStarted = true;
-                    this.localSelectedDatesRange = {
-                        startDate: dayjs()
-                            .year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
-                            .month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
-                            .date(day.date)
-                            .format(this.data.dpConfig.format),
-                        endDate: null
-                    };
+        }
+        if (this.isSpecificPickerSelected()) {
+            this.localSelectedDates.update(current => {
+                const currentSelection = this.dayjsInstance()()
+                    .year(from === "LEFT" ? this.currentYearNumber() : this.nextYearNumber())
+                    .month(from === "LEFT" ? this.currentMonthNumber() : this.nextMonthNumber())
+                    .date(day.date).format(this.data().dpConfig.format);
+                const existingIndex = current.findIndex(d => d.selectedDate === currentSelection);
+                if (existingIndex !== -1) {
+                    this.isDatesValid.set(current.length > 1);
+                    return current.filter((_, index) => index !== existingIndex);
                 }
-                this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-                this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
-                this.isDatesValid = false;
-                if (this.localSelectedDatesRange?.startDate && this.localSelectedDatesRange?.endDate) {
-                    this.isDatesValid = true;
+                else if (!day.isDisabledDay) {
+                    this.isDatesValid.set(true);
+                    return [...current, { selectedDate: currentSelection }];
                 }
-            }
-            this.calculateDateRangeLength();
+                return current;
+            });
         }
         else {
-            const currentSelection = dayjs()
-                .year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
-                .month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
-                .date(day.date).format(this.data.dpConfig.format);
-            const existingIndex = this.localSelectedDates.findIndex(selectedDateConfig => selectedDateConfig.selectedDate === currentSelection);
-            if (existingIndex !== -1) {
-                this.localSelectedDates = this.localSelectedDates.filter((_, index) => index !== existingIndex);
-                this.isDatesValid = false;
-                if (this.localSelectedDates.length > 0) {
-                    this.isDatesValid = true;
-                }
-                this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-                this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
-            }
-            else if (!day.isDisabledDay) {
-                this.localSelectedDates = [
-                    ...this.localSelectedDates,
-                    {
-                        selectedDate: currentSelection
+            const dayjsDay = this.dayjsInstance()()
+                .year(from === "LEFT" ? this.currentYearNumber() : this.nextYearNumber())
+                .month(from === "LEFT" ? this.currentMonthNumber() : this.nextMonthNumber())
+                .date(day.date);
+            this.localSelectedDatesRange.update(current => {
+                if (this.selectionStarted()) {
+                    if (dayjsDay.isBefore(this.dayjsInstance()(current.startDate, this.data().dpConfig.format), "day")) {
+                        this.selectionStarted.set(true);
+                        this.isDatesValid.set(false);
+                        return { startDate: dayjsDay.format(this.data().dpConfig.format), endDate: null };
                     }
-                ];
-                this.isDatesValid = false;
-                if (this.localSelectedDates.length > 0) {
-                    this.isDatesValid = true;
+                    this.selectionStarted.set(false);
+                    this.isDatesValid.set(true);
+                    return { ...current, endDate: dayjsDay.format(this.data().dpConfig.format) };
                 }
-                this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
-                this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
-            }
-            else {
-                return;
-            }
-        }
-        if (day.toastMessage) {
-            this.toast.displayMsg(day.toastMessage, 4000);
+                else {
+                    this.selectionStarted.set(true);
+                    this.isDatesValid.set(false);
+                    return { startDate: dayjsDay.format(this.data().dpConfig.format), endDate: null };
+                }
+            });
         }
     }
     applyDates() {
-        this.data.dateChange(this.localSelectedDates);
+        this.data().dateChange(this.localSelectedDates());
     }
     applyDatesRange() {
-        this.data.dateChangeRange(this.localSelectedDatesRange);
+        this.data().dateChangeRange(this.localSelectedDatesRange());
     }
-    onSingleDateChange($event) {
-        let selectedData = { selectedDate: $event };
-        this.singleDateSelectedValue = $event;
-        this.data.dateChange([selectedData]);
+    onSingleDateChange(event) {
+        const selectedData = { selectedDate: event };
+        this.singleDateSelectedValue.set(event);
+        this.data().dateChange([selectedData]);
     }
     cancelDatePicker() {
-        this.data.close();
+        this.data().close();
     }
     changePicker(event) {
-        this.formControl.setValue(event);
-        this.singleDatePickerSelected = false;
-        this.data.isSPickerSelected = false;
-        this.data.isSPickerSelected = false;
-        this.openElement = false;
-        if (event === "Date Range") {
-            this.openElement = false;
-            this.data.isSPickerSelected = false;
-            if (this.localSelectedDatesRange?.startDate && this.localSelectedDatesRange?.endDate) {
-                this.isDatesValid = true;
-                this.calculateDateRangeLength();
-            }
-        }
-        else if (event === "Single Date") {
-            this.singleDatePickerSelected = true;
-            this.openElement = true;
-        }
-        else {
-            this.openElement = false;
-            this.data.isSPickerSelected = true;
-        }
-    }
-    calculateDateRangeLength() {
-        if (this.localSelectedDatesRange) {
-            const startDate = !!this.localSelectedDatesRange.startDate ? this.dayjsInstance(this.localSelectedDatesRange.startDate, this.data.dpConfig.format) : dayjs('invalid');
-            const endDate = !!this.localSelectedDatesRange.endDate ? this.dayjsInstance(this.localSelectedDatesRange.endDate, this.data.dpConfig.format) : dayjs('invalid');
-            if (startDate && endDate) {
-                this.dateRangeLength = endDate.diff(startDate, 'day') + 1;
-            }
-        }
+        this.singleDatePickerSelected.set(event === "Single Date");
+        this.openElement.set(event === "Single Date");
+        this.dateRangeSelected.set(event === "Date Range");
+        this.isSpecificPickerSelected.set(event === "Specific Date(s)");
+        // As discussed, state is retained when switching modes.
+        // The view will simply update to reflect the active mode.
+        this.formControl.setValue(event, { emitEvent: false });
     }
     ngOnDestroy() {
         if (this.singleDatePickerElement) {
             this.singleDatePickerElement.close();
         }
     }
-    static { this.ɵfac = function TzDrpContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TzDrpContainerComponent)(i0.ɵɵdirectiveInject(CONTAINER_DATA), i0.ɵɵdirectiveInject(i1.ToastService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
+    static { this.ɵfac = function TzDrpContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TzDrpContainerComponent)(i0.ɵɵdirectiveInject(CONTAINER_DATA), i0.ɵɵdirectiveInject(i1.ToastService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzDrpContainerComponent, selectors: [["mis-tz-sdp"]], viewQuery: function TzDrpContainerComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 7, TzDatepickerDirective);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.singleDatePickerElement = _t.first);
-        } }, decls: 49, vars: 35, consts: [["singleDatePickerElement", ""], [1, "daterangepicker-container", 3, "ngClass"], [1, "radio-container"], ["class", "label", 4, "ngFor", "ngForOf"], [1, "specific-datepicker-container", 3, "ngStyle"], [1, "daterangepicker-container__view"], [1, "datepicker__left"], [1, "daterangepicker-container__header__prabu"], [1, "daterangepicker-container__arrow__icon", 3, "click", "ngClass"], ["width", "20", "height", "16", "viewBox", "0 0 20 16", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z", "fill", "#181F33"], [1, "daterangepicker-container__body"], [1, "daterangepicker-container__weekdays"], ["class", "daterangepicker-container__weekday", 4, "ngFor", "ngForOf"], [1, "daterangepicker-container__days"], ["class", "daterangepicker-container__day", 3, "ngClass", "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "datepicker__right"], [1, "weekOffs_holidays_container"], [4, "ngFor", "ngForOf"], [1, "circular-dot", 3, "ngStyle"], [1, "daterangepicker__footer"], [4, "ngIf"], [1, "footer_action_btn"], ["mis-button", "", "size", "md", "type", "none", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "disabled", "click", 4, "ngIf"], [1, "single-datepicker-container", 3, "ngStyle"], ["misTzDp", "", "misInput", "", "type", "text", "readonly", "", "placeholder", "Select", "positionX", "center", "positionY", "top", "offsetX", "71", "offsetY", "-1", 1, "date-input", 3, "dateChange", "dpConfig", "selectedDate", "value", "disableBoxShadow", "disableOverLay", "openElement"], [1, "label"], ["ngDefaultControl", "", 1, "input", 3, "valueChange", "name", "value", "formControl"], [1, "daterangepicker-container__weekday"], [3, "ngClass"], [1, "daterangepicker-container__day", 3, "click", "ngClass", "ngStyle"], [3, "ngClass", 4, "ngIf"], ["mis-button", "", "size", "md", "type", "primary", 3, "click", "disabled"]], template: function TzDrpContainerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 49, vars: 35, consts: [["singleDatePickerElement", ""], [1, "daterangepicker-container", 3, "ngClass"], [1, "radio-container"], ["class", "label", 4, "ngFor", "ngForOf"], [1, "specific-datepicker-container", 3, "ngStyle"], [1, "daterangepicker-container__view"], [1, "datepicker__left"], [1, "daterangepicker-container__header__prabu"], [1, "daterangepicker-container__arrow__icon", 3, "click", "ngClass"], ["width", "20", "height", "16", "viewBox", "0 0 20 16", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z", "fill", "#181F33"], [1, "daterangepicker-container__body"], [1, "daterangepicker-container__weekdays"], ["class", "daterangepicker-container__weekday", 4, "ngFor", "ngForOf"], [1, "daterangepicker-container__days"], ["class", "daterangepicker-container__day", 3, "ngClass", "ngStyle", "click", 4, "ngFor", "ngForOf"], [1, "datepicker__right"], ["class", "daterangepicker-container__day", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "weekOffs_holidays_container"], [4, "ngFor", "ngForOf"], [1, "circular-dot", 3, "ngStyle"], [1, "daterangepicker__footer"], [4, "ngIf"], [1, "footer_action_btn"], ["mis-button", "", "size", "md", "type", "none", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "disabled", "click", 4, "ngIf"], [1, "single-datepicker-container", 3, "ngStyle"], ["misTzDp", "", "misInput", "", "type", "text", "readonly", "", "placeholder", "Select", "positionX", "center", "positionY", "top", "offsetX", "71", "offsetY", "-1", 1, "date-input", 3, "dateChange", "dpConfig", "selectedDate", "value", "disableBoxShadow", "disableOverLay", "openElement"], [1, "label"], ["ngDefaultControl", "", 1, "input", 3, "valueChange", "name", "value", "formControl"], [1, "daterangepicker-container__weekday"], [3, "ngClass"], [1, "daterangepicker-container__day", 3, "click", "ngClass", "ngStyle"], [3, "ngClass", 4, "ngIf"], [1, "daterangepicker-container__day", 3, "click", "ngClass"], ["mis-button", "", "size", "md", "type", "primary", 3, "click", "disabled"]], template: function TzDrpContainerComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
             i0.ɵɵtemplate(2, TzDrpContainerComponent_div_2_Template, 4, 4, "div", 3);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(3, "div", 4)(4, "div", 5)(5, "div", 6)(6, "div", 7)(7, "div", 8);
-            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(!ctx.isPreviousMonthDisabled && ctx.navigateMonth("PREVIOUS")); });
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(!ctx.isPreviousMonthDisabled() && ctx.navigateMonth("PREVIOUS")); });
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(8, "svg", 9);
             i0.ɵɵelement(9, "path", 10);
@@ -619,7 +506,7 @@ class TzDrpContainerComponent {
             i0.ɵɵtext(22);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(23, "div", 8);
-            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_23_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(!ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT")); });
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_23_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(!ctx.isNextMonthDisabled() && ctx.navigateMonth("NEXT")); });
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(24, "svg", 9);
             i0.ɵɵelement(25, "path", 10);
@@ -629,139 +516,146 @@ class TzDrpContainerComponent {
             i0.ɵɵtemplate(28, TzDrpContainerComponent_div_28_Template, 3, 1, "div", 13);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(29, "div", 14);
-            i0.ɵɵtemplate(30, TzDrpContainerComponent_div_30_Template, 3, 19, "div", 15);
+            i0.ɵɵtemplate(30, TzDrpContainerComponent_div_30_Template, 3, 12, "div", 17);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(31, "div", 17)(32, "span");
+            i0.ɵɵelementStart(31, "div", 18)(32, "span");
             i0.ɵɵtext(33, "Weekly offs: ");
-            i0.ɵɵtemplate(34, TzDrpContainerComponent_span_34_Template, 3, 2, "span", 18);
+            i0.ɵɵtemplate(34, TzDrpContainerComponent_span_34_Template, 3, 2, "span", 19);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(35, "span");
             i0.ɵɵtext(36, "Holidays ");
-            i0.ɵɵelement(37, "span", 19);
+            i0.ɵɵelement(37, "span", 20);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(38, "div", 20);
-            i0.ɵɵtemplate(39, TzDrpContainerComponent_span_39_Template, 4, 1, "span", 21)(40, TzDrpContainerComponent_span_40_Template, 4, 1, "span", 21);
-            i0.ɵɵelementStart(41, "div", 22)(42, "button", 23);
+            i0.ɵɵelementStart(38, "div", 21);
+            i0.ɵɵtemplate(39, TzDrpContainerComponent_span_39_Template, 4, 1, "span", 22)(40, TzDrpContainerComponent_span_40_Template, 4, 1, "span", 22);
+            i0.ɵɵelementStart(41, "div", 23)(42, "button", 24);
             i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancelDatePicker()); });
             i0.ɵɵtext(43, "Cancel");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(44, TzDrpContainerComponent_button_44_Template, 2, 1, "button", 24)(45, TzDrpContainerComponent_button_45_Template, 2, 1, "button", 24);
+            i0.ɵɵtemplate(44, TzDrpContainerComponent_button_44_Template, 2, 1, "button", 25)(45, TzDrpContainerComponent_button_45_Template, 2, 1, "button", 25);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(46, "div", 25)(47, "input", 26, 0);
+            i0.ɵɵelementStart(46, "div", 26)(47, "input", 27, 0);
             i0.ɵɵlistener("dateChange", function TzDrpContainerComponent_Template_input_dateChange_47_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSingleDateChange($event)); });
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", ctx.data.isSingleDatePickerEnable ? "single-date-picker-enabled" : "");
+            i0.ɵɵproperty("ngClass", ctx.data().isSingleDatePickerEnable ? "single-date-picker-enabled" : "");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngForOf", ctx.datePickerValue);
+            i0.ɵɵproperty("ngForOf", ctx.datePickerValue());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(26, _c1, ctx.singleDatePickerSelected ? "none" : ""));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(26, _c1, ctx.singleDatePickerSelected() ? "none" : ""));
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(28, _c2, ctx.isPreviousMonthDisabled));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(28, _c2, ctx.isPreviousMonthDisabled()));
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate2(" ", ctx.currentMonth, " ", ctx.currentYearNumber, " ");
+            i0.ɵɵtextInterpolate2(" ", ctx.currentMonth(), " ", ctx.currentYearNumber(), " ");
             i0.ɵɵadvance(4);
-            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(30, _c2, ctx.isNextMonthDisabled));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(30, _c2, 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(4);
-            i0.ɵɵproperty("ngForOf", ctx.data.weekOffs);
+            i0.ɵɵproperty("ngForOf", ctx.data().weekOffs);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction0(32, _c3));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.data.isSPickerSelected);
+            i0.ɵɵproperty("ngIf", ctx.isSpecificPickerSelected());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.data.isSPickerSelected);
+            i0.ɵɵproperty("ngIf", !ctx.isSpecificPickerSelected());
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngIf", ctx.data.isSPickerSelected);
+            i0.ɵɵproperty("ngIf", ctx.isSpecificPickerSelected());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.data.isSPickerSelected);
+            i0.ɵɵproperty("ngIf", !ctx.isSpecificPickerSelected());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(33, _c1, !ctx.singleDatePickerSelected ? "none" : "block"));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(33, _c1, !ctx.singleDatePickerSelected() ? "none" : "block"));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("dpConfig", ctx.data.dpConfig)("selectedDate", ctx.singleDateSelectedValue)("value", ctx.singleDateSelectedValue)("disableBoxShadow", true)("disableOverLay", true)("openElement", ctx.openElement);
-        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgStyle, i3.ButtonDirective, i4.RadioButtonComponent, i5.TzDatepickerDirective], styles: ["[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.daterangepicker-container[_ngcontent-%COMP%]{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;overflow:hidden;-webkit-user-select:none;user-select:none}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%]{flex-direction:row}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]{display:flex;align-items:center;height:48px;padding:8px 0;justify-content:center;border-radius:12px 12px 0 0;border-bottom:1px solid var(--border-primary, #E0E0E0);background:var(--bg-primary, #FFFFFF)}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{display:flex;align-items:center}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]   .input[_ngcontent-%COMP%]{margin-right:8px;width:20px;height:20px}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:first-child{padding-right:16px;border-right:1px solid var(--border-primary, #E0E0E0)}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:288px;padding:20px;border-right:1px solid var(--border-primary, #E0E0E0)!important;border-radius:0}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:nth-child(2){padding-left:0}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]{display:flex;gap:24px;padding:16px}.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}.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:16px}.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}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]{height:100%;width:252px}.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}.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}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:var(--text-secondary, #6A737D)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:var(--text-primary, #181F33)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap}.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-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:var(--text-secondary, #6A737D)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:var(--brand-primary-lightest, #CBDDFB);cursor:pointer}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:var(--text-primary, #181F33)}.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;color:var(--brand-primary, #0937B2)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.selected-day[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.disabled-day[_ngcontent-%COMP%]{color:var(--text-secondary, #6A737D)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-start-day[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);border-radius:20px 4px 4px 20px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-start-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF)!important}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);border-radius:0 20px 20px 0}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF)!important}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day.selected-start-day[_ngcontent-%COMP%]{border-radius:50%!important}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .in-range-day[_ngcontent-%COMP%]:not(.disabled-day){background-color:var(--brand-primary-lightest, #CBDDFB)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-day[_ngcontent-%COMP%]{background-color:var(--brand-primary, #0937B2);border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:var(--bg-primary, #FFFFFF)!important}.daterangepicker-container[_ngcontent-%COMP%]   .weekOffs_holidays_container[_ngcontent-%COMP%]{font-size:12px;color:var(--text-secondary, #6A737D);padding:8px 24px 12px}.daterangepicker-container[_ngcontent-%COMP%]   .weekOffs_holidays_container[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{margin-right:16px}.daterangepicker-container[_ngcontent-%COMP%]   .weekOffs_holidays_container[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:var(--text-primary, #181F33)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]{display:flex;justify-content:space-between;border-top:1px solid var(--border-primary, #E0E0E0);padding:16px 24px;word-spacing:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-weight:700}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   .footer_action_btn[_ngcontent-%COMP%]{display:flex}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot[_ngcontent-%COMP%]{width:5px;height:5px;background-color:var(--brand-warning, #FF9D00);border-radius:50%}.holiday-text[_ngcontent-%COMP%]{color:var(--text-secondary, #6A737D)!important}.display-none[_ngcontent-%COMP%]{display:none!important}.single-datepicker-container[_ngcontent-%COMP%]{width:291px}"] }); }
+            i0.ɵɵproperty("dpConfig", ctx.data().dpConfig)("selectedDate", ctx.singleDateSelectedValue())("value", ctx.singleDateSelectedValue())("disableBoxShadow", true)("disableOverLay", true)("openElement", ctx.openElement());
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgStyle, i3.ButtonDirective, i4.RadioButtonComponent, i5.TzDatepickerDirective], styles: [".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}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%]{flex-direction:row}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]{display:flex;align-items:center;height:48px;padding:8px 0;justify-content:center;border-radius:12px 12px 0 0;border-bottom:1px solid var(--lt-bg-ntrl-seperators, #e0e0e0);background:var(--lt-text-white, #fff)}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{display:flex;align-items:center}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]   .input[_ngcontent-%COMP%]{margin-right:8px;width:20px;height:20px}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:first-child{padding-right:16px;border-right:1px solid #e0e0e0}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:288px;padding:20px;border-right:1px solid #e0e0e0!important;border-radius:0}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:nth-child(2){padding-left:0}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]{display:flex;gap:24px;padding:16px}.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}.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:16px}.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}.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)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]{height:100%;width:252px}.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}.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}.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}.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}.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-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.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):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}.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;color:#0937b2}.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-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!important}.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!important}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day.selected-start-day[_ngcontent-%COMP%]{border-radius:50%!important}.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__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff!important}.daterangepicker-container[_ngcontent-%COMP%]   .weekOffs_holidays_container[_ngcontent-%COMP%]{font-size:12px;color:var(--lt-text-muted, #6a737d);padding:8px 24px 12px}.daterangepicker-container[_ngcontent-%COMP%]   .weekOffs_holidays_container[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{margin-right:16px}.daterangepicker-container[_ngcontent-%COMP%]   .weekOffs_holidays_container[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#181f33}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]{display:flex;justify-content:space-between;border-top:1px solid #e0e0e0;padding:16px 24px;word-spacing:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-weight:700}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   .footer_action_btn[_ngcontent-%COMP%]{display:flex}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot[_ngcontent-%COMP%]{width:5px;height:5px;background-color:#ed711c;border-radius:50%}.holiday-text[_ngcontent-%COMP%]{color:#6a737d!important}.display-none[_ngcontent-%COMP%]{display:none!important}.single-datepicker-container[_ngcontent-%COMP%]{width:291px}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
         type: Component,
-        args: [{ selector: "mis-tz-sdp", template: "<div class=\"daterangepicker-container\" [ngClass]=\"data.isSingleDatePickerEnable?'single-date-picker-enabled':''\">\n  <div class=\"radio-container\">\n  <!-- <label>\n    <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"SpecificDate\" [checked]=\"data.isSPickerSelected\"> Specific Date(s)\n</label>\n<label>\n    <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"DateRange\" [checked]=\"!data.isSPickerSelected\" >Date Range\n</label> -->\n<div class=\"label\" *ngFor=\"let picker of datePickerValue\">\n  <mis-radio class=\"input\" [name]=\"'dateSelection'\" [value]=\"picker\" (valueChange)=\"changePicker($event)\" ngDefaultControl [formControl]=\"formControl\"></mis-radio>\n  <span>{{picker}}</span>\n</div>\n</div>\n<div class=\"specific-datepicker-container\" [ngStyle]=\"{'display': singleDatePickerSelected ? 'none' : ''}\">\n  <div class=\"daterangepicker-container__view\">\n    <div class=\"datepicker__left\">\n      <div class=\"daterangepicker-container__header__prabu\">\n        <div\n          class=\"daterangepicker-container__arrow__icon\"\n          (click)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\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      </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 [ngClass]=\"{\n              'current-day': weekDay.isCurrentDay && (currentMonthNumber === todayMonthNumber)\n            }\">{{ weekDay.label }}</span>\n          </div>\n        </div>\n        <div class=\"daterangepicker-container__days\">\n          <div\n            class=\"daterangepicker-container__day\"\n            [ngClass]=\"{\n              'selected-day': day.isSelectedDay && data.isSPickerSelected,\n              'disabled-day': day.isDisabledDay,\n              'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n              'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n              'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n              'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n            }\"\n            [ngStyle]=\"{'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '2.8px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n            *ngFor=\"let day of currentMonthDates\"\n            (click)=\"selectDay('LEFT',day)\"\n          >\n          <div [ngClass]=\"{\n            'circular-dot': day.isHoliday\n          }\"></div>\n            <span *ngIf=\"day.date > 0\"  [ngClass]=\"{\n              'current-day': day.isCurrentDay,\n              'holiday-text': day.isHoliday || day.isWeekOff\n            }\" >\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\"\n          (click)=\"!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-day': day.isSelectedDay && data.isSPickerSelected,\n              'disabled-day': day.isDisabledDay,\n              'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n              'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n              'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n              'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n            }\"\n            [ngStyle]=\"{ 'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '3px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n            *ngFor=\"let day of nextMonthDates\"\n            (click)=\"selectDay('RIGHT',day)\"\n          >\n          <div [ngClass]=\"{\n            'circular-dot': day.isHoliday\n          }\"></div>\n            <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n              'current-day': day.isCurrentDay && (currentMonthNumber === todayMonthNumber),\n              'holiday-text': day.isHoliday || day.isWeekOff\n            }\" >\n              {{ day.date }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"weekOffs_holidays_container\">\n    <span>Weekly offs: <span *ngFor=\"let weekOff of data.weekOffs; let last = last\">{{weekOff}} <span *ngIf=\"!last\">,</span></span></span>\n    <span >Holidays <span class=\"circular-dot\" [ngStyle]=\"{ display: 'inline-block', 'margin-left': '10px' }\"></span></span>\n  </div>\n  <div class=\"daterangepicker__footer\">\n    <span *ngIf=\"data.isSPickerSelected\"><span>{{data.isSPickerSelected && localSelectedDates[0]?.selectedDate ? localSelectedDates.length : (localSelectedDates.length -1 && 0)}} </span>day(s) selected</span>\n    <span *ngIf=\"!data.isSPickerSelected\"><span>{{dateRangeLength > 0 ? dateRangeLength : 0 }} </span>day(s) selected</span>\n    <div class=\"footer_action_btn\">\n      <button mis-button size=\"md\" type=\"none\" (click)=\"cancelDatePicker()\" >Cancel</button>\n      <button *ngIf=\"data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid\" >Apply</button>\n      <button *ngIf=\"!data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDatesRange()\" [disabled]=\"!isDatesValid || (dateRangeLength === 0)\" >Apply</button>\n      </div>\n    </div>\n  </div>\n  <div class=\"single-datepicker-container\" [ngStyle]=\"{'display': !singleDatePickerSelected ? 'none' : 'block'}\">\n      <input\n        misTzDp\n        misInput\n        type=\"text\"\n        readonly\n        class=\"date-input\"\n        [dpConfig]=\"data.dpConfig\"\n        placeholder=\"Select\"\n        (dateChange)=\"onSingleDateChange($event)\"\n        [selectedDate]=\"singleDateSelectedValue\"\n        positionX=\"center\"\n        positionY=\"top\"\n        offsetX = 71\n        offsetY = -1\n        [value]=\"singleDateSelectedValue\"\n        [disableBoxShadow]=\"true\"\n        [disableOverLay]=\"true\"\n        [openElement]=\"openElement\"\n        #singleDatePickerElement\n      />\n  </div>\n\n</div>\n", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.daterangepicker-container{background:var(--bg-primary, #FFFFFF);border:1px solid var(--border-primary, #E0E0E0);box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;overflow:hidden;-webkit-user-select:none;user-select:none}.daterangepicker-container.single-date-picker-enabled{flex-direction:row}.daterangepicker-container .radio-container{display:flex;align-items:center;height:48px;padding:8px 0;justify-content:center;border-radius:12px 12px 0 0;border-bottom:1px solid var(--border-primary, #E0E0E0);background:var(--bg-primary, #FFFFFF)}.daterangepicker-container .radio-container .label{display:flex;align-items:center}.daterangepicker-container .radio-container .label .input{margin-right:8px;width:20px;height:20px}.daterangepicker-container .radio-container .label:first-child{padding-right:16px;border-right:1px solid var(--border-primary, #E0E0E0)}.daterangepicker-container .radio-container .label:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled .radio-container{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:288px;padding:20px;border-right:1px solid var(--border-primary, #E0E0E0)!important;border-radius:0}.daterangepicker-container.single-date-picker-enabled .radio-container .label:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled .radio-container .label:nth-child(2){padding-left:0}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:16px}.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}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:var(--brand-primary-lightest, #CBDDFB)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:var(--text-secondary, #6A737D)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:var(--text-primary, #181F33)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-wrap:wrap}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day{cursor:default}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day:hover{background-color:transparent}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day>span{color:var(--text-secondary, #6A737D)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:var(--brand-primary-lightest, #CBDDFB);cursor:pointer}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:var(--text-primary, #181F33)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px;color:var(--brand-primary, #0937B2)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.selected-day{color:var(--bg-primary, #FFFFFF)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.disabled-day{color:var(--text-secondary, #6A737D)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day{background-color:var(--brand-primary, #0937B2);border-radius:20px 4px 4px 20px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day>span{color:var(--bg-primary, #FFFFFF)!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day{background-color:var(--brand-primary, #0937B2);border-radius:0 20px 20px 0}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day>span{color:var(--bg-primary, #FFFFFF)!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day.selected-start-day{border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:var(--brand-primary-lightest, #CBDDFB)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day{background-color:var(--brand-primary, #0937B2);border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day>span{color:var(--bg-primary, #FFFFFF)!important}.daterangepicker-container .weekOffs_holidays_container{font-size:12px;color:var(--text-secondary, #6A737D);padding:8px 24px 12px}.daterangepicker-container .weekOffs_holidays_container>span{margin-right:16px}.daterangepicker-container .weekOffs_holidays_container>span>span{color:var(--text-primary, #181F33)}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:space-between;border-top:1px solid var(--border-primary, #E0E0E0);padding:16px 24px;word-spacing:4px}.daterangepicker-container .daterangepicker__footer span{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container .daterangepicker__footer span span{font-weight:700}.daterangepicker-container .daterangepicker__footer .footer_action_btn{display:flex}.daterangepicker-container .daterangepicker__footer button{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot{width:5px;height:5px;background-color:var(--brand-warning, #FF9D00);border-radius:50%}.holiday-text{color:var(--text-secondary, #6A737D)!important}.display-none{display:none!important}.single-datepicker-container{width:291px}\n"] }]
+        args: [{ selector: "mis-tz-sdp", template: "<div class=\"daterangepicker-container\" [ngClass]=\"data().isSingleDatePickerEnable?'single-date-picker-enabled':''\">\n  <div class=\"radio-container\">\n    <div class=\"label\" *ngFor=\"let picker of datePickerValue()\">\n      <mis-radio class=\"input\" [name]=\"'dateSelection'\" [value]=\"picker\" (valueChange)=\"changePicker($event)\" ngDefaultControl [formControl]=\"formControl\"></mis-radio>\n      <span>{{picker}}</span>\n    </div>\n  </div>\n  <div class=\"specific-datepicker-container\" [ngStyle]=\"{'display': singleDatePickerSelected() ? 'none' : ''}\">\n    <div class=\"daterangepicker-container__view\">\n      <div class=\"datepicker__left\">\n        <div class=\"daterangepicker-container__header__prabu\">\n          <div\n            class=\"daterangepicker-container__arrow__icon\"\n            (click)=\"!isPreviousMonthDisabled() && navigateMonth('PREVIOUS')\"\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      </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 [ngClass]=\"{\n              'current-day': weekDay.isCurrentDay && (currentMonthNumber() === todayMonthNumber())\n            }\">{{ weekDay.label }}</span>\n          </div>\n        </div>\n        <div class=\"daterangepicker-container__days\">\n          <div\n            class=\"daterangepicker-container__day\"\n            [ngClass]=\"{\n              'selected-day': day.isSelectedDay && isSpecificPickerSelected(),\n              'disabled-day': day.isDisabledDay,\n              'selected-start-day': day.isSelectedStartDay && !isSpecificPickerSelected(),\n              'selected-end-day': day.isSelectedEndDay && !isSpecificPickerSelected(),\n              'in-range-day': day.inRangeDay && !isSpecificPickerSelected(),\n              'is-valid-date': day.date > 0 && !isSpecificPickerSelected() && !(day.isSelectedStartDay && day.isSelectedEndDay)\n            }\"\n            [ngStyle]=\"{ 'margin-right': !isSpecificPickerSelected() ? '0px' : '1px','width': !isSpecificPickerSelected() ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '2.8px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n            *ngFor=\"let day of currentMonthDates()\"\n            (click)=\"selectDay('LEFT',day)\"\n          >\n          <div [ngClass]=\"{\n            'circular-dot': day.isHoliday\n          }\"></div>\n            <span *ngIf=\"day.date > 0\"  [ngClass]=\"{\n              'current-day': day.isCurrentDay,\n              'holiday-text': day.isHoliday || day.isWeekOff\n            }\" >\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\"\n          (click)=\"!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-day': day.isSelectedDay && isSpecificPickerSelected(),\n              'disabled-day': day.isDisabledDay,\n              'selected-start-day': day.isSelectedStartDay && !isSpecificPickerSelected(),\n              'selected-end-day': day.isSelectedEndDay && !isSpecificPickerSelected(),\n              'in-range-day': day.inRangeDay && !isSpecificPickerSelected(),\n              'is-valid-date': day.date > 0 && !isSpecificPickerSelected() && !(day.isSelectedStartDay && day.isSelectedEndDay)\n            }\"\n            *ngFor=\"let day of nextMonthDates()\"\n            (click)=\"selectDay('RIGHT',day)\"\n          >\n          <div [ngClass]=\"{\n            'circular-dot': day.isHoliday\n          }\"></div>\n            <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n              'current-day': day.isCurrentDay && (currentMonthNumber() === todayMonthNumber()),\n              'holiday-text': day.isHoliday || day.isWeekOff\n            }\" >\n              {{ day.date }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"weekOffs_holidays_container\">\n    <span>Weekly offs: <span *ngFor=\"let weekOff of data().weekOffs; let last = last\">{{weekOff}} <span *ngIf=\"!last\">,</span></span></span>\n    <span >Holidays <span class=\"circular-dot\" [ngStyle]=\"{ display: 'inline-block', 'margin-left': '10px' }\"></span></span>\n  </div>\n  <div class=\"daterangepicker__footer\">\n    <span *ngIf=\"isSpecificPickerSelected()\"><span>{{isSpecificPickerSelected() && localSelectedDates()[0]?.selectedDate ? localSelectedDates().length : (localSelectedDates().length -1 && 0)}} </span>day(s) selected</span>\n    <span *ngIf=\"!isSpecificPickerSelected()\"><span>{{dateRangeLength() > 0 ? dateRangeLength() : 0 }} </span>day(s) selected</span>\n    <div class=\"footer_action_btn\">\n      <button mis-button size=\"md\" type=\"none\" (click)=\"cancelDatePicker()\" >Cancel</button>\n      <button *ngIf=\"isSpecificPickerSelected()\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid()\" >Apply</button>\n      <button *ngIf=\"!isSpecificPickerSelected()\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDatesRange()\" [disabled]=\"!isDatesValid() || (dateRangeLength() === 0)\" >Apply</button>\n      </div>\n    </div>\n  </div>\n  <div class=\"single-datepicker-container\" [ngStyle]=\"{'display': !singleDatePickerSelected() ? 'none' : 'block'}\">\n      <input\n        misTzDp\n        misInput\n        type=\"text\"\n        readonly\n        class=\"date-input\"\n        [dpConfig]=\"data().dpConfig\"\n        placeholder=\"Select\"\n        (dateChange)=\"onSingleDateChange($event)\"\n        [selectedDate]=\"singleDateSelectedValue()\"\n        positionX=\"center\"\n        positionY=\"top\"\n        offsetX = 71\n        offsetY = -1\n        [value]=\"singleDateSelectedValue()\"\n        [disableBoxShadow]=\"true\"\n        [disableOverLay]=\"true\"\n        [openElement]=\"openElement()\"\n        #singleDatePickerElement\n      />\n  </div>\n\n</div>\n\n\n", styles: [".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}.daterangepicker-container.single-date-picker-enabled{flex-direction:row}.daterangepicker-container .radio-container{display:flex;align-items:center;height:48px;padding:8px 0;justify-content:center;border-radius:12px 12px 0 0;border-bottom:1px solid var(--lt-bg-ntrl-seperators, #e0e0e0);background:var(--lt-text-white, #fff)}.daterangepicker-container .radio-container .label{display:flex;align-items:center}.daterangepicker-container .radio-container .label .input{margin-right:8px;width:20px;height:20px}.daterangepicker-container .radio-container .label:first-child{padding-right:16px;border-right:1px solid #e0e0e0}.daterangepicker-container .radio-container .label:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled .radio-container{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:288px;padding:20px;border-right:1px solid #e0e0e0!important;border-radius:0}.daterangepicker-container.single-date-picker-enabled .radio-container .label:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled .radio-container .label:nth-child(2){padding-left:0}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:16px}.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}.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)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}.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}.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}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.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):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}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px;color:#0937b2}.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-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!important}.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!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day.selected-start-day{border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day{background-color:#0937b2;border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day>span{color:#fff!important}.daterangepicker-container .weekOffs_holidays_container{font-size:12px;color:var(--lt-text-muted, #6a737d);padding:8px 24px 12px}.daterangepicker-container .weekOffs_holidays_container>span{margin-right:16px}.daterangepicker-container .weekOffs_holidays_container>span>span{color:#181f33}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:space-between;border-top:1px solid #e0e0e0;padding:16px 24px;word-spacing:4px}.daterangepicker-container .daterangepicker__footer span{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container .daterangepicker__footer span span{font-weight:700}.daterangepicker-container .daterangepicker__footer .footer_action_btn{display:flex}.daterangepicker-container .daterangepicker__footer button{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot{width:5px;height:5px;background-color:#ed711c;border-radius:50%}.holiday-text{color:#6a737d!important}.display-none{display:none!important}.single-datepicker-container{width:291px}\n"] }]
     }], () => [{ type: undefined, decorators: [{
                 type: Inject,
                 args: [CONTAINER_DATA]
-            }] }, { type: i1.ToastService }, { type: i0.ChangeDetectorRef }], { singleDatePickerElement: [{
+            }] }, { type: i1.ToastService }], { singleDatePickerElement: [{
             type: ViewChild,
             args: ['singleDatePickerElement', { static: true, read: TzDatepickerDirective }]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TzDrpContainerComponent, { className: "TzDrpContainerComponent" }); })();
 
 class TzSpecificDatepickerDirective {
-    set selectedDates(dates) {
-        this.dates = dates;
-    }
-    set selectedDatesRange(dates) {
-        this.datesRange = dates;
-    }
-    set datesDisabled(dates) {
-        this.dpDisabledDates = dates;
-    }
-    set holidaysDates(dates) {
-        this.dpHolidays = dates;
-    }
-    set weekOffsSelection(dates) {
-        this.weekOffs = dates;
-    }
-    constructor(control, element, overlay, viewContainerRef) {
-        this.control = control;
+    constructor(element, overlay, viewContainerRef, control) {
         this.element = element;
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
-        this.dpConfig = {
+        this.control = control;
+        // Inputs are now defined using `input()`
+        this.dpConfig = input({
             format: DATE_FORMAT,
             minDate: "",
             maxDate: "",
             timezone: "Asia/Kolkata"
-        };
-        this.dateMessages = [];
-        this.positionX = "center";
-        this.positionY = "bottom";
-        this.offsetX = 0;
-        this.offsetY = 0;
-        this.isSPickerSelected = false;
-        this.isSingleDatePickerEnable = false;
-        this.dateChange = new EventEmitter(true);
-        this.dateChangeRange = new EventEmitter(true);
-        this.isOpen = false;
-        this.dates = [];
-        this.weekOffs = [];
-        this.dpDisabledDates = [];
-        this.dpHolidays = [];
+        });
+        this.selectedDates = input([]);
+        this.selectedDatesRange = input({ startDate: null, endDate: null });
+        this.datesDisabled = input([]);
+        this.holidaysDates = input([]);
+        this.weekOffsSelection = input([]);
+        this.dateMessages = input([]);
+        this.positionX = input("center");
+        this.positionY = input("bottom");
+        this.offsetX = input(0);
+        this.offsetY = input(0);
+        this.isSPickerSelected = input(false);
+        this.isSingleDatePickerEnable = input(false);
+        // Outputs are now defined using `output()`
+        this.dateChange = output();
+        this.dateChangeRange = output();
+        this.isOpen = signal(false);
+        this.overlayRef = null;
+        // Effect to handle the overlay position update reactively
+        effect(() => {
+            // Triggered by changes in any position-related input signals
+            this.updateOverlayPosition();
+        });
     }
     toggleDatePicker() {
-        if (this.isOpen) {
+        if (this.isOpen()) {
             this.close();
         }
         else {
             this.open();
         }
     }
+    toggleDatePickerOnEnter() {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    closeOnEsc() {
+        if (this.isOpen()) {
+            this.close();
+        }
+    }
     open() {
-        this.isOpen = true;
+        this.isOpen.set(true);
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(this.element)
             .withPositions(genPositionPairs({
-            positionX: this.positionX,
-            positionY: this.positionY,
-            offsetX: this.offsetX,
-            offsetY: this.offsetY
+            positionX: this.positionX(),
+            positionY: this.positionY(),
+            offsetX: this.offsetX(),
+            offsetY: this.offsetY(),
         }, true))
             .withPush(true);
         const config = new OverlayConfig({
@@ -776,18 +670,18 @@ class TzSpecificDatepickerDirective {
                 {
                     provide: CONTAINER_DATA,
                     useValue: {
-                        messages: this.dateMessages,
-                        dates: this.control?.control.value || this.dates,
-                        datesRange: this.control?.control.value || this.datesRange,
-                        dpConfig: this.dpConfig,
-                        datesDisabled: this.dpDisabledDates,
+                        messages: this.dateMessages(),
+                        dates: this.control?.control.value || this.selectedDates(),
+                        datesRange: this.control?.control.value || this.selectedDatesRange(),
+                        dpConfig: this.dpConfig(),
+                        datesDisabled: this.datesDisabled(),
                         dateChange: this.applyDate.bind(this),
                         dateChangeRange: this.applyDateRange.bind(this),
                         close: this.close.bind(this),
-                        weekOffs: this.weekOffs,
-                        holidays: this.dpHolidays,
-                        isSPickerSelected: this.isSPickerSelected,
-                        isSingleDatePickerEnable: this.isSingleDatePickerEnable,
+                        weekOffs: this.weekOffsSelection(),
+                        holidays: this.holidaysDates(),
+                        isSPickerSelected: this.isSPickerSelected(),
+                        isSingleDatePickerEnable: this.isSingleDatePickerEnable(),
                     }
                 }
             ]
@@ -806,10 +700,10 @@ class TzSpecificDatepickerDirective {
                 .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);
             this.overlayRef.updatePositionStrategy(positionStrategy);
@@ -818,74 +712,39 @@ class TzSpecificDatepickerDirective {
     applyDate(dates) {
         this.dateChange.emit(dates);
         this.control?.control.patchValue(dates);
-        this.dates = dates;
         this.close();
     }
     applyDateRange(dates) {
         this.dateChangeRange.emit(dates);
         this.control?.control.patchValue(dates);
-        this.datesRange = dates;
         this.close();
     }
     close() {
-        this.isOpen = false;
-        this.overlayRef.detach();
-        this.overlayRef.dispose();
+        this.isOpen.set(false);
+        this.overlayRef?.detach();
+        this.overlayRef?.dispose();
     }
-    ngOnChanges(changes) {
-        if ((changes.offsetX && !changes.offsetX.firstChange) || (changes.offsetY && !changes.offsetY.firstChange) ||
-            (changes.positionX && !changes.positionX.firstChange) ||
-            (changes.positionY && !changes.positionY.firstChange)) {
-            this.updateOverlayPosition();
-        }
-    }
-    static { this.ɵfac = function TzSpecificDatepickerDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TzSpecificDatepickerDirective)(i0.ɵɵdirectiveInject(i1$1.NgControl, 10), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i2$1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); }; }
+    static { this.ɵfac = function TzSpecificDatepickerDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TzSpecificDatepickerDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$1.NgControl, 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TzSpecificDatepickerDirective, selectors: [["input", "misTzSdp", ""]], hostBindings: function TzSpecificDatepickerDirective_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("click", function TzSpecificDatepickerDirective_click_HostBindingHandler() { return ctx.toggleDatePicker(); });
-        } }, inputs: { dpConfig: "dpConfig", selectedDates: "selectedDates", selectedDatesRange: "selectedDatesRange", datesDisabled: "datesDisabled", holidaysDates: "holidaysDates", weekOffsSelection: "weekOffsSelection", dateMessages: "dateMessages", positionX: "positionX", positionY: "positionY", offsetX: "offsetX", offsetY: "offsetY", isSPickerSelected: "isSPickerSelected", isSingleDatePickerEnable: "isSingleDatePickerEnable" }, outputs: { dateChange: "dateChange", dateChangeRange: "dateChangeRange" }, features: [i0.ɵɵNgOnChangesFeature] }); }
+            i0.ɵɵlistener("click", function TzSpecificDatepickerDirective_click_HostBindingHandler() { return ctx.toggleDatePicker(); })("keydown.enter", function TzSpecificDatepickerDirective_keydown_enter_HostBindingHandler() { return ctx.toggleDatePickerOnEnter(); })("keydown.esc", function TzSpecificDatepickerDirective_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
+        } }, inputs: { dpConfig: [1, "dpConfig"], selectedDates: [1, "selectedDates"], selectedDatesRange: [1, "selectedDatesRange"], datesDisabled: [1, "datesDisabled"], holidaysDates: [1, "holidaysDates"], weekOffsSelection: [1, "weekOffsSelection"], dateMessages: [1, "dateMessages"], positionX: [1, "positionX"], positionY: [1, "positionY"], offsetX: [1, "offsetX"], offsetY: [1, "offsetY"], isSPickerSelected: [1, "isSPickerSelected"], isSingleDatePickerEnable: [1, "isSingleDatePickerEnable"] }, outputs: { dateChange: "dateChange", dateChangeRange: "dateChangeRange" } }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzSpecificDatepickerDirective, [{
         type: Directive,
         args: [{
                 selector: "input[misTzSdp]"
             }]
-    }], () => [{ type: i1$1.NgControl, decorators: [{
-                type: Self
-            }, {
+    }], () => [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i2$1.NgControl, decorators: [{
                 type: Optional
-            }] }, { type: i0.ElementRef }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], { dpConfig: [{
-            type: Input
-        }], selectedDates: [{
-            type: Input
-        }], selectedDatesRange: [{
-            type: Input
-        }], datesDisabled: [{
-            type: Input
-        }], holidaysDates: [{
-            type: Input
-        }], weekOffsSelection: [{
-            type: Input
-        }], dateMessages: [{
-            type: Input
-        }], positionX: [{
-            type: Input
-        }], positionY: [{
-            type: Input
-        }], offsetX: [{
-            type: Input
-        }], offsetY: [{
-            type: Input
-        }], isSPickerSelected: [{
-            type: Input
-        }], isSingleDatePickerEnable: [{
-            type: Input
-        }], dateChange: [{
-            type: Output
-        }], dateChangeRange: [{
-            type: Output
-        }], toggleDatePicker: [{
+            }] }], { toggleDatePicker: [{
             type: HostListener,
             args: ["click"]
+        }], toggleDatePickerOnEnter: [{
+            type: HostListener,
+            args: ["keydown.enter"]
+        }], closeOnEsc: [{
+            type: HostListener,
+            args: ["keydown.esc"]
         }] }); })();
 
 class SpecificDatepickerModule {