import { X as k, dh as O, bI as I, eV as A, w as l, dc as j, aA as N, Z as b, eW as U, eX as F, az as _, U as J, F as s, a6 as p, G as L, a7 as u, a8 as g, Y as a, af as C, bJ as X, a9 as Y, bN as R, aa as Z, ab as q, s as K, O as S, ad as m, dj as Q, bW as ee, dl as te, dm as $, dn as oe, dp as ae, dq as x, _ as H, cC as ne, x as re, eY as ie, eZ as se, dr as le, dt as ce, du as ue, dv as M } from "./603b75d9.js";
import { useContext as v } from "react";
import "react-dom";
const de = k(ie)`
  ${(e) => e.$animationStyle}
  height: 100%;
  border-radius: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.radius;
}};
  border-width: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.borderWidth;
}};
  border-color: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.border;
}};
  border-style: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.borderStyle;
}};
  padding: ${(e) => e.$style.padding};
  rotate: ${(e) => e.$style.rotation}
  overflow: ${(e) => e.$showScrollbar ? "auto" : "hidden"};
   ::-webkit-scrollbar {
    display: ${(e) => e.$showScrollbar ? "block" : "none"};
    }
  ${(e) => O(e.$style)}
`, pe = k(se)`
  display: flex;
  flex-direction: column;
  flex-basis: ${(e) => e.$minWidth};
  max-width: ${(e) => e.$minWidth};

  > div {
    height: ${(e) => e.$matchColumnsHeight ? "100%" : "auto"};
    border-radius: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.radius;
}};
    border-width: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.borderWidth;
}}px;
    border-color: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.border;
}};
    border-style: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.borderStyle;
}};
    margin: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.margin;
}};
    padding: ${(e) => {
  var t;
  return (t = e.$style) == null ? void 0 : t.padding;
}};
    ${(e) => e.$style && O(e.$style)}
  }
`, me = {
  disabled: I,
  columns: A,
  containers: l(K(le), {
    0: {
      view: {},
      layout: {}
    },
    1: {
      view: {},
      layout: {}
    }
  }),
  horizontalGridCells: j,
  autoHeight: N,
  rowBreak: l(S, !1),
  matchColumnsHeight: l(S, !0),
  style: b(U, "style"),
  columnStyle: b(F, "columnStyle"),
  mainScrollbar: l(S, !1),
  animationStyle: b(_, "animationStyle"),
  columnPerRowLG: l(m, 4),
  columnPerRowMD: l(m, 2),
  columnPerRowSM: l(m, 1),
  verticalSpacing: l(m, 8),
  horizontalSpacing: l(m, 8)
}, ye = (e) => /* @__PURE__ */ s(ce, {
  ...e,
  emptyRows: 15,
  hintPlaceholder: ue,
  radius: e.style.radius,
  style: e.style
}), he = (e) => {
  let {
    columns: t,
    containers: r,
    dispatch: i,
    rowBreak: n,
    matchColumnsHeight: d,
    style: o,
    columnStyle: T,
    columnPerRowLG: V,
    columnPerRowMD: f,
    columnPerRowSM: y,
    verticalSpacing: B,
    horizontalSpacing: G,
    animationStyle: W,
    horizontalGridCells: z,
    mainScrollbar: D,
    autoHeight: be
  } = e;
  return /* @__PURE__ */ s(Q.Provider, {
    value: e.style.background,
    children: /* @__PURE__ */ s(ee.Provider, {
      value: e.disabled,
      children: /* @__PURE__ */ s("div", {
        style: {
          padding: o.margin,
          height: "100%"
        },
        children: /* @__PURE__ */ s(de, {
          $style: o,
          $animationStyle: W,
          $showScrollbar: D,
          wrap: n,
          gutter: [G, B],
          children: t.map((P) => {
            const h = String(P.id), E = M(M(i, "containers"), h);
            if (!r[h])
              return null;
            const w = r[h].children, c = t.length;
            return /* @__PURE__ */ s(pe, {
              lg: 24 / (c < V ? c : V),
              md: 24 / (c < f ? c : f),
              sm: 24 / (c < y ? c : y),
              xs: 24 / (c < y ? c : y),
              $style: e.columnStyle,
              $minWidth: P.minWidth,
              $matchColumnsHeight: d,
              children: /* @__PURE__ */ s(ye, {
                layout: w.layout.getView(),
                items: te(w.items.getView()),
                positionParams: w.positionParams.getView(),
                dispatch: E,
                autoHeight: e.autoHeight,
                horizontalGridCells: z,
                style: T
              })
            }, h);
          })
        })
      })
    })
  });
}, ge = function() {
  return new J(me, (e, t) => /* @__PURE__ */ s(he, {
    ...e,
    dispatch: t
  })).setPropertyViewFn((e) => /* @__PURE__ */ p(L, {
    children: [/* @__PURE__ */ s(u, {
      name: g.basic,
      children: e.columns.propertyView({
        title: a("responsiveLayout.column"),
        newOptionLabel: "Column"
      })
    }), (v(C).editorModeStatus === "logic" || v(C).editorModeStatus === "both") && /* @__PURE__ */ p(u, {
      name: g.interaction,
      children: [X(e), Y(e)]
    }), ["layout", "both"].includes(v(C).editorModeStatus) && /* @__PURE__ */ p(L, {
      children: [/* @__PURE__ */ p(u, {
        name: g.layout,
        children: [e.autoHeight.getPropertyView(), !e.autoHeight.getView() && e.mainScrollbar.propertyView({
          label: a("prop.mainScrollbar")
        }), e.horizontalGridCells.propertyView({
          label: a("prop.horizontalGridCells")
        })]
      }), /* @__PURE__ */ p(u, {
        name: a("responsiveLayout.rowLayout"),
        children: [e.rowBreak.propertyView({
          label: a("responsiveLayout.rowBreak")
        }), R({}, /* @__PURE__ */ s("div", {
          style: {
            marginTop: "8px"
          },
          children: a("responsiveLayout.columnsPerRow")
        })), e.columnPerRowLG.propertyView({
          label: a("responsiveLayout.desktop")
        }), e.columnPerRowMD.propertyView({
          label: a("responsiveLayout.tablet")
        }), e.columnPerRowSM.propertyView({
          label: a("responsiveLayout.mobile")
        })]
      }), /* @__PURE__ */ p(u, {
        name: a("responsiveLayout.columnsLayout"),
        children: [e.matchColumnsHeight.propertyView({
          label: a("responsiveLayout.matchColumnsHeight")
        }), R({}, /* @__PURE__ */ s("div", {
          style: {
            marginTop: "8px"
          },
          children: a("responsiveLayout.columnsSpacing")
        })), e.horizontalSpacing.propertyView({
          label: a("responsiveLayout.horizontal")
        }), e.verticalSpacing.propertyView({
          label: a("responsiveLayout.vertical")
        })]
      }), /* @__PURE__ */ s(u, {
        name: a("responsiveLayout.rowStyle"),
        children: e.style.getPropertyView()
      }), /* @__PURE__ */ s(u, {
        name: a("responsiveLayout.columnStyle"),
        children: e.columnStyle.getPropertyView()
      }), /* @__PURE__ */ s(u, {
        name: g.animationStyle,
        hasTooltip: !0,
        children: e.animationStyle.getPropertyView()
      })]
    })]
  })).build();
}();
class we extends ge {
  syncContainers() {
    const t = this.children.columns.getView(), r = new Set(t.map((o) => String(o.id)));
    let i = this.children.containers.getView();
    const n = [];
    Object.keys(i).forEach((o) => {
      r.has(o) || n.push($("containers", $(o, oe())));
    }), r.forEach((o) => {
      i.hasOwnProperty(o) || n.push($("containers", ae(o, {
        layout: {},
        items: {}
      })));
    });
    let d = this;
    return n.forEach((o) => {
      d = d.reduce(o);
    }), d;
  }
  reduce(t) {
    const r = this.children.columns.getView();
    if (t.type === x.CUSTOM) {
      const n = t.value;
      if (n.type === "push") {
        const o = n.value;
        H.isEmpty(o.key) && (o.key = o.label), t = {
          ...t,
          value: {
            ...n,
            value: {
              ...o
            }
          }
        };
      }
      const {
        path: d
      } = t;
      if (n.type === "delete" && d[0] === "columns" && r.length <= 1)
        return ne.warning(a("responsiveLayout.atLeastOneColumnError")), this;
    }
    let i = super.reduce(t);
    return t.type === x.UPDATE_NODES_V2 && (i = i.syncContainers()), i;
  }
  realSimpleContainer(t) {
    return Object.values(this.children.containers.children).find((r) => r.realSimpleContainer(t));
  }
  getCompTree() {
    const t = this.children.containers.getView(), r = Object.values(t).map((i) => i.getCompTree());
    return re(r);
  }
  findContainer(t) {
    const r = this.children.containers.getView();
    for (const i of Object.values(r)) {
      const n = i.findContainer(t);
      if (n)
        return n === i ? this : n;
    }
  }
  getPasteValue(t) {
    const r = this.children.containers.getView(), i = H.mapValues(r, (n) => n.getPasteValue(t));
    return {
      ...this.toJsonValue(),
      containers: i
    };
  }
  autoHeight() {
    return this.children.autoHeight.getView();
  }
}
const ve = Z(we, [q]);
export {
  ge as ResponsiveLayoutBaseComp,
  ve as ResponsiveLayoutComp
};
