feat: add compatibility with Vaadin 25

pom.xml

@@ -4,12 +4,12 @@
 
 	<groupId>org.vaadin.addons.flowingcode</groupId>
 	<artifactId>year-month-calendar</artifactId>
-	<version>4.5.3-SNAPSHOT</version>
+	<version>4.6.0-SNAPSHOT</version>
 	<name>Year Month Calendar Add-on</name>
 	<description>Year Month Calendar Add-on for Vaadin Flow</description>
 
 	<properties>
-		<vaadin.version>24.5.0</vaadin.version>
+		<vaadin.version>24.9.5</vaadin.version>
 		<maven.compiler.source>17</maven.compiler.source>
 		<maven.compiler.target>17</maven.compiler.target>
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
@@ -91,6 +91,16 @@
             <id>flowing-releases</id>
             <url>https://maven.flowingcode.com/releases</url>
         </repository>
+        <repository>
+            <id>FlowingCode Snapshots</id>
+            <url>https://maven.flowingcode.com/snapshots</url>
+            <snapshots>
+                <enabled>true</enabled>
+            </snapshots>
+            <releases>
+                <enabled>false</enabled>
+            </releases>
+        </repository>
 	</repositories>
 
     <pluginRepositories>
@@ -119,6 +129,17 @@
 			<artifactId>vaadin-core</artifactId>
 			<optional>true</optional>
 		</dependency>
+		<dependency>
+			<groupId>com.flowingcode.vaadin</groupId>
+			<artifactId>json-migration-helper</artifactId>
+			<version>0.0.1-SNAPSHOT</version>
+		</dependency>
+		<dependency>
+			<groupId>org.projectlombok</groupId>
+			<artifactId>lombok</artifactId>
+			<version>1.18.42</version>
+			<scope>provided</scope>
+		</dependency>
 		<dependency>
 			<groupId>org.slf4j</groupId>
 			<artifactId>slf4j-simple</artifactId>
@@ -530,7 +551,7 @@
 				<dependency>
 					<groupId>com.flowingcode.vaadin.addons.demo</groupId>
 					<artifactId>commons-demo</artifactId>
-					<version>4.4.0-SNAPSHOT</version>
+					<version>5.0.0-SNAPSHOT</version>
 					<scope>test</scope>
 				</dependency>
 			</dependencies>

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

@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -19,23 +19,26 @@
  */
 package com.flowingcode.addons.ycalendar;
 
+import com.flowingcode.vaadin.jsonmigration.JsonMigration;
+import com.flowingcode.vaadin.jsonmigration.JsonSerializer;
 import com.vaadin.flow.component.AttachEvent;
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.ComponentEventListener;
 import com.vaadin.flow.component.ComponentUtil;
 import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.datepicker.DatePicker.DatePickerI18n;
 import com.vaadin.flow.function.SerializableConsumer;
-import com.vaadin.flow.internal.JsonSerializer;
 import com.vaadin.flow.shared.Registration;
 import elemental.json.JsonObject;
 import java.util.Objects;
+import lombok.experimental.ExtensionMethod;
 
 /**
  * A base abstract class for calendar components, with additional methods used for i18n initialization
  * and listener registration.
  */
 @SuppressWarnings("serial")
