@grapesjs/studio-sdk-plugins 1.0.14 → 1.0.15-rc.0

package/dist/accordionComponent/components/Accordion.d.ts

@@ -0,0 +1,4 @@
+import { Editor } from '../../types';
+import { AccordionComponentOptions } from '../types';
+declare const loadAccordion: (editor: Editor, opts: AccordionComponentOptions) => () => void;
+export default loadAccordion;

package/dist/accordionComponent/components/AccordionContent.d.ts

@@ -0,0 +1,3 @@
+import { Editor } from '../../types';
+declare const loadAccordionContent: (editor: Editor) => () => void;
+export default loadAccordionContent;

package/dist/accordionComponent/components/AccordionGroup.d.ts

@@ -0,0 +1,4 @@
+import { Editor } from '../../types';
+import { AccordionComponentOptions } from '../types';
+declare const loadAccordionGroup: (editor: Editor, opts: AccordionComponentOptions) => () => void;
+export default loadAccordionGroup;

package/dist/accordionComponent/components/AccordionHeader.d.ts

@@ -0,0 +1,4 @@
+import { Editor } from '../../types';
+import { AccordionComponentOptions } from '../types';
+declare const loadAccordionHeader: (editor: Editor, opts: AccordionComponentOptions) => () => void;
+export default loadAccordionHeader;

package/dist/accordionComponent/components/AccordionMarker.d.ts

@@ -0,0 +1,3 @@
+import { Editor } from '../../types';
+declare const loadAccordionMarker: (editor: Editor) => () => void;
+export default loadAccordionMarker;

package/dist/accordionComponent/index.cjs.d.ts

@@ -0,0 +1,3 @@
+import { AccordionComponentOptions } from './types';
+declare const _default: import('../utils').PluginWithInit<AccordionComponentOptions>;
+export default _default;

package/dist/accordionComponent/index.cjs.js

@@ -0,0 +1,39 @@
+"use strict";require("grapesjs");const M="app.grapesjs.com",L="app-stage.grapesjs.com",$=[M,L,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],V="license:check:start",_="license:check:end",N=()=>typeof window<"u",G=({isDev:e,isStage:t})=>`${e?"":`https://${t?L:M}`}/api`,P=()=>{const e=N()&&window.location.hostname;return!!e&&($.includes(e)||$.some(t=>e.endsWith(t)))};async function U({path:e,baseApiUrl:t,method:n="GET",headers:s={},params:c,body:a}){const u=`${t||G({isDev:!1,isStage:!1})}${e}`,i={method:n,headers:{"Content-Type":"application/json",...s}};a&&(i.body=JSON.stringify(a));const r=c?new URLSearchParams(c).toString():"",o=r?`?${r}`:"",l=await fetch(`${u}${o}`,i);if(!l.ok)throw new Error(`HTTP error! status: ${l.status}`);return l.json()}var b=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(b||{});const E={[b.free]:0,[b.startup]:10,[b.business]:20,[b.enterprise]:30};function D(e){const t=e;return t.init=n=>s=>e(s,n),t}const K=e=>D(e);async function W({editor:e,plan:t,pluginName:n,licenseKey:s,cleanup:c}){let a="",p=!1;const u=P(),i=o=>{console.warn("Cleanup plugin:",n,"Reason:",o),c()},r=(o={})=>{var w;const{error:l,sdkLicense:f}=o,g=(w=o.plan)==null?void 0:w.category;if(!(f||o.license)||l)i(l||"Invalid license");else if(g){const B=E[t],I=E[g];B>I&&i({pluginRequiredPlan:t,licensePlan:g})}};e.on(V,o=>{a=o==null?void 0:o.baseApiUrl,p=!0}),e.on(_,o=>{r(o)}),setTimeout(async()=>{if(!p){if(u)return;if(s){const o=await R({licenseKey:s,pluginName:n,baseApiUrl:a});o&&r(o)}else i("The `licenseKey` option not provided")}},2e3)}async function R(e){const{licenseKey:t,pluginName:n,baseApiUrl:s}=e;try{return(await U({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(c){return console.error("Error during SDK license check:",c),!1}}const A=e=>t=>{var n;return((n=t.getAttribute)==null?void 0:n.call(t,q))===e},O=(...e)=>t=>e.some(n=>t.is(n)),j=(...e)=>(t,n)=>e.some(s=>n.is(s)),C="gjs-plg-",q="data-type-role",d="accordion",T=`${d}-group`,m=`${d}-header`,h=`${d}-content`,y=`${d}-marker`,x=`${C}${m}`,k=`${C}${y}`,F=`${C}${h}`,H=`${k}-open`,v={accordion:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V8.154H5v10.23q0 .232.192.424t.423.192"/></svg>',accordionGroup:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M8.116 16h10.769q.23 0 .423-.192t.192-.423V6h-12v9.385q0 .23.192.423t.423.192m0 1q-.69 0-1.153-.462T6.5 15.385V4.615q0-.69.463-1.153T8.116 3h10.769q.69 0 1.153.462t.462 1.153v10.77q0 .69-.462 1.152T18.884 17zm-3 3q-.69 0-1.153-.462T3.5 18.385V6.615h1v11.77q0 .23.192.423t.423.192h11.77v1zM7.5 4v12z"/></svg>',accordionHeader:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V5.616q0-.231-.192-.424T18.384 5H5.616q-.231 0-.424.192T5 5.616v12.769q0 .23.192.423t.423.192M5 5v14zm2.616 4.192h6q.413 0 .706-.293q.294-.293.294-.707t-.294-.706q-.293-.294-.706-.294h-6q-.414 0-.707.294t-.293.706t.293.707t.707.293"/></svg>',accordionContent:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h14.77q.69 0 1.152.463T21 6.616v10.769q0 .69-.463 1.153T19.385 19zm0-1h14.769q.23 0 .423-.192t.192-.424V6.616q0-.231-.192-.424T19.385 6H4.615q-.23 0-.423.192T4 6.616v10.769q0 .23.192.423t.423.192M4 18V6zm2.23-2.116h11.54q.213 0 .356-.143t.143-.357t-.143-.356t-.357-.144H6.231q-.214 0-.357.144q-.143.143-.143.357q0 .213.143.356t.357.144m0-3.385h11.538q.214 0 .357-.143t.143-.357t-.143-.357t-.357-.143H6.231q-.214 0-.357.143T5.731 12t.143.357t.357.143m0-3.384H14q.214 0 .357-.144q.143-.143.143-.356q0-.214-.143-.357T14 8.116H6.23q-.213 0-.356.143t-.143.357t.143.356t.357.144"/></svg>',accordionMarker:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.596l3.173-3.192H8.827zM5.616 20q-.672 0-1.144-.472T4 18.385V5.615q0-.67.472-1.143Q4.944 4 5.616 4h12.769q.67 0 1.143.472q.472.472.472 1.144v12.769q0 .67-.472 1.143q-.472.472-1.143.472zM5 9v9.385q0 .23.192.423t.423.192h12.77q.23 0 .423-.192t.192-.423V9z"/></svg>',caret:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.4 8.6 4.6 4.6 4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z"/></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>'},S=(e,t)=>{const{toolbarIconOpen:n=v.eye}=t,s=e.is(d)?e:e.closestType(d);if(!n||!s)return;const{toolbar:c}=e,a={id:"accordion-toggle-open",label:n,command:()=>s.toggleOpen()};!c.find(u=>u.id===a.id)&&(c==null||c.unshift(a))},Y=(e,t)=>{const{Components:n,Blocks:s}=e,{block:c={}}=t,a="Accordion",p=`${C}${d}`,u=function(i={}){const r=this,o=()=>{const{clsMarkerOpen:l}=i,f=r.querySelector('[data-type-role="accordion-marker"]');!f||!l||(r.open?f.classList.add(l):f.classList.remove(l))};r.addEventListener("toggle",()=>{o(),r.dispatchEvent(new CustomEvent("details-toggle",{bubbles:!0}))}),o()};return n.addType(d,{block:c&&{label:a,media:v.accordion,category:"Extra",select:!0,...c},isComponent:A(d),extendFn:["initToolbar"],model:{defaults:{tagName:"details",name:a,classes:p,emptyState:!0,clsMarkerOpen:H,attributes:{[q]:d},droppable:O(m,h),components:[{type:m},{type:h}],"script-props":["clsMarkerOpen"],script:u,traits:[{type:"checkbox",name:"open",label:"Open"}],styles:`
+          .${p}::details-content {
+            opacity: 0;
+            block-size: 0;
+            overflow: hidden;
+            transform: translateY(-5px);
+            transition-property: opacity, transform, block-size, content-visibility;
+            transition-behavior: normal, normal, normal, allow-discrete;
+            transition-timing-function: ease-in-out;
+            transition-duration: 0.2s;
+          }
+
+          .${p}[open]::details-content {
+            opacity: 1;
+            transform: translateY(0);
+            block-size: auto;
+          }
+        `},toggleOpen(){this.addAttributes({open:!this.getAttributes().open})},initToolbar(){S(this,t)}}}),()=>{s.remove(d),n.removeType(d)}},Z=e=>{const{Components:t}=e;return t.addType(h,{isComponent:A(h),model:{defaults:{name:"Accordion Content",removable:!1,copyable:!1,draggable:!1,emptyState:!0,classes:F,icon:v.accordionContent,attributes:{[q]:h},components:"<div>Accordion content</div>"}}}),()=>{t.removeType(h)}},J=(e,t)=>{const{Components:n,Blocks:s}=e,{blockGroup:c={}}=t,a="Accordion Group",p=function(i={}){if(!i.single)return;const r=this;r.addEventListener("details-toggle",o=>{const l=o.target;if(!i.single||!l||!l.open)return;r.querySelectorAll('[data-type-role="accordion"]').forEach(g=>{l!==g&&g.open&&(g.open=!1)})})},u=(i={})=>({type:d,attributes:{open:i.open},components:[{type:m,components:[`<div>${i.header}</div>`,{type:y}]},{type:h,components:`<div>${i.content}</div>`}]});return n.addType(T,{block:c&&{label:a,media:v.accordionGroup,category:"Extra",select:!0,...c},isComponent:A(T),model:{defaults:{name:a,attributes:{[q]:T},droppable:O(d),single:!0,emptyState:!0,components:Array(3).fill(0).map((i,r)=>u({open:r===0,header:`Accordion header ${r+1}`,content:`Accordion content ${r+1}`})),traits:[{type:"checkbox",name:"single",changeProp:!0,tip:"Only one accordion can be open at a time",label:"Single open"}],"script-props":["single"],script:p}}}),()=>{s.remove(T),n.removeType(T)}},Q=(e,t)=>{const{Components:n}=e;return n.addType(m,{isComponent:A(m),extendFn:["initToolbar"],model:{defaults:{tagName:"summary",name:"Accordion Header",removable:!1,copyable:!1,draggable:!1,emptyState:!0,icon:v.accordionHeader,classes:x,attributes:{[q]:m},components:["<div>Accordion header</div>",{type:y}],styles:`
+          summary {
+            list-style: none;
+          }
+          .${x} {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 1rem;
+          }
+        `},initToolbar(){S(this,t)}}}),()=>{n.removeType(m)}},X=e=>{const{Components:t}=e;return t.addType(y,{extend:"icon",isComponent:A(y),model:{defaults:{name:"Accordion Marker",icon:v.accordionMarker,classes:k,attributes:{[q]:y},components:v.caret,droppable:!1,draggable:j(m),styles:`
+          .${k} {
+            min-width: 24px;
+            width: 24px;
+            height: 24px;
+            transition: transform 0.2s ease-in-out;
+          }
+          .${H} {
+            transform: rotateZ(180deg);
+          }
+        `}}}),()=>{t.removeType(y)}},ee="accordionComponent",te=function(e,t={}){const n=[Y(e,t),J(e,t),Q(e,t),X(e),Z(e)];W({editor:e,licenseKey:t.licenseKey,plan:b.startup,pluginName:ee,cleanup:()=>{n.forEach(s=>s())}})},ne=K(te);module.exports=ne;

package/dist/accordionComponent/index.d.ts

@@ -0,0 +1,3 @@
+import { AccordionComponentOptions } from './types';
+declare const _default: import('../utils').PluginWithInit<AccordionComponentOptions>;
+export default _default;

package/dist/accordionComponent/index.es.d.ts

@@ -0,0 +1,3 @@
+import { AccordionComponentOptions } from './types';
+declare const _default: import('../utils').PluginWithInit<AccordionComponentOptions>;
+export default _default;

package/dist/accordionComponent/index.es.js

@@ -0,0 +1,360 @@
+import "grapesjs";
+const M = "app.grapesjs.com", L = "app-stage.grapesjs.com", $ = [
+  M,
+  L,
+  "localhost",
+  "127.0.0.1",
+  ".local-credentialless.webcontainer.io",
+  // For stackblitz.com demos
+  ".local.webcontainer.io",
+  // For stackblitz.com demos
+  "-sandpack.codesandbox.io"
+  // For Sandpack demos
+], V = "license:check:start", _ = "license:check:end", N = () => typeof window < "u", G = ({ isDev: e, isStage: t }) => `${e ? "" : `https://${t ? L : M}`}/api`, P = () => {
+  const e = N() && window.location.hostname;
+  return !!e && ($.includes(e) || $.some((t) => e.endsWith(t)));
+};
+async function U({
+  path: e,
+  baseApiUrl: t,
+  method: n = "GET",
+  headers: s = {},
+  params: c,
+  body: a
+}) {
+  const u = `${t || G({ isDev: !1, isStage: !1 })}${e}`, i = {
+    method: n,
+    headers: {
+      "Content-Type": "application/json",
+      ...s
+    }
+  };
+  a && (i.body = JSON.stringify(a));
+  const r = c ? new URLSearchParams(c).toString() : "", o = r ? `?${r}` : "", l = await fetch(`${u}${o}`, i);
+  if (!l.ok)
+    throw new Error(`HTTP error! status: ${l.status}`);
+  return l.json();
+}
+var b = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(b || {});
+const E = {
+  [b.free]: 0,
+  [b.startup]: 10,
+  [b.business]: 20,
+  [b.enterprise]: 30
+};
+function D(e) {
+  const t = e;
+  return t.init = (n) => (s) => e(s, n), t;
+}
+const K = (e) => /* @__PURE__ */ D(e);
+async function W({
+  editor: e,
+  plan: t,
+  pluginName: n,
+  licenseKey: s,
+  cleanup: c
+}) {
+  let a = "", p = !1;
+  const u = P(), i = (o) => {
+    console.warn("Cleanup plugin:", n, "Reason:", o), c();
+  }, r = (o = {}) => {
+    var w;
+    const { error: l, sdkLicense: f } = o, g = (w = o.plan) == null ? void 0 : w.category;
+    if (!(f || o.license) || l)
+      i(l || "Invalid license");
+    else if (g) {
+      const B = E[t], I = E[g];
+      B > I && i({ pluginRequiredPlan: t, licensePlan: g });
+    }
+  };
+  e.on(V, (o) => {
+    a = o == null ? void 0 : o.baseApiUrl, p = !0;
+  }), e.on(_, (o) => {
+    r(o);
+  }), setTimeout(async () => {
+    if (!p) {
+      if (u) return;
+      if (s) {
+        const o = await R({ licenseKey: s, pluginName: n, baseApiUrl: a });
+        o && r(o);
+      } else
+        i("The `licenseKey` option not provided");
+    }
+  }, 2e3);
+}
+async function R(e) {
+  const { licenseKey: t, pluginName: n, baseApiUrl: s } = e;
+  try {
+    return (await U({
+      baseApiUrl: s,
+      path: `/sdk/${t || "na"}`,
+      method: "POST",
+      params: {
+        d: window.location.hostname,
+        pn: n
+      }
+    })).result || {};
+  } catch (c) {
+    return console.error("Error during SDK license check:", c), !1;
+  }
+}
+const A = (e) => (t) => {
+  var n;
+  return ((n = t.getAttribute) == null ? void 0 : n.call(t, T)) === e;
+}, O = (...e) => (t) => e.some((n) => t.is(n)), j = (...e) => (t, n) => e.some((s) => n.is(s)), C = "gjs-plg-", T = "data-type-role", d = "accordion", q = `${d}-group`, m = `${d}-header`, h = `${d}-content`, y = `${d}-marker`, x = `${C}${m}`, k = `${C}${y}`, F = `${C}${h}`, H = `${k}-open`, v = {
+  accordion: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V8.154H5v10.23q0 .232.192.424t.423.192"/></svg>',
+  accordionGroup: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M8.116 16h10.769q.23 0 .423-.192t.192-.423V6h-12v9.385q0 .23.192.423t.423.192m0 1q-.69 0-1.153-.462T6.5 15.385V4.615q0-.69.463-1.153T8.116 3h10.769q.69 0 1.153.462t.462 1.153v10.77q0 .69-.462 1.152T18.884 17zm-3 3q-.69 0-1.153-.462T3.5 18.385V6.615h1v11.77q0 .23.192.423t.423.192h11.77v1zM7.5 4v12z"/></svg>',
+  accordionHeader: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V5.616q0-.231-.192-.424T18.384 5H5.616q-.231 0-.424.192T5 5.616v12.769q0 .23.192.423t.423.192M5 5v14zm2.616 4.192h6q.413 0 .706-.293q.294-.293.294-.707t-.294-.706q-.293-.294-.706-.294h-6q-.414 0-.707.294t-.293.706t.293.707t.707.293"/></svg>',
+  accordionContent: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h14.77q.69 0 1.152.463T21 6.616v10.769q0 .69-.463 1.153T19.385 19zm0-1h14.769q.23 0 .423-.192t.192-.424V6.616q0-.231-.192-.424T19.385 6H4.615q-.23 0-.423.192T4 6.616v10.769q0 .23.192.423t.423.192M4 18V6zm2.23-2.116h11.54q.213 0 .356-.143t.143-.357t-.143-.356t-.357-.144H6.231q-.214 0-.357.144q-.143.143-.143.357q0 .213.143.356t.357.144m0-3.385h11.538q.214 0 .357-.143t.143-.357t-.143-.357t-.357-.143H6.231q-.214 0-.357.143T5.731 12t.143.357t.357.143m0-3.384H14q.214 0 .357-.144q.143-.143.143-.356q0-.214-.143-.357T14 8.116H6.23q-.213 0-.356.143t-.143.357t.143.356t.357.144"/></svg>',
+  accordionMarker: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.596l3.173-3.192H8.827zM5.616 20q-.672 0-1.144-.472T4 18.385V5.615q0-.67.472-1.143Q4.944 4 5.616 4h12.769q.67 0 1.143.472q.472.472.472 1.144v12.769q0 .67-.472 1.143q-.472.472-1.143.472zM5 9v9.385q0 .23.192.423t.423.192h12.77q.23 0 .423-.192t.192-.423V9z"/></svg>',
+  caret: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.4 8.6 4.6 4.6 4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z"/></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>'
+}, S = (e, t) => {
+  const { toolbarIconOpen: n = v.eye } = t, s = e.is(d) ? e : e.closestType(d);
+  if (!n || !s) return;
+  const { toolbar: c } = e, a = {
+    id: "accordion-toggle-open",
+    label: n,
+    command: () => s.toggleOpen()
+  };
+  !c.find((u) => u.id === a.id) && (c == null || c.unshift(a));
+}, Y = (e, t) => {
+  const { Components: n, Blocks: s } = e, { block: c = {} } = t, a = "Accordion", p = `${C}${d}`, u = function(i = {}) {
+    const r = this, o = () => {
+      const { clsMarkerOpen: l } = i, f = r.querySelector('[data-type-role="accordion-marker"]');
+      !f || !l || (r.open ? f.classList.add(l) : f.classList.remove(l));
+    };
+    r.addEventListener("toggle", () => {
+      o(), r.dispatchEvent(new CustomEvent("details-toggle", { bubbles: !0 }));
+    }), o();
+  };
+  return n.addType(d, {
+    block: c && {
+      label: a,
+      media: v.accordion,
+      category: "Extra",
+      select: !0,
+      ...c
+    },
+    isComponent: A(d),
+    extendFn: ["initToolbar"],
+    model: {
+      defaults: {
+        tagName: "details",
+        name: a,
+        classes: p,
+        emptyState: !0,
+        clsMarkerOpen: H,
+        attributes: { [T]: d },
+        droppable: O(m, h),
+        components: [{ type: m }, { type: h }],
+        "script-props": ["clsMarkerOpen"],
+        script: u,
+        traits: [
+          {
+            type: "checkbox",
+            name: "open",
+            label: "Open"
+          }
+        ],
+        styles: `
+          .${p}::details-content {
+            opacity: 0;
+            block-size: 0;
+            overflow: hidden;
+            transform: translateY(-5px);
+            transition-property: opacity, transform, block-size, content-visibility;
+            transition-behavior: normal, normal, normal, allow-discrete;
+            transition-timing-function: ease-in-out;
+            transition-duration: 0.2s;
+          }
+
+          .${p}[open]::details-content {
+            opacity: 1;
+            transform: translateY(0);
+            block-size: auto;
+          }
+        `
+      },
+      toggleOpen() {
+        this.addAttributes({ open: !this.getAttributes().open });
+      },
+      initToolbar() {
+        S(this, t);
+      }
+    }
+  }), () => {
+    s.remove(d), n.removeType(d);
+  };
+}, Z = (e) => {
+  const { Components: t } = e;
+  return t.addType(h, {
+    isComponent: A(h),
+    model: {
+      defaults: {
+        name: "Accordion Content",
+        removable: !1,
+        copyable: !1,
+        draggable: !1,
+        emptyState: !0,
+        classes: F,
+        icon: v.accordionContent,
+        attributes: { [T]: h },
+        components: "<div>Accordion content</div>"
+      }
+    }
+  }), () => {
+    t.removeType(h);
+  };
+}, J = (e, t) => {
+  const { Components: n, Blocks: s } = e, { blockGroup: c = {} } = t, a = "Accordion Group", p = function(i = {}) {
+    if (!i.single) return;
+    const r = this;
+    r.addEventListener("details-toggle", (o) => {
+      const l = o.target;
+      if (!i.single || !l || !l.open) return;
+      r.querySelectorAll('[data-type-role="accordion"]').forEach((g) => {
+        l !== g && g.open && (g.open = !1);
+      });
+    });
+  }, u = (i = {}) => ({
+    type: d,
+    attributes: { open: i.open },
+    components: [
+      {
+        type: m,
+        components: [`<div>${i.header}</div>`, { type: y }]
+      },
+      {
+        type: h,
+        components: `<div>${i.content}</div>`
+      }
+    ]
+  });
+  return n.addType(q, {
+    block: c && {
+      label: a,
+      media: v.accordionGroup,
+      category: "Extra",
+      select: !0,
+      ...c
+    },
+    isComponent: A(q),
+    model: {
+      defaults: {
+        name: a,
+        attributes: { [T]: q },
+        droppable: O(d),
+        single: !0,
+        emptyState: !0,
+        components: Array(3).fill(0).map(
+          (i, r) => u({
+            open: r === 0,
+            header: `Accordion header ${r + 1}`,
+            content: `Accordion content ${r + 1}`
+          })
+        ),
+        traits: [
+          {
+            type: "checkbox",
+            name: "single",
+            changeProp: !0,
+            tip: "Only one accordion can be open at a time",
+            label: "Single open"
+          }
+        ],
+        "script-props": ["single"],
+        script: p
+      }
+    }
+  }), () => {
+    s.remove(q), n.removeType(q);
+  };
+}, Q = (e, t) => {
+  const { Components: n } = e;
+  return n.addType(m, {
+    isComponent: A(m),
+    extendFn: ["initToolbar"],
+    model: {
+      defaults: {
+        tagName: "summary",
+        name: "Accordion Header",
+        removable: !1,
+        copyable: !1,
+        draggable: !1,
+        emptyState: !0,
+        icon: v.accordionHeader,
+        classes: x,
+        attributes: { [T]: m },
+        components: ["<div>Accordion header</div>", { type: y }],
+        styles: `
+          summary {
+            list-style: none;
+          }
+          .${x} {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 1rem;
+          }
+        `
+      },
+      initToolbar() {
+        S(this, t);
+      }
+    }
+  }), () => {
+    n.removeType(m);
+  };
+}, X = (e) => {
+  const { Components: t } = e;
+  return t.addType(y, {
+    extend: "icon",
+    isComponent: A(y),
+    model: {
+      defaults: {
+        name: "Accordion Marker",
+        icon: v.accordionMarker,
+        classes: k,
+        attributes: { [T]: y },
+        components: v.caret,
+        droppable: !1,
+        draggable: j(m),
+        styles: `
+          .${k} {
+            min-width: 24px;
+            width: 24px;
+            height: 24px;
+            transition: transform 0.2s ease-in-out;
+          }
+          .${H} {
+            transform: rotateZ(180deg);
+          }
+        `
+      }
+    }
+  }), () => {
+    t.removeType(y);
+  };
+}, ee = "accordionComponent", te = function(e, t = {}) {
+  const n = [
+    Y(e, t),
+    J(e, t),
+    Q(e, t),
+    X(e),
+    Z(e)
+  ];
+  W({
+    editor: e,
+    licenseKey: t.licenseKey,
+    plan: b.startup,
+    pluginName: ee,
+    cleanup: () => {
+      n.forEach((s) => s());
+    }
+  });
+}, oe = K(te);
+export {
+  oe as default
+};

package/dist/accordionComponent/index.umd.js

@@ -0,0 +1,39 @@
+(function(v,b){typeof exports=="object"&&typeof module<"u"?module.exports=b(require("grapesjs")):typeof define=="function"&&define.amd?define(["grapesjs"],b):(v=typeof globalThis<"u"?globalThis:v||self,v.StudioSdkPlugins_accordionComponent=b())})(this,function(){"use strict";const v="app.grapesjs.com",b="app-stage.grapesjs.com",x=[v,b,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],z="license:check:start",_="license:check:end",B=()=>typeof window<"u",I=({isDev:e,isStage:n})=>`${e?"":`https://${n?b:v}`}/api`,V=()=>{const e=B()&&window.location.hostname;return!!e&&(x.includes(e)||x.some(n=>e.endsWith(n)))};async function N({path:e,baseApiUrl:n,method:t="GET",headers:s={},params:c,body:l}){const m=`${n||I({isDev:!1,isStage:!1})}${e}`,i={method:t,headers:{"Content-Type":"application/json",...s}};l&&(i.body=JSON.stringify(l));const r=c?new URLSearchParams(c).toString():"",o=r?`?${r}`:"",d=await fetch(`${m}${o}`,i);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var T=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(T||{});const E={[T.free]:0,[T.startup]:10,[T.business]:20,[T.enterprise]:30};function P(e){const n=e;return n.init=t=>s=>e(s,t),n}const G=e=>P(e);async function U({editor:e,plan:n,pluginName:t,licenseKey:s,cleanup:c}){let l="",p=!1;const m=V(),i=o=>{console.warn("Cleanup plugin:",t,"Reason:",o),c()},r=(o={})=>{var H;const{error:d,sdkLicense:A}=o,y=(H=o.plan)==null?void 0:H.category;if(!(A||o.license)||d)i(d||"Invalid license");else if(y){const X=E[n],ee=E[y];X>ee&&i({pluginRequiredPlan:n,licensePlan:y})}};e.on(z,o=>{l=o==null?void 0:o.baseApiUrl,p=!0}),e.on(_,o=>{r(o)}),setTimeout(async()=>{if(!p){if(m)return;if(s){const o=await j({licenseKey:s,pluginName:t,baseApiUrl:l});o&&r(o)}else i("The `licenseKey` option not provided")}},2e3)}async function j(e){const{licenseKey:n,pluginName:t,baseApiUrl:s}=e;try{return(await N({baseApiUrl:s,path:`/sdk/${n||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(c){return console.error("Error during SDK license check:",c),!1}}const C=e=>n=>{var t;return((t=n.getAttribute)==null?void 0:t.call(n,q))===e},M=(...e)=>n=>e.some(t=>n.is(t)),D=(...e)=>(n,t)=>e.some(s=>t.is(s)),w="gjs-plg-",q="data-type-role",a="accordion",k=`${a}-group`,u=`${a}-header`,h=`${a}-content`,g=`${a}-marker`,L=`${w}${u}`,$=`${w}${g}`,K=`${w}${h}`,S=`${$}-open`,f={accordion:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V8.154H5v10.23q0 .232.192.424t.423.192"/></svg>',accordionGroup:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M8.116 16h10.769q.23 0 .423-.192t.192-.423V6h-12v9.385q0 .23.192.423t.423.192m0 1q-.69 0-1.153-.462T6.5 15.385V4.615q0-.69.463-1.153T8.116 3h10.769q.69 0 1.153.462t.462 1.153v10.77q0 .69-.462 1.152T18.884 17zm-3 3q-.69 0-1.153-.462T3.5 18.385V6.615h1v11.77q0 .23.192.423t.423.192h11.77v1zM7.5 4v12z"/></svg>',accordionHeader:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V5.616q0-.231-.192-.424T18.384 5H5.616q-.231 0-.424.192T5 5.616v12.769q0 .23.192.423t.423.192M5 5v14zm2.616 4.192h6q.413 0 .706-.293q.294-.293.294-.707t-.294-.706q-.293-.294-.706-.294h-6q-.414 0-.707.294t-.293.706t.293.707t.707.293"/></svg>',accordionContent:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h14.77q.69 0 1.152.463T21 6.616v10.769q0 .69-.463 1.153T19.385 19zm0-1h14.769q.23 0 .423-.192t.192-.424V6.616q0-.231-.192-.424T19.385 6H4.615q-.23 0-.423.192T4 6.616v10.769q0 .23.192.423t.423.192M4 18V6zm2.23-2.116h11.54q.213 0 .356-.143t.143-.357t-.143-.356t-.357-.144H6.231q-.214 0-.357.144q-.143.143-.143.357q0 .213.143.356t.357.144m0-3.385h11.538q.214 0 .357-.143t.143-.357t-.143-.357t-.357-.143H6.231q-.214 0-.357.143T5.731 12t.143.357t.357.143m0-3.384H14q.214 0 .357-.144q.143-.143.143-.356q0-.214-.143-.357T14 8.116H6.23q-.213 0-.356.143t-.143.357t.143.356t.357.144"/></svg>',accordionMarker:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.596l3.173-3.192H8.827zM5.616 20q-.672 0-1.144-.472T4 18.385V5.615q0-.67.472-1.143Q4.944 4 5.616 4h12.769q.67 0 1.143.472q.472.472.472 1.144v12.769q0 .67-.472 1.143q-.472.472-1.143.472zM5 9v9.385q0 .23.192.423t.423.192h12.77q.23 0 .423-.192t.192-.423V9z"/></svg>',caret:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.4 8.6 4.6 4.6 4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z"/></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>'},O=(e,n)=>{const{toolbarIconOpen:t=f.eye}=n,s=e.is(a)?e:e.closestType(a);if(!t||!s)return;const{toolbar:c}=e,l={id:"accordion-toggle-open",label:t,command:()=>s.toggleOpen()};!c.find(m=>m.id===l.id)&&(c==null||c.unshift(l))},W=(e,n)=>{const{Components:t,Blocks:s}=e,{block:c={}}=n,l="Accordion",p=`${w}${a}`,m=function(i={}){const r=this,o=()=>{const{clsMarkerOpen:d}=i,A=r.querySelector('[data-type-role="accordion-marker"]');!A||!d||(r.open?A.classList.add(d):A.classList.remove(d))};r.addEventListener("toggle",()=>{o(),r.dispatchEvent(new CustomEvent("details-toggle",{bubbles:!0}))}),o()};return t.addType(a,{block:c&&{label:l,media:f.accordion,category:"Extra",select:!0,...c},isComponent:C(a),extendFn:["initToolbar"],model:{defaults:{tagName:"details",name:l,classes:p,emptyState:!0,clsMarkerOpen:S,attributes:{[q]:a},droppable:M(u,h),components:[{type:u},{type:h}],"script-props":["clsMarkerOpen"],script:m,traits:[{type:"checkbox",name:"open",label:"Open"}],styles:`
+          .${p}::details-content {
+            opacity: 0;
+            block-size: 0;
+            overflow: hidden;
+            transform: translateY(-5px);
+            transition-property: opacity, transform, block-size, content-visibility;
+            transition-behavior: normal, normal, normal, allow-discrete;
+            transition-timing-function: ease-in-out;
+            transition-duration: 0.2s;
+          }
+
+          .${p}[open]::details-content {
+            opacity: 1;
+            transform: translateY(0);
+            block-size: auto;
+          }
+        `},toggleOpen(){this.addAttributes({open:!this.getAttributes().open})},initToolbar(){O(this,n)}}}),()=>{s.remove(a),t.removeType(a)}},R=e=>{const{Components:n}=e;return n.addType(h,{isComponent:C(h),model:{defaults:{name:"Accordion Content",removable:!1,copyable:!1,draggable:!1,emptyState:!0,classes:K,icon:f.accordionContent,attributes:{[q]:h},components:"<div>Accordion content</div>"}}}),()=>{n.removeType(h)}},F=(e,n)=>{const{Components:t,Blocks:s}=e,{blockGroup:c={}}=n,l="Accordion Group",p=function(i={}){if(!i.single)return;const r=this;r.addEventListener("details-toggle",o=>{const d=o.target;if(!i.single||!d||!d.open)return;r.querySelectorAll('[data-type-role="accordion"]').forEach(y=>{d!==y&&y.open&&(y.open=!1)})})},m=(i={})=>({type:a,attributes:{open:i.open},components:[{type:u,components:[`<div>${i.header}</div>`,{type:g}]},{type:h,components:`<div>${i.content}</div>`}]});return t.addType(k,{block:c&&{label:l,media:f.accordionGroup,category:"Extra",select:!0,...c},isComponent:C(k),model:{defaults:{name:l,attributes:{[q]:k},droppable:M(a),single:!0,emptyState:!0,components:Array(3).fill(0).map((i,r)=>m({open:r===0,header:`Accordion header ${r+1}`,content:`Accordion content ${r+1}`})),traits:[{type:"checkbox",name:"single",changeProp:!0,tip:"Only one accordion can be open at a time",label:"Single open"}],"script-props":["single"],script:p}}}),()=>{s.remove(k),t.removeType(k)}},Y=(e,n)=>{const{Components:t}=e;return t.addType(u,{isComponent:C(u),extendFn:["initToolbar"],model:{defaults:{tagName:"summary",name:"Accordion Header",removable:!1,copyable:!1,draggable:!1,emptyState:!0,icon:f.accordionHeader,classes:L,attributes:{[q]:u},components:["<div>Accordion header</div>",{type:g}],styles:`
+          summary {
+            list-style: none;
+          }
+          .${L} {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 1rem;
+          }
+        `},initToolbar(){O(this,n)}}}),()=>{t.removeType(u)}},Z=e=>{const{Components:n}=e;return n.addType(g,{extend:"icon",isComponent:C(g),model:{defaults:{name:"Accordion Marker",icon:f.accordionMarker,classes:$,attributes:{[q]:g},components:f.caret,droppable:!1,draggable:D(u),styles:`
+          .${$} {
+            min-width: 24px;
+            width: 24px;
+            height: 24px;
+            transition: transform 0.2s ease-in-out;
+          }
+          .${S} {
+            transform: rotateZ(180deg);
+          }
+        `}}}),()=>{n.removeType(g)}},J="accordionComponent";return G(function(e,n={}){const t=[W(e,n),F(e,n),Y(e,n),Z(e),R(e)];U({editor:e,licenseKey:n.licenseKey,plan:T.startup,pluginName:J,cleanup:()=>{t.forEach(s=>s())}})})});

package/dist/accordionComponent/types.d.ts

@@ -0,0 +1,6 @@
+import { BlockProperties } from '../types';
+import { AccordionComponentOptions as AccordionComponentOptionsSchema } from './typesSchema';
+export interface AccordionComponentOptions extends Omit<AccordionComponentOptionsSchema, 'block' | 'blockGroup'> {
+    block?: Partial<BlockProperties> | false;
+    blockGroup?: Partial<BlockProperties> | false;
+}

package/dist/accordionComponent/typesSchema.d.ts

@@ -0,0 +1,22 @@
+import { SDKPluginOptions } from '../utils';
+export interface AccordionComponentOptions extends SDKPluginOptions {
+    /**
+     * Additional Block properties of the accordion component. Pass `false` to avoid adding the block.
+     * @example
+     * { category: 'Extra', label: 'My label' }
+     */
+    block?: 'Block';
+    /**
+     * Additional Block properties of the group accordion component. Pass `false` to avoid adding the block.
+     * @example
+     * { category: 'Extra', label: 'My label' }
+     */
+    blockGroup?: 'Block';
+    /**
+     * SVG toolbar button icon to toggle the accordion open state.
+     * You can pass an empty string to avoid adding the toolbar button.
+     * @example
+     * "<svg viewBox='0 0 24 24'><path d='M12 9a3 3 0..."
+     */
+    toolbarIconOpen?: string;
+}

package/dist/accordionComponent/utils.d.ts

@@ -0,0 +1,22 @@
+import { Component } from '../types';
+import { AccordionComponentOptions } from './types';
+export declare const typeAccordion = "accordion";
+export declare const typeAccordionGroup = "accordion-group";
+export declare const typeAccordionHeader = "accordion-header";
+export declare const typeAccordionContent = "accordion-content";
+export declare const typeAccordionMarker = "accordion-marker";
+export declare const clsAccordion = "gjs-plg-accordion";
+export declare const clsAccordionHeader = "gjs-plg-accordion-header";
+export declare const clsAccordionMarker = "gjs-plg-accordion-marker";
+export declare const clsAccordionContent = "gjs-plg-accordion-content";
+export declare const clsAccordionMarkerOpen = "gjs-plg-accordion-marker-open";
+export declare const customIcons: {
+    accordion: string;
+    accordionGroup: string;
+    accordionHeader: string;
+    accordionContent: string;
+    accordionMarker: string;
+    caret: string;
+    eye: string;
+};
+export declare const addOpenToolbarButton: (cmp: Component, opts: AccordionComponentOptions) => void;

package/dist/flexComponent/blocks.d.ts

@@ -0,0 +1,3 @@
+import { Editor } from '../types';
+import { FlexComponentOptions } from './types';
+export default function loadBlocks(editor: Editor, opts: FlexComponentOptions): (() => void) | undefined;

package/dist/flexComponent/components/FlexColumn.d.ts

@@ -0,0 +1,4 @@
+import { Editor } from '../../types';
+import { FlexComponentOptions } from '../types';
+declare const loadFlexColumn: (editor: Editor, opts: FlexComponentOptions) => (() => void) | undefined;
+export default loadFlexColumn;

package/dist/flexComponent/components/FlexRow.d.ts

@@ -0,0 +1,4 @@
+import { Editor } from '../../types';
+import { FlexComponentOptions } from '../types';
+declare const loadFlexRow: (editor: Editor, opts: FlexComponentOptions) => (() => void) | undefined;
+export default loadFlexRow;

package/dist/flexComponent/handlers.d.ts

@@ -0,0 +1,19 @@
+import { FlexComponentOptions, FlexGetGapFnProps, FlexGetParentSizeFnProps, FlexGetSizeFnProps, FlexIsParentVerticalFnProps, FlexSetGapFnProps, FlexSetSizeFnProps } from './types';
+export interface SizeHandler {
+    getSize(props: FlexGetSizeFnProps): number;
+    setSize(props: FlexSetSizeFnProps): void;
+}
+export interface GapHandler {
+    getGap(props: FlexGetGapFnProps): number;
+    setGap(props: FlexSetGapFnProps): void;
+    isGapSupported(): boolean;
+}
+export interface ParentSizeHandler {
+    getParentSize(props: FlexGetParentSizeFnProps): number;
+    isLayoutVertical(props: FlexIsParentVerticalFnProps): boolean;
+}
+export declare function getHandlers(config: FlexComponentOptions): {
+    sizeHandler: SizeHandler;
+    gapHandler: GapHandler;
+    parentSizeHandler: ParentSizeHandler;
+};

package/dist/flexComponent/index.cjs.d.ts

@@ -0,0 +1,3 @@
+import { FlexComponentOptions } from './types';
+declare const _default: import('../utils').PluginWithInit<FlexComponentOptions>;
+export default _default;