@erpsquad/common 1.8.75 → 1.8.77

package/dist/views/template-editor/components/SectionFlowEditor/index.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../EditorHeader/index.js"),a=require("../EditorCanvas/index.js"),o=require("../../../../node_modules/@dnd-kit/core/dist/core.esm/index.js"),n=require("../../../../node_modules/notistack/notistack.esm/index.js"),d=require("react-router-dom"),r=require("../../../../utils/common/index.js"),s=require("../../../../api-client/api.system-feature/api/index.js"),l=require("../../utils/common/index.js"),c=require("../../utils/constant/index.js"),u=require("lodash"),p=require("../../../../utils/format-text/index.js"),f=require("../../template-name-modal/template-name-modal/index.js"),h=require("../../../../node_modules/@mui/material/Box/Box/index.js"),m=require("../../../../node_modules/uuid/dist/esm-browser/v4/index.js");function y(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=/* @__PURE__ */y(u);exports.default=({modulePath:u,module:y,type:g})=>{const{id:b,template_id:S}=d.useParams(),{state:x}=d.useLocation(),[_,k]=t.useState([]),[$,I]=t.useState([]),[j,q]=t.useState([]),[W,w]=t.useState(null),[G,H]=t.useState(null),[P,F]=t.useState(null),[z,C]=t.useState(!1),[E,T]=t.useState([]),[D,K]=t.useState("main"),[B,V]=t.useState(!1),[L,O]=t.useState(null),[M,N]=t.useState(""),R=l.templateRoutes(u,g),[A,U]=t.useState([]),[J,Q]=t.useState(null),X=e=>"header"===e&&B?$:"footer"===e&&B?j:_,Y=e=>"header"===e&&B?I:"footer"===e&&B?q:k;t.useEffect(()=>{var e;document.body.style.overflow="hidden";const t=null==(e=document.getElementsByTagName("main"))?void 0:e[0];return t&&(t.style.marginTop="4.125rem"),()=>{document.body.removeAttribute("style")}},[]),t.useEffect(()=>{(async()=>{var e,t,i,a;if(b){const i=r.getToken(),a=await s.getV1SubjectsId({...i,"x-timezone":(null==(e=i["x-timezone"])?void 0:e.toString())||"",id:b});if("data"in a&&a.data&&"object"==typeof a.data&&"resource"in a.data){const e=a.data.resource,i=r.getToken(),o=await s.getV1FormBuilderRelationalSchemaFieldsName({...i,"x-timezone":(null==(t=i["x-timezone"])?void 0:t.toString())||"",name:e}),n="data"in o&&o.data&&"object"==typeof o.data&&"fields"in o.data&&o.data.fields||[],d="data"in o&&o.data&&"object"==typeof o.data&&"relational_fields"in o.data&&o.data.relational_fields||[],l=n.map(e=>({...e,key:e.key.replace("__replaceKey","")})).filter(e=>{var t;return!e.is_inner_join&&"id"!==e.alias&&!(null==(t=null==e?void 0:e.alias)?void 0:t.includes("_id"))}),c=[],u=[];d.forEach(e=>{if(!e)return;const t=(e.fields||[]).map(t=>{const i={...t,key:t.key.replace("__replaceKey",""),alias:(null==t?void 0:t.templateKey)?null==t?void 0:t.templateKey:t.alias};return"object"===e.type&&e.dataKey&&(i.key=`${e.dataKey}.${i.key}`),i}).filter(e=>!e.is_inner_join&&"id"!==e.alias&&!e.alias.includes("_id")),i=v.default.differenceWith(t,t,(e,t)=>e.key===(null==t?void 0:t.joinKey)).map(t=>({label:p.default(t.alias.replace(/_data$/,"").replace(/_/g," ")),value:"object"===e.type&&e.dataKey?`${e.dataKey}.${t.alias.replace(/ /g,"_").toLowerCase()}`:t.alias.replace(/ /g,"_").toLowerCase()}));"object"===e.type?u.push(...i):c.push({...e,fields:i})});const f=[...l.map(e=>{const t=(null==e?void 0:e.alias)||(null==e?void 0:e.key),i=p.default(t.replace(/_data$/,"").replace(/_/g," "));return{label:i,value:i.replace(/ /g,"_").toLowerCase()}}),...u],h=v.default.uniqBy(f,"value");T(h),U(c)}}if(S){const e=r.getToken(),t=await s.getV1TemplatesId({...e,"x-timezone":(null==(i=e["x-timezone"])?void 0:i.toString())||"",id:S}),a=("data"in t&&t.data&&"object"==typeof t.data&&"sections"in t.data&&t.data.sections||[]).map(e=>({...e,id:e.id||`section-${m.default()}`}));Q("data"in t&&t.data?t.data:null),k(a)}if(null==x?void 0:x.company_id){const e=r.getToken(),t=await s.getV1TemplateHeaderFooterCompanyIdHeaderFooter({...e,"x-timezone":(null==(a=e["x-timezone"])?void 0:a.toString())||"",company_id:x.company_id}),i="data"in t&&t.data&&"object"==typeof t.data?t.data:null;N((null==i?void 0:i._id)||"");const o=(null==i?void 0:i.header_sections)||[],n=(null==i?void 0:i.footer_sections)||[],d=o.map(e=>({...e,id:e.id||`header-section-${m.default()}`})),l=n.map(e=>({...e,id:e.id||`footer-section-${m.default()}`}));I(d),q(l)}})()},[S,b,null==x?void 0:x.company_id]);const Z=(e,t={})=>{let i="";const a=c.initialStyles[e]||{},o=l.generateInlineStyles(a),n="header"===D&&B?"header-":"footer"===D&&B?"footer-":"";switch(e){case"heading":i=`<h1 style="${o}">Heading 1</h1>`;break;case"heading-2":i=`<h2 style="${o}">Heading 2</h2>`;break;case"heading-3":i=`<h3 style="${o}">Heading 3</h3>`;break;case"heading-4":i=`<h4 style="${o}">Heading 4</h4>`;break;case"text":i=`<p style="${o}">Hello, enter your text here...</p>`;break;case"image":i=`<img src="${t.src}" alt="${t.alt}" style="${o};" />`;break;case"buttons":t.text=(null==t?void 0:t.text)||"Button text",i=`<button style="${o}">${t.text}</button>`;break;case"divider":i=`<hr style="${o}" />`;break;case"table":const e=a,{border:n,borderStyle:d,borderColor:r,...s}=e,c=l.generateInlineStyles(e.is_bordered?e:s),u=l.generateInlineStyles(e.tHead),p=l.generateInlineStyles(e.tBody),f=l.generateInlineStyles({...e.thCells,border:n,borderStyle:d,borderColor:r}),h=l.generateInlineStyles({...e.tbCells,border:n,borderStyle:d,borderColor:r});i=`\n          <table style="${c}">\n            <thead style="${u}">\n              <tr style="background-color: #f5f5f5;">\n                <th style="${f}"></th>\n                <th style="${f}"></th>\n                <th style="${f}"></th>\n              </tr>\n            </thead>\n            <tbody style="${p}">\n              <tr>\n                <td style="${h}"></td>\n                <td style="${h}"></td>\n                <td style="${h}"></td>\n              </tr>\n            </tbody>\n          </table>\n        `;break;case"signature":i=`<div style="${o}">Signature: <input type='text' style="border:0; border-bottom:1px solid black" class='signature-input'/></div>`;break;case"qr-code":t.placeholder=(null==t?void 0:t.placeholder)||"{{qr_data}}",i=`<div style="background-color: #f5f5f5; padding: 16px; text-align: center; color: #666666;">${t.placeholder}</div>`;break;case"bar-code":t.placeholder=(null==t?void 0:t.placeholder)||"{{barcode_data}}",i=`<div style="background-color: #f5f5f5; padding: 16px; text-align: center; color: #666666;">${t.placeholder}</div>`;break;default:i='<p style="font-size: 16px; color: #333333; line-height: 1.5;">New section</p>'}return l.extractStyles(i),{id:`${n}section-${m.default()}`,content:i,type:e,attributes:{...t||{},styles:a},is_edited_from_source:!1}},ee=async()=>{if(0===_.length&&0===$.length&&0===j.length)return void n.enqueueSnackbar("Please add at least one section");const e=l.generateEmailPreview(_,$,j,!0);try{const t={...r.getToken(),...S?{id:S}:{subject_id:b,is_default:!1,company_id:x.company_id},sections:_,contents:e};O(t)}catch(t){const e=r.getErrorMessage(null==t?void 0:t.message);n.enqueueSnackbar(e,{variant:"error"})}};/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../EditorHeader/index.js"),a=require("../EditorCanvas/index.js"),o=require("../../../../node_modules/@dnd-kit/core/dist/core.esm/index.js"),n=require("../../../../node_modules/notistack/notistack.esm/index.js"),d=require("react-router-dom"),r=require("../../../../utils/common/index.js"),s=require("../../../../api-client/api.system-feature/api/index.js"),l=require("../../utils/common/index.js"),c=require("../../utils/constant/index.js"),u=require("lodash"),p=require("../../../../utils/format-text/index.js"),f=require("../../template-name-modal/template-name-modal/index.js"),h=require("../../../../node_modules/@mui/material/Box/Box/index.js"),m=require("../../../../node_modules/uuid/dist/esm-browser/v4/index.js");function y(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=/* @__PURE__ */y(u);exports.default=({modulePath:u,module:y,type:g})=>{const{id:b,template_id:S}=d.useParams(),{state:x}=d.useLocation(),[_,k]=t.useState([]),[$,I]=t.useState([]),[j,q]=t.useState([]),[W,w]=t.useState(null),[G,H]=t.useState(null),[P,T]=t.useState(null),[F,z]=t.useState(!1),[C,E]=t.useState([]),[D,K]=t.useState("main"),[B,V]=t.useState(!1),[L,O]=t.useState(null),[M,N]=t.useState(""),R=l.templateRoutes(u,g),[A,U]=t.useState([]),[J,Q]=t.useState(null),X=e=>"header"===e&&B?$:"footer"===e&&B?j:_,Y=e=>"header"===e&&B?I:"footer"===e&&B?q:k;t.useEffect(()=>{var e;document.body.style.overflow="hidden";const t=null==(e=document.getElementsByTagName("main"))?void 0:e[0];return t&&(t.style.marginTop="4.125rem"),()=>{document.body.removeAttribute("style")}},[]),t.useEffect(()=>{(async()=>{var e,t,i,a;if(b){const i=r.getToken(),a=await s.getV1SubjectsId({...i,"x-timezone":(null==(e=i["x-timezone"])?void 0:e.toString())||"",id:b});if("data"in a&&a.data&&"object"==typeof a.data&&"resource"in a.data){const e=a.data.resource,i=r.getToken(),o=await s.getV1FormBuilderRelationalSchemaFieldsName({...i,"x-timezone":(null==(t=i["x-timezone"])?void 0:t.toString())||"",name:e}),n="data"in o&&o.data&&"object"==typeof o.data&&"fields"in o.data&&o.data.fields||[],d="data"in o&&o.data&&"object"==typeof o.data&&"relational_fields"in o.data&&o.data.relational_fields||[],l=n.map(e=>({...e,key:e.key.replace("__replaceKey","")})).filter(e=>{var t;return!e.is_inner_join&&"id"!==e.alias&&!(null==(t=null==e?void 0:e.alias)?void 0:t.includes("_id"))}),c=[],u=[];d.forEach(e=>{if(!e)return;const t=(e.fields||[]).map(t=>{const i={...t,key:t.key.replace("__replaceKey",""),alias:(null==t?void 0:t.templateKey)?null==t?void 0:t.templateKey:t.alias};return"object"===e.type&&e.dataKey&&(i.key=`${e.dataKey}.${i.key}`),i}).filter(e=>!e.is_inner_join&&"id"!==e.alias&&!e.alias.includes("_id")),i=v.default.differenceWith(t,t,(e,t)=>e.key===(null==t?void 0:t.joinKey)).map(t=>({label:p.formatText(t.alias.replace(/_data$/,"").replace(/_/g," ")),value:"object"===e.type&&e.dataKey?`${e.dataKey}.${t.alias.replace(/ /g,"_").toLowerCase()}`:t.alias.replace(/ /g,"_").toLowerCase()}));"object"===e.type?u.push(...i):c.push({...e,fields:i})});const f=[...l.map(e=>{const t=(null==e?void 0:e.alias)||(null==e?void 0:e.key),i=p.formatText(t.replace(/_data$/,"").replace(/_/g," "));return{label:i,value:i.replace(/ /g,"_").toLowerCase()}}),...u],h=v.default.uniqBy(f,"value");E(h),U(c)}}if(S){const e=r.getToken(),t=await s.getV1TemplatesId({...e,"x-timezone":(null==(i=e["x-timezone"])?void 0:i.toString())||"",id:S}),a=("data"in t&&t.data&&"object"==typeof t.data&&"sections"in t.data&&t.data.sections||[]).map(e=>({...e,id:e.id||`section-${m.default()}`}));Q("data"in t&&t.data?t.data:null),k(a)}if(null==x?void 0:x.company_id){const e=r.getToken(),t=await s.getV1TemplateHeaderFooterCompanyIdHeaderFooter({...e,"x-timezone":(null==(a=e["x-timezone"])?void 0:a.toString())||"",company_id:x.company_id}),i="data"in t&&t.data&&"object"==typeof t.data?t.data:null;N((null==i?void 0:i._id)||"");const o=(null==i?void 0:i.header_sections)||[],n=(null==i?void 0:i.footer_sections)||[],d=o.map(e=>({...e,id:e.id||`header-section-${m.default()}`})),l=n.map(e=>({...e,id:e.id||`footer-section-${m.default()}`}));I(d),q(l)}})()},[S,b,null==x?void 0:x.company_id]);const Z=(e,t={})=>{let i="";const a=c.initialStyles[e]||{},o=l.generateInlineStyles(a),n="header"===D&&B?"header-":"footer"===D&&B?"footer-":"";switch(e){case"heading":i=`<h1 style="${o}">Heading 1</h1>`;break;case"heading-2":i=`<h2 style="${o}">Heading 2</h2>`;break;case"heading-3":i=`<h3 style="${o}">Heading 3</h3>`;break;case"heading-4":i=`<h4 style="${o}">Heading 4</h4>`;break;case"text":i=`<p style="${o}">Hello, enter your text here...</p>`;break;case"image":i=`<img src="${t.src}" alt="${t.alt}" style="${o};" />`;break;case"buttons":t.text=(null==t?void 0:t.text)||"Button text",i=`<button style="${o}">${t.text}</button>`;break;case"divider":i=`<hr style="${o}" />`;break;case"table":const e=a,{border:n,borderStyle:d,borderColor:r,...s}=e,c=l.generateInlineStyles(e.is_bordered?e:s),u=l.generateInlineStyles(e.tHead),p=l.generateInlineStyles(e.tBody),f=l.generateInlineStyles({...e.thCells,border:n,borderStyle:d,borderColor:r}),h=l.generateInlineStyles({...e.tbCells,border:n,borderStyle:d,borderColor:r});i=`\n          <table style="${c}">\n            <thead style="${u}">\n              <tr style="background-color: #f5f5f5;">\n                <th style="${f}"></th>\n                <th style="${f}"></th>\n                <th style="${f}"></th>\n              </tr>\n            </thead>\n            <tbody style="${p}">\n              <tr>\n                <td style="${h}"></td>\n                <td style="${h}"></td>\n                <td style="${h}"></td>\n              </tr>\n            </tbody>\n          </table>\n        `;break;case"signature":i=`<div style="${o}">Signature: <input type='text' style="border:0; border-bottom:1px solid black" class='signature-input'/></div>`;break;case"qr-code":t.placeholder=(null==t?void 0:t.placeholder)||"{{qr_data}}",i=`<div style="background-color: #f5f5f5; padding: 16px; text-align: center; color: #666666;">${t.placeholder}</div>`;break;case"bar-code":t.placeholder=(null==t?void 0:t.placeholder)||"{{barcode_data}}",i=`<div style="background-color: #f5f5f5; padding: 16px; text-align: center; color: #666666;">${t.placeholder}</div>`;break;default:i='<p style="font-size: 16px; color: #333333; line-height: 1.5;">New section</p>'}return l.extractStyles(i),{id:`${n}section-${m.default()}`,content:i,type:e,attributes:{...t||{},styles:a},is_edited_from_source:!1}},ee=async()=>{if(0===_.length&&0===$.length&&0===j.length)return void n.enqueueSnackbar("Please add at least one section");const e=l.generateEmailPreview(_,$,j,!0);try{const t={...r.getToken(),...S?{id:S}:{subject_id:b,is_default:!1,company_id:x.company_id},sections:_,contents:e};O(t)}catch(t){const e=r.getErrorMessage(null==t?void 0:t.message);n.enqueueSnackbar(e,{variant:"error"})}};/* @__PURE__ */
 return e.jsxs(h.default,{sx:{display:"flex",flexDirection:"column",height:"100vh"},children:[
-/* @__PURE__ */e.jsx(i.default,{onPreview:()=>C(!z),onSave:ee,preview:z,sections:_,isEditingHeaderFooter:B,setIsEditingHeaderFooter:()=>{V(!B),B&&K("main")},onSaveHeaderFooter:async()=>{var e,t;if(0===_.length&&0===$.length&&0===j.length)return void n.enqueueSnackbar("Please add at least one section",{variant:"error"});if(!(null==x?void 0:x.company_id))return void n.enqueueSnackbar("Company has not been selected",{variant:"error"});const i=`${l.generateHeaderFooterPreview($,"header")}${l.generateHeaderFooterPreview(j,"footer")}`,a=e=>({id:e.id,content:e.content,type:e.type,isSplitPair:e.isSplitPair,splitGroupId:e.splitGroupId,splitWidth:void 0!==e.splitWidth?String(e.splitWidth):void 0}),o=$.map(a),d=j.map(a);try{if(M){const t=r.getToken();200===(await s.patchV1TemplateHeaderFooterId({...t,"x-timezone":(null==(e=t["x-timezone"])?void 0:e.toString())||"",id:M,header_sections:o,footer_sections:d,contents:i})).status_code&&(n.enqueueSnackbar("Header/Footer saved successfully",{variant:"success"}),V(!1))}else{const e=r.getToken();200===(await s.postV1TemplateHeaderFooter({...e,"x-timezone":(null==(t=e["x-timezone"])?void 0:t.toString())||"",header_sections:o,footer_sections:d,contents:i,company_id:x.company_id})).status_code&&(n.enqueueSnackbar("Header/Footer saved successfully",{variant:"success"}),V(!1))}}catch(c){const e=r.getErrorMessage(null==c?void 0:c.message);n.enqueueSnackbar(e,{variant:"error"})}},modulePath:u,type:g,mode:S?"edit":"add",templateData:J}),
-/* @__PURE__ */e.jsx(h.default,{sx:{display:"flex",flex:1,overflow:"hidden"},children:/* @__PURE__ */e.jsx(o.DndContext,{onDragStart:e=>{const{active:t}=e;w(t.id)},onDragOver:e=>{const{over:t}=e;t?("header-canvas"===t.id&&B?K("header"):"footer-canvas"===t.id&&B?K("footer"):"main-canvas"===t.id&&K("main"),"header-canvas"!==t.id&&"main-canvas"!==t.id&&"footer-canvas"!==t.id&&F(t.id)):F(null)},onDragEnd:e=>{var t;const{active:i,over:a}=e;if(w(null),F(null),!a)return;let o=_,d=k;if(("header-canvas"===a.id||(null==P?void 0:P.startsWith("header-")))&&B?(o=$,d=I,K("header")):("footer-canvas"===a.id||(null==P?void 0:P.startsWith("footer-")))&&B?(o=j,d=q,K("footer")):K("main"),"image"===(null==(t=i.data.current)?void 0:t.type)){const e=i.data.current.imageUrl,t=Z("image",{src:e,alt:"Image"}),r=o.findIndex(e=>e.id===a.id),s=[...o];return"header-canvas"===a.id||"main-canvas"===a.id||"footer-canvas"===a.id||-1===r?d([...o,t]):(s.splice(r,0,t),d(s)),void n.enqueueSnackbar("Added uploaded image section")}if("string"==typeof i.id&&i.id.startsWith("sidebar-")){const e=i.id.replace("sidebar-",""),t=Z(e),n=o.findIndex(e=>e.id===a.id);if(-1!==n&&"header-canvas"!==a.id&&"main-canvas"!==a.id&&"footer-canvas"!==a.id){const i=o[n];if(!i.content||i.content.includes("Click to add")||i.content.includes("enter your text")){const a=[...o];a[n]={...i,type:e,content:t.content},d(a)}else{const e=[...o];e.splice(n,0,t),d(e)}}else d([...o,t]);return}if(i.id!==a.id&&"string"==typeof i.id&&"string"==typeof a.id){let e=[],t=null;i.id.startsWith("header-")&&B?(e=$,t=I):i.id.startsWith("footer-")&&B?(e=j,t=q):(e=_,t=k);const n=i.id.replace(/^(header-|footer-)/,""),r=e.findIndex(e=>e.id===n||e.id===i.id);let s=o.findIndex(e=>e.id===String(a.id).replace(/^(header-|footer-)/,""));if("header-canvas"!==a.id&&"main-canvas"!==a.id&&"footer-canvas"!==a.id||(s=o.length),-1!==r&&-1!==s)if(e===o){const i=[...e],[a]=i.splice(r,1);if(a.isSplitPair&&a.splitGroupId){const o=a.splitGroupId,n=[a,...e.filter(e=>e.splitGroupId===o&&e.id!==a.id)],d=i.filter(e=>e.splitGroupId!==o);d.splice(s,0,...n),t(d)}else i.splice(s,0,a),t(i)}else{const i=e[r],n=[...e];n.splice(r,1),t(n);const l=[...o],c={...i};("header-canvas"===a.id||a.id.startsWith("header-"))&&B?c.id.startsWith("header-")||(c.id=`header-${c.id}`):("footer-canvas"===a.id||a.id.startsWith("footer-"))&&B?c.id.startsWith("footer-")||(c.id=`footer-${c.id}`):c.id=c.id.replace(/^(header-|footer-)/,""),l.splice(s,0,c),d(l)}}},collisionDetection:o.pointerWithin,children:/* @__PURE__ */e.jsx(a.default,{sections:_,headerSections:$,footerSections:j,activeId:W,overSection:P,selectedSection:G,onSelectSection:H,onUpdateSection:(e,t,i)=>{const a=X(i),o=Y(i),n=e.replace(/^(header-|footer-)/,"");o(a.map(i=>i.id===n||i.id===e?{...i,...t}:i))},onSplitSection:(e,t,i,a)=>{const o=X(a),n=Y(a),d=e.replace(/^(header-|footer-)/,""),r=o.findIndex(t=>t.id===d||t.id===e);if(-1===r)return;const s=o[r],l=[...o],c="header"===a?"header-":"footer"===a?"footer-":"";if(s.isSplitPair&&s.splitGroupId){const e=s.splitGroupId,a=100/(l.filter(t=>t.splitGroupId===e).length+1);l[r]={...s,content:t,splitWidth:a};const o={id:`${c}section-${m.default()}`,content:i,type:s.type,isSplitPair:!0,splitGroupId:e,splitWidth:a,attributes:s.attributes,is_edited_from_source:!1};l.splice(r+1,0,o);for(let t=0;t<l.length;t++)l[t].splitGroupId===e&&(l[t].splitWidth=a)}else{const e=m.default(),a=50;l[r]={...s,content:t,isSplitPair:!0,splitGroupId:e,splitWidth:a};const o={id:`${c}section-${m.default()}`,content:i,type:s.type,isSplitPair:!0,splitGroupId:e,splitWidth:a,attributes:s.attributes,is_edited_from_source:!1};l.splice(r+1,0,o)}n(l)},onDeleteSection:(e,t)=>{const i=X(t),a=Y(t),o=e.replace(/^(header-|footer-)/,""),n=i.find(t=>t.id===o||t.id===e);if(n){if(n.isSplitPair&&n.splitGroupId){const t=i.filter(e=>e.splitGroupId===n.splitGroupId);if(t.length<=2){const n=t.find(t=>t.id!==o&&t.id!==e);n&&(n.isSplitPair=!1,n.splitGroupId=void 0,n.splitWidth=void 0),a(i.filter(t=>t.id!==o&&t.id!==e))}else{const d=100/t.filter(t=>t.id!==o&&t.id!==e).length;a(i.filter(t=>t.id!==o&&t.id!==e).map(e=>e.splitGroupId===n.splitGroupId?{...e,splitWidth:d}:e))}}else a(i.filter(t=>t.id!==o&&t.id!==e));G===e&&H(null)}},preview:z,handleSave:ee,placeholders:E,isEditingHeaderFooter:B,relation_table:A})})}),null!==L&&/* @__PURE__ */e.jsx(f.default,{isOpen:null!==L,setIsOpen:()=>O(null),payload:L,templateRoutes:R,mode:S?"edit":"add",templateData:J})]})};
+/* @__PURE__ */e.jsx(i.default,{onPreview:()=>z(!F),onSave:ee,preview:F,sections:_,isEditingHeaderFooter:B,setIsEditingHeaderFooter:()=>{V(!B),B&&K("main")},onSaveHeaderFooter:async()=>{var e,t;if(0===_.length&&0===$.length&&0===j.length)return void n.enqueueSnackbar("Please add at least one section",{variant:"error"});if(!(null==x?void 0:x.company_id))return void n.enqueueSnackbar("Company has not been selected",{variant:"error"});const i=`${l.generateHeaderFooterPreview($,"header")}${l.generateHeaderFooterPreview(j,"footer")}`,a=e=>({id:e.id,content:e.content,type:e.type,isSplitPair:e.isSplitPair,splitGroupId:e.splitGroupId,splitWidth:void 0!==e.splitWidth?String(e.splitWidth):void 0}),o=$.map(a),d=j.map(a);try{if(M){const t=r.getToken();200===(await s.patchV1TemplateHeaderFooterId({...t,"x-timezone":(null==(e=t["x-timezone"])?void 0:e.toString())||"",id:M,header_sections:o,footer_sections:d,contents:i})).status_code&&(n.enqueueSnackbar("Header/Footer saved successfully",{variant:"success"}),V(!1))}else{const e=r.getToken();200===(await s.postV1TemplateHeaderFooter({...e,"x-timezone":(null==(t=e["x-timezone"])?void 0:t.toString())||"",header_sections:o,footer_sections:d,contents:i,company_id:x.company_id})).status_code&&(n.enqueueSnackbar("Header/Footer saved successfully",{variant:"success"}),V(!1))}}catch(c){const e=r.getErrorMessage(null==c?void 0:c.message);n.enqueueSnackbar(e,{variant:"error"})}},modulePath:u,type:g,mode:S?"edit":"add",templateData:J}),
+/* @__PURE__ */e.jsx(h.default,{sx:{display:"flex",flex:1,overflow:"hidden"},children:/* @__PURE__ */e.jsx(o.DndContext,{onDragStart:e=>{const{active:t}=e;w(t.id)},onDragOver:e=>{const{over:t}=e;t?("header-canvas"===t.id&&B?K("header"):"footer-canvas"===t.id&&B?K("footer"):"main-canvas"===t.id&&K("main"),"header-canvas"!==t.id&&"main-canvas"!==t.id&&"footer-canvas"!==t.id&&T(t.id)):T(null)},onDragEnd:e=>{var t;const{active:i,over:a}=e;if(w(null),T(null),!a)return;let o=_,d=k;if(("header-canvas"===a.id||(null==P?void 0:P.startsWith("header-")))&&B?(o=$,d=I,K("header")):("footer-canvas"===a.id||(null==P?void 0:P.startsWith("footer-")))&&B?(o=j,d=q,K("footer")):K("main"),"image"===(null==(t=i.data.current)?void 0:t.type)){const e=i.data.current.imageUrl,t=Z("image",{src:e,alt:"Image"}),r=o.findIndex(e=>e.id===a.id),s=[...o];return"header-canvas"===a.id||"main-canvas"===a.id||"footer-canvas"===a.id||-1===r?d([...o,t]):(s.splice(r,0,t),d(s)),void n.enqueueSnackbar("Added uploaded image section")}if("string"==typeof i.id&&i.id.startsWith("sidebar-")){const e=i.id.replace("sidebar-",""),t=Z(e),n=o.findIndex(e=>e.id===a.id);if(-1!==n&&"header-canvas"!==a.id&&"main-canvas"!==a.id&&"footer-canvas"!==a.id){const i=o[n];if(!i.content||i.content.includes("Click to add")||i.content.includes("enter your text")){const a=[...o];a[n]={...i,type:e,content:t.content},d(a)}else{const e=[...o];e.splice(n,0,t),d(e)}}else d([...o,t]);return}if(i.id!==a.id&&"string"==typeof i.id&&"string"==typeof a.id){let e=[],t=null;i.id.startsWith("header-")&&B?(e=$,t=I):i.id.startsWith("footer-")&&B?(e=j,t=q):(e=_,t=k);const n=i.id.replace(/^(header-|footer-)/,""),r=e.findIndex(e=>e.id===n||e.id===i.id);let s=o.findIndex(e=>e.id===String(a.id).replace(/^(header-|footer-)/,""));if("header-canvas"!==a.id&&"main-canvas"!==a.id&&"footer-canvas"!==a.id||(s=o.length),-1!==r&&-1!==s)if(e===o){const i=[...e],[a]=i.splice(r,1);if(a.isSplitPair&&a.splitGroupId){const o=a.splitGroupId,n=[a,...e.filter(e=>e.splitGroupId===o&&e.id!==a.id)],d=i.filter(e=>e.splitGroupId!==o);d.splice(s,0,...n),t(d)}else i.splice(s,0,a),t(i)}else{const i=e[r],n=[...e];n.splice(r,1),t(n);const l=[...o],c={...i};("header-canvas"===a.id||a.id.startsWith("header-"))&&B?c.id.startsWith("header-")||(c.id=`header-${c.id}`):("footer-canvas"===a.id||a.id.startsWith("footer-"))&&B?c.id.startsWith("footer-")||(c.id=`footer-${c.id}`):c.id=c.id.replace(/^(header-|footer-)/,""),l.splice(s,0,c),d(l)}}},collisionDetection:o.pointerWithin,children:/* @__PURE__ */e.jsx(a.default,{sections:_,headerSections:$,footerSections:j,activeId:W,overSection:P,selectedSection:G,onSelectSection:H,onUpdateSection:(e,t,i)=>{const a=X(i),o=Y(i),n=e.replace(/^(header-|footer-)/,"");o(a.map(i=>i.id===n||i.id===e?{...i,...t}:i))},onSplitSection:(e,t,i,a)=>{const o=X(a),n=Y(a),d=e.replace(/^(header-|footer-)/,""),r=o.findIndex(t=>t.id===d||t.id===e);if(-1===r)return;const s=o[r],l=[...o],c="header"===a?"header-":"footer"===a?"footer-":"";if(s.isSplitPair&&s.splitGroupId){const e=s.splitGroupId,a=100/(l.filter(t=>t.splitGroupId===e).length+1);l[r]={...s,content:t,splitWidth:a};const o={id:`${c}section-${m.default()}`,content:i,type:s.type,isSplitPair:!0,splitGroupId:e,splitWidth:a,attributes:s.attributes,is_edited_from_source:!1};l.splice(r+1,0,o);for(let t=0;t<l.length;t++)l[t].splitGroupId===e&&(l[t].splitWidth=a)}else{const e=m.default(),a=50;l[r]={...s,content:t,isSplitPair:!0,splitGroupId:e,splitWidth:a};const o={id:`${c}section-${m.default()}`,content:i,type:s.type,isSplitPair:!0,splitGroupId:e,splitWidth:a,attributes:s.attributes,is_edited_from_source:!1};l.splice(r+1,0,o)}n(l)},onDeleteSection:(e,t)=>{const i=X(t),a=Y(t),o=e.replace(/^(header-|footer-)/,""),n=i.find(t=>t.id===o||t.id===e);if(n){if(n.isSplitPair&&n.splitGroupId){const t=i.filter(e=>e.splitGroupId===n.splitGroupId);if(t.length<=2){const n=t.find(t=>t.id!==o&&t.id!==e);n&&(n.isSplitPair=!1,n.splitGroupId=void 0,n.splitWidth=void 0),a(i.filter(t=>t.id!==o&&t.id!==e))}else{const d=100/t.filter(t=>t.id!==o&&t.id!==e).length;a(i.filter(t=>t.id!==o&&t.id!==e).map(e=>e.splitGroupId===n.splitGroupId?{...e,splitWidth:d}:e))}}else a(i.filter(t=>t.id!==o&&t.id!==e));G===e&&H(null)}},preview:F,handleSave:ee,placeholders:C,isEditingHeaderFooter:B,relation_table:A})})}),null!==L&&/* @__PURE__ */e.jsx(f.default,{isOpen:null!==L,setIsOpen:()=>O(null),payload:L,templateRoutes:R,mode:S?"edit":"add",templateData:J})]})};
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/components/SectionFlowEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/SectionFlowEditor.tsx"],"sourcesContent":["/* eslint-disable no-case-declarations */\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useState, useEffect } from 'react';\nimport EditorHeader from './EditorHeader';\nimport EditorCanvas from './EditorCanvas';\nimport {\n  DndContext,\n  DragEndEvent,\n  DragOverEvent,\n  DragStartEvent,\n  pointerWithin,\n} from '@dnd-kit/core';\nimport { SectionData, ElementType } from '../types/editor';\nimport { v4 as uuidv4 } from 'uuid';\nimport { enqueueSnackbar } from 'notistack';\nimport { Box } from '@mui/material';\nimport { useLocation, useParams } from 'react-router-dom';\nimport { getErrorMessage, getToken } from '../../../utils/common';\nimport { getV1FormBuilderRelationalSchemaFieldsName, getV1SubjectsId, getV1TemplateHeaderFooterCompanyIdHeaderFooter, getV1TemplatesId, patchV1TemplateHeaderFooterId, postV1TemplateHeaderFooter } from '../../../api-client/api.system-feature/api';\nimport { templateRoutes, extractStyles, generateEmailPreview, generateHeaderFooterPreview, generateInlineStyles } from '../utils/common';\nimport { initialStyles } from '../utils/constant';\nimport _ from 'lodash';\nimport formatText from '../../../utils/format-text';\nimport TemplateNameModal from \"../template-name-modal/template-name-modal\";\n\ninterface EnhancedSectionData extends SectionData {\n  isSplitPair?: boolean;\n  splitGroupId?: string;\n  splitWidth?: number;\n}\n\ninterface SectionFlowEditorProps {\n  modulePath: string;\n  module: string;\n  type: string;\n}\n\nconst SectionFlowEditor: React.FC<SectionFlowEditorProps> = ({ modulePath, module, type}) => {\n  const { id, template_id } = useParams();\n  const { state: locationState } = useLocation();\n\n  const [sections, setSections] = useState<EnhancedSectionData[]>([]);\n  const [headerSections, setHeaderSections] = useState<EnhancedSectionData[]>([]);\n  const [footerSections, setFooterSections] = useState<EnhancedSectionData[]>([]);\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [selectedSection, setSelectedSection] = useState<string | null>(null);\n  const [overSection, setOverSection] = useState<string | null>(null);\n  const [preview, setPreview] = useState<boolean>(false);\n  const [placeholders, setPlaceholders] = useState<Record<string, any>[]>([]);\n  const [activeCanvas, setActiveCanvas] = useState<'main' | 'header' | 'footer'>('main');\n  const [isEditingHeaderFooter, setIsEditingHeaderFooter] = useState<boolean>(false);\n  const [payload, setPayload] = useState<any>(null);\n  const [headerFooterId, setHeaderFooterId] = useState<string>('');\n  const ROUTES = templateRoutes(modulePath, type);\n  const [relation_table, setRelationTable] = useState<any[]>([]);\n  const [templateData, setTemplateData] = useState<Record<string, any> | null >(null);\n\n  const handleDragStart = (event: DragStartEvent) => {\n    const { active } = event;\n    setActiveId(active.id as string);\n  };\n\n  const handleDragOver = (event: DragOverEvent) => {\n    const { /* active, */ over } = event;\n\n    if (!over) {\n      setOverSection(null);\n      return;\n    }\n\n    if (over.id === 'header-canvas' && isEditingHeaderFooter) {\n      setActiveCanvas('header');\n    } else if (over.id === 'footer-canvas' && isEditingHeaderFooter) {\n      setActiveCanvas('footer');\n    } else if (over.id === 'main-canvas') {\n      setActiveCanvas('main');\n    }\n\n    if (over.id !== 'header-canvas' && over.id !== 'main-canvas' && over.id !== 'footer-canvas') {\n      setOverSection(over.id as string);\n    }\n  };\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n  \n    setActiveId(null);\n    setOverSection(null);\n  \n    if (!over) return;\n  \n    let targetSections = sections;\n    let setTargetSections = setSections;\n    \n    if ((over.id === 'header-canvas' || overSection?.startsWith('header-')) && isEditingHeaderFooter) {\n      targetSections = headerSections;\n      setTargetSections = setHeaderSections;\n      setActiveCanvas('header');\n    } else if ((over.id === 'footer-canvas' || overSection?.startsWith('footer-')) && isEditingHeaderFooter) {\n      targetSections = footerSections;\n      setTargetSections = setFooterSections;\n      setActiveCanvas('footer');\n    } else {\n      setActiveCanvas('main');\n    }\n  \n    if (active.data.current?.type === 'image') {\n      const imageUrl = active.data.current.imageUrl;\n      const newSection: EnhancedSectionData = createNewSection('image', { src: imageUrl, alt: 'Image' });\n  \n      const overIndex = targetSections.findIndex((section) => section.id === over.id);\n      const newSections = [...targetSections];\n  \n      if (over.id === 'header-canvas' || over.id === 'main-canvas' || over.id === 'footer-canvas' || overIndex === -1) {\n        setTargetSections([...targetSections, newSection]);\n      } else {\n        newSections.splice(overIndex, 0, newSection);\n        setTargetSections(newSections);\n      }\n  \n      enqueueSnackbar('Added uploaded image section');\n      return;\n    }\n  \n    if (typeof active.id === 'string' && active.id.startsWith('sidebar-')) {\n      const type = active.id.replace('sidebar-', '') as ElementType;\n      const newSection = createNewSection(type);\n  \n      const overIndex = targetSections.findIndex((section) => section.id === over.id);\n      const isOverSection = overIndex !== -1;\n  \n      if (!isOverSection || over.id === 'header-canvas' || over.id === 'main-canvas' || over.id === 'footer-canvas') {\n        setTargetSections([...targetSections, newSection]);\n      } else {\n        const targetSection = targetSections[overIndex];\n        const isEmpty =\n          !targetSection.content ||\n          targetSection.content.includes('Click to add') ||\n          targetSection.content.includes('enter your text');\n  \n        if (isEmpty) {\n          const updatedSections = [...targetSections];\n          updatedSections[overIndex] = {\n            ...targetSection,\n            type,\n            content: newSection.content,\n          };\n          setTargetSections(updatedSections);\n          // enqueueSnackbar(`Changed section to ${type}`);\n        } else {\n          const updatedSections = [...targetSections];\n          updatedSections.splice(overIndex, 0, newSection);\n          setTargetSections(updatedSections);\n          // enqueueSnackbar(`Added new ${type} section`);\n        }\n      }\n      return;\n    }\n  \n    if (\n      active.id !== over.id &&\n      typeof active.id === 'string' &&\n      typeof over.id === 'string'\n    ) {\n      let sourceSections: EnhancedSectionData[] = [];\n      let sourceSetSections: React.Dispatch<React.SetStateAction<EnhancedSectionData[]>> | null = null;\n      let canvasId = '';\n      \n      if (active.id.startsWith('header-') && isEditingHeaderFooter) {\n        sourceSections = headerSections;\n        sourceSetSections = setHeaderSections;\n        canvasId = 'header-canvas';\n      } else if (active.id.startsWith('footer-') && isEditingHeaderFooter) {\n        sourceSections = footerSections;\n        sourceSetSections = setFooterSections;\n        canvasId = 'footer-canvas';\n      } else {\n        sourceSections = sections;\n        sourceSetSections = setSections;\n        canvasId = 'main-canvas';\n      }\n      \n      const cleanActiveId = active.id.replace(/^(header-|footer-)/, '');\n      \n      const oldIndex = sourceSections.findIndex((section) => \n        section.id === cleanActiveId || section.id === active.id\n      );\n      \n      let newIndex = targetSections.findIndex((section) => \n        section.id === String(over.id).replace(/^(header-|footer-)/, '')\n      );\n  \n      if (over.id === 'header-canvas' || over.id === 'main-canvas' || over.id === 'footer-canvas') {\n        newIndex = targetSections.length;\n      }\n  \n      if (oldIndex !== -1 && newIndex !== -1) {\n        if (sourceSections === targetSections) {\n          const newSections = [...sourceSections];\n          const [movedSection] = newSections.splice(oldIndex, 1);\n  \n          if (movedSection.isSplitPair && movedSection.splitGroupId) {\n            const groupId = movedSection.splitGroupId;\n            const groupSections = [movedSection, ...sourceSections.filter(\n              s => s.splitGroupId === groupId && s.id !== movedSection.id\n            )];\n  \n            const cleaned = newSections.filter(s => s.splitGroupId !== groupId);\n            cleaned.splice(newIndex, 0, ...groupSections);\n            sourceSetSections(cleaned);\n          } else {\n            newSections.splice(newIndex, 0, movedSection);\n            sourceSetSections(newSections);\n          }\n        } else {\n          const originalSection = sourceSections[oldIndex];\n          \n          const newSourceSections = [...sourceSections];\n          newSourceSections.splice(oldIndex, 1);\n          sourceSetSections(newSourceSections);\n          \n          const newTargetSections = [...targetSections];\n          \n          const movedSection = {...originalSection};\n          \n          if ((over.id === 'header-canvas' || over.id.startsWith('header-')) && isEditingHeaderFooter) {\n            if (!movedSection.id.startsWith('header-')) {\n              movedSection.id = `header-${movedSection.id}`;\n            }\n          } else if ((over.id === 'footer-canvas' || over.id.startsWith('footer-')) && isEditingHeaderFooter) {\n            if (!movedSection.id.startsWith('footer-')) {\n              movedSection.id = `footer-${movedSection.id}`;\n            }\n          } else {\n            movedSection.id = movedSection.id.replace(/^(header-|footer-)/, '');\n          }\n          \n          newTargetSections.splice(newIndex, 0, movedSection);\n          setTargetSections(newTargetSections);\n        }\n      }\n    }\n  };\n\n  const getRelevantSections = (canvasType: string) => {\n    if (canvasType === 'header' && isEditingHeaderFooter) return headerSections;\n    if (canvasType === 'footer' && isEditingHeaderFooter) return footerSections;\n    return sections;\n  };\n\n  const getRelevantSetSections = (canvasType: string) => {\n    if (canvasType === 'header' && isEditingHeaderFooter) return setHeaderSections;\n    if (canvasType === 'footer' && isEditingHeaderFooter) return setFooterSections;\n    return setSections;\n  };\n\n  const handleUpdateSection = (id: string, data: Partial<EnhancedSectionData>, canvasType: string) => {\n    const relevantSections = getRelevantSections(canvasType);\n    const relevantSetSections = getRelevantSetSections(canvasType);\n    \n    const cleanId = id.replace(/^(header-|footer-)/, '');\n    \n    relevantSetSections(\n      relevantSections.map((section) =>\n        section.id === cleanId || section.id === id ? { ...section, ...data } : section\n      )\n    );\n  };\n\n  const handleSplitSection = (id: string, content1: string, content2: string, canvasType: string) => {\n    const relevantSections = getRelevantSections(canvasType);\n    const relevantSetSections = getRelevantSetSections(canvasType);\n    \n    const cleanId = id.replace(/^(header-|footer-)/, '');\n    \n    const index = relevantSections.findIndex((section) => section.id === cleanId || section.id === id);\n    if (index === -1) return;\n\n    const section = relevantSections[index];\n    const newSections = [...relevantSections];\n    \n    const sectionPrefix = canvasType === 'header' ? 'header-' : canvasType === 'footer' ? 'footer-' : '';\n    \n    if (section.isSplitPair && section.splitGroupId) {\n      const splitGroupId = section.splitGroupId;\n      const splitSections = newSections.filter(s => s.splitGroupId === splitGroupId);\n      const totalSections = splitSections.length + 1;\n      const newWidth = 100 / totalSections;\n      \n      newSections[index] = { \n        ...section, \n        content: content1,\n        splitWidth: newWidth\n      };\n\n      const newSection: EnhancedSectionData = {\n        id: `${sectionPrefix}section-${uuidv4()}`,\n        content: content2,\n        type: section.type,\n        isSplitPair: true,\n        splitGroupId: splitGroupId,\n        splitWidth: newWidth,\n        attributes: section.attributes,\n        is_edited_from_source: false\n      };\n\n      newSections.splice(index + 1, 0, newSection);\n      \n      for (let i = 0; i < newSections.length; i++) {\n        if (newSections[i].splitGroupId === splitGroupId) {\n          newSections[i].splitWidth = newWidth;\n        }\n      }\n    } else {\n      const splitGroupId = uuidv4();\n      const initialWidth = 50;\n      \n      newSections[index] = { \n        ...section, \n        content: content1,\n        isSplitPair: true,\n        splitGroupId,\n        splitWidth: initialWidth\n      };\n\n      const newSection: EnhancedSectionData = {\n        id: `${sectionPrefix}section-${uuidv4()}`,\n        content: content2,\n        type: section.type,\n        isSplitPair: true,\n        splitGroupId,\n        splitWidth: initialWidth,\n        attributes: section.attributes,\n        is_edited_from_source: false\n      };\n\n      newSections.splice(index + 1, 0, newSection);\n    }\n    \n    relevantSetSections(newSections);\n    // enqueueSnackbar('Section split successfully');\n  };\n\n  const handleDeleteSection = (id: string, canvasType: string) => {\n    const relevantSections = getRelevantSections(canvasType);\n    const relevantSetSections = getRelevantSetSections(canvasType);\n    \n    const cleanId = id.replace(/^(header-|footer-)/, '');\n    \n    const sectionToDelete = relevantSections.find(s => s.id === cleanId || s.id === id);\n    \n    if (!sectionToDelete) return;\n    \n    if (sectionToDelete.isSplitPair && sectionToDelete.splitGroupId) {\n      const splitSections = relevantSections.filter(s => s.splitGroupId === sectionToDelete.splitGroupId);\n      \n      if (splitSections.length <= 2) {\n        const remainingSection = splitSections.find(s => s.id !== cleanId && s.id !== id);\n        if (remainingSection) {\n          remainingSection.isSplitPair = false;\n          remainingSection.splitGroupId = undefined;\n          remainingSection.splitWidth = undefined;\n        }\n        relevantSetSections(relevantSections.filter(s => s.id !== cleanId && s.id !== id));\n      } else {\n        const remainingSplitSections = splitSections.filter(s => s.id !== cleanId && s.id !== id);\n        const newWidth = 100 / remainingSplitSections.length;\n        \n        const updatedSections = relevantSections.filter(section => section.id !== cleanId && section.id !== id).map(section => {\n          if (section.splitGroupId === sectionToDelete.splitGroupId) {\n            return { ...section, splitWidth: newWidth };\n          }\n          return section;\n        });\n        \n        relevantSetSections(updatedSections);\n        // enqueueSnackbar('Section removed from split group');\n      }\n    } else {\n      relevantSetSections(relevantSections.filter(section => section.id !== cleanId && section.id !== id));\n      // enqueueSnackbar('Section deleted');\n    }\n    \n    if (selectedSection === id) {\n      setSelectedSection(null);\n    }\n  };\n\n  useEffect(() => {\n    document.body.style.overflow = 'hidden';\n    const main = document.getElementsByTagName('main')?.[0];\n    if (main) {\n      main.style.marginTop = '4.125rem';\n    }\n    return () => {\n      document.body.removeAttribute('style');\n    }\n  }, []);\n\nconst getData = async () => {\n  if (id) {\n    const token = getToken();\n    const subjRes = await getV1SubjectsId({ \n      ...token, \n      'x-timezone': token['x-timezone']?.toString() || '',\n      id \n    });\n\n    if ('data' in subjRes && subjRes.data && typeof subjRes.data === 'object' && 'resource' in subjRes.data) {\n      const resource = (subjRes.data as any).resource;\n      const token2 = getToken();\n      const fRes = await getV1FormBuilderRelationalSchemaFieldsName({\n        ...token2,\n        'x-timezone': token2['x-timezone']?.toString() || '',\n        name: resource,\n      });\n      const schemaFields = ('data' in fRes && fRes.data && typeof fRes.data === 'object' && 'fields' in fRes.data) \n        ? ((fRes.data as any).fields || [])\n        : [];\n      const relation_table = ('data' in fRes && fRes.data && typeof fRes.data === 'object' && 'relational_fields' in fRes.data)\n        ? ((fRes.data as any).relational_fields || [])\n        : [];\n\n      // Process main schema fields\n      const updatedFields = schemaFields\n        .map((field) => ({\n          ...field,\n          key: field.key.replace('__replaceKey', ''),\n        }))\n        .filter((field) => !field.is_inner_join && field.alias !== 'id' && !field?.alias?.includes('_id'));\n\n      // Process relation tables - separate array and object types\n      const arrayRelationTables = [];\n      const objectRelationFields = [];\n\n      relation_table.forEach((table) => {\n        if (!table) return;\n\n        const updatedTableFields = (table.fields || []).map((field) => {\n          const updatedField = {\n            ...field,\n            key: field.key.replace('__replaceKey', ''),\n            alias: field?.templateKey ? field?.templateKey : field.alias,\n          };\n\n          // Prepend dataKey to field keys for object types\n          if (table.type === 'object' && table.dataKey) {\n            updatedField.key = `${table.dataKey}.${updatedField.key}`;\n          }\n\n          return updatedField;\n        }).filter(\n          (field) =>\n            !field.is_inner_join &&\n            field.alias !== 'id' &&\n            !field.alias.includes('_id')\n        );\n\n        const uniqueTableFields = _.differenceWith(\n          updatedTableFields,\n          updatedTableFields,\n          (fieldA: any, fieldB: any) => fieldA.key === fieldB?.joinKey\n        );\n\n        const tableFields = uniqueTableFields.map((f: any) => {\n          const field = formatText(f.alias.replace(/_data$/, '').replace(/_/g, ' '));\n          const value = table.type === 'object' && table.dataKey \n            ? `${table.dataKey}.${f.alias.replace(/ /g, '_').toLowerCase()}`\n            : f.alias.replace(/ /g, '_').toLowerCase();\n            \n          return { \n            label: field, \n            value: value \n          };\n        });\n\n        if (table.type === 'object') {\n          // Merge object type fields into main fields\n          objectRelationFields.push(...tableFields);\n        } else {\n          // Keep array types separate\n          arrayRelationTables.push({\n            ...table,\n            fields: tableFields\n          });\n        }\n      });\n\n      // Combine main fields and object relation fields\n      const allFields = [\n        ...updatedFields.map((f) => {\n          const n = f?.alias || f?.key\n          const field = formatText(n.replace(/_data$/, '').replace(/_/g, ' '));\n          return { \n            label: field, \n            value: field.replace(/ /g, '_').toLowerCase() \n          };\n        }),\n        ...objectRelationFields\n      ];\n\n      const uniqueAllFields = _.uniqBy(allFields, 'value');\n\n      setPlaceholders(uniqueAllFields);\n      setRelationTable(arrayRelationTables);\n    }\n  }\n\n  // Rest of the function remains the same...\n  if (template_id) {\n    const token3 = getToken();\n    const res = await getV1TemplatesId({ \n      ...token3, \n      'x-timezone': token3['x-timezone']?.toString() || '',\n      id: template_id \n    });\n    const templateSections = ('data' in res && res.data && typeof res.data === 'object' && 'sections' in res.data)\n      ? ((res.data as any).sections || [])\n      : [];\n    const mainSecs = templateSections.map((s: any) => ({\n      ...s,\n      id: s.id || `section-${uuidv4()}`,\n    }));\n    setTemplateData(('data' in res && res.data) ? res.data as any : null);\n\n    setSections(mainSecs);\n  }\n\n  if (locationState?.company_id) {\n    const token4 = getToken();\n    const res = await getV1TemplateHeaderFooterCompanyIdHeaderFooter({\n      ...token4,\n      'x-timezone': token4['x-timezone']?.toString() || '',\n      company_id: locationState.company_id,\n    });\n    const resData = ('data' in res && res.data && typeof res.data === 'object') ? res.data as any : null;\n    setHeaderFooterId(resData?._id || '');\n    const headerSections = resData?.header_sections || [];\n    const footerSections = resData?.footer_sections || [];\n    const headerSecs = headerSections.map((s) => ({\n      ...s,\n      id: s.id || `header-section-${uuidv4()}`,\n    }));\n    const footerSecs = footerSections.map((s) => ({\n      ...s,\n      id: s.id || `footer-section-${uuidv4()}`,\n    }));\n\n    setHeaderSections(headerSecs);\n    setFooterSections(footerSecs);\n  }\n};\n  \n  useEffect(() => {\n    getData();\n  }, [template_id, id, locationState?.company_id]);\n\n  const createNewSection = (type: ElementType, attrs: Record<string, any> = {}): EnhancedSectionData => {\n    let content = '';\n    const styles = initialStyles[type] || {};\n    const inlineStyles: string = generateInlineStyles(styles);\n\n    const idPrefix = activeCanvas === 'header' && isEditingHeaderFooter ? 'header-' : \n                     activeCanvas === 'footer' && isEditingHeaderFooter ? 'footer-' : '';\n\n    switch (type) {\n      case 'heading':\n        content = `<h1 style=\"${inlineStyles}\">Heading 1</h1>`;\n        break;\n      case 'heading-2':\n        content = `<h2 style=\"${inlineStyles}\">Heading 2</h2>`;\n        break;\n      case 'heading-3':\n        content = `<h3 style=\"${inlineStyles}\">Heading 3</h3>`;\n        break;\n      case 'heading-4':\n        content = `<h4 style=\"${inlineStyles}\">Heading 4</h4>`;\n        break;\n      case 'text':\n        content = `<p style=\"${inlineStyles}\">Hello, enter your text here...</p>`;\n        break;\n      case 'image':\n        content = `<img src=\"${attrs.src}\" alt=\"${attrs.alt}\" style=\"${inlineStyles};\" />`;\n        break;\n      case 'buttons':\n        attrs.text = attrs?.text || 'Button text';\n        content = `<button style=\"${inlineStyles}\">${attrs.text}</button>`;\n        break;\n      case 'divider':\n        content = `<hr style=\"${inlineStyles}\" />`;\n        break;\n      case 'table':\n        const tableStyles = styles as any;\n        const { border, borderStyle, borderColor, ...rest } = tableStyles;\n        const tInlineStyles = generateInlineStyles(tableStyles.is_bordered ? tableStyles : rest);\n        const tHeadInlineStyles: string = generateInlineStyles(tableStyles.tHead);\n        const tBodyInlineStyles: string = generateInlineStyles(tableStyles.tBody);\n        const thCellInlineStyles: string = generateInlineStyles({...tableStyles.thCells, border, borderStyle, borderColor });\n        const tbCellInlineStyles: string = generateInlineStyles({...tableStyles.tbCells, border, borderStyle, borderColor});\n        content = `\n          <table style=\"${tInlineStyles}\">\n            <thead style=\"${tHeadInlineStyles}\">\n              <tr style=\"background-color: #f5f5f5;\">\n                <th style=\"${thCellInlineStyles}\"></th>\n                <th style=\"${thCellInlineStyles}\"></th>\n                <th style=\"${thCellInlineStyles}\"></th>\n              </tr>\n            </thead>\n            <tbody style=\"${tBodyInlineStyles}\">\n              <tr>\n                <td style=\"${tbCellInlineStyles}\"></td>\n                <td style=\"${tbCellInlineStyles}\"></td>\n                <td style=\"${tbCellInlineStyles}\"></td>\n              </tr>\n            </tbody>\n          </table>\n        `;\n        break;\n      case 'signature':\n        content = `<div style=\"${inlineStyles}\">Signature: <input type='text' style=\"border:0; border-bottom:1px solid black\" class='signature-input'/></div>`;\n        break;\n      case 'qr-code':\n        attrs.placeholder = attrs?.placeholder || '{{qr_data}}';\n        content = `<div style=\"background-color: #f5f5f5; padding: 16px; text-align: center; color: #666666;\">${attrs.placeholder}</div>`;\n        break;\n      case 'bar-code':\n        attrs.placeholder = attrs?.placeholder || '{{barcode_data}}';\n        content = `<div style=\"background-color: #f5f5f5; padding: 16px; text-align: center; color: #666666;\">${attrs.placeholder}</div>`;\n        break;\n      default:\n        content = '<p style=\"font-size: 16px; color: #333333; line-height: 1.5;\">New section</p>';\n    }\n\n    let attributes: Record<string, any> = {};\n    attributes = extractStyles(content, type);\n\n    return { \n      id: `${idPrefix}section-${uuidv4()}`, \n      content, \n      type, \n      attributes: {...(attrs || {}), styles},\n      is_edited_from_source: false\n    };\n  };\n\n  const handleSave = async () => {\n    if(sections.length === 0 && headerSections.length === 0 && footerSections.length === 0)  {\n      enqueueSnackbar('Please add at least one section');\n      return;\n    }\n    \n    const mainHtml = generateEmailPreview(sections, headerSections, footerSections, true);\n    try {\n     const p = { \n        ...getToken(), \n        ...(template_id ? { id: template_id } : { subject_id: id, is_default: false, company_id: locationState.company_id }), \n        sections: sections, \n        contents: mainHtml \n      }\n      setPayload(p);\n    } catch (error) {\n      const m = getErrorMessage(error?.message);\n      enqueueSnackbar(m, { variant: 'error' });\n    }\n  };\n  const handleSaveHeaderFooter = async () => {\n    if(sections.length === 0 && headerSections.length === 0 && footerSections.length === 0)  {\n      enqueueSnackbar('Please add at least one section', { variant: 'error' });\n      return;\n    } else if(!locationState?.company_id) {\n      enqueueSnackbar('Company has not been selected', { variant: 'error' });\n      return;\n    }\n    \n    const headerHtml = generateHeaderFooterPreview(headerSections, 'header');\n    const footerHtml = generateHeaderFooterPreview(footerSections, 'footer');\n    const combinedHtml = `${headerHtml}${footerHtml}`;\n    \n    // Convert splitWidth from number to string for API\n    const convertSectionForApi = (section: EnhancedSectionData) => ({\n      id: section.id,\n      content: section.content,\n      type: section.type,\n      isSplitPair: section.isSplitPair,\n      splitGroupId: section.splitGroupId,\n      splitWidth: section.splitWidth !== undefined ? String(section.splitWidth) : undefined,\n    });\n    \n    const convertedHeaderSections = headerSections.map(convertSectionForApi);\n    const convertedFooterSections = footerSections.map(convertSectionForApi);\n    \n    try {\n      if(headerFooterId) {\n        const token5 = getToken();\n        const res = await patchV1TemplateHeaderFooterId({ \n          ...token5,\n          'x-timezone': token5['x-timezone']?.toString() || '',\n          id: headerFooterId, \n          header_sections: convertedHeaderSections, \n          footer_sections: convertedFooterSections, \n          contents: combinedHtml \n        });\n        if(res.status_code === 200) {\n          enqueueSnackbar('Header/Footer saved successfully', { variant: 'success' });\n          setIsEditingHeaderFooter(false);\n        }\n      } else {\n        const token6 = getToken();\n        const res = await postV1TemplateHeaderFooter({ \n          ...token6,\n          'x-timezone': token6['x-timezone']?.toString() || '',\n          header_sections: convertedHeaderSections, \n          footer_sections: convertedFooterSections, \n          contents: combinedHtml, \n          company_id: locationState.company_id\n        });\n        if(res.status_code === 200) {\n          enqueueSnackbar('Header/Footer saved successfully', { variant: 'success' });\n          setIsEditingHeaderFooter(false);\n        }\n      }\n    } catch (error) {\n      const m = getErrorMessage(error?.message);\n      enqueueSnackbar(m, { variant: 'error' });\n    }\n  };\n\n  const toggleHeaderFooterEditing = () => {\n    setIsEditingHeaderFooter(!isEditingHeaderFooter);\n    if (isEditingHeaderFooter) {\n      setActiveCanvas('main');\n    }\n  };\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>\n      <EditorHeader \n        onPreview={() => setPreview(!preview)} \n        onSave={handleSave}\n        preview={preview}\n        sections={sections}\n        isEditingHeaderFooter={isEditingHeaderFooter}\n        setIsEditingHeaderFooter={toggleHeaderFooterEditing}\n        onSaveHeaderFooter={handleSaveHeaderFooter}\n        modulePath={modulePath} \n        type={type}\n        mode={template_id ? 'edit' : 'add'}\n        templateData={templateData}\n      />\n      <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\n        <DndContext\n          onDragStart={handleDragStart}\n          onDragOver={handleDragOver}\n          onDragEnd={handleDragEnd}\n          collisionDetection={pointerWithin}\n        >\n          <EditorCanvas\n            sections={sections}\n            headerSections={headerSections}\n            footerSections={footerSections}\n            activeId={activeId}\n            overSection={overSection}\n            selectedSection={selectedSection}\n            onSelectSection={setSelectedSection}\n            onUpdateSection={handleUpdateSection}\n            onSplitSection={handleSplitSection}\n            onDeleteSection={handleDeleteSection}\n            preview={preview}\n            handleSave={handleSave}\n            placeholders={placeholders}\n            isEditingHeaderFooter={isEditingHeaderFooter}\n            relation_table={relation_table}\n          />\n        </DndContext>\n      </Box>\n      {payload !== null && \n        <TemplateNameModal \n          isOpen={payload !== null} \n          setIsOpen={() => setPayload(null)} \n          payload={payload}\n          templateRoutes={ROUTES}\n          mode={template_id ? 'edit' : 'add'}\n          templateData={templateData}\n        />\n      }\n    </Box>\n  );\n};\n\nexport default SectionFlowEditor;"],"names":["modulePath","module","type","id","template_id","useParams","state","locationState","useLocation","sections","setSections","useState","headerSections","setHeaderSections","footerSections","setFooterSections","activeId","setActiveId","selectedSection","setSelectedSection","overSection","setOverSection","preview","setPreview","placeholders","setPlaceholders","activeCanvas","setActiveCanvas","isEditingHeaderFooter","setIsEditingHeaderFooter","payload","setPayload","headerFooterId","setHeaderFooterId","ROUTES","templateRoutes","relation_table","setRelationTable","templateData","setTemplateData","getRelevantSections","canvasType","getRelevantSetSections","useEffect","document","body","style","overflow","main","_a","getElementsByTagName","marginTop","removeAttribute","async","token","getToken","subjRes","getV1SubjectsId","toString","data","resource","token2","fRes","getV1FormBuilderRelationalSchemaFieldsName","_b","name","schemaFields","fields","relational_fields","updatedFields","map","field","key","replace","filter","is_inner_join","alias","includes","arrayRelationTables","objectRelationFields","forEach","table","updatedTableFields","updatedField","templateKey","dataKey","tableFields","_","differenceWith","fieldA","fieldB","joinKey","f","label","formatText","value","toLowerCase","push","allFields","n","uniqueAllFields","uniqBy","token3","res","getV1TemplatesId","_c","mainSecs","s","uuidv4","company_id","token4","getV1TemplateHeaderFooterCompanyIdHeaderFooter","_d","resData","_id","header_sections","footer_sections","headerSecs","footerSecs","getData","createNewSection","attrs","content","styles","initialStyles","inlineStyles","generateInlineStyles","idPrefix","src","alt","text","tableStyles","border","borderStyle","borderColor","rest","tInlineStyles","is_bordered","tHeadInlineStyles","tHead","tBodyInlineStyles","tBody","thCellInlineStyles","thCells","tbCellInlineStyles","tbCells","placeholder","extractStyles","attributes","is_edited_from_source","handleSave","length","enqueueSnackbar","mainHtml","generateEmailPreview","p","subject_id","is_default","contents","error","m","getErrorMessage","message","variant","jsxs","Box","sx","display","flexDirection","height","children","jsx","EditorHeader","onPreview","onSave","onSaveHeaderFooter","combinedHtml","generateHeaderFooterPreview","convertSectionForApi","section","isSplitPair","splitGroupId","splitWidth","String","convertedHeaderSections","convertedFooterSections","token5","patchV1TemplateHeaderFooterId","status_code","token6","postV1TemplateHeaderFooter","mode","flex","DndContext","onDragStart","event","active","onDragOver","over","onDragEnd","targetSections","setTargetSections","startsWith","current","imageUrl","newSection","overIndex","findIndex","newSections","splice","targetSection","updatedSections","sourceSections","sourceSetSections","cleanActiveId","oldIndex","newIndex","movedSection","groupId","groupSections","cleaned","originalSection","newSourceSections","newTargetSections","collisionDetection","pointerWithin","EditorCanvas","onSelectSection","onUpdateSection","relevantSections","relevantSetSections","cleanId","onSplitSection","content1","content2","index","sectionPrefix","newWidth","i","initialWidth","onDeleteSection","sectionToDelete","find","splitSections","remainingSection","TemplateNameModal","isOpen","setIsOpen"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/SectionFlowEditor.tsx"],"sourcesContent":["/* eslint-disable no-case-declarations */\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useState, useEffect } from 'react';\nimport EditorHeader from './EditorHeader';\nimport EditorCanvas from './EditorCanvas';\nimport {\n  DndContext,\n  DragEndEvent,\n  DragOverEvent,\n  DragStartEvent,\n  pointerWithin,\n} from '@dnd-kit/core';\nimport { SectionData, ElementType } from '../types/editor';\nimport { v4 as uuidv4 } from 'uuid';\nimport { enqueueSnackbar } from 'notistack';\nimport { Box } from '@mui/material';\nimport { useLocation, useParams } from 'react-router-dom';\nimport { getErrorMessage, getToken } from '../../../utils/common';\nimport { getV1FormBuilderRelationalSchemaFieldsName, getV1SubjectsId, getV1TemplateHeaderFooterCompanyIdHeaderFooter, getV1TemplatesId, patchV1TemplateHeaderFooterId, postV1TemplateHeaderFooter } from '../../../api-client/api.system-feature/api';\nimport { templateRoutes, extractStyles, generateEmailPreview, generateHeaderFooterPreview, generateInlineStyles } from '../utils/common';\nimport { initialStyles } from '../utils/constant';\nimport _ from 'lodash';\nimport formatText from '../../../utils/format-text';\nimport TemplateNameModal from \"../template-name-modal/template-name-modal\";\n\ninterface EnhancedSectionData extends SectionData {\n  isSplitPair?: boolean;\n  splitGroupId?: string;\n  splitWidth?: number;\n}\n\ninterface SectionFlowEditorProps {\n  modulePath: string;\n  module: string;\n  type: string;\n}\n\nconst SectionFlowEditor: React.FC<SectionFlowEditorProps> = ({ modulePath, module, type}) => {\n  const { id, template_id } = useParams();\n  const { state: locationState } = useLocation();\n\n  const [sections, setSections] = useState<EnhancedSectionData[]>([]);\n  const [headerSections, setHeaderSections] = useState<EnhancedSectionData[]>([]);\n  const [footerSections, setFooterSections] = useState<EnhancedSectionData[]>([]);\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [selectedSection, setSelectedSection] = useState<string | null>(null);\n  const [overSection, setOverSection] = useState<string | null>(null);\n  const [preview, setPreview] = useState<boolean>(false);\n  const [placeholders, setPlaceholders] = useState<Record<string, any>[]>([]);\n  const [activeCanvas, setActiveCanvas] = useState<'main' | 'header' | 'footer'>('main');\n  const [isEditingHeaderFooter, setIsEditingHeaderFooter] = useState<boolean>(false);\n  const [payload, setPayload] = useState<any>(null);\n  const [headerFooterId, setHeaderFooterId] = useState<string>('');\n  const ROUTES = templateRoutes(modulePath, type);\n  const [relation_table, setRelationTable] = useState<any[]>([]);\n  const [templateData, setTemplateData] = useState<Record<string, any> | null >(null);\n\n  const handleDragStart = (event: DragStartEvent) => {\n    const { active } = event;\n    setActiveId(active.id as string);\n  };\n\n  const handleDragOver = (event: DragOverEvent) => {\n    const { /* active, */ over } = event;\n\n    if (!over) {\n      setOverSection(null);\n      return;\n    }\n\n    if (over.id === 'header-canvas' && isEditingHeaderFooter) {\n      setActiveCanvas('header');\n    } else if (over.id === 'footer-canvas' && isEditingHeaderFooter) {\n      setActiveCanvas('footer');\n    } else if (over.id === 'main-canvas') {\n      setActiveCanvas('main');\n    }\n\n    if (over.id !== 'header-canvas' && over.id !== 'main-canvas' && over.id !== 'footer-canvas') {\n      setOverSection(over.id as string);\n    }\n  };\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n  \n    setActiveId(null);\n    setOverSection(null);\n  \n    if (!over) return;\n  \n    let targetSections = sections;\n    let setTargetSections = setSections;\n    \n    if ((over.id === 'header-canvas' || overSection?.startsWith('header-')) && isEditingHeaderFooter) {\n      targetSections = headerSections;\n      setTargetSections = setHeaderSections;\n      setActiveCanvas('header');\n    } else if ((over.id === 'footer-canvas' || overSection?.startsWith('footer-')) && isEditingHeaderFooter) {\n      targetSections = footerSections;\n      setTargetSections = setFooterSections;\n      setActiveCanvas('footer');\n    } else {\n      setActiveCanvas('main');\n    }\n  \n    if (active.data.current?.type === 'image') {\n      const imageUrl = active.data.current.imageUrl;\n      const newSection: EnhancedSectionData = createNewSection('image', { src: imageUrl, alt: 'Image' });\n  \n      const overIndex = targetSections.findIndex((section) => section.id === over.id);\n      const newSections = [...targetSections];\n  \n      if (over.id === 'header-canvas' || over.id === 'main-canvas' || over.id === 'footer-canvas' || overIndex === -1) {\n        setTargetSections([...targetSections, newSection]);\n      } else {\n        newSections.splice(overIndex, 0, newSection);\n        setTargetSections(newSections);\n      }\n  \n      enqueueSnackbar('Added uploaded image section');\n      return;\n    }\n  \n    if (typeof active.id === 'string' && active.id.startsWith('sidebar-')) {\n      const type = active.id.replace('sidebar-', '') as ElementType;\n      const newSection = createNewSection(type);\n  \n      const overIndex = targetSections.findIndex((section) => section.id === over.id);\n      const isOverSection = overIndex !== -1;\n  \n      if (!isOverSection || over.id === 'header-canvas' || over.id === 'main-canvas' || over.id === 'footer-canvas') {\n        setTargetSections([...targetSections, newSection]);\n      } else {\n        const targetSection = targetSections[overIndex];\n        const isEmpty =\n          !targetSection.content ||\n          targetSection.content.includes('Click to add') ||\n          targetSection.content.includes('enter your text');\n  \n        if (isEmpty) {\n          const updatedSections = [...targetSections];\n          updatedSections[overIndex] = {\n            ...targetSection,\n            type,\n            content: newSection.content,\n          };\n          setTargetSections(updatedSections);\n          // enqueueSnackbar(`Changed section to ${type}`);\n        } else {\n          const updatedSections = [...targetSections];\n          updatedSections.splice(overIndex, 0, newSection);\n          setTargetSections(updatedSections);\n          // enqueueSnackbar(`Added new ${type} section`);\n        }\n      }\n      return;\n    }\n  \n    if (\n      active.id !== over.id &&\n      typeof active.id === 'string' &&\n      typeof over.id === 'string'\n    ) {\n      let sourceSections: EnhancedSectionData[] = [];\n      let sourceSetSections: React.Dispatch<React.SetStateAction<EnhancedSectionData[]>> | null = null;\n      let canvasId = '';\n      \n      if (active.id.startsWith('header-') && isEditingHeaderFooter) {\n        sourceSections = headerSections;\n        sourceSetSections = setHeaderSections;\n        canvasId = 'header-canvas';\n      } else if (active.id.startsWith('footer-') && isEditingHeaderFooter) {\n        sourceSections = footerSections;\n        sourceSetSections = setFooterSections;\n        canvasId = 'footer-canvas';\n      } else {\n        sourceSections = sections;\n        sourceSetSections = setSections;\n        canvasId = 'main-canvas';\n      }\n      \n      const cleanActiveId = active.id.replace(/^(header-|footer-)/, '');\n      \n      const oldIndex = sourceSections.findIndex((section) => \n        section.id === cleanActiveId || section.id === active.id\n      );\n      \n      let newIndex = targetSections.findIndex((section) => \n        section.id === String(over.id).replace(/^(header-|footer-)/, '')\n      );\n  \n      if (over.id === 'header-canvas' || over.id === 'main-canvas' || over.id === 'footer-canvas') {\n        newIndex = targetSections.length;\n      }\n  \n      if (oldIndex !== -1 && newIndex !== -1) {\n        if (sourceSections === targetSections) {\n          const newSections = [...sourceSections];\n          const [movedSection] = newSections.splice(oldIndex, 1);\n  \n          if (movedSection.isSplitPair && movedSection.splitGroupId) {\n            const groupId = movedSection.splitGroupId;\n            const groupSections = [movedSection, ...sourceSections.filter(\n              s => s.splitGroupId === groupId && s.id !== movedSection.id\n            )];\n  \n            const cleaned = newSections.filter(s => s.splitGroupId !== groupId);\n            cleaned.splice(newIndex, 0, ...groupSections);\n            sourceSetSections(cleaned);\n          } else {\n            newSections.splice(newIndex, 0, movedSection);\n            sourceSetSections(newSections);\n          }\n        } else {\n          const originalSection = sourceSections[oldIndex];\n          \n          const newSourceSections = [...sourceSections];\n          newSourceSections.splice(oldIndex, 1);\n          sourceSetSections(newSourceSections);\n          \n          const newTargetSections = [...targetSections];\n          \n          const movedSection = {...originalSection};\n          \n          if ((over.id === 'header-canvas' || over.id.startsWith('header-')) && isEditingHeaderFooter) {\n            if (!movedSection.id.startsWith('header-')) {\n              movedSection.id = `header-${movedSection.id}`;\n            }\n          } else if ((over.id === 'footer-canvas' || over.id.startsWith('footer-')) && isEditingHeaderFooter) {\n            if (!movedSection.id.startsWith('footer-')) {\n              movedSection.id = `footer-${movedSection.id}`;\n            }\n          } else {\n            movedSection.id = movedSection.id.replace(/^(header-|footer-)/, '');\n          }\n          \n          newTargetSections.splice(newIndex, 0, movedSection);\n          setTargetSections(newTargetSections);\n        }\n      }\n    }\n  };\n\n  const getRelevantSections = (canvasType: string) => {\n    if (canvasType === 'header' && isEditingHeaderFooter) return headerSections;\n    if (canvasType === 'footer' && isEditingHeaderFooter) return footerSections;\n    return sections;\n  };\n\n  const getRelevantSetSections = (canvasType: string) => {\n    if (canvasType === 'header' && isEditingHeaderFooter) return setHeaderSections;\n    if (canvasType === 'footer' && isEditingHeaderFooter) return setFooterSections;\n    return setSections;\n  };\n\n  const handleUpdateSection = (id: string, data: Partial<EnhancedSectionData>, canvasType: string) => {\n    const relevantSections = getRelevantSections(canvasType);\n    const relevantSetSections = getRelevantSetSections(canvasType);\n    \n    const cleanId = id.replace(/^(header-|footer-)/, '');\n    \n    relevantSetSections(\n      relevantSections.map((section) =>\n        section.id === cleanId || section.id === id ? { ...section, ...data } : section\n      )\n    );\n  };\n\n  const handleSplitSection = (id: string, content1: string, content2: string, canvasType: string) => {\n    const relevantSections = getRelevantSections(canvasType);\n    const relevantSetSections = getRelevantSetSections(canvasType);\n    \n    const cleanId = id.replace(/^(header-|footer-)/, '');\n    \n    const index = relevantSections.findIndex((section) => section.id === cleanId || section.id === id);\n    if (index === -1) return;\n\n    const section = relevantSections[index];\n    const newSections = [...relevantSections];\n    \n    const sectionPrefix = canvasType === 'header' ? 'header-' : canvasType === 'footer' ? 'footer-' : '';\n    \n    if (section.isSplitPair && section.splitGroupId) {\n      const splitGroupId = section.splitGroupId;\n      const splitSections = newSections.filter(s => s.splitGroupId === splitGroupId);\n      const totalSections = splitSections.length + 1;\n      const newWidth = 100 / totalSections;\n      \n      newSections[index] = { \n        ...section, \n        content: content1,\n        splitWidth: newWidth\n      };\n\n      const newSection: EnhancedSectionData = {\n        id: `${sectionPrefix}section-${uuidv4()}`,\n        content: content2,\n        type: section.type,\n        isSplitPair: true,\n        splitGroupId: splitGroupId,\n        splitWidth: newWidth,\n        attributes: section.attributes,\n        is_edited_from_source: false\n      };\n\n      newSections.splice(index + 1, 0, newSection);\n      \n      for (let i = 0; i < newSections.length; i++) {\n        if (newSections[i].splitGroupId === splitGroupId) {\n          newSections[i].splitWidth = newWidth;\n        }\n      }\n    } else {\n      const splitGroupId = uuidv4();\n      const initialWidth = 50;\n      \n      newSections[index] = { \n        ...section, \n        content: content1,\n        isSplitPair: true,\n        splitGroupId,\n        splitWidth: initialWidth\n      };\n\n      const newSection: EnhancedSectionData = {\n        id: `${sectionPrefix}section-${uuidv4()}`,\n        content: content2,\n        type: section.type,\n        isSplitPair: true,\n        splitGroupId,\n        splitWidth: initialWidth,\n        attributes: section.attributes,\n        is_edited_from_source: false\n      };\n\n      newSections.splice(index + 1, 0, newSection);\n    }\n    \n    relevantSetSections(newSections);\n    // enqueueSnackbar('Section split successfully');\n  };\n\n  const handleDeleteSection = (id: string, canvasType: string) => {\n    const relevantSections = getRelevantSections(canvasType);\n    const relevantSetSections = getRelevantSetSections(canvasType);\n    \n    const cleanId = id.replace(/^(header-|footer-)/, '');\n    \n    const sectionToDelete = relevantSections.find(s => s.id === cleanId || s.id === id);\n    \n    if (!sectionToDelete) return;\n    \n    if (sectionToDelete.isSplitPair && sectionToDelete.splitGroupId) {\n      const splitSections = relevantSections.filter(s => s.splitGroupId === sectionToDelete.splitGroupId);\n      \n      if (splitSections.length <= 2) {\n        const remainingSection = splitSections.find(s => s.id !== cleanId && s.id !== id);\n        if (remainingSection) {\n          remainingSection.isSplitPair = false;\n          remainingSection.splitGroupId = undefined;\n          remainingSection.splitWidth = undefined;\n        }\n        relevantSetSections(relevantSections.filter(s => s.id !== cleanId && s.id !== id));\n      } else {\n        const remainingSplitSections = splitSections.filter(s => s.id !== cleanId && s.id !== id);\n        const newWidth = 100 / remainingSplitSections.length;\n        \n        const updatedSections = relevantSections.filter(section => section.id !== cleanId && section.id !== id).map(section => {\n          if (section.splitGroupId === sectionToDelete.splitGroupId) {\n            return { ...section, splitWidth: newWidth };\n          }\n          return section;\n        });\n        \n        relevantSetSections(updatedSections);\n        // enqueueSnackbar('Section removed from split group');\n      }\n    } else {\n      relevantSetSections(relevantSections.filter(section => section.id !== cleanId && section.id !== id));\n      // enqueueSnackbar('Section deleted');\n    }\n    \n    if (selectedSection === id) {\n      setSelectedSection(null);\n    }\n  };\n\n  useEffect(() => {\n    document.body.style.overflow = 'hidden';\n    const main = document.getElementsByTagName('main')?.[0];\n    if (main) {\n      main.style.marginTop = '4.125rem';\n    }\n    return () => {\n      document.body.removeAttribute('style');\n    }\n  }, []);\n\nconst getData = async () => {\n  if (id) {\n    const token = getToken();\n    const subjRes = await getV1SubjectsId({ \n      ...token, \n      'x-timezone': token['x-timezone']?.toString() || '',\n      id \n    });\n\n    if ('data' in subjRes && subjRes.data && typeof subjRes.data === 'object' && 'resource' in subjRes.data) {\n      const resource = (subjRes.data as any).resource;\n      const token2 = getToken();\n      const fRes = await getV1FormBuilderRelationalSchemaFieldsName({\n        ...token2,\n        'x-timezone': token2['x-timezone']?.toString() || '',\n        name: resource,\n      });\n      const schemaFields = ('data' in fRes && fRes.data && typeof fRes.data === 'object' && 'fields' in fRes.data) \n        ? ((fRes.data as any).fields || [])\n        : [];\n      const relation_table = ('data' in fRes && fRes.data && typeof fRes.data === 'object' && 'relational_fields' in fRes.data)\n        ? ((fRes.data as any).relational_fields || [])\n        : [];\n\n      // Process main schema fields\n      const updatedFields = schemaFields\n        .map((field) => ({\n          ...field,\n          key: field.key.replace('__replaceKey', ''),\n        }))\n        .filter((field) => !field.is_inner_join && field.alias !== 'id' && !field?.alias?.includes('_id'));\n\n      // Process relation tables - separate array and object types\n      const arrayRelationTables = [];\n      const objectRelationFields = [];\n\n      relation_table.forEach((table) => {\n        if (!table) return;\n\n        const updatedTableFields = (table.fields || []).map((field) => {\n          const updatedField = {\n            ...field,\n            key: field.key.replace('__replaceKey', ''),\n            alias: field?.templateKey ? field?.templateKey : field.alias,\n          };\n\n          // Prepend dataKey to field keys for object types\n          if (table.type === 'object' && table.dataKey) {\n            updatedField.key = `${table.dataKey}.${updatedField.key}`;\n          }\n\n          return updatedField;\n        }).filter(\n          (field) =>\n            !field.is_inner_join &&\n            field.alias !== 'id' &&\n            !field.alias.includes('_id')\n        );\n\n        const uniqueTableFields = _.differenceWith(\n          updatedTableFields,\n          updatedTableFields,\n          (fieldA: any, fieldB: any) => fieldA.key === fieldB?.joinKey\n        );\n\n        const tableFields = uniqueTableFields.map((f: any) => {\n          const field = formatText(f.alias.replace(/_data$/, '').replace(/_/g, ' '));\n          const value = table.type === 'object' && table.dataKey \n            ? `${table.dataKey}.${f.alias.replace(/ /g, '_').toLowerCase()}`\n            : f.alias.replace(/ /g, '_').toLowerCase();\n            \n          return { \n            label: field, \n            value: value \n          };\n        });\n\n        if (table.type === 'object') {\n          // Merge object type fields into main fields\n          objectRelationFields.push(...tableFields);\n        } else {\n          // Keep array types separate\n          arrayRelationTables.push({\n            ...table,\n            fields: tableFields\n          });\n        }\n      });\n\n      // Combine main fields and object relation fields\n      const allFields = [\n        ...updatedFields.map((f) => {\n          const n = f?.alias || f?.key\n          const field = formatText(n.replace(/_data$/, '').replace(/_/g, ' '));\n          return { \n            label: field, \n            value: field.replace(/ /g, '_').toLowerCase() \n          };\n        }),\n        ...objectRelationFields\n      ];\n\n      const uniqueAllFields = _.uniqBy(allFields, 'value');\n\n      setPlaceholders(uniqueAllFields);\n      setRelationTable(arrayRelationTables);\n    }\n  }\n\n  // Rest of the function remains the same...\n  if (template_id) {\n    const token3 = getToken();\n    const res = await getV1TemplatesId({ \n      ...token3, \n      'x-timezone': token3['x-timezone']?.toString() || '',\n      id: template_id \n    });\n    const templateSections = ('data' in res && res.data && typeof res.data === 'object' && 'sections' in res.data)\n      ? ((res.data as any).sections || [])\n      : [];\n    const mainSecs = templateSections.map((s: any) => ({\n      ...s,\n      id: s.id || `section-${uuidv4()}`,\n    }));\n    setTemplateData(('data' in res && res.data) ? res.data as any : null);\n\n    setSections(mainSecs);\n  }\n\n  if (locationState?.company_id) {\n    const token4 = getToken();\n    const res = await getV1TemplateHeaderFooterCompanyIdHeaderFooter({\n      ...token4,\n      'x-timezone': token4['x-timezone']?.toString() || '',\n      company_id: locationState.company_id,\n    });\n    const resData = ('data' in res && res.data && typeof res.data === 'object') ? res.data as any : null;\n    setHeaderFooterId(resData?._id || '');\n    const headerSections = resData?.header_sections || [];\n    const footerSections = resData?.footer_sections || [];\n    const headerSecs = headerSections.map((s) => ({\n      ...s,\n      id: s.id || `header-section-${uuidv4()}`,\n    }));\n    const footerSecs = footerSections.map((s) => ({\n      ...s,\n      id: s.id || `footer-section-${uuidv4()}`,\n    }));\n\n    setHeaderSections(headerSecs);\n    setFooterSections(footerSecs);\n  }\n};\n  \n  useEffect(() => {\n    getData();\n  }, [template_id, id, locationState?.company_id]);\n\n  const createNewSection = (type: ElementType, attrs: Record<string, any> = {}): EnhancedSectionData => {\n    let content = '';\n    const styles = initialStyles[type] || {};\n    const inlineStyles: string = generateInlineStyles(styles);\n\n    const idPrefix = activeCanvas === 'header' && isEditingHeaderFooter ? 'header-' : \n                     activeCanvas === 'footer' && isEditingHeaderFooter ? 'footer-' : '';\n\n    switch (type) {\n      case 'heading':\n        content = `<h1 style=\"${inlineStyles}\">Heading 1</h1>`;\n        break;\n      case 'heading-2':\n        content = `<h2 style=\"${inlineStyles}\">Heading 2</h2>`;\n        break;\n      case 'heading-3':\n        content = `<h3 style=\"${inlineStyles}\">Heading 3</h3>`;\n        break;\n      case 'heading-4':\n        content = `<h4 style=\"${inlineStyles}\">Heading 4</h4>`;\n        break;\n      case 'text':\n        content = `<p style=\"${inlineStyles}\">Hello, enter your text here...</p>`;\n        break;\n      case 'image':\n        content = `<img src=\"${attrs.src}\" alt=\"${attrs.alt}\" style=\"${inlineStyles};\" />`;\n        break;\n      case 'buttons':\n        attrs.text = attrs?.text || 'Button text';\n        content = `<button style=\"${inlineStyles}\">${attrs.text}</button>`;\n        break;\n      case 'divider':\n        content = `<hr style=\"${inlineStyles}\" />`;\n        break;\n      case 'table':\n        const tableStyles = styles as any;\n        const { border, borderStyle, borderColor, ...rest } = tableStyles;\n        const tInlineStyles = generateInlineStyles(tableStyles.is_bordered ? tableStyles : rest);\n        const tHeadInlineStyles: string = generateInlineStyles(tableStyles.tHead);\n        const tBodyInlineStyles: string = generateInlineStyles(tableStyles.tBody);\n        const thCellInlineStyles: string = generateInlineStyles({...tableStyles.thCells, border, borderStyle, borderColor });\n        const tbCellInlineStyles: string = generateInlineStyles({...tableStyles.tbCells, border, borderStyle, borderColor});\n        content = `\n          <table style=\"${tInlineStyles}\">\n            <thead style=\"${tHeadInlineStyles}\">\n              <tr style=\"background-color: #f5f5f5;\">\n                <th style=\"${thCellInlineStyles}\"></th>\n                <th style=\"${thCellInlineStyles}\"></th>\n                <th style=\"${thCellInlineStyles}\"></th>\n              </tr>\n            </thead>\n            <tbody style=\"${tBodyInlineStyles}\">\n              <tr>\n                <td style=\"${tbCellInlineStyles}\"></td>\n                <td style=\"${tbCellInlineStyles}\"></td>\n                <td style=\"${tbCellInlineStyles}\"></td>\n              </tr>\n            </tbody>\n          </table>\n        `;\n        break;\n      case 'signature':\n        content = `<div style=\"${inlineStyles}\">Signature: <input type='text' style=\"border:0; border-bottom:1px solid black\" class='signature-input'/></div>`;\n        break;\n      case 'qr-code':\n        attrs.placeholder = attrs?.placeholder || '{{qr_data}}';\n        content = `<div style=\"background-color: #f5f5f5; padding: 16px; text-align: center; color: #666666;\">${attrs.placeholder}</div>`;\n        break;\n      case 'bar-code':\n        attrs.placeholder = attrs?.placeholder || '{{barcode_data}}';\n        content = `<div style=\"background-color: #f5f5f5; padding: 16px; text-align: center; color: #666666;\">${attrs.placeholder}</div>`;\n        break;\n      default:\n        content = '<p style=\"font-size: 16px; color: #333333; line-height: 1.5;\">New section</p>';\n    }\n\n    let attributes: Record<string, any> = {};\n    attributes = extractStyles(content, type);\n\n    return { \n      id: `${idPrefix}section-${uuidv4()}`, \n      content, \n      type, \n      attributes: {...(attrs || {}), styles},\n      is_edited_from_source: false\n    };\n  };\n\n  const handleSave = async () => {\n    if(sections.length === 0 && headerSections.length === 0 && footerSections.length === 0)  {\n      enqueueSnackbar('Please add at least one section');\n      return;\n    }\n    \n    const mainHtml = generateEmailPreview(sections, headerSections, footerSections, true);\n    try {\n     const p = { \n        ...getToken(), \n        ...(template_id ? { id: template_id } : { subject_id: id, is_default: false, company_id: locationState.company_id }), \n        sections: sections, \n        contents: mainHtml \n      }\n      setPayload(p);\n    } catch (error) {\n      const m = getErrorMessage(error?.message);\n      enqueueSnackbar(m, { variant: 'error' });\n    }\n  };\n  const handleSaveHeaderFooter = async () => {\n    if(sections.length === 0 && headerSections.length === 0 && footerSections.length === 0)  {\n      enqueueSnackbar('Please add at least one section', { variant: 'error' });\n      return;\n    } else if(!locationState?.company_id) {\n      enqueueSnackbar('Company has not been selected', { variant: 'error' });\n      return;\n    }\n    \n    const headerHtml = generateHeaderFooterPreview(headerSections, 'header');\n    const footerHtml = generateHeaderFooterPreview(footerSections, 'footer');\n    const combinedHtml = `${headerHtml}${footerHtml}`;\n    \n    // Convert splitWidth from number to string for API\n    const convertSectionForApi = (section: EnhancedSectionData) => ({\n      id: section.id,\n      content: section.content,\n      type: section.type,\n      isSplitPair: section.isSplitPair,\n      splitGroupId: section.splitGroupId,\n      splitWidth: section.splitWidth !== undefined ? String(section.splitWidth) : undefined,\n    });\n    \n    const convertedHeaderSections = headerSections.map(convertSectionForApi);\n    const convertedFooterSections = footerSections.map(convertSectionForApi);\n    \n    try {\n      if(headerFooterId) {\n        const token5 = getToken();\n        const res = await patchV1TemplateHeaderFooterId({ \n          ...token5,\n          'x-timezone': token5['x-timezone']?.toString() || '',\n          id: headerFooterId, \n          header_sections: convertedHeaderSections, \n          footer_sections: convertedFooterSections, \n          contents: combinedHtml \n        });\n        if(res.status_code === 200) {\n          enqueueSnackbar('Header/Footer saved successfully', { variant: 'success' });\n          setIsEditingHeaderFooter(false);\n        }\n      } else {\n        const token6 = getToken();\n        const res = await postV1TemplateHeaderFooter({ \n          ...token6,\n          'x-timezone': token6['x-timezone']?.toString() || '',\n          header_sections: convertedHeaderSections, \n          footer_sections: convertedFooterSections, \n          contents: combinedHtml, \n          company_id: locationState.company_id\n        });\n        if(res.status_code === 200) {\n          enqueueSnackbar('Header/Footer saved successfully', { variant: 'success' });\n          setIsEditingHeaderFooter(false);\n        }\n      }\n    } catch (error) {\n      const m = getErrorMessage(error?.message);\n      enqueueSnackbar(m, { variant: 'error' });\n    }\n  };\n\n  const toggleHeaderFooterEditing = () => {\n    setIsEditingHeaderFooter(!isEditingHeaderFooter);\n    if (isEditingHeaderFooter) {\n      setActiveCanvas('main');\n    }\n  };\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>\n      <EditorHeader \n        onPreview={() => setPreview(!preview)} \n        onSave={handleSave}\n        preview={preview}\n        sections={sections}\n        isEditingHeaderFooter={isEditingHeaderFooter}\n        setIsEditingHeaderFooter={toggleHeaderFooterEditing}\n        onSaveHeaderFooter={handleSaveHeaderFooter}\n        modulePath={modulePath} \n        type={type}\n        mode={template_id ? 'edit' : 'add'}\n        templateData={templateData}\n      />\n      <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\n        <DndContext\n          onDragStart={handleDragStart}\n          onDragOver={handleDragOver}\n          onDragEnd={handleDragEnd}\n          collisionDetection={pointerWithin}\n        >\n          <EditorCanvas\n            sections={sections}\n            headerSections={headerSections}\n            footerSections={footerSections}\n            activeId={activeId}\n            overSection={overSection}\n            selectedSection={selectedSection}\n            onSelectSection={setSelectedSection}\n            onUpdateSection={handleUpdateSection}\n            onSplitSection={handleSplitSection}\n            onDeleteSection={handleDeleteSection}\n            preview={preview}\n            handleSave={handleSave}\n            placeholders={placeholders}\n            isEditingHeaderFooter={isEditingHeaderFooter}\n            relation_table={relation_table}\n          />\n        </DndContext>\n      </Box>\n      {payload !== null && \n        <TemplateNameModal \n          isOpen={payload !== null} \n          setIsOpen={() => setPayload(null)} \n          payload={payload}\n          templateRoutes={ROUTES}\n          mode={template_id ? 'edit' : 'add'}\n          templateData={templateData}\n        />\n      }\n    </Box>\n  );\n};\n\nexport default SectionFlowEditor;"],"names":["modulePath","module","type","id","template_id","useParams","state","locationState","useLocation","sections","setSections","useState","headerSections","setHeaderSections","footerSections","setFooterSections","activeId","setActiveId","selectedSection","setSelectedSection","overSection","setOverSection","preview","setPreview","placeholders","setPlaceholders","activeCanvas","setActiveCanvas","isEditingHeaderFooter","setIsEditingHeaderFooter","payload","setPayload","headerFooterId","setHeaderFooterId","ROUTES","templateRoutes","relation_table","setRelationTable","templateData","setTemplateData","getRelevantSections","canvasType","getRelevantSetSections","useEffect","document","body","style","overflow","main","_a","getElementsByTagName","marginTop","removeAttribute","async","token","getToken","subjRes","getV1SubjectsId","toString","data","resource","token2","fRes","getV1FormBuilderRelationalSchemaFieldsName","_b","name","schemaFields","fields","relational_fields","updatedFields","map","field","key","replace","filter","is_inner_join","alias","includes","arrayRelationTables","objectRelationFields","forEach","table","updatedTableFields","updatedField","templateKey","dataKey","tableFields","_","differenceWith","fieldA","fieldB","joinKey","f","label","formatText","value","toLowerCase","push","allFields","n","uniqueAllFields","uniqBy","token3","res","getV1TemplatesId","_c","mainSecs","s","uuidv4","company_id","token4","getV1TemplateHeaderFooterCompanyIdHeaderFooter","_d","resData","_id","header_sections","footer_sections","headerSecs","footerSecs","getData","createNewSection","attrs","content","styles","initialStyles","inlineStyles","generateInlineStyles","idPrefix","src","alt","text","tableStyles","border","borderStyle","borderColor","rest","tInlineStyles","is_bordered","tHeadInlineStyles","tHead","tBodyInlineStyles","tBody","thCellInlineStyles","thCells","tbCellInlineStyles","tbCells","placeholder","extractStyles","attributes","is_edited_from_source","handleSave","length","enqueueSnackbar","mainHtml","generateEmailPreview","p","subject_id","is_default","contents","error","m","getErrorMessage","message","variant","jsxs","Box","sx","display","flexDirection","height","children","jsx","EditorHeader","onPreview","onSave","onSaveHeaderFooter","combinedHtml","generateHeaderFooterPreview","convertSectionForApi","section","isSplitPair","splitGroupId","splitWidth","String","convertedHeaderSections","convertedFooterSections","token5","patchV1TemplateHeaderFooterId","status_code","token6","postV1TemplateHeaderFooter","mode","flex","DndContext","onDragStart","event","active","onDragOver","over","onDragEnd","targetSections","setTargetSections","startsWith","current","imageUrl","newSection","overIndex","findIndex","newSections","splice","targetSection","updatedSections","sourceSections","sourceSetSections","cleanActiveId","oldIndex","newIndex","movedSection","groupId","groupSections","cleaned","originalSection","newSourceSections","newTargetSections","collisionDetection","pointerWithin","EditorCanvas","onSelectSection","onUpdateSection","relevantSections","relevantSetSections","cleanId","onSplitSection","content1","content2","index","sectionPrefix","newWidth","i","initialWidth","onDeleteSection","sectionToDelete","find","splitSections","remainingSection","TemplateNameModal","isOpen","setIsOpen"],"mappings":"w8BAuC4D,EAAGA,aAAYC,OAAAA,EAAQC,WACjF,MAAMC,GAAEA,EAAAC,YAAIA,GAAgBC,eACpBC,MAAOC,GAAkBC,iBAE1BC,EAAUC,GAAeC,EAAAA,SAAgC,KACzDC,EAAgBC,GAAqBF,EAAAA,SAAgC,KACrEG,EAAgBC,GAAqBJ,EAAAA,SAAgC,KACrEK,EAAUC,GAAeN,EAAAA,SAAwB,OACjDO,EAAiBC,GAAsBR,EAAAA,SAAwB,OAC/DS,EAAaC,GAAkBV,EAAAA,SAAwB,OACvDW,EAASC,GAAcZ,EAAAA,UAAkB,IACzCa,EAAcC,GAAmBd,EAAAA,SAAgC,KACjEe,EAAcC,GAAmBhB,EAAAA,SAAuC,SACxEiB,EAAuBC,GAA4BlB,EAAAA,UAAkB,IACrEmB,EAASC,GAAcpB,EAAAA,SAAc,OACrCqB,EAAgBC,GAAqBtB,EAAAA,SAAiB,IACvDuB,EAASC,EAAAA,eAAenC,EAAYE,IACnCkC,EAAgBC,GAAoB1B,EAAAA,SAAgB,KACpD2B,EAAcC,GAAmB5B,EAAAA,SAAsC,MA6LxE6B,EAAuBC,GACR,WAAfA,GAA2Bb,EAA8BhB,EAC1C,WAAf6B,GAA2Bb,EAA8Bd,EACtDL,EAGHiC,EAA0BD,GACX,WAAfA,GAA2Bb,EAA8Bf,EAC1C,WAAf4B,GAA2Bb,EAA8Bb,EACtDL,EAuITiC,EAAAA,UAAU,WACRC,SAASC,KAAKC,MAAMC,SAAW,SAC/B,MAAMC,EAAO,OAAAC,EAAAL,SAASM,qBAAqB,cAA9B,EAAAD,EAAwC,GAIrD,OAHID,IACFA,EAAKF,MAAMK,UAAY,YAElB,KACLP,SAASC,KAAKO,gBAAgB,WAE/B,IA4JHT,EAAAA,UAAU,KA1JIU,uBACd,GAAIlD,EAAI,CACN,MAAMmD,EAAQC,EAAAA,WACRC,QAAgBC,kBAAgB,IACjCH,EACH,cAAc,OAAAL,EAAAK,EAAM,wBAAeI,aAAc,GACjDvD,OAGF,GAAI,SAAUqD,GAAWA,EAAQG,MAAgC,iBAAjBH,EAAQG,MAAqB,aAAcH,EAAQG,KAAM,CACvG,MAAMC,EAAYJ,EAAQG,KAAaC,SACjCC,EAASN,EAAAA,WACTO,QAAaC,6CAA2C,IACzDF,EACH,cAAc,OAAAG,EAAAH,EAAO,wBAAeH,aAAc,GAClDO,KAAML,IAEFM,EAAgB,SAAUJ,GAAQA,EAAKH,MAA6B,iBAAdG,EAAKH,MAAqB,WAAYG,EAAKH,MACjGG,EAAKH,KAAaQ,QACpB,GACE/B,EAAkB,SAAU0B,GAAQA,EAAKH,MAA6B,iBAAdG,EAAKH,MAAqB,sBAAuBG,EAAKH,MAC9GG,EAAKH,KAAaS,mBACpB,GAGEC,EAAgBH,EACnBI,IAAKC,IAAA,IACDA,EACHC,IAAKD,EAAMC,IAAIC,QAAQ,eAAgB,OAExCC,OAAQH,UAAU,OAACA,EAAMI,eAAiC,OAAhBJ,EAAMK,SAAmB,OAAA3B,EAAA,MAAAsB,OAAA,EAAAA,EAAOK,YAAP,EAAA3B,EAAc4B,SAAS,UAGvFC,EAAsB,GACtBC,EAAuB,GAE7B3C,EAAe4C,QAASC,IACtB,IAAKA,EAAO,OAEZ,MAAMC,GAAsBD,EAAMd,QAAU,IAAIG,IAAKC,IACnD,MAAMY,EAAe,IAChBZ,EACHC,IAAKD,EAAMC,IAAIC,QAAQ,eAAgB,IACvCG,OAAO,MAAAL,OAAA,EAAAA,EAAOa,aAAc,MAAAb,OAAA,EAAAA,EAAOa,YAAcb,EAAMK,OAQzD,MAJmB,WAAfK,EAAM/E,MAAqB+E,EAAMI,UACnCF,EAAaX,IAAM,GAAGS,EAAMI,WAAWF,EAAaX,OAG/CW,IACNT,OACAH,IACEA,EAAMI,eACS,OAAhBJ,EAAMK,QACLL,EAAMK,MAAMC,SAAS,QASpBS,EANoBC,EAAAA,QAAEC,eAC1BN,EACAA,EACA,CAACO,EAAaC,IAAgBD,EAAOjB,OAAQ,MAAAkB,OAAA,EAAAA,EAAQC,UAGjBrB,IAAKsB,IAMlC,CACLC,MANYC,EAAAA,WAAWF,EAAEhB,MAAMH,QAAQ,SAAU,IAAIA,QAAQ,KAAM,MAOnEsB,MAN2B,WAAfd,EAAM/E,MAAqB+E,EAAMI,QAC3C,GAAGJ,EAAMI,WAAWO,EAAEhB,MAAMH,QAAQ,KAAM,KAAKuB,gBAC/CJ,EAAEhB,MAAMH,QAAQ,KAAM,KAAKuB,iBAQd,WAAff,EAAM/E,KAER6E,EAAqBkB,QAAQX,GAG7BR,EAAoBmB,KAAK,IACpBhB,EACHd,OAAQmB,MAMd,MAAMY,EAAY,IACb7B,EAAcC,IAAKsB,IACpB,MAAMO,GAAI,MAAAP,OAAA,EAAAA,EAAGhB,SAAS,MAAAgB,OAAA,EAAAA,EAAGpB,KACnBD,EAAQuB,EAAAA,WAAWK,EAAE1B,QAAQ,SAAU,IAAIA,QAAQ,KAAM,MAC/D,MAAO,CACLoB,MAAOtB,EACPwB,MAAOxB,EAAME,QAAQ,KAAM,KAAKuB,oBAGjCjB,GAGCqB,EAAkBb,EAAAA,QAAEc,OAAOH,EAAW,SAE5CzE,EAAgB2E,GAChB/D,EAAiByC,EACnB,CACF,CAGA,GAAI1E,EAAa,CACf,MAAMkG,EAAS/C,EAAAA,WACTgD,QAAYC,mBAAiB,IAC9BF,EACH,cAAc,OAAAG,EAAAH,EAAO,wBAAe5C,aAAc,GAClDvD,GAAIC,IAKAsG,GAHoB,SAAUH,GAAOA,EAAI5C,MAA4B,iBAAb4C,EAAI5C,MAAqB,aAAc4C,EAAI5C,MACnG4C,EAAI5C,KAAalD,UACnB,IAC8B6D,IAAKqC,IAAA,IAClCA,EACHxG,GAAIwG,EAAExG,IAAM,WAAWyG,EAAAA,eAEzBrE,EAAiB,SAAUgE,GAAOA,EAAI5C,KAAQ4C,EAAI5C,KAAc,MAEhEjD,EAAYgG,EACd,CAEA,SAAInG,WAAesG,WAAY,CAC7B,MAAMC,EAASvD,EAAAA,WACTgD,QAAYQ,iDAA+C,IAC5DD,EACH,cAAc,OAAAE,EAAAF,EAAO,wBAAepD,aAAc,GAClDmD,WAAYtG,EAAcsG,aAEtBI,EAAW,SAAUV,GAAOA,EAAI5C,MAA4B,iBAAb4C,EAAI5C,KAAqB4C,EAAI5C,KAAc,KAChG1B,GAAkB,MAAAgF,OAAA,EAAAA,EAASC,MAAO,IAClC,MAAMtG,GAAiB,MAAAqG,OAAA,EAAAA,EAASE,kBAAmB,GAC7CrG,GAAiB,MAAAmG,OAAA,EAAAA,EAASG,kBAAmB,GAC7CC,EAAazG,EAAe0D,IAAKqC,IAAA,IAClCA,EACHxG,GAAIwG,EAAExG,IAAM,kBAAkByG,EAAAA,eAE1BU,EAAaxG,EAAewD,IAAKqC,IAAA,IAClCA,EACHxG,GAAIwG,EAAExG,IAAM,kBAAkByG,EAAAA,eAGhC/F,EAAkBwG,GAClBtG,EAAkBuG,EACpB,GAIEC,IACC,CAACnH,EAAaD,EAAI,MAAAI,OAAA,EAAAA,EAAesG,aAEpC,MAAMW,EAAmB,CAACtH,EAAmBuH,EAA6B,CAAA,KACxE,IAAIC,EAAU,GACd,MAAMC,EAASC,EAAAA,cAAc1H,IAAS,CAAA,EAChC2H,EAAuBC,EAAAA,qBAAqBH,GAE5CI,EAA4B,WAAjBrG,GAA6BE,EAAwB,UACpC,WAAjBF,GAA6BE,EAAwB,UAAY,GAElF,OAAQ1B,GACN,IAAK,UACHwH,EAAU,cAAcG,oBACxB,MACF,IAAK,YACHH,EAAU,cAAcG,oBACxB,MACF,IAAK,YACHH,EAAU,cAAcG,oBACxB,MACF,IAAK,YACHH,EAAU,cAAcG,oBACxB,MACF,IAAK,OACHH,EAAU,aAAaG,wCACvB,MACF,IAAK,QACHH,EAAU,aAAaD,EAAMO,aAAaP,EAAMQ,eAAeJ,SAC/D,MACF,IAAK,UACHJ,EAAMS,YAAOT,WAAOS,OAAQ,cAC5BR,EAAU,kBAAkBG,MAAiBJ,EAAMS,gBACnD,MACF,IAAK,UACHR,EAAU,cAAcG,QACxB,MACF,IAAK,QACH,MAAMM,EAAcR,GACdS,OAAEA,EAAAC,YAAQA,EAAAC,YAAaA,KAAgBC,GAASJ,EAChDK,EAAgBV,EAAAA,qBAAqBK,EAAYM,YAAcN,EAAcI,GAC7EG,EAA4BZ,EAAAA,qBAAqBK,EAAYQ,OAC7DC,EAA4Bd,EAAAA,qBAAqBK,EAAYU,OAC7DC,EAA6BhB,EAAAA,qBAAqB,IAAIK,EAAYY,QAASX,SAAQC,cAAaC,gBAChGU,EAA6BlB,EAAAA,qBAAqB,IAAIK,EAAYc,QAASb,SAAQC,cAAaC,gBACtGZ,EAAU,6BACQc,kCACEE,0FAECI,wCACAA,wCACAA,kFAGDF,uDAECI,wCACAA,wCACAA,oFAKrB,MACF,IAAK,YACHtB,EAAU,eAAeG,mHACzB,MACF,IAAK,UACHJ,EAAMyB,mBAAczB,WAAOyB,cAAe,cAC1CxB,EAAU,8FAA8FD,EAAMyB,oBAC9G,MACF,IAAK,WACHzB,EAAMyB,mBAAczB,WAAOyB,cAAe,mBAC1CxB,EAAU,8FAA8FD,EAAMyB,oBAC9G,MACF,QACExB,EAAU,gFAMd,OAFayB,EAAAA,cAAczB,GAEpB,CACLvH,GAAI,GAAG4H,YAAmBnB,EAAAA,YAC1Bc,UACAxH,KAAAA,EACAkJ,WAAY,IAAK3B,GAAS,CAAA,EAAKE,UAC/B0B,uBAAuB,IAIrBC,GAAajG,UACjB,GAAuB,IAApB5C,EAAS8I,QAA0C,IAA1B3I,EAAe2I,QAA0C,IAA1BzI,EAAeyI,OAExE,YADAC,EAAAA,gBAAgB,mCAIlB,MAAMC,EAAWC,EAAAA,qBAAqBjJ,EAAUG,EAAgBE,GAAgB,GAChF,IACC,MAAM6I,EAAI,IACJpG,gBACCnD,EAAc,CAAED,GAAIC,GAAgB,CAAEwJ,WAAYzJ,EAAI0J,YAAY,EAAOhD,WAAYtG,EAAcsG,YACvGpG,WACAqJ,SAAUL,GAEZ1H,EAAW4H,EACb,OAASI,GACP,MAAMC,EAAIC,EAAAA,gBAAgB,MAAAF,OAAA,EAAAA,EAAOG,SACjCV,EAAAA,gBAAgBQ,EAAG,CAAEG,QAAS,SAChC;AAuEF,OACEC,OAACC,EAAAA,QAAA,CAAIC,GAAI,CAAEC,QAAS,OAAQC,cAAe,SAAUC,OAAQ,SAC3DC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,QAAA,CACCC,UAAW,IAAMtJ,GAAYD,GAC7BwJ,OAAQxB,GACRhI,UACAb,WACAmB,wBACAC,yBAf4B,KAChCA,GAA0BD,GACtBA,GACFD,EAAgB,SAadoJ,mBA9EyB1H,kBAC7B,GAAuB,IAApB5C,EAAS8I,QAA0C,IAA1B3I,EAAe2I,QAA0C,IAA1BzI,EAAeyI,OAExE,YADAC,EAAAA,gBAAgB,kCAAmC,CAAEW,QAAS,UAEhE,KAAW,MAAA5J,OAAA,EAAAA,EAAesG,YAExB,YADA2C,EAAAA,gBAAgB,gCAAiC,CAAEW,QAAS,UAI9D,MAEMa,EAAe,GAFFC,EAAAA,4BAA4BrK,EAAgB,YAC5CqK,EAAAA,4BAA4BnK,EAAgB,YAIzDoK,EAAwBC,IAAA,CAC5BhL,GAAIgL,EAAQhL,GACZuH,QAASyD,EAAQzD,QACjBxH,KAAMiL,EAAQjL,KACdkL,YAAaD,EAAQC,YACrBC,aAAcF,EAAQE,aACtBC,gBAAmC,IAAvBH,EAAQG,WAA2BC,OAAOJ,EAAQG,iBAAc,IAGxEE,EAA0B5K,EAAe0D,IAAI4G,GAC7CO,EAA0B3K,EAAewD,IAAI4G,GAEnD,IACE,GAAGlJ,EAAgB,CACjB,MAAM0J,EAASnI,EAAAA,WASQ,aARLoI,gCAA8B,IAC3CD,EACH,cAAc,OAAAzI,EAAAyI,EAAO,wBAAehI,aAAc,GAClDvD,GAAI6B,EACJmF,gBAAiBqE,EACjBpE,gBAAiBqE,EACjB3B,SAAUkB,KAELY,cACLpC,EAAAA,gBAAgB,mCAAoC,CAAEW,QAAS,YAC/DtI,GAAyB,GAE7B,KAAO,CACL,MAAMgK,EAAStI,EAAAA,WASQ,aARLuI,6BAA2B,IACxCD,EACH,cAAc,OAAA7H,EAAA6H,EAAO,wBAAenI,aAAc,GAClDyD,gBAAiBqE,EACjBpE,gBAAiBqE,EACjB3B,SAAUkB,EACVnE,WAAYtG,EAAcsG,cAErB+E,cACLpC,EAAAA,gBAAgB,mCAAoC,CAAEW,QAAS,YAC/DtI,GAAyB,GAE7B,CACF,OAASkI,GACP,MAAMC,EAAIC,EAAAA,gBAAgB,MAAAF,OAAA,EAAAA,EAAOG,SACjCV,EAAAA,gBAAgBQ,EAAG,CAAEG,QAAS,SAChC,GAoBInK,aACAE,OACA6L,KAAM3L,EAAc,OAAS,MAC7BkC;eAEFqI,EAAAA,IAACN,EAAAA,QAAA,CAAIC,GAAI,CAAEC,QAAS,OAAQyB,KAAM,EAAGjJ,SAAU,UAC7C2H,wBAAAC,EAAAA,IAACsB,EAAAA,WAAA,CACCC,YAtrBiBC,IACvB,MAAMC,OAAEA,GAAWD,EACnBlL,EAAYmL,EAAOjM,KAqrBbkM,WAlrBgBF,IACtB,MAAMG,KAAgBA,GAASH,EAE1BG,GAKW,kBAAZA,EAAKnM,IAA0ByB,EACjCD,EAAgB,UACK,kBAAZ2K,EAAKnM,IAA0ByB,EACxCD,EAAgB,UACK,gBAAZ2K,EAAKnM,IACdwB,EAAgB,QAGF,kBAAZ2K,EAAKnM,IAAsC,gBAAZmM,EAAKnM,IAAoC,kBAAZmM,EAAKnM,IACnEkB,EAAeiL,EAAKnM,KAbpBkB,EAAe,OA+qBXkL,UA9pBeJ,UACrB,MAAMC,OAAEA,EAAAE,KAAQA,GAASH,EAKzB,GAHAlL,EAAY,MACZI,EAAe,OAEViL,EAAM,OAEX,IAAIE,EAAiB/L,EACjBgM,EAAoB/L,EAcxB,IAZiB,kBAAZ4L,EAAKnM,KAA0B,MAAAiB,OAAA,EAAAA,EAAasL,WAAW,cAAe9K,GACzE4K,EAAiB5L,EACjB6L,EAAoB5L,EACpBc,EAAgB,YACM,kBAAZ2K,EAAKnM,KAA0B,MAAAiB,OAAA,EAAAA,EAAasL,WAAW,cAAe9K,GAChF4K,EAAiB1L,EACjB2L,EAAoB1L,EACpBY,EAAgB,WAEhBA,EAAgB,QAGgB,WAA9B,OAAAsB,EAAAmJ,EAAOzI,KAAKgJ,cAAZ,EAAA1J,EAAqB/C,MAAkB,CACzC,MAAM0M,EAAWR,EAAOzI,KAAKgJ,QAAQC,SAC/BC,EAAkCrF,EAAiB,QAAS,CAAEQ,IAAK4E,EAAU3E,IAAK,UAElF6E,EAAYN,EAAeO,UAAW5B,GAAYA,EAAQhL,KAAOmM,EAAKnM,IACtE6M,EAAc,IAAIR,GAUxB,MARgB,kBAAZF,EAAKnM,IAAsC,gBAAZmM,EAAKnM,IAAoC,kBAAZmM,EAAKnM,KAAwC,IAAd2M,EAC7FL,EAAkB,IAAID,EAAgBK,KAEtCG,EAAYC,OAAOH,EAAW,EAAGD,GACjCJ,EAAkBO,SAGpBxD,EAAAA,gBAAgB,+BAElB,CAEA,GAAyB,iBAAd4C,EAAOjM,IAAmBiM,EAAOjM,GAAGuM,WAAW,YAAa,CACrE,MAAMxM,EAAOkM,EAAOjM,GAAGsE,QAAQ,WAAY,IACrCoI,EAAarF,EAAiBtH,GAE9B4M,EAAYN,EAAeO,UAAW5B,GAAYA,EAAQhL,KAAOmM,EAAKnM,IAG5E,IAFoC,IAAd2M,GAEY,kBAAZR,EAAKnM,IAAsC,gBAAZmM,EAAKnM,IAAoC,kBAAZmM,EAAKnM,GAEhF,CACL,MAAM+M,EAAgBV,EAAeM,GAMrC,IAJGI,EAAcxF,SACfwF,EAAcxF,QAAQ7C,SAAS,iBAC/BqI,EAAcxF,QAAQ7C,SAAS,mBAEpB,CACX,MAAMsI,EAAkB,IAAIX,GAC5BW,EAAgBL,GAAa,IACxBI,EACHhN,KAAAA,EACAwH,QAASmF,EAAWnF,SAEtB+E,EAAkBU,EAEpB,KAAO,CACL,MAAMA,EAAkB,IAAIX,GAC5BW,EAAgBF,OAAOH,EAAW,EAAGD,GACrCJ,EAAkBU,EAEpB,CACF,MAvBEV,EAAkB,IAAID,EAAgBK,IAwBxC,MACF,CAEA,GACET,EAAOjM,KAAOmM,EAAKnM,IACE,iBAAdiM,EAAOjM,IACK,iBAAZmM,EAAKnM,GACZ,CACA,IAAIiN,EAAwC,GACxCC,EAAwF,KAGxFjB,EAAOjM,GAAGuM,WAAW,YAAc9K,GACrCwL,EAAiBxM,EACjByM,EAAoBxM,GAEXuL,EAAOjM,GAAGuM,WAAW,YAAc9K,GAC5CwL,EAAiBtM,EACjBuM,EAAoBtM,IAGpBqM,EAAiB3M,EACjB4M,EAAoB3M,GAItB,MAAM4M,EAAgBlB,EAAOjM,GAAGsE,QAAQ,qBAAsB,IAExD8I,EAAWH,EAAeL,UAAW5B,GACzCA,EAAQhL,KAAOmN,GAAiBnC,EAAQhL,KAAOiM,EAAOjM,IAGxD,IAAIqN,EAAWhB,EAAeO,UAAW5B,GACvCA,EAAQhL,KAAOoL,OAAOe,EAAKnM,IAAIsE,QAAQ,qBAAsB,KAO/D,GAJgB,kBAAZ6H,EAAKnM,IAAsC,gBAAZmM,EAAKnM,IAAoC,kBAAZmM,EAAKnM,KACnEqN,EAAWhB,EAAejD,SAGX,IAAbgE,IAAgC,IAAbC,EACrB,GAAIJ,IAAmBZ,EAAgB,CACrC,MAAMQ,EAAc,IAAII,IACjBK,GAAgBT,EAAYC,OAAOM,EAAU,GAEpD,GAAIE,EAAarC,aAAeqC,EAAapC,aAAc,CACzD,MAAMqC,EAAUD,EAAapC,aACvBsC,EAAgB,CAACF,KAAiBL,EAAe1I,UAChDiC,EAAE0E,eAAiBqC,GAAW/G,EAAExG,KAAOsN,EAAatN,KAGrDyN,EAAUZ,EAAYtI,OAAOiC,GAAKA,EAAE0E,eAAiBqC,GAC3DE,EAAQX,OAAOO,EAAU,KAAMG,GAC/BN,EAAkBO,EACpB,MACEZ,EAAYC,OAAOO,EAAU,EAAGC,GAChCJ,EAAkBL,EAEtB,KAAO,CACL,MAAMa,EAAkBT,EAAeG,GAEjCO,EAAoB,IAAIV,GAC9BU,EAAkBb,OAAOM,EAAU,GACnCF,EAAkBS,GAElB,MAAMC,EAAoB,IAAIvB,GAExBiB,EAAe,IAAII,IAER,kBAAZvB,EAAKnM,IAA0BmM,EAAKnM,GAAGuM,WAAW,aAAe9K,EAC/D6L,EAAatN,GAAGuM,WAAW,aAC9Be,EAAatN,GAAK,UAAUsN,EAAatN,OAErB,kBAAZmM,EAAKnM,IAA0BmM,EAAKnM,GAAGuM,WAAW,aAAe9K,EACtE6L,EAAatN,GAAGuM,WAAW,aAC9Be,EAAatN,GAAK,UAAUsN,EAAatN,MAG3CsN,EAAatN,GAAKsN,EAAatN,GAAGsE,QAAQ,qBAAsB,IAGlEsJ,EAAkBd,OAAOO,EAAU,EAAGC,GACtChB,EAAkBsB,EACpB,CAEJ,GAigBMC,mBAAoBC,EAAAA,cAEpBvD,wBAAAC,EAAAA,IAACuD,EAAAA,QAAA,CACCzN,WACAG,iBACAE,iBACAE,WACAI,cACAF,kBACAiN,gBAAiBhN,EACjBiN,gBA5fkB,CAACjO,EAAYwD,EAAoClB,KAC3E,MAAM4L,EAAmB7L,EAAoBC,GACvC6L,EAAsB5L,EAAuBD,GAE7C8L,EAAUpO,EAAGsE,QAAQ,qBAAsB,IAEjD6J,EACED,EAAiB/J,IAAK6G,GACpBA,EAAQhL,KAAOoO,GAAWpD,EAAQhL,KAAOA,EAAK,IAAKgL,KAAYxH,GAASwH,KAqfpEqD,eAhfiB,CAACrO,EAAYsO,EAAkBC,EAAkBjM,KAC1E,MAAM4L,EAAmB7L,EAAoBC,GACvC6L,EAAsB5L,EAAuBD,GAE7C8L,EAAUpO,EAAGsE,QAAQ,qBAAsB,IAE3CkK,EAAQN,EAAiBtB,UAAW5B,GAAYA,EAAQhL,KAAOoO,GAAWpD,EAAQhL,KAAOA,GAC/F,IAAc,IAAVwO,EAAc,OAElB,MAAMxD,EAAUkD,EAAiBM,GAC3B3B,EAAc,IAAIqB,GAElBO,EAA+B,WAAfnM,EAA0B,UAA2B,WAAfA,EAA0B,UAAY,GAElG,GAAI0I,EAAQC,aAAeD,EAAQE,aAAc,CAC/C,MAAMA,EAAeF,EAAQE,aAGvBwD,EAAW,KAFK7B,EAAYtI,OAAOiC,GAAKA,EAAE0E,eAAiBA,GAC7B9B,OAAS,GAG7CyD,EAAY2B,GAAS,IAChBxD,EACHzD,QAAS+G,EACTnD,WAAYuD,GAGd,MAAMhC,EAAkC,CACtC1M,GAAI,GAAGyO,YAAwBhI,EAAAA,YAC/Bc,QAASgH,EACTxO,KAAMiL,EAAQjL,KACdkL,aAAa,EACbC,eACAC,WAAYuD,EACZzF,WAAY+B,EAAQ/B,WACpBC,uBAAuB,GAGzB2D,EAAYC,OAAO0B,EAAQ,EAAG,EAAG9B,GAEjC,IAAA,IAASiC,EAAI,EAAGA,EAAI9B,EAAYzD,OAAQuF,IAClC9B,EAAY8B,GAAGzD,eAAiBA,IAClC2B,EAAY8B,GAAGxD,WAAauD,EAGlC,KAAO,CACL,MAAMxD,EAAezE,EAAAA,UACfmI,EAAe,GAErB/B,EAAY2B,GAAS,IAChBxD,EACHzD,QAAS+G,EACTrD,aAAa,EACbC,eACAC,WAAYyD,GAGd,MAAMlC,EAAkC,CACtC1M,GAAI,GAAGyO,YAAwBhI,EAAAA,YAC/Bc,QAASgH,EACTxO,KAAMiL,EAAQjL,KACdkL,aAAa,EACbC,eACAC,WAAYyD,EACZ3F,WAAY+B,EAAQ/B,WACpBC,uBAAuB,GAGzB2D,EAAYC,OAAO0B,EAAQ,EAAG,EAAG9B,EACnC,CAEAyB,EAAoBtB,IA2aZgC,gBAvakB,CAAC7O,EAAYsC,KACvC,MAAM4L,EAAmB7L,EAAoBC,GACvC6L,EAAsB5L,EAAuBD,GAE7C8L,EAAUpO,EAAGsE,QAAQ,qBAAsB,IAE3CwK,EAAkBZ,EAAiBa,KAAKvI,GAAKA,EAAExG,KAAOoO,GAAW5H,EAAExG,KAAOA,GAEhF,GAAK8O,EAAL,CAEA,GAAIA,EAAgB7D,aAAe6D,EAAgB5D,aAAc,CAC/D,MAAM8D,EAAgBd,EAAiB3J,UAAYiC,EAAE0E,eAAiB4D,EAAgB5D,cAEtF,GAAI8D,EAAc5F,QAAU,EAAG,CAC7B,MAAM6F,EAAmBD,EAAcD,KAAKvI,GAAKA,EAAExG,KAAOoO,GAAW5H,EAAExG,KAAOA,GAC1EiP,IACFA,EAAiBhE,aAAc,EAC/BgE,EAAiB/D,kBAAe,EAChC+D,EAAiB9D,gBAAa,GAEhCgD,EAAoBD,EAAiB3J,OAAOiC,GAAKA,EAAExG,KAAOoO,GAAW5H,EAAExG,KAAOA,GAChF,KAAO,CACL,MACM0O,EAAW,IADcM,EAAczK,OAAOiC,GAAKA,EAAExG,KAAOoO,GAAW5H,EAAExG,KAAOA,GACxCoJ,OAS9C+E,EAPwBD,EAAiB3J,OAAOyG,GAAWA,EAAQhL,KAAOoO,GAAWpD,EAAQhL,KAAOA,GAAImE,IAAI6G,GACtGA,EAAQE,eAAiB4D,EAAgB5D,aACpC,IAAKF,EAASG,WAAYuD,GAE5B1D,GAKX,CACF,MACEmD,EAAoBD,EAAiB3J,OAAOyG,GAAWA,EAAQhL,KAAOoO,GAAWpD,EAAQhL,KAAOA,IAI9Fe,IAAoBf,GACtBgB,EAAmB,KAjCC,GAgadG,UACAgI,cACA9H,eACAI,wBACAQ,uBAIO,OAAZN,kBACC6I,EAAAA,IAAC0E,EAAAA,QAAA,CACCC,OAAoB,OAAZxN,EACRyN,UAAW,IAAMxN,EAAW,MAC5BD,UACAK,eAAgBD,EAChB6J,KAAM3L,EAAc,OAAS,MAC7BkC"}

