element-internals-polyfill - npm Package Compare versions

Comparing version 0.1.48 to 0.1.49

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+### [0.1.49](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.48...v0.1.49) (2021-12-07)
+
 ### [0.1.48](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.47...v0.1.48) (2021-12-06)
@@ -7,0 +9,0 @@

dist/index.js

@@ -64,2 +64,13 @@ (function () {
     };
+    const setFormValidity = (form) => {
+        const valid = form.checkValidity();
+        form.toggleAttribute('internals-invalid', !valid);
+        form.toggleAttribute('internals-valid', valid);
+    };
+    const formInputCallback = (event) => {
+        setFormValidity(findParentForm(event.target));
+    };
+    const formChangeCallback = (event) => {
+        setFormValidity(findParentForm(event.target));
+    };
     const formSubmitCallback = (event) => {
@@ -116,2 +127,4 @@ const form = event.target;
                 form.addEventListener('reset', formResetCallback);
+                form.addEventListener('input', formInputCallback);
+                form.addEventListener('change', formChangeCallback);
             }
@@ -124,2 +137,3 @@ formsMap.set(form, { ref, internals });
             }
+            setFormValidity(form);
         }
@@ -126,0 +140,0 @@ };

dist/utils.d.ts

@@ -31,2 +31,23 @@ import { ICustomElement, IElementInternals, LabelsList } from './types.js';
 /**
+ * Sets the internals-valid and internals-invalid attributes
+ * based on form validity.
+ * @param {HTMLFormElement} - The target form
+ * @return {void}
+ */
+export declare const setFormValidity: (form: HTMLFormElement) => void;
+/**
+ * The global form input callback. Updates the form's validity
+ * attributes on input.
+ * @param {Event} - The form input event
+ * @return {void}
+ */
+export declare const formInputCallback: (event: Event) => void;
+/**
+ * The global form change callback. Updates the form's validity
+ * attributes on change.
+ * @param {Event} - The form change event
+ * @return {void}
+ */
+export declare const formChangeCallback: (event: Event) => void;
+/**
  * The global form submit callback. We need to cancel any submission
@@ -33,0 +54,0 @@ * if a nested internals is invalid.

package.json

 {
   "name": "element-internals-polyfill",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "description": "A polyfill for the element internals specification",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

68935

increased by2.03%

Lines of code

938

increased by3.88%

No dependency changes