ngx-lite-form 1.4.0 → 1.4.1

package/README.md

@@ -511,4 +511,4 @@ This project is licensed under the MIT License - see the [LICENSE](https://githu
 
 ---
 ## Changelog
-- See [docs/CHANGELOG.md](https://github.com/liangk/lite-form/blob/main/docs/CHANGELOG.md) for the full historical record, including the latest `v1.4.0` release with LiteSelect click handler fixes and enhanced package discoverability.
+- See [docs/CHANGELOG.md](https://github.com/liangk/lite-form/blob/main/docs/CHANGELOG.md) for the full historical record, including the latest `v1.4.1` release with LiteDateTime selection state fix.

package/fesm2022/ngx-lite-form.mjs

@@ -1351,12 +1351,12 @@ class LiteDateTime {
     selectedHour = new Date().getHours();
     selectedMinute = 0;
     selectedDateTime = null;
-    // Signal to track form control value changes for reactivity
-    // private formValueChangeSignal = signal<any>(null);
+    // Signal to track selection changes for reactivity
+    selectionChangeSignal = signal(0, ...(ngDevMode ? [{ debugName: "selectionChangeSignal" }] : []));
     // Computed calendar days - only recalculates when dependencies change
     calendarDays = computed(() => {
-        // This makes the computed reactive to form value changes
-        // this.formValueChangeSignal();
+        // This makes the computed reactive to selection changes
+        this.selectionChangeSignal();
         return this.getMonthDays(this.currentMonth());
     }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : []));
     getMonthDays(monthDate) {
@@ -1432,7 +1432,7 @@ class LiteDateTime {
                         const date = new Date(value);
                         // console.log('Form value changed:', value, date, isNaN(date.getTime()));
                         if (!isNaN(date.getTime())) {
-                            console.log('Formatted Date:', this.formatDate(date, this.format()));
+                            // console.log('Formatted Date:', this.formatDate(date, this.format()))
                             this.formattedValue.set(this.formatDate(date, this.format()));
                         }
                         else {
@@ -1501,10 +1501,6 @@ class LiteDateTime {
         };
         const dateString = this.toLocalISOString(this.selectedDateTime.date);
         this.control().formControl.setValue(dateString);
-        const calDate = this.calendarDays().find(d => this.isSameDay(d.date, date));
-        if (calDate) {
-            calDate.isSelected = true;
-        }
     }
     parseFormattedDate(dateString, format) {
         try {
@@ -1635,17 +1631,16 @@ class LiteDateTime {
         this.currentMonth.set(newDate);
     }
     selectDate(day) {
+        // Clear previous selection
         if (this.selectedDateTime) {
             this.selectedDateTime.isSelected = false;
         }
-        // this.selectedDateTime = day;
-        // this.selectedDateTime.isSelected = true;
+        // Set new selection
         this.setDateTimeSelected(day.date);
-        // const dateString = this.toLocalISOString(day.date);
-        // (this.control().formControl as FormControl<string>).setValue(dateString);
-        // // this.formValueChangeSignal.set(Date.now()); // Trigger immediate update
-        // this.control().formControl.markAsDirty();
-        // this.control().formControl.markAsTouched();
+        // Trigger calendar re-render to clear previous visual selection
+        this.selectionChangeSignal.update(v => v + 1);
+        this.control().formControl.markAsDirty();
+        this.control().formControl.markAsTouched();
     }
     isSameDay(date1, date2) {
         if (!date2)