package/dist/views/template-editor/components/SectionFlowEditor.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+interface SectionFlowEditorProps {
+    modulePath: string;
+    module: string;
+    type: string;
+}
+declare const SectionFlowEditor: React.FC<SectionFlowEditorProps>;
+export default SectionFlowEditor;

package/dist/views/template-editor/components/SectionFormatPanel/index.esm.js

@@ -9,16 +9,16 @@ import DividerControls from "../controllers/DividerControls/index.esm.js";
 import TableControls from "../controllers/TableControls/index.esm.js";
 import SignatureControls from "../controllers/SignatureControls/index.esm.js";
 import CodeControls from "../controllers/CodeControls/index.esm.js";
-import Select from "../../../../components/select/select/index.esm.js";
+import { Select } from "../../../../components/select/select/index.esm.js";
 import { initialStyles } from "../../utils/constant/index.esm.js";
 import { extractStyles, generateInlineStyles, getInitialSectionData } from "../../utils/common/index.esm.js";
 import Paper from "../../../../node_modules/@mui/material/Paper/Paper/index.esm.js";
 import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
 import Tooltip from "../../../../node_modules/@mui/material/Tooltip/Tooltip/index.esm.js";
 import IconButton from "../../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
+import { Save } from "../../../../components/icons/save/index.esm.js";
 import FormControl from "../../../../node_modules/@mui/material/FormControl/FormControl/index.esm.js";
 import MenuItem from "../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
