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

package/dist/flexComponent/index.es.js

@@ -0,0 +1,715 @@
+import "grapesjs";
+const de = "app.grapesjs.com", ue = "app-stage.grapesjs.com", ie = [
+  de,
+  ue,
+  "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
+], Se = "license:check:start", be = "license:check:end", Ce = () => typeof window < "u", Pe = ({ isDev: n, isStage: e }) => `${n ? "" : `https://${e ? ue : de}`}/api`, ze = () => {
+  const n = Ce() && window.location.hostname;
+  return !!n && (ie.includes(n) || ie.some((e) => n.endsWith(e)));
+};
+function xe(n) {
+  return typeof n == "function";
+}
+async function we({
+  path: n,
+  baseApiUrl: e,
+  method: t = "GET",
+  headers: s = {},
+  params: i,
+  body: a
+}) {
+  const l = `${e || Pe({ isDev: !1, isStage: !1 })}${n}`, c = {
+    method: t,
+    headers: {
+      "Content-Type": "application/json",
+      ...s
+    }
+  };
+  a && (c.body = JSON.stringify(a));
+  const g = i ? new URLSearchParams(i).toString() : "", p = g ? `?${g}` : "", u = await fetch(`${l}${p}`, c);
+  if (!u.ok)
+    throw new Error(`HTTP error! status: ${u.status}`);
+  return u.json();
+}
+var $ = /* @__PURE__ */ ((n) => (n.free = "free", n.startup = "startup", n.business = "business", n.enterprise = "enterprise", n))($ || {}), he = /* @__PURE__ */ ((n) => (n.web = "web", n.email = "email", n))(he || {});
+const ae = {
+  [$.free]: 0,
+  [$.startup]: 10,
+  [$.business]: 20,
+  [$.enterprise]: 30
+};
+function ve(n) {
+  const e = n;
+  return e.init = (t) => (s) => n(s, t), e;
+}
+const Ie = (n) => /* @__PURE__ */ ve(n);
+async function Re({
+  editor: n,
+  plan: e,
+  pluginName: t,
+  licenseKey: s,
+  cleanup: i
+}) {
+  let a = "", o = !1;
+  const l = ze(), c = (p) => {
+    console.warn("Cleanup plugin:", t, "Reason:", p), i();
+  }, g = (p = {}) => {
+    var S;
+    const { error: u, sdkLicense: f } = p, v = (S = p.plan) == null ? void 0 : S.category;
+    if (!(f || p.license) || u)
+      c(u || "Invalid license");
+    else if (v) {
+      const I = ae[e], R = ae[v];
+      I > R && c({ pluginRequiredPlan: e, licensePlan: v });
+    }
+  };
+  n.on(Se, (p) => {
+    a = p == null ? void 0 : p.baseApiUrl, o = !0;
+  }), n.on(be, (p) => {
+    g(p);
+  }), setTimeout(async () => {
+    if (!o) {
+      if (l) return;
+      if (s) {
+        const p = await Ee({ licenseKey: s, pluginName: t, baseApiUrl: a });
+        p && g(p);
+      } else
+        c("The `licenseKey` option not provided");
+    }
+  }, 2e3);
+}
+async function Ee(n) {
+  const { licenseKey: e, pluginName: t, baseApiUrl: s } = n;
+  try {
+    return (await we({
+      baseApiUrl: s,
+      path: `/sdk/${e || "na"}`,
+      method: "POST",
+      params: {
+        d: window.location.hostname,
+        pn: t
+      }
+    })).result || {};
+  } catch (i) {
+    return console.error("Error during SDK license check:", i), !1;
+  }
+}
+const ge = (n) => (e) => {
+  var t;
+  return ((t = e.getAttribute) == null ? void 0 : t.call(e, ne)) === n;
+}, Ge = (...n) => (e) => n.some((t) => e.is(t)), Te = (...n) => (e, t) => n.some((s) => t.is(s)), fe = "gjs-plg-", ne = "data-type-role", j = class j {
+  constructor(e) {
+    this.config = e;
+  }
+  getSize(e) {
+    var t;
+    return (t = this.config) != null && t.getSize ? this.config.getSize(e) : se(e.componentColumn, j.CSS_FLEX_BASIS);
+  }
+  setSize(e) {
+    var t;
+    if ((t = this.config) != null && t.setSize)
+      this.config.setSize(e);
+    else {
+      const { componentColumn: s, sizeValue: i, partial: a } = e;
+      s.addStyle({ [j.CSS_FLEX_BASIS]: i }, { partial: a });
+    }
+  }
+};
+j.CSS_FLEX_BASIS = "flex-basis";
+let K = j;
+const N = class N {
+  constructor(e) {
+    this.config = e;
+  }
+  isGapSupported() {
+    return !0;
+  }
+  getGap(e) {
+    var t;
+    return (t = this.config) != null && t.getGap ? this.config.getGap(e) : se(e.componentRow, N.CSS_GAP);
+  }
+  setGap(e) {
+    var t;
+    if ((t = this.config) != null && t.setGap)
+      this.config.setGap(e);
+    else {
+      const { componentRow: s, gapValue: i, partial: a } = e;
+      s.addStyle({ [N.CSS_GAP]: i }, { partial: a });
+    }
+  }
+};
+N.CSS_GAP = "gap";
+let J = N;
+const Y = class Y {
+  constructor(e) {
+    this.config = e;
+  }
+  getParentSize(e) {
+    var a;
+    if ((a = this.config) != null && a.getParentSize) return this.config.getParentSize(e);
+    const { componentRow: t, isVertical: s } = e, i = t.getEl();
+    return i ? s ? i.clientHeight : i.clientWidth : 0;
+  }
+  isLayoutVertical(e) {
+    var s;
+    if ((s = this.config) != null && s.isParentVertical) return this.config.isParentVertical(e);
+    const t = se(e.componentRow, Y.CSS_FLEX_DIRECTION, !0);
+    return t === "column" || t === "column-reverse";
+  }
+};
+Y.CSS_FLEX_DIRECTION = "flex-direction";
+let q = Y;
+const _ = class _ {
+  constructor(e) {
+    this.config = e;
+  }
+  getSize(e) {
+    var s;
+    if ((s = this.config) != null && s.getSize) return this.config.getSize(e);
+    const t = e.componentColumn;
+    if (t.is(_.MJML_COLUMN_TYPE)) {
+      const a = t.getAttributes().width;
+      if (a && (a.includes("%") || !isNaN(parseFloat(a))))
+        return parseFloat(a);
+      const o = t.parent();
+      return 100 / (o ? o.components().length : 1);
+    }
+    return 0;
+  }
+  setSize(e) {
+    var t;
+    if ((t = this.config) != null && t.setSize)
+      this.config.setSize(e);
+    else {
+      const { componentColumn: s, sizeValue: i, partial: a } = e;
+      s.is(_.MJML_COLUMN_TYPE) && s.addAttributes({ width: `${parseFloat(i)}%` }, { partial: a });
+    }
+  }
+};
+_.MJML_COLUMN_TYPE = "mj-column";
+let Z = _;
+const U = class U {
+  constructor(e) {
+    this.config = e;
+  }
+  isGapSupported() {
+    return !1;
+  }
+  getGap(e) {
+    var s;
+    if ((s = this.config) != null && s.getGap) return this.config.getGap(e);
+    const { componentRow: t } = e;
+    if (t.is(U.MJML_SECTION_TYPE)) {
+      const i = t.getAttributes();
+      if (i && i.padding)
+        return parseInt(i.padding, 10) || 0;
+    }
+    return 0;
+  }
+  setGap(e) {
+    var t, s;
+    (s = (t = this.config) == null ? void 0 : t.setGap) == null || s.call(t, e);
+  }
+};
+U.MJML_SECTION_TYPE = "mj-section";
+let Q = U;
+class Le {
+  constructor(e) {
+    this.config = e;
+  }
+  getParentSize(e) {
+    var o;
+    if ((o = this.config) != null && o.getParentSize) return this.config.getParentSize(e);
+    const { componentRow: t, isVertical: s } = e, i = t.getEl();
+    if (!i) return 0;
+    let a = i;
+    if (i.tagName !== "TABLE") {
+      const l = i.querySelectorAll("table");
+      l.length && (a = l[0]);
+    }
+    return s ? a.clientHeight : a.clientWidth;
+  }
+  isLayoutVertical(e) {
+    var t;
+    return (t = this.config) != null && t.isParentVertical ? this.config.isParentVertical(e) : !1;
+  }
+}
+class H {
+  constructor() {
+    this.handlerCache = /* @__PURE__ */ new Map();
+  }
+  static getInstance() {
+    return H.instance || (H.instance = new H()), H.instance;
+  }
+  getHandlers(e) {
+    const t = `${e.projectType}-${e.disableGapHandler ? "nogap" : "gap"}`;
+    return this.handlerCache.has(t) || (A(e) ? this.handlerCache.set(t, {
+      sizeHandler: new Z(e),
+      gapHandler: new Q(e),
+      parentSizeHandler: new Le(e)
+    }) : this.handlerCache.set(t, {
+      sizeHandler: new K(e),
+      gapHandler: new J(e),
+      parentSizeHandler: new q(e)
+    })), this.handlerCache.get(t);
+  }
+}
+function G(n) {
+  return H.getInstance().getHandlers(n);
+}
+const oe = (n) => {
+  n.style.display = "none";
+}, re = (n) => {
+  n.style.display = "block";
+}, V = (n) => +parseFloat(`${n}`).toFixed(2), A = (n) => n.projectType === he.email, k = (n, e) => {
+  const t = n.Canvas.getFramesEl();
+  t && (t.style.pointerEvents = e ? "none" : "");
+}, $e = (n) => n ? ["top", "bottom"] : ["left", "right"], He = (n) => {
+  const e = n.parent();
+  return e ? e.components().models.indexOf(n) === 0 : !1;
+}, Ae = (n) => {
+  const e = n.parent();
+  if (!e) return !1;
+  const t = e.components().models;
+  return t.indexOf(n) === t.length - 1;
+}, Ve = (n) => {
+  const e = n.parent();
+  if (!e) return !1;
+  const t = e.components().models;
+  return t.length > 1 && n.index() === t.length - 1;
+}, Me = (n, e, t, s) => {
+  const a = n + (t ? e === "top" ? -1 : e === "bottom" ? 1 : 0 : e === "left" ? -1 : e === "right" ? 1 : 0);
+  return a >= 0 && a < s ? a : -1;
+}, O = (n) => n === "top" || n === "bottom", je = (n, e) => !!(He(n) && (e === "left" || e === "top") || Ae(n) && (e === "right" || e === "bottom")), Ne = (n) => {
+  const e = n.parent();
+  return e ? e.components().models.length > 1 : !1;
+}, ce = (n, e) => n === "right" || n === "bottom" ? e > 0 : e < 0, se = (n, e, t = !1) => {
+  const s = !t, i = n.getEl();
+  if (!i)
+    return s ? 0 : "";
+  const o = window.getComputedStyle(i)[e] || "";
+  if (s) {
+    let l;
+    return typeof o == "string" ? (l = parseFloat(o.replace(/[^-\d.]/g, "")), isNaN(l) && (l = 0)) : l = Number(o) || 0, l;
+  }
+  return o;
+}, le = (n, e, t) => {
+  const s = ee({ componentRow: n, isVertical: e }, t), i = n.components().models;
+  return s * (i.length - 1);
+}, F = (n, e) => G(e).parentSizeHandler.isLayoutVertical({ componentRow: n }), B = (n, e) => G(e).sizeHandler.getSize(n), ee = (n, e) => {
+  if (e != null && e.disableGapHandler) return 0;
+  const { gapHandler: t, parentSizeHandler: s } = G(e);
+  if (!t.isGapSupported()) return 0;
+  const i = t.getGap(n), a = s.getParentSize(n);
+  return i / 100 * a;
+}, te = (n, e) => G(e).parentSizeHandler.getParentSize(n), M = (n, e) => {
+  G(e).sizeHandler.setSize(n);
+}, me = (n, e) => {
+  const t = B(n, e);
+  M({ ...n, sizeValue: `${t}%`, partial: !1 }, e);
+}, ye = (n, e) => {
+  if (e != null && e.disableGapHandler) return;
+  const { gapHandler: t } = G(e);
+  t.isGapSupported() && t.setGap(n);
+}, _e = (n, e) => {
+  const t = n.getStyle().gap;
+  if (!t) return;
+  const s = n.components().models, i = { componentRow: n, isVertical: F(n, e) };
+  s.map((a) => me({ ...i, componentColumn: a }, e)), ye({ ...i, gapValue: String(t), partial: !1 }, e);
+};
+function Fe(n, e) {
+  const { Blocks: t } = n, { typeColumn: s, typeRow: i, blocks: a } = e;
+  if (a === !1 || A(e)) return;
+  const o = (u) => ({
+    type: i,
+    components: u.map((f) => ({
+      type: s,
+      style: { "flex-basis": `${f}%` }
+    }))
+  }), l = (u) => `<div class="gs-block-item__flex-row" style="display: flex; height: 1.75rem; width: 100%; flex-wrap: nowrap; gap: 0.5rem;">
+      ${u.map((f) => `<div style="flex-basis: ${f}%; border-color: currentColor; border-width: 2px; border-radius: 0.12rem;"></div>`).join("")}
+    </div>`, c = (u, f) => ({
+    id: `flex-row-${f.join("-")}`,
+    label: u,
+    category: "Layout",
+    select: !0,
+    full: !0,
+    attributes: { class: "gs-block-item__flex gs-utl-w-full" },
+    media: l(f),
+    content: o(f)
+  }), g = [
+    c("1 Column", [100]),
+    c("2 Columns 50/50", [50, 50]),
+    c("2 Columns 25/75", [25, 75]),
+    c("2 Columns 75/25", [75, 25]),
+    c("3 Columns", [33.33, 33.33, 33.33]),
+    c("3 Columns 50/25/25", [50, 25, 25]),
+    c("3 Columns 25/50/25", [25, 50, 25]),
+    c("3 Columns 25/25/50", [25, 25, 50]),
+    c("4 Columns", [25, 25, 25, 25]),
+    c("5 Columns", [20, 20, 20, 20, 20])
+  ], p = xe(a) ? a({ blocks: g }) : g;
+  return p.forEach((u) => t.add(u.id, u)), () => {
+    p.forEach((u) => t.remove(u.id));
+  };
+}
+const Be = (n, e) => {
+  const { Components: t } = n, { typeRow: s, typeColumn: i, extendTypeColumn: a } = e, o = `${fe}${i}`, c = !!i && !!t.getType(i) && !a;
+  if (!(!i || c || A(e)))
+    return t.addType(i, {
+      isComponent: ge(i),
+      model: {
+        defaults: {
+          name: "Column",
+          resizable: !1,
+          emptyState: !0,
+          classes: o,
+          icon: '<svg viewBox="0 0 24 24"><path d="M14.5 2.3A1.8 1.8 0 0 0 12.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8zm-8 0A1.8 1.8 0 0 0 4.7 4v16c0 1 .8 1.8 1.8 1.8h3a1.8 1.8 0 0 0 1.8-1.8V4a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',
+          draggable: Te(s),
+          attributes: { [ne]: i },
+          styles: `
+          .${o} {
+            flex-grow: 1;
+          }
+        `
+        }
+      }
+    }), () => {
+      t.removeType(i);
+    };
+}, De = (n, e) => {
+  const { Components: t } = n, { typeRow: s, typeColumn: i, extendTypeRow: a } = e, o = `${fe}${s}`, c = !!s && !!t.getType(s) && !a;
+  if (!(!s || c || A(e)))
+    return t.addType(s, {
+      isComponent: ge(s),
+      model: {
+        defaults: {
+          name: "Row",
+          classes: o,
+          icon: '<svg viewBox="0 0 24 24"><path d="M4 4.8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3A1.8 1.8 0 0 0 20 4.7zm0 8a1.8 1.8 0 0 0-1.8 1.7v3c0 1 .8 1.8 1.8 1.8h16a1.8 1.8 0 0 0 1.8-1.8v-3a1.8 1.8 0 0 0-1.8-1.8z"/></svg>',
+          emptyState: { styleIn: "width: 100%" },
+          attributes: { [ne]: s },
+          droppable: Ge(i),
+          traits: [
+            // {
+            //   type: 'number',
+            //   name: 'columns',
+            //   label: 'Columns',
+            //   min: 1,
+            //   max: 12,
+            //   step: 1,
+            //   default: 3
+            // },
+            // {
+            //   type: 'button',
+            //   text: 'Set column count',
+            //   full: true,
+            //   command: (_, trait) => {
+            //     const columnCount = trait.component.getTrait('columns').props().value;
+            //     createEqualColumns(columnLayoutComponent, columnCount, 2);
+            //   }
+            // },
+            {
+              type: "checkbox",
+              name: "snap",
+              label: "Enable Snap",
+              default: e.snapEnabled,
+              changeProp: !0
+            },
+            {
+              type: "number",
+              name: "snap-divisions",
+              label: "Snap Divisions",
+              min: 1,
+              max: 12,
+              step: 1,
+              default: e.snapDivisions,
+              changeProp: !0
+            }
+          ],
+          resizable: {
+            tl: 0,
+            tc: 0,
+            tr: 0,
+            cl: 0,
+            bl: 0,
+            br: 0
+          },
+          styles: `
+          .${o} {
+            display: flex;
+            align-items: stretch;
+            flex-wrap: nowrap;
+          }
+        `
+        }
+      }
+    }), () => {
+      t.removeType(s);
+    };
+};
+class ke {
+  constructor() {
+    this.resizableChildTypes = /* @__PURE__ */ new Set(), this.gapAdjustableParentTypes = /* @__PURE__ */ new Set(), this.typeRelationships = /* @__PURE__ */ new Map();
+  }
+  registerResizableChild(e) {
+    this.resizableChildTypes.add(e);
+  }
+  registerGapAdjustableParent(e) {
+    this.gapAdjustableParentTypes.add(e);
+  }
+  registerTypeRelationship(e, t) {
+    this.typeRelationships.has(e) || this.typeRelationships.set(e, /* @__PURE__ */ new Set()), this.typeRelationships.get(e).add(t), this.registerResizableChild(t), this.registerGapAdjustableParent(e);
+  }
+  isResizableChild(e) {
+    return this.resizableChildTypes.has(e.get("type"));
+  }
+  isGapAdjustableParent(e) {
+    return this.gapAdjustableParentTypes.has(e.get("type"));
+  }
+  isValidRelationship(e, t) {
+    const s = e.get("type"), i = t.get("type");
+    return this.typeRelationships.has(s) ? this.typeRelationships.get(s).has(i) : !1;
+  }
+}
+class Oe {
+  constructor(e, t, s) {
+    this.editor = e, this.registry = t, this.opts = s, this.resizeState = /* @__PURE__ */ new WeakMap();
+  }
+  getState(e) {
+    return this.resizeState.has(e) || this.resizeState.set(e, {}), this.resizeState.get(e);
+  }
+  clearState(e) {
+    return this.resizeState.delete(e);
+  }
+  startResize(e, t, s) {
+    const { opts: i } = this, a = this.getState(e);
+    a.direction = t, a.startX = s.clientX, a.startY = s.clientY, a.resizing = !0, a.lastSnappedPercent = void 0;
+    const o = e.parent();
+    if (!o || !this.registry.isValidRelationship(o, e)) return;
+    a.snapEnabled = o.get("snap") ?? i.snapEnabled, a.snapDivisions = o.get("snap-divisions") ?? i.snapDivisions ?? 12;
+    const l = o.components().models, c = l.findIndex((f) => f.cid === e.cid), g = F(o, i), p = Me(c, t, g, l.length);
+    p !== -1 && (a.adjacentIdx = p);
+    const u = { componentColumn: e, componentRow: o, isVertical: g };
+    if (a.startPercent = B(u, i), typeof a.adjacentIdx < "u") {
+      const f = l[a.adjacentIdx];
+      a.neighborStartPercent = B({ ...u, componentColumn: f }, i);
+    }
+  }
+  updateResizeByDelta(e, t, s) {
+    const i = this.getState(e), a = e.parent();
+    !i.resizing || !a || (i.snapEnabled ? this.updateSnapResize(e, t, s) : this.updateContinuesResize(e, t, s));
+  }
+  finishResize(e) {
+    const t = e.parent(), s = t == null ? void 0 : t.components().models, i = { componentRow: t, isVertical: !!t && F(t, this.opts) };
+    s == null || s.forEach((a) => me({ ...i, componentColumn: a }, this.opts)), this.clearState(e);
+  }
+  updateContinuesResize(e, t, s) {
+    const i = this.getState(e), a = e.parent(), { opts: o } = this;
+    if (!a) return;
+    const l = o.minItemPercent ?? 0, c = O(t), g = te({ componentRow: a, isVertical: c }, o), p = le(a, c, this.opts), f = 100 - p / g * 100, v = s / (g - p) * f, { startPercent: P = 0, neighborStartPercent: S = 0 } = i, I = { componentRow: a, isVertical: c, componentColumn: e, partial: !0 }, R = ce(t, s) ? P + Math.abs(v) : P - Math.abs(v);
+    if (typeof i.adjacentIdx < "u") {
+      const z = a.components().models[i.adjacentIdx], x = P + S, b = x - l, r = Math.min(b, Math.max(l, R)), d = x - r;
+      M({ ...I, sizeValue: `${V(r)}%` }, o), M(
+        { ...I, componentColumn: z, sizeValue: `${V(d)}%` },
+        o
+      );
+    } else {
+      const z = Math.max(l, Math.min(f, R));
+      M({ ...I, sizeValue: `${V(z)}%` }, o);
+    }
+  }
+  updateSnapResize(e, t, s) {
+    const i = this.getState(e), a = e.parent(), o = O(t), l = te({ componentRow: a, isVertical: o }, this.opts), c = le(a, o, this.opts), g = l - c, p = s / g * 100, u = ce(t, s), { startPercent: f = 0, snapDivisions: v = 12 } = i, P = u ? f + Math.abs(p) : f - Math.abs(p), S = 100 / v, I = Math.floor(P / S) * S, R = Math.ceil(P / S) * S, z = Math.abs(R - P), x = Math.abs(P - I), b = S * 0.2, C = z < x ? R : I;
+    if (C > 0 && C < 100 && (z < b || x < b) && i.lastSnappedPercent !== C) {
+      i.lastSnappedPercent = C;
+      let m = Math.abs(C - f) / 100 * g;
+      (u && (t === "left" || t === "top") || !u && (t === "right" || t === "bottom")) && (m = -m), this.updateContinuesResize(e, t, m);
+    } else z >= b && x >= b && (i.lastSnappedPercent = void 0);
+  }
+}
+class Xe {
+  constructor(e, t, s) {
+    this.editor = e, this.registry = t, this.opts = s;
+  }
+  updateGapByDelta(e, t, s, i) {
+    if (!this.registry.isGapAdjustableParent(e)) return;
+    const { opts: a } = this, o = Math.max(0, s + t), l = te({ componentRow: e, isVertical: i }, a), c = o / l * 100, g = e.components().models, p = g.length - 1, u = { componentRow: e, isVertical: i }, f = g.reduce(
+      (b, C) => b + B({ ...u, componentColumn: C }, a),
+      0
+    ), P = 100 - c * p, S = a.minItemPercent || 5;
+    if (P < S * g.length)
+      return;
+    const R = 100 - p * c, z = f - R, x = { componentRow: e, isVertical: i, partial: !0 };
+    g.map((b) => {
+      const C = B({ ...u, componentColumn: b }, a), r = C - C / f * z;
+      M({ ...x, componentColumn: b, sizeValue: `${V(r)}%` }, a);
+    }), ye({ ...x, gapValue: `${V(c)}%` }, a);
+  }
+  finishGapAdjust(e) {
+    _e(e, this.opts);
+  }
+}
+class Ye {
+  constructor(e, t, s) {
+    this.editor = e, this.registry = t, this.opts = s, this.resizeHandler = new Oe(e, t, s), this.gapHandler = new Xe(e, t, s);
+  }
+  startResize(e, t, s) {
+    this.resizeHandler.startResize(e, t, s);
+  }
+  updateResizeByDelta(e, t, s) {
+    this.resizeHandler.updateResizeByDelta(e, t, s);
+  }
+  finishResize(e) {
+    this.resizeHandler.finishResize(e);
+  }
+  updateGapByDelta(e, t, s, i) {
+    this.gapHandler.updateGapByDelta(e, t, s, i);
+  }
+  finishGapAdjust(e) {
+    this.gapHandler.finishGapAdjust(e);
+  }
+  canResize(e) {
+    const t = e.parent();
+    return t ? this.registry.isValidRelationship(t, e) : !1;
+  }
+  canAdjustGap(e) {
+    return this.registry.isGapAdjustableParent(e);
+  }
+}
+const X = "gs-flex-spots", pe = `${X}__handle-size`, Ue = `${X}__handle-gap`;
+function We(n, e) {
+  const { Canvas: t } = n, s = "flex-resize-spot";
+  let i, a, o, l, c = null, g = null;
+  const p = new ke(), u = new Ye(n, p, e), f = () => {
+    var r;
+    i = document.createElement("div"), i.className = X, i.style.display = "none", a = document.createElement("div"), a.className = `${X}__handles`, a.style.position = "absolute", a.style.pointerEvents = "none", a.style.zIndex = "21", o = {
+      left: document.createElement("div"),
+      right: document.createElement("div"),
+      top: document.createElement("div"),
+      bottom: document.createElement("div")
+    }, Object.entries(o).forEach(([d, m]) => {
+      const y = d, h = O(y);
+      m.className = `${pe} ${pe}-${y} gjs-resizer-h gjs-cv-unscale`, m.style.cssText = `
+        pointer-events: all;
+        position: absolute;
+        z-index: 1;
+        cursor: ${h ? "ns-resize" : "ew-resize"};
+        ${h ? "left: 50%;" : "top: 50%;"}
+        ${y === "left" ? "left: 0px;" : ""}
+        ${y === "right" ? "right: 0px;" : ""}
+        ${y === "top" ? "top: 0px;" : ""}
+        ${y === "bottom" ? "bottom: 0px;" : ""}
+      `, m.addEventListener("pointerdown", v(y)), a.appendChild(m);
+    }), !e.disableGapHandler && !A(e) && (l = document.createElement("div"), l.className = Ue, l.style.cssText = `
+        position: absolute;
+        background-color: #3b97e3;
+        border-width: 2px;
+        border-radius: 9999px;
+        border-color: #fff;
+        box-sizing: content-box;
+        pointer-events: all;
+        max-width: 3rem;
+        max-height: 3rem;
+      `, l.addEventListener("pointerdown", P()), a.appendChild(l)), i.append(a), (r = t.getSpotsEl()) == null || r.appendChild(i);
+  }, v = (r) => (d) => {
+    if (!c) return;
+    k(n, !0), d.stopPropagation(), d.preventDefault(), u.startResize(c, r, d);
+    const m = d.clientX, y = d.clientY;
+    d.target.setPointerCapture(d.pointerId);
+    const h = (T) => {
+      const E = n.Canvas.getZoomMultiplier(), L = (T.clientX - m) * E, D = (T.clientY - y) * E, W = O(r) ? D : L;
+      u.updateResizeByDelta(c, r, W);
+    }, w = () => {
+      k(n, !1), u.finishResize(c), d.target.releasePointerCapture(d.pointerId), document.removeEventListener("pointermove", h), document.removeEventListener("pointerup", w);
+    };
+    document.addEventListener("pointermove", h), document.addEventListener("pointerup", w);
+  }, P = () => (r) => {
+    if (!g) return;
+    const d = g;
+    k(n, !0), r.stopPropagation(), r.preventDefault();
+    const m = F(d, e), y = ee({ componentRow: d, isVertical: m }, e), h = r.clientX, w = r.clientY;
+    r.target.setPointerCapture(r.pointerId);
+    const T = (L) => {
+      const D = n.Canvas.getZoomMultiplier(), W = m ? (L.clientY - w) * D : (L.clientX - h) * D;
+      u.updateGapByDelta(d, W, y, m);
+    }, E = () => {
+      k(n, !1), u.finishGapAdjust(d), r.target.releasePointerCapture(r.pointerId), document.removeEventListener("pointermove", T), document.removeEventListener("pointerup", E);
+    };
+    document.addEventListener("pointermove", T), document.addEventListener("pointerup", E);
+  }, S = (r) => {
+    const d = r.component;
+    if (!d || !i || (c = d, g = d.parent(), !g)) return;
+    const m = g;
+    re(i);
+    const y = r.getStyle();
+    a && Object.assign(a.style, y);
+    const h = F(m, e), w = $e(h);
+    if (Object.values(o).forEach(oe), w.forEach((E) => {
+      if (je(d, E)) return;
+      const L = o[E];
+      re(L);
+    }), G(e).gapHandler.isGapSupported() && l && Ne(d)) {
+      const E = ee({ componentRow: m, isVertical: h }, e);
+      I(E, h, Ve(d));
+    }
+  }, I = (r, d, m = !1) => {
+    const y = e.gapHandleSize, h = l.style;
+    if (d) {
+      h.height = `${y}px`;
+      const w = l.offsetHeight;
+      m ? (h.top = `-${(r + w) / 2}px`, h.bottom = "") : (h.bottom = `-${(r + w) / 2}px`, h.top = ""), h.width = "50%", h.left = "50%", h.transform = "translateX(-50%)", h.cursor = "row-resize";
+    } else {
+      h.width = `${y}px`;
+      const w = l.offsetWidth;
+      m ? (h.left = `-${(r + w) / 2}px`, h.right = "") : (h.right = `-${(r + w) / 2}px`, h.left = ""), h.height = "50%", h.top = "50%", h.transform = "translateY(-50%)", h.cursor = "col-resize";
+    }
+  }, R = () => {
+    i && (oe(i), c = null, g = null);
+  }, z = () => {
+    t.removeSpots({ type: s });
+    const r = n.getSelected(), d = r == null ? void 0 : r.parent();
+    r && d && p.isValidRelationship(d, r) ? t.addSpot({ type: s, component: r }) : R();
+  }, x = () => {
+    const r = t.getSpots().filter((d) => d.type === s)[0];
+    r && S(r);
+  }, b = (r, d) => {
+    p.registerTypeRelationship(r, d);
+  };
+  n.onReady(() => {
+    f(), A(e) ? b("mj-section", "mj-column") : b(e.typeRow, e.typeColumn);
+  });
+  const C = "component:toggled";
+  return n.on(t.events.spot, x), n.on(C, z), () => {
+    n.off(t.events.spot, x), n.off(C, z);
+  };
+}
+const Ke = "flexComponent", Je = function(n, e = {}) {
+  const t = {
+    typeRow: "flex-row",
+    typeColumn: "flex-column",
+    gapHandleSize: 3,
+    snapDivisions: 12,
+    minItemPercent: 5,
+    ...e
+  }, s = [De(n, t), Be(n, t)], i = We(n, t), a = Fe(n, t);
+  Re({
+    editor: n,
+    licenseKey: t.licenseKey,
+    plan: $.startup,
+    pluginName: Ke,
+    cleanup: () => {
+      s.forEach((o) => o == null ? void 0 : o()), i(), a == null || a();
+    }
+  });
+}, Ze = Ie(Je);
+export {
+  Ze as default
+};