formique 1.0.6 → 1.0.8

package/formique.cjs.js

@@ -1 +1 @@
-"use strict";class e{renderField(e,n,i,t,s,l){throw new Error("Method renderField must be implemented")}}module.exports=class extends e{constructor(e,n={},i={}){super(),this.formSchema=e,this.divClass="input-block",this.inputClass="form-input",this.radioGroupClass="radio-group",this.checkboxGroupClass="checkbox-group",this.selectGroupClass="form-select",this.submitButtonClass="form-submit-btn",this.formParams=n,this.formContainerId=i.formContainerId||"formique",this.formMarkUp="",this.dependencyGraph={},this.themes=["dark","light","pink","light","indigo","dark-blue","dark-orange","green","purple","midnight-blush"],document.addEventListener("DOMContentLoaded",(()=>{if(this.renderFormHTML(),this.initDependencyGraph(),this.registerObservers(),this.formSettings.theme&&this.themes.includes(this.formSettings.theme)){let e=this.formSettings.theme;this.applyTheme(e,this.formContainerId)}else this.applyTheme("dark",this.formContainerId)})),this.formSettings={requiredFieldIndicator:!0,placeholders:!0,asteriskHtml:'<span aria-hidden="true" style="color: red;">*</span>',...i},Object.keys(this.formParams).length>0&&(this.formMarkUp+=this.renderFormElement()),this.renderForm()}initDependencyGraph(){this.dependencyGraph={},this.formSchema.forEach((e=>{const[n,i,t,s,l={}]=e,r=l.id||i;l.dependents&&(this.dependencyGraph[r]=l.dependents.map((e=>{const n=this.formSchema.find((([,n])=>n===e));if(n){const i=n[4]||{};return{dependent:i.id||e,condition:i.condition||null}}console.warn(`Dependent field "${e}" not found in schema.`)})),this.dependencyGraph[r].push({state:null}),console.log("Graph",this.dependencyGraph[r]),this.attachInputChangeListener(r)),l.dependents&&l.dependents.forEach((e=>{const n=this.formSchema.find((([,n])=>n===e)),i=(n&&n[4]||{}).id||e,t=document.querySelector(`#${i}-block`);t&&(t.style.display="none")}))})),console.log("Dependency Graph:",this.dependencyGraph)}attachInputChangeListener(e){const n=document.getElementById(e);n&&n.addEventListener("input",(n=>{const i=n.target.value;this.handleParentFieldChange(e,i)}))}handleParentFieldChange(e,n){const i=this.dependencyGraph[e];i&&(this.dependencyGraph[e].forEach((e=>{void 0!==e.state&&(e.state=n)})),console.log(`Updated Dependency Graph for ${e}:`,this.dependencyGraph[e]),i.forEach((e=>{if(e.dependent){const i=e.dependent+"-block",t=document.getElementById(i);if(t){const s="function"==typeof e.condition?e.condition(n):n===e.condition;console.log(`Checking condition for ${i}: `,n,"==",e.condition,"Result:",s),t.style.display=s?"block":"none";t.querySelectorAll("input, select, textarea").forEach((e=>{s?e.required="true"===e.getAttribute("data-original-required"):(e.setAttribute("data-original-required",e.required),e.required=!1)}))}else console.warn(`Wrapper block with ID ${i} not found.`)}})))}registerObservers(){this.formSchema.forEach((e=>{const[n,i,t,s,l={}]=e,r=l.id||i;l.dependents&&l.dependents.forEach((e=>{if(this.dependencyGraph[r]){const n=this.formSchema.find((([,n])=>n===e));if(n){const i=n[4]?.id||e;this.dependencyGraph[r].forEach((n=>{n.dependent===e&&(n.observers||(n.observers=[]),n.observers.push(i))}))}}}))})),console.log("Observers Registered:",JSON.stringify(this.dependencyGraph,null,2))}applyTheme(e,n){const i=document.querySelector("link[formique-style]");i?fetch(i.href).then((e=>e.text())).then((i=>{const t=i.match(new RegExp(`\\.${e}-theme\\s*{([^}]*)}`,"i"));if(!t)return void console.error(`Theme rules for ${e} not found in the stylesheet.`);const s=t[1].trim(),l=document.getElementById(n);if(l){l.classList.add(`${e}-theme`,"formique");const i=document.createElement("style");i.textContent=`\n          #${n} {\n            ${s}\n          }\n        `,l.parentNode.insertBefore(i,l),console.log(`Applied ${e} theme to form container: ${n}`)}else console.error(`Form container with ID ${n} not found.`)})).catch((e=>{console.error("Error loading the stylesheet:",e)})):console.error("Stylesheet with 'formique-style' not found!")}renderFormElement(){let e="<form\n";const n=this.formParams||{};for(const[i,t]of Object.entries(n))if(null!=t)if("boolean"==typeof t)t&&(e+=`  ${i}\n`);else{e+=`  ${"accept_charset"===i?"accept-charset":i.replace(/_/g,"-")}="${t}"\n`}if(e+=">\n",n.laravel){e+=`<input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').getAttribute("content")}">`}return e=e.replace(/\n\s*$/,"\n"),e}renderForm(){const e=this.formSchema.map((e=>{const[n,i,t,s,l={},r]=e;return this.renderField(n,i,t,s,l,r)})).join("");this.formMarkUp+=e}renderField(e,n,i,t,s,l){const r={text:this.renderTextField,email:this.renderEmailField,number:this.renderNumberField,password:this.renderPasswordField,password:this.renderTextAreaField,tel:this.renderTelField,date:this.renderDateField,time:this.renderTimeField,"datetime-local":this.renderDateTimeField,month:this.renderMonthField,week:this.renderWeekField,url:this.renderUrlField,search:this.renderSearchField,color:this.renderColorField,checkbox:this.renderCheckboxField,radio:this.renderRadioField,file:this.renderFileField,hidden:this.renderHiddenField,image:this.renderImageField,textarea:this.renderTextAreaField,singleSelect:this.renderSingleSelectField,multipleSelect:this.renderMultipleSelectField,dynamicSingleSelect:this.renderDynamicSingleSelectField,submit:this.renderSubmitButton}[e];return r?r.call(this,e,n,i,t,s,l):(console.warn(`Unsupported field type '${e}' encountered.`),"")}renderTextField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const i=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${i}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${i}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}      />\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),this.formMarkUp+=p}renderEmailField(e,n,i,t,s){const l=["required","pattern","minlength","maxlength","multiple"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'email'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n        ${c.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}\n\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderNumberField(e,n,i,t,s){const l=["required","min","max","step"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderPasswordField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"minlength":case"maxlength":case"pattern":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTextAreaField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const i=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${i}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${i}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=p}renderTelField(e,n,i,t,s){const l=["required","pattern","minlength","maxlength"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderDateField(e,n,i,t,s){const l=["required","min","max","step","placeholder","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTimeField(e,n,i,t,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=`  ${i}\n`;else switch(i){case"min":case"max":case"step":r+=`  ${i}="${t}"\n`;break;default:l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderDateTimeField(e,n,i,t,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=`  ${i}\n`;else switch(i){case"min":case"max":case"step":r+=`  ${i}="${t}"\n`;break;default:l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderMonthField(e,n,i,t,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderWeekField(e,n,i,t,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderUrlField(e,n,i,t,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=`  ${i}\n`;else if("pattern"===i)r+=`  ${i}="${t}"\n`;else l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderSearchField(e,n,i,t,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=`  ${i}\n`;else if("pattern"===i)r+=`  ${i}="${t}"\n`;else l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderColorField(e,n,i,t,s){const l=["required","readonly","disabled","autocomplete","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"boolean"==typeof t&&t?r+=`  ${i}\n`:l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if(("bind:value"===s.binding||s.binding.startsWith("::")&&n)&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderFileField(e,n,i,t,s){const l=["required","accept","multiple","disabled","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"boolean"==typeof t&&t?r+=`  ${i}\n`:l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderHiddenField(e,n,i,t,s){const l=["type","name","value","id","class","style","required","readonly","disabled","tabindex"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)&&"boolean"==typeof t&&t?r+=`  ${i}\n`:console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n    <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,i,t,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"accept"===i?r+=`accept="${t}"\n`:["required","minwidth","maxwidth","minheight","maxheight"].includes(i)?r+=`${i}="${t}"\n`:console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||s.binding.startsWith("::"))&&(a=` bind:value="${n}"`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,i,t,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?r+=`${i}="${t}"\n`:console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||bindingSyntax.startsWith("::"))&&(a=`bind:value="${n}"\n`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderTextAreaField(e,n,i,t,s){const l=["required","minlength","maxlength"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?r+="boolean"==typeof t&&t?`  ${i}\n`:`  ${i}="${t}"\n`:console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n,o="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){o+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?o+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(o+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let c=s.class||this.inputClass,$=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${i}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${o}\n        ${r}\n        ${o.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();$=$.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=$}renderRadioField(e,n,i,t,s,l){const r=["required"];let a="";t&&Object.entries(t).forEach((([e,i])=>{if(r.includes(e))if("boolean"==typeof i&&i)a+=`  ${e}\n`;else if("required"===e)a+=`  ${e}\n`;else r.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`);else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`)}));let d="";if(s.binding)if("bind:value"===s.binding&&n)d=` bind:value="${n}"\n`;else if(s.binding.startsWith("::")&&n)d=` bind:value="${n}"\n`;else if(s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $=s.class||this.inputClass,p="";l&&l.length&&(p=l.map((i=>`\n            <div>\n                <input \n                    type="${e}" \n                    name="${n}" \n                    value="${i.value}"\n                    ${d} \n                    ${c}\n                    ${s.id,`id="${o}-${i.value}"`}\n                    class="${$}"\n                    ${a}\n                />\n                <label \n                    for="${s.id,`${o}-${i.value}`}">\n                    ${i.label}\n                </label>\n            </div>\n            `)).join(""));let u=`\n    <fieldset class="${this.radioGroupClass}" id="${o+"-block"}">\n        <legend>\n        ${i} \n        ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        ${p}\n    </fieldset>\n    `.replace(/^\s*\n/gm,"").trim().replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`));u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderCheckboxField(e,n,i,t,s,l){const r=["required"];let a="";t&&Object.entries(t).forEach((([i,t])=>{r.includes(i)?"required"===i&&(a+=`${i}\n`):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&("bind:checked"===s.binding||s.binding.startsWith("::"))&&(d=` bind:checked="${n}"\n`);let o,c=s.id||n,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);o="class"in s?s.class:this.inputClass;let p="";Array.isArray(l)&&(p=l.map((e=>{const i=`${c}-${e.value}`;return`\n        <div>\n          <input \n          type="checkbox" \n          name="${n}" \n          value="${e.value}"${d} ${$}\n            ${s.id,`id="${i}"`}\n            class="${o}"\n          />\n          <label \n          for="${i}">\n            ${e.label}\n          </label>\n        </div>\n      `})).join(""));let u=`\n    <fieldset class="${this.checkboxGroupClass}" id="${c+"-block"}">\n      <legend>\n      ${i}  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </legend>\n      ${p}\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();u=u.replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderDynamicSingleSelectField(e,n,i,t,s,l){const r=l.flat().map((e=>{const n=e.options.some((e=>!0===e.selected));return{value:e.id,label:e.label,...n&&{selected:!0}}})),a=l;this.renderSingleSelectField(e,n,i,t,s,r,a,"dynamicSingleSelect")}renderSingleSelectField(e,n,i,t,s,l,r,a){const d=["required"];let o="";t&&Object.entries(t).forEach((([i,t])=>{d.includes(i)?"required"===i&&(o+=`${i} `):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let c="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(c=` bind:value="${n}" `);let $=s.id||n,p="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;p+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?p+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(p+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let u="";Array.isArray(l)&&(u+='\n        <option value="">Choose an option</option>\n        ',u+=l.map((e=>{const n=e.selected?" selected":"";return`\n            <option value="${e.value}"${n}>${e.label}</option>\n            `})).join(""));let m=s.class||this.inputClass;const f="dynamicSingleSelect"===a&&r?' onchange="handleDynamicSingleSelect(this.value,id)"':"";let h,b;if("dynamicSingleSelect"===a&&r)if(i.includes("-")){const[e]=i.split("-");h=e,b=i}else h=i,b=i;else h=i;let g=`\n    <fieldset class="${this.selectGroupClass}" id="${$+"-block"}">\n        <legend>${h} \n            ${o.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${$}"> Select ${h} \n        <select name="${n}"\n            ${c}\n            \n            id="${$}"\n            class="${m}"\n            ${p}\n            ${o}\n            ${f} \n        >\n            ${u}\n        </select>\n    </fieldset>\n`.replace(/^\s*\n/gm,"").trim().replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`));if(g=g.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=g,a&&"dynamicSingleSelect"===a&&r){const e=document.getElementById(this.formContainerId);let i=s.id||n;if(e){const n=document.createElement("script");n.textContent='\n  window.handleDynamicSingleSelect = function(category, fieldsetid) {\n    //console.log("HERE", fieldsetid);\n\n    // Hide all subcategory fields\n    document.querySelectorAll(`[class*="${fieldsetid}"]`).forEach(div => {\n      div.style.display = "none";\n    });\n\n    // Show the selected category\n    const selectedCategoryFieldset = document.getElementById(category + \'-options\');\n    if (selectedCategoryFieldset) {\n      selectedCategoryFieldset.style.display = "block";\n    }\n  }\n',e.appendChild(n)}else console.error(`Target div with id "${this.formContainerId}" not found.`);r.forEach((e=>{const{id:n,label:t,options:s}=e,l=s.map((e=>{const n=e.selected?" selected":"";return`\n      <option value="${e.value}"${n}>${e.label}</option>\n    `})).join("");let r,a;console.log("Label:",b),r=b.includes("-")?b.split("-")?.[1]+" Options":"options",a="options"!==r?b.split("-")?.[1]+" Option":r;let d=`\n    <fieldset class="${this.selectGroupClass} ${i}" id="${n}-options" style="display: none;">\n        <legend> ${t} ${r} ${this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${n}"> Select ${t} ${a}           \n        </label>\n        <select name="${n}"\n            ${c}\n            \n            id="${n+"-block"}"\n            class="${m}"\n            ${p}\n            ${o}\n        >\n            <option value="">Choose an option</option>\n            ${l}\n        </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();d=d.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`)),d=d.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=d}))}}renderMultipleSelectField(e,n,i,t,s,l){const r=["required","minlength","maxlength"];let a="";t&&Object.entries(t).forEach((([i,t])=>{r.includes(i)?"required"===i?a+=`${i} `:"minlength"===i?a+=`minlength="${t}" `:"maxlength"===i&&(a+=`maxlength="${t}" `):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(d=` bind:value="${n}" `);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $="";Array.isArray(l)&&($=l.map((e=>{const n=e.selected?" selected":"";return`\n        <option value="${e.value}"${n}>${e.label}</option>\n      `})).join(""));let p;p="class"in s?s.class:this.inputClass;let u=`\n    <fieldset class="${this.selectGroupClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <select name="${n}"\n        ${d}\n        \n        id="${o}"\n        class="${p}"\n        ${c}\n        ${a}\n        multiple\n      >\n        ${$}\n      </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();u=u.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`)),u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderSubmitButton(e,n,i,t,s){const l=s.id||n;let r,a="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){a+=` ${e}="${n.endsWith("()")?n.slice(0,-2):n}"`}else!0===n?a+=` ${e.replace(/_/g,"-")}`:!1!==n&&(a+=` ${e.replace(/_/g,"-")}="${n}"`);r="class"in s?s.class:this.submitButtonClass;let d=`\n    <input type="${e}"\n      id="${l+"-block"}"\n      class="${r}"\n      value="${i}"\n      ${a}\n    />\n  `.replace(/^\s*\n/gm,"").trim();this.formMarkUp+=d}renderFormHTML(){this.formMarkUp+="</form>";const e=document.getElementById(this.formContainerId);e?e.innerHTML=this.formMarkUp:console.error(`Error: formContainer not found. Please ensure an element with id ${this.formContainerId} exists in the HTML.`)}};
+"use strict";class e{renderField(e,n,t,i,s,l){throw new Error("Method renderField must be implemented")}}module.exports=class extends e{constructor(e,n={},t={}){super(),this.formSchema=e,this.divClass="input-block",this.inputClass="form-input",this.radioGroupClass="radio-group",this.checkboxGroupClass="checkbox-group",this.selectGroupClass="form-select",this.submitButtonClass="form-submit-btn",this.formParams=n,this.formContainerId=t.formContainerId||"formique",this.formAction=n.action||"https://httpbin.org/post",this.method=n.method.toUpperCase()||"POST",this.formMarkUp="",this.dependencyGraph={},this.themes=["dark","light","pink","light","indigo","dark-blue","light-blue","dark-orange","green","purple","midnight-blush"],document.addEventListener("DOMContentLoaded",(()=>{if(this.renderFormHTML(),this.initDependencyGraph(),this.registerObservers(),this.formSettings.theme&&this.themes.includes(this.formSettings.theme)){let e=this.formSettings.theme;this.applyTheme(e,this.formContainerId)}else this.applyTheme("dark",this.formContainerId);document.getElementById(`${this.formParams.id}`).addEventListener("submit",(e=>{this.formSettings.submitOnPage&&(e.preventDefault(),this.handleOnPageFormSubmission(this.formParams.id))}))})),this.formSettings={requiredFieldIndicator:!0,placeholders:!0,asteriskHtml:'<span aria-hidden="true" style="color: red;">*</span>',...t},Object.keys(this.formParams).length>0&&(this.formMarkUp+=this.renderFormElement()),this.renderForm()}initDependencyGraph(){this.dependencyGraph={},this.formSchema.forEach((e=>{const[n,t,i,s,l={}]=e,r=l.id||t;l.dependents&&(this.dependencyGraph[r]=l.dependents.map((e=>{const n=this.formSchema.find((([,n])=>n===e));if(n){const t=n[4]||{};return{dependent:t.id||e,condition:t.condition||null}}console.warn(`Dependent field "${e}" not found in schema.`)})),this.dependencyGraph[r].push({state:null}),this.attachInputChangeListener(r)),l.dependents&&l.dependents.forEach((e=>{const n=this.formSchema.find((([,n])=>n===e)),t=(n&&n[4]||{}).id||e,i=document.querySelector(`#${t}-block`);i&&(i.style.display="none")}))}))}attachInputChangeListener(e){const n=document.getElementById(e);n&&n.addEventListener("input",(n=>{const t=n.target.value;this.handleParentFieldChange(e,t)}))}handleParentFieldChange(e,n){const t=this.dependencyGraph[e];t&&(this.dependencyGraph[e].forEach((e=>{void 0!==e.state&&(e.state=n)})),t.forEach((e=>{if(e.dependent){const t=e.dependent+"-block",i=document.getElementById(t);if(i){const t="function"==typeof e.condition?e.condition(n):n===e.condition;i.style.display=t?"block":"none";i.querySelectorAll("input, select, textarea").forEach((e=>{t?e.required="true"===e.getAttribute("data-original-required"):(e.setAttribute("data-original-required",e.required),e.required=!1)}))}else console.warn(`Wrapper block with ID ${t} not found.`)}})))}registerObservers(){this.formSchema.forEach((e=>{const[n,t,i,s,l={}]=e,r=l.id||t;l.dependents&&l.dependents.forEach((e=>{if(this.dependencyGraph[r]){const n=this.formSchema.find((([,n])=>n===e));if(n){const t=n[4]?.id||e;this.dependencyGraph[r].forEach((n=>{n.dependent===e&&(n.observers||(n.observers=[]),n.observers.push(t))}))}}}))}))}applyTheme(e,n){const t=document.querySelector("link[formique-style]");t?fetch(t.href).then((e=>e.text())).then((t=>{const i=t.match(new RegExp(`\\.${e}-theme\\s*{([^}]*)}`,"i"));if(!i)return void console.error(`Theme rules for ${e} not found in the stylesheet.`);const s=i[1].trim(),l=document.getElementById(n);if(l){l.classList.add(`${e}-theme`,"formique");const t=document.createElement("style");t.textContent=`\n          #${n} {\n            ${s}\n          }\n        `,l.parentNode.insertBefore(t,l)}else console.error(`Form container with ID ${n} not found.`)})).catch((e=>{console.error("Error loading the stylesheet:",e)})):console.error("Stylesheet with 'formique-style' not found!")}renderFormElement(){let e="<form\n";const n=this.formParams||{};for(const[t,i]of Object.entries(n))if(null!=i)if("boolean"==typeof i)i&&(e+=`  ${t}\n`);else{e+=`  ${"accept_charset"===t?"accept-charset":t.replace(/_/g,"-")}="${i}"\n`}if(e+=">\n",n.laravel){e+=`<input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').getAttribute("content")}">`}return e=e.replace(/\n\s*$/,"\n"),e}renderForm(){const e=this.formSchema.map((e=>{const[n,t,i,s,l={},r]=e;return this.renderField(n,t,i,s,l,r)})).join("");this.formMarkUp+=e}renderField(e,n,t,i,s,l){const r={text:this.renderTextField,email:this.renderEmailField,number:this.renderNumberField,password:this.renderPasswordField,password:this.renderTextAreaField,tel:this.renderTelField,date:this.renderDateField,time:this.renderTimeField,"datetime-local":this.renderDateTimeField,month:this.renderMonthField,week:this.renderWeekField,url:this.renderUrlField,search:this.renderSearchField,color:this.renderColorField,checkbox:this.renderCheckboxField,radio:this.renderRadioField,file:this.renderFileField,hidden:this.renderHiddenField,image:this.renderImageField,textarea:this.renderTextAreaField,singleSelect:this.renderSingleSelectField,multipleSelect:this.renderMultipleSelectField,dynamicSingleSelect:this.renderDynamicSingleSelectField,submit:this.renderSubmitButton}[e];return r?r.call(this,e,n,t,i,s,l):(console.warn(`Unsupported field type '${e}' encountered.`),"")}handleOnPageFormSubmission(e){const n=document.getElementById(e);if(n){const e=new FormData(n);fetch(this.formAction,{method:this.method,body:e}).then((e=>e.json())).then((e=>{console.log("Success:",e);const n=document.getElementById(this.formContainerId);if(n){const e=document.createElement("div");e.classList.add("success-message","message-container"),e.innerHTML=this.formSettings.successMessage||"Your details have been successfully submitted!",n.innerHTML="",n.appendChild(e)}})).catch((e=>{console.error("Error:",e);const n=document.getElementById(this.formContainerId);if(n){let t=n.querySelector(".error-message");t&&t.remove();const i=document.createElement("div");i.classList.add("error-message","message-container");let s=this.formSettings.errorMessage||"An error occurred while submitting the form. Please try again.";s=`${s}<br/>Details: ${e.message}`,i.innerHTML=s,n.appendChild(i)}}))}}renderTextField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}      />\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),this.formMarkUp+=p}renderEmailField(e,n,t,i,s){const l=["required","pattern","minlength","maxlength","multiple"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'email'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n        ${c.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}\n\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderNumberField(e,n,t,i,s){const l=["required","min","max","step"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderPasswordField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"minlength":case"maxlength":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTextAreaField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=p}renderTelField(e,n,t,i,s){const l=["required","pattern","minlength","maxlength"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderDateField(e,n,t,i,s){const l=["required","min","max","step","placeholder","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTimeField(e,n,t,i,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else switch(t){case"min":case"max":case"step":r+=`  ${t}="${i}"\n`;break;default:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderDateTimeField(e,n,t,i,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else switch(t){case"min":case"max":case"step":r+=`  ${t}="${i}"\n`;break;default:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderMonthField(e,n,t,i,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderWeekField(e,n,t,i,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderUrlField(e,n,t,i,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else if("pattern"===t)r+=`  ${t}="${i}"\n`;else l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderSearchField(e,n,t,i,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else if("pattern"===t)r+=`  ${t}="${i}"\n`;else l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderColorField(e,n,t,i,s){const l=["required","readonly","disabled","autocomplete","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"boolean"==typeof i&&i?r+=`  ${t}\n`:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(("bind:value"===s.binding||s.binding.startsWith("::")&&n)&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderFileField(e,n,t,i,s){const l=["required","accept","multiple","disabled","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"boolean"==typeof i&&i?r+=`  ${t}\n`:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderHiddenField(e,n,t,i,s){const l=["type","name","value","id","class","style","required","readonly","disabled","tabindex"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)&&"boolean"==typeof i&&i?r+=`  ${t}\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n    <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,t,i,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"accept"===t?r+=`accept="${i}"\n`:["required","minwidth","maxwidth","minheight","maxheight"].includes(t)?r+=`${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||s.binding.startsWith("::"))&&(a=` bind:value="${n}"`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,t,i,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?r+=`${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||bindingSyntax.startsWith("::"))&&(a=`bind:value="${n}"\n`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderTextAreaField(e,n,t,i,s){const l=["required","minlength","maxlength"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?r+="boolean"==typeof i&&i?`  ${t}\n`:`  ${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n,o="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){o+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?o+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(o+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let c=s.class||this.inputClass,$=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${o}\n        ${r}\n        ${o.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();$=$.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=$}renderRadioField(e,n,t,i,s,l){const r=["required"];let a="";i&&Object.entries(i).forEach((([e,t])=>{if(r.includes(e))if("boolean"==typeof t&&t)a+=`  ${e}\n`;else if("required"===e)a+=`  ${e}\n`;else r.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`);else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`)}));let d="";if(s.binding)if("bind:value"===s.binding&&n)d=` bind:value="${n}"\n`;else if(s.binding.startsWith("::")&&n)d=` bind:value="${n}"\n`;else if(s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $=s.class||this.inputClass,p="";l&&l.length&&(p=l.map((t=>`\n            <div>\n                <input \n                    type="${e}" \n                    name="${n}" \n                    value="${t.value}"\n                    ${d} \n                    ${c}\n                    ${s.id,`id="${o}-${t.value}"`}\n                    class="${$}"\n                    ${a}\n                />\n                <label \n                    for="${s.id,`${o}-${t.value}`}">\n                    ${t.label}\n                </label>\n            </div>\n            `)).join(""));let m=`\n    <fieldset class="${this.radioGroupClass}" id="${o+"-block"}">\n        <legend>\n        ${t} \n        ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        ${p}\n    </fieldset>\n    `.replace(/^\s*\n/gm,"").trim().replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`));m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderCheckboxField(e,n,t,i,s,l){const r=["required"];let a="";i&&Object.entries(i).forEach((([t,i])=>{r.includes(t)?"required"===t&&(a+=`${t}\n`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&("bind:checked"===s.binding||s.binding.startsWith("::"))&&(d=` bind:checked="${n}"\n`);let o,c=s.id||n,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);o="class"in s?s.class:this.inputClass;let p="";Array.isArray(l)&&(p=l.map((e=>{const t=`${c}-${e.value}`;return`\n        <div>\n          <input \n          type="checkbox" \n          name="${n}" \n          value="${e.value}"${d} ${$}\n            ${s.id,`id="${t}"`}\n            class="${o}"\n          />\n          <label \n          for="${t}">\n            ${e.label}\n          </label>\n        </div>\n      `})).join(""));let m=`\n    <fieldset class="${this.checkboxGroupClass}" id="${c+"-block"}">\n      <legend>\n      ${t}  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </legend>\n      ${p}\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();m=m.replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderDynamicSingleSelectField(e,n,t,i,s,l){const r=l.flat().map((e=>{const n=e.options.some((e=>!0===e.selected));return{value:e.id,label:e.label,...n&&{selected:!0}}})),a=l;this.renderSingleSelectField(e,n,t,i,s,r,a,"dynamicSingleSelect")}renderSingleSelectField(e,n,t,i,s,l,r,a){const d=["required"];let o="";i&&Object.entries(i).forEach((([t,i])=>{d.includes(t)?"required"===t&&(o+=`${t} `):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let c="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(c=` bind:value="${n}" `);let $=s.id||n,p="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;p+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?p+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(p+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let m="";Array.isArray(l)&&(m+='\n        <option value="">Choose an option</option>\n        ',m+=l.map((e=>{const n=e.selected?" selected":"";return`\n            <option value="${e.value}"${n}>${e.label}</option>\n            `})).join(""));let u=s.class||this.inputClass;const f="dynamicSingleSelect"===a&&r?' onchange="handleDynamicSingleSelect(this.value,id)"':"";let h,b;if("dynamicSingleSelect"===a&&r)if(t.includes("-")){const[e]=t.split("-");h=e,b=t}else h=t,b=t;else h=t;let g=`\n    <fieldset class="${this.selectGroupClass}" id="${$+"-block"}">\n        <legend>${h} \n            ${o.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${$}"> Select ${h} \n        <select name="${n}"\n            ${c}\n            \n            id="${$}"\n            class="${u}"\n            ${p}\n            ${o}\n            ${f} \n        >\n            ${m}\n        </select>\n    </fieldset>\n`.replace(/^\s*\n/gm,"").trim().replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`));if(g=g.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=g,a&&"dynamicSingleSelect"===a&&r){const e=document.getElementById(this.formContainerId);let t=s.id||n;if(e){const n=document.createElement("script");n.textContent='\n  window.handleDynamicSingleSelect = function(category, fieldsetid) {\n    //console.log("HERE", fieldsetid);\n\n    // Hide all subcategory fields\n    document.querySelectorAll(`[class*="${fieldsetid}"]`).forEach(div => {\n      div.style.display = "none";\n    });\n\n    // Show the selected category\n    const selectedCategoryFieldset = document.getElementById(category + \'-options\');\n    if (selectedCategoryFieldset) {\n      selectedCategoryFieldset.style.display = "block";\n    }\n  }\n',e.appendChild(n)}else console.error(`Target div with id "${this.formContainerId}" not found.`);r.forEach((e=>{const{id:n,label:i,options:s}=e,l=s.map((e=>{const n=e.selected?" selected":"";return`\n      <option value="${e.value}"${n}>${e.label}</option>\n    `})).join("");let r,a;console.log("Label:",b),r=b.includes("-")?b.split("-")?.[1]+" Options":"options",a="options"!==r?b.split("-")?.[1]+" Option":r;let d=`\n    <fieldset class="${this.selectGroupClass} ${t}" id="${n}-options" style="display: none;">\n        <legend> ${i} ${r} ${this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${n}"> Select ${i} ${a}           \n        </label>\n        <select name="${n}"\n            ${c}\n            \n            id="${n+"-block"}"\n            class="${u}"\n            ${p}\n            ${o}\n        >\n            <option value="">Choose an option</option>\n            ${l}\n        </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();d=d.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`)),d=d.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=d}))}}renderMultipleSelectField(e,n,t,i,s,l){const r=["required","minlength","maxlength"];let a="";i&&Object.entries(i).forEach((([t,i])=>{r.includes(t)?"required"===t?a+=`${t} `:"minlength"===t?a+=`minlength="${i}" `:"maxlength"===t&&(a+=`maxlength="${i}" `):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(d=` bind:value="${n}" `);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $="";Array.isArray(l)&&($=l.map((e=>{const n=e.selected?" selected":"";return`\n        <option value="${e.value}"${n}>${e.label}</option>\n      `})).join(""));let p;p="class"in s?s.class:this.inputClass;let m=`\n    <fieldset class="${this.selectGroupClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <select name="${n}"\n        ${d}\n        \n        id="${o}"\n        class="${p}"\n        ${c}\n        ${a}\n        multiple\n      >\n        ${$}\n      </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();m=m.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`)),m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderSubmitButton(e,n,t,i,s){const l=s.id||n;let r,a="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){a+=` ${e}="${n.endsWith("()")?n.slice(0,-2):n}"`}else!0===n?a+=` ${e.replace(/_/g,"-")}`:!1!==n&&(a+=` ${e.replace(/_/g,"-")}="${n}"`);r="class"in s?s.class:this.submitButtonClass;let d=`\n    <input type="${e}"\n      id="${l+"-block"}"\n      class="${r}"\n      value="${t}"\n      ${a}\n    />\n  `.replace(/^\s*\n/gm,"").trim();this.formMarkUp+=d}renderFormHTML(){this.formMarkUp+="</form>";const e=document.getElementById(this.formContainerId);e?e.innerHTML=this.formMarkUp:console.error(`Error: formContainer not found. Please ensure an element with id ${this.formContainerId} exists in the HTML.`)}};

package/formique.mjs

@@ -0,0 +1 @@
+class e{renderField(e,n,t,i,s,l){throw new Error("Method renderField must be implemented")}}class n extends e{constructor(e,n={},t={}){super(),this.formSchema=e,this.divClass="input-block",this.inputClass="form-input",this.radioGroupClass="radio-group",this.checkboxGroupClass="checkbox-group",this.selectGroupClass="form-select",this.submitButtonClass="form-submit-btn",this.formParams=n,this.formContainerId=t.formContainerId||"formique",this.formAction=n.action||"https://httpbin.org/post",this.method=n.method.toUpperCase()||"POST",this.formMarkUp="",this.dependencyGraph={},this.themes=["dark","light","pink","light","indigo","dark-blue","light-blue","dark-orange","green","purple","midnight-blush"],document.addEventListener("DOMContentLoaded",(()=>{if(this.renderFormHTML(),this.initDependencyGraph(),this.registerObservers(),this.formSettings.theme&&this.themes.includes(this.formSettings.theme)){let e=this.formSettings.theme;this.applyTheme(e,this.formContainerId)}else this.applyTheme("dark",this.formContainerId);document.getElementById(`${this.formParams.id}`).addEventListener("submit",(e=>{this.formSettings.submitOnPage&&(e.preventDefault(),this.handleOnPageFormSubmission(this.formParams.id))}))})),this.formSettings={requiredFieldIndicator:!0,placeholders:!0,asteriskHtml:'<span aria-hidden="true" style="color: red;">*</span>',...t},Object.keys(this.formParams).length>0&&(this.formMarkUp+=this.renderFormElement()),this.renderForm()}initDependencyGraph(){this.dependencyGraph={},this.formSchema.forEach((e=>{const[n,t,i,s,l={}]=e,r=l.id||t;l.dependents&&(this.dependencyGraph[r]=l.dependents.map((e=>{const n=this.formSchema.find((([,n])=>n===e));if(n){const t=n[4]||{};return{dependent:t.id||e,condition:t.condition||null}}console.warn(`Dependent field "${e}" not found in schema.`)})),this.dependencyGraph[r].push({state:null}),this.attachInputChangeListener(r)),l.dependents&&l.dependents.forEach((e=>{const n=this.formSchema.find((([,n])=>n===e)),t=(n&&n[4]||{}).id||e,i=document.querySelector(`#${t}-block`);i&&(i.style.display="none")}))}))}attachInputChangeListener(e){const n=document.getElementById(e);n&&n.addEventListener("input",(n=>{const t=n.target.value;this.handleParentFieldChange(e,t)}))}handleParentFieldChange(e,n){const t=this.dependencyGraph[e];t&&(this.dependencyGraph[e].forEach((e=>{void 0!==e.state&&(e.state=n)})),t.forEach((e=>{if(e.dependent){const t=e.dependent+"-block",i=document.getElementById(t);if(i){const t="function"==typeof e.condition?e.condition(n):n===e.condition;i.style.display=t?"block":"none";i.querySelectorAll("input, select, textarea").forEach((e=>{t?e.required="true"===e.getAttribute("data-original-required"):(e.setAttribute("data-original-required",e.required),e.required=!1)}))}else console.warn(`Wrapper block with ID ${t} not found.`)}})))}registerObservers(){this.formSchema.forEach((e=>{const[n,t,i,s,l={}]=e,r=l.id||t;l.dependents&&l.dependents.forEach((e=>{if(this.dependencyGraph[r]){const n=this.formSchema.find((([,n])=>n===e));if(n){const t=n[4]?.id||e;this.dependencyGraph[r].forEach((n=>{n.dependent===e&&(n.observers||(n.observers=[]),n.observers.push(t))}))}}}))}))}applyTheme(e,n){const t=document.querySelector("link[formique-style]");t?fetch(t.href).then((e=>e.text())).then((t=>{const i=t.match(new RegExp(`\\.${e}-theme\\s*{([^}]*)}`,"i"));if(!i)return void console.error(`Theme rules for ${e} not found in the stylesheet.`);const s=i[1].trim(),l=document.getElementById(n);if(l){l.classList.add(`${e}-theme`,"formique");const t=document.createElement("style");t.textContent=`\n          #${n} {\n            ${s}\n          }\n        `,l.parentNode.insertBefore(t,l)}else console.error(`Form container with ID ${n} not found.`)})).catch((e=>{console.error("Error loading the stylesheet:",e)})):console.error("Stylesheet with 'formique-style' not found!")}renderFormElement(){let e="<form\n";const n=this.formParams||{};for(const[t,i]of Object.entries(n))if(null!=i)if("boolean"==typeof i)i&&(e+=`  ${t}\n`);else{e+=`  ${"accept_charset"===t?"accept-charset":t.replace(/_/g,"-")}="${i}"\n`}if(e+=">\n",n.laravel){e+=`<input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').getAttribute("content")}">`}return e=e.replace(/\n\s*$/,"\n"),e}renderForm(){const e=this.formSchema.map((e=>{const[n,t,i,s,l={},r]=e;return this.renderField(n,t,i,s,l,r)})).join("");this.formMarkUp+=e}renderField(e,n,t,i,s,l){const r={text:this.renderTextField,email:this.renderEmailField,number:this.renderNumberField,password:this.renderPasswordField,password:this.renderTextAreaField,tel:this.renderTelField,date:this.renderDateField,time:this.renderTimeField,"datetime-local":this.renderDateTimeField,month:this.renderMonthField,week:this.renderWeekField,url:this.renderUrlField,search:this.renderSearchField,color:this.renderColorField,checkbox:this.renderCheckboxField,radio:this.renderRadioField,file:this.renderFileField,hidden:this.renderHiddenField,image:this.renderImageField,textarea:this.renderTextAreaField,singleSelect:this.renderSingleSelectField,multipleSelect:this.renderMultipleSelectField,dynamicSingleSelect:this.renderDynamicSingleSelectField,submit:this.renderSubmitButton}[e];return r?r.call(this,e,n,t,i,s,l):(console.warn(`Unsupported field type '${e}' encountered.`),"")}handleOnPageFormSubmission(e){const n=document.getElementById(e);if(n){const e=new FormData(n);fetch(this.formAction,{method:this.method,body:e}).then((e=>e.json())).then((e=>{console.log("Success:",e);const n=document.getElementById(this.formContainerId);if(n){const e=document.createElement("div");e.classList.add("success-message","message-container"),e.innerHTML=this.formSettings.successMessage||"Your details have been successfully submitted!",n.innerHTML="",n.appendChild(e)}})).catch((e=>{console.error("Error:",e);const n=document.getElementById(this.formContainerId);if(n){let t=n.querySelector(".error-message");t&&t.remove();const i=document.createElement("div");i.classList.add("error-message","message-container");let s=this.formSettings.errorMessage||"An error occurred while submitting the form. Please try again.";s=`${s}<br/>Details: ${e.message}`,i.innerHTML=s,n.appendChild(i)}}))}}renderTextField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}      />\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),this.formMarkUp+=p}renderEmailField(e,n,t,i,s){const l=["required","pattern","minlength","maxlength","multiple"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'email'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n        ${c.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}\n\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderNumberField(e,n,t,i,s){const l=["required","min","max","step"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderPasswordField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"minlength":case"maxlength":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTextAreaField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=p}renderTelField(e,n,t,i,s){const l=["required","pattern","minlength","maxlength"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderDateField(e,n,t,i,s){const l=["required","min","max","step","placeholder","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTimeField(e,n,t,i,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else switch(t){case"min":case"max":case"step":r+=`  ${t}="${i}"\n`;break;default:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderDateTimeField(e,n,t,i,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else switch(t){case"min":case"max":case"step":r+=`  ${t}="${i}"\n`;break;default:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderMonthField(e,n,t,i,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderWeekField(e,n,t,i,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderUrlField(e,n,t,i,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else if("pattern"===t)r+=`  ${t}="${i}"\n`;else l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderSearchField(e,n,t,i,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else if("pattern"===t)r+=`  ${t}="${i}"\n`;else l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderColorField(e,n,t,i,s){const l=["required","readonly","disabled","autocomplete","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"boolean"==typeof i&&i?r+=`  ${t}\n`:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(("bind:value"===s.binding||s.binding.startsWith("::")&&n)&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderFileField(e,n,t,i,s){const l=["required","accept","multiple","disabled","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"boolean"==typeof i&&i?r+=`  ${t}\n`:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderHiddenField(e,n,t,i,s){const l=["type","name","value","id","class","style","required","readonly","disabled","tabindex"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)&&"boolean"==typeof i&&i?r+=`  ${t}\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n    <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,t,i,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"accept"===t?r+=`accept="${i}"\n`:["required","minwidth","maxwidth","minheight","maxheight"].includes(t)?r+=`${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||s.binding.startsWith("::"))&&(a=` bind:value="${n}"`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,t,i,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?r+=`${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||bindingSyntax.startsWith("::"))&&(a=`bind:value="${n}"\n`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderTextAreaField(e,n,t,i,s){const l=["required","minlength","maxlength"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?r+="boolean"==typeof i&&i?`  ${t}\n`:`  ${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n,o="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){o+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?o+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(o+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let c=s.class||this.inputClass,$=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${o}\n        ${r}\n        ${o.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();$=$.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=$}renderRadioField(e,n,t,i,s,l){const r=["required"];let a="";i&&Object.entries(i).forEach((([e,t])=>{if(r.includes(e))if("boolean"==typeof t&&t)a+=`  ${e}\n`;else if("required"===e)a+=`  ${e}\n`;else r.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`);else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`)}));let d="";if(s.binding)if("bind:value"===s.binding&&n)d=` bind:value="${n}"\n`;else if(s.binding.startsWith("::")&&n)d=` bind:value="${n}"\n`;else if(s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $=s.class||this.inputClass,p="";l&&l.length&&(p=l.map((t=>`\n            <div>\n                <input \n                    type="${e}" \n                    name="${n}" \n                    value="${t.value}"\n                    ${d} \n                    ${c}\n                    ${s.id,`id="${o}-${t.value}"`}\n                    class="${$}"\n                    ${a}\n                />\n                <label \n                    for="${s.id,`${o}-${t.value}`}">\n                    ${t.label}\n                </label>\n            </div>\n            `)).join(""));let m=`\n    <fieldset class="${this.radioGroupClass}" id="${o+"-block"}">\n        <legend>\n        ${t} \n        ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        ${p}\n    </fieldset>\n    `.replace(/^\s*\n/gm,"").trim().replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`));m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderCheckboxField(e,n,t,i,s,l){const r=["required"];let a="";i&&Object.entries(i).forEach((([t,i])=>{r.includes(t)?"required"===t&&(a+=`${t}\n`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&("bind:checked"===s.binding||s.binding.startsWith("::"))&&(d=` bind:checked="${n}"\n`);let o,c=s.id||n,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);o="class"in s?s.class:this.inputClass;let p="";Array.isArray(l)&&(p=l.map((e=>{const t=`${c}-${e.value}`;return`\n        <div>\n          <input \n          type="checkbox" \n          name="${n}" \n          value="${e.value}"${d} ${$}\n            ${s.id,`id="${t}"`}\n            class="${o}"\n          />\n          <label \n          for="${t}">\n            ${e.label}\n          </label>\n        </div>\n      `})).join(""));let m=`\n    <fieldset class="${this.checkboxGroupClass}" id="${c+"-block"}">\n      <legend>\n      ${t}  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </legend>\n      ${p}\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();m=m.replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderDynamicSingleSelectField(e,n,t,i,s,l){const r=l.flat().map((e=>{const n=e.options.some((e=>!0===e.selected));return{value:e.id,label:e.label,...n&&{selected:!0}}})),a=l;this.renderSingleSelectField(e,n,t,i,s,r,a,"dynamicSingleSelect")}renderSingleSelectField(e,n,t,i,s,l,r,a){const d=["required"];let o="";i&&Object.entries(i).forEach((([t,i])=>{d.includes(t)?"required"===t&&(o+=`${t} `):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let c="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(c=` bind:value="${n}" `);let $=s.id||n,p="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;p+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?p+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(p+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let m="";Array.isArray(l)&&(m+='\n        <option value="">Choose an option</option>\n        ',m+=l.map((e=>{const n=e.selected?" selected":"";return`\n            <option value="${e.value}"${n}>${e.label}</option>\n            `})).join(""));let u=s.class||this.inputClass;const f="dynamicSingleSelect"===a&&r?' onchange="handleDynamicSingleSelect(this.value,id)"':"";let h,b;if("dynamicSingleSelect"===a&&r)if(t.includes("-")){const[e]=t.split("-");h=e,b=t}else h=t,b=t;else h=t;let g=`\n    <fieldset class="${this.selectGroupClass}" id="${$+"-block"}">\n        <legend>${h} \n            ${o.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${$}"> Select ${h} \n        <select name="${n}"\n            ${c}\n            \n            id="${$}"\n            class="${u}"\n            ${p}\n            ${o}\n            ${f} \n        >\n            ${m}\n        </select>\n    </fieldset>\n`.replace(/^\s*\n/gm,"").trim().replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`));if(g=g.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=g,a&&"dynamicSingleSelect"===a&&r){const e=document.getElementById(this.formContainerId);let t=s.id||n;if(e){const n=document.createElement("script");n.textContent='\n  window.handleDynamicSingleSelect = function(category, fieldsetid) {\n    //console.log("HERE", fieldsetid);\n\n    // Hide all subcategory fields\n    document.querySelectorAll(`[class*="${fieldsetid}"]`).forEach(div => {\n      div.style.display = "none";\n    });\n\n    // Show the selected category\n    const selectedCategoryFieldset = document.getElementById(category + \'-options\');\n    if (selectedCategoryFieldset) {\n      selectedCategoryFieldset.style.display = "block";\n    }\n  }\n',e.appendChild(n)}else console.error(`Target div with id "${this.formContainerId}" not found.`);r.forEach((e=>{const{id:n,label:i,options:s}=e,l=s.map((e=>{const n=e.selected?" selected":"";return`\n      <option value="${e.value}"${n}>${e.label}</option>\n    `})).join("");let r,a;console.log("Label:",b),r=b.includes("-")?b.split("-")?.[1]+" Options":"options",a="options"!==r?b.split("-")?.[1]+" Option":r;let d=`\n    <fieldset class="${this.selectGroupClass} ${t}" id="${n}-options" style="display: none;">\n        <legend> ${i} ${r} ${this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${n}"> Select ${i} ${a}           \n        </label>\n        <select name="${n}"\n            ${c}\n            \n            id="${n+"-block"}"\n            class="${u}"\n            ${p}\n            ${o}\n        >\n            <option value="">Choose an option</option>\n            ${l}\n        </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();d=d.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`)),d=d.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=d}))}}renderMultipleSelectField(e,n,t,i,s,l){const r=["required","minlength","maxlength"];let a="";i&&Object.entries(i).forEach((([t,i])=>{r.includes(t)?"required"===t?a+=`${t} `:"minlength"===t?a+=`minlength="${i}" `:"maxlength"===t&&(a+=`maxlength="${i}" `):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(d=` bind:value="${n}" `);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $="";Array.isArray(l)&&($=l.map((e=>{const n=e.selected?" selected":"";return`\n        <option value="${e.value}"${n}>${e.label}</option>\n      `})).join(""));let p;p="class"in s?s.class:this.inputClass;let m=`\n    <fieldset class="${this.selectGroupClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <select name="${n}"\n        ${d}\n        \n        id="${o}"\n        class="${p}"\n        ${c}\n        ${a}\n        multiple\n      >\n        ${$}\n      </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();m=m.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`)),m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderSubmitButton(e,n,t,i,s){const l=s.id||n;let r,a="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){a+=` ${e}="${n.endsWith("()")?n.slice(0,-2):n}"`}else!0===n?a+=` ${e.replace(/_/g,"-")}`:!1!==n&&(a+=` ${e.replace(/_/g,"-")}="${n}"`);r="class"in s?s.class:this.submitButtonClass;let d=`\n    <input type="${e}"\n      id="${l+"-block"}"\n      class="${r}"\n      value="${t}"\n      ${a}\n    />\n  `.replace(/^\s*\n/gm,"").trim();this.formMarkUp+=d}renderFormHTML(){this.formMarkUp+="</form>";const e=document.getElementById(this.formContainerId);e?e.innerHTML=this.formMarkUp:console.error(`Error: formContainer not found. Please ensure an element with id ${this.formContainerId} exists in the HTML.`)}}export{n as default};

package/formique.umd.js

@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).Formique=n()}(this,(function(){"use strict";class e{renderField(e,n,i,t,s,l){throw new Error("Method renderField must be implemented")}}return class extends e{constructor(e,n={},i={}){super(),this.formSchema=e,this.divClass="input-block",this.inputClass="form-input",this.radioGroupClass="radio-group",this.checkboxGroupClass="checkbox-group",this.selectGroupClass="form-select",this.submitButtonClass="form-submit-btn",this.formParams=n,this.formContainerId=i.formContainerId||"formique",this.formMarkUp="",this.dependencyGraph={},this.themes=["dark","light","pink","light","indigo","dark-blue","dark-orange","green","purple","midnight-blush"],document.addEventListener("DOMContentLoaded",(()=>{if(this.renderFormHTML(),this.initDependencyGraph(),this.registerObservers(),this.formSettings.theme&&this.themes.includes(this.formSettings.theme)){let e=this.formSettings.theme;this.applyTheme(e,this.formContainerId)}else this.applyTheme("dark",this.formContainerId)})),this.formSettings={requiredFieldIndicator:!0,placeholders:!0,asteriskHtml:'<span aria-hidden="true" style="color: red;">*</span>',...i},Object.keys(this.formParams).length>0&&(this.formMarkUp+=this.renderFormElement()),this.renderForm()}initDependencyGraph(){this.dependencyGraph={},this.formSchema.forEach((e=>{const[n,i,t,s,l={}]=e,r=l.id||i;l.dependents&&(this.dependencyGraph[r]=l.dependents.map((e=>{const n=this.formSchema.find((([,n])=>n===e));if(n){const i=n[4]||{};return{dependent:i.id||e,condition:i.condition||null}}console.warn(`Dependent field "${e}" not found in schema.`)})),this.dependencyGraph[r].push({state:null}),console.log("Graph",this.dependencyGraph[r]),this.attachInputChangeListener(r)),l.dependents&&l.dependents.forEach((e=>{const n=this.formSchema.find((([,n])=>n===e)),i=(n&&n[4]||{}).id||e,t=document.querySelector(`#${i}-block`);t&&(t.style.display="none")}))})),console.log("Dependency Graph:",this.dependencyGraph)}attachInputChangeListener(e){const n=document.getElementById(e);n&&n.addEventListener("input",(n=>{const i=n.target.value;this.handleParentFieldChange(e,i)}))}handleParentFieldChange(e,n){const i=this.dependencyGraph[e];i&&(this.dependencyGraph[e].forEach((e=>{void 0!==e.state&&(e.state=n)})),console.log(`Updated Dependency Graph for ${e}:`,this.dependencyGraph[e]),i.forEach((e=>{if(e.dependent){const i=e.dependent+"-block",t=document.getElementById(i);if(t){const s="function"==typeof e.condition?e.condition(n):n===e.condition;console.log(`Checking condition for ${i}: `,n,"==",e.condition,"Result:",s),t.style.display=s?"block":"none";t.querySelectorAll("input, select, textarea").forEach((e=>{s?e.required="true"===e.getAttribute("data-original-required"):(e.setAttribute("data-original-required",e.required),e.required=!1)}))}else console.warn(`Wrapper block with ID ${i} not found.`)}})))}registerObservers(){this.formSchema.forEach((e=>{const[n,i,t,s,l={}]=e,r=l.id||i;l.dependents&&l.dependents.forEach((e=>{if(this.dependencyGraph[r]){const n=this.formSchema.find((([,n])=>n===e));if(n){const i=n[4]?.id||e;this.dependencyGraph[r].forEach((n=>{n.dependent===e&&(n.observers||(n.observers=[]),n.observers.push(i))}))}}}))})),console.log("Observers Registered:",JSON.stringify(this.dependencyGraph,null,2))}applyTheme(e,n){const i=document.querySelector("link[formique-style]");i?fetch(i.href).then((e=>e.text())).then((i=>{const t=i.match(new RegExp(`\\.${e}-theme\\s*{([^}]*)}`,"i"));if(!t)return void console.error(`Theme rules for ${e} not found in the stylesheet.`);const s=t[1].trim(),l=document.getElementById(n);if(l){l.classList.add(`${e}-theme`,"formique");const i=document.createElement("style");i.textContent=`\n          #${n} {\n            ${s}\n          }\n        `,l.parentNode.insertBefore(i,l),console.log(`Applied ${e} theme to form container: ${n}`)}else console.error(`Form container with ID ${n} not found.`)})).catch((e=>{console.error("Error loading the stylesheet:",e)})):console.error("Stylesheet with 'formique-style' not found!")}renderFormElement(){let e="<form\n";const n=this.formParams||{};for(const[i,t]of Object.entries(n))if(null!=t)if("boolean"==typeof t)t&&(e+=`  ${i}\n`);else{e+=`  ${"accept_charset"===i?"accept-charset":i.replace(/_/g,"-")}="${t}"\n`}if(e+=">\n",n.laravel){e+=`<input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').getAttribute("content")}">`}return e=e.replace(/\n\s*$/,"\n"),e}renderForm(){const e=this.formSchema.map((e=>{const[n,i,t,s,l={},r]=e;return this.renderField(n,i,t,s,l,r)})).join("");this.formMarkUp+=e}renderField(e,n,i,t,s,l){const r={text:this.renderTextField,email:this.renderEmailField,number:this.renderNumberField,password:this.renderPasswordField,password:this.renderTextAreaField,tel:this.renderTelField,date:this.renderDateField,time:this.renderTimeField,"datetime-local":this.renderDateTimeField,month:this.renderMonthField,week:this.renderWeekField,url:this.renderUrlField,search:this.renderSearchField,color:this.renderColorField,checkbox:this.renderCheckboxField,radio:this.renderRadioField,file:this.renderFileField,hidden:this.renderHiddenField,image:this.renderImageField,textarea:this.renderTextAreaField,singleSelect:this.renderSingleSelectField,multipleSelect:this.renderMultipleSelectField,dynamicSingleSelect:this.renderDynamicSingleSelectField,submit:this.renderSubmitButton}[e];return r?r.call(this,e,n,i,t,s,l):(console.warn(`Unsupported field type '${e}' encountered.`),"")}renderTextField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const i=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${i}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${i}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}      />\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),this.formMarkUp+=p}renderEmailField(e,n,i,t,s){const l=["required","pattern","minlength","maxlength","multiple"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'email'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n        ${c.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}\n\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderNumberField(e,n,i,t,s){const l=["required","min","max","step"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderPasswordField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"minlength":case"maxlength":case"pattern":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTextAreaField(e,n,i,t,s){const l=["required","minlength","maxlength","pattern"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const i=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${i}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${i}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=p}renderTelField(e,n,i,t,s){const l=["required","pattern","minlength","maxlength"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderDateField(e,n,i,t,s){const l=["required","min","max","step","placeholder","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTimeField(e,n,i,t,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=`  ${i}\n`;else switch(i){case"min":case"max":case"step":r+=`  ${i}="${t}"\n`;break;default:l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderDateTimeField(e,n,i,t,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=`  ${i}\n`;else switch(i){case"min":case"max":case"step":r+=`  ${i}="${t}"\n`;break;default:l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderMonthField(e,n,i,t,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderWeekField(e,n,i,t,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([e,i])=>{if(l.includes(e))if("boolean"==typeof i&&i)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${i}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderUrlField(e,n,i,t,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=`  ${i}\n`;else if("pattern"===i)r+=`  ${i}="${t}"\n`;else l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderSearchField(e,n,i,t,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{if(l.includes(i))if("boolean"==typeof t&&t)r+=`  ${i}\n`;else if("pattern"===i)r+=`  ${i}="${t}"\n`;else l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderColorField(e,n,i,t,s){const l=["required","readonly","disabled","autocomplete","inputmode","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"boolean"==typeof t&&t?r+=`  ${i}\n`:l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if(("bind:value"===s.binding||s.binding.startsWith("::")&&n)&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderFileField(e,n,i,t,s){const l=["required","accept","multiple","disabled","title"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"boolean"==typeof t&&t?r+=`  ${i}\n`:l.includes(i)||console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderHiddenField(e,n,i,t,s){const l=["type","name","value","id","class","style","required","readonly","disabled","tabindex"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)&&"boolean"==typeof t&&t?r+=`  ${i}\n`:console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n    <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,i,t,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?"accept"===i?r+=`accept="${t}"\n`:["required","minwidth","maxwidth","minheight","maxheight"].includes(i)?r+=`${i}="${t}"\n`:console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||s.binding.startsWith("::"))&&(a=` bind:value="${n}"`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,i,t,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?r+=`${i}="${t}"\n`:console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||bindingSyntax.startsWith("::"))&&(a=`bind:value="${n}"\n`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderTextAreaField(e,n,i,t,s){const l=["required","minlength","maxlength"];let r="";t&&Object.entries(t).forEach((([i,t])=>{l.includes(i)?r+="boolean"==typeof t&&t?`  ${i}\n`:`  ${i}="${t}"\n`:console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n,o="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){o+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?o+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(o+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let c=s.class||this.inputClass,$=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${i}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${o}\n        ${r}\n        ${o.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${i}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();$=$.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=$}renderRadioField(e,n,i,t,s,l){const r=["required"];let a="";t&&Object.entries(t).forEach((([e,i])=>{if(r.includes(e))if("boolean"==typeof i&&i)a+=`  ${e}\n`;else if("required"===e)a+=`  ${e}\n`;else r.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`);else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`)}));let d="";if(s.binding)if("bind:value"===s.binding&&n)d=` bind:value="${n}"\n`;else if(s.binding.startsWith("::")&&n)d=` bind:value="${n}"\n`;else if(s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $=s.class||this.inputClass,p="";l&&l.length&&(p=l.map((i=>`\n            <div>\n                <input \n                    type="${e}" \n                    name="${n}" \n                    value="${i.value}"\n                    ${d} \n                    ${c}\n                    ${s.id,`id="${o}-${i.value}"`}\n                    class="${$}"\n                    ${a}\n                />\n                <label \n                    for="${s.id,`${o}-${i.value}`}">\n                    ${i.label}\n                </label>\n            </div>\n            `)).join(""));let u=`\n    <fieldset class="${this.radioGroupClass}" id="${o+"-block"}">\n        <legend>\n        ${i} \n        ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        ${p}\n    </fieldset>\n    `.replace(/^\s*\n/gm,"").trim().replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`));u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderCheckboxField(e,n,i,t,s,l){const r=["required"];let a="";t&&Object.entries(t).forEach((([i,t])=>{r.includes(i)?"required"===i&&(a+=`${i}\n`):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&("bind:checked"===s.binding||s.binding.startsWith("::"))&&(d=` bind:checked="${n}"\n`);let o,c=s.id||n,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);o="class"in s?s.class:this.inputClass;let p="";Array.isArray(l)&&(p=l.map((e=>{const i=`${c}-${e.value}`;return`\n        <div>\n          <input \n          type="checkbox" \n          name="${n}" \n          value="${e.value}"${d} ${$}\n            ${s.id,`id="${i}"`}\n            class="${o}"\n          />\n          <label \n          for="${i}">\n            ${e.label}\n          </label>\n        </div>\n      `})).join(""));let u=`\n    <fieldset class="${this.checkboxGroupClass}" id="${c+"-block"}">\n      <legend>\n      ${i}  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </legend>\n      ${p}\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();u=u.replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderDynamicSingleSelectField(e,n,i,t,s,l){const r=l.flat().map((e=>{const n=e.options.some((e=>!0===e.selected));return{value:e.id,label:e.label,...n&&{selected:!0}}})),a=l;this.renderSingleSelectField(e,n,i,t,s,r,a,"dynamicSingleSelect")}renderSingleSelectField(e,n,i,t,s,l,r,a){const d=["required"];let o="";t&&Object.entries(t).forEach((([i,t])=>{d.includes(i)?"required"===i&&(o+=`${i} `):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let c="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(c=` bind:value="${n}" `);let $=s.id||n,p="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;p+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?p+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(p+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let u="";Array.isArray(l)&&(u+='\n        <option value="">Choose an option</option>\n        ',u+=l.map((e=>{const n=e.selected?" selected":"";return`\n            <option value="${e.value}"${n}>${e.label}</option>\n            `})).join(""));let m=s.class||this.inputClass;const f="dynamicSingleSelect"===a&&r?' onchange="handleDynamicSingleSelect(this.value,id)"':"";let h,b;if("dynamicSingleSelect"===a&&r)if(i.includes("-")){const[e]=i.split("-");h=e,b=i}else h=i,b=i;else h=i;let g=`\n    <fieldset class="${this.selectGroupClass}" id="${$+"-block"}">\n        <legend>${h} \n            ${o.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${$}"> Select ${h} \n        <select name="${n}"\n            ${c}\n            \n            id="${$}"\n            class="${m}"\n            ${p}\n            ${o}\n            ${f} \n        >\n            ${u}\n        </select>\n    </fieldset>\n`.replace(/^\s*\n/gm,"").trim().replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`));if(g=g.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=g,a&&"dynamicSingleSelect"===a&&r){const e=document.getElementById(this.formContainerId);let i=s.id||n;if(e){const n=document.createElement("script");n.textContent='\n  window.handleDynamicSingleSelect = function(category, fieldsetid) {\n    //console.log("HERE", fieldsetid);\n\n    // Hide all subcategory fields\n    document.querySelectorAll(`[class*="${fieldsetid}"]`).forEach(div => {\n      div.style.display = "none";\n    });\n\n    // Show the selected category\n    const selectedCategoryFieldset = document.getElementById(category + \'-options\');\n    if (selectedCategoryFieldset) {\n      selectedCategoryFieldset.style.display = "block";\n    }\n  }\n',e.appendChild(n)}else console.error(`Target div with id "${this.formContainerId}" not found.`);r.forEach((e=>{const{id:n,label:t,options:s}=e,l=s.map((e=>{const n=e.selected?" selected":"";return`\n      <option value="${e.value}"${n}>${e.label}</option>\n    `})).join("");let r,a;console.log("Label:",b),r=b.includes("-")?b.split("-")?.[1]+" Options":"options",a="options"!==r?b.split("-")?.[1]+" Option":r;let d=`\n    <fieldset class="${this.selectGroupClass} ${i}" id="${n}-options" style="display: none;">\n        <legend> ${t} ${r} ${this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${n}"> Select ${t} ${a}           \n        </label>\n        <select name="${n}"\n            ${c}\n            \n            id="${n+"-block"}"\n            class="${m}"\n            ${p}\n            ${o}\n        >\n            <option value="">Choose an option</option>\n            ${l}\n        </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();d=d.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`)),d=d.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=d}))}}renderMultipleSelectField(e,n,i,t,s,l){const r=["required","minlength","maxlength"];let a="";t&&Object.entries(t).forEach((([i,t])=>{r.includes(i)?"required"===i?a+=`${i} `:"minlength"===i?a+=`minlength="${t}" `:"maxlength"===i&&(a+=`maxlength="${t}" `):console.warn(`Unsupported validation attribute '${i}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(d=` bind:value="${n}" `);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const i=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${i}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $="";Array.isArray(l)&&($=l.map((e=>{const n=e.selected?" selected":"";return`\n        <option value="${e.value}"${n}>${e.label}</option>\n      `})).join(""));let p;p="class"in s?s.class:this.inputClass;let u=`\n    <fieldset class="${this.selectGroupClass}" id="${o+"-block"}">\n      <label for="${o}">${i}\n  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <select name="${n}"\n        ${d}\n        \n        id="${o}"\n        class="${p}"\n        ${c}\n        ${a}\n        multiple\n      >\n        ${$}\n      </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();u=u.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,i)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${i.trim()}\n</select>`)),u=u.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=u}renderSubmitButton(e,n,i,t,s){const l=s.id||n;let r,a="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){a+=` ${e}="${n.endsWith("()")?n.slice(0,-2):n}"`}else!0===n?a+=` ${e.replace(/_/g,"-")}`:!1!==n&&(a+=` ${e.replace(/_/g,"-")}="${n}"`);r="class"in s?s.class:this.submitButtonClass;let d=`\n    <input type="${e}"\n      id="${l+"-block"}"\n      class="${r}"\n      value="${i}"\n      ${a}\n    />\n  `.replace(/^\s*\n/gm,"").trim();this.formMarkUp+=d}renderFormHTML(){this.formMarkUp+="</form>";const e=document.getElementById(this.formContainerId);e?e.innerHTML=this.formMarkUp:console.error(`Error: formContainer not found. Please ensure an element with id ${this.formContainerId} exists in the HTML.`)}}}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).Formique=n()}(this,(function(){"use strict";class e{renderField(e,n,t,i,s,l){throw new Error("Method renderField must be implemented")}}return class extends e{constructor(e,n={},t={}){super(),this.formSchema=e,this.divClass="input-block",this.inputClass="form-input",this.radioGroupClass="radio-group",this.checkboxGroupClass="checkbox-group",this.selectGroupClass="form-select",this.submitButtonClass="form-submit-btn",this.formParams=n,this.formContainerId=t.formContainerId||"formique",this.formAction=n.action||"https://httpbin.org/post",this.method=n.method.toUpperCase()||"POST",this.formMarkUp="",this.dependencyGraph={},this.themes=["dark","light","pink","light","indigo","dark-blue","light-blue","dark-orange","green","purple","midnight-blush"],document.addEventListener("DOMContentLoaded",(()=>{if(this.renderFormHTML(),this.initDependencyGraph(),this.registerObservers(),this.formSettings.theme&&this.themes.includes(this.formSettings.theme)){let e=this.formSettings.theme;this.applyTheme(e,this.formContainerId)}else this.applyTheme("dark",this.formContainerId);document.getElementById(`${this.formParams.id}`).addEventListener("submit",(e=>{this.formSettings.submitOnPage&&(e.preventDefault(),this.handleOnPageFormSubmission(this.formParams.id))}))})),this.formSettings={requiredFieldIndicator:!0,placeholders:!0,asteriskHtml:'<span aria-hidden="true" style="color: red;">*</span>',...t},Object.keys(this.formParams).length>0&&(this.formMarkUp+=this.renderFormElement()),this.renderForm()}initDependencyGraph(){this.dependencyGraph={},this.formSchema.forEach((e=>{const[n,t,i,s,l={}]=e,r=l.id||t;l.dependents&&(this.dependencyGraph[r]=l.dependents.map((e=>{const n=this.formSchema.find((([,n])=>n===e));if(n){const t=n[4]||{};return{dependent:t.id||e,condition:t.condition||null}}console.warn(`Dependent field "${e}" not found in schema.`)})),this.dependencyGraph[r].push({state:null}),this.attachInputChangeListener(r)),l.dependents&&l.dependents.forEach((e=>{const n=this.formSchema.find((([,n])=>n===e)),t=(n&&n[4]||{}).id||e,i=document.querySelector(`#${t}-block`);i&&(i.style.display="none")}))}))}attachInputChangeListener(e){const n=document.getElementById(e);n&&n.addEventListener("input",(n=>{const t=n.target.value;this.handleParentFieldChange(e,t)}))}handleParentFieldChange(e,n){const t=this.dependencyGraph[e];t&&(this.dependencyGraph[e].forEach((e=>{void 0!==e.state&&(e.state=n)})),t.forEach((e=>{if(e.dependent){const t=e.dependent+"-block",i=document.getElementById(t);if(i){const t="function"==typeof e.condition?e.condition(n):n===e.condition;i.style.display=t?"block":"none";i.querySelectorAll("input, select, textarea").forEach((e=>{t?e.required="true"===e.getAttribute("data-original-required"):(e.setAttribute("data-original-required",e.required),e.required=!1)}))}else console.warn(`Wrapper block with ID ${t} not found.`)}})))}registerObservers(){this.formSchema.forEach((e=>{const[n,t,i,s,l={}]=e,r=l.id||t;l.dependents&&l.dependents.forEach((e=>{if(this.dependencyGraph[r]){const n=this.formSchema.find((([,n])=>n===e));if(n){const t=n[4]?.id||e;this.dependencyGraph[r].forEach((n=>{n.dependent===e&&(n.observers||(n.observers=[]),n.observers.push(t))}))}}}))}))}applyTheme(e,n){const t=document.querySelector("link[formique-style]");t?fetch(t.href).then((e=>e.text())).then((t=>{const i=t.match(new RegExp(`\\.${e}-theme\\s*{([^}]*)}`,"i"));if(!i)return void console.error(`Theme rules for ${e} not found in the stylesheet.`);const s=i[1].trim(),l=document.getElementById(n);if(l){l.classList.add(`${e}-theme`,"formique");const t=document.createElement("style");t.textContent=`\n          #${n} {\n            ${s}\n          }\n        `,l.parentNode.insertBefore(t,l)}else console.error(`Form container with ID ${n} not found.`)})).catch((e=>{console.error("Error loading the stylesheet:",e)})):console.error("Stylesheet with 'formique-style' not found!")}renderFormElement(){let e="<form\n";const n=this.formParams||{};for(const[t,i]of Object.entries(n))if(null!=i)if("boolean"==typeof i)i&&(e+=`  ${t}\n`);else{e+=`  ${"accept_charset"===t?"accept-charset":t.replace(/_/g,"-")}="${i}"\n`}if(e+=">\n",n.laravel){e+=`<input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').getAttribute("content")}">`}return e=e.replace(/\n\s*$/,"\n"),e}renderForm(){const e=this.formSchema.map((e=>{const[n,t,i,s,l={},r]=e;return this.renderField(n,t,i,s,l,r)})).join("");this.formMarkUp+=e}renderField(e,n,t,i,s,l){const r={text:this.renderTextField,email:this.renderEmailField,number:this.renderNumberField,password:this.renderPasswordField,password:this.renderTextAreaField,tel:this.renderTelField,date:this.renderDateField,time:this.renderTimeField,"datetime-local":this.renderDateTimeField,month:this.renderMonthField,week:this.renderWeekField,url:this.renderUrlField,search:this.renderSearchField,color:this.renderColorField,checkbox:this.renderCheckboxField,radio:this.renderRadioField,file:this.renderFileField,hidden:this.renderHiddenField,image:this.renderImageField,textarea:this.renderTextAreaField,singleSelect:this.renderSingleSelectField,multipleSelect:this.renderMultipleSelectField,dynamicSingleSelect:this.renderDynamicSingleSelectField,submit:this.renderSubmitButton}[e];return r?r.call(this,e,n,t,i,s,l):(console.warn(`Unsupported field type '${e}' encountered.`),"")}handleOnPageFormSubmission(e){const n=document.getElementById(e);if(n){const e=new FormData(n);fetch(this.formAction,{method:this.method,body:e}).then((e=>e.json())).then((e=>{console.log("Success:",e);const n=document.getElementById(this.formContainerId);if(n){const e=document.createElement("div");e.classList.add("success-message","message-container"),e.innerHTML=this.formSettings.successMessage||"Your details have been successfully submitted!",n.innerHTML="",n.appendChild(e)}})).catch((e=>{console.error("Error:",e);const n=document.getElementById(this.formContainerId);if(n){let t=n.querySelector(".error-message");t&&t.remove();const i=document.createElement("div");i.classList.add("error-message","message-container");let s=this.formSettings.errorMessage||"An error occurred while submitting the form. Please try again.";s=`${s}<br/>Details: ${e.message}`,i.innerHTML=s,n.appendChild(i)}}))}}renderTextField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}      />\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),this.formMarkUp+=p}renderEmailField(e,n,t,i,s){const l=["required","pattern","minlength","maxlength","multiple"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'email'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n        ${c.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}\n\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderNumberField(e,n,t,i,s){const l=["required","min","max","step"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderPasswordField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"minlength":case"maxlength":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'password'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTextAreaField(e,n,t,i,s){const l=["required","minlength","maxlength","pattern"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'number'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'text'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n;const o=this.formSettings?.framework||!1;let c,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on"))if("semantq"===o){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else{$+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);c="class"in s?s.class:this.inputClass;let p=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${$}\n        ${r}\n        ${$.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();p=p.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=p}renderTelField(e,n,t,i,s){const l=["required","pattern","minlength","maxlength"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"pattern":case"minlength":case"maxlength":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'tel'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderDateField(e,n,t,i,s){const l=["required","min","max","step","placeholder","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"step":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'date'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderTimeField(e,n,t,i,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else switch(t){case"min":case"max":case"step":r+=`  ${t}="${i}"\n`;break;default:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderDateTimeField(e,n,t,i,s){const l=["required","min","max","step","readonly","disabled","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else switch(t){case"min":case"max":case"step":r+=`  ${t}="${i}"\n`;break;default:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}"> \n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderMonthField(e,n,t,i,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'month'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderWeekField(e,n,t,i,s){const l=["required","min","max","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([e,t])=>{if(l.includes(e))if("boolean"==typeof t&&t)r+=`  ${e}\n`;else switch(e){case"min":case"max":case"pattern":r+=`  ${e}="${t}"\n`;break;default:l.includes(e)&&console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'week'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderUrlField(e,n,t,i,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else if("pattern"===t)r+=`  ${t}="${i}"\n`;else l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderSearchField(e,n,t,i,s){const l=["required","pattern","placeholder","readonly","disabled","size","autocomplete","spellcheck","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{if(l.includes(t))if("boolean"==typeof i&&i)r+=`  ${t}\n`;else if("pattern"===t)r+=`  ${t}="${i}"\n`;else l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`);else console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderColorField(e,n,t,i,s){const l=["required","readonly","disabled","autocomplete","inputmode","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"boolean"==typeof i&&i?r+=`  ${t}\n`:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(("bind:value"===s.binding||s.binding.startsWith("::")&&n)&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderFileField(e,n,t,i,s){const l=["required","accept","multiple","disabled","title"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"boolean"==typeof i&&i?r+=`  ${t}\n`:l.includes(t)||console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderHiddenField(e,n,t,i,s){const l=["type","name","value","id","class","style","required","readonly","disabled","tabindex"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)&&"boolean"==typeof i&&i?r+=`  ${t}\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if("bind:value"===s.binding&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n    <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,t,i,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?"accept"===t?r+=`accept="${i}"\n`:["required","minwidth","maxwidth","minheight","maxheight"].includes(t)?r+=`${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||s.binding.startsWith("::"))&&(a=` bind:value="${n}"`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();$=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=$}renderImageField(e,n,t,i,s){const l=["accept","required","minwidth","maxwidth","minheight","maxheight"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?r+=`${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";("bind:value"===s.binding||bindingSyntax.startsWith("::"))&&(a=`bind:value="${n}"\n`);let d,o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);d="class"in s?s.class:this.inputClass;let $=`\n    <div class="${this.divClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <input \n        type="${e}"\n        name="${n}"\n        ${a}\n        id="${o}"\n        class="${d}"\n        ${c}\n        ${r}\n      />\n    </div>\n  `.replace(/^\s*\n/gm,"").trim();return $=$.replace(/<input\s+([^>]*)\/>/,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),$=$.replace(/(<div\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),$}renderTextAreaField(e,n,t,i,s){const l=["required","minlength","maxlength"];let r="";i&&Object.entries(i).forEach((([t,i])=>{l.includes(t)?r+="boolean"==typeof i&&i?`  ${t}\n`:`  ${t}="${i}"\n`:console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let a="";if(s.binding&&("bind:value"===s.binding&&n&&(a=`bind:value="${n}"\n`),s.binding.startsWith("::")&&n&&(a=`bind:value="${n}"\n`),s.binding&&!n))return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let d=s.id||n,o="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){o+=`  ${e}="${n.endsWith("()")?n:`${n}()`}"\n`}else!0===n?o+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(o+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let c=s.class||this.inputClass,$=`\n    <div class="${this.divClass}" id="${d+"-block"}">\n      <label for="${d}">${t}\n        ${r.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </label>\n      <textarea \n        name="${n}"\n        ${a}\n        id="${d}"\n        class="${c}"\n        ${o}\n        ${r}\n        ${o.includes("placeholder")?"":this.formSettings.placeholders?`placeholder="${t}"`:""}>\n      </textarea>\n    </div>\n`.replace(/^\s*\n/gm,"").trim();$=$.replace(/<textarea\s+([^>]*)>\s*<\/textarea>/,((e,n)=>`<textarea\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n></textarea>`)),this.formMarkUp+=$}renderRadioField(e,n,t,i,s,l){const r=["required"];let a="";i&&Object.entries(i).forEach((([e,t])=>{if(r.includes(e))if("boolean"==typeof t&&t)a+=`  ${e}\n`;else if("required"===e)a+=`  ${e}\n`;else r.includes(e)||console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`);else console.warn(`Unsupported validation attribute '${e}' for field '${n}' of type 'radio'.`)}));let d="";if(s.binding)if("bind:value"===s.binding&&n)d=` bind:value="${n}"\n`;else if(s.binding.startsWith("::")&&n)d=` bind:value="${n}"\n`;else if(s.binding&&!n)return void console.log("%s",`You cannot set binding value when there is no name attribute defined in ${n} ${e} field.`);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $=s.class||this.inputClass,p="";l&&l.length&&(p=l.map((t=>`\n            <div>\n                <input \n                    type="${e}" \n                    name="${n}" \n                    value="${t.value}"\n                    ${d} \n                    ${c}\n                    ${s.id,`id="${o}-${t.value}"`}\n                    class="${$}"\n                    ${a}\n                />\n                <label \n                    for="${s.id,`${o}-${t.value}`}">\n                    ${t.label}\n                </label>\n            </div>\n            `)).join(""));let m=`\n    <fieldset class="${this.radioGroupClass}" id="${o+"-block"}">\n        <legend>\n        ${t} \n        ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        ${p}\n    </fieldset>\n    `.replace(/^\s*\n/gm,"").trim().replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`));m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderCheckboxField(e,n,t,i,s,l){const r=["required"];let a="";i&&Object.entries(i).forEach((([t,i])=>{r.includes(t)?"required"===t&&(a+=`${t}\n`):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&("bind:checked"===s.binding||s.binding.startsWith("::"))&&(d=` bind:checked="${n}"\n`);let o,c=s.id||n,$="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;$+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?$+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&($+=`  ${e.replace(/_/g,"-")}="${n}"\n`);o="class"in s?s.class:this.inputClass;let p="";Array.isArray(l)&&(p=l.map((e=>{const t=`${c}-${e.value}`;return`\n        <div>\n          <input \n          type="checkbox" \n          name="${n}" \n          value="${e.value}"${d} ${$}\n            ${s.id,`id="${t}"`}\n            class="${o}"\n          />\n          <label \n          for="${t}">\n            ${e.label}\n          </label>\n        </div>\n      `})).join(""));let m=`\n    <fieldset class="${this.checkboxGroupClass}" id="${c+"-block"}">\n      <legend>\n      ${t}  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n      </legend>\n      ${p}\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();m=m.replace(/<input\s+([^>]*)\/>/g,((e,n)=>`<input\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n/>`)),m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderDynamicSingleSelectField(e,n,t,i,s,l){const r=l.flat().map((e=>{const n=e.options.some((e=>!0===e.selected));return{value:e.id,label:e.label,...n&&{selected:!0}}})),a=l;this.renderSingleSelectField(e,n,t,i,s,r,a,"dynamicSingleSelect")}renderSingleSelectField(e,n,t,i,s,l,r,a){const d=["required"];let o="";i&&Object.entries(i).forEach((([t,i])=>{d.includes(t)?"required"===t&&(o+=`${t} `):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let c="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(c=` bind:value="${n}" `);let $=s.id||n,p="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;p+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?p+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(p+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let m="";Array.isArray(l)&&(m+='\n        <option value="">Choose an option</option>\n        ',m+=l.map((e=>{const n=e.selected?" selected":"";return`\n            <option value="${e.value}"${n}>${e.label}</option>\n            `})).join(""));let u=s.class||this.inputClass;const f="dynamicSingleSelect"===a&&r?' onchange="handleDynamicSingleSelect(this.value,id)"':"";let h,b;if("dynamicSingleSelect"===a&&r)if(t.includes("-")){const[e]=t.split("-");h=e,b=t}else h=t,b=t;else h=t;let g=`\n    <fieldset class="${this.selectGroupClass}" id="${$+"-block"}">\n        <legend>${h} \n            ${o.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${$}"> Select ${h} \n        <select name="${n}"\n            ${c}\n            \n            id="${$}"\n            class="${u}"\n            ${p}\n            ${o}\n            ${f} \n        >\n            ${m}\n        </select>\n    </fieldset>\n`.replace(/^\s*\n/gm,"").trim().replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`));if(g=g.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=g,a&&"dynamicSingleSelect"===a&&r){const e=document.getElementById(this.formContainerId);let t=s.id||n;if(e){const n=document.createElement("script");n.textContent='\n  window.handleDynamicSingleSelect = function(category, fieldsetid) {\n    //console.log("HERE", fieldsetid);\n\n    // Hide all subcategory fields\n    document.querySelectorAll(`[class*="${fieldsetid}"]`).forEach(div => {\n      div.style.display = "none";\n    });\n\n    // Show the selected category\n    const selectedCategoryFieldset = document.getElementById(category + \'-options\');\n    if (selectedCategoryFieldset) {\n      selectedCategoryFieldset.style.display = "block";\n    }\n  }\n',e.appendChild(n)}else console.error(`Target div with id "${this.formContainerId}" not found.`);r.forEach((e=>{const{id:n,label:i,options:s}=e,l=s.map((e=>{const n=e.selected?" selected":"";return`\n      <option value="${e.value}"${n}>${e.label}</option>\n    `})).join("");let r,a;console.log("Label:",b),r=b.includes("-")?b.split("-")?.[1]+" Options":"options",a="options"!==r?b.split("-")?.[1]+" Option":r;let d=`\n    <fieldset class="${this.selectGroupClass} ${t}" id="${n}-options" style="display: none;">\n        <legend> ${i} ${r} ${this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n        </legend>\n        <label for="${n}"> Select ${i} ${a}           \n        </label>\n        <select name="${n}"\n            ${c}\n            \n            id="${n+"-block"}"\n            class="${u}"\n            ${p}\n            ${o}\n        >\n            <option value="">Choose an option</option>\n            ${l}\n        </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();d=d.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`)),d=d.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=d}))}}renderMultipleSelectField(e,n,t,i,s,l){const r=["required","minlength","maxlength"];let a="";i&&Object.entries(i).forEach((([t,i])=>{r.includes(t)?"required"===t?a+=`${t} `:"minlength"===t?a+=`minlength="${i}" `:"maxlength"===t&&(a+=`maxlength="${i}" `):console.warn(`Unsupported validation attribute '${t}' for field '${n}' of type '${e}'.`)}));let d="";s.binding&&"string"==typeof s.binding&&s.binding.startsWith("::")&&(d=` bind:value="${n}" `);let o=s.id||n,c="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){const t=n.endsWith("()")?n.slice(0,-2):n;c+=`  @${e.replace(/^on/,"")}={${t}}\n`}else!0===n?c+=`  ${e.replace(/_/g,"-")}\n`:!1!==n&&(c+=`  ${e.replace(/_/g,"-")}="${n}"\n`);let $="";Array.isArray(l)&&($=l.map((e=>{const n=e.selected?" selected":"";return`\n        <option value="${e.value}"${n}>${e.label}</option>\n      `})).join(""));let p;p="class"in s?s.class:this.inputClass;let m=`\n    <fieldset class="${this.selectGroupClass}" id="${o+"-block"}">\n      <label for="${o}">${t}\n  ${a.includes("required")&&this.formSettings.requiredFieldIndicator?this.formSettings.asteriskHtml:""}\n</label>\n      <select name="${n}"\n        ${d}\n        \n        id="${o}"\n        class="${p}"\n        ${c}\n        ${a}\n        multiple\n      >\n        ${$}\n      </select>\n    </fieldset>\n  `.replace(/^\s*\n/gm,"").trim();m=m.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g,((e,n,t)=>`<select\n${n.trim().split(/\s+/).map((e=>`  ${e}`)).join("\n")}\n>\n${t.trim()}\n</select>`)),m=m.replace(/(<fieldset\s+[^>]*>)/g,(e=>`\n${e}\n`)).replace(/\n\s*\n/g,"\n"),this.formMarkUp+=m}renderSubmitButton(e,n,t,i,s){const l=s.id||n;let r,a="";for(const[e,n]of Object.entries(s))if("id"!==e&&"class"!==e&&"dependsOn"!==e&&"dependents"!==e&&void 0!==n)if(e.startsWith("on")){a+=` ${e}="${n.endsWith("()")?n.slice(0,-2):n}"`}else!0===n?a+=` ${e.replace(/_/g,"-")}`:!1!==n&&(a+=` ${e.replace(/_/g,"-")}="${n}"`);r="class"in s?s.class:this.submitButtonClass;let d=`\n    <input type="${e}"\n      id="${l+"-block"}"\n      class="${r}"\n      value="${t}"\n      ${a}\n    />\n  `.replace(/^\s*\n/gm,"").trim();this.formMarkUp+=d}renderFormHTML(){this.formMarkUp+="</form>";const e=document.getElementById(this.formContainerId);e?e.innerHTML=this.formMarkUp:console.error(`Error: formContainer not found. Please ensure an element with id ${this.formContainerId} exists in the HTML.`)}}}));

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "formique",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Formique Declarative Form Syntax JavaScript Library",
-  "main": "formique.cjs.js",
+  "main": "formique.umd.js", 
   "module": "formique.mjs",
   "browser": "formique.umd.js",
   "exports": {
@@ -13,8 +13,10 @@
     }
   },
   "files": [
-    "dist/*",
-    "README.md"
+      "formique.umd.js",
+      "formique.mjs",
+      "formique.cjs.js",
+      "README.md"
   ],
   "keywords": ["form", "javascript", "forms", "library"],
   "author": "Gugulethu Nyoni",

package/dist/css/formique.css

@@ -1,250 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
-
-/* Formique CSS */
-
-
-/* Dark Theme 
-
-:root {
-    --background-dark: #1e1e1e;
-    --background-light: #2e2e2e;
-    --text-light: #e0e0e0;
-    --border-color: #444;
-    --input-background: #333;
-    --input-background-disabled: #444;
-    --label-color: #b0b0b0;
-    --radio-checkbox-accent: #b0b0b0;
-    --button-background: #b0b0b0;
-    --button-background-hover: #9e9e9e;
-}
-
-/* Pink Theme  
-:root {
-    --background-dark: #2c2c2c;
-    --background-light: #3d3d3d;
-    --text-light: #f1f1f1;
-    --border-color: #555;
-    --input-background: #444;
-    --input-background-disabled: #666;
-    --label-color: #ff4081;
-    --radio-checkbox-accent: #ff4081;
-    --button-background: #ff4081;
-    --button-background-hover: #e91e63;
-}
-
-/* Deep Blue, Purple, and Pink Theme */
-:root {
-    --background-dark: #1a1a40;
-    --background-light: #2b2b73;
-    --text-light: #f1f1f1;
-    --border-color: #4a4a91;
-    --input-background: #3a3a6b;
-    --input-background-disabled: #555587;
-    --label-color: #ff66b3;
-    --radio-checkbox-accent: #ff66b3;
-    --button-background: linear-gradient(45deg, #6a4fbf, #ff66b3);
-    --button-background-hover: linear-gradient(45deg, #4e2e8b, #ff4081);
-}
-
-
-/* Indigo Theme 
-:root {
-    --background-dark: #2c2c2c;
-    --background-light: #3d3d3d;
-    --text-light: #e0e0e0;
-    --border-color: #444;
-    --input-background: #333;
-    --input-background-disabled: #555;
-    --label-color: #3f51b5;
-    --radio-checkbox-accent: #3f51b5;
-    --button-background: #3f51b5;
-    --button-background-hover: #303f9f;
-}
-
-/* Blue Theme 
-:root {
-    --background-dark: #0a0a0a;
-    --background-light: #1a1a1a;
-    --text-light: #e0e0e0;
-    --border-color: #333;
-    --input-background: #222;
-    --input-background-disabled: #444;
-    --label-color: #2196f3;
-    --radio-checkbox-accent: #2196f3;
-    --button-background: #2196f3;
-    --button-background-hover: #1976d2;
-}
-
-
-
-/* Dark and Orange
-
-:root {
-    --background-dark: #121212;
-    --background-light: #1e1e1e;
-    --text-light: #e0e0e0;
-    --border-color: #333;
-    --input-background: #333;
-    --input-background-disabled: #444;
-    --label-color: #ff9800;
-    --radio-checkbox-accent: #ff9800;
-    --button-background: #ff9800;
-    --button-background-hover: #e68900;
-}
-
-*/
-
-
-
-/*
-
-#formique {
-    max-width: 600px; 
-    margin: auto;
-    padding: 1rem;
-    background-color: var(--background-light); 
-    border-radius: 8px;
-    color: var(--text-light); 
-    font-family: 'Montserrat', sans-serif;
-}
-
-
-*/
-
-
-#formique {
-    max-width: 600px; 
-    margin: auto;
-    padding: 1rem;
-    background: linear-gradient(45deg, #1a1a40, #6a4fbf, #ff66b3); /* Blue, purple, pink gradient */
-    border-radius: 8px;
-    color: #ffffff; /* White text color */
-    font-family: 'Montserrat', sans-serif;
-}
-
-
-
-
-/* Input Block Styling */
-#formique .input-block {
-    margin-bottom: 1rem;
-}
-
-#formique .input-block label {
-    display: block;
-    margin-bottom: 0.5rem;
-    color: var(--label-color); /* Orange color for labels */
-}
-
-#formique .input-block .form-input,
-#formique .input-block .form-control {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background-color: var(--input-background); /* Background for inputs */
-    color: var(--text-light);
-    box-sizing: border-box;
-}
-
-#formique .input-block .form-input:disabled {
-    background-color: var(--input-background-disabled); /* Background for disabled inputs */
-    cursor: not-allowed;
-}
-
-/* Radio Group Styling */
-#formique .radio-group {
-    margin-bottom: 1rem;
-}
-
-#formique .radio-group legend {
-    margin-bottom: 0.5rem;
-    font-weight: bold;
-    color: var(--label-color); /* Orange color for legend */
-}
-
-#formique .radio-group div {
-    margin-bottom: 0.5rem;
-}
-
-#formique .radio-group .form-radio-input {
-    margin-right: 0.5rem;
-    accent-color: var(--radio-checkbox-accent); /* Orange color for radio buttons */
-}
-
-/* Checkbox Group Styling */
-#formique .checkbox-group {
-    margin-bottom: 1rem;
-}
-
-#formique .checkbox-group legend {
-    margin-bottom: 0.5rem;
-    font-weight: bold;
-    color: var(--label-color); /* Orange color for legend */
-}
-
-#formique .checkbox-group div {
-    margin-bottom: 0.5rem;
-}
-
-#formique .checkbox-group .form-checkbox-input {
-    margin-right: 0.5rem;
-    accent-color: var(--radio-checkbox-accent); /* Orange color for checkboxes */
-}
-
-/* Select Styling */
-#formique .form-select {
-    margin-bottom: 1rem;
-}
-
-#formique .form-select label {
-    display: block;
-    margin-bottom: 0.5rem;
-    color: var(--label-color); /* Orange color for labels */
-}
-
-#formique .form-select legend {
-    margin-bottom: 0.5rem;
-    font-weight: bold;
-    color: var(--label-color); /* Orange color for legend */
-}
-
-#formique .form-select .form-select-input {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background-color: var(--input-background); /* Background for selects */
-    color: var(--text-light);
-    box-sizing: border-box;
-}
-
-/* Submit Button Styling */
-#formique .form-submit-btn {
-    padding: 0.75rem 1.5rem;
-    border: 1px solid var(--text-light);
-    border-radius: 4px;
-    background-color: var(--button-background); /* Orange background */
-    color: var(--text-light);
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background-color 0.3s;
-}
-
-#formique .form-submit-btn:hover {
-    background-color: var(--button-background-hover); /* Darker orange on hover */
-    color: var(--text-light);
-}
-
-/* General Styles */
-
-/*
-body {
-    background-color: var(--background-dark); 
-    color: var(--text-light); 
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-}
-*/
-