dialog-helper.js

(()=>{var e={225:(e,t,n)=>{const r=n(129),l=n(121);e.exports={types:r,showDialog:async function(e,t,n=[],r={}){const i=document.createElement("dialog");i.id=`${e}-dialog`,i.innerHTML=`\n<style>\n    #${e}-dialog form {\n        width: ${r.width||360}px;\n    }\n\n    #${e}-dialog div, \n    #${e}-dialog main > *, \n    #${e}-dialog label, \n    #${e}-dialog input:not([type="checkbox"]), \n    #${e}-dialog select, \n    #${e}-dialog textarea {\n        display: block;\n        width: 100%;\n    }\n\t\t\n    #${e}-dialog main > * + * {\n        margin-top: 1em;\n    }\n\t\t\n    #${e}-dialog .checkbox-wrapper {\n        display: flex;\n    }\n\t\t\n    #${e}-dialog .checkbox-wrapper span, #${e}-dialog .checkbox-wrapper input{\n        display: block;\n        width: auto;\n    }\n\t\t\n    ${r.css||""}\n</style>\n<form method="dialog">\n<h1>${t}</h1><hr>\n<main></main>\n<footer>\n<button id="${e}-dialogHelperBtnCancel" uxp-variant="primary">${r.cancelButtonText||"Cancel"}</button>\n<button id="${e}-dialogHelperBtnOk" type="submit" uxp-variant="cta">${r.okButtonText||"Ok"}</button>\n</footer>\n</form>\n    `;const a=i.querySelector("main"),o=i.querySelector("form"),p=i.querySelector(`#${e}-dialogHelperBtnOk`),d=i.querySelector(`#${e}-dialogHelperBtnCancel`);let u=[],s=[];const c={close:()=>{p.disabled||i.close(JSON.stringify(c.values()))},cancel:()=>{i.close(0)},values:()=>{let e={};for(let t of s)e[t.props.id]=t.type.value(t);return e},change:()=>{p.disabled=!l(s,c.values(),r.onValidate)},registerContentElement:e=>{u.push(e)}};p.addEventListener("click",(e=>{e.preventDefault(),c.close()})),o.onsubmit=c.close,d.addEventListener("click",c.cancel);const m=n.map((t=>{let n=t.type.render(e,t,c);return n.props=t,n.type=t.type,n}));for(let e of m)a.appendChild(e.wrapper);s.push(...m),s.push(...u);const h=document.getElementById(`${e}-dialog`);h&&h.remove(),document.body.appendChild(i),r.onBeforeShow&&await r.onBeforeShow(i,s,c),c.change();const b=await i.showModal();if(0===b)throw new Error("reasonCanceled");return JSON.parse(b)},...r}},950:e=>{const t={render:(e,n,r)=>{const l=document.createElement("label");l.id=`${e}-${n.id}-wrapper`,l.className="checkbox-wrapper",Object.assign(l.style,{flexDirection:"row",alignItems:"center"});const i=document.createElement("input");i.type="checkbox",i.id=`${e}-${n.id}`,i.placeholder=n.label,l.appendChild(i);const a=document.createElement("span");if(a.id=`${e}-${n.id}-label`,a.innerHTML=n.label,l.appendChild(a),n.htmlAttributes)for(let e in n.htmlAttributes)i.setAttribute(e,n.htmlAttributes[e]);return void 0!==n.value&&(i.value=n.value,i.checked=!0===n.value),i.addEventListener("change",(()=>{r.change()})),{wrapper:l,input:i,type:t,props:n}},valid:e=>!e.props.required||t.value(e),value:e=>e.input.checked,type:"Input"};e.exports=t},105:e=>{const t={render:(e,n)=>{const r=document.createElement("h2");if(r.innerHTML=n.label,n.htmlAttributes)for(let e in n.htmlAttributes)r.setAttribute(e,n.htmlAttributes[e]);return r.id=`${e}-${n.id}`,{wrapper:r,type:t,input:void 0,props:n}},valid:()=>!0,value:()=>{},type:"Header"};e.exports=t},948:e=>{const t={render:(e,n)=>{const r=document.createElement("hr");if(n.htmlAttributes)for(let e in n.htmlAttributes)r.setAttribute(e,n.htmlAttributes[e]);return r.id=`${e}-${n.id}`,{wrapper:r,type:t,props:n,input:void 0}},valid:()=>!0,value:()=>{},type:"Horizontal Rule"};e.exports=t},851:e=>{const t={render:(e,n,r)=>{let l=document.createElement("label");l.id=`${e}-${n.id}-wrapper`;const i=document.createElement("input");i.id=`${e}-${n.id}`,i.placeholder=n.label;const a=document.createElement("span");if(a.id=`${e}-${n.id}-label`,a.innerHTML=n.label+"",l.appendChild(a),l.appendChild(i),n.htmlAttributes)for(let e in n.htmlAttributes)i.setAttribute(e,n.htmlAttributes[e]);return void 0!==n.value&&(i.value=n.value),i.addEventListener("input",(()=>{r.change()})),{wrapper:l,input:i,type:t,props:n}},valid:e=>!e.props.required||t.value(e).length>0,value:e=>e.input.value,type:"Input"};e.exports=t},693:e=>{const t={render:(e,n,r)=>{if(void 0===n.options)return console.error("A select box must have an `options` parameter passed in the props."),null;const l=document.createElement("label");l.id=`${e}-${n.id}-wrapper`;const i=document.createElement("span");i.id=`${e}-${n.id}-label`,i.innerHTML=n.label,l.appendChild(i);const a=document.createElement("select");a.id=`${e}-${n.id}`;for(let e of n.options){let t=document.createElement("option");t.value=e.value,t.innerHTML=e.label,a.appendChild(t)}if(l.appendChild(a),n.htmlAttributes)for(let e in n.htmlAttributes)a.setAttribute(e,n.htmlAttributes[e]);return void 0!==n.value&&(a.value=n.value),a.addEventListener("change",(()=>{r.change()})),{wrapper:l,input:a,type:t,props:n}},valid:()=>!0,value:e=>e.input.value,type:"Select"};e.exports=t},740:e=>{const t={render:(e,n,r)=>{if(void 0===n.htmlAttributes||void 0===n.value||void 0===n.htmlAttributes.min||void 0===n.htmlAttributes.max)return console.error("A slider must have a min, max and value parameter specified in its `htmlAttributes` (value can also be specified outside the `htmlAttributes`)."),null;const l=document.createElement("label");l.id=`${e}-${n.id}-wrapper`;const i=document.createElement("span");i.textContent=n.label,i.id=`${e}-${n.id}-label`;const a=document.createElement("span");a.id=`${e}-${n.id}-value-label`,a.textContent=(n.htmlAttributes.value||n.value)+(n.unit||"");const o=document.createElement("div");o.className="row",o.style.justifyContent="space-between",o.appendChild(i),o.appendChild(a);const p=document.createElement("input");p.id=`${e}-${n.id}`,p.setAttribute("type","range"),p.addEventListener("input",(()=>{r.change(),a.textContent=Math.round(Number.parseFloat(p.value))+(n.unit||"")})),l.appendChild(o),l.appendChild(p);for(let e in n.htmlAttributes)p.setAttribute(e,n.htmlAttributes[e]);return p.value=n.value,{wrapper:l,input:p,type:t,props:n}},valid:()=>!0,value:e=>Number.parseFloat(e.input.value),type:"Slider"};e.exports=t},123:e=>{const t={render:(e,n)=>{const r=document.createElement("p");if(r.innerHTML=n.label,n.htmlAttributes)for(let e in n.htmlAttributes)r.setAttribute(e,n.htmlAttributes[e]);return r.id=`${e}-${n.id}`,{wrapper:r,type:t,props:n,input:void 0}},valid:()=>!0,value:()=>{},type:"Text"};e.exports=t},872:e=>{const t={render:(e,n,r)=>{let l=document.createElement("label");l.id=`${e}-${n.id}-wrapper`;const i=document.createElement("textarea");i.id=`${e}-${n.id}`,i.placeholder=n.label;const a=document.createElement("span");if(a.id=`${e}-${n.id}-label`,a.innerHTML=n.label+"",l.appendChild(a),l.appendChild(i),n.htmlAttributes)for(let e in n.htmlAttributes)i.setAttribute(e,n.htmlAttributes[e]);return void 0!==n.value&&(i.value=n.value),i.addEventListener("input",(()=>{r.change()})),{wrapper:l,input:i,type:t,props:n}},valid:e=>!e.props.required||t.value(e).length>0,value:e=>e.input.value,type:"Textarea"};e.exports=t},129:(e,t,n)=>{e.exports={CHECKBOX:n(950),HEADER:n(105),HR:n(948),SELECT:n(693),SLIDER:n(740),TEXT:n(123),TEXT_AREA:n(872),TEXT_INPUT:n(851)}},121:e=>{e.exports=function(e,t,n){if(n&&!n(t))return!1;for(let t of e)if(!t.type.valid(t))return!1;return!0}}},t={},n=function n(r){var l=t[r];if(void 0!==l)return l.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}(225);module.exports=n})();