-import { Save } from "../../../../components/icons/save/index.esm.js";
 const sectionTypes = ["text", "text-block", "heading", "heading-2", "heading-3", "heading-4", "buttons", "image", "divider", "table", "signature", "qr-code", "bar-code"];
 const SectionFormatPanel = ({
   section,

package/dist/views/template-editor/components/SectionFormatPanel/index.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/@mui/icons-material/Close/index.js"),l=require("../../../../components/typography/typography/index.js"),n=require("../controllers/TextControls/index.js"),o=require("../controllers/ButtonControls/index.js"),a=require("../controllers/ImageControls/index.js"),s=require("../controllers/DividerControls/index.js"),i=require("../controllers/TableControls/index.js"),d=require("../controllers/SignatureControls/index.js"),u=require("../controllers/CodeControls/index.js"),c=require("../../../../components/select/select/index.js"),m=require("../../utils/constant/index.js"),p=require("../../utils/common/index.js"),b=require("../../../../node_modules/@mui/material/Paper/Paper/index.js"),h=require("../../../../node_modules/@mui/material/Box/Box/index.js"),y=require("../../../../node_modules/@mui/material/Tooltip/Tooltip/index.js"),f=require("../../../../node_modules/@mui/material/IconButton/IconButton/index.js"),v=require("../../../../node_modules/@mui/material/FormControl/FormControl/index.js"),g=require("../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js"),x=require("../../../../components/icons/save/index.js");const S=["text","text-block","heading","heading-2","heading-3","heading-4","buttons","image","divider","table","signature","qr-code","bar-code"];exports.default=({section:$,onClose:j,onUpdate:C,placeholders:w,relation_table:q,handleSave:E})=>{var A,_;const I=t.useMemo(()=>(null==$?void 0:$.type)||"text",[null==$?void 0:$.type]),D=t.useMemo(()=>(null==$?void 0:$.content)||"text",[null==$?void 0:$.content]);t.useState([]);const[T,B]=t.useState((null==(A=null==$?void 0:$.attributes)?void 0:A.rowLevel)||!1),[L,k]=t.useState({name:"",columns:[{id:"col1",header:"Column 1"},{id:"col2",header:"Column 2"},{id:"col3",header:"Column 3"}],rows:[{col1:"",col2:"",col3:""}],border:!0,mergedCells:[]}),[M,H]=t.useState(!0),[N,O]=t.useState(p.extractStyles(D));t.useEffect(()=>{var e,t;if($&&"table"===$.type)if(null==(e=$.attributes)?void 0:e.tableData)k($.attributes.tableData);else{const e=P($.content);e&&(k(e),B((null==(t=null==$?void 0:$.attributes)?void 0:t.rowLevel)||!1))}},[]),t.useEffect(()=>{var e;$&&!M&&(document.createElement("div").innerHTML=$.content,O(null==(e=p.extractStyles($.content))?void 0:e.styles),H(!1))},[$]);const P=e=>{try{const t=(new DOMParser).parseFromString(e,"text/html").querySelector("table");if(!t)return null;const r=t.querySelectorAll("thead tr"),l=t.querySelectorAll("tbody tr");if(0===r.length)return null;const n=r[0].querySelectorAll("th"),o=Array.from(n).map((e,t)=>{var r;return{id:`col${t+1}`,header:(null==(r=e.textContent)?void 0:r.trim())||`Column ${t+1}`}}),a=[];Array.from(r).forEach((e,t)=>{e.querySelectorAll("th").forEach((e,r)=>{var l;const n=parseInt(e.getAttribute("rowspan")||"1"),o=parseInt(e.getAttribute("colspan")||"1");(n>1||o>1)&&a.push({section:"thead",rowStart:t,rowEnd:t+n-1,colStart:r,colEnd:r+o-1,value:(null==(l=e.textContent)?void 0:l.trim())||""})})});const s=Array.from(l).map(e=>{const t=e.querySelectorAll("td"),r={};return t.forEach((e,t)=>{var l;t<o.length&&(r[o[t].id]=(null==(l=e.textContent)?void 0:l.trim())||"")}),r});return Array.from(l).forEach((e,t)=>{e.querySelectorAll("td").forEach((e,r)=>{var l;const n=parseInt(e.getAttribute("rowspan")||"1"),o=parseInt(e.getAttribute("colspan")||"1");(n>1||o>1)&&a.push({section:"tbody",rowStart:t,rowEnd:t+n-1,colStart:r,colEnd:r+o-1,value:(null==(l=e.textContent)?void 0:l.trim())||""})})}),{name:"",columns:o,rows:s.length>0?s:[{}],border:!0,mergedCells:a}}catch(t){return null}},z=t.useCallback(e=>{var t;const{src:r,alt:l,styles:n,text:o,placeholder:a,placeholders:s}=e||(null==$?void 0:$.attributes)||N||{},i={...m.initialStyles[I],...n,...null==N?void 0:N.styles,...null==e?void 0:e.styles},d=p.generateInlineStyles(i);if("buttons"===I)return`<button style="${d}">${o||"Button Text"}</button>`;if("image"===I){let e=d;return(null==i?void 0:i.is_bordered)?(i.padding="10px",e=p.generateInlineStyles(i)):(i.padding="0",e=p.generateInlineStyles(i)),`<img src="${r||""}" alt="${l||""}" style="${e}" />`}if("divider"===I)return`<hr style="${d}" />`;if("table"===I){const{border:e,borderStyle:r,borderColor:l,...n}=i,o=p.generateInlineStyles(i.is_bordered?i:n),a=p.generateInlineStyles(i.tHead||{}),d=p.generateInlineStyles(i.tBody||{}),u=p.generateInlineStyles({...i.thCells||{},...i.is_bordered?{border:e,borderStyle:r,borderColor:l}:{}}),c=p.generateInlineStyles({...i.tbCells||{},...i.is_bordered?{border:e,borderStyle:r,borderColor:l}:{}}),m=(e,t,r)=>{var l;return null==(l=L.mergedCells)?void 0:l.find(l=>l.section===e&&t>=l.rowStart&&t<=l.rowEnd&&r>=l.colStart&&r<=l.colEnd)},b=L.columns.map((e,t)=>{const r=m("thead",0,t);if(r&&t!==r.colStart)return"";const l=r?` rowspan="${r.rowEnd-r.rowStart+1}" colspan="${r.colEnd-r.colStart+1}"`:"",n=r?r.value:e.header;return`<th style="${u}"${l}>${n}</th>`}).filter(e=>""!==e).join("");let h="";if(L.name){const e=L.columns.map((e,t)=>{var r,l;const n=m("tbody",0,t);if(n&&t!==n.colStart)return"";const o=n?` rowspan="${n.rowEnd-n.rowStart+1}" colspan="${n.colEnd-n.colStart+1}"`:"";let a="";if("index"===e.id||"incrementIndex"===e.id)a="{{incrementIndex @index}}";else if(e.id.includes(".")){const t=null==(r=null==L?void 0:L.rows)?void 0:r[0][e.id];a="string"==typeof t?t.replace(L.name+".",""):String(t||"")}else{const t=null==(l=null==L?void 0:L.rows)?void 0:l[0][e.id];a="string"==typeof t?t.replace(L.name+".",""):String(t||"")}return`<td style="${c}"${o}>${a}</td>`}).filter(e=>""!==e).join(""),r=(null==(t=i.tBody)?void 0:t.zebraStriping)?`{{#if (isOdd @index)}}${d}; background-color: ${i.tBody.alternateRowColor||"#f9f9f9"}{{else}}${d}{{/if}}`:d;h=`{{#each ${L.name}}}\n            <tr style="${r}">\n              ${e}\n            </tr>\n          {{/each}}`}else h=L.rows.map((e,t)=>{var r;const l=(null==(r=i.tBody)?void 0:r.zebraStriping)&&t%2==1?`; background-color: ${i.tBody.alternateRowColor||"#f9f9f9"}`:"",n=L.columns.map((r,l)=>{const n=m("tbody",t,l);if(n&&(t!==n.rowStart||l!==n.colStart))return"";let o=e[r.id]||"";Object.keys(e).includes(`${r.id}_static`)&&(o=e[`${r.id}_static`]||""),!o&&(null==s?void 0:s[r.id])&&(o=(e=>{const t=w.find(t=>t.value===e);if(!t)return"";if(void 0!==t.actualValue)return String(t.actualValue);switch(t.type){case"date":/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/@mui/icons-material/Close/index.js"),l=require("../../../../components/typography/typography/index.js"),n=require("../controllers/TextControls/index.js"),o=require("../controllers/ButtonControls/index.js"),a=require("../controllers/ImageControls/index.js"),s=require("../controllers/DividerControls/index.js"),i=require("../controllers/TableControls/index.js"),d=require("../controllers/SignatureControls/index.js"),u=require("../controllers/CodeControls/index.js"),c=require("../../../../components/select/select/index.js"),m=require("../../utils/constant/index.js"),p=require("../../utils/common/index.js"),b=require("../../../../node_modules/@mui/material/Paper/Paper/index.js"),h=require("../../../../node_modules/@mui/material/Box/Box/index.js"),y=require("../../../../node_modules/@mui/material/Tooltip/Tooltip/index.js"),f=require("../../../../node_modules/@mui/material/IconButton/IconButton/index.js"),v=require("../../../../components/icons/save/index.js"),g=require("../../../../node_modules/@mui/material/FormControl/FormControl/index.js"),x=require("../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js");const S=["text","text-block","heading","heading-2","heading-3","heading-4","buttons","image","divider","table","signature","qr-code","bar-code"];exports.default=({section:$,onClose:j,onUpdate:C,placeholders:w,relation_table:q,handleSave:E})=>{var A,_;const I=t.useMemo(()=>(null==$?void 0:$.type)||"text",[null==$?void 0:$.type]),D=t.useMemo(()=>(null==$?void 0:$.content)||"text",[null==$?void 0:$.content]);t.useState([]);const[T,B]=t.useState((null==(A=null==$?void 0:$.attributes)?void 0:A.rowLevel)||!1),[L,k]=t.useState({name:"",columns:[{id:"col1",header:"Column 1"},{id:"col2",header:"Column 2"},{id:"col3",header:"Column 3"}],rows:[{col1:"",col2:"",col3:""}],border:!0,mergedCells:[]}),[M,H]=t.useState(!0),[N,O]=t.useState(p.extractStyles(D));t.useEffect(()=>{var e,t;if($&&"table"===$.type)if(null==(e=$.attributes)?void 0:e.tableData)k($.attributes.tableData);else{const e=P($.content);e&&(k(e),B((null==(t=null==$?void 0:$.attributes)?void 0:t.rowLevel)||!1))}},[]),t.useEffect(()=>{var e;$&&!M&&(document.createElement("div").innerHTML=$.content,O(null==(e=p.extractStyles($.content))?void 0:e.styles),H(!1))},[$]);const P=e=>{try{const t=(new DOMParser).parseFromString(e,"text/html").querySelector("table");if(!t)return null;const r=t.querySelectorAll("thead tr"),l=t.querySelectorAll("tbody tr");if(0===r.length)return null;const n=r[0].querySelectorAll("th"),o=Array.from(n).map((e,t)=>{var r;return{id:`col${t+1}`,header:(null==(r=e.textContent)?void 0:r.trim())||`Column ${t+1}`}}),a=[];Array.from(r).forEach((e,t)=>{e.querySelectorAll("th").forEach((e,r)=>{var l;const n=parseInt(e.getAttribute("rowspan")||"1"),o=parseInt(e.getAttribute("colspan")||"1");(n>1||o>1)&&a.push({section:"thead",rowStart:t,rowEnd:t+n-1,colStart:r,colEnd:r+o-1,value:(null==(l=e.textContent)?void 0:l.trim())||""})})});const s=Array.from(l).map(e=>{const t=e.querySelectorAll("td"),r={};return t.forEach((e,t)=>{var l;t<o.length&&(r[o[t].id]=(null==(l=e.textContent)?void 0:l.trim())||"")}),r});return Array.from(l).forEach((e,t)=>{e.querySelectorAll("td").forEach((e,r)=>{var l;const n=parseInt(e.getAttribute("rowspan")||"1"),o=parseInt(e.getAttribute("colspan")||"1");(n>1||o>1)&&a.push({section:"tbody",rowStart:t,rowEnd:t+n-1,colStart:r,colEnd:r+o-1,value:(null==(l=e.textContent)?void 0:l.trim())||""})})}),{name:"",columns:o,rows:s.length>0?s:[{}],border:!0,mergedCells:a}}catch(t){return null}},z=t.useCallback(e=>{var t;const{src:r,alt:l,styles:n,text:o,placeholder:a,placeholders:s}=e||(null==$?void 0:$.attributes)||N||{},i={...m.initialStyles[I],...n,...null==N?void 0:N.styles,...null==e?void 0:e.styles},d=p.generateInlineStyles(i);if("buttons"===I)return`<button style="${d}">${o||"Button Text"}</button>`;if("image"===I){let e=d;return(null==i?void 0:i.is_bordered)?(i.padding="10px",e=p.generateInlineStyles(i)):(i.padding="0",e=p.generateInlineStyles(i)),`<img src="${r||""}" alt="${l||""}" style="${e}" />`}if("divider"===I)return`<hr style="${d}" />`;if("table"===I){const{border:e,borderStyle:r,borderColor:l,...n}=i,o=p.generateInlineStyles(i.is_bordered?i:n),a=p.generateInlineStyles(i.tHead||{}),d=p.generateInlineStyles(i.tBody||{}),u=p.generateInlineStyles({...i.thCells||{},...i.is_bordered?{border:e,borderStyle:r,borderColor:l}:{}}),c=p.generateInlineStyles({...i.tbCells||{},...i.is_bordered?{border:e,borderStyle:r,borderColor:l}:{}}),m=(e,t,r)=>{var l;return null==(l=L.mergedCells)?void 0:l.find(l=>l.section===e&&t>=l.rowStart&&t<=l.rowEnd&&r>=l.colStart&&r<=l.colEnd)},b=L.columns.map((e,t)=>{const r=m("thead",0,t);if(r&&t!==r.colStart)return"";const l=r?` rowspan="${r.rowEnd-r.rowStart+1}" colspan="${r.colEnd-r.colStart+1}"`:"",n=r?r.value:e.header;return`<th style="${u}"${l}>${n}</th>`}).filter(e=>""!==e).join("");let h="";if(L.name){const e=L.columns.map((e,t)=>{var r,l;const n=m("tbody",0,t);if(n&&t!==n.colStart)return"";const o=n?` rowspan="${n.rowEnd-n.rowStart+1}" colspan="${n.colEnd-n.colStart+1}"`:"";let a="";if("index"===e.id||"incrementIndex"===e.id)a="{{incrementIndex @index}}";else if(e.id.includes(".")){const t=null==(r=null==L?void 0:L.rows)?void 0:r[0][e.id];a="string"==typeof t?t.replace(L.name+".",""):String(t||"")}else{const t=null==(l=null==L?void 0:L.rows)?void 0:l[0][e.id];a="string"==typeof t?t.replace(L.name+".",""):String(t||"")}return`<td style="${c}"${o}>${a}</td>`}).filter(e=>""!==e).join(""),r=(null==(t=i.tBody)?void 0:t.zebraStriping)?`{{#if (isOdd @index)}}${d}; background-color: ${i.tBody.alternateRowColor||"#f9f9f9"}{{else}}${d}{{/if}}`:d;h=`{{#each ${L.name}}}\n            <tr style="${r}">\n              ${e}\n            </tr>\n          {{/each}}`}else h=L.rows.map((e,t)=>{var r;const l=(null==(r=i.tBody)?void 0:r.zebraStriping)&&t%2==1?`; background-color: ${i.tBody.alternateRowColor||"#f9f9f9"}`:"",n=L.columns.map((r,l)=>{const n=m("tbody",t,l);if(n&&(t!==n.rowStart||l!==n.colStart))return"";let o=e[r.id]||"";Object.keys(e).includes(`${r.id}_static`)&&(o=e[`${r.id}_static`]||""),!o&&(null==s?void 0:s[r.id])&&(o=(e=>{const t=w.find(t=>t.value===e);if(!t)return"";if(void 0!==t.actualValue)return String(t.actualValue);switch(t.type){case"date":/* @__PURE__ */
 return(new Date).toLocaleDateString();case"datetime":/* @__PURE__ */
 return(new Date).toLocaleString();case"number":return"123";case"currency":return"$1,234.56";case"email":return"example@domain.com";case"phone":return"+1 (555) 123-4567";case"url":return"https://example.com";default:return t.label||t.value}})(s[r.id]));const a=n?` rowspan="${n.rowEnd-n.rowStart+1}" colspan="${n.colEnd-n.colStart+1}"`:"",i=n?n.value:o;return`<td style="${c}"${a}>${i}</td>`}).filter(e=>""!==e).join("");return`<tr style="${d}${l}">${n}</tr>`}).join("");return`\n        <table style="${o}">\n          <thead>\n            <tr style="${a}">\n              ${b}\n            </tr>\n          </thead>\n          <tbody>\n            ${h}\n          </tbody>\n        </table>\n      `}if("qr-code"===I||"bar-code"===I)return`<div style="${d}">${a}</div>`;if(/<\/?[a-z][\s\S]*>/i.test(D)){const e=(new DOMParser).parseFromString(`<div>${D}</div>`,"text/html").body.firstChild;return e&&e.nodeType===Node.ELEMENT_NODE?(e.querySelectorAll("*").forEach(e=>{if("SCRIPT"===e.tagName||"STYLE"===e.tagName)return;const t=e.getAttribute("style")||"",r={};t.split(";").forEach(e=>{const[t,l]=e.split(":").map(e=>e.trim());t&&l&&(r[t]=l)});const l={};d.split(";").forEach(e=>{const[t,r]=e.split(":").map(e=>e.trim());t&&r&&(l[t]=r)}),"P"===e.tagName||"DIV"===e.tagName?l["line-height"]="1.5":["H1","H2","H3","H4","H5","H6"].includes(e.tagName)&&(l["line-height"]="1.2",l.margin="0.5em 0");const n={...r,...l},o=Object.entries(n).filter(([e,t])=>e&&t).map(([e,t])=>`${e}: ${t}`).join("; ");e.setAttribute("style",o)}),e.innerHTML):D}switch(I){case"text":case"text-block":default:return`<p style="${d}">${D}</p>`;case"heading":return`<h1 style="${d}">${D}</h1>`;case"heading-2":return`<h2 style="${d}">${D}</h2>`;case"heading-3":return`<h3 style="${d}">${D}</h3>`;case"heading-4":return`<h4 style="${d}">${D}</h4>`;case"signature":return`<div style="${d}">${D}</div>`}},[JSON.stringify($)]),F=()=>{const e={content:z(),type:I,rowLevel:T,name:L.name||"",attributes:{...(null==$?void 0:$.attributes)||{},..."table"===I?{tableData:L}:{}},is_edited_from_source:(null==$?void 0:$.is_edited_from_source)||!1};C(e)};t.useEffect(()=>{F()},[L]);const R=e=>{var t;if(!$)return;const r={...(null==(t=$.attributes)?void 0:t.styles)||{},...e.styles||{}},l={...$.attributes||{},...e,styles:r,..."table"===I?{tableData:L}:{}},{id:n,...o}=$,a=z(l);O(l),C({...o,content:a,attributes:l})};/* @__PURE__ */
 return e.jsxs(b.default,{elevation:3,sx:{width:{xs:"100%",sm:320,lg:390},height:"100%",overflow:"auto",borderLeft:"1px solid",borderColor:"divider",display:"flex",flexDirection:"column",bgcolor:"background.paper",boxShadow:"none"},children:[
 /* @__PURE__ */e.jsxs(h.default,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",p:2,borderBottom:"1px solid",borderColor:"divider",bgcolor:"grey.50"},children:[
 /* @__PURE__ */e.jsxs(l.Typography,{type:"s1",weight:"bold",color:"theme.neutral.1000",children:["Format ",I?(null==(_=null==I?void 0:I.charAt(0))?void 0:_.toUpperCase())+(null==I?void 0:I.slice(1).replace(/-/g," ")):""]}),
 /* @__PURE__ */e.jsx(y.default,{title:"Save and Close",children:/* @__PURE__ */e.jsxs(h.default,{children:[
-/* @__PURE__ */e.jsx(f.default,{size:"small",onClick:()=>{F(),null==E||E(),j()},"aria-label":"Save",children:/* @__PURE__ */e.jsx(x.Save,{fontSize:"small"})}),
+/* @__PURE__ */e.jsx(f.default,{size:"small",onClick:()=>{F(),null==E||E(),j()},"aria-label":"Save",children:/* @__PURE__ */e.jsx(v.Save,{fontSize:"small"})}),
 /* @__PURE__ */e.jsx(f.default,{size:"small",onClick:j,"aria-label":"Close",children:/* @__PURE__ */e.jsx(r.default,{fontSize:"small"})})]})})]}),
 /* @__PURE__ */e.jsxs(h.default,{sx:{p:2,flex:1,pb:10,overflowY:"auto"},children:[
-/* @__PURE__ */e.jsx(h.default,{sx:{mb:2},children:/* @__PURE__ */e.jsx(v.default,{size:"small",fullWidth:!0,children:/* @__PURE__ */e.jsx(c.default,{value:null==$?void 0:$.type,onChange:e=>(e=>{const t=p.getInitialSectionData(e);C({...$,...t}),"table"===e&&k({name:"",columns:[{id:"col1",header:"Column 1"},{id:"col2",header:"Column 2"},{id:"col3",header:"Column 3"}],rows:[{col1:"",col2:"",col3:""}],border:!0,mergedCells:[]})})(e.target.value),renderValue:e=>e?e.charAt(0).toUpperCase()+e.slice(1).replace(/-/g," "):"",label:"Select Preset",displayEmpty:!0,children:S.map(t=>/* @__PURE__ */e.jsx(g.default,{value:t,children:/* @__PURE__ */e.jsx(l.Typography,{type:"s4",color:"theme.secondary.1000",children:t.charAt(0).toUpperCase()+t.slice(1).replace(/-/g," ")})},t))})})}),$&&("text"===I||"heading"===I||"heading-2"===I||"heading-3"===I||"heading-4"===I)&&/* @__PURE__ */e.jsx(n.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R}),"buttons"===I&&/* @__PURE__ */e.jsx(o.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R}),"image"===I&&/* @__PURE__ */e.jsx(a.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R}),"divider"===I&&/* @__PURE__ */e.jsx(s.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R}),"table"===I&&/* @__PURE__ */e.jsx(i.default,{tableData:{...L,rows:L.rows.map(e=>{const t={};return Object.keys(e).forEach(r=>{t[r]=String(e[r]??"")}),t})},setTableData:e=>{var t;t={...e,border:L.border,name:L.name||""},k(t),F()},attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R,placeholders:w,handleSave:E,setParentRowLevel:B,levelType:T,relation_table:q}),"signature"===I&&/* @__PURE__ */e.jsx(d.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R}),$&&("qr-code"===I||"bar-code"===I)&&/* @__PURE__ */e.jsx(u.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R})]})]})};
+/* @__PURE__ */e.jsx(h.default,{sx:{mb:2},children:/* @__PURE__ */e.jsx(g.default,{size:"small",fullWidth:!0,children:/* @__PURE__ */e.jsx(c.Select,{value:null==$?void 0:$.type,onChange:e=>(e=>{const t=p.getInitialSectionData(e);C({...$,...t}),"table"===e&&k({name:"",columns:[{id:"col1",header:"Column 1"},{id:"col2",header:"Column 2"},{id:"col3",header:"Column 3"}],rows:[{col1:"",col2:"",col3:""}],border:!0,mergedCells:[]})})(e.target.value),renderValue:e=>e?e.charAt(0).toUpperCase()+e.slice(1).replace(/-/g," "):"",label:"Select Preset",displayEmpty:!0,children:S.map(t=>/* @__PURE__ */e.jsx(x.default,{value:t,children:/* @__PURE__ */e.jsx(l.Typography,{type:"s4",color:"theme.secondary.1000",children:t.charAt(0).toUpperCase()+t.slice(1).replace(/-/g," ")})},t))})})}),$&&("text"===I||"heading"===I||"heading-2"===I||"heading-3"===I||"heading-4"===I)&&/* @__PURE__ */e.jsx(n.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R}),"buttons"===I&&/* @__PURE__ */e.jsx(o.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R}),"image"===I&&/* @__PURE__ */e.jsx(a.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R}),"divider"===I&&/* @__PURE__ */e.jsx(s.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R}),"table"===I&&/* @__PURE__ */e.jsx(i.default,{tableData:{...L,rows:L.rows.map(e=>{const t={};return Object.keys(e).forEach(r=>{t[r]=String(e[r]??"")}),t})},setTableData:e=>{var t;t={...e,border:L.border,name:L.name||""},k(t),F()},attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R,placeholders:w,handleSave:E,setParentRowLevel:B,levelType:T,relation_table:q}),"signature"===I&&/* @__PURE__ */e.jsx(d.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R}),$&&("qr-code"===I||"bar-code"===I)&&/* @__PURE__ */e.jsx(u.default,{attrs:(null==$?void 0:$.attributes)||{},updateAttrs:R})]})]})};
 //# sourceMappingURL=index.js.map