+@ExtensionMethod(JsonMigration.class)
 public abstract class AbstractCalendarComponent<COMPONENT extends Component> extends Component {
 
   private DatePickerI18n i18n;

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/java/com/flowingcode/addons/ycalendar/InlineDatePicker.java

@@ -19,6 +19,8 @@
  */
 package com.flowingcode.addons.ycalendar;
 
+import com.flowingcode.vaadin.jsonmigration.JsonMigration;
+import com.flowingcode.vaadin.jsonmigration.JsonSerializer;
 import com.vaadin.flow.component.AbstractSinglePropertyField;
 import com.vaadin.flow.component.HasSize;
 import com.vaadin.flow.component.HasTheme;
@@ -28,18 +30,19 @@
 import com.vaadin.flow.component.dependency.Uses;
 import com.vaadin.flow.function.SerializableFunction;
 import com.vaadin.flow.function.ValueProvider;
-import com.vaadin.flow.internal.JsonSerializer;
 import java.time.LocalDate;
 import java.time.YearMonth;
 import java.util.Objects;
 import java.util.Optional;
 import java.util.stream.IntStream;
+import lombok.experimental.ExtensionMethod;
 
 @SuppressWarnings("serial")
 @Tag("fc-inline-date-picker")
 @JsModule("./fc-inline-date-picker/fc-inline-date-picker.js")
 @Uses(YearMonthField.class)
 @Uses(MonthCalendar.class)
+@ExtensionMethod(JsonMigration.class)
 public class InlineDatePicker extends AbstractSinglePropertyField<InlineDatePicker, LocalDate> implements HasSize, HasTheme {
 
   private static final String VALUE_PROPERTY = "value";
@@ -51,7 +54,7 @@ public class InlineDatePicker extends AbstractSinglePropertyField<InlineDatePick
   private static <R,S> SerializableFunction<R,S> map(SerializableFunction<R,S> f) {
     return r->Optional.ofNullable(r).map(f).orElse(null);
   }
-  
+
   /** Creates a new instance of InlineDatePicker initialized with the current date and with week numbers visible. */
   public InlineDatePicker() {
     super(VALUE_PROPERTY, null, String.class, map(LocalDate::parse), map(LocalDate::toString));

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

@@ -19,22 +19,25 @@
  */
 package com.flowingcode.addons.ycalendar;
 
+import com.flowingcode.vaadin.jsonmigration.JsonMigration;
+import com.flowingcode.vaadin.jsonmigration.JsonSerializer;
 import com.vaadin.flow.component.AbstractSinglePropertyField;
 import com.vaadin.flow.component.HasTheme;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.datepicker.DatePicker.DatePickerI18n;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.function.SerializableFunction;
-import com.vaadin.flow.internal.JsonSerializer;
 import elemental.json.Json;
 import elemental.json.JsonValue;
 import java.time.YearMonth;
 import java.util.Objects;
 import java.util.Optional;
+import lombok.experimental.ExtensionMethod;
 
 @SuppressWarnings("serial")
 @Tag("fc-year-month-field")
 @JsModule("./fc-year-month-field/fc-year-month-field.js")
+@ExtensionMethod(JsonMigration.class)
 public class YearMonthField extends AbstractSinglePropertyField<YearMonthField, YearMonth>
     implements HasTheme {
 

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

@@ -52,31 +52,54 @@
 
     this._styles={};
 
-    this._overlayElement.renderer = e => {
-        this._boundOverlayRenderer.call(this,e);
-
-        if (!this._overlayContent._monthScroller.__fcWrapped) {
-            const createElement = this._overlayContent._monthScroller._createElement;
-            this._overlayContent._monthScroller.__fcWrapped = true;
-            this._overlayContent._monthScroller._createElement = () => {
-                var calendar = createElement();
-                calendar.addEventListener('dom-change',ev=>{
-                    if (ev.composedPath()[0].as=='week') {
-                        setTimeout(()=> this._updateMonthStyles(calendar));
-                    }
-                });
-                return calendar; 
+    if (this._boundOverlayRenderer) {
+        this._overlayElement.renderer = e => {
+            this._boundOverlayRenderer.call(this,e);
+
+            if (!this._overlayContent._monthScroller.__fcWrapped) {
+                const createElement = this._overlayContent._monthScroller._createElement;
+                this._overlayContent._monthScroller.__fcWrapped = true;
+                this._overlayContent._monthScroller._createElement = () => {
+                    var calendar = createElement();
+                    calendar.addEventListener('dom-change',ev=>{
+                        if (ev.composedPath()[0].as=='week') {
+                            setTimeout(()=> this._updateMonthStyles(calendar));
+                        }
+                    });
+                    return calendar;
+                }
             }
-        }
-    };
+        };
+    } else {
+        this.inputElement.addEventListener('focus', ()=>this.__focused=true);
 
-    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 = {};
-    if (this._overlayContent) {
-        this._overlayContent._monthScroller.querySelectorAll("vaadin-month-calendar").forEach(calendar=>this._updateMonthStyles(calendar));
+    const overlayContent = this._overlayContent || this.querySelector("vaadin-date-picker-overlay-content");
+    if (overlayContent) {
+        overlayContent._monthScroller.querySelectorAll("vaadin-month-calendar").forEach(calendar=>this._updateMonthStyles(calendar));
     }
   }
 

src/main/resources/META-INF/frontend/fc-month-calendar/fc-month-calendar.js

@@ -113,33 +113,34 @@ export class FcMonthCalendarElement extends MonthCalendarMixin {
     e.forEach(item => item.removeAttribute('class'));
   }
 
-  ready() {
-    super.ready();
-    let styles = `
-        [part='date'][class]::before { 
-          box-shadow: none;
-        }
-
-        [part='date'][selected] {
-          color: unset;
-        }
-
-        [part='date'][selected]::before {
-          background-color: unset;  
-          border: 1px solid var(--lumo-primary-color);
-        }
-
-        [part~=month-header] {
-          display: var(--__month-calendar-header-display, block);
-        }
-    `;
-
-    this.$.element.shadowRoot.querySelector("style").innerHTML+=styles;
-  }
-
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("selected-date-changed",this._onSelectedDateChanged);    
+    const updateComplete = this.$.element.updateComplete || Promise.resolve(); 
+    updateComplete.then(()=>{
+      if (!this.$.element.shadowRoot.querySelectorAll("style[data='fc-component-styles']").length) {
+        let style = document.createElement("style");
+        style.setAttribute("data","fc-component-styles");
+        style.innerHTML+=`
+          [part='date'][class]::before { 
+            box-shadow: none;
+          }
+
+          [part='date'][selected] {
+            color: unset;
+          }
+
+          [part='date'][selected]::before {
+            background-color: unset;  
+            border: 1px solid var(--lumo-primary-color);
+          }
+
+          [part~=month-header] {
+            display: var(--__month-calendar-header-display, block);
+          }`;
+         this.$.element.shadowRoot.append(style);
+      }
+    });
   }
 
   disconnectedCallback() {