@open-formulieren/formio-builder/lib/esm/registry/content/edit.js

An opinionated Formio webform builder for Open Forms

import { jsx as e, Fragment as v, jsxs as a } from "react/jsx-runtime";
import { JSONEditor as I } from "@open-formulieren/monaco-json-editor";
import { useFormikContext as P } from "formik";
import { useContext as y, useRef as k, useState as L, useEffect as N } from "react";
import { defineMessage as l, FormattedMessage as C, useIntl as O } from "react-intl";
import A from "../../components/PreviewModeToggle.js";
import { Tabs as b, TabList as M, Tab as S, TabPanel as m } from "../../components/formio/tabs.js";
import "clsx";
import { useErrorChecker as T } from "../../utils/errors.js";
/* empty css                                           */
import "@floating-ui/react";
/* empty css                                     */
import { BuilderContext as E } from "../../context.js";
import "@formio/vanilla-text-mask";
import "formiojs";
import "lodash";
/* empty css                                 */
import R from "../../components/formio/select.js";
import "dompurify";
import "../../components/formio/datagrid.js";
import "../../components/builder/messages.js";
import j from "../../components/builder/key.js";
import D from "../../components/builder/hidden.js";
import K from "../../components/builder/presentation-config.js";
import q from "../../components/builder/rich-text.js";
import $ from "../../components/builder/simple-conditional.js";
import "react-use";
import "../../components/builder/prefill/identifierRole.js";
import "../../components/builder/i18n.js";
import { Advanced as B } from "../../components/builder/tabs.js";
import "../../components/builder/values/values-src.js";
/* empty css                                              */
const J = () => {
  const {
    uniquifyKey: r,
    supportedLanguageCodes: o,
    theme: t
  } = y(E), i = k(!1), {
    values: s,
    setFieldValue: u,
    setValues: w
  } = P(), F = r(s.key), {
    hasAnyError: d
  } = T(), [p, x] = L("rich"), c = o[0] ?? "nl";
  N(() => {
    var h, f, g;
    const n = (g = (f = (h = s.openForms) == null ? void 0 : h.translations) == null ? void 0 : f[c]) == null ? void 0 : g.html;
    n === void 0 && s.html ? u(`openForms.translations.${c}.html`, s.html) : s.html !== n && u("html", n);
  });
  const {
    html: H,
    ...V
  } = s;
  return /* @__PURE__ */ e(v, { children: /* @__PURE__ */ a("div", { className: "card panel preview-panel", children: [
    /* @__PURE__ */ e("div", { className: "card-header d-flex justify-content-end", children: /* @__PURE__ */ e(A, { previewMode: p, setPreviewMode: x }) }),
    /* @__PURE__ */ e("div", { className: "card-body", children: p === "JSON" ? /* @__PURE__ */ e(I, { height: "45vh", value: V, onChange: w, theme: t }) : /* @__PURE__ */ a(v, { children: [
      /* @__PURE__ */ e(G, {}),
      /* @__PURE__ */ a(b, { children: [
        /* @__PURE__ */ a(M, { children: [
          /* @__PURE__ */ e(S, { hasErrors: d("key", "hidden", "showInSummary", "showInEmail", "showInPDF", "customClass"), children: /* @__PURE__ */ e(C, { id: "d3V6A+", defaultMessage: [{
            type: 0,
            value: "Display"
          }] }) }),
          /* @__PURE__ */ e(B, { hasErrors: d("conditional") })
        ] }),
        /* @__PURE__ */ a(m, { children: [
          /* @__PURE__ */ e(j, { isManuallySetRef: i, generatedValue: F }),
          /* @__PURE__ */ e(D, {}),
          /* @__PURE__ */ e(K, {}),
          /* @__PURE__ */ e(_, {})
        ] }),
        /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e($, {}) })
      ] })
    ] }) })
  ] }) });
};
J.defaultValues = {
  // Display tab
  html: "",
  key: "",
  hidden: !1,
  showInSummary: !1,
  showInEmail: !1,
  showInPDF: !0,
  customClass: "",
  // Advanced tab
  conditional: {
    show: void 0,
    when: "",
    eq: ""
  }
};
const U = [{
  value: "warning",
  label: l({
    id: "axygDt",
    defaultMessage: [{
      type: 0,
      value: "Warning"
    }]
  })
}, {
  value: "info",
  label: l({
    id: "XMV3t2",
    defaultMessage: [{
      type: 0,
      value: "Info"
    }]
  })
}, {
  value: "error",
  label: l({
    id: "uVVO4b",
    defaultMessage: [{
      type: 0,
      value: "Error"
    }]
  })
}, {
  value: "success",
  label: l({
    id: "ifG3sd",
    defaultMessage: [{
      type: 0,
      value: "Success"
    }]
  })
}], _ = () => {
  const r = O(), o = U.map((t) => ({
    value: t.value,
    label: r.formatMessage(t.label)
  }));
  return /* @__PURE__ */ e(R, { name: "customClass", label: /* @__PURE__ */ e(C, { id: "3h215E", defaultMessage: [{
    type: 0,
    value: "CSS class"
  }] }), options: o, valueProperty: "value", isClearable: !0 });
}, G = () => {
  const {
    supportedLanguageCodes: r
  } = y(E), {
    hasAnyError: o
  } = T();
  return /* @__PURE__ */ a(b, { children: [
    /* @__PURE__ */ e(M, { children: r.map((t) => /* @__PURE__ */ e(S, { hasErrors: o(`openForms.translations.${t}`), children: t.toUpperCase() }, t)) }),
    r.map((t, i) => /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(q, { name: `openForms.translations.${t}.html`, required: i === 0, supportsBackendTemplating: !0 }) }, t))
  ] });
};
export {
  J as default
};