@grapesjs/studio-sdk-plugins 1.0.33-rc.1 → 1.0.33

package/dist/flexComponent/index.umd.js

@@ -1,26 +1,26 @@
-(function(T,L){typeof exports=="object"&&typeof module<"u"?module.exports=L():typeof define=="function"&&define.amd?define(L):(T=typeof globalThis<"u"?globalThis:T||self,T.StudioSdkPlugins_flexComponent=L())})(this,function(){"use strict";const T="app.grapesjs.com",L="app-stage.grapesjs.com",ae=[T,"app2.grapesjs.com",L,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],Se="license:check:start",ye="license:check:end",be=()=>typeof window<"u",Ce=({isDev:n,isStage:e})=>`${n?"":`https://${e?L:T}`}/api`,Pe=()=>{const n=be()&&window.location.hostname;return!!n&&(ae.includes(n)||ae.some(e=>n.endsWith(e)))};function ze(n){return typeof n=="function"}async function xe({path:n,baseApiUrl:e,method:t="GET",headers:s={},params:i,body:a}){const l=`${e||Ce({isDev:!1,isStage:!1})}${n}`,c={method:t,headers:{"Content-Type":"application/json",...s}};a&&(c.body=JSON.stringify(a));const g=i?new URLSearchParams(i).toString():"",p=g?`?${g}`:"",u=await fetch(`${l}${p}`,c);if(!u.ok)throw new Error(`HTTP error! status: ${u.status}`);return u.json()}var A=(n=>(n.free="free",n.startup="startup",n.business="business",n.enterprise="enterprise",n))(A||{}),oe=(n=>(n.web="web",n.email="email",n.document="document",n.react="react",n))(oe||{});const re={[A.free]:0,[A.startup]:10,[A.business]:20,[A.enterprise]:30};function we(n){const e=n;return e.init=t=>s=>n(s,t),e}const Ie=n=>we(n);async function Re({editor:n,plan:e,pluginName:t,licenseKey:s,cleanup:i}){let a="",o=!1;const l=Pe(),c=p=>{console.warn("Cleanup plugin:",t,"Reason:",p),i()},g=(p={})=>{var y;const{error:u,sdkLicense:f}=p,I=(y=p.plan)==null?void 0:y.category;if(!(f||p.license)||u)c(u||"Invalid license");else if(I){const R=re[e],v=re[I];R>v&&c({pluginRequiredPlan:e,licensePlan:I})}};n.on(Se,p=>{a=p==null?void 0:p.baseApiUrl,o=!0}),n.on(ye,p=>{g(p)}),setTimeout(async()=>{if(!o){if(l)return;if(s){const p=await ve({licenseKey:s,pluginName:t,baseApiUrl:a});p&&g(p)}else c("The `licenseKey` option not provided")}},2e3)}async function ve(n){const{licenseKey:e,pluginName:t,baseApiUrl:s}=n;try{return(await xe({baseApiUrl:s,path:`/sdk/${e||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(i){return console.error("Error during SDK license check:",i),!1}}const ce=n=>e=>{var t;return((t=e.getAttribute)==null?void 0:t.call(e,K))===n},Ge=(...n)=>e=>n.some(t=>e.is(t)),Ee=(...n)=>(e,t)=>n.some(s=>t.is(s)),le="gjs-plg-",K="data-type-role",B=class B{constructor(e){this.config=e}getSize(e){var t;return(t=this.config)!=null&&t.getSize?this.config.getSize(e):te(e.componentColumn,B.CSS_FLEX_BASIS)}setSize(e){var t;if((t=this.config)!=null&&t.setSize)this.config.setSize(e);else{const{componentColumn:s,sizeValue:i,partial:a}=e;s.addStyle({[B.CSS_FLEX_BASIS]:i},{partial:a})}}};B.CSS_FLEX_BASIS="flex-basis";let J=B;const F=class F{constructor(e){this.config=e}isGapSupported(){return!0}getGap(e){var t;return(t=this.config)!=null&&t.getGap?this.config.getGap(e):te(e.componentRow,F.CSS_GAP)}setGap(e){var t;if((t=this.config)!=null&&t.setGap)this.config.setGap(e);else{const{componentRow:s,gapValue:i,partial:a}=e;s.addStyle({[F.CSS_GAP]:i},{partial:a})}}};F.CSS_GAP="gap";let q=F;const Y=class Y{constructor(e){this.config=e}getParentSize(e){var a;if((a=this.config)!=null&&a.getParentSize)return this.config.getParentSize(e);const{componentRow:t,isVertical:s}=e,i=t.getEl();return i?s?i.clientHeight:i.clientWidth:0}isLayoutVertical(e){var s;if((s=this.config)!=null&&s.isParentVertical)return this.config.isParentVertical(e);const t=te(e.componentRow,Y.CSS_FLEX_DIRECTION,!0);return t==="column"||t==="column-reverse"}};Y.CSS_FLEX_DIRECTION="flex-direction";let Z=Y;const k=class k{constructor(e){this.config=e}getSize(e){var s;if((s=this.config)!=null&&s.getSize)return this.config.getSize(e);const t=e.componentColumn;if(t.is(k.MJML_COLUMN_TYPE)){const a=t.getAttributes().width;if(a&&(a.includes("%")||!isNaN(parseFloat(a))))return parseFloat(a);const o=t.parent();return 100/(o?o.components().length:1)}return 0}setSize(e){var t;if((t=this.config)!=null&&t.setSize)this.config.setSize(e);else{const{componentColumn:s,sizeValue:i,partial:a}=e;s.is(k.MJML_COLUMN_TYPE)&&s.addAttributes({width:`${parseFloat(i)}%`},{partial:a})}}};k.MJML_COLUMN_TYPE="mj-column";let Q=k;const U=class U{constructor(e){this.config=e}isGapSupported(){return!1}getGap(e){var s;if((s=this.config)!=null&&s.getGap)return this.config.getGap(e);const{componentRow:t}=e;if(t.is(U.MJML_SECTION_TYPE)){const i=t.getAttributes();if(i&&i.padding)return parseInt(i.padding,10)||0}return 0}setGap(e){var t,s;(s=(t=this.config)==null?void 0:t.setGap)==null||s.call(t,e)}};U.MJML_SECTION_TYPE="mj-section";let ee=U;class Te{constructor(e){this.config=e}getParentSize(e){var o;if((o=this.config)!=null&&o.getParentSize)return this.config.getParentSize(e);const{componentRow:t,isVertical:s}=e,i=t.getEl();if(!i)return 0;let a=i;if(i.tagName!=="TABLE"){const l=i.querySelectorAll("table");l.length&&(a=l[0])}return s?a.clientHeight:a.clientWidth}isLayoutVertical(e){var t;return(t=this.config)!=null&&t.isParentVertical?this.config.isParentVertical(e):!1}}class ${constructor(){this.handlerCache=new Map}static getInstance(){return $.instance||($.instance=new $),$.instance}getHandlers(e){const t=`${e.projectType}-${e.disableGapHandler?"nogap":"gap"}`;return this.handlerCache.has(t)||(M(e)?this.handlerCache.set(t,{sizeHandler:new Q(e),gapHandler:new ee(e),parentSizeHandler:new Te(e)}):this.handlerCache.set(t,{sizeHandler:new J(e),gapHandler:new q(e),parentSizeHandler:new Z(e)})),this.handlerCache.get(t)}}function E(n){return $.getInstance().getHandlers(n)}const pe=n=>{n.style.display="none"},de=n=>{n.style.display="block"},V=n=>+parseFloat(`${n}`).toFixed(2),M=n=>n.projectType===oe.email,Le=n=>n?["top","bottom"]:["left","right"],Ae=n=>{const e=n.parent();return e?e.components().models.indexOf(n)===0:!1},$e=n=>{const e=n.parent();if(!e)return!1;const t=e.components().models;return t.indexOf(n)===t.length-1},Me=n=>{const e=n.parent();if(!e)return!1;const t=e.components().models;return t.length>1&&n.index()===t.length-1},He=(n,e,t,s)=>{const a=n+(t?e==="top"?-1:e==="bottom"?1:0:e==="left"?-1:e==="right"?1:0);return a>=0&&a<s?a:-1},O=n=>n==="top"||n==="bottom",Ne=(n,e)=>!!(Ae(n)&&(e==="left"||e==="top")||$e(n)&&(e==="right"||e==="bottom")),Ve=n=>{const e=n.parent();return e?e.components().models.length>1:!1},ue=(n,e)=>n==="right"||n==="bottom"?e>0:e<0,te=(n,e,t=!1)=>{const s=!t,i=n.getEl();if(!i)return s?0:"";const o=window.getComputedStyle(i)[e]||"";if(s){let l;return typeof o=="string"?(l=parseFloat(o.replace(/[^-\d.]/g,"")),isNaN(l)&&(l=0)):l=Number(o)||0,l}return o},he=(n,e,t)=>{const s=ne({componentRow:n,isVertical:e},t),i=n.components().models;return s*(i.length-1)},j=(n,e)=>E(e).parentSizeHandler.isLayoutVertical({componentRow:n}),_=(n,e)=>E(e).sizeHandler.getSize(n),ne=(n,e)=>{if(e!=null&&e.disableGapHandler)return 0;const{gapHandler:t,parentSizeHandler:s}=E(e);if(!t.isGapSupported())return 0;const i=t.getGap(n),a=s.getParentSize(n);return i/100*a},se=(n,e)=>E(e).parentSizeHandler.getParentSize(n),D=(n,e)=>{E(e).sizeHandler.setSize(n)},ge=(n,e)=>{const t=_(n,e);D({...n,sizeValue:`${t}%`,partial:!1},e)},fe=(n,e)=>{if(e!=null&&e.disableGapHandler)return;const{gapHandler:t}=E(e);t.isGapSupported()&&t.setGap(n)},je=(n,e)=>{const t=n.getStyle().gap;if(!t)return;const s=n.components().models,i={componentRow:n,isVertical:j(n,e)};s.map(a=>ge({...i,componentColumn:a},e)),fe({...i,gapValue:String(t),partial:!1},e)};function _e(n,e){const{Blocks:t}=n,{typeColumn:s,typeRow:i,blocks:a}=e;if(a===!1||M(e))return;const o=u=>({type:i,components:u.map(f=>({type:s,style:{"flex-basis":`${f}%`}}))}),l=u=>`<div class="gs-block-item__flex-row" style="display: flex; height: 1.75rem; width: 100%; flex-wrap: nowrap; gap: 0.5rem;">
-      ${u.map(f=>`<div style="flex-basis: ${f}%; border-color: currentColor; border-width: 2px; border-radius: 0.12rem;"></div>`).join("")}
-    </div>`,c=(u,f)=>({id:`flex-row-${f.join("-")}`,label:u,category:"Layout",select:!0,full:!0,attributes:{class:"gs-block-item__flex gs-utl-w-full"},media:l(f),content:o(f)}),g=[c("1 Column",[100]),c("2 Columns 50/50",[50,50]),c("2 Columns 25/75",[25,75]),c("2 Columns 75/25",[75,25]),c("3 Columns",[33.33,33.33,33.33]),c("3 Columns 50/25/25",[50,25,25]),c("3 Columns 25/50/25",[25,50,25]),c("3 Columns 25/25/50",[25,25,50]),c("4 Columns",[25,25,25,25]),c("5 Columns",[20,20,20,20,20])],p=ze(a)?a({blocks:g}):g;return p.forEach(u=>t.add(u.id,u)),()=>{p.forEach(u=>t.remove(u.id))}}const De=(n,e)=>{const{Components:t}=n,{typeRow:s,typeColumn:i,extendTypeColumn:a}=e,o=`${le}${i}`,c=!!i&&!!t.getType(i)&&!a;if(!(!i||c||M(e)))return t.addType(i,{isComponent:ce(i),model:{defaults:{name:"Column",resizable:!1,emptyState:!0,classes:o,icon:'<svg viewBox="0 0 24 24"><path d="M14.5 2.3A1.8 1.8 0 0 0 12.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8zm-8 0A1.8 1.8 0 0 0 4.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',draggable:Ee(s),attributes:{[K]:i},styles:`
+(function(R,A){typeof exports=="object"&&typeof module<"u"?module.exports=A():typeof define=="function"&&define.amd?define(A):(R=typeof globalThis<"u"?globalThis:R||self,R.StudioSdkPlugins_flexComponent=A())})(this,function(){"use strict";const R="app.grapesjs.com",A="app-stage.grapesjs.com",at=[R,"app2.grapesjs.com",A,"app-stage2.grapesjs.com","localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],St="license:check:start",yt="license:check:end",bt=()=>typeof window<"u",Pt=({isDev:n,isStage:t,isPlatform:e})=>`${n?"":`https://${t?A:R}`}/${e?"platform-api":"api"}`,zt=()=>{const n=bt()&&window.location.hostname;return!!n&&(at.includes(n)||at.some(t=>n.endsWith(t)))};function Ct(n){return typeof n=="function"}async function xt({path:n,baseApiUrl:t,method:e="GET",headers:s={},params:i,body:a}){const c=`${t||Pt({isDev:!1,isStage:!1})}${n}`,p={method:e,headers:{"Content-Type":"application/json",...s}};a&&(p.body=JSON.stringify(a));const u=i?new URLSearchParams(i).toString():"",f=u?`?${u}`:"",r=await fetch(`${c}${f}`,p);if(!r.ok)throw new Error(`HTTP error! status: ${r.status}`);return r.json()}var $=(n=>(n.free="free",n.startup="startup",n.business="business",n.enterprise="enterprise",n))($||{}),ot=(n=>(n.web="web",n.email="email",n.document="document",n.react="react",n))(ot||{});const rt={[$.free]:0,[$.startup]:10,[$.business]:20,[$.enterprise]:30};function wt(n){const t=n;return t.init=e=>s=>n(s,e),t}const It=n=>wt(n);async function vt({editor:n,plan:t,pluginName:e,licenseKey:s,onLicenseCheckResponse:i,cleanup:a}){let o="",c=!1;const p=zt(),u=r=>{console.warn("Cleanup plugin:",e,"Reason:",r),a()},f=(r={})=>{var x;const{error:g,sdkLicense:E}=r,S=(x=r.plan)==null?void 0:x.category;if(!(E||r.license)||g)u(g||"Invalid license");else if(S){const v=rt[t],b=rt[S];v>b&&u({pluginRequiredPlan:t,licensePlan:S})}};n.on(St,r=>{o=r==null?void 0:r.baseApiUrl,c=!0}),n.on(yt,r=>{i==null||i(r),f(r)}),setTimeout(async()=>{if(!c){if(p)return;if(s){const r=await Gt({licenseKey:s,pluginName:e,baseApiUrl:o});i==null||i(r),r&&f(r)}else u("The `licenseKey` option not provided")}},2e3)}async function Gt(n){const{licenseKey:t,pluginName:e,baseApiUrl:s}=n;try{return(await xt({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:e}})).result||{}}catch(i){return console.error("Error during SDK license check:",i),!1}}const lt=n=>t=>{var e;return((e=t.getAttribute)==null?void 0:e.call(t,K))===n},Et=(...n)=>t=>n.some(e=>t.is(e)),Tt=(...n)=>(t,e)=>n.some(s=>e.is(s)),ct="gjs-plg-",K="data-type-role",B=class B{constructor(t){this.config=t}getSize(t){var e;return(e=this.config)!=null&&e.getSize?this.config.getSize(t):et(t.componentColumn,B.CSS_FLEX_BASIS)}setSize(t){var e;if((e=this.config)!=null&&e.setSize)this.config.setSize(t);else{const{componentColumn:s,sizeValue:i,partial:a}=t;s.addStyle({[B.CSS_FLEX_BASIS]:i},{partial:a})}}};B.CSS_FLEX_BASIS="flex-basis";let J=B;const F=class F{constructor(t){this.config=t}isGapSupported(){return!0}getGap(t){var e;return(e=this.config)!=null&&e.getGap?this.config.getGap(t):et(t.componentRow,F.CSS_GAP)}setGap(t){var e;if((e=this.config)!=null&&e.setGap)this.config.setGap(t);else{const{componentRow:s,gapValue:i,partial:a}=t;s.addStyle({[F.CSS_GAP]:i},{partial:a})}}};F.CSS_GAP="gap";let q=F;const U=class U{constructor(t){this.config=t}getParentSize(t){var a;if((a=this.config)!=null&&a.getParentSize)return this.config.getParentSize(t);const{componentRow:e,isVertical:s}=t,i=e.getEl();return i?s?i.clientHeight:i.clientWidth:0}isLayoutVertical(t){var s;if((s=this.config)!=null&&s.isParentVertical)return this.config.isParentVertical(t);const e=et(t.componentRow,U.CSS_FLEX_DIRECTION,!0);return e==="column"||e==="column-reverse"}};U.CSS_FLEX_DIRECTION="flex-direction";let Z=U;const O=class O{constructor(t){this.config=t}getSize(t){var s;if((s=this.config)!=null&&s.getSize)return this.config.getSize(t);const e=t.componentColumn;if(e.is(O.MJML_COLUMN_TYPE)){const a=e.getAttributes().width;if(a&&(a.includes("%")||!isNaN(parseFloat(a))))return parseFloat(a);const o=e.parent();return 100/(o?o.components().length:1)}return 0}setSize(t){var e;if((e=this.config)!=null&&e.setSize)this.config.setSize(t);else{const{componentColumn:s,sizeValue:i,partial:a}=t;s.is(O.MJML_COLUMN_TYPE)&&s.addAttributes({width:`${parseFloat(i)}%`},{partial:a})}}};O.MJML_COLUMN_TYPE="mj-column";let Q=O;const k=class k{constructor(t){this.config=t}isGapSupported(){return!1}getGap(t){var s;if((s=this.config)!=null&&s.getGap)return this.config.getGap(t);const{componentRow:e}=t;if(e.is(k.MJML_SECTION_TYPE)){const i=e.getAttributes();if(i&&i.padding)return parseInt(i.padding,10)||0}return 0}setGap(t){var e,s;(s=(e=this.config)==null?void 0:e.setGap)==null||s.call(e,t)}};k.MJML_SECTION_TYPE="mj-section";let tt=k;class Rt{constructor(t){this.config=t}getParentSize(t){var o;if((o=this.config)!=null&&o.getParentSize)return this.config.getParentSize(t);const{componentRow:e,isVertical:s}=t,i=e.getEl();if(!i)return 0;let a=i;if(i.tagName!=="TABLE"){const c=i.querySelectorAll("table");c.length&&(a=c[0])}return s?a.clientHeight:a.clientWidth}isLayoutVertical(t){var e;return(e=this.config)!=null&&e.isParentVertical?this.config.isParentVertical(t):!1}}class M{constructor(){this.handlerCache=new Map}static getInstance(){return M.instance||(M.instance=new M),M.instance}getHandlers(t){const e=`${t.projectType}-${t.disableGapHandler?"nogap":"gap"}`;return this.handlerCache.has(e)||(H(t)?this.handlerCache.set(e,{sizeHandler:new Q(t),gapHandler:new tt(t),parentSizeHandler:new Rt(t)}):this.handlerCache.set(e,{sizeHandler:new J(t),gapHandler:new q(t),parentSizeHandler:new Z(t)})),this.handlerCache.get(e)}}function T(n){return M.getInstance().getHandlers(n)}const pt=n=>{n.style.display="none"},dt=n=>{n.style.display="block"},V=n=>+parseFloat(`${n}`).toFixed(2),H=n=>n.projectType===ot.email,At=n=>n?["top","bottom"]:["left","right"],$t=n=>{const t=n.parent();return t?t.components().models.indexOf(n)===0:!1},Mt=n=>{const t=n.parent();if(!t)return!1;const e=t.components().models;return e.indexOf(n)===e.length-1},Ht=n=>{const t=n.parent();if(!t)return!1;const e=t.components().models;return e.length>1&&n.index()===e.length-1},Lt=(n,t,e,s)=>{const a=n+(e?t==="top"?-1:t==="bottom"?1:0:t==="left"?-1:t==="right"?1:0);return a>=0&&a<s?a:-1},X=n=>n==="top"||n==="bottom",Nt=(n,t)=>!!($t(n)&&(t==="left"||t==="top")||Mt(n)&&(t==="right"||t==="bottom")),Vt=n=>{const t=n.parent();return t?t.components().models.length>1:!1},ut=(n,t)=>n==="right"||n==="bottom"?t>0:t<0,et=(n,t,e=!1)=>{const s=!e,i=n.getEl();if(!i)return s?0:"";const o=window.getComputedStyle(i)[t]||"";if(s){let c;return typeof o=="string"?(c=parseFloat(o.replace(/[^-\d.]/g,"")),isNaN(c)&&(c=0)):c=Number(o)||0,c}return o},ht=(n,t,e)=>{const s=nt({componentRow:n,isVertical:t},e),i=n.components().models;return s*(i.length-1)},j=(n,t)=>T(t).parentSizeHandler.isLayoutVertical({componentRow:n}),_=(n,t)=>T(t).sizeHandler.getSize(n),nt=(n,t)=>{if(t!=null&&t.disableGapHandler)return 0;const{gapHandler:e,parentSizeHandler:s}=T(t);if(!e.isGapSupported())return 0;const i=e.getGap(n),a=s.getParentSize(n);return i/100*a},st=(n,t)=>T(t).parentSizeHandler.getParentSize(n),D=(n,t)=>{T(t).sizeHandler.setSize(n)},gt=(n,t)=>{const e=_(n,t);D({...n,sizeValue:`${e}%`,partial:!1},t)},ft=(n,t)=>{if(t!=null&&t.disableGapHandler)return;const{gapHandler:e}=T(t);e.isGapSupported()&&e.setGap(n)},jt=(n,t)=>{const e=n.getStyle().gap;if(!e)return;const s=n.components().models,i={componentRow:n,isVertical:j(n,t)};s.map(a=>gt({...i,componentColumn:a},t)),ft({...i,gapValue:String(e),partial:!1},t)};function _t(n,t){const{Blocks:e}=n,{typeColumn:s,typeRow:i,blocks:a}=t;if(a===!1||H(t))return;const o=r=>({type:i,components:r.map(g=>({type:s,style:{"flex-basis":`${g}%`}}))}),c=r=>`<div class="gs-block-item__flex-row" style="display: flex; height: 1.75rem; width: 100%; flex-wrap: nowrap; gap: 0.5rem;">
+      ${r.map(g=>`<div style="flex-basis: ${g}%; border-color: currentColor; border-width: 2px; border-radius: 0.12rem;"></div>`).join("")}
+    </div>`,p=(r,g)=>({id:`flex-row-${g.join("-")}`,label:r,category:"Layout",select:!0,full:!0,attributes:{class:"gs-block-item__flex gs-utl-w-full"},media:c(g),content:o(g)}),u=[p("1 Column",[100]),p("2 Columns 50/50",[50,50]),p("2 Columns 25/75",[25,75]),p("2 Columns 75/25",[75,25]),p("3 Columns",[33.33,33.33,33.33]),p("3 Columns 50/25/25",[50,25,25]),p("3 Columns 25/50/25",[25,50,25]),p("3 Columns 25/25/50",[25,25,50]),p("4 Columns",[25,25,25,25]),p("5 Columns",[20,20,20,20,20])],f=Ct(a)?a({blocks:u}):u;return f.forEach(r=>e.add(r.id,r)),()=>{f.forEach(r=>e.remove(r.id))}}const Dt=(n,t)=>{const{Components:e}=n,{typeRow:s,typeColumn:i,extendTypeColumn:a}=t,o=`${ct}${i}`,p=!!i&&!!e.getType(i)&&!a;if(!(!i||p||H(t)))return e.addType(i,{isComponent:lt(i),model:{defaults:{name:"Column",resizable:!1,emptyState:!0,classes:o,icon:'<svg viewBox="0 0 24 24"><path d="M14.5 2.3A1.8 1.8 0 0 0 12.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8zm-8 0A1.8 1.8 0 0 0 4.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',draggable:Tt(s),attributes:{[K]:i},styles:`
           .${o} {
             flex-grow: 1;
           }
-        `}}}),()=>{t.removeType(i)}},Be=(n,e)=>{const{Components:t}=n,{typeRow:s,typeColumn:i,extendTypeRow:a}=e,o=`${le}${s}`,c=!!s&&!!t.getType(s)&&!a;if(!(!s||c||M(e)))return t.addType(s,{isComponent:ce(s),model:{defaults:{name:"Row",classes:o,icon:'<svg viewBox="0 0 24 24"><path d="M4 4.8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3A1.8 1.8 0 0 0 20 4.7zm0 8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',emptyState:{styleIn:"width: 100%"},attributes:{[K]:s},droppable:Ge(i),traits:[{type:"checkbox",name:"snap",label:"Enable Snap",default:e.snapEnabled,changeProp:!0},{type:"number",name:"snap-divisions",label:"Snap Divisions",min:1,max:12,step:1,default:e.snapDivisions,changeProp:!0}],resizable:{tl:0,tc:0,tr:0,cl:0,bl:0,br:0},styles:`
+        `}}}),()=>{e.removeType(i)}},Bt=(n,t)=>{const{Components:e}=n,{typeRow:s,typeColumn:i,extendTypeRow:a}=t,o=`${ct}${s}`,p=!!s&&!!e.getType(s)&&!a;if(!(!s||p||H(t)))return e.addType(s,{isComponent:lt(s),model:{defaults:{name:"Row",classes:o,icon:'<svg viewBox="0 0 24 24"><path d="M4 4.8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3A1.8 1.8 0 0 0 20 4.7zm0 8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',emptyState:{styleIn:"width: 100%"},attributes:{[K]:s},droppable:Et(i),traits:[{type:"checkbox",name:"snap",label:"Enable Snap",default:t.snapEnabled,changeProp:!0},{type:"number",name:"snap-divisions",label:"Snap Divisions",min:1,max:12,step:1,default:t.snapDivisions,changeProp:!0}],resizable:{tl:0,tc:0,tr:0,cl:0,bl:0,br:0},styles:`
           .${o} {
             display: flex;
             align-items: stretch;
             flex-wrap: nowrap;
           }
-        `}}}),()=>{t.removeType(s)}},Fe="flexComponent",ke=A.startup;class Oe{constructor(){this.resizableChildTypes=new Set,this.gapAdjustableParentTypes=new Set,this.typeRelationships=new Map}registerResizableChild(e){this.resizableChildTypes.add(e)}registerGapAdjustableParent(e){this.gapAdjustableParentTypes.add(e)}registerTypeRelationship(e,t){this.typeRelationships.has(e)||this.typeRelationships.set(e,new Set),this.typeRelationships.get(e).add(t),this.registerResizableChild(t),this.registerGapAdjustableParent(e)}isResizableChild(e){return this.resizableChildTypes.has(e.get("type"))}isGapAdjustableParent(e){return this.gapAdjustableParentTypes.has(e.get("type"))}isValidRelationship(e,t){const s=e.get("type"),i=t.get("type");return this.typeRelationships.has(s)?this.typeRelationships.get(s).has(i):!1}}class Xe{constructor(e,t,s){this.editor=e,this.registry=t,this.opts=s,this.resizeState=new WeakMap}getState(e){return this.resizeState.has(e)||this.resizeState.set(e,{}),this.resizeState.get(e)}clearState(e){return this.resizeState.delete(e)}startResize(e,t,s){const{opts:i}=this,a=this.getState(e);a.direction=t,a.startX=s.clientX,a.startY=s.clientY,a.resizing=!0,a.lastSnappedPercent=void 0;const o=e.parent();if(!o||!this.registry.isValidRelationship(o,e))return;a.snapEnabled=o.get("snap")??i.snapEnabled,a.snapDivisions=o.get("snap-divisions")??i.snapDivisions??12;const l=o.components().models,c=l.findIndex(f=>f.cid===e.cid),g=j(o,i),p=He(c,t,g,l.length);p!==-1&&(a.adjacentIdx=p);const u={componentColumn:e,componentRow:o,isVertical:g};if(a.startPercent=_(u,i),typeof a.adjacentIdx<"u"){const f=l[a.adjacentIdx];a.neighborStartPercent=_({...u,componentColumn:f},i)}}updateResizeByDelta(e,t,s){const i=this.getState(e),a=e.parent();!i.resizing||!a||(i.snapEnabled?this.updateSnapResize(e,t,s):this.updateContinuesResize(e,t,s))}finishResize(e){const t=e.parent(),s=t==null?void 0:t.components().models,i={componentRow:t,isVertical:!!t&&j(t,this.opts)};s==null||s.forEach(a=>ge({...i,componentColumn:a},this.opts)),this.clearState(e)}updateContinuesResize(e,t,s){const i=this.getState(e),a=e.parent(),{opts:o}=this;if(!a)return;const l=o.minItemPercent??0,c=O(t),g=se({componentRow:a,isVertical:c},o),p=he(a,c,this.opts),f=100-p/g*100,I=s/(g-p)*f,{startPercent:P=0,neighborStartPercent:y=0}=i,R={componentRow:a,isVertical:c,componentColumn:e,partial:!0},v=ue(t,s)?P+Math.abs(I):P-Math.abs(I);if(typeof i.adjacentIdx<"u"){const z=a.components().models[i.adjacentIdx],x=P+y,b=x-l,r=Math.min(b,Math.max(l,v)),d=x-r;D({...R,sizeValue:`${V(r)}%`},o),D({...R,componentColumn:z,sizeValue:`${V(d)}%`},o)}else{const z=Math.max(l,Math.min(f,v));D({...R,sizeValue:`${V(z)}%`},o)}}updateSnapResize(e,t,s){const i=this.getState(e),a=e.parent(),o=O(t),l=se({componentRow:a,isVertical:o},this.opts),c=he(a,o,this.opts),g=l-c,p=s/g*100,u=ue(t,s),{startPercent:f=0,snapDivisions:I=12}=i,P=u?f+Math.abs(p):f-Math.abs(p),y=100/I,R=Math.floor(P/y)*y,v=Math.ceil(P/y)*y,z=Math.abs(v-P),x=Math.abs(P-R),b=y*.2,C=z<x?v:R;if(C>0&&C<100&&(z<b||x<b)&&i.lastSnappedPercent!==C){i.lastSnappedPercent=C;let m=Math.abs(C-f)/100*g;(u&&(t==="left"||t==="top")||!u&&(t==="right"||t==="bottom"))&&(m=-m),this.updateContinuesResize(e,t,m)}else z>=b&&x>=b&&(i.lastSnappedPercent=void 0)}}class Ye{constructor(e,t,s){this.editor=e,this.registry=t,this.opts=s}updateGapByDelta(e,t,s,i){if(!this.registry.isGapAdjustableParent(e))return;const{opts:a}=this,o=Math.max(0,s+t),l=se({componentRow:e,isVertical:i},a),c=o/l*100,g=e.components().models,p=g.length-1,u={componentRow:e,isVertical:i},f=g.reduce((b,C)=>b+_({...u,componentColumn:C},a),0),P=100-c*p,y=a.minItemPercent||5;if(P<y*g.length)return;const v=100-p*c,z=f-v,x={componentRow:e,isVertical:i,partial:!0};g.map(b=>{const C=_({...u,componentColumn:b},a),r=C-C/f*z;D({...x,componentColumn:b,sizeValue:`${V(r)}%`},a)}),fe({...x,gapValue:`${V(c)}%`},a)}finishGapAdjust(e){je(e,this.opts)}}class Ue{constructor(e,t,s){this.editor=e,this.registry=t,this.opts=s,this.resizeHandler=new Xe(e,t,s),this.gapHandler=new Ye(e,t,s)}startResize(e,t,s){this.resizeHandler.startResize(e,t,s)}updateResizeByDelta(e,t,s){this.resizeHandler.updateResizeByDelta(e,t,s)}finishResize(e){this.resizeHandler.finishResize(e)}updateGapByDelta(e,t,s,i){this.gapHandler.updateGapByDelta(e,t,s,i)}finishGapAdjust(e){this.gapHandler.finishGapAdjust(e)}canResize(e){const t=e.parent();return t?this.registry.isValidRelationship(t,e):!1}canAdjustGap(e){return this.registry.isGapAdjustableParent(e)}}const X="gs-flex-spots",me=`${X}__handle-size`,We=`${X}__handle-gap`;function Ke(n,e){const{Canvas:t}=n,s="flex-resize-spot";let i,a,o,l,c=null,g=null;const p=new Oe,u=new Ue(n,p,e),f=()=>{var r;i=document.createElement("div"),i.className=X,i.style.display="none",a=document.createElement("div"),a.className=`${X}__handles`,a.style.position="absolute",a.style.pointerEvents="none",a.style.zIndex="21",o={left:document.createElement("div"),right:document.createElement("div"),top:document.createElement("div"),bottom:document.createElement("div")},Object.entries(o).forEach(([d,m])=>{const S=d,h=O(S);m.className=`${me} ${me}-${S} gjs-resizer-h gjs-cv-unscale`,m.style.cssText=`
+        `}}}),()=>{e.removeType(s)}},Ft="flexComponent",Ot=$.startup;class Xt{constructor(){this.resizableChildTypes=new Set,this.gapAdjustableParentTypes=new Set,this.typeRelationships=new Map}registerResizableChild(t){this.resizableChildTypes.add(t)}registerGapAdjustableParent(t){this.gapAdjustableParentTypes.add(t)}registerTypeRelationship(t,e){this.typeRelationships.has(t)||this.typeRelationships.set(t,new Set),this.typeRelationships.get(t).add(e),this.registerResizableChild(e),this.registerGapAdjustableParent(t)}isResizableChild(t){return this.resizableChildTypes.has(t.get("type"))}isGapAdjustableParent(t){return this.gapAdjustableParentTypes.has(t.get("type"))}isValidRelationship(t,e){const s=t.get("type"),i=e.get("type");return this.typeRelationships.has(s)?this.typeRelationships.get(s).has(i):!1}}class Yt{constructor(t,e,s){this.editor=t,this.registry=e,this.opts=s,this.resizeState=new WeakMap}getState(t){return this.resizeState.has(t)||this.resizeState.set(t,{}),this.resizeState.get(t)}clearState(t){return this.resizeState.delete(t)}startResize(t,e,s){const{opts:i}=this,a=this.getState(t);a.direction=e,a.startX=s.clientX,a.startY=s.clientY,a.resizing=!0,a.lastSnappedPercent=void 0;const o=t.parent();if(!o||!this.registry.isValidRelationship(o,t))return;a.snapEnabled=o.get("snap")??i.snapEnabled,a.snapDivisions=o.get("snap-divisions")??i.snapDivisions??12;const c=o.components().models,p=c.findIndex(g=>g.cid===t.cid),u=j(o,i),f=Lt(p,e,u,c.length);f!==-1&&(a.adjacentIdx=f);const r={componentColumn:t,componentRow:o,isVertical:u};if(a.startPercent=_(r,i),typeof a.adjacentIdx<"u"){const g=c[a.adjacentIdx];a.neighborStartPercent=_({...r,componentColumn:g},i)}}updateResizeByDelta(t,e,s){const i=this.getState(t),a=t.parent();!i.resizing||!a||(i.snapEnabled?this.updateSnapResize(t,e,s):this.updateContinuesResize(t,e,s))}finishResize(t){const e=t.parent(),s=e==null?void 0:e.components().models,i={componentRow:e,isVertical:!!e&&j(e,this.opts)};s==null||s.forEach(a=>gt({...i,componentColumn:a},this.opts)),this.clearState(t)}updateContinuesResize(t,e,s){const i=this.getState(t),a=t.parent(),{opts:o}=this;if(!a)return;const c=o.minItemPercent??0,p=X(e),u=st({componentRow:a,isVertical:p},o),f=ht(a,p,this.opts),g=100-f/u*100,E=s/(u-f)*g,{startPercent:S=0,neighborStartPercent:C=0}=i,x={componentRow:a,isVertical:p,componentColumn:t,partial:!0},v=ut(e,s)?S+Math.abs(E):S-Math.abs(E);if(typeof i.adjacentIdx<"u"){const b=a.components().models[i.adjacentIdx],w=S+C,P=w-c,l=Math.min(P,Math.max(c,v)),d=w-l;D({...x,sizeValue:`${V(l)}%`},o),D({...x,componentColumn:b,sizeValue:`${V(d)}%`},o)}else{const b=Math.max(c,Math.min(g,v));D({...x,sizeValue:`${V(b)}%`},o)}}updateSnapResize(t,e,s){const i=this.getState(t),a=t.parent(),o=X(e),c=st({componentRow:a,isVertical:o},this.opts),p=ht(a,o,this.opts),u=c-p,f=s/u*100,r=ut(e,s),{startPercent:g=0,snapDivisions:E=12}=i,S=r?g+Math.abs(f):g-Math.abs(f),C=100/E,x=Math.floor(S/C)*C,v=Math.ceil(S/C)*C,b=Math.abs(v-S),w=Math.abs(S-x),P=C*.2,z=b<w?v:x;if(z>0&&z<100&&(b<P||w<P)&&i.lastSnappedPercent!==z){i.lastSnappedPercent=z;let m=Math.abs(z-g)/100*u;(r&&(e==="left"||e==="top")||!r&&(e==="right"||e==="bottom"))&&(m=-m),this.updateContinuesResize(t,e,m)}else b>=P&&w>=P&&(i.lastSnappedPercent=void 0)}}class Ut{constructor(t,e,s){this.editor=t,this.registry=e,this.opts=s}updateGapByDelta(t,e,s,i){if(!this.registry.isGapAdjustableParent(t))return;const{opts:a}=this,o=Math.max(0,s+e),c=st({componentRow:t,isVertical:i},a),p=o/c*100,u=t.components().models,f=u.length-1,r={componentRow:t,isVertical:i},g=u.reduce((P,z)=>P+_({...r,componentColumn:z},a),0),S=100-p*f,C=a.minItemPercent||5;if(S<C*u.length)return;const v=100-f*p,b=g-v,w={componentRow:t,isVertical:i,partial:!0};u.map(P=>{const z=_({...r,componentColumn:P},a),l=z-z/g*b;D({...w,componentColumn:P,sizeValue:`${V(l)}%`},a)}),ft({...w,gapValue:`${V(p)}%`},a)}finishGapAdjust(t){jt(t,this.opts)}}class kt{constructor(t,e,s){this.editor=t,this.registry=e,this.opts=s,this.resizeHandler=new Yt(t,e,s),this.gapHandler=new Ut(t,e,s)}startResize(t,e,s){this.resizeHandler.startResize(t,e,s)}updateResizeByDelta(t,e,s){this.resizeHandler.updateResizeByDelta(t,e,s)}finishResize(t){this.resizeHandler.finishResize(t)}updateGapByDelta(t,e,s,i){this.gapHandler.updateGapByDelta(t,e,s,i)}finishGapAdjust(t){this.gapHandler.finishGapAdjust(t)}canResize(t){const e=t.parent();return e?this.registry.isValidRelationship(e,t):!1}canAdjustGap(t){return this.registry.isGapAdjustableParent(t)}}const Y="gs-flex-spots",mt=`${Y}__handle-size`,Wt=`${Y}__handle-gap`;function Kt(n,t){const{Canvas:e}=n,s="flex-resize-spot";let i,a,o,c,p=null,u=null;const f=new Xt,r=new kt(n,f,t),g=()=>{var l;i=document.createElement("div"),i.className=Y,i.style.display="none",a=document.createElement("div"),a.className=`${Y}__handles`,a.style.position="absolute",a.style.pointerEvents="none",a.style.zIndex="21",o={left:document.createElement("div"),right:document.createElement("div"),top:document.createElement("div"),bottom:document.createElement("div")},Object.entries(o).forEach(([d,m])=>{const y=d,h=X(y);m.className=`${mt} ${mt}-${y} gjs-resizer-h gjs-cv-unscale`,m.style.cssText=`
         pointer-events: all;
         position: absolute;
         z-index: 1;
         cursor: ${h?"ns-resize":"ew-resize"};
         ${h?"left: 50%;":"top: 50%;"}
-        ${S==="left"?"left: 0px;":""}
-        ${S==="right"?"right: 0px;":""}
-        ${S==="top"?"top: 0px;":""}
-        ${S==="bottom"?"bottom: 0px;":""}
-      `,m.addEventListener("pointerdown",I(S)),a.appendChild(m)}),!e.disableGapHandler&&!M(e)&&(l=document.createElement("div"),l.className=We,l.style.cssText=`
+        ${y==="left"?"left: 0px;":""}
+        ${y==="right"?"right: 0px;":""}
+        ${y==="top"?"top: 0px;":""}
+        ${y==="bottom"?"bottom: 0px;":""}
+      `,m.addEventListener("pointerdown",E(y)),a.appendChild(m)}),!t.disableGapHandler&&!H(t)&&(c=document.createElement("div"),c.className=Wt,c.style.cssText=`
         position: absolute;
         background-color: var(--gs-theme-cl-cmp-bg1, #3b97e3);
         border-width: 2px;
@@ -30,4 +30,4 @@
         pointer-events: all;
         max-width: 3rem;
         max-height: 3rem;
-      `,l.addEventListener("pointerdown",P()),a.appendChild(l)),i.append(a),(r=t.getSpotsEl())==null||r.appendChild(i)},I=r=>d=>{if(!c)return;d.stopPropagation(),d.preventDefault(),u.startResize(c,r,d);const m=d.clientX,S=d.clientY;d.target.setPointerCapture(d.pointerId);const h=H=>{const G=n.Canvas.getZoomMultiplier(),N=(H.clientX-m)*G,W=(H.clientY-S)*G,ie=O(r)?W:N;u.updateResizeByDelta(c,r,ie)},w=()=>{u.finishResize(c),d.target.releasePointerCapture(d.pointerId),document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",w)};document.addEventListener("pointermove",h),document.addEventListener("pointerup",w)},P=()=>r=>{if(!g)return;const d=g;r.stopPropagation(),r.preventDefault();const m=j(d,e),S=ne({componentRow:d,isVertical:m},e),h=r.clientX,w=r.clientY;r.target.setPointerCapture(r.pointerId);const H=N=>{const W=n.Canvas.getZoomMultiplier(),ie=m?(N.clientY-w)*W:(N.clientX-h)*W;u.updateGapByDelta(d,ie,S,m)},G=()=>{u.finishGapAdjust(d),r.target.releasePointerCapture(r.pointerId),document.removeEventListener("pointermove",H),document.removeEventListener("pointerup",G)};document.addEventListener("pointermove",H),document.addEventListener("pointerup",G)},y=r=>{const d=r.component;if(!d||!i||(c=d,g=d.parent(),!g))return;const m=g;de(i);const S=r.getStyle();a&&Object.assign(a.style,S);const h=j(m,e),w=Le(h);if(Object.values(o).forEach(pe),w.forEach(G=>{if(Ne(d,G))return;const N=o[G];de(N)}),E(e).gapHandler.isGapSupported()&&l&&Ve(d)){const G=ne({componentRow:m,isVertical:h},e);R(G,h,Me(d))}},R=(r,d,m=!1)=>{const S=e.gapHandleSize,h=l.style;if(d){h.height=`${S}px`;const w=l.offsetHeight;m?(h.top=`-${(r+w)/2}px`,h.bottom=""):(h.bottom=`-${(r+w)/2}px`,h.top=""),h.width="50%",h.left="50%",h.transform="translateX(-50%)",h.cursor="row-resize"}else{h.width=`${S}px`;const w=l.offsetWidth;m?(h.left=`-${(r+w)/2}px`,h.right=""):(h.right=`-${(r+w)/2}px`,h.left=""),h.height="50%",h.top="50%",h.transform="translateY(-50%)",h.cursor="col-resize"}},v=()=>{i&&(pe(i),c=null,g=null)},z=()=>{t.removeSpots({type:s});const r=n.getSelected(),d=r==null?void 0:r.parent();r&&d&&p.isValidRelationship(d,r)?t.addSpot({type:s,component:r}):v()},x=()=>{const r=t.getSpots().filter(d=>d.type===s)[0];r&&y(r)},b=(r,d)=>{p.registerTypeRelationship(r,d)};n.onReady(()=>{f(),M(e)?b("mj-section","mj-column"):b(e.typeRow,e.typeColumn)});const C="component:toggled";return n.on(t.events.spot,x),n.on(C,z),()=>{n.off(t.events.spot,x),n.off(C,z)}}return Ie(function(n,e={}){const t={typeRow:"flex-row",typeColumn:"flex-column",gapHandleSize:3,snapDivisions:12,minItemPercent:5,...e},s=[Be(n,t),De(n,t)],i=Ke(n,t),a=_e(n,t);Re({editor:n,licenseKey:t.licenseKey,plan:ke,pluginName:Fe,cleanup:()=>{s.forEach(o=>o==null?void 0:o()),i(),a==null||a()}})})});
+      `,c.addEventListener("pointerdown",S()),a.appendChild(c)),i.append(a),(l=e.getSpotsEl())==null||l.appendChild(i)},E=l=>d=>{if(!p)return;d.stopPropagation(),d.preventDefault(),r.startResize(p,l,d);const m=d.clientX,y=d.clientY;d.target.setPointerCapture(d.pointerId);const h=L=>{const G=n.Canvas.getZoomMultiplier(),N=(L.clientX-m)*G,W=(L.clientY-y)*G,it=X(l)?W:N;r.updateResizeByDelta(p,l,it)},I=()=>{r.finishResize(p),d.target.releasePointerCapture(d.pointerId),document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",I)};document.addEventListener("pointermove",h),document.addEventListener("pointerup",I)},S=()=>l=>{if(!u)return;const d=u;l.stopPropagation(),l.preventDefault();const m=j(d,t),y=nt({componentRow:d,isVertical:m},t),h=l.clientX,I=l.clientY;l.target.setPointerCapture(l.pointerId);const L=N=>{const W=n.Canvas.getZoomMultiplier(),it=m?(N.clientY-I)*W:(N.clientX-h)*W;r.updateGapByDelta(d,it,y,m)},G=()=>{r.finishGapAdjust(d),l.target.releasePointerCapture(l.pointerId),document.removeEventListener("pointermove",L),document.removeEventListener("pointerup",G)};document.addEventListener("pointermove",L),document.addEventListener("pointerup",G)},C=l=>{const d=l.component;if(!d||!i||(p=d,u=d.parent(),!u))return;const m=u;dt(i);const y=l.getStyle();a&&Object.assign(a.style,y);const h=j(m,t),I=At(h);if(Object.values(o).forEach(pt),I.forEach(G=>{if(Nt(d,G))return;const N=o[G];dt(N)}),T(t).gapHandler.isGapSupported()&&c&&Vt(d)){const G=nt({componentRow:m,isVertical:h},t);x(G,h,Ht(d))}},x=(l,d,m=!1)=>{const y=t.gapHandleSize,h=c.style;if(d){h.height=`${y}px`;const I=c.offsetHeight;m?(h.top=`-${(l+I)/2}px`,h.bottom=""):(h.bottom=`-${(l+I)/2}px`,h.top=""),h.width="50%",h.left="50%",h.transform="translateX(-50%)",h.cursor="row-resize"}else{h.width=`${y}px`;const I=c.offsetWidth;m?(h.left=`-${(l+I)/2}px`,h.right=""):(h.right=`-${(l+I)/2}px`,h.left=""),h.height="50%",h.top="50%",h.transform="translateY(-50%)",h.cursor="col-resize"}},v=()=>{i&&(pt(i),p=null,u=null)},b=()=>{e.removeSpots({type:s});const l=n.getSelected(),d=l==null?void 0:l.parent();l&&d&&f.isValidRelationship(d,l)?e.addSpot({type:s,component:l}):v()},w=()=>{const l=e.getSpots().filter(d=>d.type===s)[0];l&&C(l)},P=(l,d)=>{f.registerTypeRelationship(l,d)};n.onReady(()=>{g(),H(t)?P("mj-section","mj-column"):P(t.typeRow,t.typeColumn)});const z="component:toggled";return n.on(e.events.spot,w),n.on(z,b),()=>{n.off(e.events.spot,w),n.off(z,b)}}return It(function(n,t={}){const e={typeRow:"flex-row",typeColumn:"flex-column",gapHandleSize:3,snapDivisions:12,minItemPercent:5,...t},s=[Bt(n,e),Dt(n,e)],i=Kt(n,e),a=_t(n,e);vt({editor:n,licenseKey:e.licenseKey,plan:Ot,pluginName:Ft,cleanup:()=>{s.forEach(o=>o==null?void 0:o()),i(),a==null||a()}})})});

package/dist/fsLightboxComponent/index.cjs.js

@@ -1,6 +1,6 @@
-"use strict";const D="app.grapesjs.com",H="app-stage.grapesjs.com",U="app2.grapesjs.com",B="app-stage2.grapesjs.com",M=[D,U,H,B,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],R="license:check:start",W="license:check:end",F=()=>typeof window<"u",G=({isDev:t,isStage:a})=>`${t?"":`https://${a?H:D}`}/api`,K=()=>{const t=F()&&window.location.hostname;return!!t&&(M.includes(t)||M.some(a=>t.endsWith(a)))};async function Z({path:t,baseApiUrl:a,method:r="GET",headers:c={},params:p,body:h}){const w=`${a||G({isDev:!1,isStage:!1})}${t}`,d={method:r,headers:{"Content-Type":"application/json",...c}};h&&(d.body=JSON.stringify(h));const m=p?new URLSearchParams(p).toString():"",n=m?`?${m}`:"",b=await fetch(`${w}${n}`,d);if(!b.ok)throw new Error(`HTTP error! status: ${b.status}`);return b.json()}var x=(t=>(t.free="free",t.startup="startup",t.business="business",t.enterprise="enterprise",t))(x||{});const P={[x.free]:0,[x.startup]:10,[x.business]:20,[x.enterprise]:30};function q(t){const a=t;return a.init=r=>c=>t(c,r),a}const z=t=>q(t);async function J({editor:t,plan:a,pluginName:r,licenseKey:c,cleanup:p}){let h="",g=!1;const w=K(),d=n=>{console.warn("Cleanup plugin:",r,"Reason:",n),p()},m=(n={})=>{var A;const{error:b,sdkLicense:l}=n,v=(A=n.plan)==null?void 0:A.category;if(!(l||n.license)||b)d(b||"Invalid license");else if(v){const E=P[a],V=P[v];E>V&&d({pluginRequiredPlan:a,licensePlan:v})}};t.on(R,n=>{h=n==null?void 0:n.baseApiUrl,g=!0}),t.on(W,n=>{m(n)}),setTimeout(async()=>{if(!g){if(w)return;if(c){const n=await X({licenseKey:c,pluginName:r,baseApiUrl:h});n&&m(n)}else d("The `licenseKey` option not provided")}},2e3)}async function X(t){const{licenseKey:a,pluginName:r,baseApiUrl:c}=t;try{return(await Z({baseApiUrl:c,path:`/sdk/${a||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(p){return console.error("Error during SDK license check:",p),!1}}const Y="gjs-plg-",Q="fsLightboxComponent",ee=x.startup,k="data-fslightbox",C="data-type",te="fslightbox-open",T="fslightbox",S={image:'<svg viewBox="0 0 24 24"><path d="m8.5 13.5 2.5 3 3.5-4.5 4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z"/></svg>',video:'<svg viewBox="0 0 24 24"><path d="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4Z"/></svg>',imageLightbox:'<svg viewBox="0 0 24 24"><path d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M19,15V7L15,11L13,9L7,15H19M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z" /></svg>',external:'<svg viewBox="0 0 24 24"><path d="M14 3v2h3.6l-9.8 9.8 1.4 1.4L19 6.4V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-7h-2v7z"/></svg>',eye:'<svg viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.7 7.6 1 12a11.8 11.8 0 0 0 22 0c-1.7-4.4-6-7.5-11-7.5Z"/></svg>'},se=function(t,a={}){const{Blocks:r,Components:c}=t,p="Lightbox",h=`${Y}${T}`,g={toolbarIconOpen:S.eye,block:{},defaultSrc:"https://placehold.co/300/777/white.png?text=Image",cdnScript:"https://cdn.jsdelivr.net/npm/fslightbox@3.4.2/index.js",...a},{block:w,toolbarIconOpen:d,defaultSrc:m}=g,n=function(s){const e=this,i="data-fslightbox",o=window,f=()=>{var j;const u=o.refreshFsLightbox;u==null||u();const $=e.getAttribute(i);if((j=o.fsLightboxInstances)==null||j[$],!o._isEditor)return;Array.from(document.querySelectorAll(`[${i}]`)).forEach(L=>{const y=L.onclick;L.onclick=function(I){I.preventDefault();const O=L;!O.__skipLb&&(y==null||y(I)),O.__skipLb=!0}})};if(o.refreshFsLightbox)f();else{const u=document.createElement("script");u.src=s.cdnScript,u.onload=f,document.head.appendChild(u)}},b=s=>({id:`${T}-open-lb`,label:d,command:()=>{const e=s.getView();e==null||e.toggleLightbox()}}),l="source-type",v={type:"radio",name:l,label:"Source type",changeProp:!0,options:[{id:"image",label:"Image",icon:S.image},{id:"video",label:"Video",icon:S.video},{id:"el",label:"Custom Element",icon:S.external}],labelToTitle:!0},N={id:"href-image",name:"href",type:"file",label:"Source Image"},A={id:"href-video",name:"href",label:"Source Video",placeholder:"https://www.youtube.com/watch?v=..."},E={id:"href-el",name:"href",label:"Source Element",placeholder:"#custom-element-id"},V={image:[N],video:[A],el:[E]};c.addType(T,{block:w&&{label:p,media:S.imageLightbox,category:"Extra",select:!0,...g.block},isComponent:s=>{var e;return(e=s.hasAttribute)==null?void 0:e.call(s,k)},extendFn:["initToolbar"],model:{defaults:{tagName:"a",name:p,icon:S.imageLightbox,classes:h,draggable:(s,e)=>!e.is(T),attributes:{[k]:"lightbox",[C]:"image",href:m},components:{type:"image",src:m},script:n,cdnScript:g.cdnScript,"script-props":["attributes","cdnScript"],[l]:"image",traits:[v,{name:k,label:"Group name"},{type:"button",label:"Toggle Lightbox",command(s,e){var o;const i=(o=e.target)==null?void 0:o.getView();i==null||i.toggleLightbox()}}],styles:`
-          .${h} {
+"use strict";const k="app.grapesjs.com",U="app-stage.grapesjs.com",B="app2.grapesjs.com",C="app-stage2.grapesjs.com",D=[k,B,U,C,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],W="license:check:start",F="license:check:end",G=()=>typeof window<"u",K=({isDev:s,isStage:c,isPlatform:r})=>`${s?"":`https://${c?U:k}`}/${r?"platform-api":"api"}`,Z=()=>{const s=G()&&window.location.hostname;return!!s&&(D.includes(s)||D.some(c=>s.endsWith(c)))};async function q({path:s,baseApiUrl:c,method:r="GET",headers:l={},params:a,body:m}){const f=`${c||K({isDev:!1,isStage:!1})}${s}`,b={method:r,headers:{"Content-Type":"application/json",...l}};m&&(b.body=JSON.stringify(m));const d=a?new URLSearchParams(a).toString():"",v=d?`?${d}`:"",n=await fetch(`${f}${v}`,b);if(!n.ok)throw new Error(`HTTP error! status: ${n.status}`);return n.json()}var w=(s=>(s.free="free",s.startup="startup",s.business="business",s.enterprise="enterprise",s))(w||{});const H={[w.free]:0,[w.startup]:10,[w.business]:20,[w.enterprise]:30};function z(s){const c=s;return c.init=r=>l=>s(l,r),c}const J=s=>z(s);async function R({editor:s,plan:c,pluginName:r,licenseKey:l,onLicenseCheckResponse:a,cleanup:m}){let h="",f=!1;const b=Z(),d=n=>{console.warn("Cleanup plugin:",r,"Reason:",n),m()},v=(n={})=>{var A;const{error:p,sdkLicense:E}=n,y=(A=n.plan)==null?void 0:A.category;if(!(E||n.license)||p)d(p||"Invalid license");else if(y){const j=H[c],t=H[y];j>t&&d({pluginRequiredPlan:c,licensePlan:y})}};s.on(W,n=>{h=n==null?void 0:n.baseApiUrl,f=!0}),s.on(F,n=>{a==null||a(n),v(n)}),setTimeout(async()=>{if(!f){if(b)return;if(l){const n=await X({licenseKey:l,pluginName:r,baseApiUrl:h});a==null||a(n),n&&v(n)}else d("The `licenseKey` option not provided")}},2e3)}async function X(s){const{licenseKey:c,pluginName:r,baseApiUrl:l}=s;try{return(await q({baseApiUrl:l,path:`/sdk/${c||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(a){return console.error("Error during SDK license check:",a),!1}}const Y="gjs-plg-",Q="fsLightboxComponent",tt=w.startup,$="data-fslightbox",N="data-type",et="fslightbox-open",L="fslightbox",x={image:'<svg viewBox="0 0 24 24"><path d="m8.5 13.5 2.5 3 3.5-4.5 4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z"/></svg>',video:'<svg viewBox="0 0 24 24"><path d="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4Z"/></svg>',imageLightbox:'<svg viewBox="0 0 24 24"><path d="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M19,15V7L15,11L13,9L7,15H19M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z" /></svg>',external:'<svg viewBox="0 0 24 24"><path d="M14 3v2h3.6l-9.8 9.8 1.4 1.4L19 6.4V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-7h-2v7z"/></svg>',eye:'<svg viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.7 7.6 1 12a11.8 11.8 0 0 0 22 0c-1.7-4.4-6-7.5-11-7.5Z"/></svg>'},st=function(s,c={}){const{Blocks:r,Components:l}=s,a="Lightbox",m=`${Y}${L}`,h={toolbarIconOpen:x.eye,block:{},defaultSrc:"https://placehold.co/300/777/white.png?text=Image",cdnScript:"https://cdn.jsdelivr.net/npm/fslightbox@3.4.2/index.js",...c},{block:f,toolbarIconOpen:b,defaultSrc:d}=h,v=function(t){const e=this,i="data-fslightbox",o=window,g=()=>{var M;const u=o.refreshFsLightbox;u==null||u();const O=e.getAttribute(i);if((M=o.fsLightboxInstances)==null||M[O],!o._isEditor)return;Array.from(document.querySelectorAll(`[${i}]`)).forEach(T=>{const S=T.onclick;T.onclick=function(I){I.preventDefault();const P=T;!P.__skipLb&&(S==null||S(I)),P.__skipLb=!0}})};if(o.refreshFsLightbox)g();else{const u=document.createElement("script");u.src=t.cdnScript,u.onload=g,document.head.appendChild(u)}},n=t=>({id:`${L}-open-lb`,label:b,command:()=>{const e=t.getView();e==null||e.toggleLightbox()}}),p="source-type",E={type:"radio",name:p,label:"Source type",changeProp:!0,options:[{id:"image",label:"Image",icon:x.image},{id:"video",label:"Video",icon:x.video},{id:"el",label:"Custom Element",icon:x.external}],labelToTitle:!0},y={id:"href-image",name:"href",type:"file",label:"Source Image"},V={id:"href-video",name:"href",label:"Source Video",placeholder:"https://www.youtube.com/watch?v=..."},A={id:"href-el",name:"href",label:"Source Element",placeholder:"#custom-element-id"},j={image:[y],video:[V],el:[A]};l.addType(L,{block:f&&{label:a,media:x.imageLightbox,category:"Extra",select:!0,...h.block},isComponent:t=>{var e;return(e=t.hasAttribute)==null?void 0:e.call(t,$)},extendFn:["initToolbar"],model:{defaults:{tagName:"a",name:a,icon:x.imageLightbox,classes:m,draggable:(t,e)=>!e.is(L),attributes:{[$]:"lightbox",[N]:"image",href:d},components:{type:"image",src:d},script:v,cdnScript:h.cdnScript,"script-props":["attributes","cdnScript"],[p]:"image",traits:[E,{name:$,label:"Group name"},{type:"button",label:"Toggle Lightbox",command(t,e){var o;const i=(o=e.target)==null?void 0:o.getView();i==null||i.toggleLightbox()}}],styles:`
+          .${m} {
             display: inline-block;
             padding: 10px;
           }
-        `},init(){const s=[l].map(e=>`change:${e}`).join(" ");this.on(s,this.updateTraits),this.on(`change:${l}`,this.onSourceTypeChange),this.on("change:attributes:href",this.adjustSourceType),this.updateTraits({init:!0}),this.adjustSourceType()},onSourceTypeChange(s,e,i){if(i.adjust)return;const f=this.get(l)==="video"?"video":"image";this.addAttributes({[C]:f,href:""})},adjustSourceType(){const s=this.get(l),e=this.getAttributes().href||"",i={adjust:!0};if(s==="video"){const o=e.includes("youtube.com")?"youtube":"video";this.addAttributes({[C]:o},i)}else s!=="el"&&e.startsWith("#")?this.set(l,"el",i):s==="image"&&this.addAttributes({[C]:"image"},i)},updateTraits(s={}){const{changed:e}=this,{init:i}=s;if(e[v.name]||i){this.removeTrait([N.name,A.name,E.name]);const o=this.get(l)||"image",f=this.getTraitIndex(l)+1;this.addTrait(V[o],{at:f})}},initToolbar(){if(!d)return;const{toolbar:s}=this,e=b(this);!s.find(o=>o.id===e.id)&&(s==null||s.unshift(e))}},view:{onRender(){this.el.__skipLb=!0},toggleLightbox(){var L;const{em:s,el:e,model:i}=this,{Canvas:o}=s,f=i.getAttributes()[k],{defaultView:u,documentElement:$}=e.ownerDocument,_=(L=u.fsLightboxInstances)==null?void 0:L[f];if($.classList.contains(te))_.close();else{e.__skipLb=!1;let y;_.props.onOpen=()=>{y=o.getSpots(),setTimeout(()=>o.removeSpots())},_.props.onClose=()=>{y.forEach(I=>o.addSpot(I.attributes))},e.click()}}}}),J({editor:t,plan:ee,licenseKey:g.licenseKey,pluginName:Q,cleanup:()=>{r.remove(T),c.removeType(T)}})},ne=z(se);module.exports=ne;
+        `},init(){const t=[p].map(e=>`change:${e}`).join(" ");this.on(t,this.updateTraits),this.on(`change:${p}`,this.onSourceTypeChange),this.on("change:attributes:href",this.adjustSourceType),this.updateTraits({init:!0}),this.adjustSourceType()},onSourceTypeChange(t,e,i){if(i.adjust)return;const g=this.get(p)==="video"?"video":"image";this.addAttributes({[N]:g,href:""})},adjustSourceType(){const t=this.get(p),e=this.getAttributes().href||"",i={adjust:!0};if(t==="video"){const o=e.includes("youtube.com")?"youtube":"video";this.addAttributes({[N]:o},i)}else t!=="el"&&e.startsWith("#")?this.set(p,"el",i):t==="image"&&this.addAttributes({[N]:"image"},i)},updateTraits(t={}){const{changed:e}=this,{init:i}=t;if(e[E.name]||i){this.removeTrait([y.name,V.name,A.name]);const o=this.get(p)||"image",g=this.getTraitIndex(p)+1;this.addTrait(j[o],{at:g})}},initToolbar(){if(!b)return;const{toolbar:t}=this,e=n(this);!t.find(o=>o.id===e.id)&&(t==null||t.unshift(e))}},view:{onRender(){this.el.__skipLb=!0},toggleLightbox(){var T;const{em:t,el:e,model:i}=this,{Canvas:o}=t,g=i.getAttributes()[$],{defaultView:u,documentElement:O}=e.ownerDocument,_=(T=u.fsLightboxInstances)==null?void 0:T[g];if(O.classList.contains(et))_.close();else{e.__skipLb=!1;let S;_.props.onOpen=()=>{S=o.getSpots(),setTimeout(()=>o.removeSpots())},_.props.onClose=()=>{S.forEach(I=>o.addSpot(I.attributes))},e.click()}}}}),R({editor:s,plan:tt,licenseKey:h.licenseKey,pluginName:Q,cleanup:()=>{r.remove(L),l.removeType(L)}})},nt=J(st);module.exports=nt;