From 5174bc99ab23b4f70ec61286d8147f02f2e785ae Mon Sep 17 00:00:00 2001
From: Edoardo Cavazza <edoardo.cavazza@chialab.it>
Date: Fri, 24 May 2024 11:08:15 +0200
Subject: [PATCH] Add support for DNA 4

---
 package.json                  |  4 ++--
 webroot/js/CalendarFilters.js | 27 +++++++++++++++++++--------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 642fc6c..c74ef94 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "repository": "git@github.com:chialab/bedita-calendar.git",
     "author": "Chialab <dev@chialab.it> (https://www.chialab.io)",
     "license": "MIT",
-    "dependencies": {
-        "@chialab/dna": "^3.18.2"
+    "peerDependencies": {
+        "@chialab/dna": "*"
     }
 }
diff --git a/webroot/js/CalendarFilters.js b/webroot/js/CalendarFilters.js
index eeab544..48cff2b 100644
--- a/webroot/js/CalendarFilters.js
+++ b/webroot/js/CalendarFilters.js
@@ -1,7 +1,10 @@
 export function defineCalendarFilters(DNA) {
-    const { window, dispatchEvent, extend, customElements } = DNA;
-
-    const CalendarFilters = class CalendarFilters extends extend(window.HTMLFormElement) {
+    const BaseElement = DNA.HTML ?
+        // DNA 4
+        DNA.HTML.Form :
+        // DNA 3
+        DNA.extend(HTMLFormElement);
+    const CalendarFilters = class CalendarFilters extends BaseElement {
         static get properties() {
             return {
                 rangeParam: {
@@ -219,12 +222,12 @@ export function defineCalendarFilters(DNA) {
         }
 
         requestSubmit() {
-            if (window.HTMLFormElement.prototype.requestSubmit) {
+            if (HTMLFormElement.prototype.requestSubmit) {
                 super.requestSubmit();
                 return;
             }
 
-            if (!dispatchEvent(this, 'submit')) {
+            if (!DNA.dispatchEvent(this, 'submit')) {
                 return;
             }
 
@@ -232,9 +235,17 @@ export function defineCalendarFilters(DNA) {
         }
     };
 
-    customElements.define('calendar-filters', CalendarFilters, {
-        extends: 'form',
-    });
+    if (DNA.define) {
+        // DNA 4
+        DNA.define('calendar-filters', CalendarFilters, {
+            extends: 'form',
+        });
+    } else {
+        // DNA 3
+        customElements.define('calendar-filters', CalendarFilters, {
+            extends: 'form',
+        });
+    }
 
     return CalendarFilters;
 }