@optionfactory/ful 0.61.0 → 0.62.0

package/dist/ful.mjs

@@ -707,6 +707,19 @@ class Nodes {
     }
 }
 
+class Events$1 {
+    static dispatchChange(el, value){
+        return el.dispatchEvent(new CustomEvent("change", {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                target: el,
+                value: value
+            }
+        }));
+    }
+}
+
 class TemplatesRegistry {
     #idToFragment = {};
     #idToTemplate = {};
@@ -1104,7 +1117,12 @@ const makeInputFragment = (el, template, slots) => {
         return el;
     })();
     input.setAttribute('ful-validation-target', '');
-    input.addEventListener('change', (evt) => evt.stopPropagation());
+    input.addEventListener('change', (evt) => {
+        evt.stopPropagation();
+        if(!Events$1.dispatchChange(el, undefined.value)){
+            evt.preventDefault();
+        }
+    });
     const id = input.getAttribute('id') || el.getAttribute('input-id') || Attributes.uid('ful-input');
     Attributes.forward('input-', el, slots.input);
     Attributes.defaultValue(slots.input, "id", id);
@@ -1127,15 +1145,7 @@ class Input extends ParsedElement({
         return this.input.value;
     }
     set value(value) {
-        const success = this.dispatchEvent(new CustomEvent("change", {
-            bubbles: true,
-            cancelable: true,
-            detail: {
-                target: this,
-                value: value
-            }
-        }));
-        if(!success){
+        if(!Events$1.dispatchChange(el, value)){
             return;
         }
         this.input.value = value;
@@ -1224,7 +1234,9 @@ class Select extends ParsedElement({
             shouldLoad: (query) => this.shouldLoad ? this.shouldLoad(query) : true
         } : {}, tsDefaultConfig, this.tsConfig));
         //we remove the input to move it
-        input.addEventListener('change', (evt) => evt.stopPropagation());
+        input.addEventListener('change', (evt) => {
+            evt.stopPropagation();
+        });
         input.remove();
         template.renderTo(this, { id, tsId, name, input, slots });
     }
@@ -1236,16 +1248,12 @@ class Select extends ParsedElement({
             this.value = this.getAttribute("value");
         }
     }
+    get value() {
+        const v = this.ts.getValue();
+        return v === '' ? null : v;
+    }
     set value(value) {
-        const success = this.dispatchEvent(new CustomEvent("change", {
-            bubbles: true,
-            cancelable: true,
-            detail: {
-                target: this,
-                value: value
-            }
-        }));
-        if(!success){
+        if(!Events.dispatchChange(this, value)){
             return;
         }
         (async () => {
@@ -1255,10 +1263,6 @@ class Select extends ParsedElement({
             this.ts.setValue(value);
         })();
     }
-    get value() {
-        const v = this.ts.getValue();
-        return v === '' ? null : v;
-    }
 }
 
 class RadioGroup extends ParsedElement({
@@ -1298,10 +1302,19 @@ class RadioGroup extends ParsedElement({
             input.setAttribute('name', `${name}-ignore`);
             input.setAttribute('ful-validation-target', '');
             input.dataset['fulBindInclude'] = 'never';
+            input.addEventListener('change', (evt) => {
+                evt.stopPropagation();
+                console.log("stopped"); 
+            });           
+            input.addEventListener('click', (evt) => {
+                if(!Events.dispatchChange(this, this.value)){
+                    evt.preventDefault();
+                }
+            });
             const label = Fragments.fromChildNodes(el);
             return [input, label];
         });
-        radioEls.forEach(el => el.addEventListener('change', (evt) => evt.stopPropagation()));
+
         radioEls.forEach(el => el.remove());
         template.renderTo(this, {name, slots, inputsAndLabels});
     }
@@ -1310,15 +1323,7 @@ class RadioGroup extends ParsedElement({
         return checked ? checked.value : null;
     }
     set value(value) {
-        const success = this.dispatchEvent(new CustomEvent("change", {
-            bubbles: true,
-            cancelable: true,
-            detail: {
-                target: this,
-                value: value
-            }
-        }));
-        if(!success){
+        if(!Events.dispatchChange(this, value)){
             return;
         }
         this.querySelector(`input[type=radio][value=${CSS.escape(value)}]`).checked = true;