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