@open-formulieren/formio-builder/lib/esm/registry/columns/panel-preview.js

An opinionated Formio webform builder for Open Forms

import { jsxs as m, Fragment as p, jsx as e } from "react/jsx-runtime";
import u from "clsx";
import { useState as d } from "react";
import { FormattedMessage as l } from "react-intl";
import c from "../../components/ModeToggle.js";
const w = ({
  component: i
}) => {
  const [o, r] = d("desktop"), {
    columns: n
  } = i, s = o === "mobile";
  return /* @__PURE__ */ m(p, { children: [
    /* @__PURE__ */ e("div", { className: "d-flex justify-content-end align-items-center", children: /* @__PURE__ */ e(c, { name: "previewViewport", currentMode: o, btnClassName: "btn-light", onToggle: r, modes: [{
      value: "desktop",
      label: /* @__PURE__ */ e(l, { id: "XWsNZ9", defaultMessage: [{
        type: 0,
        value: "Default"
      }] })
    }, {
      value: "mobile",
      label: /* @__PURE__ */ e(l, { id: "hwsnj9", defaultMessage: [{
        type: 0,
        value: "Mobile"
      }] })
    }] }) }),
    /* @__PURE__ */ e("div", { className: u("offb-columns-panel-preview", {
      "offb-columns-panel-preview--mobile": s
    }), children: n.map((t, a) => /* @__PURE__ */ e("div", { className: "offb-columns-panel-preview__column", style: {
      "--_col-preview-span": `${s ? t.sizeMobile : t.size}`
    }, children: /* @__PURE__ */ e(l, { id: "wVYRMC", defaultMessage: [{
      type: 0,
      value: "Column "
    }, {
      type: 1,
      value: "number"
    }], values: {
      number: a + 1
    } }) }, `column-${a}`)) })
  ] });
};
export {
  w as default
};