mis-crystal-design-system 18.0.3 → 18.0.5

package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs

@@ -0,0 +1,751 @@
+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 * 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;
+};
+
+function TzDpContainerComponent_div_6_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r8 = i0.ɵɵgetCurrentView();
+        i0.ɵɵnamespaceSVG();
+        i0.ɵɵnamespaceHTML();
+        i0.ɵɵelementStart(0, "div", 15);
+        i0.ɵɵlistener("click", function TzDpContainerComponent_div_6_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.toggleMonthSelector()); });
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", ctx_r0.isYearSelectionFlow ? ctx_r0.selectedYear : ctx_r0.availableMonths[ctx_r0.currentMonthNumber], " ");
+    }
+}
+function TzDpContainerComponent_div_7_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r10 = i0.ɵɵgetCurrentView();
+        i0.ɵɵnamespaceSVG();
+        i0.ɵɵnamespaceHTML();
+        i0.ɵɵelementStart(0, "div", 16);
+        i0.ɵɵlistener("click", function TzDpContainerComponent_div_7_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.toggleYearSelector()); });
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r1 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", ctx_r1.isSelectingYear ? ctx_r1.yearRange : ctx_r1.currentYearNumber, " ");
+    }
+}
+const _c0 = function (a0, a1) { return { "disable-month": a0, "select-month": a1 }; };
+function TzDpContainerComponent_div_12_div_2_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r15 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 20);
+        i0.ɵɵlistener("click", function TzDpContainerComponent_div_12_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r15); const i_r13 = restoredCtx.index; const month_r12 = restoredCtx.$implicit; const ctx_r14 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(!ctx_r14.disabledMonths[i_r13] && ctx_r14.selectMonth(month_r12)); });
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const month_r12 = ctx.$implicit;
+        const i_r13 = ctx.index;
+        const ctx_r11 = i0.ɵɵnextContext(2);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c0, ctx_r11.disabledMonths[i_r13], !ctx_r11.disabledMonths[ctx_r11.currentMonthNumber] && month_r12 === ctx_r11.availableMonths[ctx_r11.currentMonthNumber]));
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", month_r12, " ");
+    }
+}
+function TzDpContainerComponent_div_12_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 17)(1, "div", 18);
+        i0.ɵɵtemplate(2, TzDpContainerComponent_div_12_div_2_Template, 2, 5, "div", 19);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r2 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", ctx_r2.availableMonths);
+    }
+}
+const _c1 = function (a0, a1) { return { "disable-year": a0, "select-year": a1 }; };
+function TzDpContainerComponent_div_13_div_2_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r20 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 23);
+        i0.ɵɵlistener("click", function TzDpContainerComponent_div_13_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r20); const i_r18 = restoredCtx.index; const year_r17 = restoredCtx.$implicit; const ctx_r19 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(!ctx_r19.disabledYears[i_r18] && ctx_r19.selectYear(year_r17)); });
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const year_r17 = ctx.$implicit;
+        const i_r18 = ctx.index;
+        const ctx_r16 = i0.ɵɵnextContext(2);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c1, ctx_r16.disabledYears[i_r18], year_r17 === ctx_r16.currentYearNumber));
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", year_r17, " ");
+    }
+}
+function TzDpContainerComponent_div_13_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 21)(1, "div", 18);
+        i0.ɵɵtemplate(2, TzDpContainerComponent_div_13_div_2_Template, 2, 5, "div", 22);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r3 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", ctx_r3.availableYears);
+    }
+}
+const _c2 = function (a0) { return { "current-day": a0 }; };
+function TzDpContainerComponent_div_14_div_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 26)(1, "span", 27);
+        i0.ɵɵtext(2);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const weekDay_r22 = ctx.$implicit;
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c2, weekDay_r22.isCurrentDay));
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(weekDay_r22.label);
+    }
+}
+function TzDpContainerComponent_div_14_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 24);
+        i0.ɵɵtemplate(1, TzDpContainerComponent_div_14_div_1_Template, 3, 4, "div", 25);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r4 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r4.weekDays);
+    }
+}
+const _c3 = function (a0, a1, a2) { return { "current-day": a0, "selected-day": a1, "disabled-day": a2 }; };
+function TzDpContainerComponent_div_15_div_1_span_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span", 32);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const day_r24 = i0.ɵɵnextContext().$implicit;
+        const ctx_r25 = i0.ɵɵnextContext(2);
+        i0.ɵɵproperty("tabindex", day_r24.isDisabledDay ? -1 : 0)("ngClass", i0.ɵɵpureFunction3(4, _c3, day_r24.isCurrentDay, !ctx_r25.localSelectedDate ? day_r24.isSelectedDay : day_r24 === ctx_r25.localSelectedDate, day_r24.isDisabledDay));
+        i0.ɵɵattribute("aria-label", ctx_r25.retractDayMonth(day_r24.date, ctx_r25.currentMonth, ctx_r25.currentYearNumber));
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", day_r24.date, " ");
+    }
+}
+const _c4 = function (a0, a1, a2) { return { "selected-day": a0, "disabled-day": a1, "is-valid-date": a2 }; };
+function TzDpContainerComponent_div_15_div_1_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r28 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 30);
+        i0.ɵɵlistener("click", function TzDpContainerComponent_div_15_div_1_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r28); const day_r24 = restoredCtx.$implicit; const ctx_r27 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r27.selectDay(day_r24)); })("keyup.enter", function TzDpContainerComponent_div_15_div_1_Template_div_keyup_enter_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r28); const day_r24 = restoredCtx.$implicit; const ctx_r29 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r29.selectDay(day_r24)); });
+        i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_div_1_span_1_Template, 2, 8, "span", 31);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const day_r24 = ctx.$implicit;
+        const ctx_r23 = i0.ɵɵnextContext(2);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(2, _c4, !ctx_r23.localSelectedDate ? day_r24.isSelectedDay : day_r24 === ctx_r23.localSelectedDate, day_r24.isDisabledDay, day_r24.date > 0 && !day_r24.isSelectedDay));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", day_r24.date > 0);
+    }
+}
+function TzDpContainerComponent_div_15_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 28);
+        i0.ɵɵtemplate(1, TzDpContainerComponent_div_15_div_1_Template, 2, 6, "div", 29);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r5 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r5.currentMonthDates);
+    }
+}
+function TzDpContainerComponent_div_16_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r31 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 33)(1, "button", 34);
+        i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r31); const ctx_r30 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r30.cancelDatePicker()); });
+        i0.ɵɵtext(2, "Cancel");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "button", 35);
+        i0.ɵɵlistener("click", function TzDpContainerComponent_div_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r31); const ctx_r32 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r32.applyDate()); });
+        i0.ɵɵtext(4, "Apply");
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const ctx_r6 = i0.ɵɵnextContext();
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("disabled", !(ctx_r6.data.date || ctx_r6.localSelectedDate.date));
+    }
+}
+const _c5 = function (a0) { return { "disabled-month": a0 }; };
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+class TzDpContainerComponent {
+    constructor(data, toast) {
+        var _a, _b, _c, _d, _e;
+        this.toast = toast;
+        this.parseZoneInstance = (...args) => {
+            return dayjs(...args);
+        };
+        this.rawWeekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+        this.weekDays = [];
+        this.currentMonthDates = [];
+        this.isPreviousMonthDisabled = false;
+        this.isNextMonthDisabled = false;
+        this.allowBookingOnDisabledDay = false;
+        this.isSelectingMonth = false;
+        this.isSelectingYear = false;
+        this.availableYears = [];
+        this.availableMonths = [];
+        this.disabledMonths = [];
+        this.disabledYears = [];
+        this.isYearSelectionFlow = false;
+        this.data = data;
+        if ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.dpConfig) === null || _b === void 0 ? void 0 : _b.timezone) {
+            this.parseZoneInstance = (...args) => {
+                return tz(args[0], args[1] || 'DD/MM/YYYY', this.data.dpConfig.timezone);
+            };
+        }
+        this.currentMonthNumber = this.parseZoneInstance().month();
+        this.currentMonth = getMonth(this.currentMonthNumber);
+        this.currentYearNumber = this.parseZoneInstance().year();
+        this.weekDays = this.rawWeekDays.map((day, index) => ({
+            label: `${day[0]}${day.slice(1).toLowerCase()}`,
+            isCurrentDay: this.parseZoneInstance().day() === index
+        }));
+        if (!((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.dpConfig) === null || _d === void 0 ? void 0 : _d.format)) {
+            this.data.dpConfig = Object.assign(Object.assign({}, this.data.dpConfig), { format: DATE_FORMAT });
+        }
+        if (!((_e = this.data) === null || _e === void 0 ? void 0 : _e.date)) {
+            this.data.date = this.parseZoneInstance().format(this.data.dpConfig.format);
+        }
+        this.availableMonths = Array.from({ length: 12 }, (_, i) => dayjs().month(i).format('MMMM'));
+        this.availableYears = Array.from({ length: 12 }, (_, index) => this.currentYearNumber - 6 + index);
+    }
+    retractDayMonth(day, month, year) {
+        return `${day} ${month} ${year}`;
+    }
+    ngOnInit() {
+        this.currentDateInstance();
+        this.calculateMinMaxDays();
+        this.calculateDisabledMonthsAndYears();
+    }
+    currentDateInstance() {
+        const selectedDate = dayjs(this.data.date, this.data.dpConfig.format);
+        if (selectedDate.isValid()) {
+            this.selectedYear = this.currentYearNumber = selectedDate.year();
+            this.currentMonthNumber = selectedDate.month();
+            this.currentMonth = getMonth(this.currentMonthNumber);
+        }
+        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+    }
+    calculateMinMaxDays() {
+        const currentInstance = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
+        const minDate = !!this.data.dpConfig.minDate ? this.parseZoneInstance(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.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
+        if (maxDate.isValid()) {
+            this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
+        }
+    }
+    calculateDisabledMonthsAndYears() {
+        const minDate = !!this.data.dpConfig.minDate ? this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
+        const maxDate = !!this.data.dpConfig.maxDate ? this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
+        this.disabledMonths = this.availableMonths.map((month, index) => {
+            const monthDate = this.parseZoneInstance().year(this.selectedYear).month(index);
+            return (minDate.isValid() && monthDate.isBefore(minDate, 'month')) ||
+                (maxDate.isValid() && monthDate.isAfter(maxDate, 'month'));
+        });
+        this.disabledYears = this.availableYears.map((year) => {
+            const yearDate = this.parseZoneInstance().year(year);
+            return (minDate.isValid() && yearDate.isBefore(minDate, 'year')) ||
+                (maxDate.isValid() && yearDate.isAfter(maxDate, 'year'));
+        });
+        if (this.isSelectingYear) {
+            this.isPreviousMonthDisabled = minDate.isValid() && ((this.selectedYear - 6) <= minDate.year());
+            this.isNextMonthDisabled = maxDate.isValid() && ((this.selectedYear + 5) >= maxDate.year());
+        }
+    }
+    get yearRange() {
+        return `${this.selectedYear - 6} - ${this.selectedYear + 5}`;
+    }
+    navigateView(direction) {
+        if ((direction === 'NEXT' && (this.isNextMonthDisabled || this.isSelectingMonth)) ||
+            (direction === 'PREVIOUS' && (this.isPreviousMonthDisabled || this.isSelectingMonth))) {
+            return;
+        }
+        if (this.isSelectingYear) {
+            this.selectedYear += direction === "NEXT" ? 12 : -12;
+            this.availableYears = Array.from({ length: 12 }, (_, index) => this.selectedYear - 6 + index);
+        }
+        else {
+            let thisMonth = dayjs().year(this.currentYearNumber).month(this.currentMonthNumber);
+            thisMonth = direction === "NEXT" ? thisMonth.add(1, "month") : thisMonth.subtract(1, "month");
+            this.currentMonthNumber = thisMonth.month();
+            this.currentMonth = getMonth(this.currentMonthNumber);
+            this.selectedYear = this.currentYearNumber = thisMonth.year();
+            this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+        }
+        this.calculateMinMaxDays();
+        this.calculateDisabledMonthsAndYears();
+    }
+    generateDates(month, currentYearNumber) {
+        var _a;
+        let dates = [];
+        const daysInMonth = dayjs().year(currentYearNumber).month(month).daysInMonth();
+        for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
+            const date = this.parseZoneInstance().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.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
+            if (!isDisabledDay && minDate.isValid()) {
+                isDisabledDay = minDate.isAfter(date, "day");
+            }
+            const maxDate = !!this.data.dpConfig.maxDate ? this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
+            if (!isDisabledDay && maxDate.isValid()) {
+                isDisabledDay = maxDate.isBefore(date, "day");
+            }
+            dates.push({
+                date: currentDate,
+                weekDay: date.day(),
+                isCurrentDay: this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
+                    this.parseZoneInstance().format(this.data.dpConfig.format),
+                isSelectedDay: !isDisabledDay && date.format(this.data.dpConfig.format) === this.data.date,
+                toastMessage: ((_a = this.data.messages.find(q => date.format(this.data.dpConfig.format) === q.date)) === null || _a === void 0 ? void 0 : _a.message) || "",
+                isDisabledDay
+            });
+        }
+        for (let i = dates[0].weekDay; i > 0; i--) {
+            dates.unshift({ date: 0, weekDay: i - 1 });
+        }
+        return dates;
+    }
+    selectDay(day) {
+        this.currentSelection = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber).date(day.date);
+        const maxDate = !!this.data.dpConfig.maxDate ? this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format).endOf("day") : dayjs('invalid');
+        const minDate = !!this.data.dpConfig.maxDate ? this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format).startOf("day") : dayjs('invalid');
+        this.allowBookingOnDisabledDay = this.data.allowBookingOnDisabledDay;
+        if (day.date <= 0)
+            return;
+        if ((this.currentSelection.isSameOrAfter(minDate) && this.currentSelection.isSameOrBefore(maxDate) && this.allowBookingOnDisabledDay) || (!day.isDisabledDay && !this.allowBookingOnDisabledDay)) {
+            this.localSelectedDate = day;
+            if (!this.data.dpConfig.showApplyButton) {
+                this.applyDate(day);
+            }
+        }
+        if (day.toastMessage || (this.allowBookingOnDisabledDay && day.toastMessage)) {
+            this.toast.displayMsg(day.toastMessage, 4000);
+        }
+    }
+    applyDate(day) {
+        if (day || this.localSelectedDate) {
+            this.data.dateChange(dayjs()
+                .year(this.currentYearNumber)
+                .month(this.currentMonthNumber)
+                .date(day ? day.date : this.localSelectedDate.date)
+                .format(this.data.dpConfig.format));
+        }
+        else {
+            this.cancelDatePicker();
+        }
+    }
+    closeOnEsc() {
+        this.cancelDatePicker();
+    }
+    cancelDatePicker() {
+        this.data.dateChange("");
+    }
+    toggleMonthSelector() {
+        if (this.isYearSelectionFlow)
+            return;
+        this.isSelectingMonth = !this.isSelectingMonth;
+        this.isSelectingYear = false;
+        this.calculateDisabledMonthsAndYears();
+    }
+    toggleYearSelector() {
+        this.isSelectingYear = !this.isSelectingYear;
+        this.selectedYear = this.currentYearNumber;
+        this.availableYears = Array.from({ length: 12 }, (_, index) => this.selectedYear - 6 + index);
+        this.isSelectingMonth = false;
+        this.calculateDisabledMonthsAndYears();
+    }
+    resetDateSelection() {
+        this.localSelectedDate = {
+            date: 0,
+            weekDay: 0,
+            isCurrentDay: false,
+            isSelectedDay: false,
+            isDisabledDay: false,
+            toastMessage: ''
+        };
+        this.data.date = '';
+    }
+    selectMonth(month) {
+        this.currentMonthNumber = this.availableMonths.indexOf(month);
+        this.currentMonth = getMonth(this.currentMonthNumber);
+        this.isSelectingMonth = false;
+        this.isYearSelectionFlow = false;
+        this.resetDateSelection();
+        this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
+        this.calculateMinMaxDays();
+    }
+    selectYear(year) {
+        this.selectedYear = this.currentYearNumber = year;
+        this.isSelectingYear = false;
+        this.isSelectingMonth = true;
+        this.isYearSelectionFlow = true;
+        this.resetDateSelection();
+        this.calculateDisabledMonthsAndYears();
+    }
+}
+TzDpContainerComponent.ɵfac = function TzDpContainerComponent_Factory(t) { return new (t || TzDpContainerComponent)(i0.ɵɵdirectiveInject(CONTAINER_DATA), i0.ɵɵdirectiveInject(i1.ToastService)); };
+TzDpContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzDpContainerComponent, selectors: [["mis-tz-dp"]], hostBindings: function TzDpContainerComponent_HostBindings(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵlistener("keydown.esc", function TzDpContainerComponent_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
+        }
+    }, decls: 17, vars: 15, consts: [["aria-label", "date picker", "cdkTrapFocus", "", 1, "datepicker-container", 3, "ngClass", "cdkTrapFocusAutoCapture"], ["tabindex", "-1", "cdkFocusInitial", ""], [1, "datepicker-container__header"], ["tabindex", "0", "aria-label", "Previous Month", 1, "datepicker-container__arrow__icon", 3, "ngClass", "click", "keyup.enter"], ["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"], ["class", "month-header", 3, "click", 4, "ngIf"], ["class", "year-header", 3, "click", 4, "ngIf"], ["tabindex", "0", "aria-label", "Next Month", 1, "datepicker-container__arrow__icon", 3, "ngClass", "click", "keyup.enter"], [1, "datepicker-container__body"], ["class", "month-selector", 4, "ngIf"], ["class", "year-selector", 4, "ngIf"], ["class", "datepicker-container__weekdays", 4, "ngIf"], ["class", "datepicker-container__days", 4, "ngIf"], ["class", "datepicker-container__footer", 4, "ngIf"], [1, "month-header", 3, "click"], [1, "year-header", 3, "click"], [1, "month-selector"], [1, "row"], ["class", "month", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "month", 3, "ngClass", "click"], [1, "year-selector"], ["class", "year", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "year", 3, "ngClass", "click"], [1, "datepicker-container__weekdays"], ["class", "datepicker-container__weekday", 4, "ngFor", "ngForOf"], [1, "datepicker-container__weekday"], [3, "ngClass"], [1, "datepicker-container__days"], ["class", "datepicker-container__day", 3, "ngClass", "click", "keyup.enter", 4, "ngFor", "ngForOf"], [1, "datepicker-container__day", 3, "ngClass", "click", "keyup.enter"], [3, "tabindex", "ngClass", 4, "ngIf"], [3, "tabindex", "ngClass"], [1, "datepicker-container__footer"], ["mis-button", "", "size", "md", "type", "'none'", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "disabled", "click"]], template: function TzDpContainerComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
+            i0.ɵɵlistener("click", function TzDpContainerComponent_Template_div_click_3_listener() { return ctx.navigateView("PREVIOUS"); })("keyup.enter", function TzDpContainerComponent_Template_div_keyup_enter_3_listener() { return ctx.navigateView("PREVIOUS"); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(4, "svg", 4);
+            i0.ɵɵelement(5, "path", 5);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(6, TzDpContainerComponent_div_6_Template, 2, 1, "div", 6);
+            i0.ɵɵtemplate(7, TzDpContainerComponent_div_7_Template, 2, 1, "div", 7);
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(8, "div", 8);
+            i0.ɵɵlistener("click", function TzDpContainerComponent_Template_div_click_8_listener() { return ctx.navigateView("NEXT"); })("keyup.enter", function TzDpContainerComponent_Template_div_keyup_enter_8_listener() { return ctx.navigateView("NEXT"); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(9, "svg", 4);
+            i0.ɵɵelement(10, "path", 5);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(11, "div", 9);
+            i0.ɵɵtemplate(12, TzDpContainerComponent_div_12_Template, 3, 1, "div", 10);
+            i0.ɵɵtemplate(13, TzDpContainerComponent_div_13_Template, 3, 1, "div", 11);
+            i0.ɵɵtemplate(14, TzDpContainerComponent_div_14_Template, 2, 1, "div", 12);
+            i0.ɵɵtemplate(15, TzDpContainerComponent_div_15_Template, 2, 1, "div", 13);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(16, TzDpContainerComponent_div_16_Template, 5, 1, "div", 14);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("ngClass", ctx.data.disableBoxShadow ? "remove-box-shadow" : "")("cdkTrapFocusAutoCapture", true);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c5, ctx.isPreviousMonthDisabled || ctx.isSelectingMonth));
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", !ctx.isSelectingYear);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c5, ctx.isNextMonthDisabled || ctx.isSelectingMonth));
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngIf", ctx.isSelectingMonth && !ctx.isSelectingYear);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.isSelectingYear && !ctx.isSelectingMonth);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth && !ctx.isSelectingYear);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.isSelectingMonth && !ctx.isSelectingYear);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", ctx.data.dpConfig.showApplyButton);
+        }
+    }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.ButtonDirective, i4.CdkTrapFocus], styles: [".h1[_ngcontent-%COMP%]{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2[_ngcontent-%COMP%]{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3[_ngcontent-%COMP%]{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4[_ngcontent-%COMP%]{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b[_ngcontent-%COMP%]{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5[_ngcontent-%COMP%]{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b[_ngcontent-%COMP%]{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .year[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b[_ngcontent-%COMP%]{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8[_ngcontent-%COMP%]{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9[_ngcontent-%COMP%]{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1[_ngcontent-%COMP%]{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}[_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}.datepicker-container[_ngcontent-%COMP%]{background:#ffffff;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;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .month-header[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .year-header[_ngcontent-%COMP%]{padding:8px;border-radius:10px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .month-header[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .year-header[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:#e6ebf7}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__header[_ngcontent-%COMP%]   .datepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]{width:258px;height:100%;margin:0 16px 16px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .row[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .year[_ngcontent-%COMP%]{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:#fff}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .year[_ngcontent-%COMP%]:hover{background-color:#cbddfb}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-year[_ngcontent-%COMP%]{cursor:default;color:#c8cdd3}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .disable-year[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-month[_ngcontent-%COMP%], .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-year[_ngcontent-%COMP%]{background-color:#0937b2;color:#fff}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-month[_ngcontent-%COMP%]:hover, .datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .select-year[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:#cbddfb}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]   .datepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]   .datepicker-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:#c7c7c7}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__weekdays[_ngcontent-%COMP%]   .datepicker-container__weekday[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#181f33}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.selected-day[_ngcontent-%COMP%]{background-color:#0937b2;cursor:pointer}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover{background-color:#cbddfb;cursor:pointer}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-day):hover   span.selected-day[_ngcontent-%COMP%]{color:#181f33!important}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-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}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]   span.selected-day[_ngcontent-%COMP%]{color:#fff}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__body[_ngcontent-%COMP%]   .datepicker-container__days[_ngcontent-%COMP%]   .datepicker-container__day[_ngcontent-%COMP%]   span.disabled-day[_ngcontent-%COMP%]{color:#c7c7c7}.datepicker-container[_ngcontent-%COMP%]   .datepicker-container__footer[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid #e0e0e0}.remove-box-shadow[_ngcontent-%COMP%]{box-shadow:none!important;border:none!important;border-radius:0!important}"] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDpContainerComponent, [{
+            type: Component,
+            args: [{ selector: "mis-tz-dp", template: "<div class=\"datepicker-container\" [ngClass]=\"data.disableBoxShadow?'remove-box-shadow':''\" aria-label=\"date picker\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n  <div tabindex=\"-1\" cdkFocusInitial></div>\n  <div class=\"datepicker-container__header\">\n    <div\n      class=\"datepicker-container__arrow__icon\"\n      (click)=\"navigateView('PREVIOUS')\"\n      tabindex=\"0\"\n      aria-label=\"Previous Month\"\n      (keyup.enter)=\"navigateView('PREVIOUS')\"\n      [ngClass]=\"{\n        'disabled-month': isPreviousMonthDisabled || isSelectingMonth\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\n    <div *ngIf=\"!isSelectingYear\" (click)=\"toggleMonthSelector()\" class=\"month-header\">\n      {{ isYearSelectionFlow ? selectedYear : availableMonths[currentMonthNumber] }}\n    </div>\n    <div *ngIf=\"!isSelectingMonth\" (click)=\"toggleYearSelector()\" class=\"year-header\">\n      {{ isSelectingYear ? yearRange : currentYearNumber }}\n    </div>\n\n\n    <div\n      class=\"datepicker-container__arrow__icon\"\n      (click)=\"navigateView('NEXT')\"\n      tabindex=\"0\"\n      aria-label=\"Next Month\"\n      (keyup.enter)=\"navigateView('NEXT')\"\n      [ngClass]=\"{\n        'disabled-month': isNextMonthDisabled || isSelectingMonth\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=\"datepicker-container__body\">\n\n    <div *ngIf=\"isSelectingMonth && !isSelectingYear\" class=\"month-selector\">\n      <div class=\"row\">\n        <div *ngFor=\"let month of availableMonths; let i = index\" \n            class=\"month\" \n            (click)=\"!disabledMonths[i] && selectMonth(month)\" \n            [ngClass]=\"{\n              'disable-month': disabledMonths[i],\n              'select-month': !disabledMonths[currentMonthNumber] && month === availableMonths[currentMonthNumber]\n            }\">\n          {{ month }}\n        </div>\n      </div>\n    </div>\n  \n    <div *ngIf=\"isSelectingYear && !isSelectingMonth\" class=\"year-selector\">\n      <div class=\"row\">\n        <div *ngFor=\"let year of availableYears; let i = index\" \n            class=\"year\" \n            (click)=\"!disabledYears[i] && selectYear(year)\" \n            [ngClass]=\"{\n              'disable-year': disabledYears[i],\n              'select-year': year === currentYearNumber\n            }\">\n          {{ year }}\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__weekdays\">\n      <div class=\"datepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n        <span [ngClass]=\"{ 'current-day': weekDay.isCurrentDay }\">{{ weekDay.label }}</span>\n      </div>\n    </div>\n    <div *ngIf=\"!isSelectingMonth && !isSelectingYear\" class=\"datepicker-container__days\">\n      <div\n        class=\"datepicker-container__day\"\n        [ngClass]=\"{\n          'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n          'disabled-day': day.isDisabledDay,\n          'is-valid-date': day.date > 0 && !day.isSelectedDay\n        }\"\n        *ngFor=\"let day of currentMonthDates\"\n        (click)=\"selectDay(day)\"\n        (keyup.enter)=\"selectDay(day)\"\n      >\n        <span\n          *ngIf=\"day.date > 0\"\n          [tabindex]=\"day.isDisabledDay ? -1 : 0\"\n          [ngClass]=\"{\n            'current-day': day.isCurrentDay,\n            'selected-day': !localSelectedDate ? day.isSelectedDay : day === localSelectedDate,\n            'disabled-day': day.isDisabledDay\n          }\"\n          [attr.aria-label]=\"retractDayMonth(day.date, currentMonth, currentYearNumber)\"\n        >\n          {{ day.date }}\n        </span>\n      </div>\n    </div>\n  </div>\n  <div class=\"datepicker-container__footer\" *ngIf=\"data.dpConfig.showApplyButton\">\n    <button mis-button size=\"md\" type=\"'none'\" (click)=\"cancelDatePicker()\">Cancel</button>\n    <button mis-button size=\"md\" type=\"primary\" (click)=\"applyDate()\" [disabled]=\"!(data.date || localSelectedDate.date)\">Apply</button>\n  </div>\n</div>\n", styles: [".h1{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7,.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}: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}.datepicker-container{background:#ffffff;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;-webkit-user-select:none;user-select:none;box-sizing:border-box;width:290px}.datepicker-container .datepicker-container__header{display:flex;height:32px;margin:16px;justify-content:space-between;align-items:center;width:258px}.datepicker-container .datepicker-container__header span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.datepicker-container .datepicker-container__header .month-header,.datepicker-container .datepicker-container__header .year-header{padding:8px;border-radius:10px}.datepicker-container .datepicker-container__header .month-header:hover,.datepicker-container .datepicker-container__header .year-header:hover{cursor:pointer;background-color:#e6ebf7}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.datepicker-container .datepicker-container__header .datepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}.datepicker-container .datepicker-container__body{width:258px;height:100%;margin:0 16px 16px}.datepicker-container .datepicker-container__body .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.datepicker-container .datepicker-container__body .month,.datepicker-container .datepicker-container__body .year{padding:10px 6px;cursor:pointer;border-radius:5px;text-align:center;background-color:#fff}.datepicker-container .datepicker-container__body .month:hover,.datepicker-container .datepicker-container__body .year:hover{background-color:#cbddfb}.datepicker-container .datepicker-container__body .disable-month,.datepicker-container .datepicker-container__body .disable-year{cursor:default;color:#c8cdd3}.datepicker-container .datepicker-container__body .disable-month:hover,.datepicker-container .datepicker-container__body .disable-year:hover{background-color:transparent}.datepicker-container .datepicker-container__body .select-month,.datepicker-container .datepicker-container__body .select-year{background-color:#0937b2;color:#fff}.datepicker-container .datepicker-container__body .select-month:hover,.datepicker-container .datepicker-container__body .select-year:hover{cursor:pointer;background-color:#cbddfb}.datepicker-container .datepicker-container__body .datepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday{width:36px;height:18px;text-align:center}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#c7c7c7}.datepicker-container .datepicker-container__body .datepicker-container__weekdays .datepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:#181f33}.datepicker-container .datepicker-container__body .datepicker-container__days{display:flex;flex-wrap:wrap;gap:2px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.selected-day{background-color:#0937b2;cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day{cursor:default}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.disabled-day:hover{background-color:transparent}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover{background-color:#cbddfb;cursor:pointer}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-day):hover span.selected-day{color:#181f33!important}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.selected-day{color:#fff}.datepicker-container .datepicker-container__body .datepicker-container__days .datepicker-container__day span.disabled-day{color:#c7c7c7}.datepicker-container .datepicker-container__footer{display:flex;justify-content:flex-end;gap:8px;bottom:0;align-items:center;position:sticky;padding:16px;border-top:1px solid #e0e0e0}.remove-box-shadow{box-shadow:none!important;border:none!important;border-radius:0!important}\n"] }]
+        }], function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [CONTAINER_DATA]
+                    }] }, { type: i1.ToastService }];
+    }, { closeOnEsc: [{
+                type: HostListener,
+                args: ["keydown.esc"]
+            }] });
+})();
+
+class TzDatepickerDirective {
+    constructor(control, element, overlay, viewContainerRef) {
+        this.control = control;
+        this.element = element;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.dateMessages = [];
+        this.positionX = "center";
+        this.positionY = "bottom";
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.allowBookingOnDisabledDay = false;
+        this.dateChange = new EventEmitter(true);
+        //to be passed from Specific date picker
+        this.disableBoxShadow = false;
+        this.disableOverLay = false;
+        this.openElement = false;
+        this.isOpen = false;
+        this.dpDisabledDates = [];
+    }
+    // dd-mm-yyyy 01-12-2022
+    set selectedDate(date) {
+        this.date = date;
+    }
+    set datesDisabled(dates) {
+        this.dpDisabledDates = dates;
+    }
+    ngOnChanges(changes) {
+        var _a, _b;
+        if ((_a = changes['openElement']) === null || _a === void 0 ? void 0 : _a.currentValue) {
+            this.open();
+        }
+        else if (!((_b = changes['openElement']) === null || _b === void 0 ? void 0 : _b.currentValue)) {
+            this.close();
+        }
+    }
+    ngOnInit() { }
+    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() {
+        var _a;
+        this.dpConfig = Object.assign({ format: DATE_FORMAT, minDate: "", maxDate: "", showApplyButton: false }, this.dpConfig);
+        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: !this.disableOverLay,
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            backdropClass: "cdk-overlay-transparent-backdrop"
+        });
+        this.overlayRef = this.overlay.create(config);
+        const tempRef = new ComponentPortal(TzDpContainerComponent, this.viewContainerRef, Injector.create({
+            providers: [
+                {
+                    provide: CONTAINER_DATA,
+                    useValue: {
+                        messages: this.dateMessages,
+                        date: ((_a = this.control) === null || _a === void 0 ? void 0 : _a.control.value) || this.date,
+                        allowBookingOnDisabledDay: this.allowBookingOnDisabledDay,
+                        dpConfig: this.dpConfig,
+                        datesDisabled: this.dpDisabledDates,
+                        dateChange: this.applyDate.bind(this),
+                        disableBoxShadow: this.disableBoxShadow,
+                    }
+                }
+            ]
+        }));
+        this.overlayRef.attach(tempRef);
+        this.overlayRef
+            .backdropClick()
+            .pipe(take(1))
+            .subscribe(() => {
+            this.close();
+        });
+    }
+    applyDate(date = "") {
+        var _a;
+        if (!date) {
+            this.close();
+            return;
+        }
+        this.dateChange.emit(date);
+        (_a = this.control) === null || _a === void 0 ? void 0 : _a.control.patchValue(date);
+        this.date = date;
+        this.close();
+    }
+    close() {
+        var _a, _b;
+        this.isOpen = false;
+        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+        (_b = this.overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
+    }
+}
+TzDatepickerDirective.ɵfac = function TzDatepickerDirective_Factory(t) { return new (t || TzDatepickerDirective)(i0.ɵɵdirectiveInject(i1$1.NgControl, 10), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i2$1.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+TzDatepickerDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TzDatepickerDirective, selectors: [["input", "misTzDp", ""]], hostBindings: function TzDatepickerDirective_HostBindings(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵlistener("click", function TzDatepickerDirective_click_HostBindingHandler() { return ctx.toggleDatePicker(); })("keydown.enter", function TzDatepickerDirective_keydown_enter_HostBindingHandler() { return ctx.toggleDatePickerOnEnter(); })("keydown.esc", function TzDatepickerDirective_keydown_esc_HostBindingHandler() { return ctx.closeOnEsc(); });
+        }
+    }, inputs: { dpConfig: "dpConfig", selectedDate: "selectedDate", datesDisabled: "datesDisabled", dateMessages: "dateMessages", positionX: "positionX", positionY: "positionY", offsetX: "offsetX", offsetY: "offsetY", allowBookingOnDisabledDay: "allowBookingOnDisabledDay", disableBoxShadow: "disableBoxShadow", disableOverLay: "disableOverLay", openElement: "openElement" }, outputs: { dateChange: "dateChange" }, features: [i0.ɵɵNgOnChangesFeature] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDatepickerDirective, [{
+            type: Directive,
+            args: [{
+                    selector: "input[misTzDp]"
+                }]
+        }], function () {
+        return [{ type: i1$1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ElementRef }, { type: i2$1.Overlay }, { type: i0.ViewContainerRef }];
+    }, { dpConfig: [{
+                type: Input
+            }], selectedDate: [{
+                type: Input
+            }], datesDisabled: [{
+                type: Input
+            }], dateMessages: [{
+                type: Input
+            }], positionX: [{
+                type: Input
+            }], positionY: [{
+                type: Input
+            }], offsetX: [{
+                type: Input
+            }], offsetY: [{
+                type: Input
+            }], allowBookingOnDisabledDay: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }], disableBoxShadow: [{
+                type: Input
+            }], disableOverLay: [{
+                type: Input
+            }], openElement: [{
+                type: Input
+            }], toggleDatePicker: [{
+                type: HostListener,
+                args: ["click"]
+            }], toggleDatePickerOnEnter: [{
+                type: HostListener,
+                args: ["keydown.enter"]
+            }], closeOnEsc: [{
+                type: HostListener,
+                args: ["keydown.esc"]
+            }] });
+})();
+
+class DatepickerModuleV2 {
+}
+DatepickerModuleV2.ɵfac = function DatepickerModuleV2_Factory(t) { return new (t || DatepickerModuleV2)(); };
+DatepickerModuleV2.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: DatepickerModuleV2 });
+DatepickerModuleV2.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule, OverlayModule, ToastModule.forRoot(), ButtonModule, A11yModule] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatepickerModuleV2, [{
+            type: NgModule,
+            args: [{
+                    declarations: [TzDpContainerComponent, TzDatepickerDirective],
+                    imports: [CommonModule, OverlayModule, ToastModule.forRoot(), ButtonModule, A11yModule],
+                    exports: [TzDpContainerComponent, TzDatepickerDirective]
+                }]
+        }], null, null);
+})();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(DatepickerModuleV2, { declarations: [TzDpContainerComponent, TzDatepickerDirective], imports: [CommonModule, OverlayModule, i1.ToastModule, ButtonModule, A11yModule], exports: [TzDpContainerComponent, TzDatepickerDirective] }); })();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatepickerModuleV2, TzDatepickerDirective, TzDpContainerComponent };
+//# sourceMappingURL=mis-crystal-design-system-datepicker_v2.mjs.map