element-internals-polyfill - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

CHANGELOG.md

@@ -5,2 +5,15 @@ # Changelog
 
+### [0.1.9](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.8...v0.1.9) (2021-02-23)
+
+
+### Features
+
+* add error messages ([1d7c716](https://github.com/calebdwilliams/element-internals-polyfill/commit/1d7c716f5be9b0c9734ae0935e2ea60e34a5983c))
+
+
+### Bug Fixes
+
+* anchor element focus order on form submission reversed compared to Chrome ([#24](https://github.com/calebdwilliams/element-internals-polyfill/issues/24)) ([8346b2f](https://github.com/calebdwilliams/element-internals-polyfill/commit/8346b2fd357bd22b1f5ef725ad0a4de18db3a97c))
+* **setValidity:** Added support for setting ValidityState from a native input as Chrome allows this ([#25](https://github.com/calebdwilliams/element-internals-polyfill/issues/25)) ([dbb3c1a](https://github.com/calebdwilliams/element-internals-polyfill/commit/dbb3c1a742044b04a5e81c9855fb9c775831114e))
+
 ### [0.1.8](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.7...v0.1.8) (2021-02-19)
@@ -7,0 +20,0 @@

dist/index.js

@@ -29,62 +29,2 @@ (function () {
 
-    const aom = {
-        ariaAtomic: 'aria-atomic',
-        ariaAutoComplete: 'aria-autocomplete',
-        ariaBusy: 'aria-busy',
-        ariaChecked: 'aria-checked',
-        ariaColCount: 'aria-colcount',
-        ariaColIndex: 'aria-colindex',
-        ariaColSpan: 'aria-colspan',
-        ariaCurrent: 'aria-current',
-        ariaDisabled: 'aria-disabled',
-        ariaExpanded: 'aria-expanded',
-        ariaHasPopup: 'aria-haspopup',
-        ariaHidden: 'aria-hidden',
-        ariaKeyShortcuts: 'aria-keyshortcuts',
-        ariaLabel: 'aria-label',
-        ariaLevel: 'aria-level',
-        ariaLive: 'aria-live',
-        ariaModal: 'aria-modal',
-        ariaMultiLine: 'aria-multiline',
-        ariaMultiSelectable: 'aria-multiselectable',
-        ariaOrientation: 'aria-orientation',
-        ariaPlaceholder: 'aria-placeholder',
-        ariaPosInSet: 'aria-posinset',
-        ariaPressed: 'aria-pressed',
-        ariaReadOnly: 'aria-readonly',
-        ariaRelevant: 'aria-relevant',
-        ariaRequired: 'aria-required',
-        ariaRoleDescription: 'aria-roledescription',
-        ariaRowCount: 'aria-rowcount',
-        ariaRowIndex: 'aria-rowindex',
-        ariaRowSpan: 'aria-rowspan',
-        ariaSelected: 'aria-selected',
-        ariaSort: 'aria-sort',
-        ariaValueMax: 'aria-valuemax',
-        ariaValueMin: 'aria-valuemin',
-        ariaValueNow: 'aria-valuenow',
-        ariaValueText: 'aria-valuetext'
-    };
-    const initAom = (ref, internals) => {
-        for (let key in aom) {
-            internals[key] = null;
-            let closureValue = null;
-            const attributeName = aom[key];
-            Object.defineProperty(internals, key, {
-                get() {
-                    return closureValue;
-                },
-                set(value) {
-                    closureValue = value;
-                    if (ref.isConnected) {
-                        ref.setAttribute(attributeName, value);
-                    }
-                    else {
-                        upgradeMap.set(ref, internals);
-                    }
-                }
-            });
-        }
-    };
-
     const observerConfig = { attributes: true };
@@ -181,2 +121,3 @@ const observer = new MutationObserver((mutationsList) => {
             const validityList = nodes
+                .reverse()
                 .map(node => {
@@ -258,3 +199,74 @@ const internals = internalsMap.get(node);
     };
+    /**
+     * Throw an error if the element ref is not form associated
+     * @param ref {ICustomElement} - The element to check if it is form associated
+     * @param message {string} - The error message to throw
+     * @param ErrorType {any} - The error type to throw, defaults to DOMException
+     */
+    const throwIfNotFormAssociated = (ref, message, ErrorType = DOMException) => {
+        if (!ref.constructor['formAssociated']) {
+            throw new ErrorType(message);
+        }
+    };
 
+    const aom = {
+        ariaAtomic: 'aria-atomic',
+        ariaAutoComplete: 'aria-autocomplete',
+        ariaBusy: 'aria-busy',
+        ariaChecked: 'aria-checked',
+        ariaColCount: 'aria-colcount',
+        ariaColIndex: 'aria-colindex',
+        ariaColSpan: 'aria-colspan',
+        ariaCurrent: 'aria-current',
+        ariaDisabled: 'aria-disabled',
+        ariaExpanded: 'aria-expanded',
+        ariaHasPopup: 'aria-haspopup',
+        ariaHidden: 'aria-hidden',
+        ariaKeyShortcuts: 'aria-keyshortcuts',
+        ariaLabel: 'aria-label',
+        ariaLevel: 'aria-level',
+        ariaLive: 'aria-live',
+        ariaModal: 'aria-modal',
+        ariaMultiLine: 'aria-multiline',
+        ariaMultiSelectable: 'aria-multiselectable',
+        ariaOrientation: 'aria-orientation',
+        ariaPlaceholder: 'aria-placeholder',
+        ariaPosInSet: 'aria-posinset',
+        ariaPressed: 'aria-pressed',
+        ariaReadOnly: 'aria-readonly',
+        ariaRelevant: 'aria-relevant',
+        ariaRequired: 'aria-required',
+        ariaRoleDescription: 'aria-roledescription',
+        ariaRowCount: 'aria-rowcount',
+        ariaRowIndex: 'aria-rowindex',
+        ariaRowSpan: 'aria-rowspan',
+        ariaSelected: 'aria-selected',
+        ariaSort: 'aria-sort',
+        ariaValueMax: 'aria-valuemax',
+        ariaValueMin: 'aria-valuemin',
+        ariaValueNow: 'aria-valuenow',
+        ariaValueText: 'aria-valuetext'
+    };
+    const initAom = (ref, internals) => {
+        for (let key in aom) {
+            internals[key] = null;
+            let closureValue = null;
+            const attributeName = aom[key];
+            Object.defineProperty(internals, key, {
+                get() {
+                    return closureValue;
+                },
+                set(value) {
+                    closureValue = value;
+                    if (ref.isConnected) {
+                        ref.setAttribute(attributeName, value);
+                    }
+                    else {
+                        upgradeMap.set(ref, internals);
+                    }
+                }
+            });
+        }
+    };
+
     /** Emulate the browser's default ValidityState object */
@@ -329,3 +341,3 @@ class ValidityState {
                 /** Allows for dynamic addition of elements to forms */
-                if (internalsMap.has(node)) {
+                if (internalsMap.has(node) && node.constructor['formAssociated']) {
                     const internals = internalsMap.get(node);
@@ -377,8 +389,10 @@ const { form } = internals;
             internalsMap.set(ref, this);
-            const { labels, form } = this;
             initAom(ref, this);
+            initRef(ref, this);
             Object.seal(this);
-            initRef(ref, this);
-            initLabels(ref, labels);
-            initForm(ref, form, this);
+            if (ref.constructor['formAssociated']) {
+                const { labels, form } = this;
+                initLabels(ref, labels);
+                initForm(ref, form, this);
+            }
         }
@@ -392,4 +406,5 @@ static get isPolyfilled() {
         checkValidity() {
+            const ref = refMap.get(this);
+            throwIfNotFormAssociated(ref, `Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
             const validity = validityMap.get(this);
-            const ref = refMap.get(this);
             if (!validity.valid) {
@@ -408,2 +423,3 @@ const validityEvent = new Event('invalid', {
             const ref = refMap.get(this);
+            throwIfNotFormAssociated(ref, `Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.`);
             let form;
@@ -418,2 +434,3 @@ if (ref.constructor['formAssociated'] === true) {
             const ref = refMap.get(this);
+            throwIfNotFormAssociated(ref, `Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.`);
             const id = ref.getAttribute('id');
@@ -428,5 +445,6 @@ const hostRoot = getHostRoot(ref);
         reportValidity() {
+            const ref = refMap.get(this);
+            throwIfNotFormAssociated(ref, `Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
             const valid = this.checkValidity();
             const anchor = validationAnchorMap.get(this);
-            const ref = refMap.get(this);
             if (anchor && !ref.constructor['formAssociated']) {
@@ -444,5 +462,3 @@ throw new DOMException(`Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
             const ref = refMap.get(this);
-            if (!this.form || !ref.constructor['formAssociated']) {
-                return undefined;
-            }
+            throwIfNotFormAssociated(ref, `Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element.`);
             removeHiddenInputs(this);
@@ -475,2 +491,3 @@ if (value != null && !(value instanceof FormData)) {
             const ref = refMap.get(this);
+            throwIfNotFormAssociated(ref, `Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
             if (!validityChanges) {
@@ -481,6 +498,10 @@ throw new TypeError('Failed to execute \'setValidity\' on \'ElementInternals\': 1 argument required, but only 0 present.');
             const validity = validityMap.get(this);
-            if (Object.keys(validityChanges).length === 0) {
+            const validityChangesObj = {};
+            for (const key in validityChanges) {
+                validityChangesObj[key] = validityChanges[key];
+            }
+            if (Object.keys(validityChangesObj).length === 0) {
                 setValid(validity);
             }
-            const check = { ...validity, ...validityChanges };
+            const check = { ...validity, ...validityChangesObj };
             delete check.valid;
@@ -504,2 +525,4 @@ const { valid } = reconcileValidty(validity, check);
         get validationMessage() {
+            const ref = refMap.get(this);
+            throwIfNotFormAssociated(ref, `Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element.`);
             return validationMessageMap.get(this);
@@ -509,2 +532,4 @@ }
         get validity() {
+            const ref = refMap.get(this);
+            throwIfNotFormAssociated(ref, `Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element.`);
             const validity = validityMap.get(this);
@@ -516,2 +541,3 @@ return validity;
             const ref = refMap.get(this);
+            throwIfNotFormAssociated(ref, `Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element.`);
             if (ref.disabled || ref.hasAttribute('disabled')) {
@@ -518,0 +544,0 @@ return false;

dist/utils.d.ts

@@ -60,1 +60,8 @@ import { ICustomElement, IElementInternals, LabelsList } from './types.js';
 export declare const findParentForm: (elem: any) => any;
+/**
+ * Throw an error if the element ref is not form associated
+ * @param ref {ICustomElement} - The element to check if it is form associated
+ * @param message {string} - The error message to throw
+ * @param ErrorType {any} - The error type to throw, defaults to DOMException
+ */
+export declare const throwIfNotFormAssociated: (ref: ICustomElement, message: string, ErrorType?: any) => void;

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55250

increased by6.87%

Lines of code

841

increased by4.08%

No dependency changes