{"version":3,"file":"elements.mjs","sources":["../../../node_modules/element-internals-polyfill/dist/index.js","../../../node_modules/@nesis/lib-element/src/_Element.mjs","../../../node_modules/@nesis/lib-element/src/_constants.mjs","../../../node_modules/@nesis/lib-element/src/mixin/_FormInputMixin.mjs","../../../node_modules/@nesis/lib-element/src/_functions.mjs","../../../node_modules/@nesis/lib-element/src/_defineElement.mjs","../transpile/form/container/_form_container_mixin.mjs","../transpile/form/container/button_bar/_button_bar.html.mjs","../../../src/form/container/button_bar/_button_bar.scss","../transpile/form/container/button_bar/_ButtonBarElement.mjs","../transpile/form/container/page/_page.html.mjs","../../../src/form/container/_container.scss","../../../src/form/container/page/_page.scss","../transpile/form/container/page/_page.mjs","../transpile/form/container/section/_section.html.mjs","../../../src/form/container/section/_section.scss","../transpile/form/container/section/_section.mjs","../../../src/form/input/boolean/_boolean.scss","../transpile/form/input/boolean/_boolean.html.mjs","../transpile/form/input/boolean/_boolean.mjs","../../../src/form/input/_input.scss","../transpile/form/input/_input.html.mjs","../transpile/form/input/_constants.mjs","../transpile/form/input/date/_date.mjs","../transpile/form/input/datetime/_datetime.mjs","../transpile/form/input/email/_email.mjs","../transpile/form/input/long/_long.html.mjs","../transpile/form/input/long/_long.mjs","../transpile/form/input/number/_number.mjs","../transpile/form/input/option/_option.html.mjs","../transpile/form/input/option/_option.mjs","../transpile/form/input/_functions.mjs","../transpile/form/input/_InputOptionsMixin.mjs","../transpile/form/input/option/_functions.mjs","../../../src/form/input/option/_option_group.scss","../../../src/form/input/option/_option.scss","../transpile/form/input/option/_option_group.html.mjs","../transpile/form/input/option/_option_group.mjs","../transpile/form/input/phone/_phone.mjs","../transpile/form/input/range/_range.mjs","../../../src/form/input/rating/_rating.scss","../transpile/form/input/rating/_rating.html.mjs","../transpile/form/input/rating/_rating.mjs","../../../src/form/input/secret/_secret.scss","../transpile/form/input/secret/_secret.html.mjs","../transpile/form/input/secret/_secret.mjs","../transpile/form/input/select/_select.html.mjs","../transpile/form/input/select/_select.mjs","../transpile/form/input/text/_text.mjs","../transpile/form/input/time/_time.mjs","../transpile/form/input/url/_url.mjs","../transpile/form/actions/reset/_reset.html.mjs","../../../src/form/actions/_action.scss","../transpile/form/actions/reset/_reset.mjs","../transpile/form/actions/submit/_submit.html.mjs","../transpile/form/actions/submit/_submit.mjs","../transpile/elements.mjs"],"sourcesContent":["(function () {\n 'use strict';\n\n const refMap = new WeakMap();\n const validityMap = new WeakMap();\n const hiddenInputMap = new WeakMap();\n const internalsMap = new WeakMap();\n const validationMessageMap = new WeakMap();\n const formsMap = new WeakMap();\n const shadowHostsMap = new WeakMap();\n const formElementsMap = new WeakMap();\n const refValueMap = new WeakMap();\n const upgradeMap = new WeakMap();\n const shadowRootMap = new WeakMap();\n const validationAnchorMap = new WeakMap();\n const documentFragmentMap = new WeakMap();\n\n const observerConfig$1 = { attributes: true, attributeFilter: ['disabled'] };\n const observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n const target = mutation.target;\n if (target.constructor['formAssociated']) {\n const isDisabled = target.hasAttribute('disabled');\n target.toggleAttribute('internals-disabled', isDisabled);\n if (isDisabled) {\n target.setAttribute('aria-disabled', 'true');\n }\n else {\n target.removeAttribute('aria-disabled');\n }\n if (target.formDisabledCallback) {\n target.formDisabledCallback.apply(target, [isDisabled]);\n }\n }\n }\n });\n const removeHiddenInputs = (internals) => {\n const hiddenInputs = hiddenInputMap.get(internals);\n hiddenInputs.forEach(hiddenInput => {\n hiddenInput.remove();\n });\n hiddenInputMap.set(internals, []);\n };\n const createHiddenInput = (ref, internals) => {\n const input = document.createElement('input');\n input.type = 'hidden';\n input.name = ref.getAttribute('name');\n ref.after(input);\n hiddenInputMap.get(internals).push(input);\n return input;\n };\n const initRef = (ref, internals) => {\n hiddenInputMap.set(internals, []);\n const isDisabled = ref.hasAttribute('disabled');\n ref.toggleAttribute('internals-disabled', isDisabled);\n observer.observe(ref, observerConfig$1);\n };\n const initLabels = (ref, labels) => {\n if (labels.length) {\n Array.from(labels).forEach(label => label.addEventListener('click', ref.focus.bind(ref)));\n let firstLabelId = labels[0].id;\n if (!labels[0].id) {\n firstLabelId = `${labels[0].htmlFor}_Label`;\n labels[0].id = firstLabelId;\n }\n ref.setAttribute('aria-labelledby', firstLabelId);\n }\n };\n const setFormValidity = (form) => {\n const nativeControlValidity = Array.from(form.elements)\n .filter((element) => element.validity)\n .map((element) => element.validity.valid);\n const polyfilledElements = formElementsMap.get(form) || [];\n const polyfilledValidity = Array.from(polyfilledElements)\n .filter(control => control.isConnected)\n .map((control) => internalsMap.get(control).validity.valid);\n const hasInvalid = [...nativeControlValidity, ...polyfilledValidity].includes(false);\n form.toggleAttribute('internals-invalid', hasInvalid);\n form.toggleAttribute('internals-valid', !hasInvalid);\n };\n const formInputCallback = (event) => {\n setFormValidity(findParentForm(event.target));\n };\n const formChangeCallback = (event) => {\n setFormValidity(findParentForm(event.target));\n };\n const wireSubmitLogic = (form) => {\n const SUBMIT_BUTTON_SELECTOR = ':is(:is(button, input)[type=submit], button:not([type])):not([disabled])';\n let submitButtonSelector = `${SUBMIT_BUTTON_SELECTOR}:not([form])`;\n if (form.id) {\n submitButtonSelector += `,${SUBMIT_BUTTON_SELECTOR}[form='${form.id}']`;\n }\n form.addEventListener('click', event => {\n const target = event.target;\n if (target.closest(submitButtonSelector)) {\n const elements = formElementsMap.get(form);\n if (form.noValidate) {\n return;\n }\n if (elements.size) {\n const nodes = Array.from(elements);\n const validityList = nodes\n .reverse()\n .map(node => {\n const internals = internalsMap.get(node);\n return internals.reportValidity();\n });\n if (validityList.includes(false)) {\n event.preventDefault();\n }\n }\n }\n });\n };\n const formResetCallback = (event) => {\n const elements = formElementsMap.get(event.target);\n if (elements && elements.size) {\n elements.forEach(element => {\n if (element.constructor.formAssociated && element.formResetCallback) {\n element.formResetCallback.apply(element);\n }\n });\n }\n };\n const initForm = (ref, form, internals) => {\n if (form) {\n const formElements = formElementsMap.get(form);\n if (formElements) {\n formElements.add(ref);\n }\n else {\n const initSet = new Set();\n initSet.add(ref);\n formElementsMap.set(form, initSet);\n wireSubmitLogic(form);\n form.addEventListener('reset', formResetCallback);\n form.addEventListener('input', formInputCallback);\n form.addEventListener('change', formChangeCallback);\n }\n formsMap.set(form, { ref, internals });\n if (ref.constructor['formAssociated'] && ref.formAssociatedCallback) {\n setTimeout(() => {\n ref.formAssociatedCallback.apply(ref, [form]);\n }, 0);\n }\n setFormValidity(form);\n }\n };\n const findParentForm = (elem) => {\n let parent = elem.parentNode;\n if (parent && parent.tagName !== 'FORM') {\n parent = findParentForm(parent);\n }\n return parent;\n };\n const throwIfNotFormAssociated = (ref, message, ErrorType = DOMException) => {\n if (!ref.constructor['formAssociated']) {\n throw new ErrorType(message);\n }\n };\n const overrideFormMethod = (form, returnValue, method) => {\n const elements = formElementsMap.get(form);\n if (elements && elements.size) {\n elements.forEach(element => {\n const internals = internalsMap.get(element);\n const valid = internals[method]();\n if (!valid) {\n returnValue = false;\n }\n });\n }\n return returnValue;\n };\n const upgradeInternals = (ref) => {\n if (ref.constructor['formAssociated']) {\n const internals = internalsMap.get(ref);\n const { labels, form } = internals;\n initLabels(ref, labels);\n initForm(ref, form, internals);\n }\n };\n\n const aom = {\n ariaAtomic: 'aria-atomic',\n ariaAutoComplete: 'aria-autocomplete',\n ariaBusy: 'aria-busy',\n ariaChecked: 'aria-checked',\n ariaColCount: 'aria-colcount',\n ariaColIndex: 'aria-colindex',\n ariaColSpan: 'aria-colspan',\n ariaCurrent: 'aria-current',\n ariaDisabled: 'aria-disabled',\n ariaExpanded: 'aria-expanded',\n ariaHasPopup: 'aria-haspopup',\n ariaHidden: 'aria-hidden',\n ariaKeyShortcuts: 'aria-keyshortcuts',\n ariaLabel: 'aria-label',\n ariaLevel: 'aria-level',\n ariaLive: 'aria-live',\n ariaModal: 'aria-modal',\n ariaMultiLine: 'aria-multiline',\n ariaMultiSelectable: 'aria-multiselectable',\n ariaOrientation: 'aria-orientation',\n ariaPlaceholder: 'aria-placeholder',\n ariaPosInSet: 'aria-posinset',\n ariaPressed: 'aria-pressed',\n ariaReadOnly: 'aria-readonly',\n ariaRelevant: 'aria-relevant',\n ariaRequired: 'aria-required',\n ariaRoleDescription: 'aria-roledescription',\n ariaRowCount: 'aria-rowcount',\n ariaRowIndex: 'aria-rowindex',\n ariaRowSpan: 'aria-rowspan',\n ariaSelected: 'aria-selected',\n ariaSetSize: 'aria-setsize',\n ariaSort: 'aria-sort',\n ariaValueMax: 'aria-valuemax',\n ariaValueMin: 'aria-valuemin',\n ariaValueNow: 'aria-valuenow',\n ariaValueText: 'aria-valuetext',\n role: 'role'\n };\n const initAom = (ref, internals) => {\n for (let key in aom) {\n internals[key] = null;\n let closureValue = null;\n const attributeName = aom[key];\n Object.defineProperty(internals, key, {\n get() {\n return closureValue;\n },\n set(value) {\n closureValue = value;\n if (ref.isConnected) {\n ref.setAttribute(attributeName, value);\n }\n else {\n upgradeMap.set(ref, internals);\n }\n }\n });\n }\n };\n\n class ValidityState {\n constructor() {\n this.badInput = false;\n this.customError = false;\n this.patternMismatch = false;\n this.rangeOverflow = false;\n this.rangeUnderflow = false;\n this.stepMismatch = false;\n this.tooLong = false;\n this.tooShort = false;\n this.typeMismatch = false;\n this.valid = true;\n this.valueMissing = false;\n Object.seal(this);\n }\n }\n const setValid = (validityObject) => {\n validityObject.badInput = false;\n validityObject.customError = false;\n validityObject.patternMismatch = false;\n validityObject.rangeOverflow = false;\n validityObject.rangeUnderflow = false;\n validityObject.stepMismatch = false;\n validityObject.tooLong = false;\n validityObject.tooShort = false;\n validityObject.typeMismatch = false;\n validityObject.valid = true;\n validityObject.valueMissing = false;\n return validityObject;\n };\n const reconcileValidity = (validityObject, newState, form) => {\n validityObject.valid = isValid(newState);\n Object.keys(newState).forEach(key => validityObject[key] = newState[key]);\n if (form) {\n setFormValidity(form);\n }\n return validityObject;\n };\n const isValid = (validityState) => {\n let valid = true;\n for (let key in validityState) {\n if (key !== 'valid' && validityState[key] !== false) {\n valid = false;\n }\n }\n return valid;\n };\n\n function initNode(node) {\n const internals = internalsMap.get(node);\n const { form } = internals;\n initForm(node, form, internals);\n initLabels(node, internals.labels);\n }\n function observerCallback(mutationList) {\n mutationList.forEach(mutationRecord => {\n const { addedNodes, removedNodes } = mutationRecord;\n const added = Array.from(addedNodes);\n const removed = Array.from(removedNodes);\n added.forEach(node => {\n if (internalsMap.has(node) && node.constructor['formAssociated']) {\n initNode(node);\n }\n if (upgradeMap.has(node)) {\n const internals = upgradeMap.get(node);\n const aomKeys = Object.keys(aom);\n aomKeys\n .filter(key => internals[key] !== null)\n .forEach(key => {\n node.setAttribute(aom[key], internals[key]);\n });\n upgradeMap.delete(node);\n }\n if (node.localName === 'form') {\n const formElements = formElementsMap.get(node);\n const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, {\n acceptNode(node) {\n return internalsMap.has(node) && !formElements && !formElements.has(node) ?\n NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n }\n });\n let current = walker.nextNode();\n while (current) {\n initNode(current);\n current = walker.nextNode();\n }\n }\n });\n removed.forEach(node => {\n const internals = internalsMap.get(node);\n if (internals && hiddenInputMap.get(internals)) {\n removeHiddenInputs(internals);\n }\n if (shadowHostsMap.has(node)) {\n const observer = shadowHostsMap.get(node);\n observer.disconnect();\n }\n });\n });\n }\n function fragmentObserverCallback(mutationList) {\n mutationList.forEach(mutation => {\n const { removedNodes } = mutation;\n removedNodes.forEach(node => {\n const observer = documentFragmentMap.get(mutation.target);\n if (internalsMap.has(node)) {\n upgradeInternals(node);\n }\n observer.disconnect();\n });\n });\n }\n const deferUpgrade = (fragment) => {\n const observer = new MutationObserver(fragmentObserverCallback);\n observer.observe(fragment, { childList: true });\n documentFragmentMap.set(fragment, observer);\n };\n new MutationObserver(observerCallback);\n const observerConfig = {\n childList: true,\n subtree: true\n };\n\n const customStateMap = new WeakMap();\n class CustomStateSet extends Set {\n static get isPolyfilled() {\n return true;\n }\n constructor(ref) {\n super();\n if (!ref || !ref.tagName || ref.tagName.indexOf('-') === -1) {\n throw new TypeError('Illegal constructor');\n }\n customStateMap.set(this, ref);\n }\n add(state) {\n if (!/^--/.test(state) || typeof state !== 'string') {\n throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${state} must start with '--'.`);\n }\n const result = super.add(state);\n const ref = customStateMap.get(this);\n ref.toggleAttribute(`state${state}`, true);\n if (ref.part) {\n ref.part.add(`state${state}`);\n }\n return result;\n }\n clear() {\n for (let [entry] of this.entries()) {\n this.delete(entry);\n }\n super.clear();\n }\n delete(state) {\n const result = super.delete(state);\n const ref = customStateMap.get(this);\n ref.toggleAttribute(`state${state}`, false);\n if (ref.part) {\n ref.part.remove(`state${state}`);\n }\n return result;\n }\n }\n\n class ElementInternals {\n constructor(ref) {\n if (!ref || !ref.tagName || ref.tagName.indexOf('-') === -1) {\n throw new TypeError('Illegal constructor');\n }\n const rootNode = ref.getRootNode();\n const validity = new ValidityState();\n this.states = new CustomStateSet(ref);\n refMap.set(this, ref);\n validityMap.set(this, validity);\n internalsMap.set(ref, this);\n initAom(ref, this);\n initRef(ref, this);\n Object.seal(this);\n upgradeInternals(ref);\n if (rootNode instanceof DocumentFragment) {\n deferUpgrade(rootNode);\n }\n }\n static get isPolyfilled() {\n return true;\n }\n checkValidity() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);\n if (!this.willValidate) {\n return true;\n }\n const validity = validityMap.get(this);\n if (!validity.valid) {\n const validityEvent = new Event('invalid', {\n bubbles: false,\n cancelable: true,\n composed: false\n });\n ref.dispatchEvent(validityEvent);\n }\n return validity.valid;\n }\n get form() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.`);\n let form;\n if (ref.constructor['formAssociated'] === true) {\n form = findParentForm(ref);\n }\n return form;\n }\n get labels() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.`);\n const id = ref.getAttribute('id');\n const hostRoot = ref.getRootNode();\n if (hostRoot && id) {\n return hostRoot.querySelectorAll(`[for=\"${id}\"]`);\n }\n return [];\n }\n reportValidity() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);\n if (!this.willValidate) {\n return true;\n }\n const valid = this.checkValidity();\n const anchor = validationAnchorMap.get(this);\n if (anchor && !ref.constructor['formAssociated']) {\n throw new DOMException(`Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);\n }\n if (!valid && anchor) {\n ref.focus();\n anchor.focus();\n }\n return valid;\n }\n setFormValue(value) {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element.`);\n removeHiddenInputs(this);\n if (value != null && !(value instanceof FormData)) {\n if (ref.getAttribute('name')) {\n const hiddenInput = createHiddenInput(ref, this);\n hiddenInput.value = value;\n }\n }\n else if (value != null && value instanceof FormData) {\n Array.from(value).reverse().forEach(([formDataKey, formDataValue]) => {\n if (typeof formDataValue === 'string') {\n const hiddenInput = createHiddenInput(ref, this);\n hiddenInput.name = formDataKey;\n hiddenInput.value = formDataValue;\n }\n });\n }\n refValueMap.set(ref, value);\n }\n setValidity(validityChanges, validationMessage, anchor) {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);\n if (!validityChanges) {\n throw new TypeError('Failed to execute \\'setValidity\\' on \\'ElementInternals\\': 1 argument required, but only 0 present.');\n }\n validationAnchorMap.set(this, anchor);\n const validity = validityMap.get(this);\n const validityChangesObj = {};\n for (const key in validityChanges) {\n validityChangesObj[key] = validityChanges[key];\n }\n if (Object.keys(validityChangesObj).length === 0) {\n setValid(validity);\n }\n const check = { ...validity, ...validityChangesObj };\n delete check.valid;\n const { valid } = reconcileValidity(validity, check, this.form);\n if (!valid && !validationMessage) {\n 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.`);\n }\n validationMessageMap.set(this, valid ? '' : validationMessage);\n ref.toggleAttribute('internals-invalid', !valid);\n ref.toggleAttribute('internals-valid', valid);\n ref.setAttribute('aria-invalid', `${!valid}`);\n }\n get shadowRoot() {\n const ref = refMap.get(this);\n const shadowRoot = shadowRootMap.get(ref);\n if (shadowRoot) {\n return shadowRoot;\n }\n return null;\n }\n get validationMessage() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element.`);\n return validationMessageMap.get(this);\n }\n get validity() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element.`);\n const validity = validityMap.get(this);\n return validity;\n }\n get willValidate() {\n const ref = refMap.get(this);\n throwIfNotFormAssociated(ref, `Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element.`);\n if ((ref.disabled || ref.hasAttribute('disabled')) ||\n ref.hasAttribute('readonly')) {\n return false;\n }\n return true;\n }\n }\n function isElementInternalsSupported() {\n if (!window.ElementInternals) {\n return false;\n }\n class ElementInternalsFeatureDetection extends HTMLElement {\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n }\n const randomName = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, '')}`;\n customElements.define(randomName, ElementInternalsFeatureDetection);\n const featureDetectionElement = new ElementInternalsFeatureDetection();\n return [\n 'shadowRoot',\n 'form',\n 'willValidate',\n 'validity',\n 'validationMessage',\n 'labels',\n 'setFormValue',\n 'setValidity',\n 'checkValidity',\n 'reportValidity'\n ].every(prop => prop in featureDetectionElement.internals);\n }\n if (!isElementInternalsSupported()) {\n window.ElementInternals = ElementInternals;\n function attachShadowObserver(...args) {\n const shadowRoot = attachShadow.apply(this, args);\n const observer = new MutationObserver(observerCallback);\n shadowRootMap.set(this, shadowRoot);\n if (window.ShadyDOM) {\n observer.observe(this, observerConfig);\n }\n else {\n observer.observe(shadowRoot, observerConfig);\n }\n shadowHostsMap.set(this, observer);\n return shadowRoot;\n }\n function checkValidityOverride(...args) {\n let returnValue = checkValidity.apply(this, args);\n return overrideFormMethod(this, returnValue, 'checkValidity');\n }\n function reportValidityOverride(...args) {\n let returnValue = reportValidity.apply(this, args);\n return overrideFormMethod(this, returnValue, 'reportValidity');\n }\n HTMLElement.prototype.attachInternals = function () {\n if (this.tagName.indexOf('-') === -1) {\n throw new Error(`Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.`);\n }\n if (internalsMap.has(this)) {\n throw new DOMException(`DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.`);\n }\n return new ElementInternals(this);\n };\n const attachShadow = Element.prototype.attachShadow;\n Element.prototype.attachShadow = attachShadowObserver;\n const documentObserver = new MutationObserver(observerCallback);\n documentObserver.observe(document.documentElement, observerConfig);\n const checkValidity = HTMLFormElement.prototype.checkValidity;\n HTMLFormElement.prototype.checkValidity = checkValidityOverride;\n const reportValidity = HTMLFormElement.prototype.reportValidity;\n HTMLFormElement.prototype.reportValidity = reportValidityOverride;\n if (!window.CustomStateSet) {\n window.CustomStateSet = CustomStateSet;\n }\n }\n else if (!window.CustomStateSet) {\n window.CustomStateSet = CustomStateSet;\n const attachInternals = HTMLElement.prototype.attachInternals;\n HTMLElement.prototype.attachInternals = function (...args) {\n const internals = attachInternals.call(this, args);\n internals.states = new CustomStateSet(this);\n return internals;\n };\n }\n\n}());\n","/**\n * @public\n * @class Element\n * @description base class for all elements\n */\nexport class Element {\n #context;\n #internals;\n\n /**\n * @constructor\n * @description constructor accepts the element that wraps this instance\n * @param {HTMLElement} context of this web element instance\n * @param {ElementInternals} [internals] of element\n */\n constructor(context, internals) {\n this.#context = context;\n this.#internals = internals;\n }\n\n /**\n * @public\n * @description allows the element to access its parent html element\n * @return {HTMLElement} context wrapping this element\n */\n get context() {\n return this.#context;\n }\n\n /**\n * @public\n * @description allows child classes to access its parent html\n * element internals\n * @return {ElementInternals} internals instance or null if not set\n */\n get internals() {\n return this.#internals;\n }\n\n /**\n * @public\n * @description default connectedCallback method. called when html element is\n * added to a document\n */\n connectedCallback() {}\n\n /**\n * @public\n * @description default disconnectedCalleback method. called when html element\n * is removed from its document\n */\n disconnectedCallback() {}\n\n /**\n * @public\n * @description default shadowReadyCallback method. called during\n * construction of the html elment. use this method to get references to the\n * elements html, but do not modify the parent element.\n */\n templateReadyCallback() {}\n}\n","/**\n * @public\n * @readonly\n * @enum {string}\n * @description enumeration of allowable Element.mode values\n */\nexport const ShadowMode = Object.freeze({\n NONE: 'none',\n OPEN: 'open',\n CLOSED: 'closed',\n});\n","/* eslint max-len : \"off\" */\n/**\n * @public\n * @hideconstructor\n * @mixin\n * @description mixin for abstracting form input functionality. the goal is to\n * promote consistency, and reduce code duplication.\n * @param {class} Base class that functionality is being added to\n * @return {class}\n * @see [MDN: Mix-ins]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#mix-ins}\n * @see [MDN: Using templates and slots]{@link https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots}\n * @see [Promise API]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise}\n */\nexport const FormInputMixin = (Base) => class extends Base {\n #labelEl;\n #inputEl;\n\n /**\n * @description constructor passes through arguments and binds handlers to\n * this context.\n * @param {...object} args passed through to super\n */\n constructor(...args) {\n super(...args);\n this.handleBlur = this.handleBlur.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n /**\n * @public\n * @instance\n * @readonly\n * @memberof FormInputMixin\n * @description gets a reference to the input component's label element\n * @return {HTMLElement} element\n */\n get labelEl() {\n return this.#labelEl;\n }\n\n /**\n * @public\n * @instance\n * @readonly\n * @memberof FormInputMixin\n * @description gets a reference to the input component's input element\n * @return {HTMLElement} element\n */\n get inputEl() {\n return this.#inputEl;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the autocomplete attribute of input\n * @type {string} newAutocomplete to set\n */\n get autocomplete() {\n return this.#inputEl.autocomplete;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set autocomplete(newAutocomplete) {\n this.#inputEl.autocomplete = newAutocomplete;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the autofocus attribute of input\n * @type {boolean} newAutofocus to set\n */\n get autofocus() {\n return this.#inputEl.autofocus;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set autofocus(newAutofocus) {\n this.#inputEl.autofocus = newAutofocus !== null;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the checked attribute of input\n * @type {boolean} newChecked to set\n */\n get checked() {\n return this.#inputEl.checked;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set checked(newChecked) {\n this.#inputEl.checked = newChecked !== null;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description an initial value that should be set on this input\n * @type {boolean} newDefaultChecked to set\n */\n get defaultChecked() {\n return this.#inputEl.defaultChecked;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set defaultChecked(newDefaultChecked) {\n this.#inputEl.defaultChecked = newDefaultChecked !== null;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description an initial value that should be set on this input\n * @type {any} newDefaultValue to set\n */\n get defaultValue() {\n return this.#inputEl.defaultValue;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set defaultValue(newDefaultValue) {\n this.internals.setFormValue(newDefaultValue);\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the disabled attribute of input\n * @type {boolean} newDisabled to set\n */\n get disabled() {\n return this.#inputEl.disabled;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set disabled(newDisabled) {\n this.#inputEl.disabled = newDisabled !== null;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the label attribute of input\n * @type {string} newLabel to set\n */\n get label() {\n return this.#labelEl.innerText;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set label(newLabel) {\n this.#labelEl.innerText = newLabel;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the max length attribute of input\n * @type {number} newMaxLength to set\n */\n get maxlength() {\n return this.#inputEl.maxlength;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set maxlength(newMaxLength) {\n this.#inputEl.maxLength = newMaxLength;\n }\n\n /**\n *@public\n * @instance\n * @memberof FormInputMixin\n * @description sets the max attribute of input\n * @type {number} newMax to set\n */\n get max() {\n return this.#inputEl.max;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set max(newMax) {\n this.#inputEl.max = newMax;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the min attribute of input\n * @type {string} newMin to set\n */\n get min() {\n return this.#inputEl.min;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set min(newMin) {\n this.#inputEl.min = newMin;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the multiple attribute of input\n * @type {boolean} newMultiple to set\n */\n get multiple() {\n return this.#inputEl.multiple;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set multiple(newMultiple) {\n this.#inputEl.multiple = newMultiple !== null;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the name attribute of input\n * @type {string} newName to set\n */\n get name() {\n return this.#inputEl.name;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set name(newName) {\n this.#inputEl.name = newName;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the pattern attribute of input\n * @type {string} newPattern to set\n */\n get pattern() {\n return this.#inputEl.pattern;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set pattern(newPattern) {\n this.#inputEl.pattern = newPattern;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the placeholder attribute of input\n * @type {string} newPlaceholder to set\n */\n get placeholder() {\n return this.#inputEl.placeholder;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set placeholder(newPlaceholder) {\n this.#inputEl.placeholder = newPlaceholder;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the required attribute of input\n * @type {boolean} newRequired to set\n */\n get required() {\n return this.#inputEl.required;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set required(newRequired) {\n this.#inputEl.required = newRequired !== null;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the step attribute of input\n * @type {number} newStep to set\n */\n get step() {\n return this.#inputEl.step;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set step(newStep) {\n this.#inputEl.step = newStep;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description sets the value attribute of input\n * @type {any} newValue to set\n */\n get value() {\n return this.#inputEl.value;\n }\n\n /* eslint require-jsdoc: \"off\" */\n set value(newValue) {\n this.#inputEl.value = newValue;\n this.internals.setFormValue(newValue);\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description checks the validity of inputEl\n */\n checkValidity() {\n const el = this.#inputEl;\n el.checkValidity();\n this.internals.setValidity(el.validity, el.validationMessage);\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description called when element is appended to the document\n */\n connectedCallback() {\n this.checkValidity();\n this.context.tabIndex = 0; // IMPORTANT: Validation message depends on focus\n this.context.addEventListener('blur', this.handleBlur, false);\n this.#inputEl.addEventListener('change', this.handleChange, false);\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description called when element is removed from the document\n */\n disconnectedCalleback() {\n this.context.removeEventListener('blur', this.handleBlur, false);\n this.#inputEl.removeEventListener('change', this.handleChange, false);\n }\n\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description actions to take on input blur\n * @param {object} e dom event object\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Event|Event}\n */\n handleBlur(e) {\n this.checkValidity();\n // this.inputEl.blur(); doesn't do anything\n this.#inputEl.classList.add('visited');\n if (this.context.hasAttribute('value')) {\n this.context.setAttribute('value', this.#inputEl.value);\n }\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description actions to take on input change\n * @param {object} e dom event object\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Event|Event}\n */\n handleChange(e) {\n const target = e.target;\n this.value = target.value;\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description actions to take on focus event\n */\n handleFocus() {\n this.#inputEl.focus();\n this.#inputEl.classList.remove('visited');\n }\n\n /**\n * @public\n * @instance\n * @memberof FormInputMixin\n * @description called when content is ready, but before its locked behind\n * a closed shadow root\n * @param {Node} rootEl that will be appended to shadow\n */\n templateReadyCallback(rootEl) {\n this.#labelEl = rootEl.querySelector('#label');\n this.#inputEl = rootEl.querySelector('#input');\n }\n};\n","/**\n * @description creates a dom Node for later cloning\n * @param {string} [css=\"\"] styles for component\n * @param {string} [html=\"\"] html for component\n * @return {Node} template\n */\nexport function createTemplate(css ='', html = '') {\n const template = document.createElement('template');\n\n template.innerHTML = `${html}`;\n return template.content;\n}\n\n\n/**\n * @description tests if the provided value is a is a primitive\n * @param {any} value to be tested\n * @return {boolean}\n */\nexport function isPrimitive(value) {\n return (value !== Object(value));\n}\n\n/**\n * @description makes shadowless custom elements mimic the behavior of shadow\n * DOM\n * @param {Element} elementThis element being slotted\n * @param {DocumentFragment} content template where slots should be inserted\n * @return {DocumentFragment} slotted content\n */\nexport function slotContent(elementThis, content) {\n // remove children from the element to reduce number of re-draws\n const fragment = document.createElement('div');\n\n fragment.append(...elementThis.children);\n\n const slots = content.querySelectorAll('slot');\n for (const slot of slots) {\n const slotName = slot.getAttribute('name');\n const slottables = (slotName) ?\n fragment.querySelectorAll(`:scope > *[slot=\"${slotName}\"]`) :\n fragment.querySelectorAll(`:scope > *:not([slot])`);\n\n if (slottables.length > 0) slot.replaceWith(...slottables);\n }\n\n return content;\n}\n","import {createTemplate, slotContent} from './_functions.mjs';\nimport {ShadowMode} from './_constants.mjs';\n\n/**\n * @public\n * @description factory method for creating custom html elements from an\n * annonymous classes. IMPORTANT: properties do not come on line until event\n * DOMContentLoaded has fired no matter how element is created. This might still\n * be that elements.mjs file isn't yet loaded. Something to test.\n * @param {class} Element of the element wrapped by this element\n */\nexport function defineElement(Element) {\n const template = createTemplate(Element.css, Element.html);\n const formAssociated = Element.formAssociated || false;\n const elementInternals = formAssociated ||\n Element.elementInternals || false;\n const mode = Element.mode || ShadowMode.NONE;\n const observedAttributes = Element.observedAttributes || [];\n const observedMethods = Element.observedMethods || [];\n const observedProperties = Element.observedProperties || [];\n\n /**\n * @public\n * @description custom HTML element that wraps any element class configured\n * by the function defineLement\n */\n window.customElements.define(\n Element.tagName.toLowerCase(), class extends HTMLElement {\n #content;\n #element;\n #shadowInitialized = false;\n\n /**\n * @public\n * @memberof defineElement~Element\n * @description optional proprty that tells the browser if this native web\n * element should participate in form activity\n * @type {boolean}\n */\n static formAssociated = formAssociated;\n\n /**\n * @public\n * @memberof defineElement~Element\n * @description list of attributes that will notify a element when\n * changed\n * @type {string[]}\n */\n static get observedAttributes() {\n return observedAttributes;\n }\n\n /**\n * @public\n * @memberof defineElement~Element\n * @description list of methods that will notify compoonent when changed\n * @type {string[]}\n */\n static get observedMethods() {\n return observedMethods;\n }\n\n /**\n * @public\n * @memberof defineElement~Element\n * @description list of properties that will notify compoonent when changed\n * @type {string[]}\n */\n static get observedProperties() {\n return observedProperties;\n }\n\n /**\n * @public\n * @constructor\n * @description creates a new instance of Element. Called by browser\n */\n constructor() {\n super();\n\n // optionally set element internals\n const internals = (elementInternals) ? this.attachInternals() : null;\n\n // create the custom element with this element as its context\n const element = Object.freeze(new Element(this, internals));\n\n // setup observed methods\n for (const observedMethod of observedMethods) {\n Object.defineProperty(this, observedMethod, {\n value: function(...args) {\n return this.#element[observedMethod](...args);\n },\n });\n }\n\n // setup observed properties\n for (const observedProperty of observedProperties) {\n Object.defineProperty(this, observedProperty, {\n get() {\n return this.#element[observedProperty];\n },\n set(value) {\n this.#element[observedProperty] = value;\n },\n });\n }\n\n // cloning is faster than creating so clone once per instance\n const content = template.cloneNode(true);\n\n // allow the element an opportunity to get its dom hooks\n element.templateReadyCallback(content);\n\n // set element content\n this.#content = content;\n\n // assign the custom element to this elements instance\n this.#element = element;\n }\n\n /**\n * @public\n * @instance\n * @memberof defineElement~Element\n * @method attributeChangedCallback\n * @description lifecycle method called by the browser when an observed\n * attribute changes\n * @param {string} name of the attribute that changed\n * @param {string} oldValue of the specified attribute\n * @param {string} newValue of the specified attribute\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (oldValue !== newValue) {\n this.#element[name] = newValue;\n }\n }\n\n /**\n * @public\n * @instance\n * @memberof defineElement~Element\n * @method connectedCallback\n * @description lifecycle method called by the browser when an element is\n * added to the document\n */\n connectedCallback() {\n // call element connectedCallback first\n this.#element.connectedCallback();\n\n // IMPORTANT: only initialize the shadow root one-time\n if (!this.#shadowInitialized) {\n // append the content to the new node\n if (mode === ShadowMode.NONE) {\n this.appendChild(slotContent(this, this.#content));\n } else {\n // IMPORTANT: focus will only be called when this.tabIndex is set.\n this.addEventListener('focus', () => {\n this.focus();\n }, false);\n this.attachShadow({mode: mode}).appendChild(this.#content);\n }\n this.#shadowInitialized = true;\n }\n }\n\n /**\n * @public\n * @instance\n * @memberof defineElement~Element\n * @method disconnectedCallback\n * @description lifecycle method called by the browser when an element is\n * removed from the document\n */\n disconnectedCallback() {\n // call element disconnectedCallback first\n this.#element.disconnectedCallback();\n }\n\n /**\n * @public\n * @instance\n * @memberof defineElement~Element\n * @method focus\n * @description delegates focus to the element\n */\n focus() {\n this.#element.handleFocus();\n }\n },\n );\n}\n","import { ShadowMode } from '@nesis/lib-element';\n/**\n * @public\n * @hideconstructor\n * @mixin\n * @description mixin for abstracting form container functionality. the goal is\n * to promote consistency, and reduce code duplication.\n * @param {class} Base class that functionality is being added to\n * @return {class}\n */\n\nexport const FormContainerMixin = Base => class extends Base {\n static mode = ShadowMode.CLOSED;\n #labelEl;\n #containerEl;\n /**\n * @protected\n * @description gets a reference to the input element's label element\n * @return {HTMLElement} element\n */\n\n get labelEl() {\n return this.#labelEl;\n }\n /**\n * @description sets the label attribute of input\n * @param {string} newLabel to set\n */\n\n\n set label(newLabel) {\n this.#labelEl.innerText = newLabel;\n }\n /**\n * @protected\n * @description gets a reference to the element's container element\n * @return {HTMLElement} element\n */\n\n\n get containerEl() {\n return this.#containerEl;\n }\n /**\n * @description called when content is ready, but before its locked behind\n * a closed shadow root\n * @param {Node} rootEl that will be appended to shadow\n */\n\n\n templateReadyCallback(rootEl) {\n this.#labelEl = rootEl.querySelector('#label');\n this.#containerEl = rootEl.querySelector('#container');\n }\n\n};","export default function(props, tag) {\n tag = tag ||\n (function(strs, ...exps) {\n return strs.reduce(function(res, curr) {\n let exp = exps.shift() || '';\n return res + curr + exp;\n }, '');\n });\n return tag`