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

An opinionated Formio webform builder for Open Forms

import { jsx as t, Fragment as c, jsxs as n } from "react/jsx-runtime";
import { JSONEditor as y } from "@open-formulieren/monaco-json-editor";
import { useFormikContext as F } from "formik";
import { useContext as g, useRef as k, useState as E, useEffect as x } from "react";
import N from "../../components/PreviewModeToggle.js";
import "react-intl";
import { Tabs as w, TabList as L, Tab as V, TabPanel as M } from "../../components/formio/tabs.js";
import "clsx";
import { useErrorChecker as R } from "../../utils/errors.js";
/* empty css                                           */
import "@floating-ui/react";
/* empty css                                     */
import { BuilderContext as f } from "../../context.js";
import "@formio/vanilla-text-mask";
import "formiojs";
import "lodash";
/* empty css                                 */
import "react-select";
import "dompurify";
import "../../components/formio/datagrid.js";
import "../../components/builder/messages.js";
import S from "../../components/builder/key.js";
import z from "../../components/builder/rich-text.js";
import "react-use";
import "../addressNL/edit.js";
import "../validation.js";
/* empty css                        */
import "../bsn/edit.js";
import "../checkbox/edit.js";
import "../children/edit.js";
import "../columns/edit.js";
import "zod";
/* empty css                       */
import "../content/edit.js";
import "../cosignV1/edit.js";
import "../cosignV2/edit.js";
import "../cosignV2/edit-validation.js";
import "../currency/edit.js";
import "../currency/edit-validation.js";
import "../customerProfile/edit.js";
import "../customerProfile/edit-validation.js";
import "../customerProfile/preview.js";
import "../date/edit.js";
import "../date/edit-validation.js";
import "../datetime/edit.js";
import "../datetime/edit-validation.js";
import "../editgrid/edit.js";
/* empty css                                                          */
import "../email/edit.js";
import "../email/edit-validation.js";
/* empty css                     */
import "../fieldset/edit.js";
import "../file/edit.js";
import "../file/edit-validation.js";
import "../iban/edit.js";
import "../iban/edit-validation.js";
import "../licenseplate/edit.js";
import "../licenseplate/edit-validation.js";
import "proj4leaflet";
import "../map/edit.js";
import "@open-formulieren/leaflet-tools/lib/tiles.js";
import "@open-formulieren/leaflet-tools";
import "react-leaflet";
import "react-leaflet-draw";
/* empty css                   */
import "../npFamilyMembers/edit.js";
import "../number/edit.js";
import "../number/edit-validation.js";
import "../partners/edit.js";
import "../phonenumber/edit.js";
import "../postcode/edit.js";
import "../postcode/edit-validation.js";
import "../radio/edit.js";
import "../select/edit.js";
import "../selectboxes/edit.js";
import "../signature/edit.js";
import "react-signature-canvas";
import "../textarea/edit.js";
import "../textarea/edit-validation.js";
import "../textfield/edit.js";
import "../time/edit.js";
import "../../components/builder/prefill/identifierRole.js";
import "../../components/builder/i18n.js";
import "../../components/builder/tabs.js";
import "../../components/builder/values/values-src.js";
/* empty css                                              */
const K = () => {
  const {
    uniquifyKey: o,
    supportedLanguageCodes: i,
    theme: r
  } = g(f), m = k(!1), {
    values: e,
    setFieldValue: a,
    setValues: b
  } = F(), j = o(e.key), [s, T] = E("rich"), l = i[0] ?? "nl";
  x(() => {
    var d, u, h;
    const p = (h = (u = (d = e.openForms) == null ? void 0 : d.translations) == null ? void 0 : u[l]) == null ? void 0 : h.html;
    p === void 0 && e.html ? a(`openForms.translations.${l}.html`, e.html) : e.html !== p && a("html", p);
  });
  const {
    html: A,
    ...C
  } = e;
  return /* @__PURE__ */ t(c, { children: /* @__PURE__ */ n("div", { className: "card panel preview-panel", children: [
    /* @__PURE__ */ t("div", { className: "card-header d-flex justify-content-end", children: /* @__PURE__ */ t(N, { previewMode: s, setPreviewMode: T }) }),
    /* @__PURE__ */ t("div", { className: "card-body", children: s === "JSON" ? /* @__PURE__ */ t(y, { height: "45vh", value: C, onChange: b, theme: r }) : /* @__PURE__ */ n(c, { children: [
      /* @__PURE__ */ t(P, {}),
      /* @__PURE__ */ t(S, { isManuallySetRef: m, generatedValue: j })
    ] }) })
  ] }) });
}, v = `
  <p>
    <strong>Je hebt niet alle velden ingevuld</strong>
    <br>
    Het lijkt erop dat niet alle verplichte velden ingevuld zijn. Als je deze velden
    niet van een antwoord voorziet, dan kan je aanvraag mogelijk niet worden behandeld.
    En, als gevolg daarvan, krijg je ook de eventuele kosten die je hebt betaald voor
    de aanvraag niet terug. Zorg er dus voor dat je alle verplichte velden invult.
  </p>
  <p>Dit zijn de velden die nog geen antwoord hebben:</p>

  {{ missingFields }}

  <p>Wil je doorgaan met de aanvraag?</p>
`;
K.defaultValues = {
  // Display tab
  html: v,
  key: "",
  openForms: {
    translations: {
      nl: {
        html: v
      },
      en: {
        html: ""
      }
    }
  }
};
const P = () => {
  const {
    supportedLanguageCodes: o
  } = g(f), {
    hasAnyError: i
  } = R();
  return /* @__PURE__ */ n(w, { children: [
    /* @__PURE__ */ t(L, { children: o.map((r) => /* @__PURE__ */ t(V, { hasErrors: i(`openForms.translations.${r}`), children: r.toUpperCase() }, r)) }),
    o.map((r, m) => /* @__PURE__ */ t(M, { children: /* @__PURE__ */ t(z, { name: `openForms.translations.${r}.html`, required: m === 0 }) }, r))
  ] });
};
export {
  K as default
};