refactor: refactor ExtendedDatePicker for vaadin 24/25 compatibility

Author: javier-godoy

src/main/java/com/flowingcode/addons/ycalendar/ExtendedDatePicker.java

@@ -19,6 +19,7 @@
  */
 package com.flowingcode.addons.ycalendar;
 
+import com.flowingcode.vaadin.jsonmigration.JsonMigration;
 import com.vaadin.flow.component.ClientCallable;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.datepicker.DatePicker;
@@ -88,7 +89,7 @@ private JsonObject fetchStyles(String minStr, String maxStr) {
       String key = m.toString();
       getStyles(m).ifPresent(styles -> result.put(key, styles));
     }
-    return result;
+    return JsonMigration.convertToClientCallableResult(result);
   }
 
   private Optional<JsonObject> getStyles(YearMonth yearMonth) {

src/main/resources/META-INF/frontend/fc-date-picker/fc-date-picker.js

@@ -70,12 +70,34 @@ export class FcDatePicker extends DatePicker {
                 }
             }
         };
+    } else {
+        this.inputElement.addEventListener('focus', ()=>this.__focused=true);
+    
+        const self=this;
+        this.addEventListener('opened-changed', ev=>{
+            if (ev.detail.value && !self._overlayContent._monthScroller.__fcWrapped) {
+                this._overlayContent._monthScroller.__fcWrapped = true;
+                const updateElement = self._overlayContent._monthScroller._updateElement;
+                self._overlayContent._monthScroller._updateElement = (element, index) => {
+                    updateElement(element,index);
+                    if (element instanceof HTMLElement) {
+                        this._updateMonthStyles(element);
+                    }
+                };
+                const createElement = self._overlayContent._monthScroller._createElement;
+                self._overlayContent._monthScroller._createElement = () => {
+                    var calendar = createElement();
+                    setTimeout(()=>this._updateMonthStyles(calendar));
+                    return calendar;
+                };
+            }
+        });
     }
   }
 
   refreshAll() {
     this._styles = {};
-    const overlayContent = this._overlayContent;
+    const overlayContent = this._overlayContent || this.querySelector("vaadin-date-picker-overlay-content");
     if (overlayContent) {
         overlayContent._monthScroller.querySelectorAll("vaadin-month-calendar").forEach(calendar=>this._updateMonthStyles(calendar));
     }