mis-crystal-design-system 18.1.2 → 18.1.3

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, effect, Component, Inject, HostListener, input, output, Injector, Directive, Self, Optional, NgModule } from '@angular/core';
+import { InjectionToken, signal, computed, Component, Inject, HostListener, input, output, Injector, Directive, Self, Optional, NgModule } from '@angular/core';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
@@ -407,31 +407,8 @@ class TzDrpContainerComponent {
                 format: DATE_FORMAT
             };
         }
-        // Effect to update calendar when dates change - AFTER setting initial data
-        effect(() => {
-            const localSelectedDates = this.localSelectedDatesSignal();
-            let selectedStartDate;
-            if (localSelectedDates?.startDate) {
-                selectedStartDate = this.parseDateWithMultipleFormats(localSelectedDates.startDate);
-            }
-            else {
-                selectedStartDate = dayjs('invalid');
-            }
-            if (selectedStartDate.isValid()) {
-                this.currentYearNumberSignal.set(selectedStartDate.year());
-                this.nextYearNumberSignal.set(selectedStartDate.add(1, "month").year());
-                this.currentMonthNumberSignal.set(selectedStartDate.get("month"));
-                this.nextMonthNumberSignal.set(selectedStartDate.add(1, "month").month());
-                const selectedEndDate = localSelectedDates?.endDate ? this.parseDateWithMultipleFormats(localSelectedDates.endDate) : null;
-                if (selectedEndDate && selectedEndDate.isValid() && selectedEndDate.isAfter(selectedStartDate, 'month')) {
-                    this.nextMonthNumberSignal.set(selectedEndDate.month());
-                    this.nextYearNumberSignal.set(selectedEndDate.year());
-                }
-                // Update calendar dates to reflect the selected dates
-                this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
-                this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumberSignal(), this.nextYearNumberSignal()));
-            }
-        }, { allowSignalWrites: true });
+        // Update calendar from initial selected dates
+        this.updateCalendarFromSelectedDates();
     }
     ngOnInit() {
         this.calculateMinMaxDays();
@@ -467,8 +444,8 @@ class TzDrpContainerComponent {
         }
         this.currentMonthNumberSignal.set(thisMonth.month());
         this.nextMonthNumberSignal.set(thisMonth.clone().add(1, "month").month());
-        this.currentMonthSignal.set(getMonth(this.currentMonthNumber()));
-        this.nextMonthSignal.set(getMonth(this.nextMonthNumber()));
+        this.currentMonthSignal.set(getMonth(this.currentMonthNumberSignal()));
+        this.nextMonthSignal.set(getMonth(this.nextMonthNumberSignal()));
         if (this.nextMonthNumberSignal() === 0 && direction === "PREVIOUS") {
             this.currentYearNumberSignal.set(this.currentYearNumberSignal() - 1);
         }
@@ -488,6 +465,37 @@ class TzDrpContainerComponent {
         this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumber(), this.nextYearNumber()));
         this.calculateMinMaxDays();
     }
+    /**
+     * Update calendar month/year based on selected dates
+     * This method is called whenever localSelectedDatesSignal changes to keep calendar in sync
+     */
+    updateCalendarFromSelectedDates() {
+        const localSelectedDates = this.localSelectedDatesSignal();
+        let selectedStartDate;
+        if (localSelectedDates?.startDate) {
+            selectedStartDate = this.parseDateWithMultipleFormats(localSelectedDates.startDate);
+        }
+        else {
+            selectedStartDate = dayjs('invalid');
+        }
+        if (selectedStartDate.isValid()) {
+            this.currentYearNumberSignal.set(selectedStartDate.year());
+            this.nextYearNumberSignal.set(selectedStartDate.add(1, "month").year());
+            this.currentMonthNumberSignal.set(selectedStartDate.get("month"));
+            this.nextMonthNumberSignal.set(selectedStartDate.add(1, "month").month());
+            const selectedEndDate = localSelectedDates?.endDate ? this.parseDateWithMultipleFormats(localSelectedDates.endDate) : null;
+            if (selectedEndDate && selectedEndDate.isValid() && selectedEndDate.isAfter(selectedStartDate, 'month')) {
+                this.nextMonthNumberSignal.set(selectedEndDate.month());
+                this.nextYearNumberSignal.set(selectedEndDate.year());
+            }
+            // Update month labels
+            this.currentMonthSignal.set(getMonth(this.currentMonthNumberSignal()));
+            this.nextMonthSignal.set(getMonth(this.nextMonthNumberSignal()));
+            // Update calendar dates to reflect the selected dates
+            this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
+            this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumberSignal(), this.nextYearNumberSignal()));
+        }
+    }
     generateDates(month, currentYearNumber) {
         let dates = [];
         const daysInMonth = dayjs().year(currentYearNumber).month(month).daysInMonth();
@@ -660,8 +668,7 @@ class TzDrpContainerComponent {
                         endDate: null,
                         selectedRangeLabel: this.CUSTOM_RANGE_LABEL
                     });
-                    this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
-                    this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumberSignal(), this.nextYearNumberSignal()));
+                    this.updateCalendarFromSelectedDates();
                     return;
                 }
                 this.selectionStartedSignal.set(false);
@@ -690,6 +697,7 @@ class TzDrpContainerComponent {
                     endDate: formattedEndDate,
                     selectedRangeLabel: this.CUSTOM_RANGE_LABEL
                 });
+                this.updateCalendarFromSelectedDates();
             }
             else {
                 this.selectionStartedSignal.set(true);
@@ -730,9 +738,8 @@ class TzDrpContainerComponent {
                     endDate: null,
                     selectedRangeLabel: this.CUSTOM_RANGE_LABEL
                 });
+                this.updateCalendarFromSelectedDates();
             }
-            this.currentMonthDatesSignal.set(this.generateDates(this.currentMonthNumberSignal(), this.currentYearNumberSignal()));
-            this.nextMonthDatesSignal.set(this.generateDates(this.nextMonthNumberSignal(), this.nextYearNumberSignal()));
             this.isDatesValidSignal.set(false);
             if (this.localSelectedDatesSignal().startDate && this.localSelectedDatesSignal().endDate) {
                 this.isDatesValidSignal.set(true);