on-codemerge/dist/src/plugins/FormBuilderPlugin/components/FieldEditor.cjs

A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product

/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
"use strict";var U=Object.defineProperty;var N=(F,t,e)=>t in F?U(F,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):F[t]=e;var k=(F,t,e)=>N(F,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../utils/helpers.cjs");class M{constructor(t,e,n,a,p,s,r){k(this,"editor");k(this,"formManager");k(this,"onUpdate");k(this,"onRemove");k(this,"onClone");k(this,"onTypeChange");k(this,"onOptionsChange");this.onUpdate=t,this.onRemove=e,this.onClone=n,this.editor=a,this.formManager=p,this.onTypeChange=s,this.onOptionsChange=r}createFieldEditor(t){const e=o.createContainer("field-editor-container mb-4 p-4 border border-gray-200 rounded bg-gray-50"),n=o.createContainer("field-header flex justify-between items-center mb-3"),a=o.createContainer("field-title text-lg font-semibold");a.textContent=t.label||this.editor.t("Untitled Field");const p=o.createContainer("field-actions flex gap-2"),s=o.createButton(this.editor.t("Copy"),()=>this.onClone(t.id),"secondary"),r=o.createButton(this.editor.t("Remove"),()=>this.onRemove(t.id),"danger");p.appendChild(s),p.appendChild(r),n.appendChild(a),n.appendChild(p),e.appendChild(n);const h=this.createMainSettings(t);e.appendChild(h);const d=this.createOptionsSettings(t);e.appendChild(d);const l=this.createValidationSettings(t);return e.appendChild(l),e}createMainSettings(t){var i;const e=o.createContainer("main-settings mb-4"),n=o.createContainer("section-title text-md font-medium mb-2");n.textContent=this.editor.t("Main Settings"),e.appendChild(n);const a=o.createContainer("setting-group mb-3"),p=o.createLabel(this.editor.t("Field Type:")),s=o.createSelectField(this.getFieldTypeOptions(),t.type,c=>{const m=c;this.onUpdate(t.id,{type:m}),this.onTypeChange&&this.onTypeChange(t.id,m)});a.appendChild(p),a.appendChild(s),e.appendChild(a);const r=o.createContainer("setting-group mb-3"),h=o.createLabel(this.editor.t("Field Label:")),d=o.createInputField("text",this.editor.t("Enter field label"),t.label,c=>this.onUpdate(t.id,{label:c}));r.appendChild(h),r.appendChild(d),e.appendChild(r);const l=o.createContainer("setting-group mb-3"),u=o.createLabel(this.editor.t("Placeholder:")),C=o.createInputField("text",this.editor.t("Enter placeholder text"),((i=t.options)==null?void 0:i.placeholder)||"",c=>this.onUpdate(t.id,{options:{...t.options,placeholder:c}}));return l.appendChild(u),l.appendChild(C),e.appendChild(l),e}createOptionsSettings(t){var g,I,L,y,b,w;const e=o.createContainer("options-settings mb-4"),n=o.createContainer("section-title text-md font-medium mb-2");n.textContent=this.editor.t("Additional Options"),e.appendChild(n);const a=o.createContainer("setting-group mb-3"),p=o.createLabel(this.editor.t("Field Name (name):")),s=o.createInputField("text",this.editor.t("Enter field name"),((g=t.options)==null?void 0:g.name)||"",v=>this.onUpdate(t.id,{options:{...t.options,name:v}}));a.appendChild(p),a.appendChild(s),e.appendChild(a);const r=o.createContainer("setting-group mb-3"),h=o.createLabel(this.editor.t("Field ID:")),d=o.createInputField("text",this.editor.t("Enter field ID"),((I=t.options)==null?void 0:I.id)||"",v=>this.onUpdate(t.id,{options:{...t.options,id:v}}));r.appendChild(h),r.appendChild(d),e.appendChild(r);const l=o.createContainer("setting-group mb-3"),u=o.createLabel(this.editor.t("CSS Class:")),C=o.createInputField("text",this.editor.t("Enter CSS class"),((L=t.options)==null?void 0:L.className)||"",v=>this.onUpdate(t.id,{options:{...t.options,className:v}}));l.appendChild(u),l.appendChild(C),e.appendChild(l);const i=o.createContainer("checkboxes-group flex flex-wrap gap-4 mb-3"),c=o.createCheckbox(this.editor.t("Read Only"),((y=t.options)==null?void 0:y.readonly)||!1,v=>this.onUpdate(t.id,{options:{...t.options,readonly:v}})),m=o.createCheckbox(this.editor.t("Disabled"),((b=t.options)==null?void 0:b.disabled)||!1,v=>this.onUpdate(t.id,{options:{...t.options,disabled:v}})),x=o.createCheckbox(this.editor.t("Multiple Selection"),((w=t.options)==null?void 0:w.multiple)||!1,v=>this.onUpdate(t.id,{options:{...t.options,multiple:v}}));i.appendChild(c),i.appendChild(m),i.appendChild(x),e.appendChild(i);const O=this.createTypeSpecificOptions(t);if(O&&e.appendChild(O),t.type==="select"||t.type==="radio"){const v=this.createOptionsList(t);e.appendChild(v)}return e}createTypeSpecificOptions(t){const e=o.createContainer("type-specific-options mb-3"),n=o.createContainer("section-title text-sm font-medium mb-2");switch(n.textContent=this.editor.t("Type-Specific Options"),e.appendChild(n),t.type){case"checkbox":this.addCheckboxOptions(e,t);break;case"number":case"range":this.addNumberOptions(e,t);break;case"textarea":this.addTextareaOptions(e,t);break;case"file":this.addFileOptions(e,t);break;case"date":case"time":case"datetime-local":case"month":case"week":this.addDateOptions(e,t);break;case"text":case"email":case"password":case"tel":case"url":this.addTextOptions(e,t);break;case"color":this.addColorOptions(e,t);break;case"image":this.addImageOptions(e,t);break;default:return null}return e}addCheckboxOptions(t,e){var l,u;const n=o.createContainer("setting-group mb-2"),a=o.createLabel(this.editor.t("Checkbox Text:")),p=((l=e.options)==null?void 0:l.value)||e.label||"",s=o.createInputField("text",this.editor.t("Enter text to display next to checkbox"),p,C=>{const i=this.formManager.getField(e.id),c=(i==null?void 0:i.options)||{};this.onUpdate(e.id,{options:{...c,value:C}})});n.appendChild(a),n.appendChild(s),t.appendChild(n);const r=o.createContainer("setting-group mb-2"),h=((u=e.options)==null?void 0:u.checked)||!1,d=o.createCheckbox(this.editor.t("Checked by Default"),h,C=>{const i=this.formManager.getField(e.id),c=(i==null?void 0:i.options)||{};this.onUpdate(e.id,{options:{...c,checked:C}})});r.appendChild(d),t.appendChild(r)}addNumberOptions(t,e){var m,x,O;const n=o.createContainer("setting-group mb-2"),a=o.createLabel(this.editor.t("Minimum Value:")),p=((m=e.options)==null?void 0:m.min)!==void 0?String(e.options.min):"",s=o.createInputField("number",this.editor.t("Enter minimum value"),p,g=>this.onUpdate(e.id,{options:{...e.options,min:g?parseFloat(g):void 0}}));n.appendChild(a),n.appendChild(s),t.appendChild(n);const r=o.createContainer("setting-group mb-2"),h=o.createLabel(this.editor.t("Maximum Value:")),d=((x=e.options)==null?void 0:x.max)!==void 0?String(e.options.max):"",l=o.createInputField("number",this.editor.t("Enter maximum value"),d,g=>this.onUpdate(e.id,{options:{...e.options,max:g?parseFloat(g):void 0}}));r.appendChild(h),r.appendChild(l),t.appendChild(r);const u=o.createContainer("setting-group mb-2"),C=o.createLabel(this.editor.t("Step Value:")),i=((O=e.options)==null?void 0:O.step)!==void 0?String(e.options.step):"",c=o.createInputField("number",this.editor.t("Enter step value"),i,g=>this.onUpdate(e.id,{options:{...e.options,step:g?parseFloat(g):void 0}}));u.appendChild(C),u.appendChild(c),t.appendChild(u)}addTextareaOptions(t,e){var u,C;const n=o.createContainer("setting-group mb-2"),a=o.createLabel(this.editor.t("Rows:")),p=((u=e.options)==null?void 0:u.rows)!==void 0?String(e.options.rows):"4",s=o.createInputField("number",this.editor.t("Enter number of rows"),p,i=>this.onUpdate(e.id,{options:{...e.options,rows:i?parseInt(i):4}}));n.appendChild(a),n.appendChild(s),t.appendChild(n);const r=o.createContainer("setting-group mb-2"),h=o.createLabel(this.editor.t("Columns:")),d=((C=e.options)==null?void 0:C.cols)!==void 0?String(e.options.cols):"50",l=o.createInputField("number",this.editor.t("Enter number of columns"),d,i=>this.onUpdate(e.id,{options:{...e.options,cols:i?parseInt(i):50}}));r.appendChild(h),r.appendChild(l),t.appendChild(r)}addFileOptions(t,e){var h,d;const n=o.createContainer("setting-group mb-2"),a=o.createLabel(this.editor.t("Accepted File Types:")),p=o.createInputField("text",this.editor.t("e.g., .pdf,.doc,.jpg"),((h=e.options)==null?void 0:h.accept)||"",l=>this.onUpdate(e.id,{options:{...e.options,accept:l}}));n.appendChild(a),n.appendChild(p),t.appendChild(n);const s=o.createContainer("setting-group mb-2"),r=o.createCheckbox(this.editor.t("Allow Multiple Files"),((d=e.options)==null?void 0:d.multiple)||!1,l=>this.onUpdate(e.id,{options:{...e.options,multiple:l}}));s.appendChild(r),t.appendChild(s)}addDateOptions(t,e){var d,l,u,C;const n=o.createContainer("setting-group mb-2"),a=o.createLabel(this.editor.t("Minimum Date:")),p=o.createInputField("date",this.editor.t("Select minimum date"),((l=(d=e.options)==null?void 0:d.min)==null?void 0:l.toString())||"",i=>this.onUpdate(e.id,{options:{...e.options,min:i}}));n.appendChild(a),n.appendChild(p),t.appendChild(n);const s=o.createContainer("setting-group mb-2"),r=o.createLabel(this.editor.t("Maximum Date:")),h=o.createInputField("date",this.editor.t("Select maximum date"),((C=(u=e.options)==null?void 0:u.max)==null?void 0:C.toString())||"",i=>this.onUpdate(e.id,{options:{...e.options,max:i}}));s.appendChild(r),s.appendChild(h),t.appendChild(s)}addTextOptions(t,e){var m,x,O,g,I,L,y;const n=o.createContainer("setting-group mb-2"),a=o.createLabel(this.editor.t("Size:")),p=o.createInputField("number",this.editor.t("Enter field size"),((x=(m=e.options)==null?void 0:m.size)==null?void 0:x.toString())||"",b=>this.onUpdate(e.id,{options:{...e.options,size:parseInt(b)||void 0}}));n.appendChild(a),n.appendChild(p),t.appendChild(n);const s=o.createContainer("setting-group mb-2"),r=o.createLabel(this.editor.t("Maximum Length:")),h=o.createInputField("number",this.editor.t("Enter maximum length"),((g=(O=e.options)==null?void 0:O.maxlength)==null?void 0:g.toString())||"",b=>this.onUpdate(e.id,{options:{...e.options,maxlength:parseInt(b)||void 0}}));s.appendChild(r),s.appendChild(h),t.appendChild(s);const d=o.createContainer("setting-group mb-2"),l=o.createLabel(this.editor.t("Minimum Length:")),u=o.createInputField("number",this.editor.t("Enter minimum length"),((L=(I=e.options)==null?void 0:I.minlength)==null?void 0:L.toString())||"",b=>this.onUpdate(e.id,{options:{...e.options,minlength:parseInt(b)||void 0}}));d.appendChild(l),d.appendChild(u),t.appendChild(d);const C=o.createContainer("setting-group mb-2"),i=o.createLabel(this.editor.t("Autocomplete:")),c=o.createSelectField([{value:"",label:this.editor.t("Default")},{value:"on",label:this.editor.t("On")},{value:"off",label:this.editor.t("Off")},{value:"name",label:this.editor.t("Name")},{value:"email",label:this.editor.t("Email")},{value:"tel",label:this.editor.t("Phone")},{value:"url",label:this.editor.t("URL")},{value:"current-password",label:this.editor.t("Current Password")},{value:"new-password",label:this.editor.t("New Password")}],((y=e.options)==null?void 0:y.autocomplete)||"",b=>this.onUpdate(e.id,{options:{...e.options,autocomplete:b}}));C.appendChild(i),C.appendChild(c),t.appendChild(C)}addColorOptions(t,e){var s;const n=o.createContainer("setting-group mb-2"),a=o.createLabel(this.editor.t("Default Color:")),p=o.createInputField("color",this.editor.t("Select default color"),((s=e.options)==null?void 0:s.value)||"#000000",r=>this.onUpdate(e.id,{options:{...e.options,value:r}}));n.appendChild(a),n.appendChild(p),t.appendChild(n)}addImageOptions(t,e){var d,l;const n=o.createContainer("setting-group mb-2"),a=o.createLabel(this.editor.t("Image Source:")),p=o.createInputField("text",this.editor.t("Enter image URL"),((d=e.options)==null?void 0:d.src)||"",u=>this.onUpdate(e.id,{options:{...e.options,src:u}}));n.appendChild(a),n.appendChild(p),t.appendChild(n);const s=o.createContainer("setting-group mb-2"),r=o.createLabel(this.editor.t("Alt Text:")),h=o.createInputField("text",this.editor.t("Enter alt text"),((l=e.options)==null?void 0:l.alt)||"",u=>this.onUpdate(e.id,{options:{...e.options,alt:u}}));s.appendChild(r),s.appendChild(h),t.appendChild(s)}createOptionsList(t){var C;const e=o.createContainer("options-list mb-3 p-3 bg-gray-50 rounded border border-gray-200"),n=o.createContainer("section-title text-sm font-medium mb-2 text-gray-700");t.type==="checkbox"?n.textContent=this.editor.t("Checkbox Options"):t.type==="radio"?n.textContent=this.editor.t("Radio Options"):n.textContent=this.editor.t("Options"),e.appendChild(n);const a=((C=t.options)==null?void 0:C.options)||[],p=o.createContainer("text-xs text-gray-500 mb-2");t.type==="checkbox"?p.textContent=this.editor.t("Add, edit, or reorder checkbox text options"):t.type==="radio"?p.textContent=this.editor.t("Add, edit, or reorder radio button text options"):p.textContent=this.editor.t("Add, edit, or reorder options using buttons"),e.appendChild(p);const s=o.createContainer("options-container space-y-1");if(s.setAttribute("data-field-id",t.id),a.length===0){const i=o.createContainer("empty-state text-center py-3 text-gray-400 text-xs");i.innerHTML=`📝 ${this.editor.t("No options")}`,s.appendChild(i)}else a.forEach((i,c)=>{const m=o.createContainer("option-item bg-white border border-gray-200 rounded p-2 hover:border-gray-300 transition-colors"),x=o.createContainer("flex items-center gap-2"),O=o.createContainer("option-number text-xs font-medium text-gray-700 bg-blue-100 text-blue-800 px-2 py-1 rounded min-w-[24px] text-center");O.textContent=`${c+1}`;const g=o.createContainer("text-xs text-gray-500 min-w-[40px]");t.type==="checkbox"||t.type==="radio"?g.textContent=this.editor.t("Text:"):g.textContent=this.editor.t("Value:");const I=o.createInputField("text",t.type==="checkbox"||t.type==="radio"?this.editor.t("Enter checkbox text"):this.editor.t("Enter option value"),i,b=>{const w=[...a];w[c]=b,this.onUpdate(t.id,{options:{...t.options,options:w}}),this.onOptionsChange&&this.onOptionsChange(t.id)});if(I.className="flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white",I.placeholder=t.type==="checkbox"||t.type==="radio"?this.editor.t("Checkbox text"):this.editor.t("Option value"),t.type==="select"){const b=o.createInputField("text",this.editor.t("Display text (optional)"),i,E=>{const S=[...a];S[c]=E,this.onUpdate(t.id,{options:{...t.options,options:S}}),this.onOptionsChange&&this.onOptionsChange(t.id)});b.className="flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white",b.placeholder=this.editor.t("Display text");const w=o.createContainer("flex items-center gap-2 mt-1"),v=o.createContainer("text-xs text-gray-500 min-w-[60px]");v.textContent=this.editor.t("Display:"),w.appendChild(v),w.appendChild(b),m.appendChild(w)}const L=o.createContainer("flex gap-1");if(c>0){const b=o.createButton("↑",()=>this.moveOption(t.id,c,c-1),"secondary");b.className="px-1.5 py-0.5 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 rounded transition-colors",b.title=this.editor.t("Move up"),L.appendChild(b)}if(c<a.length-1){const b=o.createButton("↓",()=>this.moveOption(t.id,c,c+1),"secondary");b.className="px-1.5 py-0.5 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 rounded transition-colors",b.title=this.editor.t("Move down"),L.appendChild(b)}const y=o.createButton("×",()=>{var w,v;const b=a.filter((E,S)=>S!==c);this.onUpdate(t.id,{options:{...t.options,options:b}}),(v=(w=this.editor)==null?void 0:w.showInfoNotification)==null||v.call(w,t.type==="checkbox"?this.editor.t("Checkbox removed"):t.type==="radio"?this.editor.t("Radio option removed"):this.editor.t("Option removed")),this.onOptionsChange&&this.onOptionsChange(t.id)},"danger");y.className="px-1.5 py-0.5 text-xs bg-red-100 hover:bg-red-200 text-red-600 rounded transition-colors",y.title=this.editor.t("Remove option"),L.appendChild(y),x.appendChild(O),x.appendChild(g),x.appendChild(I),x.appendChild(L),m.appendChild(x),s.appendChild(m)});e.appendChild(s);const r=o.createContainer("action-buttons mt-2 space-y-1"),h=o.createButton(t.type==="checkbox"?`➕ ${this.editor.t("Add Checkbox")}`:t.type==="radio"?`➕ ${this.editor.t("Add Radio")}`:`➕ ${this.editor.t("Add Option")}`,()=>{var m,x;const i=t.type==="checkbox"?this.editor.t("New Checkbox"):t.type==="radio"?this.editor.t("New Radio"):this.editor.t("New Option"),c=[...a,i];this.onUpdate(t.id,{options:{...t.options,options:c}}),(x=(m=this.editor)==null?void 0:m.showSuccessNotification)==null||x.call(m,t.type==="checkbox"?this.editor.t("Checkbox added successfully"):t.type==="radio"?this.editor.t("Radio option added successfully"):this.editor.t("Option added successfully")),this.onOptionsChange&&this.onOptionsChange(t.id)},"primary");h.className="w-full py-1.5 px-2 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded transition-colors";const d=o.createContainer("bulk-actions flex gap-1"),l=o.createButton(`🗑️ ${this.editor.t("Clear")}`,()=>{var i,c;this.onUpdate(t.id,{options:{...t.options,options:[]}}),(c=(i=this.editor)==null?void 0:i.showInfoNotification)==null||c.call(i,this.editor.t("All options cleared")),this.onOptionsChange&&this.onOptionsChange(t.id)},"danger");l.className="flex-1 py-1 px-2 bg-red-600 hover:bg-red-700 text-white text-xs rounded";const u=o.createButton(`📋 ${this.editor.t("Presets")}`,()=>this.showPresetOptions(t),"secondary");return u.className="flex-1 py-1 px-2 bg-gray-600 hover:bg-gray-700 text-white text-xs rounded",d.appendChild(l),d.appendChild(u),r.appendChild(h),r.appendChild(d),e.appendChild(r),e}moveOption(t,e,n){var r,h,d;const a=this.getFieldById(t);if(!a||!((r=a.options)!=null&&r.options))return;const p=[...a.options.options],[s]=p.splice(e,1);p.splice(n,0,s),this.onUpdate(t,{options:{...a.options,options:p}}),(d=(h=this.editor)==null?void 0:h.showInfoNotification)==null||d.call(h,a.type==="checkbox"?this.editor.t("Checkbox moved"):a.type==="radio"?this.editor.t("Radio option moved"):this.editor.t("Option moved")),this.onOptionsChange&&this.onOptionsChange(t)}showPresetOptions(t){const e={countries:["United States","Canada","United Kingdom","Germany","France","Japan","Australia","Brazil","India","China"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],days:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],colors:["Red","Blue","Green","Yellow","Orange","Purple","Black","White","Gray","Pink"],sizes:["XS","S","M","L","XL","XXL"],"age-groups":["18-25","26-35","36-45","46-55","56-65","65+"],genders:[this.editor.t("Male"),this.editor.t("Female"),this.editor.t("Other")],"yes-no":[this.editor.t("Yes"),this.editor.t("No")],custom:[]},n=document.createElement("div");n.className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4";const a=document.createElement("div");a.className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden";const p=document.createElement("div");p.className="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6";const s=document.createElement("h3");s.className="text-2xl font-bold mb-2",s.textContent=this.editor.t("Select Preset Options");const r=document.createElement("p");r.className="text-blue-100 text-sm",r.textContent=this.editor.t("Choose from predefined option sets or create custom options"),p.appendChild(s),p.appendChild(r),a.appendChild(p);const h=document.createElement("div");h.className="p-6 max-h-[60vh] overflow-y-auto";const d=document.createElement("div");d.className="grid grid-cols-1 md:grid-cols-2 gap-4",Object.entries(e).forEach(([i,c])=>{if(i==="custom")return;const m=document.createElement("div");m.className="preset-card border border-gray-200 rounded-lg p-4 hover:border-blue-300 hover:shadow-md transition-all duration-200 cursor-pointer bg-white";const x=document.createElement("div");x.className="text-2xl mb-3";const O={countries:"🌍",months:"📅",days:"📆",colors:"🎨",sizes:"👕","age-groups":"👥",genders:"👤","yes-no":"✅"};x.textContent=O[i]||"📋";const g=document.createElement("h4");g.className="font-semibold text-gray-800 mb-2",g.textContent=this.editor.t(i.charAt(0).toUpperCase()+i.slice(1).replace("-"," "));const I=document.createElement("p");I.className="text-sm text-gray-600 mb-3",I.textContent=`${c.length} ${this.editor.t("options")}`;const L=document.createElement("div");L.className="text-xs text-gray-500 bg-gray-50 p-2 rounded border",L.textContent=c.slice(0,3).join(", ")+(c.length>3?"...":""),m.appendChild(x),m.appendChild(g),m.appendChild(I),m.appendChild(L),m.addEventListener("click",()=>{var y,b;this.onUpdate(t.id,{options:{...t.options,options:c}}),(b=(y=this.editor)==null?void 0:y.showSuccessNotification)==null||b.call(y,`${this.editor.t("Applied")} ${c.length} ${this.editor.t("options")}`),this.onOptionsChange&&this.onOptionsChange(t.id),n.remove()}),m.addEventListener("mouseenter",()=>{m.style.transform="translateY(-2px)"}),m.addEventListener("mouseleave",()=>{m.style.transform="translateY(0)"}),d.appendChild(m)}),h.appendChild(d),a.appendChild(h);const l=document.createElement("div");l.className="bg-gray-50 px-6 py-4 border-t border-gray-200 flex justify-end";const u=document.createElement("button");u.className="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors duration-200 font-medium",u.textContent=this.editor.t("Cancel"),u.addEventListener("click",()=>n.remove()),l.appendChild(u),a.appendChild(l),n.appendChild(a),n.addEventListener("click",i=>{i.target===n&&n.remove()});const C=i=>{i.key==="Escape"&&(n.remove(),this.editor.getDOMContext().removeEventListener("keydown",C))};this.editor.getDOMContext().addEventListener("keydown",C),document.body.appendChild(n)}getFieldById(t){return this.formManager.getField(t)||null}getFieldTypeOptions(){return[{value:"text",label:this.editor.t("Text Input")},{value:"textarea",label:this.editor.t("Text Area")},{value:"select",label:this.editor.t("Dropdown")},{value:"checkbox",label:this.editor.t("Checkbox")},{value:"radio",label:this.editor.t("Radio Button")},{value:"button",label:this.editor.t("Button")},{value:"file",label:this.editor.t("File Upload")},{value:"date",label:this.editor.t("Date")},{value:"time",label:this.editor.t("Time")},{value:"range",label:this.editor.t("Range")},{value:"email",label:this.editor.t("Email")},{value:"password",label:this.editor.t("Password")},{value:"number",label:this.editor.t("Number")},{value:"tel",label:this.editor.t("Phone")},{value:"url",label:this.editor.t("URL")},{value:"color",label:this.editor.t("Color")},{value:"datetime-local",label:this.editor.t("Date & Time")},{value:"month",label:this.editor.t("Month")},{value:"week",label:this.editor.t("Week")},{value:"hidden",label:this.editor.t("Hidden Field")},{value:"image",label:this.editor.t("Image Button")}]}createValidationSettings(t){var m,x,O,g,I,L;const e=o.createContainer("validation-settings mb-4"),n=o.createContainer("section-title text-md font-medium mb-2");n.textContent=this.editor.t("Validation"),e.appendChild(n);const a=o.createContainer("setting-group mb-3"),p=o.createCheckbox(this.editor.t("Required Field"),((m=t.validation)==null?void 0:m.required)||!1,y=>this.onUpdate(t.id,{validation:{...t.validation,required:y}}));a.appendChild(p),e.appendChild(a);const s=o.createContainer("setting-group mb-3"),r=o.createLabel(this.editor.t("Regular Expression:")),h=o.createInputField("text",this.editor.t("Enter regular expression"),((x=t.validation)==null?void 0:x.pattern)||"",y=>this.onUpdate(t.id,{validation:{...t.validation,pattern:y}}));s.appendChild(r),s.appendChild(h),e.appendChild(s);const d=o.createContainer("setting-group mb-3"),l=o.createLabel(this.editor.t("Minimum Length:")),u=o.createInputField("number",this.editor.t("Enter minimum length"),((g=(O=t.validation)==null?void 0:O.minLength)==null?void 0:g.toString())||"",y=>this.onUpdate(t.id,{validation:{...t.validation,minLength:parseInt(y)||void 0}}));d.appendChild(l),d.appendChild(u),e.appendChild(d);const C=o.createContainer("setting-group mb-3"),i=o.createLabel(this.editor.t("Maximum Length:")),c=o.createInputField("number",this.editor.t("Enter maximum length"),((L=(I=t.validation)==null?void 0:I.maxLength)==null?void 0:L.toString())||"",y=>this.onUpdate(t.id,{validation:{...t.validation,maxLength:parseInt(y)||void 0}}));return C.appendChild(i),C.appendChild(c),e.appendChild(C),e}}exports.FieldEditor=M;