semantic-forms 5.1.0 → 5.1.2

package/dist/semantic-forms.mjs

@@ -17,7 +17,7 @@ let dl=input.parentNode;while(dl&&dl.nodeName!=="DL")dl=dl.parentNode;if(!dl)con
 // #region create labels
 if(type==="checkbox"||type==="radio"){
 // recursively find <dd> element
-let dd=input.parentNode;while(dd&&dd.nodeName!=="DD")dd=dd.parentNode;if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a <dd> element.`);continue}if(dd.firstChild.nodeName!=="LABEL"){const newLabel=document.createElement("label");newLabel.className="floatLabelFormAnimatedLabel";if(type==="checkbox"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleCheckbox");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}newLabel.innerHTML=label.innerHTML;if(label.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=label.getAttribute("title");label.innerHTML+=` <span title="${text}" class="help">${helpTextIcon}</span>`;newLabel.innerHTML+=` <span title="${text}" class="help">${helpTextIcon}</span>`}if(dd.querySelector(":required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";label.innerHTML+=` <span title="${text}" class="required">*</span>`;newLabel.innerHTML+=` <span title="${text}" class="required">*</span>`}if(!dd.querySelector("label"))dd.append(newLabel)}
+let dd=input.parentNode;while(dd&&dd.nodeName!=="DD")dd=dd.parentNode;if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that is not inside a <dd> element.`);continue}if(dd.firstChild.nodeName!=="LABEL"){const newLabel=document.createElement("label");newLabel.className="floatLabelFormAnimatedLabel";if(type==="checkbox"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleCheckbox");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}if(type==="radio"&&input.parentNode.nodeName==="DD"){newLabel.setAttribute("for",input.id);input.parentNode.classList.add("singleRadio");newLabel.className="";label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}newLabel.innerHTML=label.innerHTML;if(label.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=label.getAttribute("title");label.innerHTML+=` <span title="${text}" class="help">${helpTextIcon}</span>`;newLabel.innerHTML+=` <span title="${text}" class="help">${helpTextIcon}</span>`}if(dd.querySelector(":required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";label.innerHTML+=` <span title="${text}" class="required">*</span>`;newLabel.innerHTML+=` <span title="${text}" class="required">*</span>`}if(!dd.querySelector("label"))dd.append(newLabel)}
 // removes old div that a radio or checkbox may have been added to
 if(dd.parentElement.nodeName==="DIV")dd.parentElement.remove();const div=document.createElement("div");div.append(label.closest("dt"),dd);dl.append(div)}else{const newLabel=document.createElement("label");newLabel.setAttribute("for",input.id);newLabel.className="floatLabelFormAnimatedLabel";newLabel.innerHTML=label.innerHTML;if(input.hasAttribute("title")&&label.getAttribute("data-show-help-icon")!==null&&!label.querySelector("span.help")){const text=input.getAttribute("title");newLabel.innerHTML+=` <span title="${text}" class="help">${helpTextIcon}</span>`}if(input.hasAttribute("required")&&label.getAttribute("data-no-asterisk")===null&&!label.querySelector("span.required")){const text=label.getAttribute("data-asterisk-text")||"This field is required.";newLabel.innerHTML+=` <span title="${text}" class="required">*</span>`}label.setAttribute("hidden","hidden");insertAfter(newLabel,input)}
 // #endregion

package/dist/semantic-forms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"semantic-forms.mjs","mappings":"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","sources":["webpack://semantic-forms/./semanticForms.js","webpack://semantic-forms/webpack/bootstrap","webpack://semantic-forms/webpack/startup"],"sourcesContent":["const semanticForms = () => {\n  // do some feature detection so none of the JS executes if the browser is too old\n  if (typeof document.getElementsByClassName !== 'function' || typeof document.querySelector !== 'function' || !document.body.classList || !window.MutationObserver) {\n    console.warn('semantic-forms was loaded into an unsupported browser and will not execute.')\n    return\n  }\n\n  const passwordShow = '<svg fill=\"none\" height=\"256\" viewBox=\"0 0 24 24\" width=\"256\" xmlns=\"http://www.w3.org/2000/svg\"><g stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"m1 12s4-8 11-8 11 8 11 8\"/><path d=\"m1 12s4 8 11 8 11-8 11-8\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></g></svg>'\n  const passwordHide = '<svg fill=\"none\" height=\"256\" viewBox=\"0 0 24 24\" width=\"256\" xmlns=\"http://www.w3.org/2000/svg\"><g stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"m2 2 20 20\"/><path d=\"m6.71277 6.7226c-3.04798 2.07267-4.71277 5.2774-4.71277 5.2774s3.63636 7 10 7c2.0503 0 3.8174-.7266 5.2711-1.7116m-6.2711-12.23018c.3254-.03809.6588-.05822 1-.05822 6.3636 0 10 7 10 7s-.6918 1.3317-2 2.8335\"/><path d=\"m14 14.2362c-.5308.475-1.2316.7639-2 .7639-1.6569 0-3-1.3431-3-3 0-.8237.33193-1.5698.86932-2.11192\"/></g></svg>'\n  const helpTextIcon = '<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\" version=\"1.1\"><rect width=\"16\" height=\"16\" fill=\"none\"/><path fill=\"currentColor\" d=\"M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z\"/></svg>'\n\n  const nodeNameLookup = ['TEXTAREA', 'SELECT']\n  const inputTypeLookup = ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week']\n\n  // progressively enhance form elements that have the semanticForms class\n  const forms = document.querySelectorAll('form.semanticForms:not(.semanticFormsActive)')\n\n  for (const form of forms) {\n    form.classList.add('semanticFormsActive')\n    if (form.classList.contains('lowFlow')) continue\n\n    // update each input in the semantic form\n    const inputs = Array.from(form.querySelectorAll('input, textarea, select'))\n    for (const input of inputs) {\n      // ignore input if it has previously been formatted\n      if (input.classList.contains('semanticform') || !input.id) continue\n\n      const type = input.getAttribute('type')\n      if (nodeNameLookup.includes(input.nodeName) || inputTypeLookup.includes(type)) {\n        // recursively find <dl> element\n        let dl = input.parentNode\n        while (dl && dl.nodeName !== 'DL') dl = dl.parentNode\n\n        if (!dl) continue\n        if (!dl.classList.contains('floatLabelForm')) dl.classList.add('floatLabelForm')\n\n        const label = input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio')\n          ? document.querySelector('label[data-for=' + input.parentNode.parentNode.id.replace(/\\./g, '\\\\.') + ']')\n          : document.querySelector('label[for=' + input.id.replace(/\\./g, '\\\\.') + ']')\n\n        if (!label) {\n          console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) without a properly associated label. Make sure there is a label for it and the label has a matching \"for\" attribute.`)\n        }\n\n        input.classList.add('semanticform')\n\n        // #region create labels\n\n        if (type === 'checkbox' || type === 'radio') {\n          // recursively find <dd> element\n          let dd = input.parentNode\n          while (dd && dd.nodeName !== 'DD') dd = dd.parentNode\n\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)\n            continue\n          }\n\n          if (dd.firstChild.nodeName !== 'LABEL') {\n            const newLabel = document.createElement('label')\n            newLabel.className = 'floatLabelFormAnimatedLabel'\n\n            if (type === 'checkbox' && input.parentNode.nodeName === 'DD') {\n              newLabel.setAttribute('for', input.id)\n              input.parentNode.classList.add('singleCheckbox')\n              newLabel.className = ''\n              label.setAttribute('hidden', 'hidden')\n              insertAfter(newLabel, input)\n            }\n\n            newLabel.innerHTML = label.innerHTML\n\n            if (label.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {\n              const text = label.getAttribute('title')\n              label.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n              newLabel.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n            }\n\n            if (dd.querySelector(':required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {\n              const text = label.getAttribute('data-asterisk-text') || 'This field is required.'\n              label.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n              newLabel.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n            }\n\n            if (!dd.querySelector('label')) dd.append(newLabel)\n          }\n\n          // removes old div that a radio or checkbox may have been added to\n          if (dd.parentElement.nodeName === 'DIV') dd.parentElement.remove()\n\n          const div = document.createElement('div')\n          div.append(label.closest('dt'), dd)\n          dl.append(div)\n        } else {\n          const newLabel = document.createElement('label')\n          newLabel.setAttribute('for', input.id)\n          newLabel.className = 'floatLabelFormAnimatedLabel'\n\n          newLabel.innerHTML = label.innerHTML\n\n          if (input.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {\n            const text = input.getAttribute('title')\n            newLabel.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n          }\n\n          if (input.hasAttribute('required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {\n            const text = label.getAttribute('data-asterisk-text') || 'This field is required.'\n            newLabel.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n          }\n\n          label.setAttribute('hidden', 'hidden')\n\n          insertAfter(newLabel, input)\n        }\n        // #endregion\n\n        // standard inputs\n        if (type !== 'checkbox' && type !== 'radio') {\n          if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ')\n\n          const div = document.createElement('div')\n          const dt = label.closest('dt')\n          const dd = input.closest('dd')\n\n          if (!dt) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding <dt> element.`)\n            continue\n          }\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding <dd> element.`)\n            continue\n          }\n\n          // #region clear button\n          if (input.nodeName !== 'SELECT' && type !== 'range') {\n            const clearBtn = document.createElement('button')\n            clearBtn.type = 'button'\n            clearBtn.title = input.getAttribute('data-clear-field-text') || 'Clear field'\n            clearBtn.ariaLabel = input.getAttribute('data-clear-field-text') || 'Clear field'\n            clearBtn.tabIndex = -1\n            clearBtn.innerHTML = '<svg viewBox=\"0 0 16 16\" width=\"18\" height=\"18\"><path d=\"M 1 1 L 15 15 M 1 15 L 15 1\" fill=\"none\" stroke-width=\"2\" stroke=\"currentColor\" />'\n            clearBtn.classList.add('clear')\n            clearBtn.id = `semanticFormsClearButton_${input.id}`\n            clearBtn.addEventListener('click', (event) => {\n              input.previousValue = input.value\n              input.value = ''\n              input.focus()\n              lastClearFieldPressed = input.id\n            })\n            insertAfter(clearBtn, dd.querySelector('label'))\n          }\n          input.addEventListener('focus', (event) => {\n            if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target\n          })\n          // #endregion\n\n          // check for colspan- utility class\n          if (/colspan-/.test(dd.className)) {\n            const match = dd.className.match(/colspan-([0-9]|full)/)[0]\n            dd.classList.remove(match)\n            div.classList.add(match)\n          }\n\n          div.append(dt, dd)\n          dl.append(div)\n\n          // determine visibility of newly created <div>\n          if (dt.style.display === 'none' && dd.style.display === 'none') div.style.display = 'none'\n        }\n\n        // handle file input clear btn, cannot be handled with CSS\n        if (type === 'file') {\n          const clearBtn = input.parentElement.querySelector('.clear')\n          input.addEventListener('input', e => {\n            clearBtn.style.display = e.target.files.length ? 'flex' : 'none'\n          })\n          clearBtn.addEventListener('click', () => {\n            clearBtn.style.display = 'none'\n          })\n        }\n\n        // #region show password button\n        if (type === 'password' && input.getAttribute('data-no-reveal') === null) {\n          const showBtn = document.createElement('button')\n          showBtn.type = 'button'\n          showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'\n          showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'\n          showBtn.tabIndex = -1\n          showBtn.innerHTML = passwordShow\n          showBtn.classList.add('show')\n          showBtn.id = `semanticFormsShowButton_${input.id}`\n          const dd = input.closest('dd')\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)\n            continue\n          }\n          showBtn.addEventListener('click', (event) => {\n            if (input.type === 'password') {\n              showBtn.innerHTML = passwordHide\n              showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password'\n              showBtn.ariaLabel = input.getAttribute('data-hide-password-text') || 'Hide password'\n              input.type = 'text'\n            } else {\n              showBtn.innerHTML = passwordShow\n              showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'\n              showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'\n              input.type = 'password'\n            }\n            input.focus()\n          })\n          insertAfter(showBtn, dd.querySelector('label'))\n        }\n        // #endregion\n\n        // add listener to shift clear button when scrollbar present\n        for (const textarea of document.querySelectorAll('textarea')) {\n          // shifts the close button to the right if a scrollbar is present\n          const shiftCloseBtn = () => {\n            const clearBtn = textarea.parentElement?.querySelector('button.clear')\n            if (clearBtn) clearBtn.style.marginRight = textarea.clientHeight < textarea.scrollHeight ? '15px' : ''\n          }\n\n          textarea.addEventListener('input', shiftCloseBtn)\n          textarea.addEventListener('mouseup', shiftCloseBtn)\n        }\n      }\n    }\n  }\n\n  /**\n   * Places an element immediately after another element\n   * @param {Object} newNode element being placed after the reference node\n   * @param {*} referenceNode element to be used as reference for new node\n   */\n  function insertAfter (newNode, referenceNode) {\n    if (referenceNode.nextSibling) referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)\n    else referenceNode.parentNode.appendChild(newNode)\n  }\n\n  // handle undo/redo\n  let lastFocusedInput\n  let lastClearFieldPressed\n  document.addEventListener('keydown', (event) => {\n    if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) {\n      // undo clearing a field\n      if (lastFocusedInput) {\n        if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {\n          if (lastFocusedInput.previousValue) {\n            lastFocusedInput.redoValue = lastFocusedInput.value\n            lastFocusedInput.value = lastFocusedInput.previousValue\n          }\n        }\n      }\n    } else if ((event.ctrlKey && event.key === 'y') || (event.metaKey && event.shiftKey && event.key === 'z')) {\n      // redo clearing a field\n      if (lastFocusedInput) {\n        if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {\n          if (lastFocusedInput.redoValue) {\n            lastFocusedInput.previousValue = lastFocusedInput.value\n            lastFocusedInput.value = lastFocusedInput.redoValue\n          }\n        }\n      }\n    }\n  })\n\n  // monitor changes to the DOM and enhance new semanticForms forms that get added\n  if (!window.semanticFormsObserver) {\n    window.semanticFormsObserver = new window.MutationObserver((mutations) => {\n      let stop = false\n      for (const mutation of mutations) {\n        for (const node of mutation.addedNodes) {\n          if (node.nodeName === 'FORM' || node?.querySelector?.('form')) {\n            semanticForms()\n            stop = true\n          }\n        }\n        if (stop) break\n      }\n    })\n    window.semanticFormsObserver.observe(document.body, { attributes: false, childList: true, characterData: false, subtree: true })\n  }\n\n  semanticForms.reinitialize = (form) => {\n    form.classList.remove('semanticFormsActive')\n    semanticForms()\n  }\n}\n\nmodule.exports = semanticForms\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(\"./semanticForms.js\");\n"],"names":["semanticForms","document","getElementsByClassName","querySelector","body","classList","window","MutationObserver","console","warn","passwordShow","passwordHide","helpTextIcon","nodeNameLookup","inputTypeLookup","forms","querySelectorAll","form","add","contains","inputs","Array","from","input","id","type","getAttribute","includes","nodeName","dl","parentNode","label","replace","error","dd","firstChild","newLabel","createElement","className","setAttribute","insertAfter","innerHTML","hasAttribute","text","append","parentElement","remove","div","closest","dt","clearBtn","title","ariaLabel","tabIndex","addEventListener","event","previousValue","value","focus","lastClearFieldPressed","target","lastFocusedInput","test","match","style","display","e","files","length","showBtn","textarea","shiftCloseBtn","marginRight","clientHeight","scrollHeight","newNode","referenceNode","nextSibling","insertBefore","appendChild","ctrlKey","metaKey","key","shiftKey","name","redoValue","semanticFormsObserver","mutations","stop","mutation","node","addedNodes","observe","attributes","childList","characterData","subtree","reinitialize","module","exports","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__"],"sourceRoot":""}
+{"version":3,"file":"semantic-forms.mjs","mappings":"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","sources":["webpack://semantic-forms/./semanticForms.js","webpack://semantic-forms/webpack/bootstrap","webpack://semantic-forms/webpack/startup"],"sourcesContent":["const semanticForms = () => {\n  // do some feature detection so none of the JS executes if the browser is too old\n  if (typeof document.getElementsByClassName !== 'function' || typeof document.querySelector !== 'function' || !document.body.classList || !window.MutationObserver) {\n    console.warn('semantic-forms was loaded into an unsupported browser and will not execute.')\n    return\n  }\n\n  const passwordShow = '<svg fill=\"none\" height=\"256\" viewBox=\"0 0 24 24\" width=\"256\" xmlns=\"http://www.w3.org/2000/svg\"><g stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"m1 12s4-8 11-8 11 8 11 8\"/><path d=\"m1 12s4 8 11 8 11-8 11-8\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></g></svg>'\n  const passwordHide = '<svg fill=\"none\" height=\"256\" viewBox=\"0 0 24 24\" width=\"256\" xmlns=\"http://www.w3.org/2000/svg\"><g stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"m2 2 20 20\"/><path d=\"m6.71277 6.7226c-3.04798 2.07267-4.71277 5.2774-4.71277 5.2774s3.63636 7 10 7c2.0503 0 3.8174-.7266 5.2711-1.7116m-6.2711-12.23018c.3254-.03809.6588-.05822 1-.05822 6.3636 0 10 7 10 7s-.6918 1.3317-2 2.8335\"/><path d=\"m14 14.2362c-.5308.475-1.2316.7639-2 .7639-1.6569 0-3-1.3431-3-3 0-.8237.33193-1.5698.86932-2.11192\"/></g></svg>'\n  const helpTextIcon = '<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\" version=\"1.1\"><rect width=\"16\" height=\"16\" fill=\"none\"/><path fill=\"currentColor\" d=\"M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z\"/></svg>'\n\n  const nodeNameLookup = ['TEXTAREA', 'SELECT']\n  const inputTypeLookup = ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week']\n\n  // progressively enhance form elements that have the semanticForms class\n  const forms = document.querySelectorAll('form.semanticForms:not(.semanticFormsActive)')\n\n  for (const form of forms) {\n    form.classList.add('semanticFormsActive')\n    if (form.classList.contains('lowFlow')) continue\n\n    // update each input in the semantic form\n    const inputs = Array.from(form.querySelectorAll('input, textarea, select'))\n    for (const input of inputs) {\n      // ignore input if it has previously been formatted\n      if (input.classList.contains('semanticform') || !input.id) continue\n\n      const type = input.getAttribute('type')\n      if (nodeNameLookup.includes(input.nodeName) || inputTypeLookup.includes(type)) {\n        // recursively find <dl> element\n        let dl = input.parentNode\n        while (dl && dl.nodeName !== 'DL') dl = dl.parentNode\n\n        if (!dl) continue\n        if (!dl.classList.contains('floatLabelForm')) dl.classList.add('floatLabelForm')\n\n        const label = input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio')\n          ? document.querySelector('label[data-for=' + input.parentNode.parentNode.id.replace(/\\./g, '\\\\.') + ']')\n          : document.querySelector('label[for=' + input.id.replace(/\\./g, '\\\\.') + ']')\n\n        if (!label) {\n          console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) without a properly associated label. Make sure there is a label for it and the label has a matching \"for\" attribute.`)\n        }\n\n        input.classList.add('semanticform')\n\n        // #region create labels\n\n        if (type === 'checkbox' || type === 'radio') {\n          // recursively find <dd> element\n          let dd = input.parentNode\n          while (dd && dd.nodeName !== 'DD') dd = dd.parentNode\n\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)\n            continue\n          }\n\n          if (dd.firstChild.nodeName !== 'LABEL') {\n            const newLabel = document.createElement('label')\n            newLabel.className = 'floatLabelFormAnimatedLabel'\n\n            if (type === 'checkbox' && input.parentNode.nodeName === 'DD') {\n              newLabel.setAttribute('for', input.id)\n              input.parentNode.classList.add('singleCheckbox')\n              newLabel.className = ''\n              label.setAttribute('hidden', 'hidden')\n              insertAfter(newLabel, input)\n            }\n\n            if (type === 'radio' && input.parentNode.nodeName === 'DD') {\n              newLabel.setAttribute('for', input.id)\n              input.parentNode.classList.add('singleRadio')\n              newLabel.className = ''\n              label.setAttribute('hidden', 'hidden')\n              insertAfter(newLabel, input)\n            }\n\n            newLabel.innerHTML = label.innerHTML\n\n            if (label.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {\n              const text = label.getAttribute('title')\n              label.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n              newLabel.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n            }\n\n            if (dd.querySelector(':required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {\n              const text = label.getAttribute('data-asterisk-text') || 'This field is required.'\n              label.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n              newLabel.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n            }\n\n            if (!dd.querySelector('label')) dd.append(newLabel)\n          }\n\n          // removes old div that a radio or checkbox may have been added to\n          if (dd.parentElement.nodeName === 'DIV') dd.parentElement.remove()\n\n          const div = document.createElement('div')\n          div.append(label.closest('dt'), dd)\n          dl.append(div)\n        } else {\n          const newLabel = document.createElement('label')\n          newLabel.setAttribute('for', input.id)\n          newLabel.className = 'floatLabelFormAnimatedLabel'\n\n          newLabel.innerHTML = label.innerHTML\n\n          if (input.hasAttribute('title') && label.getAttribute('data-show-help-icon') !== null && !label.querySelector('span.help')) {\n            const text = input.getAttribute('title')\n            newLabel.innerHTML += ` <span title=\"${text}\" class=\"help\">${helpTextIcon}</span>`\n          }\n\n          if (input.hasAttribute('required') && label.getAttribute('data-no-asterisk') === null && !label.querySelector('span.required')) {\n            const text = label.getAttribute('data-asterisk-text') || 'This field is required.'\n            newLabel.innerHTML += ` <span title=\"${text}\" class=\"required\">*</span>`\n          }\n\n          label.setAttribute('hidden', 'hidden')\n\n          insertAfter(newLabel, input)\n        }\n        // #endregion\n\n        // standard inputs\n        if (type !== 'checkbox' && type !== 'radio') {\n          if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ')\n\n          const div = document.createElement('div')\n          const dt = label.closest('dt')\n          const dd = input.closest('dd')\n\n          if (!dt) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding <dt> element.`)\n            continue\n          }\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that does not have a corresponding <dd> element.`)\n            continue\n          }\n\n          // #region clear button\n          if (input.nodeName !== 'SELECT' && type !== 'range') {\n            const clearBtn = document.createElement('button')\n            clearBtn.type = 'button'\n            clearBtn.title = input.getAttribute('data-clear-field-text') || 'Clear field'\n            clearBtn.ariaLabel = input.getAttribute('data-clear-field-text') || 'Clear field'\n            clearBtn.tabIndex = -1\n            clearBtn.innerHTML = '<svg viewBox=\"0 0 16 16\" width=\"18\" height=\"18\"><path d=\"M 1 1 L 15 15 M 1 15 L 15 1\" fill=\"none\" stroke-width=\"2\" stroke=\"currentColor\" />'\n            clearBtn.classList.add('clear')\n            clearBtn.id = `semanticFormsClearButton_${input.id}`\n            clearBtn.addEventListener('click', (event) => {\n              input.previousValue = input.value\n              input.value = ''\n              input.focus()\n              lastClearFieldPressed = input.id\n            })\n            insertAfter(clearBtn, dd.querySelector('label'))\n          }\n          input.addEventListener('focus', (event) => {\n            if (event.target.nodeName === 'INPUT') lastFocusedInput = event.target\n          })\n          // #endregion\n\n          // check for colspan- utility class\n          if (/colspan-/.test(dd.className)) {\n            const match = dd.className.match(/colspan-([0-9]|full)/)[0]\n            dd.classList.remove(match)\n            div.classList.add(match)\n          }\n\n          div.append(dt, dd)\n          dl.append(div)\n\n          // determine visibility of newly created <div>\n          if (dt.style.display === 'none' && dd.style.display === 'none') div.style.display = 'none'\n        }\n\n        // handle file input clear btn, cannot be handled with CSS\n        if (type === 'file') {\n          const clearBtn = input.parentElement.querySelector('.clear')\n          input.addEventListener('input', e => {\n            clearBtn.style.display = e.target.files.length ? 'flex' : 'none'\n          })\n          clearBtn.addEventListener('click', () => {\n            clearBtn.style.display = 'none'\n          })\n        }\n\n        // #region show password button\n        if (type === 'password' && input.getAttribute('data-no-reveal') === null) {\n          const showBtn = document.createElement('button')\n          showBtn.type = 'button'\n          showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'\n          showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'\n          showBtn.tabIndex = -1\n          showBtn.innerHTML = passwordShow\n          showBtn.classList.add('show')\n          showBtn.id = `semanticFormsShowButton_${input.id}`\n          const dd = input.closest('dd')\n          if (!dd) {\n            console.error(`semantic-forms: Found an input (${input.id || input.getAttribute('name')}) that is not inside a <dd> element.`)\n            continue\n          }\n          showBtn.addEventListener('click', (event) => {\n            if (input.type === 'password') {\n              showBtn.innerHTML = passwordHide\n              showBtn.title = input.getAttribute('data-hide-password-text') || 'Hide password'\n              showBtn.ariaLabel = input.getAttribute('data-hide-password-text') || 'Hide password'\n              input.type = 'text'\n            } else {\n              showBtn.innerHTML = passwordShow\n              showBtn.title = input.getAttribute('data-show-password-text') || 'Show password'\n              showBtn.ariaLabel = input.getAttribute('data-show-password-text') || 'Show password'\n              input.type = 'password'\n            }\n            input.focus()\n          })\n          insertAfter(showBtn, dd.querySelector('label'))\n        }\n        // #endregion\n\n        // add listener to shift clear button when scrollbar present\n        for (const textarea of document.querySelectorAll('textarea')) {\n          // shifts the close button to the right if a scrollbar is present\n          const shiftCloseBtn = () => {\n            const clearBtn = textarea.parentElement?.querySelector('button.clear')\n            if (clearBtn) clearBtn.style.marginRight = textarea.clientHeight < textarea.scrollHeight ? '15px' : ''\n          }\n\n          textarea.addEventListener('input', shiftCloseBtn)\n          textarea.addEventListener('mouseup', shiftCloseBtn)\n        }\n      }\n    }\n  }\n\n  /**\n   * Places an element immediately after another element\n   * @param {Object} newNode element being placed after the reference node\n   * @param {*} referenceNode element to be used as reference for new node\n   */\n  function insertAfter (newNode, referenceNode) {\n    if (referenceNode.nextSibling) referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)\n    else referenceNode.parentNode.appendChild(newNode)\n  }\n\n  // handle undo/redo\n  let lastFocusedInput\n  let lastClearFieldPressed\n  document.addEventListener('keydown', (event) => {\n    if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey) {\n      // undo clearing a field\n      if (lastFocusedInput) {\n        if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {\n          if (lastFocusedInput.previousValue) {\n            lastFocusedInput.redoValue = lastFocusedInput.value\n            lastFocusedInput.value = lastFocusedInput.previousValue\n          }\n        }\n      }\n    } else if ((event.ctrlKey && event.key === 'y') || (event.metaKey && event.shiftKey && event.key === 'z')) {\n      // redo clearing a field\n      if (lastFocusedInput) {\n        if (lastFocusedInput?.parentNode?.querySelector('button.clear').id === `semanticFormsClearButton_${lastClearFieldPressed}` || lastFocusedInput?.parentNode?.querySelector('button.clear').name === `semanticFormsClearButton_${lastClearFieldPressed}`) {\n          if (lastFocusedInput.redoValue) {\n            lastFocusedInput.previousValue = lastFocusedInput.value\n            lastFocusedInput.value = lastFocusedInput.redoValue\n          }\n        }\n      }\n    }\n  })\n\n  // monitor changes to the DOM and enhance new semanticForms forms that get added\n  if (!window.semanticFormsObserver) {\n    window.semanticFormsObserver = new window.MutationObserver((mutations) => {\n      let stop = false\n      for (const mutation of mutations) {\n        for (const node of mutation.addedNodes) {\n          if (node.nodeName === 'FORM' || node?.querySelector?.('form')) {\n            semanticForms()\n            stop = true\n          }\n        }\n        if (stop) break\n      }\n    })\n    window.semanticFormsObserver.observe(document.body, { attributes: false, childList: true, characterData: false, subtree: true })\n  }\n\n  semanticForms.reinitialize = (form) => {\n    form.classList.remove('semanticFormsActive')\n    semanticForms()\n  }\n}\n\nmodule.exports = semanticForms\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(\"./semanticForms.js\");\n"],"names":["semanticForms","document","getElementsByClassName","querySelector","body","classList","window","MutationObserver","console","warn","passwordShow","passwordHide","helpTextIcon","nodeNameLookup","inputTypeLookup","forms","querySelectorAll","form","add","contains","inputs","Array","from","input","id","type","getAttribute","includes","nodeName","dl","parentNode","label","replace","error","dd","firstChild","newLabel","createElement","className","setAttribute","insertAfter","innerHTML","hasAttribute","text","append","parentElement","remove","div","closest","dt","clearBtn","title","ariaLabel","tabIndex","addEventListener","event","previousValue","value","focus","lastClearFieldPressed","target","lastFocusedInput","test","match","style","display","e","files","length","showBtn","textarea","shiftCloseBtn","marginRight","clientHeight","scrollHeight","newNode","referenceNode","nextSibling","insertBefore","appendChild","ctrlKey","metaKey","key","shiftKey","name","redoValue","semanticFormsObserver","mutations","stop","mutation","node","addedNodes","observe","attributes","childList","characterData","subtree","reinitialize","module","exports","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__"],"sourceRoot":""}

