Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

element-internals-polyfill

Package Overview
Dependencies
Maintainers
0
Versions
110
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

element-internals-polyfill - npm Package Compare versions

Comparing version 1.3.11 to 1.3.12-alpha.0

6

dist/aom.d.ts

@@ -1,3 +0,3 @@

import { IAom, IElementInternals } from './types.js';
export declare const aom: IAom;
export declare const initAom: (ref: Element, internals: IElementInternals) => void;
import "./types.js";
export declare const aom: Record<keyof ARIAMixin, string>;
export declare const initAom: (ref: FormAssociatedCustomElement, internals: ElementInternals) => void;

91

dist/aom.js

@@ -1,45 +0,48 @@

import { upgradeMap } from './maps.js';
import { upgradeMap } from "./maps.js";
import "./types.js";
export const aom = {
ariaAtomic: 'aria-atomic',
ariaAutoComplete: 'aria-autocomplete',
ariaBusy: 'aria-busy',
ariaChecked: 'aria-checked',
ariaColCount: 'aria-colcount',
ariaColIndex: 'aria-colindex',
ariaColIndexText: 'aria-colindextext',
ariaColSpan: 'aria-colspan',
ariaCurrent: 'aria-current',
ariaDescription: 'aria-description',
ariaDisabled: 'aria-disabled',
ariaExpanded: 'aria-expanded',
ariaHasPopup: 'aria-haspopup',
ariaHidden: 'aria-hidden',
ariaInvalid: 'aria-invalid',
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',
ariaRowIndexText: 'aria-rowindextext',
ariaRowSpan: 'aria-rowspan',
ariaSelected: 'aria-selected',
ariaSetSize: 'aria-setsize',
ariaSort: 'aria-sort',
ariaValueMax: 'aria-valuemax',
ariaValueMin: 'aria-valuemin',
ariaValueNow: 'aria-valuenow',
ariaValueText: 'aria-valuetext',
role: 'role'
ariaAtomic: "aria-atomic",
ariaAutoComplete: "aria-autocomplete",
ariaBrailleLabel: "aria-braillelabel",
ariaBrailleRoleDescription: "aria-brailleroledescription",
ariaBusy: "aria-busy",
ariaChecked: "aria-checked",
ariaColCount: "aria-colcount",
ariaColIndex: "aria-colindex",
ariaColIndexText: "aria-colindextext",
ariaColSpan: "aria-colspan",
ariaCurrent: "aria-current",
ariaDescription: "aria-description",
ariaDisabled: "aria-disabled",
ariaExpanded: "aria-expanded",
ariaHasPopup: "aria-haspopup",
ariaHidden: "aria-hidden",
ariaInvalid: "aria-invalid",
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",
ariaRowIndexText: "aria-rowindextext",
ariaRowSpan: "aria-rowspan",
ariaSelected: "aria-selected",
ariaSetSize: "aria-setsize",
ariaSort: "aria-sort",
ariaValueMax: "aria-valuemax",
ariaValueMin: "aria-valuemin",
ariaValueNow: "aria-valuenow",
ariaValueText: "aria-valuetext",
role: "role",
};

@@ -63,5 +66,5 @@ export const initAom = (ref, internals) => {

}
}
},
});
}
};

3

dist/CustomStateSet.d.ts

@@ -1,6 +0,5 @@

