@grapesjs/studio-sdk-plugins 1.0.18 → 1.0.19-rc.1

package/dist/canvasGridMode/index.umd.js

@@ -0,0 +1,26 @@
+(function(D,I){typeof exports=="object"&&typeof module<"u"?module.exports=I():typeof define=="function"&&define.amd?define(I):(D=typeof globalThis<"u"?globalThis:D||self,D.StudioSdkPlugins_canvasGridMode=I())})(this,function(){"use strict";const D="app.grapesjs.com",I="app-stage.grapesjs.com",U=[D,I,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],st="license:check:start",at="license:check:end",it=()=>typeof window<"u",lt=({isDev:t,isStage:e})=>`${t?"":`https://${e?I:D}`}/api`,ct=()=>{const t=it()&&window.location.hostname;return!!t&&(U.includes(t)||U.some(e=>t.endsWith(e)))};function Y(t){return typeof t=="function"}async function pt({path:t,baseApiUrl:e,method:r="GET",headers:o={},params:n,body:i}){const l=`${e||lt({isDev:!1,isStage:!1})}${t}`,c={method:r,headers:{"Content-Type":"application/json",...o}};i&&(c.body=JSON.stringify(i));const p=n?new URLSearchParams(n).toString():"",a=p?`?${p}`:"",d=await fetch(`${l}${a}`,c);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var _=(t=>(t.free="free",t.startup="startup",t.business="business",t.enterprise="enterprise",t))(_||{});const H={[_.free]:0,[_.startup]:10,[_.business]:20,[_.enterprise]:30};function dt(t){const e=t;return e.init=r=>o=>t(o,r),e}const ut=t=>dt(t);async function gt({editor:t,plan:e,pluginName:r,licenseKey:o,cleanup:n}){let i="",s=!1;const l=ct(),c=a=>{console.warn("Cleanup plugin:",r,"Reason:",a),n()},p=(a={})=>{var S;const{error:d,sdkLicense:u}=a,g=(S=a.plan)==null?void 0:S.category;if(!(u||a.license)||d)c(d||"Invalid license");else if(g){const f=H[e],b=H[g];f>b&&c({pluginRequiredPlan:e,licensePlan:g})}};t.on(st,a=>{i=a==null?void 0:a.baseApiUrl,s=!0}),t.on(at,a=>{p(a)}),setTimeout(async()=>{if(!s){if(l)return;if(o){const a=await mt({licenseKey:o,pluginName:r,baseApiUrl:i});a&&p(a)}else c("The `licenseKey` option not provided")}},2e3)}async function mt(t){const{licenseKey:e,pluginName:r,baseApiUrl:o}=t;try{return(await pt({baseApiUrl:o,path:`/sdk/${e||"na"}`,method:"POST",params:{d:window.location.hostname,pn:r}})).result||{}}catch(n){return console.error("Error during SDK license check:",n),!1}}const F="canvasGridMode",ft=_.startup,z="component-grid-mode",N="grid-mode",W="gjs-drag-grid-spot",X=`${W}__grid-item`,q=`${W}__grid-target`,K=`${W}__snapped`,yt=`${W}__container`,ht=()=>{const t="data-gjs-drag-grid-style",e=document,r="var(--gs-theme-cl-cmp-bg1, var(--gjs-color-highlight))",o="var(--gs-theme-cl-cmp-bg2, var(--gjs-color-blue))",n=e.querySelector(`style[${t}]`)||e.createElement("style");n.setAttribute(t,"true"),n.innerHTML=`
+        .${X} {
+            outline: 2px solid ${o};
+            background: ${r};
+            outline-offset: -2px;
+            border-radius: 3px;
+            width: 100%;
+            height: 100%;
+            opacity: 0.1;
+        }
+        .${K} {
+            width: 100%;
+            height: 100%;
+            outline: 2px solid ${o};
+            outline-offset: -2px;
+            position: absolute;
+        }
+        .${q} {
+            position: absolute;
+            z-index: -1;
+            background: ${r};
+            outline: 1px solid ${o};
+            outline-offset: -1px;
+            opacity: 0.35;
+        }
+    `,e.head.appendChild(n)};function J(t){const{editor:e,type:r}=t,o=$t(e,t.component),n=k(e,o.component);if(!vt(e,o,n,r))return{target:o,container:n,startScroll:B(e).scroll,shadowContainerEl:document.createElement("div"),shadowSnappedEl:document.createElement("div"),shadowTargetEl:document.createElement("div"),spot:e.Canvas.addSpot({type:N,component:n.component})}}function Q(t){const{editor:e,shadowTargetEl:r,shadowSnappedEl:o,shadowContainerEl:n,spotEl:i,target:s,container:l}=t,{Canvas:c}=e,p=e.config.stylePrefix;i==null||i.appendChild(n),n==null||n.appendChild(r),n==null||n.appendChild(o),wt(n,l),St(r,s,l),bt(o,s),Ct(n,l.el),s.el.style.opacity="0";const a=c.getSpots().filter(d=>d.type!==N);e.em.stopDefault({preserveSelected:!0}),c.removeSpots(a),c.startAutoscroll(),c.getBody().classList.add(`${p}is__grabbing`)}function Z(t){const{editor:e,shadowSnappedEl:r,shadowContainerEl:o,target:n,cancelled:i}=t,{Canvas:s}=e,l=e.config.stylePrefix,{component:c}=n;if(!i){const p=window.getComputedStyle(r);c.addStyle({"grid-area":p.gridArea,width:"",height:""})}n.el.style.opacity="",o.contains(r)&&(o==null||o.removeChild(r)),e.getModel().runDefault({preserveSelected:1}),s.stopAutoscroll(),s.getBody().classList.remove(`${l}is__grabbing`),s.removeSpots({type:N}),e.select(c)}function wt(t,{rows:e,columns:r}){const o=[];for(let n=0;n<r.length;n++){o[n]=[];for(let i=0;i<e.length;i++){const s=document.createElement("div");s.className=X,s.style.gridArea=`${i+1} / ${n+1}`,o[n][i]=s,t.appendChild(s)}}return o}function St(t,e,r){return t.className=q,t.style.top=`${e.offset.top-r.offset.top}px`,t.style.left=`${e.offset.left-r.offset.left}px`,t.style.width=`${e.offset.width+e.margin.left+e.margin.right}px`,t.style.height=`${e.offset.height+e.margin.top+e.margin.bottom}px`,t}function bt(t,e){const r=et(e.el,e.computedStyles);return t.className=K,t.style.gridArea=`${r.row.start} / ${r.column.start} / ${r.row.end} / ${r.column.end}`,t}function Ct(t,e){const r=window.getComputedStyle(e);t.className=yt,t.style.position="relative",t.style.display=r.display,t.style.gap=r.gap,t.style.padding=r.padding,t.style.border=r.border,t.style.gridTemplateColumns=r.gridTemplateColumns,t.style.gridTemplateRows=r.gridTemplateRows}function V(t,e){if(e){if(Array.isArray(e))return[...e].pop()}else return[...t.getSelectedAll()].pop();return e}function $t(t,e){const r=V(t,e),o=r.getEl(),n=window.getComputedStyle(o);return{component:r,el:o,offset:t.Canvas.offset(o),margin:{top:parseFloat(n.marginTop),right:parseFloat(n.marginRight),bottom:parseFloat(n.marginBottom),left:parseFloat(n.marginLeft)},computedStyles:n}}function k(t,e){const r=e.parent(),o=r.getEl(),n=window.getComputedStyle(o);return{component:r,el:o,offset:t.Canvas.offset(o),computedStyles:n,padding:{top:parseFloat(n.paddingTop),right:parseFloat(n.paddingRight),bottom:parseFloat(n.paddingBottom),left:parseFloat(n.paddingLeft)},columns:n.gridTemplateColumns.split(" ").map(s=>parseFloat(s)),rows:n.gridTemplateRows.split(" ").map(s=>parseFloat(s)),gap:{column:parseInt(n.columnGap),row:parseInt(n.rowGap)}}}function T(t,e,r,o,n=1){let i=0;for(let s=e;s<=t.length;s++){if(i+(t[s-1]+o)*n>r)return s;i+=o+t[s-1]}return t.length+1}function B(t){const{scrollY:e,scrollX:r}=t.Canvas.getWindow();return{scroll:{top:e,left:r}}}function vt(t,e,r,o){const n=i=>t.em.logWarning(i);return o==="draggable"&&e.component.get(o)===!1?(n(`[${F}] The element is not ${o}`),!0):r.computedStyles.display!=="grid"?(n(`[${F}] The container does not have style display:grid`),!0):!1}function O(t,e,r={}){const o=V(t,e),n=o==null?void 0:o.parent(),i=n==null?void 0:n.getEl();if(!n||!i)return!1;const{enableGrid:s}=r,l=window.getComputedStyle(i).display==="grid";return Y(s)?s({component:o,parent:n,isParentGrid:l}):l}const tt=t=>t.split(" ").map(e=>parseFloat(e));function et(t,e){const r=t.ownerDocument.defaultView,o=e||r.getComputedStyle(t),n=o.gridArea.split("/").some(w=>isNaN(parseInt(w.trim()))),i={isComputed:n,raw:o.gridArea};if(!n)return{...i,row:{start:parseInt(o.gridRowStart),end:parseInt(o.gridRowEnd)},column:{start:parseInt(o.gridColumnStart),end:parseInt(o.gridColumnEnd)}};const s=t.parentElement,l=r.getComputedStyle(s),c=parseFloat(l.columnGap)||0,p=parseFloat(l.rowGap)||0,a=tt(l.gridTemplateColumns),d=tt(l.gridTemplateRows),u=parseFloat(l.paddingLeft)||0,g=parseFloat(l.paddingTop)||0,h=s.getBoundingClientRect(),S=t.getBoundingClientRect(),f=(w,C,R,G,A)=>{let x=1,E=G+A;for(let P=0;P<C.length;P++){const M=C[P],L=E+M;if(w>=E&&w<L)return x;E=L+R,x++}return-1},b=f(S.left,a,c,h.left,u),v=f(S.right-1,a,c,h.left,u)+1,m=f(S.top,d,p,h.top,g),y=f(S.bottom-1,d,p,h.top,g)+1;return{...i,row:{start:m,end:y},column:{start:b,end:v}}}function Et(t){t.Commands.add(z,{stop(){},run(e,r,o={}){const n=J({editor:e,component:o.target,type:"draggable"});if(!n){this.stopCommand();return}const{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p,startScroll:a}=n;let{container:d}=n,u;new e.Utils.Dragger({doc:s.el.ownerDocument,onStart:()=>{u=setTimeout(()=>{Q({editor:e,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:d}),d=k(e,s.component)},10)},onEnd:(h,S,{cancelled:f})=>{clearTimeout(u),Z({editor:e,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:f}),this.stopCommand(),e.em.set("_cmpDrag",1)},setPosition:({x:h,y:S})=>{const{scroll:f}=B(e),{columns:b,rows:v,gap:m,offset:y,padding:w}=d,{offset:C,margin:R}=s,G=C.top-y.top-w.top-R.top+S-a.top+f.top,A=C.left-y.left-w.left-R.left+h-a.left+f.left,x=Math.min(T(b,1,A,m.column,.5),b.length),E=Math.min(T(v,1,G,m.row,.5),v.length),P=Math.min(T(b,x,C.width,m.column)+1,b.length+1),M=Math.min(T(v,E,C.height,m.row)+1,v.length+1);c.style.gridArea=`${E} / ${x} / ${M} / ${P}`,p.style.top=`${G+w.top}px`,p.style.left=`${A+w.left}px`}}).start(o.event)}})}function xt(t,e){const r=J({editor:t,component:e.target,type:"resizable"});if(!r)return;const{onMove:o,onEnd:n}=e.options||{},{spot:i,target:s,shadowContainerEl:l,shadowSnappedEl:c,shadowTargetEl:p}=r;let{container:a}=r,d="",u;return{onStart:g=>{d=g.target.dataset.gjsHandler||"",u=setTimeout(()=>{Q({editor:t,shadowTargetEl:p,shadowSnappedEl:c,shadowContainerEl:l,spotEl:i.attributes.spotEl,target:s,container:a}),a=k(t,s.component)},10),t.trigger("component:resize",{...s,type:"start"})},onEnd:(g,h)=>{const{startDim:S,rectDim:f}=h.resizer,b=JSON.stringify(S)===JSON.stringify(f);clearTimeout(u),Z({editor:t,shadowSnappedEl:c,shadowContainerEl:l,target:s,cancelled:b}),n==null||n(g,h)},onMove:g=>{var rt;const h=g;if(((rt=h.target)==null?void 0:rt.nodeName)==="I")return;const{scroll:S}=B(t),f=et(c);let b=0,v=0,m=0,y=0;const w=s.margin.left,C=s.margin.top,R=s.margin.bottom,G=s.margin.right,{width:A,top:x,left:E,height:P}=s.offset,M=h.clientX,L=h.clientY,$={t:x-C,l:E-w,h:P+C+R,w:A+w+G};d.startsWith("t")?($.t=L-C,$.h=x+P+C+R-L):d.startsWith("b")&&($.h=L-x+C+R),d.endsWith("l")?($.l=M-w,$.w=E+A+w+G-M):d.endsWith("r")&&($.w=M-E+w+G),d.endsWith("l")&&(m=S.left,f.column.start=T(a.columns,1,$.l-a.offset.left-m-a.padding.left,a.gap.column,.5)),d.startsWith("t")&&(b=S.top,f.row.start=T(a.rows,1,$.t-a.offset.top+b-a.padding.top,a.gap.row,.5)),d.endsWith("r")&&(y=S.left,f.column.end=Math.max(T(a.columns,f.column.start,$.w-y,a.gap.column,.5),f.column.start+1)),d.startsWith("b")&&(v=S.top,f.row.end=Math.max(T(a.rows,f.row.start,$.h+v,a.gap.row,.5),f.row.start+1)),c.style.gridArea=`${f.row.start} / ${f.column.start} / ${f.row.end} / ${f.column.end}`,p.style.width=`${$.w+y+m}px`,p.style.height=`${$.h+v-b}px`,p.style.left=`${$.l-a.offset.left-m}px`,p.style.top=`${$.t-a.offset.top+b}px`,o==null||o(g)}}}const nt=["px","%","em","rem","vw","vh"],Tt=(t,e)=>{const r=t.Styles.getSectors().find(o=>!!o.getProperty(e));return{sector:r,property:r?r.getProperty(e):void 0}},Rt=(t,e)=>Tt(t,e),Gt=(t,{x:e,y:r,mergable:o}={})=>{const n={property:`${t}-x`,type:"integer",units:nt,...e},i={property:`${t}-y`,type:"integer",units:nt,...r};return{property:t,type:"composite",properties:[n,i],...o&&{fromStyle(s,{name:l,separator:c,property:p}){const[a,d]=p.getProperties(),[u,g]=(s[l]||"").split(c);return{[a.getId()]:s[a.getName()]||u||"",[d.getId()]:s[d.getName()]||g||u||""}},toStyle(s,{name:l,property:c}){const[p,a]=c.getProperties(),d=s[p.getId()],u=s[a.getId()];return{[l]:d===u?d:`${d} ${u}`}}}}},j={display:["grid"]};function Pt(t=""){const e=/^repeat\(\s*(\d+)\s*,\s*(.+)\s*\)$/i,r=/^minmax\(\s*(.+?)\s*,\s*(.+?)\s*\)$/i,o=t.match(e);if(!o)return null;const n=parseInt(o[1],10),i=o[2];let s=i,l=i;const c=i.match(r);return c&&(s=c[1],l=c[2]),{total:n,min:s===l?"":s,max:l}}function At(t={}){let e="",r="",o="",n="";const i=S=>S.split("/").map(f=>f.trim()).filter(Boolean),s=t["grid-area"]||"",l=t["grid-column"]||"",c=t["grid-row"]||"",p=i(s),a=i(l),d=i(c),u=p.length,g=a.length,h=d.length;return u===4?(o=p[0],e=p[1],n=p[2],r=p[3]):u===3?(o=p[0],e=p[1],n=p[2]):u===2?(o=p[0],e=p[1]):u===1&&(o=p[0]),g===2?(e=a[0],r=a[1]):g===1&&(e=a[0]),h===2?(o=d[0],n=d[1]):h===1&&(o=d[0]),{columnStart:e,columnEnd:r,rowStart:o,rowEnd:n}}function ot(t){const{property:e,label:r}=t,o="1",n="1fr";return{property:e,label:r,type:"composite",requires:j,generic:!0,properties:[{name:" ",property:`${e}-repeat`,type:"number",full:!0,min:1,default:"1"},{label:"Min size",property:`${e}-min`,type:"number",min:0,units:["px","%"],default:"0"},{label:"Max size",property:`${e}-max`,type:"number",min:1,units:["fr","px","%"],default:"1"}],fromStyle(i,s){const{name:l,property:c}=s,[p,a,d]=c.getProperties(),u=i[l],g=Pt(u),h=(g==null?void 0:g.max)??n;return{[p.id]:(g==null?void 0:g.total)??o,[a.id]:(g==null?void 0:g.min)??"",[d.id]:h===n?"":h}},toStyle(i,{name:s,property:l}){const[c,p,a]=l.getProperties(),d=i[c.id],u=i[p.id],g=i[a.id]||n,h=u&&g?`minmax(${u}, ${g})`:g;return{[s]:`repeat(${d||o}, ${h})`}}}}function Mt(t,e){if(!e.styleableGrid)return;const{property:r,...o}=Rt(t,"display");if(!r)return;const n=r.getOption("grid"),i=o.sector;n||r.addOption({id:"grid",label:"Grid"}),i.addProperty(ot({label:"Columns",property:"grid-template-columns"}),{}),i.addProperty(ot({label:"Rows",property:"grid-template-rows"}),{}),i.addProperty({id:"grid-gap",requires:j,...Gt("gap",{x:{id:"grid-row-gap",label:"Row",property:"row-gap",min:0,default:"0"},y:{id:"grid-column-gap",label:"Column",property:"column-gap",min:0,default:"0"},mergable:!0})},{}),i.addProperty({type:"composite",property:"grid-area",label:"Grid area",requiresParent:j,generic:!0,properties:[{label:"Row start",property:"grid-row-start",type:"integer",default:"auto"},{label:"Row end",property:"grid-row-end",type:"integer",default:"auto"},{label:"Column start",property:"grid-column-start",type:"integer",default:"auto"},{label:"Column end",property:"grid-column-end",type:"integer",default:"auto"}],fromStyle(s){const l=At(s);return{"grid-column-start":s["grid-column-start"]||l.columnStart,"grid-column-end":s["grid-column-end"]||l.columnEnd,"grid-row-start":s["grid-row-start"]||l.rowStart,"grid-row-end":s["grid-row-end"]||l.rowEnd}},toStyle(s,{name:l}){const c=s["grid-row-start"]||"auto",p=s["grid-row-end"]||"auto",a=s["grid-column-start"]||"auto",d=s["grid-column-end"]||"auto";return{[l]:`${c} / ${a} / ${p} / ${d}`}}},{})}return ut(function(t,e={}){const r={itemResizable:!0,...e},{Canvas:o,Commands:n,Components:i}=t,{itemResizable:s}=r,l=o.events,c=n.events,p=i.events,a=`${c.runBeforeCommand}tlb-move`,d=`${c.runBeforeCommand}resize`;let u;Et(t);const g=({options:m})=>{O(t,m.target,r)&&(t.runCommand(z,{...m}),m.abort=!0)},h=({options:m})=>{O(t,m.target,r)&&Object.assign(m.options,xt(t,m))},S=()=>{const m=o.getSpots({type:N}).pop();if(!m)return;let y=m.attributes.spotEl;y||(y=document.createElement("div"),y.className=W,m.set({spotEl:y})),Object.entries(m.getStyle()).forEach(([w,C])=>y.style.setProperty(w,C)),u==null||u.appendChild(y)},f=({spot:m})=>{const y=m.attributes.spotEl;m.type!==N||!y||u==null||u.removeChild(y)};if(s){const m=y=>{const w=Y(s)?s({component:y}):s;return typeof w=="boolean"?w:{tl:!1,tc:!1,tr:!1,cl:!1,cr:!1,bl:!1,bc:!1,br:!1,...w}};t.on(p.resizeInit,y=>{const{component:w}=y;if(O(t,w,r)){const C=m(w);y.resizable=C}})}const b=[[a,g],[d,h],[l.spot,S],[l.spotRemove,f]];b.forEach(([m,y])=>{t.on(m,y)}),t.onReady(()=>{u=o.getSpotsEl(),ht(),Mt(t,r)});const v=()=>{delete t.Commands.commands[z],b.forEach(([m,y])=>{t.off(m,y)})};gt({editor:t,licenseKey:r.licenseKey,plan:ft,pluginName:F,cleanup:v})})});

package/dist/canvasGridMode/shared.d.ts

@@ -0,0 +1,3 @@
+import { SdkPlanCategories } from '../utils';
+export declare const PLUGIN_NAME = "canvasGridMode";
+export declare const PLUGIN_PLAN = SdkPlanCategories.startup;

package/dist/canvasGridMode/styleManager.d.ts

@@ -0,0 +1,3 @@
+import { Editor } from '../types';
+import { CanvasGridModeOptions } from './types';
+export declare function loadStyleManagerProperties(editor: Editor, opts: CanvasGridModeOptions): void;

package/dist/canvasGridMode/types.d.ts

@@ -0,0 +1,16 @@
+import { CanvasSpotProps, ResizerOptions } from 'grapesjs';
+import { CanvasGridModeOptions as CanvasGridModeOptionsSchema } from './typesSchema';
+import { Component } from '../types';
+export interface CanvasGridModeOptions extends Omit<CanvasGridModeOptionsSchema, 'enableGrid' | 'itemResizable'> {
+    enableGrid?: (props: {
+        component: Component;
+        parent: Component;
+        isParentGrid?: boolean;
+    }) => boolean;
+    itemResizable?: boolean | ((props: {
+        component: Component;
+    }) => boolean | ResizerOptions);
+}
+export interface SpotGridDragProps extends CanvasSpotProps {
+    spotEl?: HTMLElement;
+}

package/dist/canvasGridMode/typesSchema.d.ts

@@ -0,0 +1,36 @@
+import { SDKPluginOptions } from '../utils';
+export interface CanvasGridModeOptions extends SDKPluginOptions {
+    /**
+     * Provide a custom logic to enable the grid mode.
+     * @examples
+     * enableGrid: ({ component, isParentGrid }) => {
+     *  if (isParentGrid && component.is('image')) {
+     *   return true; // enable grid mode only for images
+     *  }
+     * }
+     */
+    enableGrid?: '__fn__';
+    /**
+     * Make grid items resizable when selected. Could also be a function for custom logic.
+     * @default true
+     * @examples
+     * itemResizable: ({ component }) => {
+     *    if (component.is('text')) {
+     *     // Make the text component resizable only on the right and left sides.
+     *     return { cr: true, cl: true };
+     *    } else if (component.is('image')) {
+     *     // Disable resizing for images
+     *     return false;
+     *    }
+     *
+     *    // Enable resizing for all other components
+     *    return true;
+     * }
+     */
+    itemResizable?: object;
+    /**
+     * Allow to edit grid properties in Style Manager.
+     * @default false
+     */
+    styleableGrid?: boolean;
+}

package/dist/canvasGridMode/utils.d.ts

@@ -0,0 +1,150 @@
+import { Component, Editor } from '../types';
+import { CanvasGridModeOptions, SpotGridDragProps } from './types';
+export declare const COMMAND_DRAG_GRID = "component-grid-mode";
+export declare const SPOT_TYPE_GRID = "grid-mode";
+export declare const clsSpotGridDrag = "gjs-drag-grid-spot";
+export declare const clsSpotGridDragCell = "gjs-drag-grid-spot__grid-item";
+export declare const clsSpotGridDragTarget = "gjs-drag-grid-spot__grid-target";
+export declare const clsSpotGridDragSnapped = "gjs-drag-grid-spot__snapped";
+export declare const clsSpotGridDragContainer = "gjs-drag-grid-spot__container";
+export declare const createDefaultSpotStyleEl: () => void;
+export declare function onGridDragInit(props: {
+    editor: Editor;
+    component: Component | Component[];
+    type: string;
+}): {
+    target: {
+        component: Component;
+        el: HTMLElement;
+        offset: {
+            top: number;
+            left: number;
+            width: number;
+            height: number;
+        };
+        margin: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        computedStyles: CSSStyleDeclaration;
+    };
+    container: {
+        component: Component;
+        el: HTMLElement;
+        offset: {
+            top: number;
+            left: number;
+            width: number;
+            height: number;
+        };
+        computedStyles: CSSStyleDeclaration;
+        padding: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        columns: number[];
+        rows: number[];
+        gap: {
+            column: number;
+            row: number;
+        };
+    };
+    startScroll: {
+        top: number;
+        left: number;
+    };
+    shadowContainerEl: HTMLDivElement;
+    shadowSnappedEl: HTMLDivElement;
+    shadowTargetEl: HTMLDivElement;
+    spot: import('grapesjs').CanvasSpot<SpotGridDragProps>;
+} | undefined;
+export declare function onGridDragStart(props: {
+    editor: Editor;
+    shadowTargetEl: HTMLElement;
+    shadowSnappedEl: HTMLElement;
+    shadowContainerEl: HTMLElement;
+    spotEl: HTMLElement | undefined;
+    target: ReturnType<typeof getTarget>;
+    container: ReturnType<typeof getContainer>;
+}): void;
+export declare function onGridDragEnd(props: {
+    editor: Editor;
+    shadowSnappedEl: HTMLElement;
+    shadowContainerEl: HTMLElement;
+    target: ReturnType<typeof getTarget>;
+    cancelled?: boolean;
+}): void;
+export declare function setShadowCells(containerEl: HTMLElement, { rows, columns }: {
+    rows: number[];
+    columns: number[];
+}): HTMLElement[][];
+export declare function setShadowTargetStyle(el: HTMLElement, target: ReturnType<typeof getTarget>, container: ReturnType<typeof getContainer>): HTMLElement;
+export declare function setShadowSnappedStyle(el: HTMLElement, target: ReturnType<typeof getTarget>): HTMLElement;
+export declare function setShadowContainerStyle(el: HTMLElement, containerEl: HTMLElement): void;
+export declare function findTarget(editor: Editor, target?: Component | Component[]): Component;
+export declare function getTarget(editor: Editor, target?: Component | Component[]): {
+    component: Component;
+    el: HTMLElement;
+    offset: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    computedStyles: CSSStyleDeclaration;
+};
+export declare function getContainer(editor: Editor, target: Component): {
+    component: Component;
+    el: HTMLElement;
+    offset: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    computedStyles: CSSStyleDeclaration;
+    padding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    columns: number[];
+    rows: number[];
+    gap: {
+        column: number;
+        row: number;
+    };
+};
+export declare function getGridPosition(items: number[], start: number, minSize: number, gap: number, fraction?: number): number;
+export declare function getWindowScroll(editor: Editor): {
+    scroll: {
+        top: number;
+        left: number;
+    };
+};
+export declare function shouldTerminate(editor: Editor, target: ReturnType<typeof getTarget>, container: ReturnType<typeof getContainer>, prop: string): boolean;
+export declare function isGrid(editor: Editor, target?: Component | Component[], pluginOptions?: CanvasGridModeOptions): boolean;
+export declare function findComponentInGrid(editor: Editor, target: Component, opts?: CanvasGridModeOptions): Component | undefined;
+export declare function getGridItemArea(gridItemEl: HTMLElement, style?: CSSStyleDeclaration): {
+    row: {
+        start: number;
+        end: number;
+    };
+    column: {
+        start: number;
+        end: number;
+    };
+    isComputed: boolean;
+    raw: string;
+};

package/dist/flexComponent/index.cjs.js

@@ -1,16 +1,16 @@
-"use strict";const de="app.grapesjs.com",ue="app-stage.grapesjs.com",ie=[de,ue,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],Se="license:check:start",be="license:check:end",Ce=()=>typeof window<"u",Pe=({isDev:n,isStage:e})=>`${n?"":`https://${e?ue:de}`}/api`,ze=()=>{const n=Ce()&&window.location.hostname;return!!n&&(ie.includes(n)||ie.some(e=>n.endsWith(e)))};function xe(n){return typeof n=="function"}async function we({path:n,baseApiUrl:e,method:t="GET",headers:s={},params:i,body:a}){const l=`${e||Pe({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 $=(n=>(n.free="free",n.startup="startup",n.business="business",n.enterprise="enterprise",n))($||{}),he=(n=>(n.web="web",n.email="email",n))(he||{});const ae={[$.free]:0,[$.startup]:10,[$.business]:20,[$.enterprise]:30};function ve(n){const e=n;return e.init=t=>s=>n(s,t),e}const Ie=n=>ve(n);async function Re({editor:n,plan:e,pluginName:t,licenseKey:s,cleanup:i}){let a="",o=!1;const l=ze(),c=p=>{console.warn("Cleanup plugin:",t,"Reason:",p),i()},g=(p={})=>{var S;const{error:u,sdkLicense:f}=p,v=(S=p.plan)==null?void 0:S.category;if(!(f||p.license)||u)c(u||"Invalid license");else if(v){const I=ae[e],R=ae[v];I>R&&c({pluginRequiredPlan:e,licensePlan:v})}};n.on(Se,p=>{a=p==null?void 0:p.baseApiUrl,o=!0}),n.on(be,p=>{g(p)}),setTimeout(async()=>{if(!o){if(l)return;if(s){const p=await Ee({licenseKey:s,pluginName:t,baseApiUrl:a});p&&g(p)}else c("The `licenseKey` option not provided")}},2e3)}async function Ee(n){const{licenseKey:e,pluginName:t,baseApiUrl:s}=n;try{return(await we({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 ge=n=>e=>{var t;return((t=e.getAttribute)==null?void 0:t.call(e,ne))===n},Ge=(...n)=>e=>n.some(t=>e.is(t)),Te=(...n)=>(e,t)=>n.some(s=>t.is(s)),fe="gjs-plg-",ne="data-type-role",j=class j{constructor(e){this.config=e}getSize(e){var t;return(t=this.config)!=null&&t.getSize?this.config.getSize(e):se(e.componentColumn,j.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({[j.CSS_FLEX_BASIS]:i},{partial:a})}}};j.CSS_FLEX_BASIS="flex-basis";let K=j;const N=class N{constructor(e){this.config=e}isGapSupported(){return!0}getGap(e){var t;return(t=this.config)!=null&&t.getGap?this.config.getGap(e):se(e.componentRow,N.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({[N.CSS_GAP]:i},{partial:a})}}};N.CSS_GAP="gap";let J=N;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=se(e.componentRow,Y.CSS_FLEX_DIRECTION,!0);return t==="column"||t==="column-reverse"}};Y.CSS_FLEX_DIRECTION="flex-direction";let q=Y;const _=class _{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(_.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(_.MJML_COLUMN_TYPE)&&s.addAttributes({width:`${parseFloat(i)}%`},{partial:a})}}};_.MJML_COLUMN_TYPE="mj-column";let Z=_;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 Q=U;class Le{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 H{constructor(){this.handlerCache=new Map}static getInstance(){return H.instance||(H.instance=new H),H.instance}getHandlers(e){const t=`${e.projectType}-${e.disableGapHandler?"nogap":"gap"}`;return this.handlerCache.has(t)||(A(e)?this.handlerCache.set(t,{sizeHandler:new Z(e),gapHandler:new Q(e),parentSizeHandler:new Le(e)}):this.handlerCache.set(t,{sizeHandler:new K(e),gapHandler:new J(e),parentSizeHandler:new q(e)})),this.handlerCache.get(t)}}function G(n){return H.getInstance().getHandlers(n)}const oe=n=>{n.style.display="none"},re=n=>{n.style.display="block"},V=n=>+parseFloat(`${n}`).toFixed(2),A=n=>n.projectType===he.email,k=(n,e)=>{const t=n.Canvas.getFramesEl();t&&(t.style.pointerEvents=e?"none":"")},$e=n=>n?["top","bottom"]:["left","right"],He=n=>{const e=n.parent();return e?e.components().models.indexOf(n)===0:!1},Ae=n=>{const e=n.parent();if(!e)return!1;const t=e.components().models;return t.indexOf(n)===t.length-1},Ve=n=>{const e=n.parent();if(!e)return!1;const t=e.components().models;return t.length>1&&n.index()===t.length-1},Me=(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",je=(n,e)=>!!(He(n)&&(e==="left"||e==="top")||Ae(n)&&(e==="right"||e==="bottom")),Ne=n=>{const e=n.parent();return e?e.components().models.length>1:!1},ce=(n,e)=>n==="right"||n==="bottom"?e>0:e<0,se=(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},le=(n,e,t)=>{const s=ee({componentRow:n,isVertical:e},t),i=n.components().models;return s*(i.length-1)},F=(n,e)=>G(e).parentSizeHandler.isLayoutVertical({componentRow:n}),B=(n,e)=>G(e).sizeHandler.getSize(n),ee=(n,e)=>{if(e!=null&&e.disableGapHandler)return 0;const{gapHandler:t,parentSizeHandler:s}=G(e);if(!t.isGapSupported())return 0;const i=t.getGap(n),a=s.getParentSize(n);return i/100*a},te=(n,e)=>G(e).parentSizeHandler.getParentSize(n),M=(n,e)=>{G(e).sizeHandler.setSize(n)},me=(n,e)=>{const t=B(n,e);M({...n,sizeValue:`${t}%`,partial:!1},e)},ye=(n,e)=>{if(e!=null&&e.disableGapHandler)return;const{gapHandler:t}=G(e);t.isGapSupported()&&t.setGap(n)},_e=(n,e)=>{const t=n.getStyle().gap;if(!t)return;const s=n.components().models,i={componentRow:n,isVertical:F(n,e)};s.map(a=>me({...i,componentColumn:a},e)),ye({...i,gapValue:String(t),partial:!1},e)};function Fe(n,e){const{Blocks:t}=n,{typeColumn:s,typeRow:i,blocks:a}=e;if(a===!1||A(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;">
+"use strict";const de="app.grapesjs.com",ue="app-stage.grapesjs.com",ie=[de,ue,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],Se="license:check:start",be="license:check:end",Ce=()=>typeof window<"u",Pe=({isDev:n,isStage:e})=>`${n?"":`https://${e?ue:de}`}/api`,ze=()=>{const n=Ce()&&window.location.hostname;return!!n&&(ie.includes(n)||ie.some(e=>n.endsWith(e)))};function xe(n){return typeof n=="function"}async function we({path:n,baseApiUrl:e,method:t="GET",headers:s={},params:i,body:a}){const l=`${e||Pe({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 $=(n=>(n.free="free",n.startup="startup",n.business="business",n.enterprise="enterprise",n))($||{}),he=(n=>(n.web="web",n.email="email",n))(he||{});const ae={[$.free]:0,[$.startup]:10,[$.business]:20,[$.enterprise]:30};function ve(n){const e=n;return e.init=t=>s=>n(s,t),e}const Ie=n=>ve(n);async function Re({editor:n,plan:e,pluginName:t,licenseKey:s,cleanup:i}){let a="",o=!1;const l=ze(),c=p=>{console.warn("Cleanup plugin:",t,"Reason:",p),i()},g=(p={})=>{var S;const{error:u,sdkLicense:f}=p,v=(S=p.plan)==null?void 0:S.category;if(!(f||p.license)||u)c(u||"Invalid license");else if(v){const I=ae[e],R=ae[v];I>R&&c({pluginRequiredPlan:e,licensePlan:v})}};n.on(Se,p=>{a=p==null?void 0:p.baseApiUrl,o=!0}),n.on(be,p=>{g(p)}),setTimeout(async()=>{if(!o){if(l)return;if(s){const p=await Ee({licenseKey:s,pluginName:t,baseApiUrl:a});p&&g(p)}else c("The `licenseKey` option not provided")}},2e3)}async function Ee(n){const{licenseKey:e,pluginName:t,baseApiUrl:s}=n;try{return(await we({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 ge=n=>e=>{var t;return((t=e.getAttribute)==null?void 0:t.call(e,ne))===n},Ge=(...n)=>e=>n.some(t=>e.is(t)),Te=(...n)=>(e,t)=>n.some(s=>t.is(s)),fe="gjs-plg-",ne="data-type-role",N=class N{constructor(e){this.config=e}getSize(e){var t;return(t=this.config)!=null&&t.getSize?this.config.getSize(e):se(e.componentColumn,N.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({[N.CSS_FLEX_BASIS]:i},{partial:a})}}};N.CSS_FLEX_BASIS="flex-basis";let K=N;const j=class j{constructor(e){this.config=e}isGapSupported(){return!0}getGap(e){var t;return(t=this.config)!=null&&t.getGap?this.config.getGap(e):se(e.componentRow,j.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({[j.CSS_GAP]:i},{partial:a})}}};j.CSS_GAP="gap";let J=j;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=se(e.componentRow,Y.CSS_FLEX_DIRECTION,!0);return t==="column"||t==="column-reverse"}};Y.CSS_FLEX_DIRECTION="flex-direction";let q=Y;const _=class _{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(_.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(_.MJML_COLUMN_TYPE)&&s.addAttributes({width:`${parseFloat(i)}%`},{partial:a})}}};_.MJML_COLUMN_TYPE="mj-column";let Z=_;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 Q=U;class Le{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 A{constructor(){this.handlerCache=new Map}static getInstance(){return A.instance||(A.instance=new A),A.instance}getHandlers(e){const t=`${e.projectType}-${e.disableGapHandler?"nogap":"gap"}`;return this.handlerCache.has(t)||(H(e)?this.handlerCache.set(t,{sizeHandler:new Z(e),gapHandler:new Q(e),parentSizeHandler:new Le(e)}):this.handlerCache.set(t,{sizeHandler:new K(e),gapHandler:new J(e),parentSizeHandler:new q(e)})),this.handlerCache.get(t)}}function G(n){return A.getInstance().getHandlers(n)}const oe=n=>{n.style.display="none"},re=n=>{n.style.display="block"},V=n=>+parseFloat(`${n}`).toFixed(2),H=n=>n.projectType===he.email,k=(n,e)=>{const t=n.Canvas.getFramesEl();t&&(t.style.pointerEvents=e?"none":"")},$e=n=>n?["top","bottom"]:["left","right"],Ae=n=>{const e=n.parent();return e?e.components().models.indexOf(n)===0:!1},He=n=>{const e=n.parent();if(!e)return!1;const t=e.components().models;return t.indexOf(n)===t.length-1},Ve=n=>{const e=n.parent();if(!e)return!1;const t=e.components().models;return t.length>1&&n.index()===t.length-1},Me=(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")||He(n)&&(e==="right"||e==="bottom")),je=n=>{const e=n.parent();return e?e.components().models.length>1:!1},ce=(n,e)=>n==="right"||n==="bottom"?e>0:e<0,se=(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},le=(n,e,t)=>{const s=ee({componentRow:n,isVertical:e},t),i=n.components().models;return s*(i.length-1)},F=(n,e)=>G(e).parentSizeHandler.isLayoutVertical({componentRow:n}),B=(n,e)=>G(e).sizeHandler.getSize(n),ee=(n,e)=>{if(e!=null&&e.disableGapHandler)return 0;const{gapHandler:t,parentSizeHandler:s}=G(e);if(!t.isGapSupported())return 0;const i=t.getGap(n),a=s.getParentSize(n);return i/100*a},te=(n,e)=>G(e).parentSizeHandler.getParentSize(n),M=(n,e)=>{G(e).sizeHandler.setSize(n)},me=(n,e)=>{const t=B(n,e);M({...n,sizeValue:`${t}%`,partial:!1},e)},ye=(n,e)=>{if(e!=null&&e.disableGapHandler)return;const{gapHandler:t}=G(e);t.isGapSupported()&&t.setGap(n)},_e=(n,e)=>{const t=n.getStyle().gap;if(!t)return;const s=n.components().models,i={componentRow:n,isVertical:F(n,e)};s.map(a=>me({...i,componentColumn:a},e)),ye({...i,gapValue:String(t),partial:!1},e)};function Fe(n,e){const{Blocks:t}=n,{typeColumn:s,typeRow:i,blocks:a}=e;if(a===!1||H(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=xe(a)?a({blocks:g}):g;return p.forEach(u=>t.add(u.id,u)),()=>{p.forEach(u=>t.remove(u.id))}}const Be=(n,e)=>{const{Components:t}=n,{typeRow:s,typeColumn:i,extendTypeColumn:a}=e,o=`${fe}${i}`,c=!!i&&!!t.getType(i)&&!a;if(!(!i||c||A(e)))return t.addType(i,{isComponent:ge(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:Te(s),attributes:{[ne]:i},styles:`
+    </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=xe(a)?a({blocks:g}):g;return p.forEach(u=>t.add(u.id,u)),()=>{p.forEach(u=>t.remove(u.id))}}const Be=(n,e)=>{const{Components:t}=n,{typeRow:s,typeColumn:i,extendTypeColumn:a}=e,o=`${fe}${i}`,c=!!i&&!!t.getType(i)&&!a;if(!(!i||c||H(e)))return t.addType(i,{isComponent:ge(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:Te(s),attributes:{[ne]:i},styles:`
           .${o} {
             flex-grow: 1;
           }
-        `}}}),()=>{t.removeType(i)}},De=(n,e)=>{const{Components:t}=n,{typeRow:s,typeColumn:i,extendTypeRow:a}=e,o=`${fe}${s}`,c=!!s&&!!t.getType(s)&&!a;if(!(!s||c||A(e)))return t.addType(s,{isComponent:ge(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:{[ne]: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:`
+        `}}}),()=>{t.removeType(i)}},De=(n,e)=>{const{Components:t}=n,{typeRow:s,typeColumn:i,extendTypeRow:a}=e,o=`${fe}${s}`,c=!!s&&!!t.getType(s)&&!a;if(!(!s||c||H(e)))return t.addType(s,{isComponent:ge(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:{[ne]: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:`
           .${o} {
             display: flex;
             align-items: stretch;
             flex-wrap: nowrap;
           }
-        `}}}),()=>{t.removeType(s)}};class ke{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 Oe{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=F(o,i),p=Me(c,t,g,l.length);p!==-1&&(a.adjacentIdx=p);const u={componentColumn:e,componentRow:o,isVertical:g};if(a.startPercent=B(u,i),typeof a.adjacentIdx<"u"){const f=l[a.adjacentIdx];a.neighborStartPercent=B({...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&&F(t,this.opts)};s==null||s.forEach(a=>me({...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=te({componentRow:a,isVertical:c},o),p=le(a,c,this.opts),f=100-p/g*100,v=s/(g-p)*f,{startPercent:P=0,neighborStartPercent:S=0}=i,I={componentRow:a,isVertical:c,componentColumn:e,partial:!0},R=ce(t,s)?P+Math.abs(v):P-Math.abs(v);if(typeof i.adjacentIdx<"u"){const z=a.components().models[i.adjacentIdx],x=P+S,b=x-l,r=Math.min(b,Math.max(l,R)),d=x-r;M({...I,sizeValue:`${V(r)}%`},o),M({...I,componentColumn:z,sizeValue:`${V(d)}%`},o)}else{const z=Math.max(l,Math.min(f,R));M({...I,sizeValue:`${V(z)}%`},o)}}updateSnapResize(e,t,s){const i=this.getState(e),a=e.parent(),o=O(t),l=te({componentRow:a,isVertical:o},this.opts),c=le(a,o,this.opts),g=l-c,p=s/g*100,u=ce(t,s),{startPercent:f=0,snapDivisions:v=12}=i,P=u?f+Math.abs(p):f-Math.abs(p),S=100/v,I=Math.floor(P/S)*S,R=Math.ceil(P/S)*S,z=Math.abs(R-P),x=Math.abs(P-I),b=S*.2,C=z<x?R:I;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 Xe{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=te({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+B({...u,componentColumn:C},a),0),P=100-c*p,S=a.minItemPercent||5;if(P<S*g.length)return;const R=100-p*c,z=f-R,x={componentRow:e,isVertical:i,partial:!0};g.map(b=>{const C=B({...u,componentColumn:b},a),r=C-C/f*z;M({...x,componentColumn:b,sizeValue:`${V(r)}%`},a)}),ye({...x,gapValue:`${V(c)}%`},a)}finishGapAdjust(e){_e(e,this.opts)}}class Ye{constructor(e,t,s){this.editor=e,this.registry=t,this.opts=s,this.resizeHandler=new Oe(e,t,s),this.gapHandler=new Xe(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",pe=`${X}__handle-size`,Ue=`${X}__handle-gap`;function We(n,e){const{Canvas:t}=n,s="flex-resize-spot";let i,a,o,l,c=null,g=null;const p=new ke,u=new Ye(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 y=d,h=O(y);m.className=`${pe} ${pe}-${y} gjs-resizer-h gjs-cv-unscale`,m.style.cssText=`
+        `}}}),()=>{t.removeType(s)}},ke="flexComponent",Oe=$.startup;class Xe{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 Ye{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=F(o,i),p=Me(c,t,g,l.length);p!==-1&&(a.adjacentIdx=p);const u={componentColumn:e,componentRow:o,isVertical:g};if(a.startPercent=B(u,i),typeof a.adjacentIdx<"u"){const f=l[a.adjacentIdx];a.neighborStartPercent=B({...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&&F(t,this.opts)};s==null||s.forEach(a=>me({...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=te({componentRow:a,isVertical:c},o),p=le(a,c,this.opts),f=100-p/g*100,v=s/(g-p)*f,{startPercent:P=0,neighborStartPercent:S=0}=i,I={componentRow:a,isVertical:c,componentColumn:e,partial:!0},R=ce(t,s)?P+Math.abs(v):P-Math.abs(v);if(typeof i.adjacentIdx<"u"){const z=a.components().models[i.adjacentIdx],x=P+S,b=x-l,r=Math.min(b,Math.max(l,R)),d=x-r;M({...I,sizeValue:`${V(r)}%`},o),M({...I,componentColumn:z,sizeValue:`${V(d)}%`},o)}else{const z=Math.max(l,Math.min(f,R));M({...I,sizeValue:`${V(z)}%`},o)}}updateSnapResize(e,t,s){const i=this.getState(e),a=e.parent(),o=O(t),l=te({componentRow:a,isVertical:o},this.opts),c=le(a,o,this.opts),g=l-c,p=s/g*100,u=ce(t,s),{startPercent:f=0,snapDivisions:v=12}=i,P=u?f+Math.abs(p):f-Math.abs(p),S=100/v,I=Math.floor(P/S)*S,R=Math.ceil(P/S)*S,z=Math.abs(R-P),x=Math.abs(P-I),b=S*.2,C=z<x?R:I;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 Ue{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=te({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+B({...u,componentColumn:C},a),0),P=100-c*p,S=a.minItemPercent||5;if(P<S*g.length)return;const R=100-p*c,z=f-R,x={componentRow:e,isVertical:i,partial:!0};g.map(b=>{const C=B({...u,componentColumn:b},a),r=C-C/f*z;M({...x,componentColumn:b,sizeValue:`${V(r)}%`},a)}),ye({...x,gapValue:`${V(c)}%`},a)}finishGapAdjust(e){_e(e,this.opts)}}class We{constructor(e,t,s){this.editor=e,this.registry=t,this.opts=s,this.resizeHandler=new Ye(e,t,s),this.gapHandler=new Ue(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",pe=`${X}__handle-size`,Ke=`${X}__handle-gap`;function Je(n,e){const{Canvas:t}=n,s="flex-resize-spot";let i,a,o,l,c=null,g=null;const p=new Xe,u=new We(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 y=d,h=O(y);m.className=`${pe} ${pe}-${y} gjs-resizer-h gjs-cv-unscale`,m.style.cssText=`
         pointer-events: all;
         position: absolute;
         z-index: 1;
@@ -20,7 +20,7 @@
         ${y==="right"?"right: 0px;":""}
         ${y==="top"?"top: 0px;":""}
         ${y==="bottom"?"bottom: 0px;":""}
-      `,m.addEventListener("pointerdown",v(y)),a.appendChild(m)}),!e.disableGapHandler&&!A(e)&&(l=document.createElement("div"),l.className=Ue,l.style.cssText=`
+      `,m.addEventListener("pointerdown",v(y)),a.appendChild(m)}),!e.disableGapHandler&&!H(e)&&(l=document.createElement("div"),l.className=Ke,l.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)},v=r=>d=>{if(!c)return;k(n,!0),d.stopPropagation(),d.preventDefault(),u.startResize(c,r,d);const m=d.clientX,y=d.clientY;d.target.setPointerCapture(d.pointerId);const h=T=>{const E=n.Canvas.getZoomMultiplier(),L=(T.clientX-m)*E,D=(T.clientY-y)*E,W=O(r)?D:L;u.updateResizeByDelta(c,r,W)},w=()=>{k(n,!1),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;k(n,!0),r.stopPropagation(),r.preventDefault();const m=F(d,e),y=ee({componentRow:d,isVertical:m},e),h=r.clientX,w=r.clientY;r.target.setPointerCapture(r.pointerId);const T=L=>{const D=n.Canvas.getZoomMultiplier(),W=m?(L.clientY-w)*D:(L.clientX-h)*D;u.updateGapByDelta(d,W,y,m)},E=()=>{k(n,!1),u.finishGapAdjust(d),r.target.releasePointerCapture(r.pointerId),document.removeEventListener("pointermove",T),document.removeEventListener("pointerup",E)};document.addEventListener("pointermove",T),document.addEventListener("pointerup",E)},S=r=>{const d=r.component;if(!d||!i||(c=d,g=d.parent(),!g))return;const m=g;re(i);const y=r.getStyle();a&&Object.assign(a.style,y);const h=F(m,e),w=$e(h);if(Object.values(o).forEach(oe),w.forEach(E=>{if(je(d,E))return;const L=o[E];re(L)}),G(e).gapHandler.isGapSupported()&&l&&Ne(d)){const E=ee({componentRow:m,isVertical:h},e);I(E,h,Ve(d))}},I=(r,d,m=!1)=>{const y=e.gapHandleSize,h=l.style;if(d){h.height=`${y}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=`${y}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"}},R=()=>{i&&(oe(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}):R()},x=()=>{const r=t.getSpots().filter(d=>d.type===s)[0];r&&S(r)},b=(r,d)=>{p.registerTypeRelationship(r,d)};n.onReady(()=>{f(),A(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)}}const Ke="flexComponent",Je=function(n,e={}){const t={typeRow:"flex-row",typeColumn:"flex-column",gapHandleSize:3,snapDivisions:12,minItemPercent:5,...e},s=[De(n,t),Be(n,t)],i=We(n,t),a=Fe(n,t);Re({editor:n,licenseKey:t.licenseKey,plan:$.startup,pluginName:Ke,cleanup:()=>{s.forEach(o=>o==null?void 0:o()),i(),a==null||a()}})},qe=Ie(Je);module.exports=qe;
+      `,l.addEventListener("pointerdown",P()),a.appendChild(l)),i.append(a),(r=t.getSpotsEl())==null||r.appendChild(i)},v=r=>d=>{if(!c)return;k(n,!0),d.stopPropagation(),d.preventDefault(),u.startResize(c,r,d);const m=d.clientX,y=d.clientY;d.target.setPointerCapture(d.pointerId);const h=T=>{const E=n.Canvas.getZoomMultiplier(),L=(T.clientX-m)*E,D=(T.clientY-y)*E,W=O(r)?D:L;u.updateResizeByDelta(c,r,W)},w=()=>{k(n,!1),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;k(n,!0),r.stopPropagation(),r.preventDefault();const m=F(d,e),y=ee({componentRow:d,isVertical:m},e),h=r.clientX,w=r.clientY;r.target.setPointerCapture(r.pointerId);const T=L=>{const D=n.Canvas.getZoomMultiplier(),W=m?(L.clientY-w)*D:(L.clientX-h)*D;u.updateGapByDelta(d,W,y,m)},E=()=>{k(n,!1),u.finishGapAdjust(d),r.target.releasePointerCapture(r.pointerId),document.removeEventListener("pointermove",T),document.removeEventListener("pointerup",E)};document.addEventListener("pointermove",T),document.addEventListener("pointerup",E)},S=r=>{const d=r.component;if(!d||!i||(c=d,g=d.parent(),!g))return;const m=g;re(i);const y=r.getStyle();a&&Object.assign(a.style,y);const h=F(m,e),w=$e(h);if(Object.values(o).forEach(oe),w.forEach(E=>{if(Ne(d,E))return;const L=o[E];re(L)}),G(e).gapHandler.isGapSupported()&&l&&je(d)){const E=ee({componentRow:m,isVertical:h},e);I(E,h,Ve(d))}},I=(r,d,m=!1)=>{const y=e.gapHandleSize,h=l.style;if(d){h.height=`${y}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=`${y}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"}},R=()=>{i&&(oe(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}):R()},x=()=>{const r=t.getSpots().filter(d=>d.type===s)[0];r&&S(r)},b=(r,d)=>{p.registerTypeRelationship(r,d)};n.onReady(()=>{f(),H(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)}}const qe=function(n,e={}){const t={typeRow:"flex-row",typeColumn:"flex-column",gapHandleSize:3,snapDivisions:12,minItemPercent:5,...e},s=[De(n,t),Be(n,t)],i=Je(n,t),a=Fe(n,t);Re({editor:n,licenseKey:t.licenseKey,plan:Oe,pluginName:ke,cleanup:()=>{s.forEach(o=>o==null?void 0:o()),i(),a==null||a()}})},Ze=Ie(qe);module.exports=Ze;

package/dist/flexComponent/index.es.js

@@ -103,13 +103,13 @@ async function Ee(n) {
 const ge = (n) => (e) => {
   var t;
   return ((t = e.getAttribute) == null ? void 0 : t.call(e, ne)) === n;
-}, Ge = (...n) => (e) => n.some((t) => e.is(t)), Te = (...n) => (e, t) => n.some((s) => t.is(s)), fe = "gjs-plg-", ne = "data-type-role", j = class j {
+}, Ge = (...n) => (e) => n.some((t) => e.is(t)), Te = (...n) => (e, t) => n.some((s) => t.is(s)), fe = "gjs-plg-", ne = "data-type-role", N = class N {
   constructor(e) {
     this.config = e;
   }
   getSize(e) {
     var t;
-    return (t = this.config) != null && t.getSize ? this.config.getSize(e) : se(e.componentColumn, j.CSS_FLEX_BASIS);
+    return (t = this.config) != null && t.getSize ? this.config.getSize(e) : se(e.componentColumn, N.CSS_FLEX_BASIS);
   }
   setSize(e) {
     var t;
@@ -117,13 +117,13 @@ const ge = (n) => (e) => {
       this.config.setSize(e);
     else {
       const { componentColumn: s, sizeValue: i, partial: a } = e;
-      s.addStyle({ [j.CSS_FLEX_BASIS]: i }, { partial: a });
+      s.addStyle({ [N.CSS_FLEX_BASIS]: i }, { partial: a });
     }
   }
 };
-j.CSS_FLEX_BASIS = "flex-basis";
-let K = j;
-const N = class N {
+N.CSS_FLEX_BASIS = "flex-basis";
+let K = N;
+const j = class j {
   constructor(e) {
     this.config = e;
   }
@@ -132,7 +132,7 @@ const N = class N {
   }
   getGap(e) {
     var t;
-    return (t = this.config) != null && t.getGap ? this.config.getGap(e) : se(e.componentRow, N.CSS_GAP);
+    return (t = this.config) != null && t.getGap ? this.config.getGap(e) : se(e.componentRow, j.CSS_GAP);
   }
   setGap(e) {
     var t;
@@ -140,12 +140,12 @@ const N = class N {
       this.config.setGap(e);
     else {
       const { componentRow: s, gapValue: i, partial: a } = e;
-      s.addStyle({ [N.CSS_GAP]: i }, { partial: a });
+      s.addStyle({ [j.CSS_GAP]: i }, { partial: a });
     }
   }
 };
-N.CSS_GAP = "gap";
-let J = N;
+j.CSS_GAP = "gap";
+let J = j;
 const Y = class Y {
   constructor(e) {
     this.config = e;
@@ -240,16 +240,16 @@ class Le {
     return (t = this.config) != null && t.isParentVertical ? this.config.isParentVertical(e) : !1;
   }
 }
-class H {
+class A {
   constructor() {
     this.handlerCache = /* @__PURE__ */ new Map();
   }
   static getInstance() {
-    return H.instance || (H.instance = new H()), H.instance;
+    return A.instance || (A.instance = new A()), A.instance;
   }
   getHandlers(e) {
     const t = `${e.projectType}-${e.disableGapHandler ? "nogap" : "gap"}`;
-    return this.handlerCache.has(t) || (A(e) ? this.handlerCache.set(t, {
+    return this.handlerCache.has(t) || (H(e) ? this.handlerCache.set(t, {
       sizeHandler: new Z(e),
       gapHandler: new Q(e),
       parentSizeHandler: new Le(e)
@@ -261,19 +261,19 @@ class H {
   }
 }
 function G(n) {
-  return H.getInstance().getHandlers(n);
+  return A.getInstance().getHandlers(n);
 }
 const oe = (n) => {
   n.style.display = "none";
 }, re = (n) => {
   n.style.display = "block";
-}, V = (n) => +parseFloat(`${n}`).toFixed(2), A = (n) => n.projectType === he.email, k = (n, e) => {
+}, V = (n) => +parseFloat(`${n}`).toFixed(2), H = (n) => n.projectType === he.email, k = (n, e) => {
   const t = n.Canvas.getFramesEl();
   t && (t.style.pointerEvents = e ? "none" : "");
-}, $e = (n) => n ? ["top", "bottom"] : ["left", "right"], He = (n) => {
+}, $e = (n) => n ? ["top", "bottom"] : ["left", "right"], Ae = (n) => {
   const e = n.parent();
   return e ? e.components().models.indexOf(n) === 0 : !1;
-}, Ae = (n) => {
+}, He = (n) => {
   const e = n.parent();
   if (!e) return !1;
   const t = e.components().models;
@@ -286,7 +286,7 @@ const oe = (n) => {
 }, Me = (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", je = (n, e) => !!(He(n) && (e === "left" || e === "top") || Ae(n) && (e === "right" || e === "bottom")), Ne = (n) => {
+}, O = (n) => n === "top" || n === "bottom", Ne = (n, e) => !!(Ae(n) && (e === "left" || e === "top") || He(n) && (e === "right" || e === "bottom")), je = (n) => {
   const e = n.parent();
   return e ? e.components().models.length > 1 : !1;
 }, ce = (n, e) => n === "right" || n === "bottom" ? e > 0 : e < 0, se = (n, e, t = !1) => {
@@ -325,7 +325,7 @@ const oe = (n) => {
 };
 function Fe(n, e) {
   const { Blocks: t } = n, { typeColumn: s, typeRow: i, blocks: a } = e;
-  if (a === !1 || A(e)) return;
+  if (a === !1 || H(e)) return;
   const o = (u) => ({
     type: i,
     components: u.map((f) => ({
@@ -361,7 +361,7 @@ function Fe(n, e) {
 }
 const Be = (n, e) => {
   const { Components: t } = n, { typeRow: s, typeColumn: i, extendTypeColumn: a } = e, o = `${fe}${i}`, c = !!i && !!t.getType(i) && !a;
-  if (!(!i || c || A(e)))
+  if (!(!i || c || H(e)))
     return t.addType(i, {
       isComponent: ge(i),
       model: {
@@ -385,7 +385,7 @@ const Be = (n, e) => {
     };
 }, De = (n, e) => {
   const { Components: t } = n, { typeRow: s, typeColumn: i, extendTypeRow: a } = e, o = `${fe}${s}`, c = !!s && !!t.getType(s) && !a;
-  if (!(!s || c || A(e)))
+  if (!(!s || c || H(e)))
     return t.addType(s, {
       isComponent: ge(s),
       model: {
@@ -453,8 +453,8 @@ const Be = (n, e) => {
     }), () => {
       t.removeType(s);
     };
-};
-class ke {
+}, ke = "flexComponent", Oe = $.startup;
+class Xe {
   constructor() {
     this.resizableChildTypes = /* @__PURE__ */ new Set(), this.gapAdjustableParentTypes = /* @__PURE__ */ new Set(), this.typeRelationships = /* @__PURE__ */ new Map();
   }
@@ -478,7 +478,7 @@ class ke {
     return this.typeRelationships.has(s) ? this.typeRelationships.get(s).has(i) : !1;
   }
 }
-class Oe {
+class Ye {
   constructor(e, t, s) {
     this.editor = e, this.registry = t, this.opts = s, this.resizeState = /* @__PURE__ */ new WeakMap();
   }
@@ -534,7 +534,7 @@ class Oe {
     } else z >= b && x >= b && (i.lastSnappedPercent = void 0);
   }
 }
-class Xe {
+class Ue {
   constructor(e, t, s) {
     this.editor = e, this.registry = t, this.opts = s;
   }
@@ -556,9 +556,9 @@ class Xe {
     _e(e, this.opts);
   }
 }
-class Ye {
+class We {
   constructor(e, t, s) {
-    this.editor = e, this.registry = t, this.opts = s, this.resizeHandler = new Oe(e, t, s), this.gapHandler = new Xe(e, t, s);
+    this.editor = e, this.registry = t, this.opts = s, this.resizeHandler = new Ye(e, t, s), this.gapHandler = new Ue(e, t, s);
   }
   startResize(e, t, s) {
     this.resizeHandler.startResize(e, t, s);
@@ -583,11 +583,11 @@ class Ye {
     return this.registry.isGapAdjustableParent(e);
   }
 }
-const X = "gs-flex-spots", pe = `${X}__handle-size`, Ue = `${X}__handle-gap`;
-function We(n, e) {
+const X = "gs-flex-spots", pe = `${X}__handle-size`, Ke = `${X}__handle-gap`;
+function Je(n, e) {
   const { Canvas: t } = n, s = "flex-resize-spot";
   let i, a, o, l, c = null, g = null;
-  const p = new ke(), u = new Ye(n, p, e), f = () => {
+  const p = new Xe(), u = new We(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"),
@@ -607,7 +607,7 @@ function We(n, e) {
         ${y === "top" ? "top: 0px;" : ""}
         ${y === "bottom" ? "bottom: 0px;" : ""}
       `, m.addEventListener("pointerdown", v(y)), a.appendChild(m);
-    }), !e.disableGapHandler && !A(e) && (l = document.createElement("div"), l.className = Ue, l.style.cssText = `
+    }), !e.disableGapHandler && !H(e) && (l = document.createElement("div"), l.className = Ke, l.style.cssText = `
         position: absolute;
         background-color: var(--gs-theme-cl-cmp-bg1, #3b97e3);
         border-width: 2px;
@@ -652,10 +652,10 @@ function We(n, e) {
     a && Object.assign(a.style, y);
     const h = F(m, e), w = $e(h);
     if (Object.values(o).forEach(oe), w.forEach((E) => {
-      if (je(d, E)) return;
+      if (Ne(d, E)) return;
       const L = o[E];
       re(L);
-    }), G(e).gapHandler.isGapSupported() && l && Ne(d)) {
+    }), G(e).gapHandler.isGapSupported() && l && je(d)) {
       const E = ee({ componentRow: m, isVertical: h }, e);
       I(E, h, Ve(d));
     }
@@ -683,14 +683,14 @@ function We(n, e) {
     p.registerTypeRelationship(r, d);
   };
   n.onReady(() => {
-    f(), A(e) ? b("mj-section", "mj-column") : b(e.typeRow, e.typeColumn);
+    f(), H(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);
   };
 }
-const Ke = "flexComponent", Je = function(n, e = {}) {
+const qe = function(n, e = {}) {
   const t = {
     typeRow: "flex-row",
     typeColumn: "flex-column",
@@ -698,17 +698,17 @@ const Ke = "flexComponent", Je = function(n, e = {}) {
     snapDivisions: 12,
     minItemPercent: 5,
     ...e
-  }, s = [De(n, t), Be(n, t)], i = We(n, t), a = Fe(n, t);
+  }, s = [De(n, t), Be(n, t)], i = Je(n, t), a = Fe(n, t);
   Re({
     editor: n,
     licenseKey: t.licenseKey,
-    plan: $.startup,
-    pluginName: Ke,
+    plan: Oe,
+    pluginName: ke,
     cleanup: () => {
       s.forEach((o) => o == null ? void 0 : o()), i(), a == null || a();
     }
   });
-}, qe = Ie(Je);
+}, Ze = Ie(qe);
 export {
-  qe as default
+  Ze as default
 };