package/docs/statics/css/highlight.js.dark.scss

@@ -0,0 +1 @@
+@use '../../node_modules/highlight.js/styles/github-dark.css';

package/docs/statics/css/highlight.js.light.scss

@@ -0,0 +1 @@
+@use '../../node_modules/highlight.js/styles/github.css';

package/docs/statics/css/semantic-forms-styles.scss

@@ -0,0 +1,57 @@
+@use '../../../dist/semantic-forms.css';
+
+@view-transition { /* enable multi-page view transitions */
+  navigation: auto;
+}
+
+body {
+  background-color: #fff;
+  color: #000;
+  font-family: sans-serif;
+}
+
+a:link, a:visited {
+  color: #00f;
+}
+
+@mixin dark-mode {
+  body {
+    background-color: #000;
+    color: #fff;
+  }
+
+  a:link, a:visited {
+    color: #99f;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  @include dark-mode;
+}
+
+html.dark {
+  @include dark-mode;
+}
+
+main > header > h1, main > header > h2 {
+  float: left;
+  margin: 0;
+  font-size: 150%;
+}
+
+main > header > h1::after {
+  content: "—";
+  margin: 0 5px;
+}
+
+nav {
+  clear: both;
+}
+
+form#mode {
+  position: absolute;
+  right: 8px;
+  width: auto;
+  container-type: unset;
+  display: block;
+}

