@grapesjs/studio-sdk-plugins 1.0.35 → 1.0.36

package/dist/animationComponent/index.es.js

@@ -1,8 +1,8 @@
-const P = "app.grapesjs.com", z = "app-stage.grapesjs.com", O = "app2.grapesjs.com", V = "app-stage2.grapesjs.com", A = [
-  P,
-  O,
+const G = "app.grapesjs.com", z = "app-stage.grapesjs.com", F = "app2.grapesjs.com", N = "app-stage2.grapesjs.com", D = [
+  G,
+  F,
   z,
-  V,
+  N,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -11,182 +11,195 @@ const P = "app.grapesjs.com", z = "app-stage.grapesjs.com", O = "app2.grapesjs.c
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], B = "license:check:start", F = "license:check:end", X = () => typeof window < "u", M = ({
+], V = "license:check:end", X = () => typeof window < "u", j = ({
   isDev: t,
-  isStage: n,
+  isStage: e,
   isPlatform: a
-}) => `${t ? "" : `https://${n ? z : P}`}/${a ? "platform-api" : "api"}`, j = () => {
+}) => `${t ? "" : `https://${e ? z : G}`}/${a ? "platform-api" : "api"}`, $ = () => {
   const t = X() && window.location.hostname;
-  return !!t && (A.includes(t) || A.some((n) => t.endsWith(n)));
+  return !!t && (D.includes(t) || D.some((e) => t.endsWith(e)));
 };
