UNPKG

@react-form-builder/core

Version:

React hook form alternative.

1,752 lines (1,740 loc) 176 kB
var Xr = Object.defineProperty; var Gr = (n, e, t) => e in n ? Xr(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t; var l = (n, e, t) => (Gr(n, typeof e != "symbol" ? e + "" : e, t), t), vt = (n, e, t) => { if (!e.has(n)) throw TypeError("Cannot " + t); }; var p = (n, e, t) => (vt(n, e, "read from private field"), t ? t.call(n) : e.get(n)), v = (n, e, t) => { if (e.has(n)) throw TypeError("Cannot add the same private member more than once"); e instanceof WeakSet ? e.add(n) : e.set(n, t); }, P = (n, e, t, r) => (vt(n, e, "write to private field"), r ? r.call(n, t) : e.set(n, t), t); var E = (n, e, t) => (vt(n, e, "access private method"), t); import { jsx as h, jsxs as be, Fragment as _e } from "@emotion/react/jsx-runtime"; import { css as Ce, cx as De } from "@emotion/css"; import { observer as In } from "mobx-react"; import { assign as G, clone as wt, startCase as Mn, reduce as eo, merge as sn, camelCase as to, isEmpty as $n, isArray as no, isUndefined as jn, isNull as ro, isObject as Rt, upperFirst as oo } from "lodash-es"; import { makeAutoObservable as U, reaction as xt, makeObservable as Kn, observable as z, autorun as Bn, untracked as Wn, runInAction as _n, configure as io } from "mobx"; import * as so from "react"; import { createContext as ao, useContext as Nt, useRef as Hn, useState as He, useEffect as R, useCallback as Ee, useMemo as Y, createElement as Ot, Fragment as lo, useImperativeHandle as co, forwardRef as uo } from "react"; import { CacheProvider as ho } from "@emotion/react"; import an from "@emotion/cache"; import po from "stylis-plugin-rtl"; import { Subject as fo, debounceTime as mo, map as ln, switchMap as go } from "rxjs"; import { FluentResource as Qn, FluentBundle as qn } from "@fluent/bundle"; import { z as $ } from "zod"; const pl = () => (Math.random() * 1e18).toString(36).slice(0, 5).toUpperCase() + ""; function yo(n, e) { return n.reduce((t, r, o, i) => { var s; return (t[s = e(r, o, i)] || (t[s] = [])).push(r), t; }, {}); } var ke; class Q { /** * Creates component metadata for the form viewer. * @param component the React component. * @param name the component name. * @param actionsInitializer the function to initialize actions in the component. * @param valued the name of the component property where the component value is stored. * @param valueType the type of the component value. * @param defaultProps the component's default property values. * @param css the component's CSS values. * @param wrapperCss the component's wrapper CSS values. * @param typeName the component type name. * @param kind the component kind. * @param readOnly the name of the component property that stores the read-only flag. * @param propsBindingTypes the component property binding types. * @param uncontrolledValue the value for the uncontrolled (undefined) state. * @param disabled the name of the component property that stores the disabled flag. * @template T the type of React component properties. */ constructor(e, t, r, o, i, s, a, c, d, u = "component", g, f = {}, C, B) { v(this, ke, void 0); /** * The React component. */ l(this, "component"); this.actionsInitializer = r, this.valued = o, this.valueType = i, this.defaultProps = s, this.css = a, this.wrapperCss = c, this.typeName = d, this.kind = u, this.readOnly = g, this.propsBindingTypes = f, this.uncontrolledValue = C, this.disabled = B, this.component = In(e), this.component.displayName = e.displayName || e.name, P(this, ke, t); } /** * @returns the component name, or type if there is no component name. */ get name() { return p(this, ke) ?? this.type; } /** * @returns the component type name. */ get type() { return this.typeName || this.component.displayName || this.component.name; } } ke = new WeakMap(); var te = /* @__PURE__ */ ((n) => (n.LTR = "ltr", n.RTL = "rtl", n))(te || {}); function vo(n) { return () => { const e = Nt(n); if (!e) throw new Error(`The context ${n.displayName} was not found!`); return e; }; } function wo(n) { return n.Provider; } function ne(n, e = null) { const t = ao(e); t.displayName = n; const r = vo(t), o = wo(t); return [r, o, t]; } const [ /** * **Internal use only.** */ bo, /** * **Internal use only.** */ Co ] = ne("RepeaterPropsContext"), It = (n) => { const { className: e } = bo(); return /* @__PURE__ */ h("div", { className: e, children: n.children }); }; It.displayName = "RepeaterItem"; const Do = new Q(It, "RepeaterItem"), [ /** * @returns the {@link BuilderMode} builder mode value. */ Eo, /** * The BuilderMode context provider. */ fl ] = ne("BuilderModeContext", "viewer"), [ /** * **Internal use only.** */ K, /** * **Internal use only.** */ Mt, /** * **Internal use only.** */ So ] = ne("StoreContext"); class Qe { /** * Creates metadata for a React component property. * @param key the property name. * @param name the human-readable property name. */ constructor(e, t) { /** * The component property key. */ l(this, "key"); /** * The component property name. */ l(this, "name"); /** * The name of the component's property editor. */ l(this, "editor"); /** * The hint for the component property. */ l(this, "hint"); /** * True if the property value can be localized, false otherwise. */ l(this, "localizable", !1); /** * True if the property value is bound to form data, false otherwise. */ l(this, "valued", !1); /** * True if the property value controls a read-only flag, false otherwise. */ l(this, "readOnly", !1); /** * True if the property value controls a disabled flag, false otherwise. */ l(this, "disabled", !1); /** * Additional properties for the component property editor. */ l(this, "editorProps"); /** * The default property value. */ l(this, "default"); /** * The property value for the uncontrolled state. */ l(this, "uncontrolledValue"); /** * The data type for the value of the property. */ l(this, "type"); /** * True if the component property is required, false otherwise. */ l(this, "required", !1); /** * The function for validating the property value. */ l(this, "validator"); /** * Message and/or error code for the validation function. */ l(this, "errorMap"); /** * True if the property value can be a calculated property, false otherwise. */ l(this, "calculable", !0); /** * A function that returns a string containing the source code of the function to bind child components. * @param props the properties of the component, which are available only inside Form Builder Designer. */ l(this, "slotConditionBuilder"); /** * The component property binding type. */ l(this, "bindingType"); this.key = e, this.name = t; } /** * @returns the metadata clone. */ clone() { return Object.create(Object.getPrototypeOf(this), Object.getOwnPropertyDescriptors(this)); } } class Yn extends Qe { constructor() { super(...arguments); /** * The function that checks whether a child component can be inserted into a parent component. */ l(this, "insertPredicate"); } } class Vo extends Qe { } class Po extends Qe { } class Jn extends Qe { constructor() { super(...arguments); /** * Possible values for the property. */ l(this, "data"); } } const ml = (n) => n instanceof Jn; class To extends Qe { } const gl = "HH:mm:ss", Ro = { Property: Jn, Container: Yn, Event: Vo, Module: Po, Style: To }; class zo { constructor() { /** * Type of component property description in the form builder. */ l(this, "annotationType", "Module"); /** * Flag if true, the property name will be automatically converted in the designer from a camel case string to a human-readable string. */ l(this, "autoName", !0); } } class Un { constructor() { /** * Partial metadata for a component property. */ l(this, "annotation"); /** * Options for building an annotation. */ l(this, "options", new zo()); } /** * @returns the main component property that is used as form data and for validation rules. */ get valued() { return this.setup({ valued: !0 }); } /** * Sets the value for the property that prevents uncontrolled state. * @param uncontrolledValue the value for the uncontrolled state. * @returns the modified instance of the builder. */ uncontrolledValue(e) { return this.setup({ uncontrolledValue: e }); } /** * @returns the component property that can be localized. */ get localize() { return this.setup({ localizable: !0 }); } /** * @returns the non-localizable component property. */ get notLocalize() { return this.setup({ localizable: !1 }); } /** * Specifies the name of the component property. * @param name the property name. * @returns the modified instance of the builder. */ named(e) { return this.setup({ name: e }); } /** * Adds the hint to the property name of the component. * @param hint the hint. * @returns the modified instance of the builder. */ hinted(e) { return this.setup({ hint: e }); } /** * Marks the component property as calculable. * @param calculable true if the property is calculable. * @returns the modified instance of the builder. */ calculable(e) { return this.setup({ calculable: e }); } /** * Modifies the component property metadata builder with custom options. * @param options the custom options. * @returns the modified instance of the builder. */ setup(e) { const { annotationType: t, autoName: r, ...o } = e, i = this.clone(); return i.options.annotationType = t ?? i.options.annotationType, i.options.autoName = r ?? i.options.autoName, G(i.annotation, o), i; } /** * Clones the instance of the builder. * @returns the cloned instance of the builder. */ clone() { const e = wt(this); return e.options = wt(this.options), e.annotation = wt(this.annotation), e.annotation ?? (e.annotation = {}), e; } /** * Creates component property metadata for the form builder. * @param key the unique key of the component property. * @returns the instance of the component property metadata for the form builder. */ build(e) { const t = this.getName(e), r = new Ro[this.options.annotationType](e, t); return G(r, this.annotation), r; } /** * Sets custom properties for the component's property editor. * @param props the custom properties * @returns the modified instance of the builder. */ withEditorProps(e) { const t = this.clone(); return G(t.annotation, { editorProps: e }), t; } /** * Hides the component property editor. * @returns the modified instance of the builder. */ hideEditor() { const e = this.clone(); return G(e.annotation, { editor: void 0 }), e; } /** * Returns the annotation name. * @param key the property name * @returns the annotation name. */ getName(e) { return this.annotation.name ?? (this.options.autoName ? Mn(e) : e); } } class $t extends Un { /** * Marks the component property as required. * @returns the modified instance of the builder. */ get required() { return this.setup({ required: !0 }); } /** * Sets the default value for the component property. * @param value the default value. * @returns the modified instance of the builder. */ default(e) { return this.setup({ default: e }); } /** * Modifies the component property metadata builder with validation properties. * @param validator the validation function. * @param errorMap the validation error settings. * @returns the modified instance of the builder. */ validated(e, t) { return this.setup({ validator: e, errorMap: t }); } } class nt extends $t { constructor() { super(...arguments); l(this, "subType"); } /** * Sets the component's value type to an array of strings. * @returns the modified instance of the builder. */ get ofString() { const t = new nt().setup({ ...this.options, ...this.annotation, type: "array", editor: "arrayOfString" }); return t.subType = "string", t; } /** * Sets the component's value type to an array of objects. * @returns the modified instance of the builder. */ get ofObject() { const t = new nt().setup({ ...this.options, ...this.annotation, type: "array" }); return t.subType = "object", t; } } class Zn extends $t { constructor() { super(...arguments); /** * Possible values for the property. */ l(this, "values"); /** * Labels for the possible values of the property. */ l(this, "labels"); } /** * Marks the component property as required. * @returns the modified instance of the builder. */ get required() { return super.required; } /** * Sets the labels for predefined values. * @param labels the labels. * @returns the modified instance of the builder. */ labeled(...t) { const r = this.clone(); return r.labels = t, r; } /** * Creates component property metadata for the form builder. * @param key the unique key of the component property. * @returns the instance of the component property metadata for the form builder. */ build(t) { const r = super.build(t); return r.data = this.values.map((o, i) => { var a; return { label: ((a = this.labels) == null ? void 0 : a[i]) ?? Mn(o.toString()), value: o }; }), r; } /** * Sets the default value for the component property. * @param value the default value, can be an array of values. * @returns the modified instance of the builder. */ default(t) { return this.setup({ default: t }); } } class ko extends Zn { /** * Sets the radio buttons as the component's property editor. * @returns the modified instance of the builder. */ radio() { return this.setup({ editor: "radio" }); } /** * Sets the default value for the component property. * @param value the default value. * @returns the modified instance of the builder. */ default(e) { return super.default(e); } } class Fo extends Zn { /** * Sets the default value for the component property. * @param value the default value. * @returns the modified instance of the builder. */ default(e) { return super.default(e); } } const ct = class ct extends Un { /** * Creates a component property metadata builder. * @param editor the property editor type. * @template T the property type. */ constructor(e) { super(), this.annotation = { editor: e }; } /** * Sets the property as a "array" property. * @returns the instance of the metadata property builder. */ get array() { return new nt().setup({ ...this.options, ...this.annotation, type: "array" }); } /** * Sets the field type for the component property. * @param type the field type. * @returns the instance of the metadata property builder. */ typed(e) { return new $t().setup({ ...this.options, ...this.annotation, type: e }); } /** * Sets the property as a "single select" property. * @param values the possible values for the property. * @returns the instance of the metadata property builder. */ oneOf(...e) { const t = new ko().setup({ ...this.options, ...this.annotation, type: "enum" }); return t.values = e, t; } /** * Sets the property as a "multiple select" property. * @param values the possible values for the property. * @returns the instance of the metadata property builder. */ someOf(...e) { const t = new Fo().setup({ ...this.options, ...this.annotation, type: "enum" }); return t.values = e, t; } }; /** * Creates a component property metadata builder. * @param editor the property editor type. * @template T the property type. * @returns the component property metadata builder. */ l(ct, "create", (e) => new ct(e)); let rt = ct; const yl = (n) => n instanceof Yn, q = rt.create; function A(n) { return q(n).setup({ annotationType: "Property" }); } function Xn(n) { return n.reduce((e, t) => (e[t.key] = t.default, e), {}); } function ge(n) { return { any: { object: Xn(n) } }; } class Lo extends rt { /** * Creates a component property metadata builder. * @param editor the property editor type. * @template T the property type. */ constructor(t) { super(t); /** * The function that checks whether a child component can be inserted into a parent component. */ l(this, "insertPredicate"); } /** * Specifies a function that will create conditions that check if a child component can be bound to a parent slot. * @param slotConditionBuilder the function that returns a string containing the source code of the function to bind child components. * @returns the instance of the metadata property builder. */ withSlotConditionBuilder(t) { return this.setup({ slotConditionBuilder: t }); } /** * @inheritDoc */ build(t) { const r = super.build(t); return r.insertPredicate = this.insertPredicate, r; } /** * Specifies a function that checks whether a child component can be inserted into a parent component. * @param predicate the function that returns a boolean value. * @returns the modified instance of the builder. */ withInsertRestriction(t) { const r = this.clone(); return r.insertPredicate = t, r; } } function Gn(n) { return new Lo(n); } const Ao = (n, e) => e.reduceScreen((t, r) => r.key === n ? t + 1 : t, 0) === 1, vl = q("key").typed("string").required.hinted("Unique component key").calculable(!1).validated(Ao, { code: "unique_key", message: "The key must be unique!" }).build("key"), xo = q("htmlAttributes"), No = q("validation"), qe = A("string").typed("string").localize, wl = A("object").typed("object"), jt = A("boolean").typed("boolean"), er = jt.setup({ readOnly: !0 }), tr = jt.setup({ disabled: !0 }), bl = A("number").typed("number"), Oo = A("size").typed("string"), Cl = A("date").typed("date"), Dl = A("time").typed("time"), Io = A("array").array, El = A("color").typed("string"), Sl = q("tooltipType").typed("string"), ie = q("size").setup({ calculable: !1 }), cn = q("color").setup({ calculable: !1 }), Vl = A("string").calculable(!0).build("className"), dn = q("event").setup({ annotationType: "Event" }), nr = Gn("node").setup({ annotationType: "Container" }), Pl = Gn("nodeArray").setup({ annotationType: "Container", bindingType: "array" }), Je = A("oneOf").oneOf.bind(A("oneOf")), Tl = A("someOf").someOf.bind(A("someOf")), Mo = q("tooltipProps"), $o = q("renderWhen").typed("boolean"), ft = { width: ie.setup({ default: "100%" }), height: ie, marginTop: ie, marginRight: ie, marginBottom: ie, marginLeft: ie, color: cn, backgroundColor: cn }, Kt = { flexDirection: Je("column", "row", "column-reverse", "row-reverse"), gap: Oo, alignItems: Je("start", "center", "baseline", "end", "stretch"), justifyContent: Je( "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "start", "end", "left", "right" ), flexWrap: Je("wrap", "nowrap", "wrap-reverse") }; function Se(n, e = {}) { return eo(n, (t, r, o) => { var i; return t.push(((i = r == null ? void 0 : r.setup(e)) == null ? void 0 : i.build(o)) ?? qe.setup(e).build(o)), t; }, []); } function ye(n) { return Se(n, { annotationType: "Style", calculable: !1 }); } const un = Symbol("key"); function rr(n, e, t, r = {}) { const o = Object.keys(r).map((i) => `${i}=${r[i]}`).join("_"); return `${n}_${e}_${t ? `${t}_` : ""}${o}`; } function or(n, e, t = {}) { return rr("autorun", n, e, t); } function j(n, e = {}) { return rr("observable", n, void 0, e); } let hn = 0; function ir(n) { n[un] || (++hn, n[un] = `actionData_${hn}`); } function sr(n) { var t; const e = n.events; e && Object.values(e).forEach((r) => r.forEach(ir)), (t = n.children) == null || t.forEach(sr); } function Ve(n) { return (n == null ? void 0 : n.computeType) === "function"; } function Bt(n) { return (n == null ? void 0 : n.computeType) === "localization"; } function ar(n) { return Ve(n) || Bt(n); } function ve(n) { return n.dataKey ?? n.key; } class N { /** * Creates the component settings. * @param key the React component key. * @param type the component type of the form viewer. */ constructor(e, t) { /** * The React component key. */ l(this, "key", ""); /** * The component data key. */ l(this, "dataKey"); /** * The component type of the form viewer. */ l(this, "type", ""); /** * The component properties. */ l(this, "props", {}); /** * The component CSS styles. */ l(this, "css"); /** * The component wrapper CSS styles. */ l(this, "wrapperCss"); /** * The set of event handlers. */ l(this, "events"); /** * The array of child components. */ l(this, "children"); /** * The component value validation settings. */ l(this, "schema"); /** * The set of arbitrary HTML attributes added to the component. */ l(this, "htmlAttributes"); /** * The tooltip settings. */ l(this, "tooltipProps"); /** * The name of the occupied component property in the parent component. */ l(this, "slot"); /** * The condition for binding a child element to a parent element. */ l(this, "slotCondition"); /** * The expression or function to conditionally render a component. */ l(this, "renderWhen"); this.key = e, this.type = t, U(this, void 0, { name: j("ComponentStore", { key: e }) }); } /** * Correctly creates the {@link ComponentStore} from deserialized data. * @param value the deserialized data. * @returns the component Store. */ static createFromObject(e) { const t = G(new N(e.key, e.type), e); return sr(t), t; } /** * Adds the event handler for component. * @param store the target {@link ComponentStore}. * @param eventName the target event name. * @param data the {@link ActionData}. */ static addEventHandler(e, t, r) { var o; ir(r), e.events ?? (e.events = {}), (o = e.events)[t] ?? (o[t] = []), e.events[t].push(r); } } function lr(n) { return typeof n == "string"; } function cr(n) { return typeof n == "number"; } function mt(n) { return typeof n == "object" && typeof n.then == "function"; } function dr(n) { return typeof n == "object"; } function k(n, e) { const t = In(e); return t.displayName = n, t; } const Rl = new N("", ""); function Ue(n) { const e = Hn(!1), [t, r] = He(n); R(() => (e.current = !0, () => { e.current = !1; }), []); const o = Ee((i) => { e.current && r(i); }, []); return Y(() => [t, o], [t, o]); } const [ /** * **Internal use only.** */ Z, /** * **Internal use only.** */ ur ] = ne("FormViewerPropsContext"); var D = /* @__PURE__ */ ((n) => (n.DOMAIN = "errDomain", n.END_DATE_STRICT = "errEndDateStrict", n.END_DATE = "errEndDate", n.NO_KEY = "errNoKey", n.PREFIX_MISMATCH = "errPrefixMismatch", n.BROKEN_KEY_SEPARATOR = "errBrokenSeparatorKey", n.BROKEN_KEY_LICENSE_SEPARATOR = "errBrokenLicenseSeparator", n.NOT_VERIFIED = "errNotVerified", n.INVALID = "errLicenseInvalid", n))(D || {}); const pn = /* @__PURE__ */ new Date(1750090023519), fn = ":", mn = "-", jo = `MHYwEAYHKoZIzj0CAQYFK4EEACIDYgAEJDKWHzXT9YZw7WDJy4wr/VMXBf+/afNB ppCLv1zZFVUQEmDRPhGC5nKux3WQcrtfl18iNFfISjcqN5vplR/kcAvIJd07tacn y1l39NGbMLIoPVzPY6GXTNzQpxRbGn99`, Ko = (n, e) => { const r = n.replace(/([.+?^${}()|\[\]\\])/g, "\\$1").replace(/\*/g, ".*"); return new RegExp(`^${r}$`).test(e); }, Bo = (n, e = window.location.hostname) => n.some((t) => t === "*") ? !0 : n.some((t) => Ko(t, e)); function hr(n) { const e = window.atob(n), t = new Uint8Array(e.length); for (let r = 0; r < e.length; r++) t[r] = e.charCodeAt(r); return t; } function Wo(n) { return window.crypto.subtle.importKey( "spki", hr(n), { name: "ECDSA", namedCurve: "P-384" }, !0, ["verify"] ); } const ee = (...n) => { console.info("license check failed, error : ", n.join(` `)); }; async function _o(n, e, t) { if (!window.crypto.subtle) return ee("window.crypto.subtle is not available"), !1; let r = null, o = null; try { r = await Wo(t), o = new TextEncoder().encode(n); } catch (i) { ee(i); return; } return await window.crypto.subtle.verify( { name: "ECDSA", hash: { name: "SHA-384" } }, r, e, o ); } function Ho(n) { const { licenseEndDate: e, restrictions: t } = n, { domains: r, StrictCheck: o } = t, i = e.split("."), s = `${i[2]}-${i[0]}-${i[1]}`, a = new Date(s); if (r && !Bo(r)) return ee(D.DOMAIN, r), [D.DOMAIN, { Domain: Array.isArray(r) ? r.join(", ") : r }]; const d = a > /* @__PURE__ */ new Date(); return o ? (d || ee(D.END_DATE_STRICT, a), d ? null : [D.END_DATE_STRICT, { licenseEndDate: e }]) : pn > a ? (ee(D.END_DATE, a, pn), [D.END_DATE, { licenseEndDate: e }]) : null; } async function Qo(n) { try { let e = n.indexOf(mn); if (e === -1) return D.BROKEN_KEY_LICENSE_SEPARATOR; const t = n.slice(0, e), r = n.slice(e + mn.length); if (e = r.indexOf(fn), e === -1) return D.BROKEN_KEY_SEPARATOR; const o = window.atob(r.slice(0, e)), i = hr(r.slice(e + fn.length)); if (!await _o(o, i, jo)) return D.NOT_VERIFIED; const a = JSON.parse(o), { licenseEndDate: c, companyName: d } = a, u = c.split("."); return t !== d ? (ee(D.PREFIX_MISMATCH), D.PREFIX_MISMATCH) : u.length !== 3 ? (ee(D.INVALID, c), D.INVALID) : a; } catch { return D.INVALID; } } const [ /** * @internal * @ignore */ gt, /** * @internal * @ignore */ qo, /** * @internal * @ignore */ Yo ] = ne("LicenseContext"), gn = { restrictions: { StrictCheck: !1, ftLocaleCount: 1 }, licenseEndDate: "04.26.2130", companyName: "" }, Jo = ({ children: n }) => { const { licenseKey: e } = Z(), { parentStore: t } = K(), [r, o] = Ue({}), [i, s] = Ue(!1), [a, c] = Ue(!0), [d, u] = Ue(null), g = Nt(Yo), f = !!t, C = Ee((V) => { !V || V.length === 0 || !d || o((O) => { const { restrictions: W } = d; if (Object.keys(W).length < 2) return O; const oe = V.filter((w) => typeof (w == null ? void 0 : w.check) > "u" && !W[w.name]), Zr = V.filter((w) => typeof W[w.name] < "u" && typeof (w == null ? void 0 : w.check) == "function"); return oe.forEach((w) => { O[w.name] = { ...w, [w.name]: W[w.name] }; }), Zr.forEach((w) => { var on; (on = w == null ? void 0 : w.check) != null && on.call(w, w, W[w.name]) || (O[w.name] = { ...w, [w.name]: W[w.name] }); }), { ...O }; }); }, [d, o]), B = Y(() => g ?? { valid: a, isNested: f, missing: r, checkLicense: C }, [C, f, g, r, a]); return R(() => { if (i && d) { const V = Ho(d); if (V !== null) { const [O, W] = V; o((oe) => ({ ...oe, [O]: { name: O, ...W } })); } } }, [d, i, o, c]), R(() => { if (!e) { o((V) => ({ ...V, [D.NO_KEY]: { name: D.NO_KEY } })), u(gn); return; } Qo(e).then((V) => { typeof V != "string" ? (u(V), c(!0)) : (u(gn), o((O) => ({ ...O, [D.INVALID]: { name: D.INVALID } })), c(!1), console.info(V)), s(!0); }); }, [e, u, o, s, c]), /* @__PURE__ */ h(qo, { value: B, children: n }); }, Uo = k("LicenseManager", Jo), Zo = (n) => { const e = Eo() === "viewer", r = K().parentStore; return e && !n.children ? null : /* @__PURE__ */ h("div", { className: n.wrapperClassName, children: e || r ? n.children : /* @__PURE__ */ h(It, { children: n.children }) }); }, pr = (n) => { const { checkLicense: e } = gt(); return R(() => { e([{ name: "ftComponentRepeater" }]); }, [e]), /* @__PURE__ */ h(Co, { value: n, children: /* @__PURE__ */ h(Zo, { wrapperClassName: n.wrapperClassName, children: n.children }) }); }; pr.displayName = "Repeater"; const fr = Io.valued.setup({ editor: "arrayOfObject" }), mr = Se({ itemRenderWhen: qe.notLocalize.hinted("The expression or function to conditionally render a repeater item."), value: fr, children: nr }), { flexDirection: gr, gap: yr } = Kt, vr = ye({ display: qe.default("flex").hideEditor(), flexDirection: gr.default("column").named("Item direction").hinted("Item direction"), gap: yr.default("20px").named("Item gap").hinted("Item gap") }), Xo = ge(vr), wr = ye({ display: qe.default("flex").hideEditor(), flexDirection: gr.default("column").hinted("Repeater direction"), gap: yr.default("20px").hinted("Repeater gap") }), Go = ge(wr), ei = mr.filter((n) => typeof n.default < "u").reduce((n, e) => (n[e.key] = e.default, n), {}), ot = new Q( pr, "Repeater", void 0, "value", "array", ei, Xo, Go, "Repeater", "repeater" ), Wt = (async function() { }).constructor; class L { /** * Creates a new instance of the ActionDefinition class. * @param func the function of an action. * @param body the source code of the Action. * @param params the parameters of the Action. */ constructor(e, t, r = {}) { this.func = e, this.body = t, this.params = r; } /** * Creates an action from the function. * @param func the function of an action. * @param params the parameters of the Action. * @returns the new instance of the ActionDefinition class. */ static functionalAction(e, t = {}) { return new L(e, void 0, t); } /** * Creates an action from the source code. * @param body the source code of the Action. * @param params the parameters of the Action. * @returns the new instance of the ActionDefinition class. */ static sourceAction(e, t = {}) { const r = Wt("e, args", e); return new L(r, e, t); } /** * Correctly creates the {@link ActionDefinition} from deserialized data. * @param value the deserialized data. * @returns the ActionDefinition instance. */ static createFromObject(e) { return L.sourceAction(e.body, e.params); } } const ti = (n) => { const e = {}; return n && Object.keys(n).forEach((t) => { const r = n[t]; e[t] = L.createFromObject(r); }), e; }, _t = "onDidMount", Ht = "onWillUnmount"; function bt(n) { return new Proxy(n, { get(e, t) { return t === "toJSON" ? () => e.data : e.data[t]; }, set(e, t, r) { return e.allComponentFields.filter(({ dataKey: o }) => o === t).forEach(({ field: o }) => { o.setValue(r); }), !0; } }); } var Fe, Le, Ae, xe, dt; class Qt { /** * Creates arguments for the event handler. * @param type the event type. * @param sender the component that triggered the event. * @param store the form viewer settings. * @param args the event arguments. * @param renderedProps the component properties that were used to render the sender component. */ constructor(e, t, r, o, i) { v(this, Fe, void 0); v(this, Le, void 0); v(this, Ae, void 0); /** * The index of the component in the array, if the component is in the array. */ l(this, "index"); /** * Sets user-defined properties for the React component that override other properties of the component. * @param props the component properties. */ l(this, "setUserDefinedProps", (e) => { this.sender.userDefinedProps = e; }); v(this, xe, (e) => !!(e && e.target && e.type && e.preventDefault)); v(this, dt, (e) => !p(this, xe).call(this, e)); var c; this.type = e, this.sender = t, this.store = r, this.args = o, this.renderedProps = i, this.index = t.nearestIndex; const s = typeof this.index == "number", a = t.dataRoot; if (P(this, Fe, bt(a)), s) { const d = ((c = a.parent) == null ? void 0 : c.dataRoot) ?? this.store.formData; P(this, Le, bt(d)); } P(this, Ae, bt(this.store.formData)); } /** * @returns the event handled by the event handler. */ get event() { return this.args.find(p(this, xe)); } /** * @returns the first element of the event argument array, which is treated as a value. */ get value() { return this.args.filter((e) => typeof e < "u").find(p(this, dt)); } /** * @returns the object for reading and changing form data. */ get data() { return p(this, Fe); } /** * @returns the object to read and modify parent data (available for array elements). */ get parentData() { return p(this, Le); } /** * @returns the object to read and modify root form data. */ get rootData() { return p(this, Ae); } } Fe = new WeakMap(), Le = new WeakMap(), Ae = new WeakMap(), xe = new WeakMap(), dt = new WeakMap(); const zl = ` /** * Arguments passed to the event handler. */ declare class ActionEventArgs { /** * The event type. */ readonly type: string /** * The component that triggered the event. */ readonly sender: ComponentData /** * The component properties that were used to render the sender component. */ readonly renderedProps: Record<string, any> /** * The index of the component in the array, if the component is in the array. */ readonly index?: number /** * Sets current props of component. */ readonly setUserDefinedProps: (props: Record<string, any>) => void /** * The form viewer settings. */ readonly store: Store /** * The event arguments. */ readonly args: any[] /** * @returns the event handled by the event handler. */ get event(): SyntheticEvent | null /** * @returns the first element of the event argument array, which is treated as a value. */ get value(): any /** * @returns the object for reading and changing form data. */ get data(): Record<string, unknown> /** * @returns the object to read and modify parent data (available for array elements). */ get parentData(): Record<string, unknown> | undefined /** * @returns the object to read and modify root form data. */ get rootData(): Record<string, unknown> } `, Ye = [ Mo.build("tooltipProps"), $o.build("renderWhen"), xo.build("htmlAttributes"), No.build("validation"), dn.build(_t), dn.build(Ht) ]; class re { /** * Creates the component metadata for the form builder. * @param type the component type name. * @param properties the component's properties metadata. * @param css the component's CSS metadata. * @param wrapperCss the component's wrapper CSS metadata. * @param modules common metadata for the component. * @param customPreview the custom ReactNode to be drawn on the toolbar. * @param valuedAn the metadata for the component value. * @param kind the component kind. * @param initialJson the JSON source for the component (instance of {@link ComponentStore} class serialised to JSON). * @param eventListeners the component metadata event listeners. * @param icon the component icon. * @param insertRestriction the function that restricts the insertion of a component into another component. */ constructor(e, t, r, o, i, s, a, c = "component", d, u, g, f) { this.type = e, this.properties = t, this.css = r, this.wrapperCss = o, this.modules = i, this.customPreview = s, this.valuedAn = a, this.kind = c, this.initialJson = d, this.eventListeners = u, this.icon = g, this.insertRestriction = f; } } const br = ".", qt = "__DOT__"; function Cr(n) { return n.replace(new RegExp(`\\${qt}`, "g"), br); } function Dr(n) { return n.replace(new RegExp(`\\${br}`, "g"), qt); } const T = (n) => n.replace(new RegExp(" ", "g"), "_"), ni = (n) => typeof n == "string" || typeof n == "number" || n instanceof Date ? !0 : typeof (n == null ? void 0 : n.value) < "u", Er = (n, e = "") => { const t = {}; for (const [r, o] of Object.entries(n)) { const i = e ? `${e}${qt}${r}` : r; ni(o) ? t[T(i)] = o : typeof o == "boolean" ? t[T(i)] = o ? "true" : "false" : typeof o == "object" && o !== null && Object.assign(t, Er(o, i)); } return t; }, ri = { /** * @inheritDoc */ get get() { return {}; }, /** * @inheritDoc */ get wrapperClassName() { return ""; }, /** * @inheritDoc */ get propsWithoutChildren() { return {}; }, /** * @inheritDoc */ get ownProps() { return {}; }, /** * @inheritDoc */ onDidMount() { }, /** * @inheritDoc */ onWillUnmount() { }, /** * @inheritDoc */ get isReadOnly() { return !1; }, /** * @inheritDoc */ get isDisabled() { return !1; } }; class yn { constructor() { l(this, "handlers", []); } /** * Adds a handler to the list of subscribers. * @param handler the handler function to be added. */ subscribe(e) { this.handlers.push(e); } /** * Removes the specified event handler from the list of handlers. * @param handler the event handler to remove. */ unsubscribe(e) { this.handlers = this.handlers.filter((t) => t !== e); } /** * Returns true if the object has subscribers, false otherwise. * @returns true if the object has handlers registered for events, otherwise returns false. */ get isSubscribed() { return this.handlers.length > 0; } /** * Invokes the event by calling all registered event handlers. * @param sender the sender of the event. * @param eventArgs the event arguments. */ invoke(e, t) { this.handlers.slice().forEach((r) => r(e, t)); } /** * Dispose method to release all handlers. */ dispose() { this.handlers = []; } } function Ge(n, e) { var t; e(n), (t = n.children) == null || t.forEach((r) => Ge(r, e)); } function oi(n, e, t = 0) { if (n === e) return t; if (n.children) { t = t + 1; for (const r of n.children) { const o = oi(r, e, t); if (o) return o; } } } let ii = 0; function si(n) { return `${n}_${++ii}`; } function vn(n, e) { let t = 1; const r = to(n.type), o = () => `${r}${t}`; for (; e.has(o()); ) t++; return n.key = o(), n.key; } class ai { /** * Constructs a new instance of the ComponentKeyChangedEventArgs class. * @param oldKey the old key. * @param newKey the new key. */ constructor(e, t) { this.oldKey = e, this.newKey = t; } } class li { constructor() { /** * An event that occurs after a component key change. */ l(this, "onAfterKeyChanged", new yn()); /** * An event that occurs before a component is removed from the component tree. */ l(this, "onBeforeDelete", new yn()); } /** * Unsubscribe from all events. */ dispose() { this.onAfterKeyChanged.dispose(), this.onBeforeDelete.dispose(); } } const ci = (n) => { const e = {}; return n.allComponentFields.forEach(({ dataKey: t }) => { e[t] = n.data[t] ?? ""; }), e; }; var Ne, _, se; class di { /** * Constructor. * @param componentStore the component settings. * @param model the component metadata for the form viewer. * @param childFactory the factory function that creates {@link ComponentData} instance. * @param getFormValidationResult the function that returns a form validation results. */ constructor(e, t, r, o) { v(this, Ne, void 0); v(this, _, void 0); v(this, se, void 0); l(this, "_state", {}); /** * The unique identifier. */ l(this, "id"); /** * The component settings. */ l(this, "store"); /** * The component metadata. */ l(this, "model"); /** * The field with the form data. */ l(this, "field"); /** * The parent node in the component data tree. */ l(this, "parent"); /** * The child nodes in the component data tree. */ l(this, "children", []); /** * User defined properties of the React component. */ l(this, "userDefinedProps"); /** * If true, then validation is in progress. */ l(this, "validating", !1); /** * Specifies the root component for the data in the component tree. **Internal use only.** */ l(this, "dataRootProvider"); /** * Specifies the index in the array if the component is in the component array. * This is not an index in a parent-child structure. */ l(this, "index"); /** * The state of the component. **Internal use only. */ l(this, "componentState", ri); /** * The function for getting initial data. */ l(this, "getInitialData"); var s; this.store = e, this.model = t, this.id = si(this.model.type), P(this, se, o), (s = e.children) == null || s.forEach((a) => { r(a).setParent(this); }), U(this, void 0, { name: j("ComponentData", { key: e.key }) }), P(this, Ne, [(() => xt(() => this.key, (a, c) => { this.invokeOnAfterKeyChanged(this, new ai(c, a)); }))()]); } /** * Sets the new parent for this node. * @param newParent the new parent. */ setParent(e) { var t; (t = this.parent) == null || t.removeChild(this), e.addChild(this), this.parent = e; } /** * Inserts the given node after this node. * @param inserted the node to insert. */ insertAfterMe(e) { this.insert(e, "after"); } /** * Inserts the given node before this node. * @param inserted the node to insert. */ insertBeforeMe(e) { this.insert(e, "before"); } /** * @inheritDoc */ get state() { return this._state; } /** * @returns the root component for the data in the component tree. */ get dataRoot() { var e, t; return ((e = this.dataRootProvider) == null ? void 0 : e.dataRoot) ?? ((t = this.parent) == null ? void 0 : t.dataRoot) ?? this; } /** * @returns the initial data. */ get initialData() { var e, t; return (t = (e = this.dataRoot).getInitialData) == null ? void 0 : t.call(e); } /** * @returns the key of this node (same as the key of the ComponentStore). */ get key() { return this.store.key; } /** * @returns the ComponentDataEvents object. */ get events() { return p(this, _) || P(this, _, new li()), p(this, _); } /** * Find the node with the given key. * @param key the key to find. * @returns the node or undefined if not found. */ findByKey(e) { if (this.key === e) return this; for (let t = 0; t < this.children.length; t++) { const o = this.children[t].findByKey(e); if (o) return o; } } /** * Assigns unique keys to the items in the tree. * @param root the root of the tree to unify keys. Defaults to the root of this tree. * @returns the map of new keys to old keys. */ unifyKeys(e) { const t = /* @__PURE__ */ new Map(), r = []; return Ge(e, ({ key: o }) => { r.push(o); }), Ge(this, (o) => { const i = vn(o.store, new Set(r)); t.set(i, o.key), r.push(i); }), t; } /** * Assigns unique keys to the items in the tree. */ unifyTree() { const e = /* @__PURE__ */ new Map(); Ge(this, ({ key: o, store: i }) => { const s = e.get(o) ?? /* @__PURE__ */ new Set(); s.add(i), e.set(o, s); }); const r = new Set(e.keys()); e.forEach((o, i) => { if (o.size <= 1) return; Array.from(o).slice(1).forEach((a) => { const c = vn(a, r); r.add(c); }); }); } /** * @returns all the fields in the tree as a map. Starts from this node. */ get fields() { const e = this.collectAllFields(/* @__PURE__ */ new Map()), t = /* @__PURE__ */ new Map(); return e.forEach((r, o) => { t.set(ve(o.store), r); }), t; } /** * @returns an array of all component fields, including non-unique data keys. */ get allComponentFields() { const e = this.collectAllFields(/* @__PURE__ */ new Map()), t = []; return e.forEach((r, o) => { t.push({ dataKey: ve(o.store), field: r }); }), t; } /** * @returns an array of all fields, including non-unique data keys. */ get allFields() { return this.allComponentFields.map((e) => e.field); } /** * Deletes this node from the tree. */ delete() { var t; (t = this.parent) == null || t.removeChild(this); const e = this.collectAllNodesAsArray([]); this.invokeOnBeforeDeleted(e), this.disposeNodes(e); } /** * @inheritDoc */ get data() { const e = {}; for (const { dataKey: t, field: r } of this.allComponentFields) if (r.storeDataInParentForm) { const o = r.value || {}; Object.keys(o).forEach((i) => e[i] = o[i]); } else e[t] = r.value; return e; } /** * @returns the object to read and modify parent data (available for array elements). */ get parentData() { var t; if (typeof this.nearestIndex == "number") return ((t = this.parent) == null ? void 0 : t.data) ?? this.rootData; } /** * @returns the object to read and modify root form data. */ get rootData() { return this.root.data; } /** * @returns all the form data that is of the FluentVariable type. * Additionally, the keys of the returned object are converted to the snake case. */ get fluentData() { const e = ci(this); return Er(e); } /** * @inheritDoc */ get errors() { const e = {}; for (const { dataKey: t, field: r } of this.allComponentFields) { r.error && (e[t] = r.error); const o = r.errors; o && (Array.isArray(o) ? e[t] = o : (r.storeDataInParentForm && Object.keys(o).forEach((i) => e[i] = o[i]), !r.storeDataInParentForm && Object.keys(o).length > 0 && (e[t] = o))); } return e; } /** * @inheritDoc */ set errors(e) { this.allComponentFields.forEach((t) => { const r = e[t.dataKey]; t.field.setError(r); }); } /** * @inheritDoc */ get hasErrors() { return Object.keys(this.errors).length > 0; } /** * @inheritDoc */ setAllErrors(e) { this.allFields.forEach((t) => t.error = e); } /** * @inheritDoc */ async validate() { return await this.validateForm(), this.errors; } /** * @inheritDoc */ async getValidationResult() { var o; let e; const t = async ({ dataKey: i, field: s }) => { const a = await s.getValidationResult(); if ($n(a)) return; e ?? (e = {}); let c = e; if (!s.storeDataInParentForm) { const d = no(a) ? [] : {}; e[i] ?? (e[i] = d), c = e[i]; } sn(c, a); }; await Promise.allSettled(this.allComponentFields.map(t)); const r = await ((o = p(this, se)) == null ? void 0 : o.call(this)); return r == null || r.forEach((i) => { e ?? (e = {}), sn(e, i); }), e; } /** * @inheritDoc */ get isValidating() { return this.validating; } /** * @inheritDoc */ reset() { this.allFields.forEach((e) => e.reset()); } /** * @inheritDoc */ clear() { this.allFields.forEach((e) => e.clear()); } /** * Dispose method that releases resources used by the object. * It disposes the field and all the children objects. */ dispose() { const e = this.collectAllNodesAsArray([]); this.disposeNodes(e); } /** * @returns true if it has no parent {@link ComponentData}, false otherwise. */ get isRoot() { return !this.parent; } /** * @returns the root of the component tree. */ get root() { return this.parent ? this.parent.root : this; } /** * @returns the index in the array if the component is in the component array * (looks for the nearest index in the component hierarchy). */ get nearestIndex() { var e; return typeof this.index < "u" ? this.index : (e = this.parent) == null ? void 0 : e.nearestIndex; } async validateForm() { var e; this.validating = !0; try { await Promise.allSettled([...this.allFields].map((o) => o.validate())); const t = await ((e = p(this, se)) == null ? void 0 : e.call(this)); if (!(t != null && t.length)) return; const r = this.allComponentFields; t.forEach((o) => { o && r.forEach(({ field: i, dataKey: s }) => { if (o[s]) return i.setError(o[s]); if (i.storeDataInParentForm) return i.setError(o); }); }); } finally { this.validating = !1; } } insert(e, t) { var c, d; const r = t === "before" ? 0 : 1; if (!this.parent) throw new Error(`Cannot insert without parent. Key = ${this.key}`); (c = e.parent) == null || c.removeChild(e), e.parent = this.parent; const o = this.parent.children, i = o.indexOf(this); if (i < 0) throw new Error(`Cannot insert not existing element into ComponentData. Key = ${this.key}`); o.splice(i + r, 0, e), (d = this.parent.store).children ?? (d.children = []); const s = this.parent.store.children, a = s.indexOf(this.store); if (a < 0) throw