import { X as G, dh as H, bI as I, eV as k, w as d, dc as R, aA as j, Z as v, fY as A, eX as B, U as W, F as s, a6 as u, G as w, a7 as c, a8 as p, Y as i, af as m, bJ as z, a9 as N, bN as U, aa as F, ab as _, s as J, O as f, S as g, dj as S, bW as X, dk as Y, dl as Z, dm as $, dn as q, dp as K, dq as V, _ as L, cC as Q, x as ee, eZ as te, dr as oe, dt as ae, du as ne, dv as P } from "./603b75d9.js";
import { useContext as y } from "react";
import "react-dom";
const re = G.div`
  display: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.display;
}};
  grid-template-columns: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.gridTemplateColumns;
}};
  grid-template-rows: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.gridTemplateRows;
}};
  column-gap: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.columnGap;
}};
  row-gap: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.rowGap;
}};

  border-radius: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.radius;
}};
  border-width: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.borderWidth;
}};
  border-color: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.border;
}};
  border-style: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.borderStyle;
}};
  margin: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.margin;
}};
  padding: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.padding;
}};
  ${(t) => t.$style && H(t.$style)}
`, ie = G(te)`
  > div {
    height: ${(t) => {
  var e, o;
  return t.$matchColumnsHeight ? `calc(100% - ${((e = t.$style) == null ? void 0 : e.padding) || 0} - ${((o = t.$style) == null ? void 0 : o.padding) || 0})` : "auto";
}};
    border-radius: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.radius;
}};
    border-width: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.borderWidth;
}};
    border-color: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.border;
}};
    border-style: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.borderStyle;
}};
    margin: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.margin;
}};
    padding: ${(t) => {
  var e;
  return (e = t.$style) == null ? void 0 : e.padding;
}};
    ${(t) => t.$style && H(t.$style)}
  }
`, se = {
  disabled: I,
  columns: k,
  containers: d(J(oe), {
    0: {
      view: {},
      layout: {}
    },
    1: {
      view: {},
      layout: {}
    }
  }),
  horizontalGridCells: R,
  autoHeight: j,
  matchColumnsHeight: d(f, !0),
  templateRows: d(g, "1fr"),
  rowGap: d(g, "20px"),
  templateColumns: d(g, "1fr 1fr"),
  mainScrollbar: d(f, !1),
  columnGap: d(g, "20px"),
  style: v(A, "style"),
  columnStyle: v(B, "columnStyle")
}, le = (t) => /* @__PURE__ */ s(ae, {
  ...t,
  emptyRows: 15,
  hintPlaceholder: ne,
  radius: "0",
  style: t.style,
  enableGridLines: !1
}), de = (t) => {
  let {
    columns: e,
    containers: o,
    dispatch: r,
    matchColumnsHeight: a,
    templateRows: l,
    rowGap: n,
    templateColumns: T,
    columnGap: x,
    columnStyle: M,
    horizontalGridCells: O,
    mainScrollbar: D
  } = t;
  return /* @__PURE__ */ s(S.Provider, {
    value: t.style.background,
    children: /* @__PURE__ */ s(X.Provider, {
      value: t.disabled,
      children: /* @__PURE__ */ s("div", {
        style: {
          height: "inherit",
          overflow: "auto"
        },
        children: /* @__PURE__ */ s(Y, {
          style: {
            margin: "0px",
            padding: "0px"
          },
          overflow: "scroll",
          hideScrollbar: !D,
          children: /* @__PURE__ */ s(re, {
            $style: {
              ...t.style,
              display: "grid",
              gridTemplateColumns: T,
              columnGap: x,
              gridTemplateRows: l,
              rowGap: n
            },
            children: e.map((b) => {
              const h = String(b.id), E = P(P(r, "containers"), h);
              if (!o[h])
                return null;
              const C = o[h].children;
              return e.length, /* @__PURE__ */ s(S.Provider, {
                value: t.columnStyle.background,
                children: /* @__PURE__ */ s(ie, {
                  $style: t.columnStyle,
                  $minWidth: b.minWidth,
                  $matchColumnsHeight: a,
                  children: /* @__PURE__ */ s(le, {
                    layout: C.layout.getView(),
                    items: Z(C.items.getView()),
                    horizontalGridCells: O,
                    positionParams: C.positionParams.getView(),
                    dispatch: E,
                    autoHeight: t.autoHeight,
                    style: M
                  })
                }, h)
              });
            })
          })
        })
      })
    })
  });
}, ue = function() {
  return new W(se, (t, e) => /* @__PURE__ */ s(de, {
    ...t,
    dispatch: e
  })).setPropertyViewFn((t) => /* @__PURE__ */ u(w, {
    children: [/* @__PURE__ */ s(c, {
      name: p.basic,
      children: t.columns.propertyView({
        title: i("responsiveLayout.column"),
        newOptionLabel: i("responsiveLayout.addColumn")
      })
    }), (y(m).editorModeStatus === "logic" || y(m).editorModeStatus === "both") && /* @__PURE__ */ u(c, {
      name: p.interaction,
      children: [z(t), N(t)]
    }), ["layout", "both"].includes(y(m).editorModeStatus) && /* @__PURE__ */ u(w, {
      children: [/* @__PURE__ */ u(c, {
        name: p.layout,
        children: [t.autoHeight.getPropertyView(), !t.autoHeight.getView() && t.mainScrollbar.propertyView({
          label: i("prop.mainScrollbar")
        }), t.horizontalGridCells.propertyView({
          label: i("prop.horizontalGridCells")
        })]
      }), /* @__PURE__ */ u(c, {
        name: i("responsiveLayout.columnsLayout"),
        children: [t.matchColumnsHeight.propertyView({
          label: i("responsiveLayout.matchColumnsHeight")
        }), U({}, /* @__PURE__ */ s("div", {
          style: {
            marginTop: "8px"
          },
          children: i("responsiveLayout.columnsSpacing")
        })), t.templateColumns.propertyView({
          label: i("responsiveLayout.columnDefinition"),
          tooltip: i("responsiveLayout.columnsDefinitionTooltip")
        }), t.templateRows.propertyView({
          label: i("responsiveLayout.rowDefinition"),
          tooltip: i("responsiveLayout.rowsDefinitionTooltip")
        }), t.columnGap.propertyView({
          label: i("responsiveLayout.columnGap")
        }), t.rowGap.propertyView({
          label: i("responsiveLayout.rowGap")
        })]
      })]
    }), (y(m).editorModeStatus === "layout" || y(m).editorModeStatus === "both") && /* @__PURE__ */ u(w, {
      children: [/* @__PURE__ */ s(c, {
        name: p.style,
        children: t.style.getPropertyView()
      }), /* @__PURE__ */ s(c, {
        name: p.columnStyle,
        children: t.columnStyle.getPropertyView()
      })]
    })]
  })).build();
}();
class ce extends ue {
  syncContainers() {
    const e = this.children.columns.getView(), o = new Set(e.map((n) => String(n.id)));
    let r = this.children.containers.getView();
    const a = [];
    Object.keys(r).forEach((n) => {
      o.has(n) || a.push($("containers", $(n, q())));
    }), o.forEach((n) => {
      r.hasOwnProperty(n) || a.push($("containers", K(n, {
        layout: {},
        items: {}
      })));
    });
    let l = this;
    return a.forEach((n) => {
      l = l.reduce(n);
    }), l;
  }
  reduce(e) {
    const o = this.children.columns.getView();
    if (e.type === V.CUSTOM) {
      const a = e.value;
      if (a.type === "push") {
        const n = a.value;
        L.isEmpty(n.key) && (n.key = n.label), e = {
          ...e,
          value: {
            ...a,
            value: {
              ...n
            }
          }
        };
      }
      const {
        path: l
      } = e;
      if (a.type === "delete" && l[0] === "columns" && o.length <= 1)
        return Q.warning(i("responsiveLayout.atLeastOneColumnError")), this;
    }
    let r = super.reduce(e);
    return e.type === V.UPDATE_NODES_V2 && (r = r.syncContainers()), r;
  }
  realSimpleContainer(e) {
    return Object.values(this.children.containers.children).find((o) => o.realSimpleContainer(e));
  }
  getCompTree() {
    const e = this.children.containers.getView(), o = Object.values(e).map((r) => r.getCompTree());
    return ee(o);
  }
  findContainer(e) {
    const o = this.children.containers.getView();
    for (const r of Object.values(o)) {
      const a = r.findContainer(e);
      if (a)
        return a === r ? this : a;
    }
  }
  getPasteValue(e) {
    const o = this.children.containers.getView(), r = L.mapValues(o, (a) => a.getPasteValue(e));
    return {
      ...this.toJsonValue(),
      containers: r
    };
  }
  autoHeight() {
    return this.children.autoHeight.getView();
  }
}
const he = F(ce, [_]);
export {
  he as ColumnLayoutComp,
  ue as ResponsiveLayoutBaseComp
};