import { ICustomElement } from "./types.js";
export type CustomState = `--${string}`;
export declare class CustomStateSet extends Set<CustomState> {
static get isPolyfilled(): boolean;
constructor(ref: ICustomElement);
constructor(ref: HTMLElement);
add(state: CustomState): this;

@@ -7,0 +6,0 @@ clear(): void;

6

dist/CustomStateSet.js

@@ -15,4 +15,4 @@ /** Save a reference to the ref for teh CustomStateSet */

super();
if (!ref || !ref.tagName || ref.tagName.indexOf('-') === -1) {
throw new TypeError('Illegal constructor');
if (!ref || !ref.tagName || ref.tagName.indexOf("-") === -1) {
throw new TypeError("Illegal constructor");
}

@@ -22,3 +22,3 @@ customStateMap.set(this, ref);

add(state) {
if (!/^--/.test(state) || typeof state !== 'string') {
if (!/^--/.test(state) || typeof state !== "string") {
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${state} must start with '--'.`);

@@ -25,0 +25,0 @@ }

14

dist/element-internals.d.ts

@@ -1,7 +0,9 @@

import { ValidityState } from './ValidityState.js';
import { IElementInternals, ICustomElement, LabelsList } from './types.js';
import { CustomStateSet } from './CustomStateSet.js';
export declare class ElementInternals implements IElementInternals {
import { ValidityState } from "./ValidityState.js";
import { LabelsList } from "./types.js";
import { CustomStateSet } from "./CustomStateSet.js";
export declare class ElementInternals implements globalThis.ElementInternals {
ariaAtomic: string;
ariaAutoComplete: string;
ariaBrailleLabel: string;
ariaBrailleRoleDescription: string;
ariaBusy: string;

@@ -49,3 +51,3 @@ ariaChecked: string;

static get isPolyfilled(): boolean;
constructor(ref: ICustomElement);
constructor(ref: FormAssociatedCustomElement);
/**

@@ -93,3 +95,3 @@ * Will return true if the element is in a valid state

*/
export declare function forceCustomStateSetPolyfill(attachInternals?: HTMLElement['attachInternals']): void;
export declare function forceCustomStateSetPolyfill(attachInternals?: HTMLElement["attachInternals"]): void;
/**

@@ -96,0 +98,0 @@ * Forcibly applies the polyfill for ElementInternals. Useful for situations

99

dist/element-internals.js

@@ -1,8 +0,8 @@

import { connectedCallbackMap, internalsMap, refMap, refValueMap, shadowHostsMap, shadowRootMap, validationAnchorMap, validityMap, validationMessageMap, validityUpgradeMap, } from './maps.js';
import { createHiddenInput, findParentForm, initRef, mutationObserverExists, removeHiddenInputs, setDisabled, throwIfNotFormAssociated, upgradeInternals } from './utils.js';
import { initAom } from './aom.js';
import { ValidityState, reconcileValidity, setValid } from './ValidityState.js';
import { deferUpgrade, observerCallback, observerConfig } from './mutation-observers.js';
import { CustomStateSet } from './CustomStateSet.js';
import { patchFormPrototype } from './patch-form-prototype.js';
import { connectedCallbackMap, internalsMap, refMap, refValueMap, shadowHostsMap, shadowRootMap, validationAnchorMap, validityMap, validationMessageMap, validityUpgradeMap, } from "./maps.js";
import { createHiddenInput, findParentForm, initRef, mutationObserverExists, removeHiddenInputs, setDisabled, throwIfNotFormAssociated, upgradeInternals, } from "./utils.js";
import { initAom } from "./aom.js";
import { ValidityState, reconcileValidity, setValid } from "./ValidityState.js";
import { deferUpgrade, observerCallback, observerConfig, } from "./mutation-observers.js";
import { CustomStateSet } from "./CustomStateSet.js";
import { patchFormPrototype } from "./patch-form-prototype.js";
export class ElementInternals {

@@ -13,4 +13,4 @@ static get isPolyfilled() {

constructor(ref) {
if (!ref || !ref.tagName || ref.tagName.indexOf('-') === -1) {
throw new TypeError('Illegal constructor');
if (!ref || !ref.tagName || ref.tagName.indexOf("-") === -1) {
throw new TypeError("Illegal constructor");
}

@@ -46,6 +46,6 @@ const rootNode = ref.getRootNode();

if (!validity.valid) {
const validityEvent = new Event('invalid', {
const validityEvent = new Event("invalid", {
bubbles: false,
cancelable: true,
composed: false
composed: false,
});

@@ -61,3 +61,3 @@ ref.dispatchEvent(validityEvent);

let form;
if (ref.constructor['formAssociated'] === true) {
if (ref.constructor["formAssociated"] === true) {
form = findParentForm(ref);

@@ -71,3 +71,3 @@ }

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');
const id = ref.getAttribute("id");
const hostRoot = ref.getRootNode();

@@ -89,3 +89,3 @@ if (hostRoot && id) {

const anchor = validationAnchorMap.get(this);
if (anchor && !ref.constructor['formAssociated']) {
if (anchor && !ref.constructor["formAssociated"]) {
throw new DOMException(`Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);

@@ -105,3 +105,3 @@ }

if (value != null && !(value instanceof FormData)) {
if (ref.getAttribute('name')) {
if (ref.getAttribute("name")) {
const hiddenInput = createHiddenInput(ref, this);

@@ -112,4 +112,6 @@ hiddenInput.value = value;

else if (value != null && value instanceof FormData) {
Array.from(value).reverse().forEach(([formDataKey, formDataValue]) => {
if (typeof formDataValue === 'string') {
Array.from(value)
.reverse()
.forEach(([formDataKey, formDataValue]) => {
if (typeof formDataValue === "string") {
const hiddenInput = createHiddenInput(ref, this);

@@ -134,3 +136,3 @@ hiddenInput.name = formDataKey;

if (!validityChanges) {
throw new TypeError('Failed to execute \'setValidity\' on \'ElementInternals\': 1 argument required, but only 0 present.');
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
}

@@ -152,9 +154,9 @@ validationAnchorMap.set(this, anchor);

}
validationMessageMap.set(this, valid ? '' : validationMessage);
validationMessageMap.set(this, valid ? "" : validationMessage);
// check to make sure the host element is connected before adding attributes
// because safari doesnt allow elements to have attributes added in the constructor
if (ref.isConnected) {
ref.toggleAttribute('internals-invalid', !valid);
ref.toggleAttribute('internals-valid', valid);
ref.setAttribute('aria-invalid', `${!valid}`);
ref.toggleAttribute("internals-invalid", !valid);
ref.toggleAttribute("internals-valid", valid);
ref.setAttribute("aria-invalid", `${!valid}`);
}

@@ -190,4 +192,6 @@ else {

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')) ||
ref.hasAttribute('readonly')) {
if (ref.matches(":disabled") ||
ref["disabled"] ||
ref.hasAttribute("disabled") ||
ref.hasAttribute("readonly")) {
return false;

@@ -199,3 +203,5 @@ }

export function isElementInternalsSupported() {
if (typeof window === 'undefined' || !window.ElementInternals || !HTMLElement.prototype.attachInternals) {
if (typeof window === "undefined" ||
!window.ElementInternals ||
!HTMLElement.prototype.attachInternals) {
return false;

@@ -209,17 +215,19 @@ }

}
const randomName = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, '')}`;
const randomName = `element-internals-feature-detection-${Math.random()
.toString(36)
.replace(/[^a-z]+/g, "")}`;
customElements.define(randomName, ElementInternalsFeatureDetection);
const featureDetectionElement = new ElementInternalsFeatureDetection();
return [
'shadowRoot',
'form',
'willValidate',
'validity',
'validationMessage',
'labels',
'setFormValue',
'setValidity',
'checkValidity',
'reportValidity'
].every(prop => prop in featureDetectionElement.internals);
"shadowRoot",
"form",
"willValidate",
"validity",
"validationMessage",
"labels",
"setFormValue",
"setValidity",
"checkValidity",
"reportValidity",
].every((prop) => prop in featureDetectionElement.internals);
}

@@ -238,2 +246,3 @@ let hasElementInternalsPolyfillBeenApplied = false;

hasCustomStateSetPolyfillBeenApplied = true;
/** @ts-expect-error These types won't match because this is a polyfill */
window.CustomStateSet = CustomStateSet;

@@ -264,7 +273,7 @@ if (attachInternals) {

hasElementInternalsPolyfillBeenApplied = true;
if (typeof window !== 'undefined') {
if (typeof window !== "undefined") {
/** @ts-expect-error: we need to replace the default ElementInternals */
window.ElementInternals = ElementInternals;
}
if (typeof CustomElementRegistry !== 'undefined') {
if (typeof CustomElementRegistry !== "undefined") {
const define = CustomElementRegistry.prototype.define;

@@ -277,3 +286,3 @@ CustomElementRegistry.prototype.define = function (name, constructor, options) {

connectedCallbackMap.set(this, true);
if (this.hasAttribute('disabled')) {
if (this.hasAttribute("disabled")) {
setDisabled(this, true);

@@ -296,3 +305,3 @@ }

*/
if (typeof HTMLElement !== 'undefined') {
if (typeof HTMLElement !== "undefined") {
HTMLElement.prototype.attachInternals = function () {

@@ -303,3 +312,3 @@ if (!this.tagName) {

}
else if (this.tagName.indexOf('-') === -1) {
else if (this.tagName.indexOf("-") === -1) {
throw new Error(`Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.`);

@@ -313,3 +322,3 @@ }

}
if (typeof Element !== 'undefined') {
if (typeof Element !== "undefined") {
function attachShadowObserver(...args) {

@@ -333,3 +342,3 @@ const shadowRoot = attachShadow.apply(this, args);

}
if (mutationObserverExists() && typeof document !== 'undefined') {
if (mutationObserverExists() && typeof document !== "undefined") {
const documentObserver = new MutationObserver(observerCallback);

@@ -342,3 +351,3 @@ documentObserver.observe(document.documentElement, observerConfig);

*/
if (typeof HTMLFormElement !== 'undefined') {
if (typeof HTMLFormElement !== "undefined") {
patchFormPrototype();

@@ -345,0 +354,0 @@ }

13

dist/index.d.ts

@@ -1,7 +0,6 @@

import { ElementInternals } from './element-internals.js';
import { CustomStateSet } from './CustomStateSet.js';
import './element-internals.js';
import { IElementInternals } from './types.js';
export * from './types.js';
export { forceCustomStateSetPolyfill, forceElementInternalsPolyfill, } from './element-internals.js';
import { ElementInternals } from "./element-internals.js";
import { CustomStateSet } from "./CustomStateSet.js";
import "./element-internals.js";
export * from "./types.js";
export { forceCustomStateSetPolyfill, forceElementInternalsPolyfill, } from "./element-internals.js";
declare global {

@@ -18,4 +17,4 @@ interface Window {

*/
attachInternals(): ElementInternals & IElementInternals;
attachInternals(): ElementInternals;
}
}

857

dist/index.js

@@ -1,845 +0,16 @@

(function (exports) {
'use strict';
const refMap = new WeakMap();
const validityMap = new WeakMap();
const hiddenInputMap = new WeakMap();
const internalsMap = new WeakMap();
const validationMessageMap = new WeakMap();
const formsMap = new WeakMap();
const shadowHostsMap = new WeakMap();
const formElementsMap = new WeakMap();
const refValueMap = new WeakMap();
const upgradeMap = new WeakMap();
const shadowRootMap = new WeakMap();
const validationAnchorMap = new WeakMap();
const documentFragmentMap = new WeakMap();
const connectedCallbackMap = new WeakMap();
const validityUpgradeMap = new WeakMap();
const aom = {
ariaAtomic: 'aria-atomic',
ariaAutoComplete: 'aria-autocomplete',
ariaBusy: 'aria-busy',
ariaChecked: 'aria-checked',
ariaColCount: 'aria-colcount',
ariaColIndex: 'aria-colindex',
ariaColIndexText: 'aria-colindextext',
ariaColSpan: 'aria-colspan',
ariaCurrent: 'aria-current',
ariaDescription: 'aria-description',
ariaDisabled: 'aria-disabled',
ariaExpanded: 'aria-expanded',
ariaHasPopup: 'aria-haspopup',
ariaHidden: 'aria-hidden',
ariaInvalid: 'aria-invalid',
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',
ariaRowIndexText: 'aria-rowindextext',
ariaRowSpan: 'aria-rowspan',
ariaSelected: 'aria-selected',
ariaSetSize: 'aria-setsize',
ariaSort: 'aria-sort',
ariaValueMax: 'aria-valuemax',
ariaValueMin: 'aria-valuemin',
ariaValueNow: 'aria-valuenow',
ariaValueText: 'aria-valuetext',
role: 'role'
};
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);
}
}
});
}
};
function initNode(node) {
const internals = internalsMap.get(node);
const { form } = internals;
initForm(node, form, internals);
initLabels(node, internals.labels);
import { forceCustomStateSetPolyfill, forceElementInternalsPolyfill, isElementInternalsSupported, } from "./element-internals.js";
import "./element-internals.js";
export * from "./types.js";
export { forceCustomStateSetPolyfill, forceElementInternalsPolyfill, } from "./element-internals.js";
// Deteermine whether the webcomponents polyfill has been applied.
const isCePolyfill = !!customElements.polyfillWrapFlushCallback;
// custom elements polyfill is on. Do not auto-apply. User should determine
// whether to force or not.
if (!isCePolyfill) {
if (!isElementInternalsSupported()) {
forceElementInternalsPolyfill(false);
}
const walkFieldset = (node, firstRender = false) => {
const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, {
acceptNode(node) {
return internalsMap.has(node) ?
NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
let current = walker.nextNode();
const isCallNecessary = (!firstRender || node.disabled);
while (current) {
if (current.formDisabledCallback && isCallNecessary) {
setDisabled(current, node.disabled);
}
current = walker.nextNode();
}
};
const disabledOrNameObserverConfig = { attributes: true, attributeFilter: ['disabled', 'name'] };
const disabledOrNameObserver = mutationObserverExists() ? new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
const target = mutation.target;
if (mutation.attributeName === 'disabled') {
if (target.constructor['formAssociated']) {
setDisabled(target, target.hasAttribute('disabled'));
}
else if (target.localName === 'fieldset') {
walkFieldset(target);
}
}
if (mutation.attributeName === 'name') {
if (target.constructor['formAssociated']) {
const internals = internalsMap.get(target);
const value = refValueMap.get(target);
internals.setFormValue(value);
}
}
}
}) : {};
function observerCallback(mutationList) {
mutationList.forEach(mutationRecord => {
const { addedNodes, removedNodes } = mutationRecord;
const added = Array.from(addedNodes);
const removed = Array.from(removedNodes);
added.forEach(node => {
var _a;
if (internalsMap.has(node) && node.constructor['formAssociated']) {
initNode(node);
}
if (upgradeMap.has(node)) {
const internals = upgradeMap.get(node);
const aomKeys = Object.keys(aom);
aomKeys
.filter(key => internals[key] !== null)
.forEach(key => {
node.setAttribute(aom[key], internals[key]);
});
upgradeMap.delete(node);
}
if (validityUpgradeMap.has(node)) {
const internals = validityUpgradeMap.get(node);
node.setAttribute('internals-valid', internals.validity.valid.toString());
node.setAttribute('internals-invalid', (!internals.validity.valid).toString());
node.setAttribute('aria-invalid', (!internals.validity.valid).toString());
validityUpgradeMap.delete(node);
}
if (node.localName === 'form') {
const formElements = formElementsMap.get(node);
const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, {
acceptNode(node) {
return (internalsMap.has(node) && node.constructor['formAssociated'] && !(formElements && formElements.has(node))) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
let current = walker.nextNode();
while (current) {
initNode(current);
current = walker.nextNode();
}
}
if (node.localName === 'fieldset') {
(_a = disabledOrNameObserver.observe) === null || _a === void 0 ? void 0 : _a.call(disabledOrNameObserver, node, disabledOrNameObserverConfig);
walkFieldset(node, true);
}
});
removed.forEach(node => {
const internals = internalsMap.get(node);
if (internals && hiddenInputMap.get(internals)) {
removeHiddenInputs(internals);
}
if (shadowHostsMap.has(node)) {
const observer = shadowHostsMap.get(node);
observer.disconnect();
}
});
});
else if (typeof window !== "undefined" && !window.CustomStateSet) {
forceCustomStateSetPolyfill(HTMLElement.prototype.attachInternals);
}
function fragmentObserverCallback(mutationList) {
mutationList.forEach(mutation => {
const { removedNodes } = mutation;
removedNodes.forEach(node => {
const observer = documentFragmentMap.get(mutation.target);
if (internalsMap.has(node)) {
upgradeInternals(node);
}
observer.disconnect();
});
});
}
const deferUpgrade = (fragment) => {
var _a, _b;
const observer = new MutationObserver(fragmentObserverCallback);
if (((_a = window === null || window === void 0 ? void 0 : window.ShadyDOM) === null || _a === void 0 ? void 0 : _a.inUse) &&
fragment.mode &&
fragment.host) {
fragment = fragment.host;
}
(_b = observer.observe) === null || _b === void 0 ? void 0 : _b.call(observer, fragment, { childList: true });
documentFragmentMap.set(fragment, observer);
};
mutationObserverExists() ? new MutationObserver(observerCallback) : {};
const observerConfig = {
childList: true,
subtree: true
};
const setDisabled = (ref, disabled) => {
ref.toggleAttribute('internals-disabled', disabled);
if (disabled) {
ref.setAttribute('aria-disabled', 'true');
}
else {
ref.removeAttribute('aria-disabled');
}
if (ref.formDisabledCallback) {
ref.formDisabledCallback.apply(ref, [disabled]);
}
};
const removeHiddenInputs = (internals) => {
const hiddenInputs = hiddenInputMap.get(internals);
hiddenInputs.forEach(hiddenInput => {
hiddenInput.remove();
});
hiddenInputMap.set(internals, []);
};
const createHiddenInput = (ref, internals) => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = ref.getAttribute('name');
ref.after(input);
hiddenInputMap.get(internals).push(input);
return input;
};
const initRef = (ref, internals) => {
var _a;
hiddenInputMap.set(internals, []);
(_a = disabledOrNameObserver.observe) === null || _a === void 0 ? void 0 : _a.call(disabledOrNameObserver, ref, disabledOrNameObserverConfig);
};
const initLabels = (ref, labels) => {
if (labels.length) {
Array.from(labels).forEach(label => label.addEventListener('click', ref.click.bind(ref)));
let firstLabelId = labels[0].id;
if (!labels[0].id) {
firstLabelId = `${labels[0].htmlFor}_Label`;
labels[0].id = firstLabelId;
}
ref.setAttribute('aria-labelledby', firstLabelId);
}
};
const setFormValidity = (form) => {
const nativeControlValidity = Array.from(form.elements)
.filter((element) => !element.tagName.includes('-') && element.validity)
.map((element) => element.validity.valid);
const polyfilledElements = formElementsMap.get(form) || [];
const polyfilledValidity = Array.from(polyfilledElements)
.filter(control => control.isConnected)
.map((control) => internalsMap.get(control).validity.valid);
const hasInvalid = [...nativeControlValidity, ...polyfilledValidity].includes(false);
form.toggleAttribute('internals-invalid', hasInvalid);
form.toggleAttribute('internals-valid', !hasInvalid);
};
const formInputCallback = (event) => {
setFormValidity(findParentForm(event.target));
};
const formChangeCallback = (event) => {
setFormValidity(findParentForm(event.target));
};
const wireSubmitLogic = (form) => {
const submitButtonSelector = ['button[type=submit]', 'input[type=submit]', 'button:not([type])']
.map(sel => `${sel}:not([disabled])`)
.map(sel => `${sel}:not([form])${form.id ? `,${sel}[form='${form.id}']` : ''}`)
.join(',');
form.addEventListener('click', event => {
const target = event.target;
if (target.closest(submitButtonSelector)) {
const elements = formElementsMap.get(form);
if (form.noValidate) {
return;
}
if (elements.size) {
const nodes = Array.from(elements);
const validityList = nodes
.reverse()
.map(node => {
const internals = internalsMap.get(node);
return internals.reportValidity();
});
if (validityList.includes(false)) {
event.preventDefault();
}
}
}
});
};
const formResetCallback = (event) => {
const elements = formElementsMap.get(event.target);
if (elements && elements.size) {
elements.forEach(element => {
if (element.constructor.formAssociated && element.formResetCallback) {
element.formResetCallback.apply(element);
}
});
}
};
const initForm = (ref, form, internals) => {
if (form) {
const formElements = formElementsMap.get(form);
if (formElements) {
formElements.add(ref);
}
else {
const initSet = new Set();
initSet.add(ref);
formElementsMap.set(form, initSet);
wireSubmitLogic(form);
form.addEventListener('reset', formResetCallback);
form.addEventListener('input', formInputCallback);
form.addEventListener('change', formChangeCallback);
}
formsMap.set(form, { ref, internals });
if (ref.constructor['formAssociated'] && ref.formAssociatedCallback) {
setTimeout(() => {
ref.formAssociatedCallback.apply(ref, [form]);
}, 0);
}
setFormValidity(form);
}
};
const findParentForm = (elem) => {
let parent = elem.parentNode;
if (parent && parent.tagName !== 'FORM') {
parent = findParentForm(parent);
}
return parent;
};
const throwIfNotFormAssociated = (ref, message, ErrorType = DOMException) => {
if (!ref.constructor['formAssociated']) {
throw new ErrorType(message);
}
};
const overrideFormMethod = (form, returnValue, method) => {
const elements = formElementsMap.get(form);
if (elements && elements.size) {
elements.forEach(element => {
const internals = internalsMap.get(element);
const valid = internals[method]();
if (!valid) {
returnValue = false;
}
});
}
return returnValue;
};
const upgradeInternals = (ref) => {
if (ref.constructor['formAssociated']) {
const internals = internalsMap.get(ref);
const { labels, form } = internals;
initLabels(ref, labels);
initForm(ref, form, internals);
}
};
function mutationObserverExists() {
return typeof MutationObserver !== 'undefined';
}
class ValidityState {
constructor() {
this.badInput = false;
this.customError = false;
this.patternMismatch = false;
this.rangeOverflow = false;
this.rangeUnderflow = false;
this.stepMismatch = false;
this.tooLong = false;
this.tooShort = false;
this.typeMismatch = false;
this.valid = true;
this.valueMissing = false;
Object.seal(this);
}
}
const setValid = (validityObject) => {
validityObject.badInput = false;
validityObject.customError = false;
validityObject.patternMismatch = false;
validityObject.rangeOverflow = false;
validityObject.rangeUnderflow = false;
validityObject.stepMismatch = false;
validityObject.tooLong = false;
validityObject.tooShort = false;
validityObject.typeMismatch = false;
validityObject.valid = true;
validityObject.valueMissing = false;
return validityObject;
};
const reconcileValidity = (validityObject, newState, form) => {
validityObject.valid = isValid(newState);
Object.keys(newState).forEach(key => validityObject[key] = newState[key]);
if (form) {
setFormValidity(form);
}
return validityObject;
};
const isValid = (validityState) => {
let valid = true;
for (let key in validityState) {
if (key !== 'valid' && validityState[key] !== false) {
valid = false;
}
}
return valid;
};
const customStateMap = new WeakMap();
function addState(ref, stateName) {
ref.toggleAttribute(stateName, true);
if (ref.part) {
ref.part.add(stateName);
}
}
class CustomStateSet extends Set {
static get isPolyfilled() {
return true;
}
constructor(ref) {
super();
if (!ref || !ref.tagName || ref.tagName.indexOf('-') === -1) {
throw new TypeError('Illegal constructor');
}
customStateMap.set(this, ref);
}
add(state) {
if (!/^--/.test(state) || typeof state !== 'string') {
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${state} must start with '--'.`);
}
const result = super.add(state);
const ref = customStateMap.get(this);
const stateName = `state${state}`;
if (ref.isConnected) {
addState(ref, stateName);
}
else {
setTimeout(() => {
addState(ref, stateName);
});
}
return result;
}
clear() {
for (let [entry] of this.entries()) {
this.delete(entry);
}
super.clear();
}
delete(state) {
const result = super.delete(state);
const ref = customStateMap.get(this);
if (ref.isConnected) {
ref.toggleAttribute(`state${state}`, false);
if (ref.part) {
ref.part.remove(`state${state}`);
}
}
else {
setTimeout(() => {
ref.toggleAttribute(`state${state}`, false);
if (ref.part) {
ref.part.remove(`state${state}`);
}
});
}
return result;
}
}
function __classPrivateFieldGet(receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
}
function __classPrivateFieldSet(receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
}
var _HTMLFormControlsCollection_elements;
class HTMLFormControlsCollection {
constructor(elements) {
_HTMLFormControlsCollection_elements.set(this, void 0);
__classPrivateFieldSet(this, _HTMLFormControlsCollection_elements, elements, "f");
for (let i = 0; i < elements.length; i++) {
let element = elements[i];
this[i] = element;
if (element.hasAttribute('name')) {
this[element.getAttribute('name')] = element;
}
}
Object.freeze(this);
}
get length() {
return __classPrivateFieldGet(this, _HTMLFormControlsCollection_elements, "f").length;
}
[(_HTMLFormControlsCollection_elements = new WeakMap(), Symbol.iterator)]() {
return __classPrivateFieldGet(this, _HTMLFormControlsCollection_elements, "f")[Symbol.iterator]();
}
item(i) {
return this[i] == null ? null : this[i];
}
namedItem(name) {
return this[name] == null ? null : this[name];
}
}
function patchFormPrototype() {
const checkValidity = HTMLFormElement.prototype.checkValidity;
HTMLFormElement.prototype.checkValidity = checkValidityOverride;
const reportValidity = HTMLFormElement.prototype.reportValidity;
HTMLFormElement.prototype.reportValidity = reportValidityOverride;
function checkValidityOverride(...args) {
let returnValue = checkValidity.apply(this, args);
return overrideFormMethod(this, returnValue, 'checkValidity');
}
function reportValidityOverride(...args) {
let returnValue = reportValidity.apply(this, args);
return overrideFormMethod(this, returnValue, 'reportValidity');
}
const { get } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, 'elements');
Object.defineProperty(HTMLFormElement.prototype, 'elements', {
get(...args) {
const elements = get.call(this, ...args);
const polyfilledElements = Array.from(formElementsMap.get(this) || []);
if (polyfilledElements.length === 0) {
return elements;
}
const orderedElements = Array.from(elements).concat(polyfilledElements).sort((a, b) => {
if (a.compareDocumentPosition) {
return a.compareDocumentPosition(b) & 2 ? 1 : -1;
}
return 0;
});
return new HTMLFormControlsCollection(orderedElements);
},
});
}
class ElementInternals {
static get isPolyfilled() {
return true;
}
constructor(ref) {
if (!ref || !ref.tagName || ref.tagName.indexOf('-') === -1) {
throw new TypeError('Illegal constructor');
}
const rootNode = ref.getRootNode();
const validity = new ValidityState();
this.states = new CustomStateSet(ref);
refMap.set(this, ref);
validityMap.set(this, validity);
internalsMap.set(ref, this);
initAom(ref, this);
initRef(ref, this);
Object.seal(this);
if (rootNode instanceof DocumentFragment) {
deferUpgrade(rootNode);
}
}
checkValidity() {
const ref = refMap.get(this);
throwIfNotFormAssociated(ref, `Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
if (!this.willValidate) {
return true;
}
const validity = validityMap.get(this);
if (!validity.valid) {
const validityEvent = new Event('invalid', {
bubbles: false,
cancelable: true,
composed: false
});
ref.dispatchEvent(validityEvent);
}
return validity.valid;
}
get form() {
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;
if (ref.constructor['formAssociated'] === true) {
form = findParentForm(ref);
}
return form;
}
get labels() {
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');
const hostRoot = ref.getRootNode();
if (hostRoot && id) {
return hostRoot.querySelectorAll(`[for="${id}"]`);
}
return [];
}
reportValidity() {
const ref = refMap.get(this);
throwIfNotFormAssociated(ref, `Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
if (!this.willValidate) {
return true;
}
const valid = this.checkValidity();
const anchor = validationAnchorMap.get(this);
if (anchor && !ref.constructor['formAssociated']) {
throw new DOMException(`Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
}
if (!valid && anchor) {
ref.focus();
anchor.focus();
}
return valid;
}
setFormValue(value) {
const ref = refMap.get(this);
throwIfNotFormAssociated(ref, `Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element.`);
removeHiddenInputs(this);
if (value != null && !(value instanceof FormData)) {
if (ref.getAttribute('name')) {
const hiddenInput = createHiddenInput(ref, this);
hiddenInput.value = value;
}
}
else if (value != null && value instanceof FormData) {
Array.from(value).reverse().forEach(([formDataKey, formDataValue]) => {
if (typeof formDataValue === 'string') {
const hiddenInput = createHiddenInput(ref, this);
hiddenInput.name = formDataKey;
hiddenInput.value = formDataValue;
}
});
}
refValueMap.set(ref, value);
}
setValidity(validityChanges, validationMessage, anchor) {
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) {
throw new TypeError('Failed to execute \'setValidity\' on \'ElementInternals\': 1 argument required, but only 0 present.');
}
validationAnchorMap.set(this, anchor);
const validity = validityMap.get(this);
const validityChangesObj = {};
for (const key in validityChanges) {
validityChangesObj[key] = validityChanges[key];
}
if (Object.keys(validityChangesObj).length === 0) {
setValid(validity);
}
const check = Object.assign(Object.assign({}, validity), validityChangesObj);
delete check.valid;
const { valid } = reconcileValidity(validity, check, this.form);
if (!valid && !validationMessage) {
throw new DOMException(`Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.`);
}
validationMessageMap.set(this, valid ? '' : validationMessage);
if (ref.isConnected) {
ref.toggleAttribute('internals-invalid', !valid);
ref.toggleAttribute('internals-valid', valid);
ref.setAttribute('aria-invalid', `${!valid}`);
}
else {
validityUpgradeMap.set(ref, this);
}
}
get shadowRoot() {
const ref = refMap.get(this);
const shadowRoot = shadowRootMap.get(ref);
if (shadowRoot) {
return shadowRoot;
}
return null;
}
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);
}
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);
return validity;
}
get willValidate() {
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')) ||
ref.hasAttribute('readonly')) {
return false;
}
return true;
}
}
function isElementInternalsSupported() {
if (typeof window === 'undefined' || !window.ElementInternals || !HTMLElement.prototype.attachInternals) {
return false;
}
class ElementInternalsFeatureDetection extends HTMLElement {
constructor() {
super();
this.internals = this.attachInternals();
}
}
const randomName = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, '')}`;
customElements.define(randomName, ElementInternalsFeatureDetection);
const featureDetectionElement = new ElementInternalsFeatureDetection();
return [
'shadowRoot',
'form',
'willValidate',
'validity',
'validationMessage',
'labels',
'setFormValue',
'setValidity',
'checkValidity',
'reportValidity'
].every(prop => prop in featureDetectionElement.internals);
}
let hasElementInternalsPolyfillBeenApplied = false;
let hasCustomStateSetPolyfillBeenApplied = false;
function forceCustomStateSetPolyfill(attachInternals) {
if (hasCustomStateSetPolyfillBeenApplied) {
return;
}
hasCustomStateSetPolyfillBeenApplied = true;
window.CustomStateSet = CustomStateSet;
if (attachInternals) {
HTMLElement.prototype.attachInternals = function (...args) {
const internals = attachInternals.call(this, args);
internals.states = new CustomStateSet(this);
return internals;
};
}
}
function forceElementInternalsPolyfill(forceCustomStateSet = true) {
if (hasElementInternalsPolyfillBeenApplied) {
return;
}
hasElementInternalsPolyfillBeenApplied = true;
if (typeof window !== 'undefined') {
window.ElementInternals = ElementInternals;
}
if (typeof CustomElementRegistry !== 'undefined') {
const define = CustomElementRegistry.prototype.define;
CustomElementRegistry.prototype.define = function (name, constructor, options) {
if (constructor.formAssociated) {
const connectedCallback = constructor.prototype.connectedCallback;
constructor.prototype.connectedCallback = function () {
if (!connectedCallbackMap.has(this)) {
connectedCallbackMap.set(this, true);
if (this.hasAttribute('disabled')) {
setDisabled(this, true);
}
}
if (connectedCallback != null) {
connectedCallback.apply(this);
}
upgradeInternals(this);
};
}
define.call(this, name, constructor, options);
};
}
if (typeof HTMLElement !== 'undefined') {
HTMLElement.prototype.attachInternals = function () {
if (!this.tagName) {
return {};
}
else if (this.tagName.indexOf('-') === -1) {
throw new Error(`Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.`);
}
if (internalsMap.has(this)) {
throw new DOMException(`DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.`);
}
return new ElementInternals(this);
};
}
if (typeof Element !== 'undefined') {
function attachShadowObserver(...args) {
const shadowRoot = attachShadow.apply(this, args);
shadowRootMap.set(this, shadowRoot);
if (mutationObserverExists()) {
const observer = new MutationObserver(observerCallback);
if (window.ShadyDOM) {
observer.observe(this, observerConfig);
}
else {
observer.observe(shadowRoot, observerConfig);
}
shadowHostsMap.set(this, observer);
}
return shadowRoot;
}
const attachShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = attachShadowObserver;
}
if (mutationObserverExists() && typeof document !== 'undefined') {
const documentObserver = new MutationObserver(observerCallback);
documentObserver.observe(document.documentElement, observerConfig);
}
if (typeof HTMLFormElement !== 'undefined') {
patchFormPrototype();
}
if (forceCustomStateSet ||
(typeof window !== "undefined" && !window.CustomStateSet)) {
forceCustomStateSetPolyfill();
}
}
const isCePolyfill = !!customElements.polyfillWrapFlushCallback;
if (!isCePolyfill) {
if (!isElementInternalsSupported()) {
forceElementInternalsPolyfill(false);
}
else if (typeof window !== "undefined" && !window.CustomStateSet) {
forceCustomStateSetPolyfill(HTMLElement.prototype.attachInternals);
}
}
exports.forceCustomStateSetPolyfill = forceCustomStateSetPolyfill;
exports.forceElementInternalsPolyfill = forceElementInternalsPolyfill;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
})({});
}

27

dist/maps.d.ts

@@ -6,32 +6,31 @@ /**

*/
import { IElementInternals, ICustomElement } from './types';
/** Use an ElementInternals instance to get a reference to the element it is attached to */
export declare const refMap: WeakMap<IElementInternals, ICustomElement>;
export declare const refMap: WeakMap<ElementInternals, FormAssociatedCustomElement>;
/** Usee an ElementsInternals instance to get its ValidityState object */
export declare const validityMap: WeakMap<IElementInternals, ValidityState>;
export declare const validityMap: WeakMap<ElementInternals, ValidityState>;
/** Use an ElementInternals instance to get its attached input[type="hidden"] */
export declare const hiddenInputMap: WeakMap<IElementInternals, HTMLInputElement[]>;
export declare const hiddenInputMap: WeakMap<ElementInternals, HTMLInputElement[]>;
/** Use a custom element to get its attached ElementInternals instance */
export declare const internalsMap: WeakMap<ICustomElement, IElementInternals>;
export declare const internalsMap: WeakMap<FormAssociatedCustomElement, ElementInternals>;
/** Use an ElementInternals instance to get the attached validation message */
export declare const validationMessageMap: WeakMap<IElementInternals, string>;
export declare const validationMessageMap: WeakMap<ElementInternals, string>;
/** Use a form element to get attached custom elements and ElementInternals instances */
export declare const formsMap: WeakMap<HTMLFormElement, Object>;
/** Use a custom element or other object to get their associated MutationObservers */
export declare const shadowHostsMap: WeakMap<ICustomElement, MutationObserver>;
export declare const shadowHostsMap: WeakMap<FormAssociatedCustomElement, MutationObserver>;
/** Use a form element to get a set of attached custom elements */
export declare const formElementsMap: WeakMap<HTMLFormElement, Set<ICustomElement>>;
export declare const formElementsMap: WeakMap<HTMLFormElement, Set<FormAssociatedCustomElement>>;
/** Use an ElementInternals instance to get a reference to an element's value */
export declare const refValueMap: WeakMap<ICustomElement, any>;
export declare const refValueMap: WeakMap<FormAssociatedCustomElement, any>;
/** Elements that need to be upgraded once added to the DOM */
export declare const upgradeMap: WeakMap<Element, IElementInternals>;
export declare const upgradeMap: WeakMap<Element, ElementInternals>;
/** Save references to shadow roots for inclusion in internals instance */
export declare const shadowRootMap: WeakMap<ICustomElement, ShadowRoot>;
export declare const shadowRootMap: WeakMap<FormAssociatedCustomElement, ShadowRoot>;
/** Save a reference to the internals' validation anchor */
export declare const validationAnchorMap: WeakMap<IElementInternals, HTMLElement>;
export declare const validationAnchorMap: WeakMap<ElementInternals, HTMLElement>;
/** Map DocumentFragments to their MutationObservers so we can disconnect once elements are removed */
export declare const documentFragmentMap: WeakMap<DocumentFragment, MutationObserver>;
/** Whether connectedCallback has already been called. */
export declare const connectedCallbackMap: WeakMap<ICustomElement, boolean>;
export declare const connectedCallbackMap: WeakMap<FormAssociatedCustomElement, boolean>;
/** Save a reference to validity state for elements that need to upgrade after being connected */
export declare const validityUpgradeMap: WeakMap<ICustomElement, IElementInternals>;
export declare const validityUpgradeMap: WeakMap<FormAssociatedCustomElement, ElementInternals>;

5

dist/maps.js

@@ -0,1 +1,6 @@

/**
* This file contains the WeakMaps used throughout this project. The WeakMaps exist to tie
* objects together without polluting the objects themselves with references we'd rather keep
* hidden. This allows the polyfill to work as transparently as possible.
*/
/** Use an ElementInternals instance to get a reference to the element it is attached to */

@@ -2,0 +7,0 @@ export const refMap = new WeakMap();

92

dist/types.d.ts

@@ -1,60 +0,34 @@

import { CustomStateSet } from './CustomStateSet.js';
import { ElementInternals } from './element-internals.js';
export interface IAom {
ariaAtomic: string;
ariaAutoComplete: string;
ariaBusy: string;
ariaChecked: string;
ariaColCount: string;
ariaColIndex: string;
ariaColIndexText: string;
ariaColSpan: string;
ariaCurrent: string;
ariaDescription: string;
ariaDisabled: string;
ariaExpanded: string;
ariaHasPopup: string;
ariaHidden: string;
ariaInvalid: string;
ariaKeyShortcuts: string;
ariaLabel: string;
ariaLevel: string;
ariaLive: string;
ariaModal: string;
ariaMultiLine: string;
ariaMultiSelectable: string;
ariaOrientation: string;
ariaPlaceholder: string;
ariaPosInSet: string;
ariaPressed: string;
ariaReadOnly: string;
ariaRelevant: string;
ariaRequired: string;
ariaRoleDescription: string;
ariaRowCount: string;
ariaRowIndex: string;
ariaRowIndexText: string;
ariaRowSpan: string;
ariaSelected: string;
ariaSetSize: string;
ariaSort: string;
ariaValueMax: string;
ariaValueMin: string;
ariaValueNow: string;
ariaValueText: string;
role: string;
import { ElementInternals } from "./element-internals.js";
declare global {
interface ARIAMixin {
/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaBrailleLabel) */
ariaBrailleLabel: string | null;
/** [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaBrailleRoleDescription) */
ariaBrailleRoleDescription: string | null;
/** [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaColIndexText) */
ariaColIndexText: string;
/** [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRelevant) */
ariaRelevant: string;
/** [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaRowIndexText) */
ariaRowIndexText: string;
}
interface ElementInternals extends ARIAMixin {
checkValidity: () => boolean;
readonly form: HTMLFormElement;
readonly labels: NodeList;
reportValidity: () => boolean;
setFormValue: (value: File | string | FormData | null, state?: File | string | FormData | null) => void;
setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
readonly shadowRoot: ShadowRoot | null;
readonly states: CustomStateSet;
readonly validationMessage: string;
readonly validity: ValidityState;
readonly willValidate: boolean;
}
interface FormAssociatedCustomElement extends HTMLElement {
formDisabledCallback?: (isDisabled: boolean) => void;
formResetCallback: () => void;
formAssociatedCallback: (form: HTMLFormElement) => void;
}
}
export interface IElementInternals extends IAom {
checkValidity: () => boolean;
form: HTMLFormElement;
labels: LabelsList;
reportValidity: () => boolean;
setFormValue: (value: string | FormData | null) => void;
setValidity: (validityChanges: Partial<ValidityState>, validationMessage?: string, anchor?: HTMLElement) => void;
shadowRoot: ShadowRoot | null;
states: CustomStateSet;
validationMessage: string;
validity: ValidityState;
willValidate: boolean;
}
export interface ICustomElement extends HTMLElement {

@@ -75,4 +49,4 @@ constructor: (...args: any[]) => HTMLElement;

interface HTMLElement {
attachInternals(): IElementInternals;
attachInternals(): ElementInternals;
}
}

39

dist/utils.d.ts

@@ -1,36 +0,35 @@

import { ICustomElement, IElementInternals, LabelsList } from './types.js';
/**
* Toggle's the disabled state (attributes & callback) on the given element
* @param {ICustomElement} ref - The custom element instance
* @param {HTMLElement} ref - The custom element instance
* @param {boolean} disabled - The disabled state
*/
export declare const setDisabled: (ref: ICustomElement, disabled: boolean) => void;
export declare const setDisabled: (ref: FormAssociatedCustomElement, disabled: boolean) => void;
/**
* Removes all hidden inputs for the given element internals instance
* @param {IElementInternals} internals - The element internals instance
* @param {ElementInternals} internals - The element internals instance
* @return {void}
*/
export declare const removeHiddenInputs: (internals: IElementInternals) => void;
export declare const removeHiddenInputs: (internals: ElementInternals) => void;
/**
* Creates a hidden input for the given ref
* @param {ICustomElement} ref - The element to watch
* @param {IElementInternals} internals - The element internals instance for the ref
* @param {HTMLElement} ref - The element to watch
* @param {ElementInternals} internals - The element internals instance for the ref
* @return {HTMLInputElement} The hidden input
*/
export declare const createHiddenInput: (ref: ICustomElement, internals: IElementInternals) => HTMLInputElement | null;
export declare const createHiddenInput: (ref: HTMLElement, internals: ElementInternals) => HTMLInputElement | null;
/**
* Initialize a ref by setting up an attribute observe on it
* looking for changes to disabled
* @param {ICustomElement} ref - The element to watch
* @param {IElementInternals} internals - The element internals instance for the ref
* @param {HTMLElement} ref - The element to watch
* @param {ElementInternals} internals - The element internals instance for the ref
* @return {void}
*/
export declare const initRef: (ref: ICustomElement, internals: IElementInternals) => void;
export declare const initRef: (ref: HTMLElement, internals: ElementInternals) => void;
/**
* Set up labels for the ref
* @param {ICustomElement} ref - The ref to add labels to
* @param {LabelsList} labels - A list of the labels
* @param {HTMLElement} ref - The ref to add labels to
* @param {NodeList} labels - A list of the labels
* @return {void}
*/
export declare const initLabels: (ref: ICustomElement, labels: LabelsList) => void;
export declare const initLabels: (ref: HTMLElement, labels: NodeList) => void;
/**

@@ -78,3 +77,3 @@ * Sets the internals-valid and internals-invalid attributes

*/
export declare const initForm: (ref: ICustomElement, form: HTMLFormElement, internals: IElementInternals) => void;
export declare const initForm: (ref: FormAssociatedCustomElement, form: HTMLFormElement, internals: ElementInternals) => void;
/**

@@ -88,7 +87,7 @@ * Recursively look for an element's parent form

* Throw an error if the element ref is not form associated
* @param ref {ICustomElement} - The element to check if it is form associated
* @param ref {HTMLElement} - 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;
export declare const throwIfNotFormAssociated: (ref: HTMLElement, message: string, ErrorType?: any) => void;
/**

@@ -103,3 +102,3 @@ * Called for each HTMLFormElement.checkValidity|reportValidity

*/
export declare const overrideFormMethod: (form: HTMLFormElement, returnValue: boolean, method: 'checkValidity' | 'reportValidity') => boolean;
export declare const overrideFormMethod: (form: HTMLFormElement, returnValue: boolean, method: "checkValidity" | "reportValidity") => boolean;
/**

@@ -109,5 +108,5 @@ * Will upgrade an ElementInternals instance by initializing the

* either constructed or appended from a DocumentFragment
* @param ref {ICustomElement} - The custom element to upgrade
* @param ref {HTMLElement} - The custom element to upgrade
*/
export declare const upgradeInternals: (ref: ICustomElement) => void;
export declare const upgradeInternals: (ref: FormAssociatedCustomElement) => void;
/**

@@ -114,0 +113,0 @@ * Check to see if MutationObserver exists in the current

102

dist/utils.js

@@ -1,15 +0,15 @@

import { hiddenInputMap, formsMap, formElementsMap, internalsMap } from './maps.js';
import { disabledOrNameObserver, disabledOrNameObserverConfig } from './mutation-observers.js';
import { hiddenInputMap, formsMap, formElementsMap, internalsMap, } from "./maps.js";
import { disabledOrNameObserver, disabledOrNameObserverConfig, } from "./mutation-observers.js";
/**
* Toggle's the disabled state (attributes & callback) on the given element
* @param {ICustomElement} ref - The custom element instance
* @param {HTMLElement} ref - The custom element instance
* @param {boolean} disabled - The disabled state
*/
export const setDisabled = (ref, disabled) => {
ref.toggleAttribute('internals-disabled', disabled);
ref.toggleAttribute("internals-disabled", disabled);
if (disabled) {
ref.setAttribute('aria-disabled', 'true');
ref.setAttribute("aria-disabled", "true");
}
else {
ref.removeAttribute('aria-disabled');
ref.removeAttribute("aria-disabled");
}

@@ -22,3 +22,3 @@ if (ref.formDisabledCallback) {

* Removes all hidden inputs for the given element internals instance
* @param {IElementInternals} internals - The element internals instance
* @param {ElementInternals} internals - The element internals instance
* @return {void}

@@ -28,3 +28,3 @@ */

const hiddenInputs = hiddenInputMap.get(internals);
hiddenInputs.forEach(hiddenInput => {
hiddenInputs.forEach((hiddenInput) => {
hiddenInput.remove();

@@ -36,10 +36,10 @@ });

* Creates a hidden input for the given ref
* @param {ICustomElement} ref - The element to watch
* @param {IElementInternals} internals - The element internals instance for the ref
* @param {HTMLElement} ref - The element to watch
* @param {ElementInternals} internals - The element internals instance for the ref
* @return {HTMLInputElement} The hidden input
*/
export const createHiddenInput = (ref, internals) => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = ref.getAttribute('name');
const input = document.createElement("input");
input.type = "hidden";
input.name = ref.getAttribute("name");
ref.after(input);

@@ -52,4 +52,4 @@ hiddenInputMap.get(internals).push(input);

* looking for changes to disabled
* @param {ICustomElement} ref - The element to watch
* @param {IElementInternals} internals - The element internals instance for the ref
* @param {HTMLElement} ref - The element to watch
* @param {ElementInternals} internals - The element internals instance for the ref
* @return {void}

@@ -63,4 +63,4 @@ */

* Set up labels for the ref
* @param {ICustomElement} ref - The ref to add labels to
* @param {LabelsList} labels - A list of the labels
* @param {HTMLElement} ref - The ref to add labels to
* @param {NodeList} labels - A list of the labels
* @return {void}

@@ -70,9 +70,11 @@ */

if (labels.length) {
Array.from(labels).forEach(label => label.addEventListener('click', ref.click.bind(ref)));
let firstLabelId = labels[0].id;
if (!labels[0].id) {
firstLabelId = `${labels[0].htmlFor}_Label`;
labels[0].id = firstLabelId;
const labelList = Array.from(labels);
labelList.forEach((label) => label.addEventListener("click", ref.click.bind(ref)));
const [firstLabel] = labelList;
let firstLabelId = firstLabel.id;
if (!firstLabel.id) {
firstLabelId = `${firstLabel.htmlFor}_Label`;
firstLabel.id = firstLabelId;
}
ref.setAttribute('aria-labelledby', firstLabelId);
ref.setAttribute("aria-labelledby", firstLabelId);
}

@@ -88,11 +90,11 @@ };

const nativeControlValidity = Array.from(form.elements)
.filter((element) => !element.tagName.includes('-') && element.validity)
.filter((element) => !element.tagName.includes("-") && element.validity)
.map((element) => element.validity.valid);
const polyfilledElements = formElementsMap.get(form) || [];
const polyfilledValidity = Array.from(polyfilledElements)
.filter(control => control.isConnected)
.filter((control) => control.isConnected)
.map((control) => internalsMap.get(control).validity.valid);
const hasInvalid = [...nativeControlValidity, ...polyfilledValidity].includes(false);
form.toggleAttribute('internals-invalid', hasInvalid);
form.toggleAttribute('internals-valid', !hasInvalid);
form.toggleAttribute("internals-invalid", hasInvalid);
form.toggleAttribute("internals-valid", !hasInvalid);
};

@@ -124,7 +126,11 @@ /**

export const wireSubmitLogic = (form) => {
const submitButtonSelector = ['button[type=submit]', 'input[type=submit]', 'button:not([type])']
.map(sel => `${sel}:not([disabled])`)
.map(sel => `${sel}:not([form])${form.id ? `,${sel}[form='${form.id}']` : ''}`)
.join(',');
form.addEventListener('click', event => {
const submitButtonSelector = [
"button[type=submit]",
"input[type=submit]",
"button:not([type])",
]
.map((sel) => `${sel}:not([disabled])`)
.map((sel) => `${sel}:not([form])${form.id ? `,${sel}[form='${form.id}']` : ""}`)
.join(",");
form.addEventListener("click", (event) => {
const target = event.target;

@@ -144,5 +150,3 @@ if (target.closest(submitButtonSelector)) {

/** Check the internals.checkValidity() of all nodes */
const validityList = nodes
.reverse()
.map(node => {
const validityList = nodes.reverse().map((node) => {
const internals = internalsMap.get(node);

@@ -170,4 +174,5 @@ return internals.reportValidity();

/** Loop over the elements and call formResetCallback if applicable */
elements.forEach(element => {
if (element.constructor.formAssociated && element.formResetCallback) {
elements.forEach((element) => {
if (element.constructor.formAssociated &&
element.formResetCallback) {
element.formResetCallback.apply(element);

@@ -201,9 +206,9 @@ }

wireSubmitLogic(form);
form.addEventListener('reset', formResetCallback);
form.addEventListener('input', formInputCallback);
form.addEventListener('change', formChangeCallback);
form.addEventListener("reset", formResetCallback);
form.addEventListener("input", formInputCallback);
form.addEventListener("change", formChangeCallback);
}
formsMap.set(form, { ref, internals });
/** Call formAssociatedCallback if applicable */
if (ref.constructor['formAssociated'] && ref.formAssociatedCallback) {
if (ref.constructor["formAssociated"] && ref.formAssociatedCallback) {
setTimeout(() => {

@@ -223,3 +228,3 @@ ref.formAssociatedCallback.apply(ref, [form]);

let parent = elem.parentNode;
if (parent && parent.tagName !== 'FORM') {
if (parent && parent.tagName !== "FORM") {
parent = findParentForm(parent);

@@ -231,3 +236,3 @@ }

* Throw an error if the element ref is not form associated
* @param ref {ICustomElement} - The element to check if it is form associated
* @param ref {HTMLElement} - The element to check if it is form associated
* @param message {string} - The error message to throw

@@ -237,3 +242,3 @@ * @param ErrorType {any} - The error type to throw, defaults to DOMException

export const throwIfNotFormAssociated = (ref, message, ErrorType = DOMException) => {
if (!ref.constructor['formAssociated']) {
if (!ref.constructor["formAssociated"]) {
throw new ErrorType(message);

@@ -255,3 +260,3 @@ }

if (elements && elements.size) {
elements.forEach(element => {
elements.forEach((element) => {
const internals = internalsMap.get(element);

@@ -270,6 +275,6 @@ const valid = internals[method]();

* either constructed or appended from a DocumentFragment
* @param ref {ICustomElement} - The custom element to upgrade
* @param ref {HTMLElement} - The custom element to upgrade
*/
export const upgradeInternals = (ref) => {
if (ref.constructor['formAssociated']) {
if (ref.constructor["formAssociated"]) {
const internals = internalsMap.get(ref);

@@ -287,4 +292,3 @@ const { labels, form } = internals;

export function mutationObserverExists() {
return typeof MutationObserver !== 'undefined';
return typeof MutationObserver !== "undefined";
}
;

9

package.json
{
"name": "element-internals-polyfill",
"version": "1.3.11",
"version": "1.3.12-alpha.0",
"description": "A polyfill for the element internals specification",

@@ -19,6 +19,7 @@ "main": "dist/index.js",

"start": "rollup -c --watch --environment BUILD:dev",
"build": "rollup -c --environment BUILD:production",
"build": "tsc",
"prerelease": "npm run build",
"release": "standard-version",
"postrelease": "git push --follow-tags origin master; npm publish"
"postrelease": "git push --follow-tags origin master; npm publish",
"release:alpha": "npm run release -- --prerelease alpha"
},

@@ -79,4 +80,4 @@ "repository": {

"tslib": "^2.1.0",
"typescript": "^4.5.2"
"typescript": "^5.5.4"
}
}
dist/index.js.map
dist/new-index.d.ts
dist/new-index.js
dist/polyfill-custom-state-set.d.ts
dist/polyfill-custom-state-set.js
dist/polyfill-global.d.ts
dist/polyfill-global.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc