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

package/dist/animationComponent/index.es.js

@@ -1,8 +1,8 @@
-const T = "app.grapesjs.com", P = "app-stage.grapesjs.com", G = "app2.grapesjs.com", O = "app-stage2.grapesjs.com", U = [
-  T,
-  G,
+const P = "app.grapesjs.com", z = "app-stage.grapesjs.com", O = "app2.grapesjs.com", V = "app-stage2.grapesjs.com", A = [
   P,
   O,
+  z,
+  V,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -11,177 +11,182 @@ const T = "app.grapesjs.com", P = "app-stage.grapesjs.com", G = "app2.grapesjs.c
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], V = "license:check:start", B = "license:check:end", F = () => typeof window < "u", X = ({ isDev: t, isStage: n }) => `${t ? "" : `https://${n ? P : T}`}/api`, M = () => {
-  const t = F() && window.location.hostname;
-  return !!t && (U.includes(t) || U.some((n) => t.endsWith(n)));
+], B = "license:check:start", F = "license:check:end", X = () => typeof window < "u", M = ({
+  isDev: t,
+  isStage: n,
+  isPlatform: a
+}) => `${t ? "" : `https://${n ? z : P}`}/${a ? "platform-api" : "api"}`, j = () => {
+  const t = X() && window.location.hostname;
+  return !!t && (A.includes(t) || A.some((n) => t.endsWith(n)));
 };
-async function j({
+async function _({
   path: t,
   baseApiUrl: n,
-  method: e = "GET",
-  headers: r = {},
-  params: i,
-  body: a
+  method: a = "GET",
+  headers: s = {},
+  params: o,
+  body: i
 }) {
-  const c = `${n || X({ isDev: !1, isStage: !1 })}${t}`, l = {
-    method: e,
+  const m = `${n || M({ isDev: !1, isStage: !1 })}${t}`, l = {
+    method: a,
     headers: {
       "Content-Type": "application/json",
-      ...r
+      ...s
     }
   };
-  a && (l.body = JSON.stringify(a));
-  const f = i ? new URLSearchParams(i).toString() : "", s = f ? `?${f}` : "", o = await fetch(`${c}${s}`, l);
-  if (!o.ok)
-    throw new Error(`HTTP error! status: ${o.status}`);
-  return o.json();
+  i && (l.body = JSON.stringify(i));
+  const p = o ? new URLSearchParams(o).toString() : "", u = p ? `?${p}` : "", e = await fetch(`${m}${u}`, l);
+  if (!e.ok)
+    throw new Error(`HTTP error! status: ${e.status}`);
+  return e.json();
 }
 var b = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(b || {});
-const A = {
+const C = {
   [b.free]: 0,
   [b.startup]: 10,
   [b.business]: 20,
   [b.enterprise]: 30
 };
-function _(t) {
+function $(t) {
   const n = t;
-  return n.init = (e) => (r) => t(r, e), n;
+  return n.init = (a) => (s) => t(s, a), n;
 }
-const W = (t) => /* @__PURE__ */ _(t);
+const W = (t) => /* @__PURE__ */ $(t);
 async function Y({
   editor: t,
   plan: n,
-  pluginName: e,
-  licenseKey: r,
+  pluginName: a,
+  licenseKey: s,
+  onLicenseCheckResponse: o,
   cleanup: i
 }) {
-  let a = "", m = !1;
-  const c = M(), l = (s) => {
-    console.warn("Cleanup plugin:", e, "Reason:", s), i();
-  }, f = (s = {}) => {
-    var u;
-    const { error: o, sdkLicense: p } = s, d = (u = s.plan) == null ? void 0 : u.category;
-    if (!(p || s.license) || o)
-      l(o || "Invalid license");
-    else if (d) {
-      const C = A[n], E = A[d];
-      C > E && l({ pluginRequiredPlan: n, licensePlan: d });
+  let r = "", m = !1;
+  const l = j(), p = (e) => {
+    console.warn("Cleanup plugin:", a, "Reason:", e), i();
+  }, u = (e = {}) => {
+    var k;
+    const { error: c, sdkLicense: d } = e, h = (k = e.plan) == null ? void 0 : k.category;
+    if (!(d || e.license) || c)
+      p(c || "Invalid license");
+    else if (h) {
+      const U = C[n], G = C[h];
+      U > G && p({ pluginRequiredPlan: n, licensePlan: h });
     }
   };
-  t.on(V, (s) => {
-    a = s == null ? void 0 : s.baseApiUrl, m = !0;
-  }), t.on(B, (s) => {
-    f(s);
+  t.on(B, (e) => {
+    r = e == null ? void 0 : e.baseApiUrl, m = !0;
+  }), t.on(F, (e) => {
+    o == null || o(e), u(e);
   }), setTimeout(async () => {
     if (!m) {
-      if (c) return;
-      if (r) {
-        const s = await $({ licenseKey: r, pluginName: e, baseApiUrl: a });
-        s && f(s);
+      if (l) return;
+      if (s) {
+        const e = await H({ licenseKey: s, pluginName: a, baseApiUrl: r });
+        o == null || o(e), e && u(e);
       } else
-        l("The `licenseKey` option not provided");
+        p("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
-async function $(t) {
-  const { licenseKey: n, pluginName: e, baseApiUrl: r } = t;
+async function H(t) {
+  const { licenseKey: n, pluginName: a, baseApiUrl: s } = t;
   try {
-    return (await j({
-      baseApiUrl: r,
+    return (await _({
+      baseApiUrl: s,
       path: `/sdk/${n || "na"}`,
       method: "POST",
       params: {
         d: window.location.hostname,
-        pn: e
+        pn: a
       }
     })).result || {};
-  } catch (i) {
-    return console.error("Error during SDK license check:", i), !1;
+  } catch (o) {
+    return console.error("Error during SDK license check:", o), !1;
   }
 }
-const H = (...t) => (n) => t.some((e) => n.is(e));
-var y = /* @__PURE__ */ ((t) => (t.name = "animation-name", t.duration = "animation-duration", t.delay = "animation-delay", t.iterationCount = "animation-iteration-count", t.timingFunction = "animation-timing-function", t.fillMode = "animation-fill-mode", t))(y || {}), v = /* @__PURE__ */ ((t) => (t.onScroll = "--animation-on-scroll", t.threshold = "--animation-threshold", t.repeat = "--animation-repeat", t))(v || {});
-const g = "animation", I = "animation-group", L = "animation:update", x = "animation-group:update", z = {
+const K = (...t) => (n) => t.some((a) => n.is(a));
+var f = /* @__PURE__ */ ((t) => (t.name = "animation-name", t.duration = "animation-duration", t.delay = "animation-delay", t.iterationCount = "animation-iteration-count", t.timingFunction = "animation-timing-function", t.fillMode = "animation-fill-mode", t))(f || {}), v = /* @__PURE__ */ ((t) => (t.onScroll = "--animation-on-scroll", t.threshold = "--animation-threshold", t.repeat = "--animation-repeat", t))(v || {});
+const g = "animation", I = "animation-group", D = "animation:update", E = "animation-group:update", Z = {
   category: { id: "animations", label: "Animations" },
   select: !0
-}, k = (t) => (t == null ? void 0 : t.getType()) === g, w = (t) => (t == null ? void 0 : t.getType()) === I, Z = (t) => k(t) || w(t), S = {
-  isVisible: ({ component: t }) => k(t)
-}, K = {
+}, w = (t) => (t == null ? void 0 : t.getType()) === g, x = (t) => (t == null ? void 0 : t.getType()) === I, R = (t) => w(t) || x(t), S = {
   isVisible: ({ component: t }) => w(t)
 }, q = {
-  isVisible: ({ component: t }) => k(t) && w(t == null ? void 0 : t.parent()) ? !1 : Z(t)
-}, D = {
+  isVisible: ({ component: t }) => x(t)
+}, J = {
+  isVisible: ({ component: t }) => w(t) && x(t == null ? void 0 : t.parent()) ? !1 : R(t)
+}, L = {
   isVisible: ({ component: t, sector: n }) => {
-    var e;
-    return k(t) && w(t == null ? void 0 : t.parent()) ? !1 : Z(t) && ((e = n.getProperty(v.onScroll)) == null ? void 0 : e.getValue()) === "true";
+    var a;
+    return w(t) && x(t == null ? void 0 : t.parent()) ? !1 : R(t) && ((a = n.getProperty(v.onScroll)) == null ? void 0 : a.getValue()) === "true";
   }
 }, N = {
   animation: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M16.5 14a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13"/><path fill="currentColor" d="M17.14 15.98a8.5 8.5 0 0 1-9.12-9.12 6.5 6.5 0 1 0 9.12 9.12"/><path fill="currentColor" d="M12.64 20.48a8.5 8.5 0 0 1-9.12-9.12 6.5 6.5 0 1 0 9.12 9.12"/></svg>',
   animationGroup: '<svg viewBox="0 0 24 24"><path d="M4 2a2 2 0 0 0-2 2v10h2V4h10V2H4m4 4a2 2 0 0 0-2 2v10h2V8h10V6H8m4 4a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-8Z"/></svg>'
-}, J = function(t) {
+}, Q = function(t) {
   const n = this;
-  let e = null;
-  const r = () => {
-    e == null || e.disconnect(), e = null;
-  }, i = () => {
-    r();
-    const a = n.style;
-    a.animationName = "", requestAnimationFrame(() => {
-      const m = getComputedStyle(n), c = m.getPropertyValue("animation-name").trim(), l = m.getPropertyValue("--animation-on-scroll").trim() !== "false", f = parseFloat(m.getPropertyValue("--animation-threshold").trim()) || 0.2, s = m.getPropertyValue("--animation-repeat").trim() === "true", o = () => {
-        a.animationName = "none", n.offsetWidth, a.animationName = c, a.animationPlayState = "running";
+  let a = null;
+  const s = () => {
+    a == null || a.disconnect(), a = null;
+  }, o = () => {
+    s();
+    const i = n.style;
+    i.animationName = "", requestAnimationFrame(() => {
+      const r = getComputedStyle(n), m = r.getPropertyValue("animation-name").trim(), l = r.getPropertyValue("--animation-on-scroll").trim() !== "false", p = parseFloat(r.getPropertyValue("--animation-threshold").trim()) || 0.2, u = r.getPropertyValue("--animation-repeat").trim() === "true", e = () => {
+        i.animationName = "none", n.offsetWidth, i.animationName = m, i.animationPlayState = "running";
       };
-      if (!c || c === "none") {
-        a.animationName = "none", a.animationPlayState = "paused";
+      if (!m || m === "none") {
+        i.animationName = "none", i.animationPlayState = "paused";
         return;
       }
       if (!l) {
-        o();
+        e();
         return;
       }
-      a.animationPlayState = "paused", e = new IntersectionObserver(
-        (p) => {
-          p.forEach((d) => {
-            d.isIntersecting && (o(), !s && r());
+      i.animationPlayState = "paused", a = new IntersectionObserver(
+        (c) => {
+          c.forEach((d) => {
+            d.isIntersecting && (e(), !u && s());
           });
         },
-        { threshold: f }
-      ), e.observe(n);
+        { threshold: p }
+      ), a.observe(n);
     });
   };
-  n.addEventListener(t.animationUpdateEvent, i), i();
-}, Q = (t, n) => {
-  const { Components: e, Blocks: r, Canvas: i } = t, { block: a = {}, animationList: m = [] } = n, c = t.Components.events, l = "Animation", f = Object.values(v), s = Object.values(y);
-  return e.addType(g, {
-    block: a ? {
+  n.addEventListener(t.animationUpdateEvent, o), o();
+}, tt = (t, n) => {
+  const { Components: a, Blocks: s, Canvas: o } = t, { block: i = {}, animationList: r = [] } = n, m = t.Components.events, l = "Animation", p = Object.values(v), u = Object.values(f);
+  return a.addType(g, {
+    block: i ? {
       label: l,
       media: N.animation,
       content: { type: g },
-      ...z,
-      ...a
+      ...Z,
+      ...i
     } : void 0,
     model: {
       defaults: {
         emptyState: !0,
         name: l,
         traits: [],
-        script: J,
-        animationUpdateEvent: L,
+        script: Q,
+        animationUpdateEvent: D,
         "script-props": ["animationUpdateEvent"],
-        styles: m.map((o) => o.css).join(`
+        styles: r.map((e) => e.css).join(`
 `)
       },
       init() {
-        const { em: o } = this;
+        const { em: e } = this;
         this.addStyle({
-          [y.name]: "fadeIn",
-          [y.duration]: "1s",
-          [y.fillMode]: "both",
+          [f.name]: "fadeIn",
+          [f.duration]: "1s",
+          [f.fillMode]: "both",
           ...n.animationStyle,
           ...this.getStyle()
-        }), this.listenTo(o, c.mount, (p) => {
+        }), this.listenTo(e, m.mount, (c) => {
           var h;
-          if (p !== this) return;
-          ((h = this.parent()) == null ? void 0 : h.get("type")) !== I || f.forEach((u) => this.removeStyle(u));
+          if (c !== this) return;
+          ((h = this.parent()) == null ? void 0 : h.get("type")) !== I || p.forEach((y) => this.removeStyle(y));
         });
       }
     },
@@ -191,65 +196,65 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
         animationend: "onAnimationEnd"
       }),
       init() {
-        const { model: o } = this;
-        this.listenTo(o, c.styleUpdate, this.handleStyleChange);
+        const { model: e } = this;
+        this.listenTo(e, m.styleUpdate, this.handleStyleChange);
       },
       onAnimationStart() {
-        var p;
-        if ((p = this.cmpSpots) != null && p.length) return;
-        const o = i.getSpots({ component: this.model });
-        this.cmpSpots = o, i.removeSpots(o), this.el.ownerDocument.body.style.overflowX = "hidden";
+        var c;
+        if ((c = this.cmpSpots) != null && c.length) return;
+        const e = o.getSpots({ component: this.model });
+        this.cmpSpots = e, o.removeSpots(e), this.el.ownerDocument.body.style.overflowX = "hidden";
       },
       onAnimationEnd() {
-        const o = this.cmpSpots || [];
-        i.spots.add(o), this.cmpSpots = [], this.el.ownerDocument.body.style.overflowX = "";
+        const e = this.cmpSpots || [];
+        o.spots.add(e), this.cmpSpots = [], this.el.ownerDocument.body.style.overflowX = "";
       },
       triggerAnimation() {
-        this.el.dispatchEvent(new CustomEvent(L));
+        this.el.dispatchEvent(new CustomEvent(D));
       },
-      handleStyleChange(o, p) {
-        Object.keys((p == null ? void 0 : p.style) || {}).some((u) => s.includes(u) || f.includes(u)) && this.triggerAnimation();
+      handleStyleChange(e, c) {
+        Object.keys((c == null ? void 0 : c.style) || {}).some((y) => u.includes(y) || p.includes(y)) && this.triggerAnimation();
       },
       onRender() {
         this.triggerAnimation();
       }
     }
   }), () => {
-    r.remove(g), e.removeType(g);
+    s.remove(g), a.removeType(g);
   };
-}, tt = function(t) {
-  const n = this, e = "--animation-on-scroll", r = "--animation-threshold", i = "--animation-repeat";
-  let a = null;
-  const m = () => {
-    a == null || a.disconnect(), a = null;
-  }, c = () => {
-    m();
-    const l = getComputedStyle(n), f = l.getPropertyValue(e).trim() !== "false", s = parseFloat(l.getPropertyValue(r).trim()) || 0.2, o = l.getPropertyValue(i).trim() === "true", p = () => {
+}, nt = function(t) {
+  const n = this, a = "--animation-on-scroll", s = "--animation-threshold", o = "--animation-repeat";
+  let i = null;
+  const r = () => {
+    i == null || i.disconnect(), i = null;
+  }, m = () => {
+    r();
+    const l = getComputedStyle(n), p = l.getPropertyValue(a).trim() !== "false", u = parseFloat(l.getPropertyValue(s).trim()) || 0.2, e = l.getPropertyValue(o).trim() === "true", c = () => {
       Array.from(n.children).forEach((d) => {
-        d instanceof HTMLElement && typeof d.dispatchEvent == "function" && d.dispatchEvent(new CustomEvent(x, { bubbles: !1 }));
+        d instanceof HTMLElement && typeof d.dispatchEvent == "function" && d.dispatchEvent(new CustomEvent(E, { bubbles: !1 }));
       });
     };
-    if (!f) {
-      p();
+    if (!p) {
+      c();
       return;
     }
-    a = new IntersectionObserver(
+    i = new IntersectionObserver(
       (d) => {
         d.forEach((h) => {
-          h.isIntersecting ? (p(), !o && m()) : o && Array.from(n.children).forEach((u) => {
-            u instanceof HTMLElement && getComputedStyle(u).getPropertyValue(e).trim() !== "false" && (u.style.opacity = "0", u.style.animationPlayState = "paused");
+          h.isIntersecting ? (c(), !e && r()) : e && Array.from(n.children).forEach((y) => {
+            y instanceof HTMLElement && getComputedStyle(y).getPropertyValue(a).trim() !== "false" && (y.style.opacity = "0", y.style.animationPlayState = "paused");
           });
         });
       },
-      { threshold: s }
-    ), a.observe(n);
+      { threshold: u }
+    ), i.observe(n);
   };
-  n.addEventListener(t.animationGroupUpdateEvent, c), c();
-}, nt = (t, n) => {
-  const { Components: e, Blocks: r } = t, { blockGroup: i = {} } = n, a = "Animation Group";
-  return e.addType(I, {
-    block: i ? {
-      label: a,
+  n.addEventListener(t.animationGroupUpdateEvent, m), m();
+}, et = (t, n) => {
+  const { Components: a, Blocks: s } = t, { blockGroup: o = {} } = n, i = "Animation Group";
+  return a.addType(I, {
+    block: o ? {
+      label: i,
       media: N.animationGroup,
       content: {
         type: I,
@@ -259,33 +264,33 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
           { type: g }
         ]
       },
-      ...z,
-      ...i
+      ...Z,
+      ...o
     } : void 0,
     model: {
       defaults: {
-        name: a,
+        name: i,
         emptyState: !0,
         traits: [],
-        script: tt,
-        animationGroupUpdateEvent: x,
+        script: nt,
+        animationGroupUpdateEvent: E,
         "script-props": ["animationGroupUpdateEvent"],
-        droppable: H(g)
+        droppable: K(g)
       },
       init() {
         this.addStyle({
           ...n.animationGroupStyle,
           ...this.getStyle()
         });
-        const m = this.components();
-        this.listenTo(m, "add remove", this.updateChildrenStaggerStyles), this.updateChildrenStaggerStyles();
+        const r = this.components();
+        this.listenTo(r, "add remove", this.updateChildrenStaggerStyles), this.updateChildrenStaggerStyles();
       },
       updateChildrenStaggerStyles() {
-        this.components().forEach((m, c) => {
-          m.is(g) && m.addStyle(
+        this.components().forEach((r, m) => {
+          r.is(g) && r.addStyle(
             {
-              "--stagger-index": c.toString(),
-              [y.delay]: "calc(var(--stagger-index, 0) * var(--stagger-delay, 0.3s))"
+              "--stagger-index": m.toString(),
+              [f.delay]: "calc(var(--stagger-index, 0) * var(--stagger-delay, 0.3s))"
             },
             { partial: !0 }
           );
@@ -294,11 +299,11 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
     },
     view: {
       init() {
-        const { model: m } = this;
-        this.listenTo(m, "component:styleUpdate", this.handleStyleChange);
+        const { model: r } = this;
+        this.listenTo(r, "component:styleUpdate", this.handleStyleChange);
       },
       triggerAnimation() {
-        this.el.dispatchEvent(new CustomEvent(x));
+        this.el.dispatchEvent(new CustomEvent(E));
       },
       handleStyleChange() {
         this.triggerAnimation(), this.model.updateChildrenStaggerStyles();
@@ -308,9 +313,9 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
       }
     }
   }), () => {
-    r.remove(I), e.removeType(I);
+    s.remove(I), a.removeType(I);
   };
-}, et = "animationComponent", at = b.startup, R = [
+}, at = "animationComponent", ot = b.startup, T = [
   {
     id: "flash",
     name: "Flash",
@@ -988,11 +993,11 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
       }
   }`
   }
-], ot = function(t, n = {}) {
-  var i;
-  const e = ((i = n.animations) == null ? void 0 : i.call(n, { items: R })) || R, r = [
-    Q(t, { ...n, animationList: e }),
-    nt(t, n)
+], it = function(t, n = {}) {
+  var o;
+  const a = ((o = n.animations) == null ? void 0 : o.call(n, { items: T })) || T, s = [
+    tt(t, { ...n, animationList: a }),
+    et(t, n)
   ];
   t.Styles.addSector("animation", {
     name: "Animation",
@@ -1000,16 +1005,16 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
       {
         ...S,
         name: "Type",
-        property: y.name,
+        property: f.name,
         type: "select",
         full: !0,
         default: "fadeIn",
-        options: e
+        options: a
       },
       {
         ...S,
         name: "Duration",
-        property: y.duration,
+        property: f.duration,
         type: "number",
         units: ["s"],
         min: 0.1,
@@ -1020,7 +1025,7 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
       {
         ...S,
         name: "Delay",
-        property: y.delay,
+        property: f.delay,
         type: "number",
         units: ["s"],
         min: 0,
@@ -1031,7 +1036,7 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
       {
         ...S,
         name: "Iteration Count",
-        property: y.iterationCount,
+        property: f.iterationCount,
         type: "select",
         default: "1",
         options: [
@@ -1042,7 +1047,7 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
       {
         ...S,
         name: "Timing",
-        property: y.timingFunction,
+        property: f.timingFunction,
         type: "select",
         default: "ease",
         options: [
@@ -1054,7 +1059,7 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
         ]
       },
       {
-        ...K,
+        ...q,
         name: "Stagger Delay",
         property: "--stagger-delay",
         type: "slider",
@@ -1065,7 +1070,7 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
         default: "0.3s"
       },
       {
-        ...q,
+        ...J,
         name: "Animate on Scroll",
         property: v.onScroll,
         type: "radio",
@@ -1082,7 +1087,7 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
         ]
       },
       {
-        ...D,
+        ...L,
         name: "Scroll Threshold",
         property: v.threshold,
         type: "number",
@@ -1093,7 +1098,7 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
         default: "0.2"
       },
       {
-        ...D,
+        ...L,
         name: "Repeat on Scroll",
         property: v.repeat,
         type: "radio",
@@ -1113,13 +1118,13 @@ const g = "animation", I = "animation-group", L = "animation:update", x = "anima
   }), Y({
     editor: t,
     licenseKey: n.licenseKey,
-    plan: at,
-    pluginName: et,
+    plan: ot,
+    pluginName: at,
     cleanup: () => {
-      r.forEach((a) => a());
+      s.forEach((i) => i());
     }
   });
-}, it = W(ot);
+}, st = W(it);
 export {
-  it as default
+  st as default
 };