mis-crystal-design-system 18.0.5 → 18.0.6

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

@@ -0,0 +1,737 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Component, Inject, HostListener, EventEmitter, Injector, Directive, Self, Optional, Input, Output, NgModule } from '@angular/core';
+import dayjs, { tz } from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+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';
+import { CommonModule } from '@angular/common';
+import * as i3 from 'mis-crystal-design-system/button';
+import { ButtonModule } from 'mis-crystal-design-system/button';
+import * as i4 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i2$1 from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { take } from 'rxjs/operators';
+import { genPositionPairs } from 'mis-crystal-design-system/utils';
+import * as i1$1 from '@angular/forms';
+
+/** @format */
+const CONTAINER_DATA = new InjectionToken("CONTAINER_DATA");
+const DATE_FORMAT = "DD-MM-YYYY";
+
+const getMonth = (index) => {
+    let month;
+    switch (index) {
+        case 0:
+            month = "January";
+            break;
+        case 1:
+            month = "February";
+            break;
+        case 2:
+            month = "March";
+            break;
+        case 3:
+            month = "April";
+            break;
+        case 4:
+            month = "May";
+            break;
+        case 5:
+            month = "June";
+            break;
+        case 6:
+            month = "July";
+            break;
+        case 7:
+            month = "August";
+            break;
+        case 8:
+            month = "September";
+            break;
+        case 9:
+            month = "October";
+            break;
+        case 10:
+            month = "November";
+            break;
+        case 11:
+            month = "December";
+            break;
+        default:
+            break;
+    }
+    return month;
+};
+
+const _c0 = a0 => ({ "disabled-month": a0 });
+const _c1 = () => [];
+const _c2 = a0 => ({ "active-range": a0 });
+const _c3 = (a0, a1, a2, a3, a4, a5) => ({ "selected-same-day": a0, "selected-start-day": a1, "selected-end-day": a2, "disabled-day": a3, "in-range-day": a4, "is-valid-date": a5 });
+function TzDrpContainerComponent_div_3_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "button", 22);
+    i0.ɵɵlistener("click", function TzDrpContainerComponent_div_3_div_1_Template_button_click_1_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.selectRange(item_r3)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r3 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2, ctx_r3.selectedItemLabel === item_r3.label));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", item_r3.label, " ");
+} }
+function TzDrpContainerComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵtemplate(1, TzDrpContainerComponent_div_3_div_1_Template, 3, 4, "div", 21);
+    i0.ɵɵelementStart(2, "div")(3, "button", 22);
+    i0.ɵɵlistener("click", function TzDrpContainerComponent_div_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.resetRange()); });
+    i0.ɵɵtext(4, "Custom Range");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    let tmp_1_0;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", (tmp_1_0 = ctx_r3.data == null ? null : ctx_r3.data.dpConfig == null ? null : ctx_r3.data.dpConfig.ranges) !== null && tmp_1_0 !== undefined ? tmp_1_0 : i0.ɵɵpureFunction0(2, _c1));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2, ctx_r3.selectedItemLabel === "Custom Range"));
+} }
+function TzDrpContainerComponent_div_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const weekDay_r5 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(weekDay_r5.label);
+} }
+function TzDrpContainerComponent_div_19_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r7 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("tabindex", day_r7.isDisabledDay ? -1 : 0);
+    i0.ɵɵattribute("aria-label", ctx_r3.retractDayMonth(day_r7.date, ctx_r3.currentMonth, ctx_r3.currentYearNumber));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", day_r7.date, " ");
+} }
+function TzDrpContainerComponent_div_19_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵlistener("click", function TzDrpContainerComponent_div_19_Template_div_click_0_listener() { const day_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDay("LEFT", day_r7)); })("keyup.enter", function TzDrpContainerComponent_div_19_Template_div_keyup_enter_0_listener() { const day_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDay("LEFT", day_r7)); });
+    i0.ɵɵtemplate(1, TzDrpContainerComponent_div_19_span_1_Template, 2, 3, "span", 25);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r7 = ctx.$implicit;
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(2, _c3, day_r7.isSelectedStartDay && day_r7.isSelectedEndDay, day_r7.isSelectedStartDay, day_r7.isSelectedEndDay, day_r7.isDisabledDay, day_r7.inRangeDay, day_r7.date > 0 && !(day_r7.isSelectedStartDay && day_r7.isSelectedEndDay)));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", day_r7.date > 0);
+} }
+function TzDrpContainerComponent_div_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const weekDay_r8 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(weekDay_r8.label);
+} }
+function TzDrpContainerComponent_div_32_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("tabindex", day_r10.isDisabledDay ? -1 : 0);
+    i0.ɵɵattribute("aria-label", ctx_r3.retractDayMonth(day_r10.date, ctx_r3.nextMonth, ctx_r3.nextYearNumber));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", day_r10.date, " ");
+} }
+function TzDrpContainerComponent_div_32_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵlistener("click", function TzDrpContainerComponent_div_32_Template_div_click_0_listener() { const day_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDay("RIGHT", day_r10)); })("keyup.enter", function TzDrpContainerComponent_div_32_Template_div_keyup_enter_0_listener() { const day_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDay("RIGHT", day_r10)); });
+    i0.ɵɵtemplate(1, TzDrpContainerComponent_div_32_span_1_Template, 2, 3, "span", 25);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r10 = ctx.$implicit;
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(2, _c3, day_r10.isSelectedStartDay && day_r10.isSelectedEndDay, day_r10.isSelectedStartDay, day_r10.isSelectedEndDay, day_r10.isDisabledDay, day_r10.inRangeDay, day_r10.date > 0 && !(day_r10.isSelectedStartDay && day_r10.isSelectedEndDay)));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", day_r10.date > 0);
+} }
+dayjs.extend(isBetween);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+class TzDrpContainerComponent {
+    constructor(data, toast) {
+        this.toast = toast;
+        this.CUSTOM_RANGE_LABEL = "Custom Range";
+        this.dayjsInstance = (...args) => {
+            return tz(args[0], args[1] || 'DD/MM/YYYY', this.data.dpConfig.timezone || 'Asia/Kolkata');
+        };
+        this.rawWeekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+        this.weekDays = [];
+        this.currentMonthDates = [];
+        this.nextMonthDates = [];
+        this.isPreviousMonthDisabled = false;
+        this.isNextMonthDisabled = false;
+        this.selectionStarted = false;
+        this.isDatesValid = false;
+        this.selectedItemLabel = this.CUSTOM_RANGE_LABEL;
+        this.data = data;
+        this.localSelectedDates = this.data.dates;
+        this.isDatesValid = false;
+        if (this.localSelectedDates.startDate && this.localSelectedDates.endDate) {
+            this.isDatesValid = true;
+        }
+        // Initialize selectedItemLabel from data.selectedRangeLabel if available
+        if (this.data.selectedRangeLabel) {
+            this.selectedItemLabel = this.data.selectedRangeLabel;
+        }
+        if (this.data?.dpConfig?.timezone) {
+            this.dayjsInstance = (...args) => {
+                return tz(args[0], args[1], 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() {
+        this.currentDateInstance();
+        this.calculateMinMaxDays();
+    }
+    retractDayMonth(day, month, year) {
+        return `${day} ${month} ${year}`;
+    }
+    closeOnEsc() {
+        this.cancelDatePicker();
+    }
+    currentDateInstance() {
+        if (!this.localSelectedDates?.startDate) {
+            this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+            this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
+            return;
+        }
+        const selectedStartDate = !!this.localSelectedDates?.startDate ? this.dayjsInstance(this.localSelectedDates?.startDate, this.data.dpConfig.format) : dayjs('invalid');
+        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 (this.nextMonthNumber === -1) {
+                this.nextMonthNumber = 11;
+            }
+            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");
+        }
+    }
+    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;
+        }
+        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();
+        for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
+            const date = dayjs().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()) {
+                let Date = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate);
+                isDisabledDay = minDate.isAfter(dayjs(Date, this.data.dpConfig.format), "day");
+            }
+            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(dayjs(date, this.data.dpConfig.format), "day");
+            }
+            if (this.data?.dpConfig?.maxAllowedRange > 0 &&
+                !isDisabledDay &&
+                (this.localSelectedDates?.startDate ?? false) && (!(this.localSelectedDates.endDate ?? false))) {
+                const startDate = dayjs(this.localSelectedDates.startDate, this.data.dpConfig.format).startOf('day');
+                const maxEndDate = startDate.clone().add(this.data.dpConfig.maxAllowedRange - 1, 'days');
+                isDisabledDay = date.isAfter(maxEndDate, 'day');
+            }
+            const isCurrentDay = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
+                this.dayjsInstance().format(this.data.dpConfig.format);
+            const isSelectedStartDay = !isDisabledDay &&
+                (this.localSelectedDates?.startDate ?? false) &&
+                date.format(this.data.dpConfig.format) === this.localSelectedDates?.startDate;
+            const isAfterSelectedStartDate = dayjs(date, this.data?.dpConfig?.format).startOf('day').isAfter(dayjs(this.localSelectedDates.startDate, this.data?.dpConfig?.format).startOf('day'), 'day');
+            const isBeforeSelectedEndDate = dayjs(date, this.data?.dpConfig?.format).startOf('day').isBefore(dayjs(this.localSelectedDates.endDate, this.data?.dpConfig?.format).startOf('day'), 'day');
+            const inRangeDay = (this.localSelectedDates.startDate ?? false) &&
+                (this.localSelectedDates.endDate ?? false) &&
+                isAfterSelectedStartDate &&
+                isBeforeSelectedEndDate;
+            const isSelectedEndDay = !isDisabledDay &&
+                ((this.localSelectedDates?.startDate && this.localSelectedDates?.endDate) ?? false) &&
+                date.format(this.data.dpConfig.format) === this.localSelectedDates?.endDate;
+            dates.push({
+                date: currentDate,
+                weekDay: date.day(),
+                isCurrentDay,
+                isSelectedStartDay,
+                isSelectedEndDay,
+                inRangeDay,
+                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--) {
+            dates.unshift({ date: 0, weekDay: i - 1 });
+        }
+        return dates;
+    }
+    selectDay(from, day) {
+        if (day.date <= 0)
+            return;
+        if (!day.isDisabledDay) {
+            this.selectedItemLabel = this.CUSTOM_RANGE_LABEL;
+            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.localSelectedDates.startDate, this.data.dpConfig.format), 'day')) {
+                    this.localSelectedDates = {
+                        startDate: dayjsDay.format(this.data.dpConfig.format),
+                        endDate: null,
+                        selectedRangeLabel: this.CUSTOM_RANGE_LABEL
+                    };
+                    this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+                    this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
+                    return;
+                }
+                this.selectionStarted = false;
+                this.localSelectedDates = {
+                    ...this.localSelectedDates,
+                    endDate: dayjsDay.format(this.data.dpConfig.format),
+                    selectedRangeLabel: this.CUSTOM_RANGE_LABEL
+                };
+            }
+            else {
+                this.selectionStarted = true;
+                this.localSelectedDates = {
+                    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,
+                    selectedRangeLabel: this.CUSTOM_RANGE_LABEL
+                };
+            }
+            this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+            this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
+            this.isDatesValid = false;
+            if (this.localSelectedDates.startDate && this.localSelectedDates.endDate) {
+                this.isDatesValid = true;
+            }
+        }
+        if (day.toastMessage) {
+            this.toast.displayMsg(day.toastMessage, 4000);
+        }
+    }
+    selectRange(item) {
+        if (!item)
+            return;
+        let startDate = this.dayjsInstance(item.value[0]);
+        let endDate = this.dayjsInstance(item.value[1]);
+        const startDateStr = startDate.format(this.data.dpConfig.format);
+        const endDateStr = endDate.format(this.data.dpConfig.format);
+        const isAnyDateDisabled = this.data.datesDisabled.some((date) => this.dayjsInstance(date, this.data.dpConfig.format).isBetween(startDateStr, endDateStr, null, '[]'));
+        const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
+        const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
+        const isWithinLimits = (!minDate.isValid() || !startDate.isBefore(minDate, "day")) &&
+            (!maxDate.isValid() || !endDate.isAfter(maxDate, "day"));
+        if (!isWithinLimits || isAnyDateDisabled) {
+            this.toast.displayMsg("Selected range contains disabled dates or is out of bounds.", 4000);
+            return;
+        }
+        this.selectedItemLabel = item.label;
+        this.currentMonthNumber = startDate.month();
+        this.currentYearNumber = startDate.year();
+        if (this.currentMonthNumber === 11) {
+            this.nextMonthNumber = 0;
+            this.nextYearNumber = this.currentYearNumber + 1;
+        }
+        else {
+            this.nextMonthNumber = this.currentMonthNumber + 1;
+            this.nextYearNumber = this.currentYearNumber;
+        }
+        this.localSelectedDates = {
+            startDate: startDateStr,
+            endDate: endDateStr,
+            selectedRangeLabel: item.label
+        };
+        this.currentMonth = getMonth(this.currentMonthNumber);
+        this.nextMonth = getMonth(this.nextMonthNumber);
+        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+        this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
+        this.isDatesValid = !!(this.localSelectedDates.startDate && this.localSelectedDates.endDate);
+    }
+    resetRange() {
+        this.selectedItemLabel = this.CUSTOM_RANGE_LABEL;
+        this.localSelectedDates = {
+            startDate: null,
+            endDate: null,
+            selectedRangeLabel: this.CUSTOM_RANGE_LABEL
+        };
+        this.selectionStarted = false;
+        this.isDatesValid = false;
+        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+        this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
+    }
+    applyDates() {
+        const result = {
+            ...this.localSelectedDates,
+            selectedRangeLabel: this.selectedItemLabel
+        };
+        this.data.dateChange(result);
+    }
+    cancelDatePicker() {
+        this.data.close();
+    }
+    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-drp"]], hostBindings: function TzDrpContainerComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.esc", function TzDrpContainerComponent_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
+        } }, decls: 38, vars: 20, consts: [["aria-label", "date range picker", "cdkTrapFocus", "", 1, "daterangepicker-container", 3, "cdkTrapFocusAutoCapture"], [1, "daterangepicker-container__view"], ["tabindex", "-1", "cdkFocusInitial", ""], ["class", "daterangepicker-container__ranges", 4, "ngIf"], [1, "datepicker__left"], [1, "daterangepicker-container__header__prabu"], ["tabindex", "0", "aria-label", "Previous Month", 1, "daterangepicker-container__arrow__icon", 3, "click", "keyup.enter", "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"], ["tabindex", "0", "aria-label", "Next Month", 1, "daterangepicker-container__arrow__icon", "mobile_view", 3, "click", "keyup.enter", "ngClass"], [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", "click", "keyup.enter", 4, "ngFor", "ngForOf"], [1, "datepicker__right"], ["tabindex", "0", 1, "daterangepicker-container__arrow__icon", "pc_view", 3, "click", "keyup.enter", "ngClass"], [1, "daterangepicker__footer"], ["mis-button", "", "type", "none", "id", "mobile-footer-btn", 3, "click"], ["mis-button", "", "type", "primary", "id", "mobile-footer-btn", 3, "click", "disabled"], [1, "daterangepicker-container__ranges"], [4, "ngFor", "ngForOf"], [1, "mis-btn", 3, "click", "ngClass"], [1, "daterangepicker-container__weekday"], [1, "daterangepicker-container__day", 3, "click", "keyup.enter", "ngClass"], [3, "tabindex", 4, "ngIf"], [3, "tabindex"]], template: function TzDrpContainerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵelement(2, "div", 2);
+            i0.ɵɵtemplate(3, TzDrpContainerComponent_div_3_Template, 5, 5, "div", 3);
+            i0.ɵɵelementStart(4, "div", 4)(5, "div", 5)(6, "div", 6);
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_6_listener() { return !ctx.isPreviousMonthDisabled && ctx.navigateMonth("PREVIOUS"); })("keyup.enter", function TzDrpContainerComponent_Template_div_keyup_enter_6_listener() { return !ctx.isPreviousMonthDisabled && ctx.navigateMonth("PREVIOUS"); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(7, "svg", 7);
+            i0.ɵɵelement(8, "path", 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(9, "span");
+            i0.ɵɵtext(10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(11, "div");
+            i0.ɵɵelementStart(12, "div", 9);
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_12_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); })("keyup.enter", function TzDrpContainerComponent_Template_div_keyup_enter_12_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(13, "svg", 7);
+            i0.ɵɵelement(14, "path", 8);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(15, "div", 10)(16, "div", 11);
+            i0.ɵɵtemplate(17, TzDrpContainerComponent_div_17_Template, 3, 1, "div", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "div", 13);
+            i0.ɵɵtemplate(19, TzDrpContainerComponent_div_19_Template, 2, 9, "div", 14);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(20, "div", 15)(21, "div", 5);
+            i0.ɵɵelement(22, "div");
+            i0.ɵɵelementStart(23, "span");
+            i0.ɵɵtext(24);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(25, "div", 16);
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_25_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); })("keyup.enter", function TzDrpContainerComponent_Template_div_keyup_enter_25_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(26, "svg", 7);
+            i0.ɵɵelement(27, "path", 8);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(28, "div", 10)(29, "div", 11);
+            i0.ɵɵtemplate(30, TzDrpContainerComponent_div_30_Template, 3, 1, "div", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(31, "div", 13);
+            i0.ɵɵtemplate(32, TzDrpContainerComponent_div_32_Template, 2, 9, "div", 14);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(33, "div", 17)(34, "button", 18);
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_button_click_34_listener() { return ctx.cancelDatePicker(); });
+            i0.ɵɵtext(35, "Cancel");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(36, "button", 19);
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_button_click_36_listener() { return ctx.applyDates(); });
+            i0.ɵɵtext(37, "Apply");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("cdkTrapFocusAutoCapture", true);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", (ctx.data == null ? null : ctx.data.dpConfig == null ? null : ctx.data.dpConfig.ranges == null ? null : ctx.data.dpConfig.ranges.length) > 0);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c0, ctx.isPreviousMonthDisabled));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate2(" ", ctx.currentMonth, " ", ctx.currentYearNumber, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c0, ctx.isNextMonthDisabled));
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("ngForOf", ctx.weekDays);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngForOf", ctx.currentMonthDates);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate2(" ", ctx.nextMonth, " ", ctx.nextYearNumber, " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c0, ctx.isNextMonthDisabled));
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("ngForOf", ctx.weekDays);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngForOf", ctx.nextMonthDates);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("disabled", !ctx.isDatesValid);
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.ButtonDirective, i4.CdkTrapFocus], styles: ["[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}.daterangepicker-container[_ngcontent-%COMP%]{background:#fff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;overflow:hidden;-webkit-user-select:none;user-select:none}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]{max-width:100vw;border:none}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]{display:flex;gap:24px;padding:16px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__ranges[_ngcontent-%COMP%]{display:flex;flex-direction:column}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .mis-btn[_ngcontent-%COMP%]{background:none;outline:none;border:none;cursor:pointer;border-radius:4px;vertical-align:middle;text-align:center;box-sizing:border-box;display:flex;align-items:center;text-decoration:none;justify-content:center;padding:10px 16px;font-size:16px;line-height:24px;background-color:transparent;color:#0937b2}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .active-range[_ngcontent-%COMP%]{background-color:#cadcfb}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]{flex-direction:column;align-items:center;position:fixed;bottom:0;left:0;background-color:#fff;width:100%;max-height:68vh;overflow-y:auto;border-radius:30px;gap:24px;padding:10% 0 30%;box-shadow:0 -4px 8px 10000px #0000001f;scrollbar-width:none;-ms-overflow-style:none}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__left[_ngcontent-%COMP%], .daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__right[_ngcontent-%COMP%]{display:flex;flex-direction:column}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__left[_ngcontent-%COMP%], .daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__right[_ngcontent-%COMP%]{width:90%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:10%}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{margin:0 auto;font-size:4vw}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]{width:7%}}@media only screen and (min-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .mobile_view[_ngcontent-%COMP%]{display:none}}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .pc_view[_ngcontent-%COMP%]{display:none}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]{height:100%;width:252px}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]{width:100%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]{margin:0 auto}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#6a737d}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:3vw}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]{width:36px;height:36px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]{flex:0 0 14.2857142857%;width:14.2857142857%;height:14.2857142857%;aspect-ratio:1}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-start-day):not(.selected-end-day) > span[_ngcontent-%COMP%]{color:#181f33}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:3.4vw}}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.selected-day[_ngcontent-%COMP%]{color:#fff}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.disabled-day[_ngcontent-%COMP%]{color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-same-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:50%!important}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-same-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-start-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-start-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .in-range-day[_ngcontent-%COMP%]:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;border-top:1px solid #e0e0e0;padding:16px 24px;gap:24px}@media only screen and (max-width: 900px){.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]{justify-content:space-evenly;padding:2% 0;background-color:#fff;position:fixed;bottom:0;left:0;width:100%;height:8vh;border-top:2px solid #C8CDD3}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   #mobile-footer-btn[_ngcontent-%COMP%]{width:36%;font-size:3.8vw}}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
+        type: Component,
+        args: [{ selector: "mis-tz-drp", template: "<div class=\"daterangepicker-container\" aria-label=\"date range picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <div class=\"daterangepicker-container__view\">\n    <div tabindex=\"-1\" cdkFocusInitial></div>\n    <div *ngIf=\"data?.dpConfig?.ranges?.length > 0\" class=\"daterangepicker-container__ranges\">\n      <div *ngFor=\"let item of data?.dpConfig?.ranges ?? []\" >\n        <button\n        [ngClass]=\"{'active-range' : selectedItemLabel === item.label}\"\n          (click)=\"selectRange(item)\"\n          class=\"mis-btn\"\n        >\n          {{ item.label }}\n        </button>\n      </div>\n      <div> <button class=\"mis-btn\" [ngClass]=\"{'active-range' : selectedItemLabel === 'Custom Range'}\" (click)=\"resetRange()\">Custom Range</button> </div>\n  </div>\n    <div class=\"datepicker__left\">\n      <div class=\"daterangepicker-container__header__prabu\">\n        <div\n          class=\"daterangepicker-container__arrow__icon\"\n          tabindex=\"0\"\n          (click)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n          (keyup.enter)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n          aria-label=\"Previous Month\"\n          [ngClass]=\"{\n            'disabled-month': isPreviousMonthDisabled\n          }\"\n        >\n          <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n              fill=\"#181F33\"\n            ></path>\n          </svg>\n        </div>\n        <span> {{ currentMonth }} {{ currentYearNumber }} </span>\n        <div></div>\n        <!-- Button visible in mobile view -->\n        <div\n          class=\"daterangepicker-container__arrow__icon mobile_view\"\n          tabindex=\"0\"\n          (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n          (keyup.enter)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n          aria-label=\"Next Month\"\n          [ngClass]=\"{\n            'disabled-month': isNextMonthDisabled\n          }\"\n        >\n          <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n              fill=\"#181F33\"\n            ></path>\n          </svg>\n        </div>\n      </div>\n      <div class=\"daterangepicker-container__body\">\n        <div class=\"daterangepicker-container__weekdays\">\n          <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n            <span>{{ weekDay.label }}</span>\n          </div>\n        </div>\n        <div class=\"daterangepicker-container__days\">\n          <div\n            class=\"daterangepicker-container__day\" \n            [ngClass]=\"{\n              'selected-same-day': day.isSelectedStartDay && day.isSelectedEndDay,\n              'selected-start-day': day.isSelectedStartDay,\n              'selected-end-day': day.isSelectedEndDay,\n              'disabled-day': day.isDisabledDay,\n              'in-range-day': day.inRangeDay,\n              'is-valid-date': day.date > 0 && !(day.isSelectedStartDay && day.isSelectedEndDay)\n            }\"\n            *ngFor=\"let day of currentMonthDates\"\n            (click)=\"selectDay('LEFT', day)\"\n            (keyup.enter)=\"selectDay('LEFT', day)\"\n          >\n            <span *ngIf=\"day.date > 0\"\n              [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n              [attr.aria-label]=\"retractDayMonth(day.date, currentMonth, currentYearNumber)\">\n              {{ day.date }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"datepicker__right\">\n      <div class=\"daterangepicker-container__header__prabu\">\n        <div></div>\n        <span> {{ nextMonth }} {{ nextYearNumber }} </span>\n        <div\n          class=\"daterangepicker-container__arrow__icon pc_view\"\n          tabindex=\"0\"\n          (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n          (keyup.enter)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n          [ngClass]=\"{\n            'disabled-month': isNextMonthDisabled\n          }\"\n        >\n          <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n              fill=\"#181F33\"\n            ></path>\n          </svg>\n        </div>\n      </div>\n      <div class=\"daterangepicker-container__body\">\n        <div class=\"daterangepicker-container__weekdays\">\n          <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n            <span>{{ weekDay.label }}</span>\n          </div>\n        </div>\n        <div class=\"daterangepicker-container__days\">\n          <div\n            class=\"daterangepicker-container__day\"\n            [ngClass]=\"{\n              'selected-same-day': day.isSelectedStartDay && day.isSelectedEndDay,\n              'selected-start-day': day.isSelectedStartDay,\n              'selected-end-day': day.isSelectedEndDay,\n              'disabled-day': day.isDisabledDay,\n              'in-range-day': day.inRangeDay,\n              'is-valid-date': day.date > 0 && !(day.isSelectedStartDay && day.isSelectedEndDay)\n            }\"\n            *ngFor=\"let day of nextMonthDates\"\n            (click)=\"selectDay('RIGHT', day)\"\n            (keyup.enter)=\"selectDay('RIGHT', day)\"\n          >\n            <span *ngIf=\"day.date > 0\"\n              [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n              [attr.aria-label]=\"retractDayMonth(day.date, nextMonth, nextYearNumber)\">\n              {{ day.date }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"daterangepicker__footer\">\n    <button mis-button type=\"none\" id='mobile-footer-btn' (click)=\"cancelDatePicker()\">Cancel</button>\n    <button mis-button type=\"primary\" id=\"mobile-footer-btn\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid\">Apply</button>\n  </div>\n</div>", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}.daterangepicker-container{background:#fff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;overflow:hidden;-webkit-user-select:none;user-select:none}@media only screen and (max-width: 900px){.daterangepicker-container{max-width:100vw;border:none}}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__ranges{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .mis-btn{background:none;outline:none;border:none;cursor:pointer;border-radius:4px;vertical-align:middle;text-align:center;box-sizing:border-box;display:flex;align-items:center;text-decoration:none;justify-content:center;padding:10px 16px;font-size:16px;line-height:24px;background-color:transparent;color:#0937b2}.daterangepicker-container .daterangepicker-container__view .active-range{background-color:#cadcfb}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view{flex-direction:column;align-items:center;position:fixed;bottom:0;left:0;background-color:#fff;width:100%;max-height:68vh;overflow-y:auto;border-radius:30px;gap:24px;padding:10% 0 30%;box-shadow:0 -4px 8px 10000px #0000001f;scrollbar-width:none;-ms-overflow-style:none}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__view::-webkit-scrollbar{display:none}}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{width:90%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:10%}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{margin:0 auto;font-size:4vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{width:7%}}@media only screen and (min-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .mobile_view{display:none}}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .pc_view{display:none}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{width:100%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{margin:0 auto}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#6a737d}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:3vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-wrap:wrap}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-direction:row;flex-wrap:wrap;flex:0 0 14.2857142857%}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{width:36px;height:36px;display:flex;align-items:center;justify-content:center}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex:0 0 14.2857142857%;width:14.2857142857%;height:14.2857142857%;aspect-ratio:1}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day{cursor:default}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day:hover{background-color:transparent}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day>span{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day)>span{color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:3.4vw}}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.selected-day{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.disabled-day{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-same-day{background-color:#0937b2;border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-same-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day>span{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:flex-end;border-top:1px solid #e0e0e0;padding:16px 24px;gap:24px}@media only screen and (max-width: 900px){.daterangepicker-container .daterangepicker__footer{justify-content:space-evenly;padding:2% 0;background-color:#fff;position:fixed;bottom:0;left:0;width:100%;height:8vh;border-top:2px solid #C8CDD3}.daterangepicker-container .daterangepicker__footer #mobile-footer-btn{width:36%;font-size:3.8vw}}\n"] }]
+    }], () => [{ type: undefined, decorators: [{
+                type: Inject,
+                args: [CONTAINER_DATA]
+            }] }, { type: i1.ToastService }], { closeOnEsc: [{
+            type: HostListener,
+            args: ["keydown.esc"]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TzDrpContainerComponent, { className: "TzDrpContainerComponent" }); })();
+
+class TzDaterangepickerDirective {
+    // dd-mm-yyyy 01-12-2022
+    set selectedDates(dates) {
+        this.dates = { startDate: null, endDate: null, ...dates };
+    }
+    set datesDisabled(dates) {
+        this.dpDisabledDates = dates;
+    }
+    constructor(control, element, overlay, viewContainerRef) {
+        this.control = control;
+        this.element = element;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.dpConfig = {
+            format: DATE_FORMAT,
+            minDate: "",
+            maxDate: "",
+            maxAllowedRange: 0,
+            ranges: []
+        };
+        this.selectedRangeLabel = 'Custom Range';
+        this.dateMessages = [];
+        this.positionX = "center";
+        this.positionY = "bottom";
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.dateChange = new EventEmitter(true);
+        this.isOpen = false;
+        this.dpDisabledDates = [];
+    }
+    toggleDatePicker() {
+        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;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.element)
+            .withPositions(genPositionPairs({
+            positionX: this.positionX,
+            positionY: this.positionY,
+            offsetX: this.offsetX,
+            offsetY: this.offsetY
+        }, true))
+            .withPush(true);
+        const config = new OverlayConfig({
+            hasBackdrop: true,
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            backdropClass: "cdk-overlay-transparent-backdrop"
+        });
+        this.overlayRef = this.overlay.create(config);
+        const tempRef = new ComponentPortal(TzDrpContainerComponent, this.viewContainerRef, Injector.create({
+            providers: [
+                {
+                    provide: CONTAINER_DATA,
+                    useValue: {
+                        messages: this.dateMessages,
+                        dates: this.control?.control.value || this.dates,
+                        dpConfig: this.dpConfig,
+                        datesDisabled: this.dpDisabledDates,
+                        selectedRangeLabel: this.selectedRangeLabel,
+                        dateChange: this.applyDate.bind(this),
+                        close: this.close.bind(this)
+                    }
+                }
+            ]
+        }));
+        this.overlayRef.attach(tempRef);
+        this.overlayRef
+            .backdropClick()
+            .pipe(take(1))
+            .subscribe(() => {
+            this.close();
+        });
+    }
+    applyDate(dates) {
+        // If selectedRangeLabel is present in the date object, keep it, otherwise it's a custom range
+        const result = {
+            ...dates,
+            selectedRangeLabel: dates['selectedRangeLabel'] || 'Custom Range'
+        };
+        this.dateChange.emit(result);
+        this.control?.control.patchValue(result);
+        this.dates = result;
+        this.close();
+    }
+    close() {
+        this.isOpen = false;
+        this.overlayRef.detach();
+        this.overlayRef.dispose();
+    }
+    static { this.ɵfac = function TzDaterangepickerDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TzDaterangepickerDirective)(i0.ɵɵdirectiveInject(i1$1.NgControl, 10), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i2$1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TzDaterangepickerDirective, selectors: [["input", "misTzDrp", ""]], hostBindings: function TzDaterangepickerDirective_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function TzDaterangepickerDirective_click_HostBindingHandler() { return ctx.toggleDatePicker(); })("keydown.enter", function TzDaterangepickerDirective_keydown_enter_HostBindingHandler() { return ctx.toggleDatePickerOnEnter(); })("keydown.esc", function TzDaterangepickerDirective_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
+        } }, inputs: { dpConfig: "dpConfig", selectedDates: "selectedDates", datesDisabled: "datesDisabled", selectedRangeLabel: "selectedRangeLabel", dateMessages: "dateMessages", positionX: "positionX", positionY: "positionY", offsetX: "offsetX", offsetY: "offsetY" }, outputs: { dateChange: "dateChange" } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDaterangepickerDirective, [{
+        type: Directive,
+        args: [{
+                selector: "input[misTzDrp]"
+            }]
+    }], () => [{ type: i1$1.NgControl, decorators: [{
+                type: Self
+            }, {
+                type: Optional
+            }] }, { type: i0.ElementRef }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }], { dpConfig: [{
+            type: Input
+        }], selectedDates: [{
+            type: Input
+        }], datesDisabled: [{
+            type: Input
+        }], selectedRangeLabel: [{
+            type: Input
+        }], dateMessages: [{
+            type: Input
+        }], positionX: [{
+            type: Input
+        }], positionY: [{
+            type: Input
+        }], offsetX: [{
+            type: Input
+        }], offsetY: [{
+            type: Input
+        }], dateChange: [{
+            type: Output
+        }], toggleDatePicker: [{
+            type: HostListener,
+            args: ["click"]
+        }], toggleDatePickerOnEnter: [{
+            type: HostListener,
+            args: ["keydown.enter"]
+        }], closeOnEsc: [{
+            type: HostListener,
+            args: ["keydown.esc"]
+        }] }); })();
+
+class DateRangepickerModuleV2 {
+    static { this.ɵfac = function DateRangepickerModuleV2_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DateRangepickerModuleV2)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: DateRangepickerModuleV2 }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, OverlayModule, ToastModule.forRoot(), ButtonModule.forRoot(), A11yModule] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateRangepickerModuleV2, [{
+        type: NgModule,
+        args: [{
+                declarations: [TzDrpContainerComponent, TzDaterangepickerDirective],
+                imports: [CommonModule, OverlayModule, ToastModule.forRoot(), ButtonModule.forRoot(), A11yModule],
+                exports: [TzDrpContainerComponent, TzDaterangepickerDirective]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DateRangepickerModuleV2, { declarations: [TzDrpContainerComponent, TzDaterangepickerDirective], imports: [CommonModule, OverlayModule, i1.ToastModule, i3.ButtonModule, A11yModule], exports: [TzDrpContainerComponent, TzDaterangepickerDirective] }); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DateRangepickerModuleV2, TzDaterangepickerDirective, TzDrpContainerComponent };
+//# sourceMappingURL=mis-crystal-design-system-daterangepicker_v2.mjs.map