semantic-forms 5.1.11 → 5.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/semantic-forms.cjs +20 -6
- package/dist/semantic-forms.cjs.map +1 -1
- package/dist/semantic-forms.css +137 -19
- package/dist/semantic-forms.css.map +1 -1
- package/dist/semantic-forms.js +20 -6
- package/dist/semantic-forms.js.map +1 -1
- package/dist/semantic-forms.min.js +1 -1
- package/dist/semantic-forms.min.js.map +1 -1
- package/dist/semantic-forms.min.mjs +1 -1
- package/dist/semantic-forms.min.mjs.map +1 -1
- package/dist/semantic-forms.mjs +20 -6
- package/dist/semantic-forms.mjs.map +1 -1
- package/docs/statics/pages/fullDemo.html +47 -0
- package/docs/statics/pages/usage.html +33 -0
- package/package.json +1 -1
- package/semanticForms.js +61 -5
- package/semanticForms.scss +149 -112
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={90:e=>{const t=()=>{if("function"!=typeof document.getElementsByClassName||"function"!=typeof document.querySelector||!document.body.classList||!window.MutationObserver)return void console.warn("semantic-forms was loaded into an unsupported browser and will not execute.");const e='<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>',r='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;margin-top:1px;"><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>',a=["TEXTAREA","SELECT"],o=["checkbox","color","date","datetime-local","email","file","image","month","number","password","radio","range","search","tel","text","time","url","week"],n=document.querySelectorAll("form.semanticForms:not(.semanticFormsActive)");for(const t of n){if(t.classList.add("semanticFormsActive"),t.classList.contains("lowFlow"))continue;const n=Array.from(t.querySelectorAll("input, textarea, select"));for(const t of n){if(t.classList.contains("semanticform")||!t.id)continue;const n=t.getAttribute("type");if(a.includes(t.nodeName)||o.includes(n)){let a=t.parentNode;for(;a&&"DL"!==a.nodeName;)a=a.parentNode;if(!a)continue;a.classList.contains("floatLabelForm")||a.classList.add("floatLabelForm");const o=!t.parentNode.parentNode.id||"checkbox"!==n&&"radio"!==n?document.querySelector("label[for="+t.id.replace(/\./g,"\\.")+"]"):document.querySelector("label[data-for="+t.parentNode.parentNode.id.replace(/\./g,"\\.")+"]");if(o||console.error(`semantic-forms: Found an input (${t.id||t.getAttribute("name")}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`),t.classList.add("semanticform"),"checkbox"===n||"radio"===n){let e=t.parentNode;for(;e&&"DD"!==e.nodeName;)e=e.parentNode;if(!e){console.error(`semantic-forms: Found an input (${t.id||t.getAttribute("name")}) that is not inside a <dd> element.`);continue}if("LABEL"!==e.firstChild.nodeName){const a=document.createElement("label");if(a.className="floatLabelFormAnimatedLabel","checkbox"===n&&"DD"===t.parentNode.nodeName&&(a.setAttribute("for",t.id),t.parentNode.classList.add("singleCheckbox"),a.className="",o.setAttribute("hidden","hidden"),s(a,t)),"radio"===n&&"DD"===t.parentNode.nodeName&&(a.setAttribute("for",t.id),t.parentNode.classList.add("singleRadio"),a.className="",o.setAttribute("hidden","hidden"),s(a,t)),a.innerHTML=o.innerHTML,o.hasAttribute("title")&&null!==o.getAttribute("data-show-help-icon")&&!o.querySelector("span.help")){const e=o.getAttribute("title");o.innerHTML+=` <span title="${e}" class="help">${r}</span>`,a.innerHTML+=` <span title="${e}" class="help">${r}</span>`}if(e.querySelector(":required")&&null===o.getAttribute("data-no-asterisk")&&!o.querySelector("span.required")){const e=o.getAttribute("data-asterisk-text")||"This field is required.";o.innerHTML+=` <span title="${e}" class="required">*</span>`,a.innerHTML+=` <span title="${e}" class="required">*</span>`}e.querySelector("label")||e.append(a)}"DIV"===e.parentElement.nodeName&&e.parentElement.remove();const i=document.createElement("div");i.append(o.closest("dt"),e),a.append(i)}else{const e=document.createElement("label");if(e.setAttribute("for",t.id),e.className="floatLabelFormAnimatedLabel",e.innerHTML=o.innerHTML,t.hasAttribute("title")&&null!==o.getAttribute("data-show-help-icon")&&!o.querySelector("span.help")){const a=t.getAttribute("title");e.innerHTML+=` <span title="${a}" class="help">${r}</span>`}if(t.hasAttribute("required")&&null===o.getAttribute("data-no-asterisk")&&!o.querySelector("span.required")){const t=o.getAttribute("data-asterisk-text")||"This field is required.";e.innerHTML+=` <span title="${t}" class="required">*</span>`}o.setAttribute("hidden","hidden"),s(e,t)}if("checkbox"!==n&&"radio"!==n){t.getAttribute("placeholder")||t.setAttribute("placeholder"," ");const e=document.createElement("div"),r=o.closest("dt"),d=t.closest("dd");if(!r){console.error(`semantic-forms: Found an input (${t.id||t.getAttribute("name")}) that does not have a corresponding <dt> element.`);continue}if(!d){console.error(`semantic-forms: Found an input (${t.id||t.getAttribute("name")}) that does not have a corresponding <dd> element.`);continue}if("SELECT"!==t.nodeName&&"range"!==n){const e=document.createElement("button");e.type="button",e.title=t.getAttribute("data-clear-field-text")||"Clear field",e.ariaLabel=t.getAttribute("data-clear-field-text")||"Clear field",e.tabIndex=-1,e.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" />',e.classList.add("clear"),e.id=`semanticFormsClearButton_${t.id}`,e.addEventListener("click",()=>{t.previousValue=t.value,t.value="",t.focus(),l=t.id,t.dispatchEvent(new Event("input",{bubbles:!0}))}),s(e,d.querySelector("label"))}if(t.addEventListener("focus",e=>{"INPUT"===e.target.nodeName&&(i=e.target)}),/colspan-/.test(d.className)){const t=d.className.match(/colspan-([0-9]|full)/)[0];d.classList.remove(t),e.classList.add(t)}e.append(r,d),a.append(e),"none"===r.style.display&&"none"===d.style.display&&(e.style.display="none")}if("file"===n){const e=t.parentElement.querySelector(".clear");t.addEventListener("input",t=>{e.style.display=t.target.files.length?"flex":"none"}),e.addEventListener("click",()=>{e.style.display="none"})}if("range"===n&&t.classList.contains("displayValue")){t.parentNode.parentNode.querySelector("dd label").innerHTML+=`<span class="seperator">: </span><output>${t.value}</output>`,t.addEventListener("input",e=>{e.target.parentNode.parentNode.querySelector("output").innerHTML=e.target.value})}if("password"===n&&null===t.getAttribute("data-no-reveal")){const r=document.createElement("button");r.type="button",r.title=t.getAttribute("data-show-password-text")||"Show password",r.ariaLabel=t.getAttribute("data-show-password-text")||"Show password",r.tabIndex=-1,r.innerHTML=e,r.classList.add("show"),r.id=`semanticFormsShowButton_${t.id}`;const a=t.closest("dd");if(!a){console.error(`semantic-forms: Found an input (${t.id||t.getAttribute("name")}) that is not inside a <dd> element.`);continue}r.addEventListener("click",()=>{"password"===t.type?(r.innerHTML='<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>',r.title=t.getAttribute("data-hide-password-text")||"Hide password",r.ariaLabel=t.getAttribute("data-hide-password-text")||"Hide password",t.type="text"):(r.innerHTML=e,r.title=t.getAttribute("data-show-password-text")||"Show password",r.ariaLabel=t.getAttribute("data-show-password-text")||"Show password",t.type="password"),t.focus()}),s(r,a.querySelector("label"))}if("TEXTAREA"===t.nodeName){if(null===t.getAttribute("data-disable-autosize")){t.style.setProperty("resize","none"),t.style.setProperty("min-height","0"),t.style.setProperty("max-height","none"),t.style.setProperty("height","auto");const e=()=>{let e=t.getAttribute("data-max-rows");e&&(isNaN(e)||Number(e)<=0)&&(console.warn(`An invalid value was passed to the "data-max-rows" attribute. This value will be ignored.\n\nProvided value: ${t.getAttribute("data-max-rows")}`),e=null);const r=t.getAttribute("data-max-rows")&&Number(t.getAttribute("data-max-rows"))<5?t.getAttribute("data-max-rows"):"5";t.setAttribute("rows",r);const a=window.getComputedStyle(t),o=parseFloat(a["padding-left"])+parseFloat(a["padding-right"]),n=parseFloat(a["border-left-width"])+parseFloat(a["border-right-width"]);t.style.setProperty("overflow","hidden","important"),t.style.setProperty("width",parseFloat(a.width)-o-n+"px"),t.style.setProperty("box-sizing","content-box"),t.style.setProperty("padding-inline","0"),t.style.setProperty("border-width","0");const s=parseFloat(a["padding-top"])+parseFloat(a["padding-bottom"]),i="normal"===a["line-height"]?parseFloat(a.height):parseFloat(a["line-height"]),l=Math.round(t.scrollHeight);t.style.removeProperty("width"),t.style.removeProperty("box-sizing"),t.style.removeProperty("padding-inline"),t.style.removeProperty("border-width"),t.style.removeProperty("overflow");const d=Math.round((l-s)/i);e?t.setAttribute("rows",""+Math.min(d,Number(e))):t.setAttribute("rows",""+d)};t.addEventListener("input",e),t.dispatchEvent(new Event("input",{bubbles:!0}))}const e=()=>{const e=t.parentElement?.querySelector("button.clear");e&&(e.style.marginRight=t.clientHeight<t.scrollHeight?"15px":"")};t.addEventListener("input",e),t.addEventListener("mouseup",e),e()}}}}function s(e,t){t.nextSibling?t.parentNode.insertBefore(e,t.nextSibling):t.parentNode.appendChild(e)}let i,l;document.addEventListener("keydown",e=>{!e.ctrlKey&&!e.metaKey||"z"!==e.key||e.shiftKey?(e.ctrlKey&&"y"===e.key||e.metaKey&&e.shiftKey&&"z"===e.key)&&i&&(i?.parentNode?.querySelector("button.clear").id!==`semanticFormsClearButton_${l}`&&i?.parentNode?.querySelector("button.clear").name!==`semanticFormsClearButton_${l}`||i.redoValue&&(i.previousValue=i.value,i.value=i.redoValue)):i&&(i?.parentNode?.querySelector("button.clear").id!==`semanticFormsClearButton_${l}`&&i?.parentNode?.querySelector("button.clear").name!==`semanticFormsClearButton_${l}`||i.previousValue&&(i.redoValue=i.value,i.value=i.previousValue))}),window.semanticFormsObserver||(window.semanticFormsObserver=new window.MutationObserver(e=>{let r=!1;for(const a of e){for(const e of a.addedNodes)("FORM"===e.nodeName||e?.querySelector?.("form"))&&(t(),r=!0);if(r)break}}),window.semanticFormsObserver.observe(document.body,{attributes:!1,childList:!0,characterData:!1,subtree:!0})),t.reinitialize=e=>{e.classList.remove("semanticFormsActive"),t()}};e.exports=t}},t={};var r=function r(a){var o=t[a];if(void 0!==o)return o.exports;var n=t[a]={exports:{}};return e[a](n,n.exports,r),n.exports}(90);export{r as default};
|
|
1
|
+
var e={90:e=>{const t=()=>{if("function"!=typeof document.getElementsByClassName||"function"!=typeof document.querySelector||!document.body.classList||!window.MutationObserver)return void console.warn("semantic-forms was loaded into an unsupported browser and will not execute.");const e='<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>',r='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;"><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>',a=["TEXTAREA","SELECT"],n=["checkbox","color","date","datetime-local","email","file","image","month","number","password","radio","range","search","tel","text","time","url","week"],o=document.querySelectorAll("form.semanticForms:not(.semanticFormsActive)");for(const t of o){if(t.classList.add("semanticFormsActive"),t.classList.contains("lowFlow"))continue;const o=Array.from(t.querySelectorAll("input, textarea, select"));for(let d of o){if(d.classList.contains("semanticform")||!d.id)continue;const o=d.getAttribute("type");if(a.includes(d.nodeName)||n.includes(o)){let a=d.parentNode;for(;a&&"DL"!==a.nodeName;)a=a.parentNode;if(!a)continue;a.classList.contains("floatLabelForm")||a.classList.add("floatLabelForm");const n=!d.parentNode.parentNode.id||"checkbox"!==o&&"radio"!==o?document.querySelector("label[for="+d.id.replace(/\./g,"\\.")+"]"):document.querySelector("label[data-for="+d.parentNode.parentNode.id.replace(/\./g,"\\.")+"]");if(n||console.error(`semantic-forms: Found an input (${d.id||d.getAttribute("name")}) without a properly associated label. Make sure there is a label for it and the label has a matching "for" attribute.`),d.classList.add("semanticform"),"checkbox"===o||"radio"===o){let e=d.parentNode;for(;e&&"DD"!==e.nodeName;)e=e.parentNode;if(!e){console.error(`semantic-forms: Found an input (${d.id||d.getAttribute("name")}) that is not inside a <dd> element.`);continue}if("LABEL"!==e.firstChild.nodeName){const t=document.createElement("label");if(t.className="floatLabelFormAnimatedLabel","checkbox"===o&&"DD"===d.parentNode.nodeName&&(t.setAttribute("for",d.id),d.parentNode.classList.add("singleCheckbox"),t.className="",n.setAttribute("hidden","hidden"),s(t,d)),"radio"===o&&"DD"===d.parentNode.nodeName&&(t.setAttribute("for",d.id),d.parentNode.classList.add("singleRadio"),t.className="",n.setAttribute("hidden","hidden"),s(t,d)),t.innerHTML=n.innerHTML,n.hasAttribute("title")&&null!==n.getAttribute("data-show-help-icon")&&!n.querySelector("span.help")){const e=n.getAttribute("title");n.innerHTML+=` <span title="${e}" class="help">${r}</span>`,t.innerHTML+=` <span title="${e}" class="help">${r}</span>`}if(e.querySelector(":required")&&null===n.getAttribute("data-no-asterisk")&&!n.querySelector("span.required")){const e=n.getAttribute("data-asterisk-text")||"This field is required.";n.innerHTML+=` <span title="${e}" class="required">*</span>`,t.innerHTML+=` <span title="${e}" class="required">*</span>`}e.querySelector("label")||e.append(t)}"DIV"===e.parentElement.nodeName&&e.parentElement.remove();const t=document.createElement("div");t.append(n.closest("dt"),e),a.append(t)}else{const e=document.createElement("label");if(e.setAttribute("for",d.id),e.className="floatLabelFormAnimatedLabel",e.innerHTML=n.innerHTML,d.hasAttribute("title")&&null!==n.getAttribute("data-show-help-icon")&&!n.querySelector("span.help")){const t=d.getAttribute("title");e.innerHTML+=` <span title="${t}" class="help">${r}</span>`}if(d.hasAttribute("required")&&null===n.getAttribute("data-no-asterisk")&&!n.querySelector("span.required")){const t=n.getAttribute("data-asterisk-text")||"This field is required.";e.innerHTML+=` <span title="${t}" class="required">*</span>`}n.setAttribute("hidden","hidden"),s(e,d)}if(null!==d.getAttribute("data-auto-grow")){if("INPUT"===d.nodeName&&"text"===d.type){const e=document.createElement("textarea");e.id=d.id,e.class=d.class,e.innerText=d.value,e.setAttribute("data-auto-grow",""),d.replaceWith(e),d=e}"TEXTAREA"===d.nodeName&&d.addEventListener("keypress",e=>{"Enter"!==e.key||"Enter"===e.key&&e.shiftKey||(e.preventDefault(),t.requestSubmit())})}if("checkbox"!==o&&"radio"!==o){d.getAttribute("placeholder")||d.setAttribute("placeholder"," ");const e=document.createElement("div"),t=n.closest("dt"),r=d.closest("dd");if(!t){console.error(`semantic-forms: Found an input (${d.id||d.getAttribute("name")}) that does not have a corresponding <dt> element.`);continue}if(!r){console.error(`semantic-forms: Found an input (${d.id||d.getAttribute("name")}) that does not have a corresponding <dd> element.`);continue}if("SELECT"!==d.nodeName&&"range"!==o){const e=document.createElement("button");e.type="button",e.title=d.getAttribute("data-clear-field-text")||"Clear field",e.ariaLabel=d.getAttribute("data-clear-field-text")||"Clear field",e.tabIndex=-1,e.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" />',e.classList.add("clear"),e.id=`semanticFormsClearButton_${d.id}`,e.addEventListener("click",()=>{d.previousValue=d.value,d.value="",d.focus(),l=d.id,d.dispatchEvent(new Event("input",{bubbles:!0}))}),s(e,r.querySelector("label"))}if(d.addEventListener("focus",e=>{"INPUT"===e.target.nodeName&&(i=e.target)}),/colspan-/.test(r.className)){const t=r.className.match(/colspan-([0-9]|full)/)[0];r.classList.remove(t),e.classList.add(t)}if(null!==d.getAttribute("data-max-content")&&!("fieldSizing"in document.createElement("input").style)){const t=()=>{const t=8*(""!==d.value?d.value:d.placeholder).length+40;d.style.width=t+"px",d.style.maxWidth="100%",e.style.width=t+"px"};t(),d.addEventListener("input",t)}e.append(t,r),a.append(e),"none"===t.style.display&&"none"===r.style.display&&(e.style.display="none")}if("file"===o){const e=d.parentElement.querySelector(".clear");d.addEventListener("input",t=>{e.style.display=t.target.files.length?"flex":"none"}),e.addEventListener("click",()=>{e.style.display="none"})}if("range"===o&&d.classList.contains("displayValue")){d.parentNode.parentNode.querySelector("dd label").innerHTML+=`<span class="seperator">: </span><output>${d.value}</output>`,d.addEventListener("input",e=>{e.target.parentNode.parentNode.querySelector("output").innerHTML=e.target.value})}if("password"===o&&null===d.getAttribute("data-no-reveal")){const t=document.createElement("button");t.type="button",t.title=d.getAttribute("data-show-password-text")||"Show password",t.ariaLabel=d.getAttribute("data-show-password-text")||"Show password",t.tabIndex=-1,t.innerHTML=e,t.classList.add("show"),t.id=`semanticFormsShowButton_${d.id}`;const r=d.closest("dd");if(!r){console.error(`semantic-forms: Found an input (${d.id||d.getAttribute("name")}) that is not inside a <dd> element.`);continue}t.addEventListener("click",()=>{"password"===d.type?(t.innerHTML='<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>',t.title=d.getAttribute("data-hide-password-text")||"Hide password",t.ariaLabel=d.getAttribute("data-hide-password-text")||"Hide password",d.type="text"):(t.innerHTML=e,t.title=d.getAttribute("data-show-password-text")||"Show password",t.ariaLabel=d.getAttribute("data-show-password-text")||"Show password",d.type="password"),d.focus()}),s(t,r.querySelector("label"))}if("TEXTAREA"===d.nodeName){if(null===d.getAttribute("data-disable-autosize")){d.style.setProperty("resize","none"),d.style.setProperty("min-height","0"),d.style.setProperty("max-height","none"),d.style.setProperty("height","auto");const e=()=>{let e=d.getAttribute("data-max-rows");e&&(isNaN(e)||Number(e)<=0)&&(console.warn(`An invalid value was passed to the "data-max-rows" attribute. This value will be ignored.\n\nProvided value: ${d.getAttribute("data-max-rows")}`),e=null);const t=d.getAttribute("data-max-rows")&&Number(d.getAttribute("data-max-rows"))<5?d.getAttribute("data-max-rows"):"5";d.setAttribute("rows",t);const r=window.getComputedStyle(d),a=parseFloat(r["padding-left"])+parseFloat(r["padding-right"]),n=parseFloat(r["border-left-width"])+parseFloat(r["border-right-width"]);d.style.setProperty("overflow","hidden","important"),d.style.setProperty("width",parseFloat(r.width)-a-n+"px"),d.style.setProperty("box-sizing","content-box"),d.style.setProperty("padding-inline","0"),d.style.setProperty("border-width","0");const o=parseFloat(r["padding-top"])+parseFloat(r["padding-bottom"]),s="normal"===r["line-height"]?parseFloat(r.height):parseFloat(r["line-height"]),i=Math.round(d.scrollHeight);d.style.removeProperty("width"),d.style.removeProperty("box-sizing"),d.style.removeProperty("padding-inline"),d.style.removeProperty("border-width"),d.style.removeProperty("overflow");const l=Math.round((i-o)/s);e?d.setAttribute("rows",""+Math.min(l,Number(e))):d.setAttribute("rows",""+l)};d.addEventListener("input",e),d.dispatchEvent(new Event("input",{bubbles:!0}))}if(null!==d.getAttribute("data-auto-grow")){const e=()=>{d.value.length?d.style.height=d.scrollHeight+"px":d.style.height=window.getComputedStyle(t).getPropertyValue("--semanticFormsInputHeight")};d.style.height=window.getComputedStyle(t).getPropertyValue("--semanticFormsInputHeight"),d.addEventListener("input",e)}const e=()=>{const e=d.parentElement?.querySelector("button.clear");e&&(e.style.marginRight=d.clientHeight<d.scrollHeight?"15px":"")};d.addEventListener("input",e),d.addEventListener("mouseup",e),e()}}}}function s(e,t){t.nextSibling?t.parentNode.insertBefore(e,t.nextSibling):t.parentNode.appendChild(e)}let i,l;document.addEventListener("keydown",e=>{!e.ctrlKey&&!e.metaKey||"z"!==e.key||e.shiftKey?(e.ctrlKey&&"y"===e.key||e.metaKey&&e.shiftKey&&"z"===e.key)&&i&&(i?.parentNode?.querySelector("button.clear").id!==`semanticFormsClearButton_${l}`&&i?.parentNode?.querySelector("button.clear").name!==`semanticFormsClearButton_${l}`||i.redoValue&&(i.previousValue=i.value,i.value=i.redoValue)):i&&(i?.parentNode?.querySelector("button.clear").id!==`semanticFormsClearButton_${l}`&&i?.parentNode?.querySelector("button.clear").name!==`semanticFormsClearButton_${l}`||i.previousValue&&(i.redoValue=i.value,i.value=i.previousValue))}),window.semanticFormsObserver||(window.semanticFormsObserver=new window.MutationObserver(e=>{let r=!1;for(const a of e){for(const e of a.addedNodes)("FORM"===e.nodeName||e?.querySelector?.("form"))&&(t(),r=!0);if(r)break}}),window.semanticFormsObserver.observe(document.body,{attributes:!1,childList:!0,characterData:!1,subtree:!0})),t.reinitialize=e=>{e.classList.remove("semanticFormsActive"),t()}};e.exports=t}},t={};var r=function r(a){var n=t[a];if(void 0!==n)return n.exports;var o=t[a]={exports:{}};return e[a](o,o.exports,r),o.exports}(90);export{r as default};
|
|
2
2
|
//# sourceMappingURL=semantic-forms.min.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"semantic-forms.min.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=\"16\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" style=\"overflow:visible;margin-top:1px;\"><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', () => {\n input.previousValue = input.value\n input.value = ''\n input.focus()\n lastClearFieldPressed = input.id\n\n // used for any other updates required by various inputs\n input.dispatchEvent(new Event('input', { bubbles: true }))\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', event => {\n clearBtn.style.display = event.target.files.length ? 'flex' : 'none'\n })\n clearBtn.addEventListener('click', () => {\n clearBtn.style.display = 'none'\n })\n }\n\n // handle range inputs with a class to display the value\n if (type === 'range' && input.classList.contains('displayValue')) {\n const label = input.parentNode.parentNode.querySelector('dd label')\n label.innerHTML += `<span class=\"seperator\">: </span><output>${input.value}</output>`\n input.addEventListener('input', event => {\n const output = event.target.parentNode.parentNode.querySelector('output')\n output.innerHTML = event.target.value\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', () => {\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 if (input.nodeName === 'TEXTAREA') {\n if (input.getAttribute('data-disable-autosize') === null) {\n // add auto-sizing\n input.style.setProperty('resize', 'none')\n input.style.setProperty('min-height', '0')\n input.style.setProperty('max-height', 'none')\n input.style.setProperty('height', 'auto')\n\n const handleInput = () => {\n // reset rows attribute to get accurate scrollHeight\n let maxRows = input.getAttribute('data-max-rows')\n\n if (maxRows) {\n if (isNaN(maxRows) || Number(maxRows) <= 0) {\n console.warn(`An invalid value was passed to the \"data-max-rows\" attribute. This value will be ignored.\\n\\nProvided value: ${input.getAttribute('data-max-rows')}`)\n maxRows = null\n }\n }\n\n const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5'\n input.setAttribute('rows', minRows)\n\n // get the computed values object reference\n const style = window.getComputedStyle(input)\n\n // force content-box for size accurate line-height calculation, remove scrollbars, lock width (subtract inline padding and inline border widths), and remove inline padding and borders to keep width consistent (for text wrapping accuracy)\n const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right'])\n const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width'])\n input.style.setProperty('overflow', 'hidden', 'important')\n input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px')\n input.style.setProperty('box-sizing', 'content-box')\n input.style.setProperty('padding-inline', '0')\n input.style.setProperty('border-width', '0')\n\n // get the base line height, and top / bottom padding\n const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom'])\n const lineHeight = style['line-height'] === 'normal'\n ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box)\n : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value\n\n // get the scroll height (rounding to be safe to ensure cross browser consistency)\n const scrollHeight = Math.round(input.scrollHeight)\n\n // undo overflow, width, border-width, box-sizing & inline padding overrides\n input.style.removeProperty('width')\n input.style.removeProperty('box-sizing')\n input.style.removeProperty('padding-inline')\n input.style.removeProperty('border-width')\n input.style.removeProperty('overflow')\n\n // subtract blockPadding from scrollHeight and divide that by our lineHeight to get the row count, round to nearest integer as it will always be within ~.1 of the correct whole number\n const rows = Math.round((scrollHeight - blockPadding) / lineHeight)\n\n // set the calculated rows attribute (limited by rowLimit)\n if (maxRows) {\n input.setAttribute('rows', '' + Math.min(rows, Number(maxRows)))\n } else {\n input.setAttribute('rows', '' + rows)\n }\n }\n\n input.addEventListener('input', handleInput)\n\n // trigger the event to set the initial rows value\n input.dispatchEvent(new Event('input', { bubbles: true }))\n }\n\n // shifts the clear button to the right if a scrollbar is present\n const shiftClearBtn = () => {\n const clearBtn = input.parentElement?.querySelector('button.clear')\n if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : ''\n }\n input.addEventListener('input', shiftClearBtn)\n input.addEventListener('mouseup', shiftClearBtn)\n shiftClearBtn()\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__(90);\n"],"names":["semanticForms","document","getElementsByClassName","querySelector","body","classList","window","MutationObserver","console","warn","passwordShow","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","previousValue","value","focus","lastClearFieldPressed","dispatchEvent","Event","bubbles","event","target","lastFocusedInput","test","match","style","display","files","length","showBtn","setProperty","handleInput","maxRows","isNaN","Number","minRows","getComputedStyle","inlinePadding","parseFloat","inlineBorderWidth","width","blockPadding","lineHeight","height","scrollHeight","Math","round","removeProperty","rows","min","shiftClearBtn","marginRight","clientHeight","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_exports__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"semantic-forms.min.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=\"16\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" style=\"overflow:visible;\"><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 (let 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 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 // #region standard inputs\n // check for auto-grow attribute on textareas\n if (input.getAttribute('data-auto-grow') !== null) {\n // progressively enhance inputs into textareas\n if (input.nodeName === 'INPUT' && input.type === 'text') {\n const newInput = document.createElement('textarea')\n newInput.id = input.id\n newInput.class = input.class\n newInput.innerText = input.value\n newInput.setAttribute('data-auto-grow', '')\n input.replaceWith(newInput)\n input = newInput\n\n }\n\n if (input.nodeName === 'TEXTAREA') {\n // when pressing enter while this input is focused, we want to submit\n input.addEventListener('keypress', (e) => {\n if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return\n e.preventDefault()\n form.requestSubmit()\n })\n }\n }\n\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 input 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', () => {\n input.previousValue = input.value\n input.value = ''\n input.focus()\n lastClearFieldPressed = input.id\n\n // used for any other updates required by various inputs\n input.dispatchEvent(new Event('input', { bubbles: true }))\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 // check for max-content attribute\n // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing \n if (input.getAttribute('data-max-content') !== null) {\n if (!('fieldSizing' in document.createElement('input').style)) {\n const adjustWidth = () => {\n const value = input.value !== '' ? input.value : input.placeholder\n const width = value.length * 8 + 40\n input.style.width = width + 'px'\n input.style.maxWidth = '100%'\n div.style.width = width + 'px'\n }\n adjustWidth()\n input.addEventListener('input', adjustWidth)\n }\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 // #endregion\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', event => {\n clearBtn.style.display = event.target.files.length ? 'flex' : 'none'\n })\n clearBtn.addEventListener('click', () => {\n clearBtn.style.display = 'none'\n })\n }\n\n // handle range inputs with a class to display the value\n if (type === 'range' && input.classList.contains('displayValue')) {\n const label = input.parentNode.parentNode.querySelector('dd label')\n label.innerHTML += `<span class=\"seperator\">: </span><output>${input.value}</output>`\n input.addEventListener('input', event => {\n const output = event.target.parentNode.parentNode.querySelector('output')\n output.innerHTML = event.target.value\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', () => {\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 if (input.nodeName === 'TEXTAREA') {\n if (input.getAttribute('data-disable-autosize') === null) {\n // add auto-sizing\n input.style.setProperty('resize', 'none')\n input.style.setProperty('min-height', '0')\n input.style.setProperty('max-height', 'none')\n input.style.setProperty('height', 'auto')\n\n const handleInput = () => {\n // reset rows attribute to get accurate scrollHeight\n let maxRows = input.getAttribute('data-max-rows')\n\n if (maxRows) {\n if (isNaN(maxRows) || Number(maxRows) <= 0) {\n console.warn(`An invalid value was passed to the \"data-max-rows\" attribute. This value will be ignored.\\n\\nProvided value: ${input.getAttribute('data-max-rows')}`)\n maxRows = null\n }\n }\n\n const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5'\n input.setAttribute('rows', minRows)\n\n // get the computed values object reference\n const style = window.getComputedStyle(input)\n\n // force content-box for size accurate line-height calculation, remove scrollbars, lock width (subtract inline padding and inline border widths), and remove inline padding and borders to keep width consistent (for text wrapping accuracy)\n const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right'])\n const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width'])\n input.style.setProperty('overflow', 'hidden', 'important')\n input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px')\n input.style.setProperty('box-sizing', 'content-box')\n input.style.setProperty('padding-inline', '0')\n input.style.setProperty('border-width', '0')\n\n // get the base line height, and top / bottom padding\n const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom'])\n const lineHeight = style['line-height'] === 'normal'\n ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box)\n : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value\n\n // get the scroll height (rounding to be safe to ensure cross browser consistency)\n const scrollHeight = Math.round(input.scrollHeight)\n\n // undo overflow, width, border-width, box-sizing & inline padding overrides\n input.style.removeProperty('width')\n input.style.removeProperty('box-sizing')\n input.style.removeProperty('padding-inline')\n input.style.removeProperty('border-width')\n input.style.removeProperty('overflow')\n\n // subtract blockPadding from scrollHeight and divide that by our lineHeight to get the row count, round to nearest integer as it will always be within ~.1 of the correct whole number\n const rows = Math.round((scrollHeight - blockPadding) / lineHeight)\n\n // set the calculated rows attribute (limited by rowLimit)\n if (maxRows) {\n input.setAttribute('rows', '' + Math.min(rows, Number(maxRows)))\n } else {\n input.setAttribute('rows', '' + rows)\n }\n }\n\n input.addEventListener('input', handleInput)\n\n // trigger the event to set the initial rows value\n input.dispatchEvent(new Event('input', { bubbles: true }))\n }\n\n // progressively enhance textarea for Firefox and Safari\n // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing \n if (input.getAttribute('data-auto-grow') !== null) {\n const adjustHeight = () => {\n if (input.value.length) {\n input.style.height = input.scrollHeight + 'px'\n } else {\n input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')\n }\n }\n\n // set initial height to semantic-forms CSS variable\n input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')\n input.addEventListener('input', adjustHeight)\n }\n\n // shifts the clear button to the right if a scrollbar is present\n const shiftClearBtn = () => {\n const clearBtn = input.parentElement?.querySelector('button.clear')\n if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : ''\n }\n input.addEventListener('input', shiftClearBtn)\n input.addEventListener('mouseup', shiftClearBtn)\n shiftClearBtn()\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__(90);\n"],"names":["semanticForms","document","getElementsByClassName","querySelector","body","classList","window","MutationObserver","console","warn","passwordShow","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","newInput","class","innerText","value","replaceWith","addEventListener","e","key","shiftKey","preventDefault","requestSubmit","dt","clearBtn","title","ariaLabel","tabIndex","previousValue","focus","lastClearFieldPressed","dispatchEvent","Event","bubbles","event","target","lastFocusedInput","test","match","style","adjustWidth","width","placeholder","length","maxWidth","display","files","showBtn","setProperty","handleInput","maxRows","isNaN","Number","minRows","getComputedStyle","inlinePadding","parseFloat","inlineBorderWidth","blockPadding","lineHeight","height","scrollHeight","Math","round","removeProperty","rows","min","adjustHeight","getPropertyValue","shiftClearBtn","marginRight","clientHeight","newNode","referenceNode","nextSibling","insertBefore","appendChild","ctrlKey","metaKey","name","redoValue","semanticFormsObserver","mutations","stop","mutation","node","addedNodes","observe","attributes","childList","characterData","subtree","reinitialize","module","exports","__webpack_module_cache__","__webpack_exports__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__"],"sourceRoot":""}
|
package/dist/semantic-forms.mjs
CHANGED
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
\**************************/
|
|
6
6
|
/***/module=>{const semanticForms=()=>{
|
|
7
7
|
// do some feature detection so none of the JS executes if the browser is too old
|
|
8
|
-
if(typeof document.getElementsByClassName!=="function"||typeof document.querySelector!=="function"||!document.body.classList||!window.MutationObserver){console.warn("semantic-forms was loaded into an unsupported browser and will not execute.");return}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>';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>';const helpTextIcon='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;
|
|
8
|
+
if(typeof document.getElementsByClassName!=="function"||typeof document.querySelector!=="function"||!document.body.classList||!window.MutationObserver){console.warn("semantic-forms was loaded into an unsupported browser and will not execute.");return}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>';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>';const helpTextIcon='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;"><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>';const nodeNameLookup=["TEXTAREA","SELECT"];const inputTypeLookup=["checkbox","color","date","datetime-local","email","file","image","month","number","password","radio","range","search","tel","text","time","url","week"];
|
|
9
9
|
// progressively enhance form elements that have the semanticForms class
|
|
10
10
|
const forms=document.querySelectorAll("form.semanticForms:not(.semanticFormsActive)");for(const form of forms){form.classList.add("semanticFormsActive");if(form.classList.contains("lowFlow"))continue;
|
|
11
11
|
// update each input in the semantic form
|
|
12
|
-
const inputs=Array.from(form.querySelectorAll("input, textarea, select"));for(
|
|
12
|
+
const inputs=Array.from(form.querySelectorAll("input, textarea, select"));for(let input of inputs){
|
|
13
13
|
// ignore input if it has previously been formatted
|
|
14
14
|
if(input.classList.contains("semanticform")||!input.id)continue;const type=input.getAttribute("type");if(nodeNameLookup.includes(input.nodeName)||inputTypeLookup.includes(type)){
|
|
15
15
|
// recursively find <dl> element
|
|
@@ -21,17 +21,26 @@ let dd=input.parentNode;while(dd&&dd.nodeName!=="DD")dd=dd.parentNode;if(!dd){co
|
|
|
21
21
|
// removes old div that a radio or checkbox may have been added to
|
|
22
22
|
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)}
|
|
23
23
|
// #endregion
|
|
24
|
-
// standard inputs
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
// #region standard inputs
|
|
25
|
+
// check for auto-grow attribute on textareas
|
|
26
|
+
if(input.getAttribute("data-auto-grow")!==null){
|
|
27
|
+
// progressively enhance inputs into textareas
|
|
28
|
+
if(input.nodeName==="INPUT"&&input.type==="text"){const newInput=document.createElement("textarea");newInput.id=input.id;newInput.class=input.class;newInput.innerText=input.value;newInput.setAttribute("data-auto-grow","");input.replaceWith(newInput);input=newInput}if(input.nodeName==="TEXTAREA")
|
|
29
|
+
// when pressing enter while this input is focused, we want to submit
|
|
30
|
+
input.addEventListener("keypress",e=>{if(e.key!=="Enter"||e.key==="Enter"&&e.shiftKey)return;e.preventDefault();form.requestSubmit()})}if(type!=="checkbox"&&type!=="radio"){if(!input.getAttribute("placeholder"))input.setAttribute("placeholder"," ");const div=document.createElement("div");const dt=label.closest("dt");const dd=input.closest("dd");if(!dt){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding <dt> element.`);continue}if(!dd){console.error(`semantic-forms: Found an input (${input.id||input.getAttribute("name")}) that does not have a corresponding <dd> element.`);continue}
|
|
31
|
+
// #region input clear button
|
|
27
32
|
if(input.nodeName!=="SELECT"&&type!=="range"){const clearBtn=document.createElement("button");clearBtn.type="button";clearBtn.title=input.getAttribute("data-clear-field-text")||"Clear field";clearBtn.ariaLabel=input.getAttribute("data-clear-field-text")||"Clear field";clearBtn.tabIndex=-1;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" />';clearBtn.classList.add("clear");clearBtn.id=`semanticFormsClearButton_${input.id}`;clearBtn.addEventListener("click",()=>{input.previousValue=input.value;input.value="";input.focus();lastClearFieldPressed=input.id;
|
|
28
33
|
// used for any other updates required by various inputs
|
|
29
34
|
input.dispatchEvent(new Event("input",{bubbles:true}))});insertAfter(clearBtn,dd.querySelector("label"))}input.addEventListener("focus",event=>{if(event.target.nodeName==="INPUT")lastFocusedInput=event.target});
|
|
30
35
|
// #endregion
|
|
31
36
|
// check for colspan- utility class
|
|
32
|
-
if(/colspan-/.test(dd.className)){const match=dd.className.match(/colspan-([0-9]|full)/)[0];dd.classList.remove(match);div.classList.add(match)}
|
|
37
|
+
if(/colspan-/.test(dd.className)){const match=dd.className.match(/colspan-([0-9]|full)/)[0];dd.classList.remove(match);div.classList.add(match)}
|
|
38
|
+
// check for max-content attribute
|
|
39
|
+
// this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing
|
|
40
|
+
if(input.getAttribute("data-max-content")!==null)if(!("fieldSizing"in document.createElement("input").style)){const adjustWidth=()=>{const value=input.value!==""?input.value:input.placeholder;const width=value.length*8+40;input.style.width=width+"px";input.style.maxWidth="100%";div.style.width=width+"px"};adjustWidth();input.addEventListener("input",adjustWidth)}div.append(dt,dd);dl.append(div);
|
|
33
41
|
// determine visibility of newly created <div>
|
|
34
42
|
if(dt.style.display==="none"&&dd.style.display==="none")div.style.display="none"}
|
|
43
|
+
// #endregion
|
|
35
44
|
// handle file input clear btn, cannot be handled with CSS
|
|
36
45
|
if(type==="file"){const clearBtn=input.parentElement.querySelector(".clear");input.addEventListener("input",event=>{clearBtn.style.display=event.target.files.length?"flex":"none"});clearBtn.addEventListener("click",()=>{clearBtn.style.display="none"})}
|
|
37
46
|
// handle range inputs with a class to display the value
|
|
@@ -61,6 +70,11 @@ const rows=Math.round((scrollHeight-blockPadding)/lineHeight);
|
|
|
61
70
|
if(maxRows)input.setAttribute("rows",""+Math.min(rows,Number(maxRows)));else input.setAttribute("rows",""+rows)};input.addEventListener("input",handleInput);
|
|
62
71
|
// trigger the event to set the initial rows value
|
|
63
72
|
input.dispatchEvent(new Event("input",{bubbles:true}))}
|
|
73
|
+
// progressively enhance textarea for Firefox and Safari
|
|
74
|
+
// this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing
|
|
75
|
+
if(input.getAttribute("data-auto-grow")!==null){const adjustHeight=()=>{if(input.value.length)input.style.height=input.scrollHeight+"px";else input.style.height=window.getComputedStyle(form).getPropertyValue("--semanticFormsInputHeight")};
|
|
76
|
+
// set initial height to semantic-forms CSS variable
|
|
77
|
+
input.style.height=window.getComputedStyle(form).getPropertyValue("--semanticFormsInputHeight");input.addEventListener("input",adjustHeight)}
|
|
64
78
|
// shifts the clear button to the right if a scrollbar is present
|
|
65
79
|
const shiftClearBtn=()=>{const clearBtn=input.parentElement?.querySelector("button.clear");if(clearBtn)clearBtn.style.marginRight=input.clientHeight<input.scrollHeight?"15px":""};input.addEventListener("input",shiftClearBtn);input.addEventListener("mouseup",shiftClearBtn);shiftClearBtn()}}}}
|
|
66
80
|
/**
|
|
@@ -1 +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=\"16\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" style=\"overflow:visible;margin-top:1px;\"><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', () => {\n input.previousValue = input.value\n input.value = ''\n input.focus()\n lastClearFieldPressed = input.id\n\n // used for any other updates required by various inputs\n input.dispatchEvent(new Event('input', { bubbles: true }))\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', event => {\n clearBtn.style.display = event.target.files.length ? 'flex' : 'none'\n })\n clearBtn.addEventListener('click', () => {\n clearBtn.style.display = 'none'\n })\n }\n\n // handle range inputs with a class to display the value\n if (type === 'range' && input.classList.contains('displayValue')) {\n const label = input.parentNode.parentNode.querySelector('dd label')\n label.innerHTML += `<span class=\"seperator\">: </span><output>${input.value}</output>`\n input.addEventListener('input', event => {\n const output = event.target.parentNode.parentNode.querySelector('output')\n output.innerHTML = event.target.value\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', () => {\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 if (input.nodeName === 'TEXTAREA') {\n if (input.getAttribute('data-disable-autosize') === null) {\n // add auto-sizing\n input.style.setProperty('resize', 'none')\n input.style.setProperty('min-height', '0')\n input.style.setProperty('max-height', 'none')\n input.style.setProperty('height', 'auto')\n\n const handleInput = () => {\n // reset rows attribute to get accurate scrollHeight\n let maxRows = input.getAttribute('data-max-rows')\n\n if (maxRows) {\n if (isNaN(maxRows) || Number(maxRows) <= 0) {\n console.warn(`An invalid value was passed to the \"data-max-rows\" attribute. This value will be ignored.\\n\\nProvided value: ${input.getAttribute('data-max-rows')}`)\n maxRows = null\n }\n }\n\n const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5'\n input.setAttribute('rows', minRows)\n\n // get the computed values object reference\n const style = window.getComputedStyle(input)\n\n // force content-box for size accurate line-height calculation, remove scrollbars, lock width (subtract inline padding and inline border widths), and remove inline padding and borders to keep width consistent (for text wrapping accuracy)\n const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right'])\n const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width'])\n input.style.setProperty('overflow', 'hidden', 'important')\n input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px')\n input.style.setProperty('box-sizing', 'content-box')\n input.style.setProperty('padding-inline', '0')\n input.style.setProperty('border-width', '0')\n\n // get the base line height, and top / bottom padding\n const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom'])\n const lineHeight = style['line-height'] === 'normal'\n ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box)\n : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value\n\n // get the scroll height (rounding to be safe to ensure cross browser consistency)\n const scrollHeight = Math.round(input.scrollHeight)\n\n // undo overflow, width, border-width, box-sizing & inline padding overrides\n input.style.removeProperty('width')\n input.style.removeProperty('box-sizing')\n input.style.removeProperty('padding-inline')\n input.style.removeProperty('border-width')\n input.style.removeProperty('overflow')\n\n // subtract blockPadding from scrollHeight and divide that by our lineHeight to get the row count, round to nearest integer as it will always be within ~.1 of the correct whole number\n const rows = Math.round((scrollHeight - blockPadding) / lineHeight)\n\n // set the calculated rows attribute (limited by rowLimit)\n if (maxRows) {\n input.setAttribute('rows', '' + Math.min(rows, Number(maxRows)))\n } else {\n input.setAttribute('rows', '' + rows)\n }\n }\n\n input.addEventListener('input', handleInput)\n\n // trigger the event to set the initial rows value\n input.dispatchEvent(new Event('input', { bubbles: true }))\n }\n\n // shifts the clear button to the right if a scrollbar is present\n const shiftClearBtn = () => {\n const clearBtn = input.parentElement?.querySelector('button.clear')\n if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : ''\n }\n input.addEventListener('input', shiftClearBtn)\n input.addEventListener('mouseup', shiftClearBtn)\n shiftClearBtn()\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","previousValue","value","focus","lastClearFieldPressed","dispatchEvent","Event","bubbles","event","target","lastFocusedInput","test","match","style","display","files","length","output","showBtn","setProperty","handleInput","maxRows","isNaN","Number","minRows","getComputedStyle","inlinePadding","parseFloat","inlineBorderWidth","width","blockPadding","lineHeight","height","scrollHeight","Math","round","removeProperty","rows","min","shiftClearBtn","marginRight","clientHeight","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__","__webpack_exports__"],"sourceRoot":""}
|
|
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=\"16\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" style=\"overflow:visible;\"><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 (let 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 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 // #region standard inputs\n // check for auto-grow attribute on textareas\n if (input.getAttribute('data-auto-grow') !== null) {\n // progressively enhance inputs into textareas\n if (input.nodeName === 'INPUT' && input.type === 'text') {\n const newInput = document.createElement('textarea')\n newInput.id = input.id\n newInput.class = input.class\n newInput.innerText = input.value\n newInput.setAttribute('data-auto-grow', '')\n input.replaceWith(newInput)\n input = newInput\n\n }\n\n if (input.nodeName === 'TEXTAREA') {\n // when pressing enter while this input is focused, we want to submit\n input.addEventListener('keypress', (e) => {\n if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return\n e.preventDefault()\n form.requestSubmit()\n })\n }\n }\n\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 input 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', () => {\n input.previousValue = input.value\n input.value = ''\n input.focus()\n lastClearFieldPressed = input.id\n\n // used for any other updates required by various inputs\n input.dispatchEvent(new Event('input', { bubbles: true }))\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 // check for max-content attribute\n // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing \n if (input.getAttribute('data-max-content') !== null) {\n if (!('fieldSizing' in document.createElement('input').style)) {\n const adjustWidth = () => {\n const value = input.value !== '' ? input.value : input.placeholder\n const width = value.length * 8 + 40\n input.style.width = width + 'px'\n input.style.maxWidth = '100%'\n div.style.width = width + 'px'\n }\n adjustWidth()\n input.addEventListener('input', adjustWidth)\n }\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 // #endregion\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', event => {\n clearBtn.style.display = event.target.files.length ? 'flex' : 'none'\n })\n clearBtn.addEventListener('click', () => {\n clearBtn.style.display = 'none'\n })\n }\n\n // handle range inputs with a class to display the value\n if (type === 'range' && input.classList.contains('displayValue')) {\n const label = input.parentNode.parentNode.querySelector('dd label')\n label.innerHTML += `<span class=\"seperator\">: </span><output>${input.value}</output>`\n input.addEventListener('input', event => {\n const output = event.target.parentNode.parentNode.querySelector('output')\n output.innerHTML = event.target.value\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', () => {\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 if (input.nodeName === 'TEXTAREA') {\n if (input.getAttribute('data-disable-autosize') === null) {\n // add auto-sizing\n input.style.setProperty('resize', 'none')\n input.style.setProperty('min-height', '0')\n input.style.setProperty('max-height', 'none')\n input.style.setProperty('height', 'auto')\n\n const handleInput = () => {\n // reset rows attribute to get accurate scrollHeight\n let maxRows = input.getAttribute('data-max-rows')\n\n if (maxRows) {\n if (isNaN(maxRows) || Number(maxRows) <= 0) {\n console.warn(`An invalid value was passed to the \"data-max-rows\" attribute. This value will be ignored.\\n\\nProvided value: ${input.getAttribute('data-max-rows')}`)\n maxRows = null\n }\n }\n\n const minRows = input.getAttribute('data-max-rows') && Number(input.getAttribute('data-max-rows')) < 5 ? input.getAttribute('data-max-rows') : '5'\n input.setAttribute('rows', minRows)\n\n // get the computed values object reference\n const style = window.getComputedStyle(input)\n\n // force content-box for size accurate line-height calculation, remove scrollbars, lock width (subtract inline padding and inline border widths), and remove inline padding and borders to keep width consistent (for text wrapping accuracy)\n const inlinePadding = parseFloat(style['padding-left']) + parseFloat(style['padding-right'])\n const inlineBorderWidth = parseFloat(style['border-left-width']) + parseFloat(style['border-right-width'])\n input.style.setProperty('overflow', 'hidden', 'important')\n input.style.setProperty('width', (parseFloat(style.width) - inlinePadding - inlineBorderWidth) + 'px')\n input.style.setProperty('box-sizing', 'content-box')\n input.style.setProperty('padding-inline', '0')\n input.style.setProperty('border-width', '0')\n\n // get the base line height, and top / bottom padding\n const blockPadding = parseFloat(style['padding-top']) + parseFloat(style['padding-bottom'])\n const lineHeight = style['line-height'] === 'normal'\n ? parseFloat(style.height) // if line-height is not explicitly set, use the computed height value (ignore padding due to content-box)\n : parseFloat(style['line-height']) // otherwise (line-height is explicitly set), use the computed line-height value\n\n // get the scroll height (rounding to be safe to ensure cross browser consistency)\n const scrollHeight = Math.round(input.scrollHeight)\n\n // undo overflow, width, border-width, box-sizing & inline padding overrides\n input.style.removeProperty('width')\n input.style.removeProperty('box-sizing')\n input.style.removeProperty('padding-inline')\n input.style.removeProperty('border-width')\n input.style.removeProperty('overflow')\n\n // subtract blockPadding from scrollHeight and divide that by our lineHeight to get the row count, round to nearest integer as it will always be within ~.1 of the correct whole number\n const rows = Math.round((scrollHeight - blockPadding) / lineHeight)\n\n // set the calculated rows attribute (limited by rowLimit)\n if (maxRows) {\n input.setAttribute('rows', '' + Math.min(rows, Number(maxRows)))\n } else {\n input.setAttribute('rows', '' + rows)\n }\n }\n\n input.addEventListener('input', handleInput)\n\n // trigger the event to set the initial rows value\n input.dispatchEvent(new Event('input', { bubbles: true }))\n }\n\n // progressively enhance textarea for Firefox and Safari\n // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing \n if (input.getAttribute('data-auto-grow') !== null) {\n const adjustHeight = () => {\n if (input.value.length) {\n input.style.height = input.scrollHeight + 'px'\n } else {\n input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')\n }\n }\n\n // set initial height to semantic-forms CSS variable\n input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')\n input.addEventListener('input', adjustHeight)\n }\n\n // shifts the clear button to the right if a scrollbar is present\n const shiftClearBtn = () => {\n const clearBtn = input.parentElement?.querySelector('button.clear')\n if (clearBtn) clearBtn.style.marginRight = input.clientHeight < input.scrollHeight ? '15px' : ''\n }\n input.addEventListener('input', shiftClearBtn)\n input.addEventListener('mouseup', shiftClearBtn)\n shiftClearBtn()\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","newInput","class","innerText","value","replaceWith","addEventListener","e","key","shiftKey","preventDefault","requestSubmit","dt","clearBtn","title","ariaLabel","tabIndex","previousValue","focus","lastClearFieldPressed","dispatchEvent","Event","bubbles","event","target","lastFocusedInput","test","match","style","adjustWidth","placeholder","width","length","maxWidth","display","files","output","showBtn","setProperty","handleInput","maxRows","isNaN","Number","minRows","getComputedStyle","inlinePadding","parseFloat","inlineBorderWidth","blockPadding","lineHeight","height","scrollHeight","Math","round","removeProperty","rows","min","adjustHeight","getPropertyValue","shiftClearBtn","marginRight","clientHeight","newNode","referenceNode","nextSibling","insertBefore","appendChild","ctrlKey","metaKey","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__","__webpack_exports__"],"sourceRoot":""}
|
|
@@ -61,6 +61,12 @@
|
|
|
61
61
|
<input id="customize-password" name="customize-password" type="password" minlength="8" required data-clear-field-text="Vaporize this text" data-show-password-text="Reveal this password" data-hide-password-text="omg no hide it again!">
|
|
62
62
|
<p data-invalid-text>Password should be at least 8 characters long.</p>
|
|
63
63
|
</dd>
|
|
64
|
+
|
|
65
|
+
<dt><label for="input-button-1">Input with button</label></dt>
|
|
66
|
+
<dd>
|
|
67
|
+
<input type="text" id="input-button-1" name="input-button-1" placeholder="This input has a button">
|
|
68
|
+
<button type="button">Go</button>
|
|
69
|
+
</dd>
|
|
64
70
|
</dl>
|
|
65
71
|
|
|
66
72
|
<dl>
|
|
@@ -68,6 +74,20 @@
|
|
|
68
74
|
<dd><input type="text" name="single-input" id="single-input"></dd>
|
|
69
75
|
</dl>
|
|
70
76
|
|
|
77
|
+
<dl class="colspan-1">
|
|
78
|
+
<dt><label for="max-content-input"><code>data-max-content</code>text input</label></dt>
|
|
79
|
+
<dd><input type="text" name="max-content-input" id="max-content-input" placeholder="This is a placeholder." value="This is some text." data-max-content></dd>
|
|
80
|
+
|
|
81
|
+
<dt><label for="max-content-select"><code>data-max-content</code> select</label></dt>
|
|
82
|
+
<dd>
|
|
83
|
+
<select name="max-content-select" id="max-content-select" data-max-content>
|
|
84
|
+
<option>Short</option>
|
|
85
|
+
<option>Some really really really really really really really really long text</option>
|
|
86
|
+
<option>This is some medium text</option>
|
|
87
|
+
</select>
|
|
88
|
+
</dd>
|
|
89
|
+
</dl>
|
|
90
|
+
|
|
71
91
|
<fieldset class="colspan-full">
|
|
72
92
|
<legend>Fieldset legend</legend>
|
|
73
93
|
|
|
@@ -145,6 +165,23 @@
|
|
|
145
165
|
<dt><label for="file">File field</label></dt>
|
|
146
166
|
<dd><input id="file" name="file" type="file"></dd>
|
|
147
167
|
|
|
168
|
+
<dt><label for="input-button-2">Input with button</label></dt>
|
|
169
|
+
<dd>
|
|
170
|
+
<input type="text" id="input-button-2" name="input-button-2" placeholder="This input has a button" value="John Doe">
|
|
171
|
+
<label for="input-button-2">Some help text that should span the entire width of the input/button combo.</label>
|
|
172
|
+
<input type="submit" value="Submit">
|
|
173
|
+
</dd>
|
|
174
|
+
|
|
175
|
+
<dt><label for="select-button">Select with button</label></dt>
|
|
176
|
+
<dd>
|
|
177
|
+
<select id="select-button" name="select-button">
|
|
178
|
+
<option value="1">Option 1</option>
|
|
179
|
+
<option value="2">Option 2</option>
|
|
180
|
+
<option value="3">Option 3</option>
|
|
181
|
+
</select>
|
|
182
|
+
<button type="submit">Pick</button>
|
|
183
|
+
</dd>
|
|
184
|
+
|
|
148
185
|
<dt><label for="range">Range field</label></dt>
|
|
149
186
|
<dd><input id="range" name="range" type="range"></dd>
|
|
150
187
|
|
|
@@ -366,6 +403,16 @@
|
|
|
366
403
|
<textarea name="disable-autosize-textarea" id="disable-autosize-textarea" rows="5" placeholder="e.g. He just kept talking in one incredibly unbroken sentence moving from topic to topic so that no one had a chance to interrupt it was really quite hypnotic." data-disable-autosize>Row 1 Row 2 Row 3 Row 4 Row 5 Row 6</textarea>
|
|
367
404
|
<label for="disable-autosize-textarea">This <code>textarea</code> element has the <code>data-disable-autosize</code> attribute applied, and has <code>rows</code> set to 5.</label>
|
|
368
405
|
</dd>
|
|
406
|
+
|
|
407
|
+
<dt><label for="auto-grow-textarea">Auto-grow textarea</label></dt>
|
|
408
|
+
<dd>
|
|
409
|
+
<textarea name="auto-grow-textarea" id="auto-grow-textarea"data-auto-grow>Start typing to see me grow</textarea>
|
|
410
|
+
</dd>
|
|
411
|
+
|
|
412
|
+
<dt><label for="auto-grow-input">Auto-grow input</label></dt>
|
|
413
|
+
<dd>
|
|
414
|
+
<input type="text" name="auto-grow-input" id="auto-grow-input" value="Start typing to see me grow" data-auto-grow>
|
|
415
|
+
</dd>
|
|
369
416
|
</dl>
|
|
370
417
|
|
|
371
418
|
<h3>Tables</h3>
|