@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
314 lines (313 loc) • 11 kB
JavaScript
import { jsxs as s, jsx as e, Fragment as v } from "react/jsx-runtime";
import { Tabs as M, TabList as C, TabPanel as l, Tab as E } from "../../components/formio/tabs.js";
import "clsx";
import { useErrorChecker as D } from "../../utils/errors.js";
/* empty css */
import "@floating-ui/react";
import { useContext as m } from "react";
/* empty css */
import { TextFieldMultiple as h } from "../../components/formio/textfield.js";
import T from "../../components/formio/checkbox.js";
import "../../components/formio/datefield.js";
import "../../components/formio/datetimefield.js";
import "../../components/formio/timefield.js";
import y from "../../components/formio/panel.js";
import F from "../../components/formio/select.js";
import { useIntl as d, FormattedMessage as a, defineMessage as x } from "react-intl";
import "formik";
import "dompurify";
import "../../components/formio/textarea.js";
import "../../components/formio/datagrid.js";
import { DataMap as L } from "../../components/formio/datamap.js";
/* empty css */
import S from "../../components/builder/label.js";
import w from "../../components/builder/description.js";
import I from "../../components/builder/tooltip.js";
import { BuilderContext as u } from "../../context.js";
import { LABELS as c } from "../../components/builder/messages.js";
import V, { useDeriveComponentKey as A } from "../../components/builder/key.js";
import k from "../../components/builder/hidden.js";
import P from "../../components/builder/clear-on-hide.js";
import R from "../../components/builder/is-sensitive-data.js";
import H from "../../components/builder/presentation-config.js";
import "./index.js";
import "../bsn/index.js";
import "../checkbox/index.js";
import "../children/index.js";
import "../columns/index.js";
import "../content/index.js";
import "../cosignV1/index.js";
import "../cosignV2/index.js";
import "../currency/index.js";
import "../customerProfile/index.js";
import "../date/index.js";
import "../datetime/index.js";
import "../editgrid/index.js";
import "../email/index.js";
import "../fieldset/index.js";
import "../file/index.js";
import "../iban/index.js";
import "../licenseplate/index.js";
import "../map/index.js";
import "../npFamilyMembers/index.js";
import "../number/index.js";
import "../partners/index.js";
import "../phonenumber/index.js";
import "../postcode/index.js";
import "../radio/index.js";
import "../select/index.js";
import "../selectboxes/index.js";
import "../signature/index.js";
import "../softRequiredErrors/index.js";
import "../textarea/index.js";
import "../textfield/index.js";
import "../time/index.js";
import "@ckeditor/ckeditor5-react";
import "../../components/CKEditor.js";
/* empty css */
import K from "../../components/builder/simple-conditional.js";
import O from "../../components/builder/validate/required.js";
import W from "../../components/builder/validate/validator-select.js";
import q, { useManageValidatorsTranslations as g } from "../../components/builder/validate/i18n.js";
import $ from "../../components/builder/registration/registration-attribute.js";
import "react-use";
import "../../components/builder/prefill/identifierRole.js";
import { ComponentTranslations as B } from "../../components/builder/i18n.js";
import { Basic as j, Advanced as G, Validation as N, Registration as Q, Translations as U } from "../../components/builder/tabs.js";
import "@open-formulieren/monaco-json-editor";
import "../../components/builder/values/values-src.js";
import "lodash";
/* empty css */
const b = ({
prefix: t,
component: o,
label: i,
tooltip: r,
placeholder: f
}) => {
const {
supportedLanguageCodes: p
} = m(u);
return /* @__PURE__ */ s(v, { children: [
/* @__PURE__ */ e(h, { name: `${t}.${o}.validate.pattern`, label: i, tooltip: r, placeholder: f }),
/* @__PURE__ */ s(M, { children: [
/* @__PURE__ */ e(C, { children: p.map((n) => /* @__PURE__ */ e(E, { children: n.toUpperCase() }, n)) }),
p.map((n) => /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(L, { name: `${t}.${o}.translatedErrors.${n}`, keyLabel: /* @__PURE__ */ e(a, { id: "OlPsaw", defaultMessage: [{
type: 0,
value: "Error code"
}] }), ariaLabelMessage: x({
id: "hEVgKd",
defaultMessage: [{
type: 0,
value: 'Error message for "'
}, {
type: 1,
value: "key"
}, {
type: 0,
value: '"'
}]
}), valueComponent: /* @__PURE__ */ e(h, { name: "message", label: /* @__PURE__ */ e(a, { id: "k9tAyW", defaultMessage: [{
type: 0,
value: "Error message"
}] }) }) }) }, n))
] })
] });
}, Y = () => {
const t = d(), {
formType: o
} = m(u), i = t.formatMessage({
id: "2sbkGI",
defaultMessage: [{
type: 0,
value: "When enabled, the street name and city are derived from the entered postcode and house number."
}]
});
return o === "appointment" ? null : /* @__PURE__ */ e(T, { name: "deriveAddress", label: /* @__PURE__ */ e(a, { id: "toTZ0C", defaultMessage: [{
type: 0,
value: "Derive address"
}] }), tooltip: i });
}, Z = () => {
const t = d(), {
formType: o
} = m(u), i = t.formatMessage({
id: "GsAN0n",
defaultMessage: [{
type: 0,
value: "Single column"
}]
}), r = t.formatMessage({
id: "T2dCIS",
defaultMessage: [{
type: 0,
value: "Double column"
}]
});
return o === "appointment" ? null : /* @__PURE__ */ e(F, { name: "layout", label: /* @__PURE__ */ e(a, { id: "Tw9+0D", defaultMessage: [{
type: 0,
value: "Layout"
}] }), options: [{
value: "singleColumn",
label: i
}, {
value: "doubleColumn",
label: r
}], isClearable: !0 });
}, J = () => {
const t = d(), [o, i] = A(), {
hasAnyError: r
} = D(), {
formType: f
} = m(u), p = f === "appointment";
return g(["required"]), g(["pattern"], "openForms.components.postcode"), g(["pattern"], "openForms.components.city"), /* @__PURE__ */ s(M, { children: [
/* @__PURE__ */ s(C, { children: [
/* @__PURE__ */ e(j, { hasErrors: r("label", "key", "description", "tooltip", "hidden", "clearOnHide", "isSensitiveData", "showInSummary", "showInEmail", "showInPDF") }),
/* @__PURE__ */ e(G, { hasErrors: r("conditional") }),
/* @__PURE__ */ e(N, { hasErrors: r("validate") }),
/* @__PURE__ */ e(Q, { hasErrors: r("registration") }),
/* @__PURE__ */ e(U, { hasErrors: r("openForms.translations") })
] }),
/* @__PURE__ */ s(l, { children: [
/* @__PURE__ */ e(S, {}),
/* @__PURE__ */ e(V, { isManuallySetRef: o, generatedValue: i }),
/* @__PURE__ */ e(w, {}),
/* @__PURE__ */ e(I, {}),
/* @__PURE__ */ e(H, {}),
/* @__PURE__ */ e(Z, {}),
/* @__PURE__ */ e(Y, {}),
/* @__PURE__ */ e(k, {}),
/* @__PURE__ */ e(P, {}),
/* @__PURE__ */ e(R, {}),
/* @__PURE__ */ e(X, {})
] }),
/* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(K, {}) }),
/* @__PURE__ */ s(l, { children: [
/* @__PURE__ */ e(O, {}),
/* @__PURE__ */ e(W, {}),
/* @__PURE__ */ e(q, {}),
!p && /* @__PURE__ */ s(v, { children: [
/* @__PURE__ */ e(y, { title: /* @__PURE__ */ e(a, { id: "rW1edF", defaultMessage: [{
type: 0,
value: "Postcode"
}] }), tooltip: t.formatMessage({
id: "0FD2pY",
defaultMessage: [{
type: 0,
value: "Validation for the postcode field"
}]
}), collapsible: !0, initialCollapsed: !0, children: /* @__PURE__ */ e(b, { prefix: "openForms.components", component: "postcode", label: /* @__PURE__ */ e(a, { id: "4DrI94", defaultMessage: [{
type: 0,
value: "Regular expression for postcode"
}] }), tooltip: t.formatMessage({
id: "WxwqZJ",
defaultMessage: [{
type: 0,
value: "The regular expression pattern test that the postcode field value must pass before the form can be submitted."
}]
}), placeholder: t.formatMessage({
id: "dD9O3Q",
defaultMessage: [{
type: 0,
value: "Regular expression for postcode"
}]
}) }) }),
/* @__PURE__ */ e(y, { title: /* @__PURE__ */ e(a, { id: "fhVFUY", defaultMessage: [{
type: 0,
value: "City"
}] }), tooltip: t.formatMessage({
id: "mck25o",
defaultMessage: [{
type: 0,
value: "Validation for the city field"
}]
}), collapsible: !0, initialCollapsed: !0, children: /* @__PURE__ */ e(b, { prefix: "openForms.components", component: "city", label: /* @__PURE__ */ e(a, { id: "swKpQE", defaultMessage: [{
type: 0,
value: "Regular expression for city"
}] }), tooltip: t.formatMessage({
id: "osl4X2",
defaultMessage: [{
type: 0,
value: "The regular expression pattern test that the city field value must pass before the form can be submitted."
}]
}), placeholder: t.formatMessage({
id: "0D+m56",
defaultMessage: [{
type: 0,
value: "Regular expression for city"
}]
}) }) })
] })
] }),
/* @__PURE__ */ e(l, { children: /* @__PURE__ */ e($, {}) }),
/* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(B, { propertyLabels: {
label: t.formatMessage(c.label),
description: t.formatMessage(c.description),
tooltip: t.formatMessage(c.tooltip)
} }) })
] });
};
J.defaultValues = {
// basic tab
label: "",
key: "",
description: "",
tooltip: "",
showInSummary: !0,
showInEmail: !1,
showInPDF: !0,
hidden: !1,
clearOnHide: !0,
hideLabel: !1,
isSensitiveData: !0,
deriveAddress: !1,
layout: "doubleColumn",
// Advanced tab
conditional: {
show: void 0,
when: "",
eq: ""
},
// Validation tab
validate: {
required: !1,
plugins: []
},
translatedErrors: {},
registration: {
attribute: ""
},
openForms: {
translations: {},
components: {
postcode: {
validate: {
pattern: ""
},
translatedErrors: {}
},
city: {
validate: {
pattern: ""
},
translatedErrors: {}
}
}
}
};
const X = () => {
const o = d().formatMessage({
id: "9dLBrj",
defaultMessage: [{
type: 0,
value: "Do not display the configured label and top line as the header in the container fieldset."
}]
});
return /* @__PURE__ */ e(T, { name: "hideLabel", label: /* @__PURE__ */ e(a, { id: "dWWO3N", defaultMessage: [{
type: 0,
value: "Hide label"
}] }), tooltip: o });
};
export {
b as SubcomponentValidation,
J as default
};