package/docs/statics/js/semantic-forms-demo.js

@@ -0,0 +1,12 @@
+// prevent forms from going anywhere
+const forms = document.querySelectorAll('form')
+for (const form of forms) form.addEventListener('submit', e => e.preventDefault())
+
+// enable green button easter egg
+const greenButtons = document.querySelectorAll('input[type="image"]')
+for (const button of greenButtons) {
+  button.addEventListener('click', (e) => {
+    e.preventDefault()
+    window.alert('GREEN!!!')
+  })
+}

package/docs/statics/js/semantic-forms-main.js

@@ -0,0 +1,51 @@
+// this will stop the JS from executing if CSS is disabled or a CSS file fails to load; it will also remove any existing CSS from the DOM
+require('check-if-css-is-disabled')()
+window.addEventListener('cssDisabled', (event) => {
+  // undo any DOM manipulations and then stop any further JS from executing
+  document.body.classList.replace('js', 'no-js')
+  throw new Error('A CSS file failed to load at some point during the app\'s usage. It is unsafe to execute any further JavaScript if the CSS has not loaded properly.')
+})
+
+// replace no-js class with js class which allows us to write css that targets non-js or js enabled users separately
+document.body.classList.replace('no-js', 'js')
+
+// load semantic-forms library
+require('semantic-forms')()
+
+// dark mode / light mode
+function toggleDarkMode (mode) {
+  if (mode === 'light' || document.querySelector('html').className === 'dark') {
+    document.querySelector('html').className = 'light'
+    document.querySelector('link[href="/css/highlight.js.dark.css"]')?.remove()
+    document.querySelector('link[href="/css/highlight.js.light.css"]')?.remove()
+    document.querySelector('head').insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/css/highlight.js.light.css">')
+    document.querySelector('#mode button').innerHTML = 'Switch to dark mode'
+    const forms = document.querySelectorAll('form')
+    for (const form of forms) {
+      form.classList.add('light')
+      form.classList.remove('dark')
+    }
+  } else {
+    document.querySelector('html').className = 'dark'
+    document.querySelector('link[href="/css/highlight.js.dark.css"]')?.remove()
+    document.querySelector('link[href="/css/highlight.js.light.css"]')?.remove()
+    document.querySelector('head').insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/css/highlight.js.dark.css">')
+    document.querySelector('#mode button').innerHTML = 'Switch to light mode'
+    const forms = document.querySelectorAll('form')
+    for (const form of forms) {
+      form.classList.add('dark')
+      form.classList.remove('light')
+    }
+  }
+}
+document.body.insertAdjacentHTML('afterbegin', '<form id="mode" class="semanticForms"><button></button></form>')
+document.querySelector('#mode button').addEventListener('click', (event) => toggleDarkMode())
+if (window.matchMedia('(prefers-color-scheme: dark)').matches) toggleDarkMode('dark')
+else toggleDarkMode('light')
+
+// syntax highlighting
+const hljs = require('highlight.js')
+hljs.highlightAll()
+
+// load semantic-forms demo code
+require('semantic-forms-demo')