-async function _({
+async function Y({
   path: t,
-  baseApiUrl: n,
+  baseApiUrl: e,
   method: a = "GET",
-  headers: s = {},
-  params: o,
-  body: i
+  headers: r = {},
+  params: i,
+  body: o
 }) {
-  const m = `${n || M({ isDev: !1, isStage: !1 })}${t}`, l = {
+  const s = `${e || j({ isDev: !1, isStage: !1 })}${t}`, p = {
     method: a,
     headers: {
       "Content-Type": "application/json",
-      ...s
+      ...r
     }
   };
-  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();
+  o && (p.body = JSON.stringify(o));
+  const m = i ? new URLSearchParams(i).toString() : "", d = m ? `?${m}` : "", n = await fetch(`${s}${d}`, p);
+  if (!n.ok)
+    throw new Error(`HTTP error! status: ${n.status}`);
+  return n.json();
 }
-var b = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(b || {});
-const C = {
+var b = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(b || {}), P = /* @__PURE__ */ ((t) => (t.toastAdd = "studio:toastAdd", t.toastRemove = "studio:toastRemove", t.dialogOpen = "studio:dialogOpen", t.dialogClose = "studio:dialogClose", t.dialogExportCode = "studio:dialogExportCode", t.dialogImportCode = "studio:dialogImportCode", t.sidebarLeftSet = "studio:sidebarLeft:set", t.sidebarLeftGet = "studio:sidebarLeft:get", t.sidebarLeftToggle = "studio:sidebarLeft:toggle", t.sidebarRightSet = "studio:sidebarRight:set", t.sidebarRightGet = "studio:sidebarRight:get", t.sidebarRightToggle = "studio:sidebarRight:toggle", t.sidebarTopSet = "studio:sidebarTop:set", t.sidebarTopGet = "studio:sidebarTop:get", t.sidebarTopToggle = "studio:sidebarTop:toggle", t.sidebarBottomSet = "studio:sidebarBottom:set", t.sidebarBottomGet = "studio:sidebarBottom:get", t.sidebarBottomToggle = "studio:sidebarBottom:toggle", t.symbolAdd = "studio:symbolAdd", t.symbolDetach = "studio:symbolDetach", t.symbolOverride = "studio:symbolOverride", t.symbolPropagateStyles = "studio:propagateStyles", t.getPagesConfig = "studio:getPagesConfig", t.setPagesConfig = "studio:setPagesConfig", t.getPageSettings = "studio:getPageSettings", t.setPageSettings = "studio:setPageSettings", t.clearPage = "studio:clearPage", t.projectFiles = "studio:projectFiles", t.validateCode = "studio:validateCode", t.canvasReload = "studio:canvasReload", t.getBlocksPanel = "studio:getBlocksPanel", t.setBlocksPanel = "studio:setBlocksPanel", t.getStateContextMenu = "studio:getStateContextMenu", t.setStateContextMenu = "studio:setStateContextMenu", t.contextMenuComponent = "studio:contextMenuComponent", t.layoutAdd = "studio:layoutAdd", t.layoutRemove = "studio:layoutRemove", t.layoutToggle = "studio:layoutToggle", t.layoutUpdate = "studio:layoutUpdate", t.layoutGet = "studio:layoutGet", t.layoutConfigGet = "studio:layoutConfigGet", t.layoutConfigSet = "studio:layoutConfigSet", t.layoutComponentAdd = "studio:layoutComponentAdd", t.layoutComponentGet = "studio:layoutComponentGet", t.layoutComponentRemove = "studio:layoutComponentRemove", t.layoutComponentRender = "studio:layoutComponentRender", t.getStateTheme = "studio:getStateTheme", t.setStateTheme = "studio:setStateTheme", t.settings = "studio:settings", t.assetProviderGet = "studio:assetProviderGet", t.assetProviderAdd = "studio:assetProviderAdd", t.assetProviderRemove = "studio:assetProviderRemove", t.fontGet = "studio:fontGet", t.fontAdd = "studio:fontAdd", t.fontRemove = "studio:fontRemove", t.fontManagerOpen = "studio:fontManagerOpen", t.menuFontLoad = "studio:menuFontLoad", t.toggleStateDataSource = "studio:toggleStateDataSource", t.getStateDataSource = "studio:getStateDataSource", t.dataSourceSetGlobalData = "studio:dataSourceSetGlobalData", t.dataSourceSetImporter = "studio:dataSourceSetImporter", t.dataSourceSetExporter = "studio:dataSourceSetExporter", t.setDragAbsolute = "studio:setDragAbsolute", t))(P || {});
+const L = {
   [b.free]: 0,
   [b.startup]: 10,
   [b.business]: 20,
   [b.enterprise]: 30
 };
-function $(t) {
-  const n = t;
-  return n.init = (a) => (s) => t(s, a), n;
+function C(t) {
+  const e = t;
+  return e.init = (a) => (r) => t(r, a), e;
 }
-const W = (t) => /* @__PURE__ */ $(t);
-async function Y({
+const W = (t) => /* @__PURE__ */ C(t);
+async function _({
   editor: t,
-  plan: n,
+  plan: e,
   pluginName: a,
-  licenseKey: s,
-  onLicenseCheckResponse: o,
-  cleanup: i
+  licenseKey: r,
+  onLicenseCheckResponse: i,
+  cleanup: o
 }) {
-  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)
+  let l = "", s;
+  const p = (n) => {
+    console.warn("Cleanup plugin:", a, "Reason:", n), o();
+  }, m = (n = {}) => {
+    var R;
+    const { error: c, sdkLicense: f } = n, h = (R = n.plan) == null ? void 0 : R.category;
+    if (!(f || n.license) || c)
       p(c || "Invalid license");
     else if (h) {
-      const U = C[n], G = C[h];
-      U > G && p({ pluginRequiredPlan: n, licensePlan: h });
+      const E = L[e], M = L[h];
+      E > M && p({ pluginRequiredPlan: e, licensePlan: h });
     }
   };
-  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 (l) return;
-      if (s) {
-        const e = await H({ licenseKey: s, pluginName: a, baseApiUrl: r });
-        o == null || o(e), e && u(e);
-      } else
-        p("The `licenseKey` option not provided");
-    }
-  }, 2e3);
+  t.Commands.has(P.settings) && (s = t.runCommand(P.settings), l = (s == null ? void 0 : s.baseUrl) || "");
+  const d = (n) => {
+    i == null || i(n), n && m(n);
+  };
+  if (!s) {
+    t.onReady(async () => {
+      if (!$())
+        if (r) {
+          const n = await K({ licenseKey: r, pluginName: a, baseApiUrl: l });
+          d(n);
+        } else
+          p("The `licenseKey` option not provided");
+    });
+    return;
+  }
+  if (s.licensePlan || s.licenseError) {
+    const n = H(s);
+    d(n);
+    return;
+  }
+  t.on(V, (n) => d(n));
 }
-async function H(t) {
-  const { licenseKey: n, pluginName: a, baseApiUrl: s } = t;
+const H = (t) => ({
+  sdkLicense: t.license,
+  license: t.license,
+  error: t.licenseError,
+  plan: t.licensePlan
+});
+async function K(t) {
+  const { licenseKey: e, pluginName: a, baseApiUrl: r } = t;
   try {
-    return (await _({
-      baseApiUrl: s,
-      path: `/sdk/${n || "na"}`,
+    return (await Y({
+      baseApiUrl: r,
+      path: `/sdk/${e || "na"}`,
       method: "POST",
       params: {
         d: window.location.hostname,
         pn: a
       }
     })).result || {};
-  } catch (o) {
-    return console.error("Error during SDK license check:", o), !1;
+  } catch (i) {
+    return console.error("Error during SDK license check:", i), !1;
   }
 }
-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 = {
+const q = (...t) => (e) => t.some((a) => e.is(a));
+var u = /* @__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))(u || {}), v = /* @__PURE__ */ ((t) => (t.onScroll = "--animation-on-scroll", t.threshold = "--animation-threshold", t.repeat = "--animation-repeat", t))(v || {});
+const y = "animation", I = "animation-group", T = "animation:update", w = "animation-group:update", B = {
   category: { id: "animations", label: "Animations" },
   select: !0
-}, 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 }) => x(t)
+}, k = (t) => (t == null ? void 0 : t.getType()) === y, A = (t) => (t == null ? void 0 : t.getType()) === I, O = (t) => k(t) || A(t), x = {
+  isVisible: ({ component: t }) => k(t)
 }, J = {
-  isVisible: ({ component: t }) => w(t) && x(t == null ? void 0 : t.parent()) ? !1 : R(t)
-}, L = {
-  isVisible: ({ component: t, sector: n }) => {
+  isVisible: ({ component: t }) => A(t)
+}, Q = {
+  isVisible: ({ component: t }) => k(t) && A(t == null ? void 0 : t.parent()) ? !1 : O(t)
+}, S = {
+  isVisible: ({ component: t, sector: e }) => {
     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";
+    return k(t) && A(t == null ? void 0 : t.parent()) ? !1 : O(t) && ((a = e.getProperty(v.onScroll)) == null ? void 0 : a.getValue()) === "true";
   }
-}, N = {
+}, Z = {
   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>'
-}, Q = function(t) {
-  const n = this;
+}, tt = function(t) {
+  const e = this;
   let a = null;
-  const s = () => {
+  const r = () => {
     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";
+  }, i = () => {
+    r();
+    const o = e.style;
+    o.animationName = "", requestAnimationFrame(() => {
+      const l = getComputedStyle(e), s = l.getPropertyValue("animation-name").trim(), p = l.getPropertyValue("--animation-on-scroll").trim() !== "false", m = parseFloat(l.getPropertyValue("--animation-threshold").trim()) || 0.2, d = l.getPropertyValue("--animation-repeat").trim() === "true", n = () => {
+        o.animationName = "none", e.offsetWidth, o.animationName = s, o.animationPlayState = "running";
       };
-      if (!m || m === "none") {
-        i.animationName = "none", i.animationPlayState = "paused";
+      if (!s || s === "none") {
+        o.animationName = "none", o.animationPlayState = "paused";
         return;
       }
-      if (!l) {
-        e();
+      if (!p) {
+        n();
         return;
       }
-      i.animationPlayState = "paused", a = new IntersectionObserver(
+      o.animationPlayState = "paused", a = new IntersectionObserver(
         (c) => {
-          c.forEach((d) => {
-            d.isIntersecting && (e(), !u && s());
+          c.forEach((f) => {
+            f.isIntersecting && (n(), !d && r());
           });
         },
-        { threshold: p }
-      ), a.observe(n);
+        { threshold: m }
+      ), a.observe(e);
     });
   };
-  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,
-      ...i
+  e.addEventListener(t.animationUpdateEvent, i), i();
+}, et = (t, e) => {
+  const { Components: a, Blocks: r, Canvas: i } = t, { block: o = {}, animationList: l = [] } = e, s = t.Components.events, p = "Animation", m = Object.values(v), d = Object.values(u);
+  return a.addType(y, {
+    block: o ? {
+      label: p,
+      media: Z.animation,
+      content: { type: y },
+      ...B,
+      ...o
     } : void 0,
     model: {
       defaults: {
         emptyState: !0,
-        name: l,
+        name: p,
         traits: [],
-        script: Q,
-        animationUpdateEvent: D,
+        script: tt,
+        animationUpdateEvent: T,
         "script-props": ["animationUpdateEvent"],
-        styles: r.map((e) => e.css).join(`
+        styles: l.map((n) => n.css).join(`
 `)
       },
       init() {
-        const { em: e } = this;
+        const { em: n } = this;
         this.addStyle({
-          [f.name]: "fadeIn",
-          [f.duration]: "1s",
-          [f.fillMode]: "both",
-          ...n.animationStyle,
+          [u.name]: "fadeIn",
+          [u.duration]: "1s",
+          [u.fillMode]: "both",
+          ...e.animationStyle,
           ...this.getStyle()
-        }), this.listenTo(e, m.mount, (c) => {
+        }), this.listenTo(n, s.mount, (c) => {
           var h;
           if (c !== this) return;
-          ((h = this.parent()) == null ? void 0 : h.get("type")) !== I || p.forEach((y) => this.removeStyle(y));
+          ((h = this.parent()) == null ? void 0 : h.get("type")) !== I || m.forEach((g) => this.removeStyle(g));
         });
       }
     },
@@ -196,101 +209,101 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
         animationend: "onAnimationEnd"
       }),
       init() {
-        const { model: e } = this;
-        this.listenTo(e, m.styleUpdate, this.handleStyleChange);
+        const { model: n } = this;
+        this.listenTo(n, s.styleUpdate, this.handleStyleChange);
       },
       onAnimationStart() {
         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";
+        const n = i.getSpots({ component: this.model });
+        this.cmpSpots = n, i.removeSpots(n), this.el.ownerDocument.body.style.overflowX = "hidden";
       },
       onAnimationEnd() {
-        const e = this.cmpSpots || [];
-        o.spots.add(e), this.cmpSpots = [], this.el.ownerDocument.body.style.overflowX = "";
+        const n = this.cmpSpots || [];
+        i.spots.add(n), this.cmpSpots = [], this.el.ownerDocument.body.style.overflowX = "";
       },
       triggerAnimation() {
-        this.el.dispatchEvent(new CustomEvent(D));
+        this.el.dispatchEvent(new CustomEvent(T));
       },
-      handleStyleChange(e, c) {
-        Object.keys((c == null ? void 0 : c.style) || {}).some((y) => u.includes(y) || p.includes(y)) && this.triggerAnimation();
+      handleStyleChange(n, c) {
+        Object.keys((c == null ? void 0 : c.style) || {}).some((g) => d.includes(g) || m.includes(g)) && this.triggerAnimation();
       },
       onRender() {
         this.triggerAnimation();
       }
     }
   }), () => {
-    s.remove(g), a.removeType(g);
+    r.remove(y), a.removeType(y);
   };
 }, 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(E, { bubbles: !1 }));
+  const e = this, a = "--animation-on-scroll", r = "--animation-threshold", i = "--animation-repeat";
+  let o = null;
+  const l = () => {
+    o == null || o.disconnect(), o = null;
+  }, s = () => {
+    l();
+    const p = getComputedStyle(e), m = p.getPropertyValue(a).trim() !== "false", d = parseFloat(p.getPropertyValue(r).trim()) || 0.2, n = p.getPropertyValue(i).trim() === "true", c = () => {
+      Array.from(e.children).forEach((f) => {
+        f instanceof HTMLElement && typeof f.dispatchEvent == "function" && f.dispatchEvent(new CustomEvent(w, { bubbles: !1 }));
       });
     };
-    if (!p) {
+    if (!m) {
       c();
       return;
     }
-    i = new IntersectionObserver(
-      (d) => {
-        d.forEach((h) => {
-          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");
+    o = new IntersectionObserver(
+      (f) => {
+        f.forEach((h) => {
+          h.isIntersecting ? (c(), !n && l()) : n && Array.from(e.children).forEach((g) => {
+            g instanceof HTMLElement && getComputedStyle(g).getPropertyValue(a).trim() !== "false" && (g.style.opacity = "0", g.style.animationPlayState = "paused");
           });
         });
       },
-      { threshold: u }
-    ), i.observe(n);
+      { threshold: d }
+    ), o.observe(e);
   };
-  n.addEventListener(t.animationGroupUpdateEvent, m), m();
-}, et = (t, n) => {
-  const { Components: a, Blocks: s } = t, { blockGroup: o = {} } = n, i = "Animation Group";
+  e.addEventListener(t.animationGroupUpdateEvent, s), s();
+}, at = (t, e) => {
+  const { Components: a, Blocks: r } = t, { blockGroup: i = {} } = e, o = "Animation Group";
   return a.addType(I, {
-    block: o ? {
-      label: i,
-      media: N.animationGroup,
+    block: i ? {
+      label: o,
+      media: Z.animationGroup,
       content: {
         type: I,
         components: [
-          { type: g },
-          { type: g },
-          { type: g }
+          { type: y },
+          { type: y },
+          { type: y }
         ]
       },
-      ...Z,
-      ...o
+      ...B,
+      ...i
     } : void 0,
     model: {
       defaults: {
-        name: i,
+        name: o,
         emptyState: !0,
         traits: [],
         script: nt,
-        animationGroupUpdateEvent: E,
+        animationGroupUpdateEvent: w,
         "script-props": ["animationGroupUpdateEvent"],
-        droppable: K(g)
+        droppable: q(y)
       },
       init() {
         this.addStyle({
-          ...n.animationGroupStyle,
+          ...e.animationGroupStyle,
           ...this.getStyle()
         });
-        const r = this.components();
-        this.listenTo(r, "add remove", this.updateChildrenStaggerStyles), this.updateChildrenStaggerStyles();
+        const l = this.components();
+        this.listenTo(l, "add remove", this.updateChildrenStaggerStyles), this.updateChildrenStaggerStyles();
       },
       updateChildrenStaggerStyles() {
-        this.components().forEach((r, m) => {
-          r.is(g) && r.addStyle(
+        this.components().forEach((l, s) => {
+          l.is(y) && l.addStyle(
             {
-              "--stagger-index": m.toString(),
-              [f.delay]: "calc(var(--stagger-index, 0) * var(--stagger-delay, 0.3s))"
+              "--stagger-index": s.toString(),
+              [u.delay]: "calc(var(--stagger-index, 0) * var(--stagger-delay, 0.3s))"
             },
             { partial: !0 }
           );
@@ -299,11 +312,11 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
     },
     view: {
       init() {
-        const { model: r } = this;
-        this.listenTo(r, "component:styleUpdate", this.handleStyleChange);
+        const { model: l } = this;
+        this.listenTo(l, "component:styleUpdate", this.handleStyleChange);
       },
       triggerAnimation() {
-        this.el.dispatchEvent(new CustomEvent(E));
+        this.el.dispatchEvent(new CustomEvent(w));
       },
       handleStyleChange() {
         this.triggerAnimation(), this.model.updateChildrenStaggerStyles();
@@ -313,9 +326,9 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
       }
     }
   }), () => {
-    s.remove(I), a.removeType(I);
+    r.remove(I), a.removeType(I);
   };
-}, at = "animationComponent", ot = b.startup, T = [
+}, ot = "animationComponent", it = b.startup, U = [
   {
     id: "flash",
     name: "Flash",
@@ -993,28 +1006,28 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
       }
   }`
   }
-], 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)
+], st = function(t, e = {}) {
+  var i;
+  const a = ((i = e.animations) == null ? void 0 : i.call(e, { items: U })) || U, r = [
+    et(t, { ...e, animationList: a }),
+    at(t, e)
   ];
   t.Styles.addSector("animation", {
     name: "Animation",
     properties: [
       {
-        ...S,
+        ...x,
         name: "Type",
-        property: f.name,
+        property: u.name,
         type: "select",
         full: !0,
         default: "fadeIn",
         options: a
       },
       {
-        ...S,
+        ...x,
         name: "Duration",
-        property: f.duration,
+        property: u.duration,
         type: "number",
         units: ["s"],
         min: 0.1,
@@ -1023,9 +1036,9 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
         default: "1s"
       },
       {
-        ...S,
+        ...x,
         name: "Delay",
-        property: f.delay,
+        property: u.delay,
         type: "number",
         units: ["s"],
         min: 0,
@@ -1034,9 +1047,9 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
         default: "1s"
       },
       {
-        ...S,
+        ...x,
         name: "Iteration Count",
-        property: f.iterationCount,
+        property: u.iterationCount,
         type: "select",
         default: "1",
         options: [
@@ -1045,9 +1058,9 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
         ]
       },
       {
-        ...S,
+        ...x,
         name: "Timing",
-        property: f.timingFunction,
+        property: u.timingFunction,
         type: "select",
         default: "ease",
         options: [
@@ -1059,7 +1072,7 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
         ]
       },
       {
-        ...q,
+        ...J,
         name: "Stagger Delay",
         property: "--stagger-delay",
         type: "slider",
@@ -1070,7 +1083,7 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
         default: "0.3s"
       },
       {
-        ...J,
+        ...Q,
         name: "Animate on Scroll",
         property: v.onScroll,
         type: "radio",
@@ -1087,7 +1100,7 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
         ]
       },
       {
-        ...L,
+        ...S,
         name: "Scroll Threshold",
         property: v.threshold,
         type: "number",
@@ -1098,7 +1111,7 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
         default: "0.2"
       },
       {
-        ...L,
+        ...S,
         name: "Repeat on Scroll",
         property: v.repeat,
         type: "radio",
@@ -1115,16 +1128,16 @@ const g = "animation", I = "animation-group", D = "animation:update", E = "anima
         ]
       }
     ]
-  }), Y({
+  }), _({
     editor: t,
-    licenseKey: n.licenseKey,
-    plan: ot,
-    pluginName: at,
+    licenseKey: e.licenseKey,
+    plan: it,
+    pluginName: ot,
     cleanup: () => {
-      s.forEach((i) => i());
+      r.forEach((o) => o());
     }
   });
-}, st = W(it);
+}, rt = W(st);
 export {
-  st as default
+  rt as default
 };