mis-crystal-design-system 4.0.51 → 17.0.0

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

@@ -0,0 +1,568 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Component, Inject, EventEmitter, Injector, Directive, Self, Optional, Input, Output, HostListener, NgModule } from '@angular/core';
+import { tz, parseZone } from 'moment-timezone';
+import * as moment from 'moment';
+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 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 = (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_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const weekDay_r1 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(weekDay_r1.label);
+} }
+function TzDrpContainerComponent_div_17_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", day_r3.date, " ");
+} }
+function TzDrpContainerComponent_div_17_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵlistener("click", function TzDrpContainerComponent_div_17_Template_div_click_0_listener() { const day_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDay("LEFT", day_r3)); });
+    i0.ɵɵtemplate(1, TzDrpContainerComponent_div_17_span_1_Template, 2, 1, "span", 20);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r3 = ctx.$implicit;
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(2, _c1, day_r3.isSelectedStartDay && day_r3.isSelectedEndDay, day_r3.isSelectedStartDay, day_r3.isSelectedEndDay, day_r3.isDisabledDay, day_r3.inRangeDay, day_r3.date > 0 && !(day_r3.isSelectedStartDay && day_r3.isSelectedEndDay)));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", day_r3.date > 0);
+} }
+function TzDrpContainerComponent_div_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(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_30_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", day_r7.date, " ");
+} }
+function TzDrpContainerComponent_div_30_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵlistener("click", function TzDrpContainerComponent_div_30_Template_div_click_0_listener() { const day_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.selectDay("RIGHT", day_r7)); });
+    i0.ɵɵtemplate(1, TzDrpContainerComponent_div_30_span_1_Template, 2, 1, "span", 20);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r7 = ctx.$implicit;
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction6(2, _c1, 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);
+} }
+class TzDrpContainerComponent {
+    constructor(data, toast) {
+        this.toast = toast;
+        this.parseZoneInstance = (...args) => {
+            return tz(args[0], args[1], this.data.dpConfig.timezone);
+        };
+        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.data = data;
+        this.localSelectedDates = this.data.dates;
+        this.isDatesValid = false;
+        if (this.localSelectedDates.startDate && this.localSelectedDates.endDate) {
+            this.isDatesValid = true;
+        }
+        if (this.data?.dpConfig?.timezone) {
+            this.parseZoneInstance = (...args) => {
+                return tz(args[0], args[1], this.data.dpConfig.timezone);
+            };
+        }
+        this.currentMonthNumber = this.parseZoneInstance().month();
+        this.nextMonthNumber = this.parseZoneInstance().add(1, "month").month();
+        this.currentMonth = getMonth(this.currentMonthNumber);
+        this.nextMonth = getMonth(this.nextMonthNumber);
+        this.currentYearNumber = this.parseZoneInstance().year();
+        this.nextYearNumber = this.parseZoneInstance().add(1, "month").year();
+        this.weekDays = this.rawWeekDays.map((day, index) => ({
+            label: `${day[0]}${day.slice(1).toLowerCase()}`,
+            isCurrentDay: this.parseZoneInstance().day() === index
+        }));
+        if (!this.data?.dpConfig?.format) {
+            this.data.dpConfig = {
+                ...this.data.dpConfig,
+                format: DATE_FORMAT
+            };
+        }
+    }
+    ngOnInit() {
+        this.currentDateInstance();
+        this.calculateMinMaxDays();
+    }
+    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.parseZoneInstance(this.localSelectedDates?.startDate, this.data.dpConfig.format);
+        if (selectedStartDate.isValid()) {
+            this.currentYearNumber = selectedStartDate.year();
+            this.nextYearNumber = selectedStartDate.add(1, "month").year();
+            this.currentMonthNumber = selectedStartDate.get("month") - 1;
+            this.nextMonthNumber = selectedStartDate.add(1, "month").month() - 1;
+            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.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
+        const minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);
+        if (minDate.isValid()) {
+            this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, "month");
+        }
+        const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);
+        if (maxDate.isValid()) {
+            this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
+        }
+    }
+    navigateMonth(direction) {
+        let thisMonth = parseZone().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 = parseZone().year(currentYearNumber).month(month).daysInMonth();
+        for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
+            const date = moment().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.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);
+            if (!isDisabledDay && minDate.isValid()) {
+                let Date = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate);
+                isDisabledDay = minDate.isAfter(Date, "day");
+            }
+            const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);
+            if (!isDisabledDay && maxDate.isValid()) {
+                isDisabledDay = maxDate.isBefore(date, "day");
+            }
+            const isCurrentDay = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
+                this.parseZoneInstance().format(this.data.dpConfig.format);
+            const isSelectedStartDay = !isDisabledDay &&
+                (this.localSelectedDates?.startDate ?? false) &&
+                date.format(this.data.dpConfig.format) === this.localSelectedDates?.startDate;
+            const isAfterSelectedStartDate = moment(date, this.data?.dpConfig?.format).startOf('day').isAfter(moment(this.localSelectedDates.startDate, this.data?.dpConfig?.format).startOf('day'), 'day');
+            const isBeforeSelectedEndDate = moment(date, this.data?.dpConfig?.format).startOf('day').isBefore(moment(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) {
+            if (this.selectionStarted) {
+                const momentDay = parseZone()
+                    .year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
+                    .month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
+                    .date(day.date);
+                if (momentDay.isBefore(this.localSelectedDates.startDate, "day")) {
+                    this.localSelectedDates = {
+                        startDate: momentDay.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.localSelectedDates = {
+                    ...this.localSelectedDates,
+                    endDate: momentDay.format(this.data.dpConfig.format)
+                };
+            }
+            else {
+                this.selectionStarted = true;
+                this.localSelectedDates = {
+                    startDate: parseZone()
+                        .year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
+                        .month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
+                        .date(day.date)
+                        .format(this.data.dpConfig.format),
+                    endDate: null
+                };
+            }
+            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);
+        }
+    }
+    applyDates() {
+        this.data.dateChange(this.localSelectedDates);
+    }
+    cancelDatePicker() {
+        this.data.close();
+    }
+    static { this.ɵfac = function TzDrpContainerComponent_Factory(t) { return new (t || TzDrpContainerComponent)(i0.ɵɵdirectiveInject(CONTAINER_DATA), i0.ɵɵdirectiveInject(i1.ToastService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzDrpContainerComponent, selectors: [["mis-tz-drp"]], decls: 36, vars: 18, consts: [[1, "daterangepicker-container"], [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__arrow__icon", "mobile_view", 3, "click", "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", 4, "ngFor", "ngForOf"], [1, "datepicker__right"], [1, "daterangepicker-container__arrow__icon", "pc_view", 3, "click", "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__weekday"], [1, "daterangepicker-container__day", 3, "click", "ngClass"], [4, "ngIf"]], template: function TzDrpContainerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_4_listener() { return !ctx.isPreviousMonthDisabled && ctx.navigateMonth("PREVIOUS"); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(5, "svg", 5);
+            i0.ɵɵelement(6, "path", 6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(7, "span");
+            i0.ɵɵtext(8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(9, "div");
+            i0.ɵɵelementStart(10, "div", 7);
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_10_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(11, "svg", 5);
+            i0.ɵɵelement(12, "path", 6);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(13, "div", 8)(14, "div", 9);
+            i0.ɵɵtemplate(15, TzDrpContainerComponent_div_15_Template, 3, 1, "div", 10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "div", 11);
+            i0.ɵɵtemplate(17, TzDrpContainerComponent_div_17_Template, 2, 9, "div", 12);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(18, "div", 13)(19, "div", 3);
+            i0.ɵɵelement(20, "div");
+            i0.ɵɵelementStart(21, "span");
+            i0.ɵɵtext(22);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(23, "div", 14);
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_div_click_23_listener() { return !ctx.isNextMonthDisabled && ctx.navigateMonth("NEXT"); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(24, "svg", 5);
+            i0.ɵɵelement(25, "path", 6);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(26, "div", 8)(27, "div", 9);
+            i0.ɵɵtemplate(28, TzDrpContainerComponent_div_28_Template, 3, 1, "div", 10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(29, "div", 11);
+            i0.ɵɵtemplate(30, TzDrpContainerComponent_div_30_Template, 2, 9, "div", 12);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(31, "div", 15)(32, "button", 16);
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_button_click_32_listener() { return ctx.cancelDatePicker(); });
+            i0.ɵɵtext(33, "Cancel");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(34, "button", 17);
+            i0.ɵɵlistener("click", function TzDrpContainerComponent_Template_button_click_34_listener() { return ctx.applyDates(); });
+            i0.ɵɵtext(35, "Apply");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c0, ctx.isPreviousMonthDisabled));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate2(" ", ctx.currentMonth, " ", ctx.currentYearNumber, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _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(16, _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], 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}@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:4.4vw}}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
+        type: Component,
+        args: [{ selector: "mis-tz-drp", template: "<div class=\"daterangepicker-container\">\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        <!-- Button visible in mobile view -->\n        <div\n          class=\"daterangepicker-container__arrow__icon mobile_view\"\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-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          >\n            <span *ngIf=\"day.date > 0\">\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          (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-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          >\n            <span *ngIf=\"day.date > 0\">\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}@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:4.4vw}}\n"] }]
+    }], () => [{ type: undefined, decorators: [{
+                type: Inject,
+                args: [CONTAINER_DATA]
+            }] }, { type: i1.ToastService }], null); })();
+(() => { (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: ""
+        };
+        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();
+        }
+    }
+    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,
+                        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) {
+        this.dateChange.emit(dates);
+        this.control?.control.patchValue(dates);
+        this.dates = dates;
+        this.close();
+    }
+    close() {
+        this.isOpen = false;
+        this.overlayRef.detach();
+        this.overlayRef.dispose();
+    }
+    static { this.ɵfac = function TzDaterangepickerDirective_Factory(t) { return new (t || 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(); });
+        } }, inputs: { dpConfig: "dpConfig", selectedDates: "selectedDates", datesDisabled: "datesDisabled", 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
+        }], dateMessages: [{
+            type: Input
+        }], positionX: [{
+            type: Input
+        }], positionY: [{
+            type: Input
+        }], offsetX: [{
+            type: Input
+        }], offsetY: [{
+            type: Input
+        }], dateChange: [{
+            type: Output
+        }], toggleDatePicker: [{
+            type: HostListener,
+            args: ["click"]
+        }] }); })();
+
+class DateRangepickerModuleV2 {
+    static { this.ɵfac = function DateRangepickerModuleV2_Factory(t) { return new (t || DateRangepickerModuleV2)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: DateRangepickerModuleV2 }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, OverlayModule, ToastModule.forRoot(), ButtonModule.forRoot()] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateRangepickerModuleV2, [{
+        type: NgModule,
+        args: [{
+                declarations: [TzDrpContainerComponent, TzDaterangepickerDirective],
+                imports: [CommonModule, OverlayModule, ToastModule.forRoot(), ButtonModule.forRoot()],
+                exports: [TzDrpContainerComponent, TzDaterangepickerDirective]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DateRangepickerModuleV2, { declarations: [TzDrpContainerComponent, TzDaterangepickerDirective], imports: [CommonModule, OverlayModule, i1.ToastModule, i3.ButtonModule], exports: [TzDrpContainerComponent, TzDaterangepickerDirective] }); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DateRangepickerModuleV2, TzDaterangepickerDirective, TzDrpContainerComponent };
+//# sourceMappingURL=mis-crystal-design-system-daterangepicker_v2.mjs.map