@grapesjs/studio-sdk-plugins 1.0.21 → 1.0.22

package/dist/animationComponent/index.es.js

@@ -0,0 +1,1111 @@
+const P = "app.grapesjs.com", z = "app-stage.grapesjs.com", A = [
+  P,
+  z,
+  "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
+], B = "license:check:start", V = "license:check:end", F = () => typeof window < "u", O = ({ isDev: t, isStage: n }) => `${t ? "" : `https://${n ? z : P}`}/api`, X = () => {
+  const t = F() && window.location.hostname;
+  return !!t && (A.includes(t) || A.some((n) => t.endsWith(n)));
+};
+async function M({
+  path: t,
+  baseApiUrl: n,
+  method: e = "GET",
+  headers: r = {},
+  params: i,
+  body: o
+}) {
+  const c = `${n || O({ isDev: !1, isStage: !1 })}${t}`, l = {
+    method: e,
+    headers: {
+      "Content-Type": "application/json",
+      ...r
+    }
+  };
+  o && (l.body = JSON.stringify(o));
+  const f = i ? new URLSearchParams(i).toString() : "", a = f ? `?${f}` : "", s = await fetch(`${c}${a}`, l);
+  if (!s.ok)
+    throw new Error(`HTTP error! status: ${s.status}`);
+  return s.json();
+}
+var I = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(I || {});
+const L = {
+  [I.free]: 0,
+  [I.startup]: 10,
+  [I.business]: 20,
+  [I.enterprise]: 30
+};
+function W(t) {
+  const n = t;
+  return n.init = (e) => (r) => t(r, e), n;
+}
+const Y = (t) => /* @__PURE__ */ W(t);
+async function $({
+  editor: t,
+  plan: n,
+  pluginName: e,
+  licenseKey: r,
+  cleanup: i
+}) {
+  let o = "", m = !1;
+  const c = X(), l = (a) => {
+    console.warn("Cleanup plugin:", e, "Reason:", a), i();
+  }, f = (a = {}) => {
+    var b;
+    const { error: s, sdkLicense: g } = a, p = (b = a.plan) == null ? void 0 : b.category;
+    if (!(g || a.license) || s)
+      l(s || "Invalid license");
+    else if (p) {
+      const C = L[n], U = L[p];
+      C > U && l({ pluginRequiredPlan: n, licensePlan: p });
+    }
+  };
+  t.on(B, (a) => {
+    o = a == null ? void 0 : a.baseApiUrl, m = !0;
+  }), t.on(V, (a) => {
+    f(a);
+  }), setTimeout(async () => {
+    if (!m) {
+      if (c) return;
+      if (r) {
+        const a = await j({ licenseKey: r, pluginName: e, baseApiUrl: o });
+        a && f(a);
+      } else
+        l("The `licenseKey` option not provided");
+    }
+  }, 2e3);
+}
+async function j(t) {
+  const { licenseKey: n, pluginName: e, baseApiUrl: r } = t;
+  try {
+    return (await M({
+      baseApiUrl: r,
+      path: `/sdk/${n || "na"}`,
+      method: "POST",
+      params: {
+        d: window.location.hostname,
+        pn: e
+      }
+    })).result || {};
+  } catch (i) {
+    return console.error("Error during SDK license check:", i), !1;
+  }
+}
+const H = (...t) => (n) => t.some((e) => n.is(e));
+var u = /* @__PURE__ */ ((t) => (t.name = "animation-name", t.duration = "animation-duration", t.delay = "animation-delay", t.fillMode = "animation-fill-mode", t))(u || {}), T = /* @__PURE__ */ ((t) => (t.staggerDelay = "--stagger-delay", t))(T || {}), d = /* @__PURE__ */ ((t) => (t.onScroll = "--animation-on-scroll", t.threshold = "--animation-threshold", t.repeat = "--animation-repeat", t))(d || {});
+const y = "animation", v = "animation-group", E = "animation:update", k = "animation-group:update", Z = {
+  category: { id: "animations", label: "Animations" },
+  select: !0
+}, w = (t) => (t == null ? void 0 : t.type) === y, x = (t) => (t == null ? void 0 : t.type) === v, N = (t) => w(t) || x(t), _ = {
+  // @ts-expect-error available from the next release
+  isVisible: ({ component: t }) => N(t)
+}, S = {
+  // @ts-expect-error available from the next release
+  isVisible: ({ component: t }) => w(t)
+}, K = {
+  // @ts-expect-error available from the next release
+  isVisible: ({ component: t }) => x(t)
+}, D = {
+  // @ts-expect-error available from the next release
+  isVisible: ({ component: t, sector: n }) => {
+    var e;
+    return w(t) && x(t == null ? void 0 : t.parent()) ? !1 : N(t) && ((e = n.getProperty(d.onScroll)) == null ? void 0 : e.getValue()) === "true";
+  }
+}, G = {
+  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>'
+}, R = [
+  {
+    id: "bounce",
+    name: "Bounce",
+    css: `@keyframes bounce {
+    0%, 20%, 53%, 80%, to {
+        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+        transform:translateZ(0)
+    }
+
+    40%, 43% {
+        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+        transform:translate3d(0, -30px, 0)
+    }
+
+    70% {
+        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+        transform:translate3d(0, -15px, 0)
+    }
+
+    90% {
+        transform:translate3d(0, -4px, 0)
+    }
+}`
+  },
+  {
+    id: "flash",
+    name: "Flash",
+    css: `@keyframes flash {
+    0%, 50%, to {
+        opacity:1
+    }
+
+    25%, 75% {
+        opacity:0
+    }
+}`
+  },
+  {
+    id: "pulse",
+    name: "Pulse",
+    css: `@keyframes pulse {
+    0% {
+        transform:scaleX(1)
+    }
+
+    50% {
+        transform:scale3d(1.05, 1.05, 1.05)
+    }
+
+    to {
+        transform:scaleX(1)
+    }
+}`
+  },
+  {
+    id: "shake",
+    name: "Shake",
+    css: `@keyframes shake {
+    0%, to {
+        transform:translateZ(0)
+    }
+
+    10%, 30%, 50%, 70%, 90% {
+        transform:translate3d(-10px, 0, 0)
+    }
+
+    20%, 40%, 60%, 80% {
+        transform:translate3d(10px, 0, 0)
+    }
+}`
+  },
+  {
+    id: "tada",
+    name: "Tada",
+    css: `@keyframes tada {
+    0% {
+        transform:scaleX(1)
+    }
+
+    10%, 20% {
+        transform:scale3d(.9, .9, .9) rotate(-3deg)
+    }
+
+    30%, 50%, 70%, 90% {
+        transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)
+    }
+
+    40%, 60%, 80% {
+        transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)
+    }
+
+    to {
+        transform:scaleX(1)
+    }
+}`
+  },
+  {
+    id: "heartBeat",
+    name: "Heart Beat",
+    css: `@keyframes heartBeat {
+    0% {
+        transform:scale(1)
+    }
+
+    14% {
+        transform:scale(1.3)
+    }
+
+    28% {
+        transform:scale(1)
+    }
+
+    42% {
+        transform:scale(1.3)
+    }
+
+    70% {
+        transform:scale(1)
+    }
+}`
+  },
+  {
+    id: "bounceIn",
+    name: "Bounce In",
+    css: `@keyframes bounceIn {
+    0%, 20%, 40%, 60%, 80%, to {
+        animation-timing-function:cubic-bezier(.215, .61, .355, 1)
+    }
+
+    0% {
+        opacity: 0;
+        transform:scale3d(.3, .3, .3)
+    }
+
+    20% {
+        transform:scale3d(1.1, 1.1, 1.1)
+    }
+
+    40% {
+        transform:scale3d(.9, .9, .9)
+    }
+
+    60% {
+        opacity: 1;
+        transform:scale3d(1.03, 1.03, 1.03)
+    }
+
+    80% {
+        transform:scale3d(.97, .97, .97)
+    }
+
+    to {
+        opacity: 1;
+        transform:scaleX(1)
+    }
+}`
+  },
+  {
+    id: "bounceInDown",
+    name: "Bounce In Down",
+    css: `@keyframes bounceInDown {
+    0%, 60%, 75%, 90%, to {
+        animation-timing-function:cubic-bezier(.215, .61, .355, 1)
+    }
+
+    0% {
+        opacity: 0;
+        transform:translate3d(0, -100%, 0)
+    }
+
+    60% {
+        opacity: 1;
+        transform:translate3d(0, 25px, 0)
+    }
+
+    75% {
+        transform:translate3d(0, -10px, 0)
+    }
+
+    90% {
+        transform:translate3d(0, 5px, 0)
+    }
+
+    to {
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "bounceInLeft",
+    name: "Bounce In Left",
+    css: `@keyframes bounceInLeft {
+    0%, 1%, 60%, 75%, 90%, to {
+        animation-timing-function:cubic-bezier(.215, .61, .355, .1)
+    }
+
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        transform:translate3d(-100%, 0, 0)
+    }
+
+    60% {
+        opacity: 1;
+        transform:translate3d(25px, 0, 0)
+    }
+
+    75% {
+        transform:translate3d(-10px, 0, 0)
+    }
+
+    90% {
+        transform:translate3d(5px, 0, 0)
+    }
+
+    to {
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "bounceInRight",
+    name: "Bounce In Right",
+    css: `@keyframes bounceInRight {
+    0%, 1%, 60%, 75%, 90%, to {
+        animation-timing-function:cubic-bezier(.215, .61, .355, .1)
+    }
+
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        transform:translate3d(100%, 0, 0)
+    }
+
+    60% {
+        opacity: 1;
+        transform:translate3d(-25px, 0, 0)
+    }
+
+    75% {
+        transform:translate3d(10px, 0, 0)
+    }
+
+    90% {
+        transform:translate3d(-5px, 0, 0)
+    }
+
+    to {
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "bounceInUp",
+    name: "Bounce In Up",
+    css: `@keyframes bounceInUp {
+    0%, 60%, 75%, 90%, to {
+        animation-timing-function:cubic-bezier(.215, .61, .355, .1)
+    }
+
+    0% {
+        opacity: 0;
+        transform:translate3d(0, 100%, 0)
+    }
+
+    60% {
+        opacity: 1;
+        transform:translate3d(0, -20px, 0)
+    }
+
+    75% {
+        transform:translate3d(0, 10px, 0)
+    }
+
+    90% {
+        transform:translate3d(0, -5px, 0)
+    }
+
+    to {
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "fadeIn",
+    name: "Fade In",
+    css: `@keyframes fadeIn {
+    0% {
+        opacity:0
+    }
+
+    to {
+        opacity:1
+    }
+}`
+  },
+  {
+    id: "fadeInDown",
+    name: "Fade In Down",
+    css: `@keyframes fadeInDown {
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        transform:translate3d(0, -100%, 0)
+    }
+
+    to {
+        opacity: 1;
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "fadeInLeft",
+    name: "Fade In Left",
+    css: `@keyframes fadeInLeft {
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        transform:translate3d(-100%, 0, 0)
+    }
+
+    to {
+        opacity: 1;
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "fadeInRight",
+    name: "Fade In Right",
+    css: `@keyframes fadeInRight {
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        transform:translate3d(100%, 0, 0)
+    }
+
+    to {
+        opacity: 1;
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "fadeInUp",
+    name: "Fade In Up",
+    css: `@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+    }
+
+    1% {
+        transform:translate3d(0, 100%, 0)
+    }
+
+    to {
+        opacity: 1;
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "flipInX",
+    name: "Flip In X",
+    css: `@keyframes flipInX {
+    0% {
+        transform: perspective(400px) rotateX(90deg);
+        animation-timing-function: ease-in;
+        opacity:0
+    }
+
+    40% {
+        transform: perspective(400px) rotateX(-20deg);
+        animation-timing-function:ease-in
+    }
+
+    60% {
+        transform: perspective(400px) rotateX(10deg);
+        opacity:1
+    }
+
+    80% {
+        transform:perspective(400px) rotateX(-5deg)
+    }
+
+    to {
+        transform:perspective(400px)
+    }
+}`
+  },
+  {
+    id: "flipInY",
+    name: "Flip In Y",
+    css: `@keyframes flipInY {
+    0% {
+        transform: perspective(400px) rotateY(90deg);
+        animation-timing-function: ease-in;
+        opacity:0
+    }
+
+    40% {
+        transform: perspective(400px) rotateY(-20deg);
+        animation-timing-function:ease-in
+    }
+
+    60% {
+        transform: perspective(400px) rotateY(10deg);
+        opacity:1
+    }
+
+    80% {
+        transform:perspective(400px) rotateY(-5deg)
+    }
+
+    to {
+        transform:perspective(400px)
+    }
+}`
+  },
+  {
+    id: "rotateIn",
+    name: "Rotate In",
+    css: `@keyframes rotateIn {
+    0% {
+        transform-origin: center;
+        transform: rotate(-200deg);
+        opacity:0
+    }
+
+    to {
+        transform-origin: center;
+        transform: translateZ(0);
+        opacity:1
+    }
+}`
+  },
+  {
+    id: "rotateInDownLeft",
+    name: "Rotate In Down Left",
+    css: `@keyframes rotateInDownLeft {
+    0% {
+        transform-origin: left bottom;
+        transform: rotate(-45deg);
+        opacity:0
+    }
+
+    to {
+        transform-origin: left bottom;
+        transform: translateZ(0);
+        opacity:1
+    }
+}`
+  },
+  {
+    id: "rotateInDownRight",
+    name: "Rotate In Down Right",
+    css: `@keyframes rotateInDownRight {
+    0% {
+        transform-origin: right bottom;
+        transform: rotate(45deg);
+        opacity:0
+    }
+
+    to {
+        transform-origin: right bottom;
+        transform: translateZ(0);
+        opacity:1
+    }
+}`
+  },
+  {
+    id: "rotateInUpLeft",
+    name: "Rotate In Up Left",
+    css: `@keyframes rotateInUpLeft {
+    0% {
+        transform-origin: left bottom;
+        transform: rotate(45deg);
+        opacity:0
+    }
+
+    to {
+        transform-origin: left bottom;
+        transform: translateZ(0);
+        opacity:1
+    }
+}`
+  },
+  {
+    id: "rotateInUpRight",
+    name: "Rotate In Up Right",
+    css: `@keyframes rotateInUpRight {
+    0% {
+        transform-origin: right bottom;
+        transform: rotate(-90deg);
+        opacity:0
+    }
+
+    to {
+        transform-origin: right bottom;
+        transform: translateZ(0);
+        opacity:1
+    }
+}`
+  },
+  {
+    id: "slideInDown",
+    name: "Slide In Down",
+    css: `@keyframes slideInDown {
+    0% {
+        visibility:visible
+    }
+
+    1% {
+        transform: translate3d(0, -100%, 0);
+    }
+
+    to {
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "slideInLeft",
+    name: "Slide In Left",
+    css: `@keyframes slideInLeft {
+    0% {
+        visibility:visible
+    }
+
+    1% {
+        transform: translate3d(-100%, 0, 0);
+    }
+
+    to {
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "slideInRight",
+    name: "Slide In Right",
+    css: `@keyframes slideInRight {
+    0% {
+        visibility:visible
+    }
+
+    1% {
+        transform: translate3d(100%, 0, 0);
+    }
+
+    to {
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "slideInUp",
+    name: "Slide In Up",
+    css: `@keyframes slideInUp {
+    0% {
+        visibility:visible
+    }
+
+    1% {
+        transform: translate3d(0, 100%, 0);
+    }
+
+    to {
+        transform:translateZ(0)
+    }
+}`
+  },
+  {
+    id: "zoomIn",
+    name: "Zoom In",
+    css: `@keyframes zoomIn {
+    0% {
+        opacity: 0;
+        transform:scale3d(.3, .3, .3)
+    }
+
+    50% {
+        opacity:1
+    }
+}`
+  },
+  {
+    id: "zoomInDown",
+    name: "Zoom In Down",
+    css: `@keyframes zoomInDown {
+    0% {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+        animation-timing-function:cubic-bezier(.55, .055, .675, .19)
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+        animation-timing-function:cubic-bezier(.175, .885, .32, 1)
+    }
+}`
+  },
+  {
+    id: "zoomInLeft",
+    name: "Zoom In Left",
+    css: `@keyframes zoomInLeft {
+    0% {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+        animation-timing-function:cubic-bezier(.55, .055, .675, .19)
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+        animation-timing-function:cubic-bezier(.175, .885, .32, 1)
+    }
+}`
+  },
+  {
+    id: "zoomInRight",
+    name: "Zoom In Right",
+    css: `@keyframes zoomInRight {
+    0% {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+        animation-timing-function:cubic-bezier(.55, .055, .675, .19)
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+        animation-timing-function:cubic-bezier(.175, .885, .32, 1)
+    }
+}`
+  },
+  {
+    id: "zoomInUp",
+    name: "Zoom In Up",
+    css: `@keyframes zoomInUp {
+    0% {
+        opacity: 0;
+        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+        animation-timing-function:cubic-bezier(.55, .055, .675, .19)
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+        animation-timing-function:cubic-bezier(.175, .885, .32, 1)
+    }
+}`
+  }
+], q = function(t) {
+  const n = this;
+  let e = null;
+  const r = () => {
+    e == null || e.disconnect(), e = null;
+  }, i = () => {
+    r();
+    const o = n.style;
+    o.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, a = m.getPropertyValue("--animation-repeat").trim() === "true", s = () => {
+        o.animationName = "none", n.offsetWidth, o.animationName = c, o.animationPlayState = "running";
+      };
+      if (!c || c === "none") {
+        o.animationName = "none", o.animationPlayState = "paused";
+        return;
+      }
+      if (!l) {
+        s();
+        return;
+      }
+      o.animationPlayState = "paused", e = new IntersectionObserver(
+        (g) => {
+          g.forEach((p) => {
+            p.isIntersecting && (s(), !a && r());
+          });
+        },
+        { threshold: f }
+      ), e.observe(n);
+    });
+  };
+  n.addEventListener(t.animationUpdateEvent, i), i();
+}, J = (t, n) => {
+  const { Components: e, Blocks: r, Canvas: i } = t, { block: o = {}, animationList: m = [] } = n, c = "Animation", l = Object.values(d), f = Object.values(u);
+  return e.addType(y, {
+    block: o ? {
+      label: c,
+      media: G.animation,
+      content: { type: y },
+      ...Z,
+      ...o
+    } : void 0,
+    model: {
+      defaults: {
+        emptyState: !0,
+        name: c,
+        traits: [],
+        script: q,
+        animationUpdateEvent: E,
+        "script-props": ["animationUpdateEvent"],
+        styles: m.map((a) => a.css).join(`
+`),
+        style: {
+          [u.name]: "fadeIn",
+          [u.duration]: "1s",
+          [u.delay]: "0s",
+          [u.fillMode]: "both",
+          [d.onScroll]: "true",
+          [d.threshold]: "0.2",
+          [d.repeat]: "false",
+          ...n.animationStyle
+        }
+      },
+      init() {
+        const { em: a } = this;
+        this.listenTo(a, "component:mount", (s) => {
+          var p;
+          if (s !== this) return;
+          ((p = this.parent()) == null ? void 0 : p.get("type")) !== v || l.forEach((h) => this.removeStyle(h));
+        });
+      }
+    },
+    view: {
+      events: () => ({
+        animationstart: "onAnimationStart",
+        animationend: "onAnimationEnd"
+      }),
+      init() {
+        const { model: a } = this;
+        this.listenTo(a, "component:styleUpdate", this.handleStyleChange);
+      },
+      onAnimationStart() {
+        var s;
+        if ((s = this.cmpSpots) != null && s.length) return;
+        const a = i.getSpots({ component: this.model });
+        this.cmpSpots = a, i.removeSpots(a), this.el.ownerDocument.body.style.overflowX = "hidden";
+      },
+      onAnimationEnd() {
+        const a = this.cmpSpots || [];
+        i.spots.add(a), this.cmpSpots = [], this.el.ownerDocument.body.style.overflowX = "";
+      },
+      triggerAnimation() {
+        this.el.dispatchEvent(new CustomEvent(E));
+      },
+      handleStyleChange(a, s) {
+        Object.keys((s == null ? void 0 : s.style) || {}).some((h) => f.includes(h) || l.includes(h)) && this.triggerAnimation();
+      },
+      onRender() {
+        this.triggerAnimation();
+      }
+    }
+  }), () => {
+    r.remove(y), e.removeType(y);
+  };
+}, Q = function(t) {
+  const n = this, e = "--animation-on-scroll", r = "--animation-threshold", i = "--animation-repeat";
+  let o = null;
+  const m = () => {
+    o == null || o.disconnect(), o = null;
+  }, c = () => {
+    m();
+    const l = getComputedStyle(n), f = l.getPropertyValue(e).trim() !== "false", a = parseFloat(l.getPropertyValue(r).trim()) || 0.2, s = l.getPropertyValue(i).trim() === "true", g = () => {
+      Array.from(n.children).forEach((p) => {
+        p instanceof HTMLElement && typeof p.dispatchEvent == "function" && p.dispatchEvent(new CustomEvent(k, { bubbles: !1 }));
+      });
+    };
+    if (!f) {
+      g();
+      return;
+    }
+    o = new IntersectionObserver(
+      (p) => {
+        p.forEach((h) => {
+          h.isIntersecting ? (g(), !s && m()) : s && Array.from(n.children).forEach((b) => {
+            b instanceof HTMLElement && getComputedStyle(b).getPropertyValue(e).trim() !== "false" && (b.style.opacity = "0", b.style.animationPlayState = "paused");
+          });
+        });
+      },
+      { threshold: a }
+    ), o.observe(n);
+  };
+  n.addEventListener(t.animationGroupUpdateEvent, c), c();
+}, tt = (t, n) => {
+  const { Components: e, Blocks: r } = t, { blockGroup: i = {} } = n, o = "Animation Group";
+  return e.addType(v, {
+    block: i ? {
+      label: o,
+      media: G.animationGroup,
+      content: {
+        type: v,
+        components: [
+          { type: y },
+          { type: y },
+          { type: y }
+        ]
+      },
+      ...Z,
+      ...i
+    } : void 0,
+    model: {
+      defaults: {
+        name: o,
+        emptyState: !0,
+        traits: [],
+        script: Q,
+        animationGroupUpdateEvent: k,
+        "script-props": ["animationGroupUpdateEvent"],
+        droppable: H(y),
+        style: {
+          [T.staggerDelay]: "0.3s",
+          [d.onScroll]: "true",
+          [d.threshold]: "0.2",
+          [d.repeat]: "false",
+          ...n.animationGroupStyle
+        }
+      },
+      init() {
+        const m = this.components();
+        this.listenTo(m, "add remove", this.updateChildrenStaggerStyles), this.updateChildrenStaggerStyles();
+      },
+      updateChildrenStaggerStyles() {
+        this.components().forEach((m, c) => {
+          m.is(y) && m.addStyle(
+            {
+              "--stagger-index": c.toString(),
+              [u.delay]: "calc(var(--stagger-index, 0) * var(--stagger-delay, 0s))"
+            },
+            { partial: !0 }
+          );
+        });
+      }
+    },
+    view: {
+      init() {
+        const { model: m } = this;
+        this.listenTo(m, "component:styleUpdate", this.handleStyleChange);
+      },
+      triggerAnimation() {
+        this.el.dispatchEvent(new CustomEvent(k));
+      },
+      handleStyleChange() {
+        this.triggerAnimation(), this.model.updateChildrenStaggerStyles();
+      },
+      onRender() {
+        this.triggerAnimation();
+      }
+    }
+  }), () => {
+    r.remove(v), e.removeType(v);
+  };
+}, nt = "animationComponent", et = I.startup, at = function(t, n = {}) {
+  var i;
+  const e = ((i = n.animations) == null ? void 0 : i.call(n, { items: R })) || R, r = [
+    J(t, { ...n, animationList: e }),
+    tt(t, n)
+  ];
+  t.Styles.addSector("animation", {
+    name: "Animation",
+    properties: [
+      {
+        ...S,
+        name: "Type",
+        property: u.name,
+        type: "select",
+        full: !0,
+        default: "fadeIn",
+        options: e
+      },
+      {
+        ...S,
+        name: "Duration",
+        property: u.duration,
+        type: "number",
+        units: ["s"],
+        min: 0.1,
+        max: 10,
+        step: 0.1,
+        default: "1s"
+      },
+      {
+        ...S,
+        name: "Fill Mode",
+        property: u.fillMode,
+        type: "select",
+        default: "both",
+        options: [
+          {
+            name: "None",
+            id: "none"
+          },
+          {
+            name: "Forwards",
+            id: "forwards"
+          },
+          {
+            name: "Backwards",
+            id: "backwards"
+          },
+          {
+            name: "Both",
+            id: "both"
+          }
+        ]
+      },
+      {
+        ...K,
+        name: "Stagger Delay",
+        property: "--stagger-delay",
+        type: "slider",
+        units: ["s"],
+        min: 0.1,
+        max: 5,
+        step: 0.1,
+        default: "0.1s"
+      },
+      {
+        ..._,
+        name: "Animate on Scroll",
+        property: d.onScroll,
+        type: "radio",
+        default: "true",
+        options: [
+          {
+            name: "Yes",
+            id: "true"
+          },
+          {
+            name: "No",
+            id: "false"
+          }
+        ]
+      },
+      {
+        ...D,
+        name: "Scroll Threshold",
+        property: d.threshold,
+        type: "number",
+        full: !0,
+        min: 0.1,
+        max: 1,
+        step: 0.01,
+        default: "0.2"
+      },
+      {
+        ...D,
+        name: "Repeat on Scroll",
+        property: d.repeat,
+        type: "radio",
+        default: "false",
+        options: [
+          {
+            name: "Yes",
+            id: "true"
+          },
+          {
+            name: "No",
+            id: "false"
+          }
+        ]
+      }
+    ]
+  }), $({
+    editor: t,
+    licenseKey: n.licenseKey,
+    plan: et,
+    pluginName: nt,
+    cleanup: () => {
+      r.forEach((o) => o());
+    }
+  });
+}, ot = Y(at);
+export {
+  ot as default
+};