@react-form-builder/designer
Version:
React Form Library Drag and Drop.
1,642 lines (1,627 loc) • 311 kB
JavaScript
var Li = Object.defineProperty;
var Ei = (t, e, n) => e in t ? Li(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
var E = (t, e, n) => (Ei(t, typeof e != "symbol" ? e + "" : e, n), n), Dt = (t, e, n) => {
if (!e.has(t))
throw TypeError("Cannot " + n);
};
var J = (t, e, n) => (Dt(t, e, "read from private field"), n ? n.call(t) : e.get(t)), ge = (t, e, n) => {
if (e.has(t))
throw TypeError("Cannot add the same private member more than once");
e instanceof WeakSet ? e.add(t) : e.set(t, n);
}, Te = (t, e, n, o) => (Dt(t, e, "write to private field"), o ? o.call(t, n) : e.set(t, n), n);
var lt = (t, e, n) => (Dt(t, e, "access private method"), n);
import { jsx as i, jsxs as p, Fragment as R } from "@emotion/react/jsx-runtime";
import v from "@emotion/styled";
import { createNonNullableContext as $e, forwardRef as Ae, namedObserver as y, useStore as H, toLabeledValues as Gt, useComponentData as O, KeySymbol as Mi, ComponentStore as Ze, isContainer as qe, boolean as ro, timeFormat as It, ActionEventArgsDeclaration as Ai, IFormDataDeclaration as Ti, isPromise as Pi, DataValidator as Fi, isProperty as wn, isValidatorPropertyBlockType as Nt, createAnnotation as qt, className as Ri, cfDisableStylesForClassNameEditor as Di, cfEnableInlineStylesEditor as Ii, useTooltipType as Yt, ComponentDataProvider as Ye, key as Ni, cfDisableMainComponentProperties as Bi, cfDisableStyleProperties as zi, cfDisableTooltipProperties as Vi, cfDisableAdditionalProperties as $i, createProperty as Hi, getValidatorPropertyBlockType as kn, globalDefaultLanguage as io, Language as se, BiDi as Ce, findLanguage as Oi, definePreset as ji, getKey as Wi, ComponentData as _i, nameObservable as Xe, BuilderView as ao, ActionDefinition as so, treeForEach as Bt, cfComponentIsPreset as bt, PersistedFormVersion as Ki, screenModel as xn, initFormFields as Ui, CalculableResult as be, generateUniqueName as Zi, AsyncFunction as Xt, calculatePropertyValue as Ji, getFluentCompatibleId as Gi, testFluentLocalization as qi, getFluentData as Yi, nameAutorun as Pe, DefaultWrapper as Xi, checkSlotCondition as Sn, groupBy as Qi, ComponentTree as Je, TemplateField as ea, slotModel as ta, node as na, toArray as oa, findTreeElementDepth as ra, emotionCache as Ln, loadResource as lo, unloadResource as ia, ViewerPropsProvider as aa, StoreProvider as sa, useDisposable as la, Store as ca, FormViewerPropsStore as da, ComponentState as ua, getChildren as ma, useViewerProps as ha, BuilderModeProvider as pa, FormViewer as ga, oneOf as co, useErrorModel as Ca, tooltipType as fa, SuppressResizeObserverErrors as ba } from "@react-form-builder/core";
import { BuilderView as Q5 } from "@react-form-builder/core";
import * as b from "react";
import { useCallback as h, useState as T, useEffect as A, cloneElement as uo, useRef as G, useMemo as L, useReducer as mo, createElement as va, Component as ya, useImperativeHandle as wa, Suspense as ka } from "react";
import { Checkbox as Qt, Table as He, InputPicker as Oe, IconButton as X, InputNumber as xt, Input as ce, Button as $, Form as Q, Whisper as ve, Tooltip as Qe, InputGroup as te, TagInput as xa, Popover as en, DatePicker as ho, SelectPicker as Sa, Animation as po, ButtonGroup as me, List as go, Dropdown as V, Divider as La, TagPicker as Ea, RadioGroup as Ma, Radio as Aa, Message as St, Schema as vt, CustomProvider as Ta, useToaster as Pa, Modal as Y, Row as Fa, Col as Ra, Nav as Co, Loader as Da } from "rsuite";
import { cx as K, css as Lt } from "@emotion/css";
import { observer as Ia } from "mobx-react";
import { Resizable as Na } from "re-resizable";
import { upperFirst as fo, isEqual as Ba, isObject as bo, assign as tn, isEmpty as vo, startCase as yo, isUndefined as Et, merge as za, debounce as Va, toUpper as wo, replace as $a, camelCase as Ha, isEqualWith as Oa } from "lodash-es";
import { computed as ja, makeAutoObservable as et, runInAction as En, observable as Re, action as Ge, reaction as nn, autorun as Fe, makeObservable as Wa } from "mobx";
import { Close as ue, Plus as tt, Icon as on, Code as ko, Check as _a, Copy as Ka, ArrowUpLine as xo, ArrowDownLine as Mt, RemindFill as Ua, SortUp as Za, SortDown as Ja, ArrowRightLine as Ga, Danger as qa, Export as Ya, Import as Xa, FileDownload as Qa, FileUpload as es, Search as ts, ExpandOutline as ns, CollaspedOutline as os } from "@rsuite/icons";
import * as So from "@fortawesome/free-solid-svg-icons/faCode.js";
import * as rs from "@fortawesome/free-solid-svg-icons/faGlobe.js";
import * as ct from "@fortawesome/free-solid-svg-icons/faMarker.js";
import { useTranslation as F, initReactI18next as is } from "react-i18next";
import { css as nt, CacheProvider as as } from "@emotion/react";
import { faMarker as ss, faGlobe as ls, faBars as cs } from "@fortawesome/free-solid-svg-icons";
import { RgbaColorPicker as ds } from "react-colorful";
import Mn, { t as us } from "i18next";
import * as ms from "@fortawesome/free-solid-svg-icons/faCheck.js";
import { format as Lo, parse as hs } from "date-fns";
import { constrainedEditor as ps } from "constrained-editor-plugin";
import gs, { loader as Cs } from "@monaco-editor/react";
import "monaco-editor";
import fs from "i18next-browser-languagedetector";
import bs from "i18next-resources-to-backend";
import vs from "date-fns/locale/ar-EG/index.js";
import ys from "date-fns/locale/de/index.js";
import ws from "date-fns/locale/en-US/index.js";
import ks from "date-fns/locale/es/index.js";
import xs from "date-fns/locale/fa-IR/index.js";
import Ss from "date-fns/locale/fr/index.js";
import Eo from "date-fns/locale/hi/index.js";
import Ls from "date-fns/locale/it/index.js";
import Es from "date-fns/locale/ja/index.js";
import Ms from "date-fns/locale/ko/index.js";
import Mo from "date-fns/locale/sr/index.js";
import As from "date-fns/locale/zh-CN/index.js";
import { arEG as Ts, deDE as Ps, enUS as Ao, itIT as Fs, faIR as Rs, frFR as Ds, esES as Is, jaJP as Ns, koKR as Bs, zhCN as zs } from "rsuite/esm/locales/index.js";
import * as Vs from "@fortawesome/free-solid-svg-icons/faBookmark.js";
import * as To from "@fortawesome/free-solid-svg-icons/faPlay.js";
import { useDrag as $s, useDrop as Po, useDragLayer as ot, DndProvider as Hs } from "react-dnd";
import { getEmptyImage as Os, HTML5Backend as js } from "react-dnd-html5-backend";
import { createPortal as Ws } from "react-dom";
import * as _s from "@fortawesome/free-regular-svg-icons/faClone.js";
import * as Ks from "@fortawesome/free-regular-svg-icons/faTrashAlt.js";
import Fo from "scroll-into-view-if-needed";
import * as Us from "@fortawesome/free-regular-svg-icons/faBookmark.js";
import * as Zs from "@fortawesome/free-solid-svg-icons/faRedo.js";
import * as Ot from "@fortawesome/free-solid-svg-icons/faSave.js";
import * as Js from "@fortawesome/free-solid-svg-icons/faUndo.js";
import * as Gs from "@fortawesome/free-solid-svg-icons/faTrash.js";
import { saveAs as qs } from "file-saver";
import Ro from "jszip";
import * as Do from "@fortawesome/free-solid-svg-icons/faPaintBrush.js";
import * as Ys from "@fortawesome/free-solid-svg-icons/faMoon.js";
import * as Xs from "@fortawesome/free-solid-svg-icons/faSun.js";
import * as Qs from "@fortawesome/free-solid-svg-icons/faDesktop.js";
import * as el from "@fortawesome/free-solid-svg-icons/faMobile.js";
import * as tl from "@fortawesome/free-solid-svg-icons/faTablet.js";
import * as nl from "@fortawesome/free-solid-svg-icons/faList.js";
import * as ol from "@fortawesome/free-solid-svg-icons/faPlusCircle.js";
import * as rl from "@fortawesome/free-solid-svg-icons/faSitemap.js";
import * as il from "@fortawesome/free-solid-svg-icons/faSlidersH.js";
import * as al from "@fortawesome/free-solid-svg-icons/faBolt.js";
import * as sl from "@fortawesome/free-solid-svg-icons/faCircle.js";
import * as ll from "@fortawesome/free-solid-svg-icons/faSpellCheck.js";
const [
/**
* **Internal use only.**
*/
k,
/**
* **Internal use only.**
*/
cl
] = $e("BuildStoreContext"), de = (t, e) => {
e.displayName = t;
const n = e, o = `FE_${t}`;
return (r) => {
var m;
const s = (m = k().props.customization) == null ? void 0 : m[t];
if (!s)
return /* @__PURE__ */ i(n, { ...r, className: K(o, r.className) });
if (s.hidden)
return null;
const { style: l, customRenderer: c } = s, d = K(o, r == null ? void 0 : r.className, s.className, Lt`${l}`, t), u = /* @__PURE__ */ i(n, { ...r, className: d });
return c ? c(u, e, r) : u;
};
}, q = (t, e) => de(t, Ia(e)), [
Io,
dl
] = $e("LicenseContext"), { Cell: ul } = He, rt = v(ul)`
padding: 0;
& .rs-table-cell-content {
padding: 9px 3px;
}
`, ml = v(Qt)`
& .rs-checkbox-wrapper {
left: 4px;
top: 6px;
}
`, hl = ({ rowData: t, dataKey: e, rowIndex: n, onChange: o, type: r, ...a }) => {
const s = t[e] ?? "", l = h((d) => {
t[e] = d, o == null || o(d, e, n);
}, [e, o, t, n]);
return /* @__PURE__ */ i(rt, { ...a, children: /* @__PURE__ */ i(r === "number" ? xt : ce, { value: s, onChange: l, size: "sm" }) });
}, Z5 = ({ rowData: t, dataKey: e, rowIndex: n, onChange: o, ...r }) => {
const a = t[e] ?? !1, s = h((l, c) => {
t[e] = c, o == null || o(c, e, n);
}, [e, o, t, n]);
return /* @__PURE__ */ i(rt, { ...r, children: /* @__PURE__ */ i(ml, { inline: !0, checked: a, onChange: s }) });
}, pl = ({ rowData: t, dataKey: e, rowIndex: n, options: o, onChange: r, ...a }) => {
const s = t[e] ?? "", l = h((c) => {
t[e] = c, r == null || r(c, e, n);
}, [e, r, t, n]);
return /* @__PURE__ */ i(rt, { ...a, children: /* @__PURE__ */ i(
Oe,
{
value: s,
data: o,
onChange: l,
cleanable: !1,
creatable: !0,
block: !0,
size: "sm",
placement: "auto"
}
) });
}, gl = ({ rowData: t, rowIndex: e, onAction: n, icon: o, ...r }) => /* @__PURE__ */ i(rt, { ...r, children: /* @__PURE__ */ i(
X,
{
appearance: "subtle",
size: "sm",
onClick: () => n(e),
icon: o()
}
) }), { ErrorMessage: Cl } = Q, { Column: fl, HeaderCell: bl } = He, vl = v(He)`
.rs-table-cell, .rs-table-row {
background-color: transparent !important;
}
&.hideHeader {
margin-bottom: -40px;
.rs-table-header-row-wrapper {
display: none !important;
}
.rs-table-body-row-wrapper {
top: 0 !important;
}
}
`, rn = (t) => {
const [e, n] = T({}), [o, r] = T(!1), {
data: a = [],
onChange: s,
columns: l,
label: c,
errorMessage: d,
autoAdd: u,
hideHeader: m,
onAdd: g,
onRemove: C,
...f
} = t, { autoHeight: w, maxHeight: S } = e, x = m ? 0 : t.headerHeight ?? 40, D = t.rowHeight ?? 46, z = t.maxRows ?? 5, M = a.length <= z, U = t.renderEmpty ? x + D : 0, we = x + D * z, he = a.length > z ? we : U, ee = h((re) => {
if (u) {
const yn = re[re.length - 1];
(!yn || Object.values(yn).some((Si) => Si)) && re.push({});
}
s == null || s(re);
}, [u, s]), pe = h(() => {
n({
autoHeight: M,
maxHeight: he
});
}, [he, M]), I = h(() => {
ee == null || ee([...a, {}]), r(!0), pe(), g == null || g(a.length);
}, [a, ee, pe, g]), N = h((re) => {
a.splice(re, 1), ee == null || ee(a), pe(), C == null || C(re);
}, [a, ee, pe, C]), oe = () => l == null ? void 0 : l.map((re) => uo(re, {
onChange: () => ee == null ? void 0 : ee([...a])
})), xi = () => {
const re = {};
return o && (re.y = Number.MAX_SAFE_INTEGER, r(!1)), re;
};
return A(pe, []), /* @__PURE__ */ p("div", { children: [
!!c && /* @__PURE__ */ i("label", { children: c }),
/* @__PURE__ */ p(
vl,
{
data: a,
headerHeight: x,
rowHeight: D,
height: S,
autoHeight: w,
shouldUpdateScroll: xi,
className: K({ hideHeader: m }),
...f,
children: [
oe(),
/* @__PURE__ */ p(fl, { width: 34, children: [
/* @__PURE__ */ i(bl, { children: /* @__PURE__ */ i("div", {}) }),
/* @__PURE__ */ i(gl, { onAction: N, icon: () => /* @__PURE__ */ i(ue, {}) })
] })
]
}
),
!!d && /* @__PURE__ */ i(Cl, { show: !!d, placement: "bottomStart", children: d }),
!u && /* @__PURE__ */ i($, { appearance: "default", size: "sm", onClick: I, style: { marginTop: 10 }, block: !0, children: /* @__PURE__ */ i(tt, {}) })
] });
}, { Column: yl, HeaderCell: wl } = He, an = (t) => t.map(({ name: e, input: n, title: o, inputProps: r = {} }) => {
const a = n ?? hl;
return /* @__PURE__ */ p(yl, { flexGrow: 1, children: [
/* @__PURE__ */ i(wl, { children: o ?? fo(e) }),
/* @__PURE__ */ i(a, { dataKey: e, ...r })
] }, e);
});
let kl = 0;
function xl(t) {
const e = ++kl;
return t ? `${t}${e}` : `${e}`;
}
function No(t) {
const e = G(null);
return e.current || (e.current = xl(t)), e.current;
}
const [
/**
* **Internal use only.**
*/
Sl,
/**
* **Internal use only.**
*/
sn
] = $e("TooltipPlacementContext"), An = v.label`
min-width: 80px;
cursor: pointer;
user-select: none;
${({ hinted: t }) => t && `
:hover {
text-decoration: underline;
text-decoration-style: dotted;
}
`};
&.required:after {
padding-left: 3px;
content: "*";
color: red;
}
`, le = ({ hint: t, children: e, ...n }) => {
const o = Sl(), r = n.placement ?? o;
return t ? /* @__PURE__ */ i(ve, { speaker: /* @__PURE__ */ i(Qe, { children: t }), placement: r, trigger: "hover", children: e }) : /* @__PURE__ */ i(R, { children: e });
}, Bo = ({ hint: t, children: e, ...n }) => t ? /* @__PURE__ */ i(le, { hint: t, children: /* @__PURE__ */ i(An, { ...n, hinted: !0, children: e }) }) : /* @__PURE__ */ i(An, { ...n, children: e }), At = ({ hint: t, hintPlacement: e, ...n }) => /* @__PURE__ */ i(le, { hint: t, placement: e ?? "bottom", children: /* @__PURE__ */ i(X, { ...n, size: "xs" }) }), P = (t) => {
const [e, { exists: n }] = F();
return (o) => {
const r = `${t}.${o}`;
return n(r) ? e(r) : "";
};
}, ln = 5, B = v.div`
display: flex;
flex: 1;
flex-direction: column;
gap: ${({ gap: t }) => t ?? ln}px;
`, ne = v.div`
display: flex;
gap: ${({ gap: t }) => t ?? ln}px;
${({ stretchElements: t }) => t && "& > * { flex: 1; }"};
${({ spaceBetween: t }) => t && "justify-content: space-between"};
`, zo = v.div`
display: flex;
gap: 10px;
justify-content: space-between;
align-items: center;
& > label {
width: 100px;
min-width: 80px;
}
`, Vo = nt`
&& {
display: flex;
position: relative;
background-color: var(--rs-btn-default-bg);
border-radius: 10px;
padding: 8px;
padding-inline-start: 12px;
align-items: center;
user-select: none;
justify-content: space-between;
}
`, $o = nt`
&& {
display: flex;
flex: 1;
flex-direction: column;
gap: ${ln}px;
overflow-y: auto;
}
`, Ll = nt`
&& > * {
cursor: pointer;
:hover {
background-color: var(--rs-btn-default-hover-bg);
}
}
`, Tt = v.div`
${Vo}
`, cn = v.div`
${$o}
${({ clickable: t = !1 }) => t && Ll}
`, El = (t) => {
if (t != null && t.icon) {
const [e, n, , , o] = t.icon;
return { width: e, height: n, svgPathData: o };
}
return t;
}, Ml = Ae(({ faIcon: t, size: e, ...n }, o) => {
const { width: r, height: a, svgPathData: s } = El(t);
return /* @__PURE__ */ i(
"svg",
{
viewBox: `0 0 ${r} ${a}`,
width: `${e ?? 1}em`,
height: `${e ?? 1}em`,
fill: "currentColor",
...n,
ref: o,
children: /* @__PURE__ */ i("path", { d: s })
}
);
}), W = Ae(({ icon: t, size: e, ...n }, o) => /* @__PURE__ */ i(on, { as: Ml, ref: o, faIcon: t, size: e, ...n })), dn = (t, e) => {
const n = P(`annotation.${t.key}`), o = P(`${e}.${t.key}`), r = h((l) => o(l) || n(l), [n, o]), a = L(() => t.hint ?? r("hint"), [t.hint, r]), s = L(() => r("name") || t.name, [t.name, r]);
return L(() => ({
hint: a,
label: s
}), [a, s]);
}, Al = v(X)`
min-width: 24px;
margin-inline-end: -6px;
`, Tl = {
disabled: {
hint: "neitherCalculableNorLocalizable",
icon: ct,
color: "var(--rs-btn-default-disabled-bg)"
},
calculation: {
hint: "editCalculable",
color: "var(--rs-btn-primary-bg)",
icon: So
},
localization: {
hint: "editLocalizable",
color: "var(--rs-btn-primary-bg)",
icon: rs
},
calculable: {
hint: "hintCalculable",
icon: ct
},
localizable: {
hint: "hintLocalizable",
icon: ct
},
calculableAndLocalizable: {
hint: "hintCalculableAndLocalizable",
icon: ct
}
}, Pl = (t) => {
const { annotation: e, getComputeCode: n, setComputeCode: o, disableCompute: r, getComputeType: a, hasComputeCode: s, componentData: l } = t, c = k(), d = !e.calculable && !e.localizable, u = P("propertiesEditor.codeButton"), m = a(), g = L(() => {
const w = m === "function" && s("function"), S = m === "localization" && s("localization");
return d ? "disabled" : w ? "calculation" : S ? "localization" : e.calculable && e.localizable ? "calculableAndLocalizable" : e.calculable ? "calculable" : e.localizable ? "localizable" : "disabled";
}, [e.calculable, e.localizable, d, s, m]), C = L(() => {
const { hint: w, icon: S, color: x } = Tl[g];
return { icon: S, color: x, hint: u(w) };
}, [g, u]), f = h(() => c.currentEditable = new Kr(
r,
o,
n,
a,
s,
e,
l.key
), [e, l.key, r, n, a, s, o, c]);
return /* @__PURE__ */ i(le, { hint: C.hint, children: /* @__PURE__ */ i(
Al,
{
onClick: f,
disabled: d,
icon: /* @__PURE__ */ i(W, { icon: C.icon, color: C.color }),
size: "xs",
appearance: "subtle"
}
) });
}, Fl = q("PropertyCodeButton", Pl), Rl = de("PropertyLabel", Bo), Dl = (t) => /* @__PURE__ */ i("div", { style: { width: "100%" }, ...t }), Il = de("PropertyInput", Dl), Nl = v.div`
min-width: 18px;
`, un = (t) => {
const { children: e, className: n, style: o, label: r, hint: a, required: s, leftButton: l } = t, c = No("id-"), d = L(() => K({ required: s }), [s]);
return /* @__PURE__ */ p(zo, { style: o, className: n, children: [
/* @__PURE__ */ p(ne, { gap: 10, style: { alignItems: "center" }, children: [
l ?? /* @__PURE__ */ i(Nl, {}),
/* @__PURE__ */ i(Rl, { htmlFor: c, hint: a, className: d, children: /* @__PURE__ */ i(R, { children: r }) })
] }),
!!e && /* @__PURE__ */ i(Il, { children: uo(e, { id: c }) })
] });
}, Bl = (t) => {
const { annotation: e, children: n, style: o, value: r } = t, { className: a, ...s } = t, l = t.componentData.model.type, { hint: c, label: d } = dn(e, l), u = !Ba(r, e.default), m = [a, u ? "valueModified" : ""].filter((g) => !!g).join(" ");
return /* @__PURE__ */ i(
un,
{
style: o,
className: m,
required: e.required,
hint: c,
label: d,
leftButton: /* @__PURE__ */ i(Fl, { ...s }),
children: n
}
);
}, j = de("LabeledProperty", Bl), zl = [{ name: "value" }, { name: "label" }], Vl = (t) => {
const { value: e, onChange: n, annotation: o, componentData: r } = t, { onAdd: a, onRemove: s, columns: l, calculateEditorProps: c } = o.editorProps ?? {}, d = H(), u = L(() => an(l ?? zl), [l]), m = h((f) => {
a == null || a(f, r, d);
}, [d, r, a]), g = h((f) => {
s == null || s(f, r, d);
}, [d, r, s]), C = (c == null ? void 0 : c(r, n)) ?? {};
return /* @__PURE__ */ p(R, { children: [
/* @__PURE__ */ i(j, { ...t }),
/* @__PURE__ */ i(
rn,
{
data: e,
onChange: n,
columns: u,
onRemove: g,
onAdd: m,
...C
}
)
] });
}, $l = y("ArrayInput", Vl), Tn = (t, e) => {
try {
return JSON.stringify(t, null, e);
} catch {
return;
}
}, Hl = (t) => {
const { value: e, onChange: n, onClean: o, onValidate: r, editorKey: a, editorTitle: s } = t, l = k(), c = L(() => (bo(e) ? Tn(e, 2) : e) ?? "", [e]), d = L(() => {
var m;
return e ? ((m = Tn(e)) == null ? void 0 : m.substring(0, 50)) ?? "Error" : "";
}, [e]), u = h(() => {
l.editJsonCode(a, s, c, n, r);
}, [l, a, s, n, c, r]);
return /* @__PURE__ */ p(te, { inside: !0, size: "xs", children: [
/* @__PURE__ */ i(ce, { value: d, onClick: u, readOnly: !0, color: "var(--rs-btn-ghost-text)" }),
/* @__PURE__ */ i(te.Button, { onClick: e ? o : u, children: e ? /* @__PURE__ */ i(ue, {}) : /* @__PURE__ */ i(ko, {}) })
] });
}, Ol = (t) => {
const e = JSON.parse(t);
if (typeof e != "object" || Array.isArray(e))
throw new Error("The value must be an object");
}, jl = ({ rowData: t, dataKey: e, rowIndex: n, onChange: o, editorTitle: r, ...a }) => {
const s = t[e] ?? {}, l = L(() => `${r}[${n}]`, [r, n]), c = h((u) => {
t[e] = u, o == null || o(u, e, n);
}, [e, o, t, n]), d = h(() => {
c(void 0);
}, [c]);
return /* @__PURE__ */ i(rt, { ...a, children: /* @__PURE__ */ i(
Hl,
{
editorKey: `${e}-${n}`,
editorTitle: l,
value: s,
onChange: c,
onClean: d,
onValidate: Ol
}
) });
}, Wl = [{ name: "item", input: jl }], _l = (t) => {
var a;
const { value: e, onChange: n, annotation: o } = t, r = L(() => {
var c;
const s = ((c = o.editorProps) == null ? void 0 : c.columns) ?? Wl, l = s == null ? void 0 : s[0];
return l && !l.inputProps && (l.inputProps = { editorTitle: `${t.componentData.key}.${o.name}` }), an(s);
}, [(a = o.editorProps) == null ? void 0 : a.columns, o.name, t.componentData.key]);
return /* @__PURE__ */ p(R, { children: [
/* @__PURE__ */ i(j, { ...t }),
/* @__PURE__ */ i(rn, { data: e, onChange: n, columns: r })
] });
}, Kl = (t) => {
const { value: e, onChange: n, onClean: o } = t, r = P("propertiesEditor");
return /* @__PURE__ */ i(j, { ...t, children: /* @__PURE__ */ i(
xa,
{
value: e ?? "",
onChange: n,
onClean: o,
block: !0,
size: "xs",
style: { width: "100%" },
placeholder: r("setInputHint")
}
) });
}, Ul = [
"a",
"abbr",
"about",
"accentHeight",
"accept",
"acceptCharset",
"accessKey",
"accumulate",
"action",
"additive",
"address",
"alignmentBaseline",
"allowFullScreen",
"allowReorder",
"allowTransparency",
"alphabetic",
"alt",
"altGlyph",
"altGlyphDef",
"altGlyphItem",
"amplitude",
"animate",
"animateColor",
"animateMotion",
"animateTransform",
"arabicForm",
"area",
"article",
"ascent",
"aside",
"async",
"attributeName",
"attributeType",
"audio",
"autoCapitalize",
"autoComplete",
"autoCorrect",
"autoFocus",
"autoPlay",
"autoReverse",
"autoSave",
"azimuth",
"b",
"base",
"baseFrequency",
"baselineShift",
"baseProfile",
"bbox",
"bdi",
"bdo",
"begin",
"bias",
"blockquote",
"body",
"br",
"button",
"by",
"calcMode",
"canvas",
"capHeight",
"caption",
"capture",
"cellPadding",
"cellSpacing",
"challenge",
"charSet",
"checked",
"circle",
"cite",
"classID",
"className",
"clip",
"clipPath",
"clipPathUnits",
"clipRule",
"code",
"col",
"colgroup",
"color",
"color-profile",
"colorInterpolation",
"colorInterpolationFilters",
"colorProfile",
"colorRendering",
"cols",
"colSpan",
"content",
"contentEditable",
"contentScriptType",
"contentStyleType",
"contextMenu",
"controls",
"coords",
"crossOrigin",
"cursor",
"cx",
"cy",
"d",
"dangerouslySetInnerHTML",
"data",
"datalist",
"datatype",
"dateTime",
"dd",
"decelerate",
"default",
"defaultChecked",
"defaultValue",
"defer",
"defs",
"del",
"desc",
"descent",
"details",
"dfn",
"dialog",
"diffuseConstant",
"dir",
"direction",
"disabled",
"display",
"div",
"divisor",
"dl",
"dominantBaseline",
"download",
"draggable",
"dt",
"dur",
"dx",
"dy",
"edgeMode",
"elevation",
"ellipse",
"em",
"embed",
"enableBackground",
"encType",
"end",
"exponent",
"externalResourcesRequired",
"feBlend",
"feColorMatrix",
"feComponentTransfer",
"feComposite",
"feConvolveMatrix",
"feDiffuseLighting",
"feDisplacementMap",
"feDistantLight",
"feFlood",
"feFuncA",
"feFuncB",
"feFuncG",
"feFuncR",
"feGaussianBlur",
"feImage",
"feMerge",
"feMergeNode",
"feMorphology",
"feOffset",
"fePointLight",
"feSpecularLighting",
"feSpotLight",
"feTile",
"feTurbulence",
"fieldset",
"figcaption",
"figure",
"fill",
"fillOpacity",
"fillRule",
"filter",
"filterRes",
"filterUnits",
"floodColor",
"floodOpacity",
"focusable",
"font",
"font-face",
"font-face-format",
"font-face-name",
"font-face-src",
"font-face-uri",
"fontFamily",
"fontSize",
"fontSizeAdjust",
"fontStretch",
"fontStyle",
"fontVariant",
"fontWeight",
"footer",
"foreignObject",
"form",
"formAction",
"format",
"formEncType",
"formMethod",
"formNoValidate",
"formTarget",
"frameBorder",
"from",
"fx",
"fy",
"g",
"g1",
"g2",
"glyph",
"glyphName",
"glyphOrientationHorizontal",
"glyphOrientationVertical",
"glyphRef",
"gradientTransform",
"gradientUnits",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"hanging",
"head",
"header",
"headers",
"height",
"hgroup",
"hidden",
"high",
"hkern",
"horizAdvX",
"horizOriginX",
"hr",
"href",
"hrefLang",
"html",
"htmlFor",
"httpEquiv",
"i",
"icon",
"id",
"ideographic",
"iframe",
"image",
"imageRendering",
"img",
"in",
"in2",
"inlist",
"input",
"inputMode",
"ins",
"integrity",
"intercept",
"is",
"itemID",
"itemProp",
"itemRef",
"itemScope",
"itemType",
"k",
"k1",
"k2",
"k3",
"k4",
"kbd",
"kernelMatrix",
"kernelUnitLength",
"kerning",
"keygen",
"keyParams",
"keyPoints",
"keySplines",
"keyTimes",
"keyType",
"kind",
"label",
"lang",
"legend",
"lengthAdjust",
"letterSpacing",
"li",
"lightingColor",
"limitingConeAngle",
"line",
"linearGradient",
"link",
"list",
"local",
"loop",
"low",
"main",
"manifest",
"map",
"marginHeight",
"marginWidth",
"mark",
"marker",
"markerEnd",
"markerHeight",
"markerMid",
"markerStart",
"markerUnits",
"markerWidth",
"mask",
"maskContentUnits",
"maskUnits",
"math",
"mathematical",
"max",
"maxLength",
"media",
"mediaGroup",
"menu",
"menuitem",
"meta",
"metadata",
"meter",
"method",
"min",
"minLength",
"missing-glyph",
"mode",
"mpath",
"multiple",
"muted",
"name",
"nav",
"nonce",
"noscript",
"noValidate",
"numOctaves",
"object",
"offset",
"ol",
"onBlur",
"onChange",
"onClick",
"onFocus",
"onInput",
"onInvalid",
"onKeyDown",
"onKeyPress",
"onKeyUp",
"onSubmit",
"opacity",
"open",
"operator",
"optgroup",
"optimum",
"option",
"order",
"orient",
"orientation",
"origin",
"output",
"overflow",
"overlinePosition",
"overlineThickness",
"p",
"paintOrder",
"panose1",
"param",
"path",
"pathLength",
"pattern",
"patternContentUnits",
"patternTransform",
"patternUnits",
"picture",
"placeholder",
"playsInline",
"pointerEvents",
"points",
"pointsAtX",
"pointsAtY",
"pointsAtZ",
"polygon",
"polyline",
"poster",
"pre",
"prefix",
"preload",
"preserveAlpha",
"preserveAspectRatio",
"primitiveUnits",
"profile",
"progress",
"property",
"q",
"r",
"radialGradient",
"radioGroup",
"radius",
"rb",
"readOnly",
"rect",
"refX",
"refY",
"rel",
"renderingIntent",
"repeatCount",
"repeatDur",
"required",
"requiredExtensions",
"requiredFeatures",
"resource",
"restart",
"result",
"results",
"reversed",
"role",
"rotate",
"rows",
"rowSpan",
"rp",
"rt",
"rtc",
"ruby",
"rx",
"ry",
"s",
"samp",
"sandbox",
"scale",
"scope",
"scoped",
"script",
"scrolling",
"seamless",
"section",
"security",
"seed",
"select",
"selected",
"set",
"shape",
"shapeRendering",
"size",
"sizes",
"slope",
"slot",
"small",
"source",
"spacing",
"span",
"specularConstant",
"specularExponent",
"speed",
"spellCheck",
"spreadMethod",
"src",
"srcDoc",
"srcLang",
"srcSet",
"start",
"startOffset",
"stdDeviation",
"stemh",
"stemv",
"step",
"stitchTiles",
"stop",
"stopColor",
"stopOpacity",
"strikethroughPosition",
"strikethroughThickness",
"string",
"stroke",
"strokeDasharray",
"strokeDashoffset",
"strokeLinecap",
"strokeLinejoin",
"strokeMiterlimit",
"strokeOpacity",
"strokeWidth",
"strong",
"style",
"sub",
"summary",
"sup",
"suppressContentEditableWarning",
"surfaceScale",
"svg",
"switch",
"symbol",
"systemLanguage",
"tabIndex",
"table",
"tableValues",
"target",
"targetX",
"targetY",
"tbody",
"td",
"template",
"text",
"textAnchor",
"textarea",
"textDecoration",
"textLength",
"textPath",
"textRendering",
"tfoot",
"th",
"thead",
"time",
"title",
"to",
"tr",
"track",
"transform",
"tref",
"tspan",
"type",
"typeof",
"u",
"u1",
"u2",
"ul",
"underlinePosition",
"underlineThickness",
"unicode",
"unicodeBidi",
"unicodeRange",
"unitsPerEm",
"unselectable",
"use",
"useMap",
"vAlphabetic",
"value",
"values",
"var",
"vectorEffect",
"version",
"vertAdvY",
"vertOriginX",
"vertOriginY",
"vHanging",
"video",
"vIdeographic",
"view",
"viewBox",
"viewTarget",
"visibility",
"vkern",
"vMathematical",
"vocab",
"wbr",
"width",
"widths",
"wmode",
"wordSpacing",
"wrap",
"writingMode",
"x",
"x1",
"x2",
"xChannelSelector",
"xHeight",
"xlinkActuate",
"xlinkArcrole",
"xlinkHref",
"xlinkRole",
"xlinkShow",
"xlinkTitle",
"xlinkType",
"xmlBase",
"xmlLang",
"xmlns",
"xmlnsXlink",
"xmlSpace",
"y",
"y1",
"y2",
"yChannelSelector",
"z",
"zoomAndPan"
], Zl = an([
{
name: "name",
input: pl,
inputProps: { options: Gt(Ul, !1) }
},
{ name: "value" }
]), Jl = ({ confirm: t }) => {
const e = P("common");
return /* @__PURE__ */ i(X, { icon: /* @__PURE__ */ i(_a, {}), onClick: t, color: "green", appearance: "primary", size: "xs", children: e("apply") });
}, Gl = (t) => {
const { store: e } = t.componentData, n = !!t.getComputeType(), o = L(
() => e.htmlAttributes ? [...e.htmlAttributes] : e.htmlAttributes,
[e]
), [r, a] = T(o), [s, l] = T(!1), c = h((u) => {
a(u), l(!0);
}, []), d = h(() => {
e.htmlAttributes = r, l(!1);
}, [e, r]);
return A(() => {
a(o), l(!1);
}, [o, e]), /* @__PURE__ */ p(R, { children: [
/* @__PURE__ */ i(j, { ...t, children: s && /* @__PURE__ */ i(Jl, { confirm: d }) }),
!n && /* @__PURE__ */ i(rn, { data: r ?? [], onChange: c, columns: Zl })
] });
}, ql = y("RawAttributesInput", Gl), Ho = ({ onClick: t }) => {
const e = P("propertiesEditor"), n = L(() => e("clean"), [e]), o = L(() => K(["rs-picker-clean", "rs-btn-close"]), []);
return /* @__PURE__ */ i(le, { hint: n, children: /* @__PURE__ */ i("button", { className: o, onClick: t, children: /* @__PURE__ */ i(ue, {}) }) });
}, Pt = v(Qt)`
&& {
height: 23px;
display: flex;
align-items: center;
width: 100%;
.rs-checkbox-checker {
padding-left: 0;
margin-left: -10px;
}
}
`, Yl = v.div`
display: flex;
.rs-picker-clean.rs-btn-close {
color: var(--rs-text-secondary);
}
`, Xl = (t) => {
const { id: e, value: n, onChange: o, onClean: r } = t;
return /* @__PURE__ */ p(Yl, { children: [
/* @__PURE__ */ i(Pt, { id: e, checked: !!n, onChange: (a, s) => o(s) }),
/* @__PURE__ */ i(Ho, { onClick: r })
] });
}, jt = (t) => /* @__PURE__ */ i(j, { ...t, children: /* @__PURE__ */ i(Xl, { ...t }) });
class mn {
/**
* Constructor.
* @param header the function editor header.
* @param onSave the callback function called when the source code is saved.
* @param onClose the callback function called when the editor is closed.
* @param onCompile the callback function called at compile time.
* @param source the source code.
* @param beginContextLine the context line before the source code.
* @param endContextLine the context line after the source code.
*/
constructor(e, n, o, r, a, s, l) {
this.header = e, this.onSave = n, this.onClose = o, this.onCompile = r, this.source = a, this.beginContextLine = s, this.endContextLine = l;
}
}
const hn = (t) => {
const e = P("common");
return /* @__PURE__ */ i(At, { hint: e("edit"), icon: /* @__PURE__ */ i(W, { icon: ss }), ...t });
}, Ql = (t) => {
const e = P("common");
return /* @__PURE__ */ i(At, { hint: e("clone"), icon: /* @__PURE__ */ i(Ka, {}), ...t });
}, ye = (t) => {
const e = P("common");
return /* @__PURE__ */ i(At, { hint: e("remove"), icon: /* @__PURE__ */ i(ue, {}), ...t });
}, e1 = { borderStyle: "dashed" }, t1 = `/** @type {IFormData} */
var form;
`, n1 = (t) => {
var D, z;
const { value: e, setComputeCode: n, onClean: o, onChange: r, annotation: a, componentData: s } = t, l = k(), { t: c } = F(), { label: d } = dn(a, s.model.type), u = `${c("bottomPanel.editProperty")}: ${s.key}.${d}`, m = ((D = a.editorProps) == null ? void 0 : D.beginContextLine) ?? "", g = ((z = a.editorProps) == null ? void 0 : z.endContextLine) ?? "}", C = h(() => {
l.currentEditable = void 0;
}, [l]), f = h((M) => `return (${m}${M}${g})`, [m, g]), w = h((M) => {
const U = f(M);
n(U, "function"), r(M);
}, [f, r, n]), S = h((M) => {
try {
const U = f(M);
return { error: !1, result: new Function("form", U)() };
} catch (U) {
return { error: !0, exceptions: [U] };
}
}, [f]), x = h(() => {
const M = new mn(
u,
w,
C,
S,
e,
`${t1}
${m}`,
g
);
l.editFunction(M);
}, [m, l, g, w, C, S, u, e]);
return /* @__PURE__ */ i(j, { ...t, children: /* @__PURE__ */ p(ne, { children: [
/* @__PURE__ */ i($, { onClick: x, size: "xs", appearance: "ghost", block: !0, style: e1, children: c("annotation.code.hint") }),
!!e && /* @__PURE__ */ i(ye, { onClick: o, hintPlacement: "auto" })
] }) });
}, o1 = v(ce)`
&& {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>');
background-color: ${({ color: t }) => t ?? "var(--rs-btn-default-bg)"};
}
`, r1 = v(te.Button)`
&& {
background-color: var(--rs-btn-default-bg) !important;
position: absolute;
inset-inline-end: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding: 6px 8px;
}
`;
function i1(t) {
const { r: e, g: n, b: o, a: r } = t;
return `rgba(${e}, ${n}, ${o}, ${r})`;
}
function a1(t) {
const e = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/, [, n, o, r, a] = e.exec(t) || [];
return { r: Number(n), g: Number(o), b: Number(r), a: Number(a) };
}
const s1 = (t) => {
const { value: e, onChange: n, onClean: o } = t, r = a1(e ?? "rgba(255, 255, 255, 0)");
return /* @__PURE__ */ i(j, { ...t, children: /* @__PURE__ */ p(te, { inside: !0, style: { width: "100%" }, size: "xs", children: [
/* @__PURE__ */ i(ve, { placement: "auto", trigger: "hover", speaker: /* @__PURE__ */ i(en, { children: /* @__PURE__ */ i(ds, { color: r, onChange: (s) => n(i1(s)) }) }), enterable: !0, children: /* @__PURE__ */ i(o1, { color: e, readOnly: !0 }) }),
/* @__PURE__ */ i(r1, { onClick: o, children: /* @__PURE__ */ i(ue, {}) })
] }) });
}, l1 = v.div`
display: inline-grid;
vertical-align: top;
align-items: center;
position: relative;
width: 100%;
&::after,
& > textarea {
min-width: 1em !important;
width: auto !important;
height: 100% !important;
grid-area: 2 / 1;
resize: none !important;
max-height: 6em !important;
}
&::after {
content: attr(data-contents) ' ';
visibility: hidden;
// text behaviour must match with textarea
font-size: inherit !important;
white-space: pre-wrap;
overflow-wrap: break-word;
}
button {
position: absolute;
top: 4px;
right: 14px;
color: var(--rs-text-secondary);
width: 12px;
height: 12px;
}
`, Oo = (t) => {
const { value: e = "", annotation: n, onChange: o, onClean: r } = t, a = G(null), s = G(null);
return A(() => {
const l = s.current;
l && (l.dataset.contents = e);
}, [e]), A(() => {
const l = a.current, c = s.current;
if (l && c) {
const d = window.getComputedStyle(l);
c.style.lineHeight = d.lineHeight, c.style.fontSize = d.fontSize;
}
}, []), /* @__PURE__ */ p(l1, { ref: s, "data-testid": `resizable-string-input-${t.annotation.key}`, children: [
/* @__PURE__ */ i(
ce,
{
ref: a,
rows: 1,
name: n.key,
value: e,
onChange: o,
size: "xs",
as: "textarea",
...t.annotation.editorProps
}
),
/* @__PURE__ */ i(Ho, { onClick: r })
] });
}, jo = (t) => /* @__PURE__ */ i(j, { ...t, children: /* @__PURE__ */ i(Oo, { ...t }) }), c1 = (t) => {
const { componentData: e } = t, n = e.store.dataKey, o = h((a) => {
e.store.dataKey = a;
}, [e]), r = h(() => {
e.store.dataKey = void 0;
}, [e]);
return /* @__PURE__ */ i(jo, { ...t, value: n, onChange: o, onClean: r });
}, d1 = (t) => {
const { onChange: e, onClean: n } = t;
let { value: o } = t;
return typeof o == "string" && (o = new Date(o)), /* @__PURE__ */ i(j, { ...t, children: /* @__PURE__ */ i(
ho,
{
editable: !1,
cleanable: !0,
placement: "auto",
value: o ?? null,
onChange: e,
onClean: n,
size: "xs"
}
) });
}, u1 = (t) => {
var a;
const { store: e } = t.componentData, n = (a = e.disableDataBinding) == null ? void 0 : a.value, o = h((s) => {
e.disableDataBinding = { value: s };
}, [e]), r = h(() => {
e.disableDataBinding = void 0;
}, [e]);
return /* @__PURE__ */ i(jt, { ...t, value: n, onChange: o, onClean: r });
};
function pn(t) {
return L(() => ja(t), [t]).get();
}
const [
/**
* **Internal use only.**
*/
je,
/**
* **Internal use only.**
*/
m1
] = $e("ActionDataContext"), gn = ({ width: t, ...e }) => /* @__PURE__ */ i(Sa, { ...e, style: { width: t } }), h1 = [
{ label: "True", value: !0 },
{ label: "False", value: !1 }
], p1 = ({ name: t }) => {
var r;
const e = je(), n = h((a) => {
const s = tn({}, e.args);
delete s[t], typeof a < "u" && (s[t] = a), e.args = s;
}, [e, t]), o = h(() => {
n(void 0);
}, [n]);
return /* @__PURE__ */ i(
gn,
{
onClean: o,
data: h1,
searchable: !1,
value: ((r = e.args) == null ? void 0 : r[t]) ?? "",
onSelect: n,
size: "sm",
width: "100%"
}
);
}, g1 = y("InputBoolean", p1), C1 = { borderStyle: "dashed" }, Wo = `/**
* @param {ActionEventArgs} e the action arguments.
* @param {} args the action parameters arguments.
* @param {Array} userArgs the rest parameters passed to the function form user space code.
*/
async function ArgumentCallback(e, args, ...userArgs) {`, _o = "}", f1 = (t) => `${Wo}${t}${_o}`, b1 = (t) => {
var a;
const e = je(), n = (a = e == null ? void 0 : e.args) == null ? void 0 : a[t], o = n == null ? void 0 : n.body, r = h((s) => {
e.args ?? (e.args = {}), e.args[t] = { type: "fn", body: s };
}, [e, t]);
return L(() => [o, r], [r, o]);
}, v1 = ({ name: t }) => {
const e = k(), [n, o] = b1(t), { t: r } = F(), a = O(), s = `${r("bottomPanel.editCodeAction")}: ${a.key}.${t}`, l = h(() => o(void 0), [o]), c = h(() => {
e.currentEditable = void 0;
}, [e]), d = h((m) => {
try {
const g = f1(m);
return { error: !1, result: new Function("e", "args", g)() };
} catch (g) {
return { error: !0, exceptions: [g] };
}
}, []), u = h(() => {
const m = new mn(
s,
o,
c,
d,
n || "",
Wo,
_o
);
e.editFunction(m);
}, [e, c, d, o, s, n]);
return /* @__PURE__ */ p(ne, { children: [
/* @__PURE__ */ i($, { onClick: u, size: "xs", appearance: "ghost", block: !0, style: C1, children: r("annotation.code.hint") }),
!!n && /* @__PURE__ */ i(ye, { onClick: l })
] });
}, y1 = y("InputFunction", v1), w1 = ({ name: t }) => {
var a;
const e = je(), n = typeof ((a = e.args) == null ? void 0 : a[t]) < "u" ? Number(e.args[t]) : "", o = h((s) => {
const l = tn({}, e.args);
delete l[t], (typeof s == "string" || typeof s == "number") && (l[t] = Number(s)), e.args = l;
}, [e, t]), r = h(() => {
o(null);
}, [o]);
return /* @__PURE__ */ p(te, { size: "sm", children: [
/* @__PURE__ */ i(xt, { value: n, onChange: o, onReset: r, size: "sm" }),
/* @__PURE__ */ i(te.Button, { onClick: r, children: /* @__PURE__ */ i(ue, {}) })
] });
}, k1 = y("InputNumber", w1), x1 = ({ name: t }) => {
var r, a;
const e = je(), n = ((a = (r = e.args) == null ? void 0 : r[t]) == null ? void 0 : a.toString()) ?? "";
return /* @__PURE__ */ i(te, { size: "sm", children: /* @__PURE__ */ i(ce, { value: n, onChange: (s) => e.args = tn({}, e.args, { [t]: s }) }) });
}, S1 = y("InputString", x1), L1 = (t) => {
switch (t) {
case "string":
return S1;
case "number":
return k1;
case "boolean":
return g1;
case "function":
return y1;
}
}, E1 = ({ data: t }) => {
const [e, n] = t, o = L1(n);
return /* @__PURE__ */ p(B, { children: [
/* @__PURE__ */ i("label", { children: e }),
/* @__PURE__ */ i(o, { name: e })
] });
}, M1 = y("ArgumentItem", E1), A1 = v($)`
padding: 5px !important;
border-radius: 0 !important;
outline: 0 !important;
color: var(--rs-btn-subtle-text) !important;
&:focus {
box-shadow: none;
background-color: initial;
}
`, T1 = () => {
const t = je();
A(() => () => {
vo(t.args) && delete t.args;
}, [t.args]);
}, P1 = { marginBlock: 8, paddingInline: 10 }, F1 = { marginTop: -2 }, R1 = () => {
const t = H(), e = je(), n = h(() => t.findAction(e), [e, t]), o = pn(n), [r, a] = mo((c) => !c, !1), s = r ? xo : Mt, l = h((c) => c.stopPropagation(), []);
return T1(), Object.keys(o.params).length ? /* @__PURE__ */ p("div", { onMouseDown: l, children: [
/* @__PURE__ */ i(po.Collapse, { in: r, unmountOnExit: !0, children: /* @__PURE__ */ i(B, { gap: 1, style: P1, children: Object.entries(o.params).map((c, d) => /* @__PURE__ */ i(M1, { data: c }, d)) }) }),
/* @__PURE__ */ i(A1, { block: !0, onClick: a, children: /* @__PURE__ */ p(R, { children: [
us("actions.arguments"),
/* @__PURE__ */ i(s, { style: F1 })
] }) })
] }) : null;
}, D1 = y("ArgumentList", R1), I1 = ({ data: t, onRemove: e }) => {
const n = k(), o = H(), r = t.type === "code", a = h(() => {
const s = o.form.actions[t.name];
if (!s) {
console.error(`Cannot find custom action: '${t.name}'`);
return;
}
const l = { name: t.name, actionDefinition: s };
n.editCodeAction(l);
}, [n, t.name, o.form.actions]);
return /* @__PURE__ */ p(m1, { value: t, children: [
/* @__PURE__ */ p(ne, { style: { justifyContent: "space-between", padding: 8 }, children: [
/* @__PURE__ */ i("b", { style: { color: "violet", marginLeft: 5 }, children: `${t.name || "Action"}` }),
/* @__PURE__ */ p(me, { size: "xs", children: [
r && /* @__PURE__ */ i(hn, { onClick: a }),
/* @__PURE__ */ i(ye, { onClick: e })
] })
] }),
/* @__PURE__ */ i(D1, {})
] });
}, N1 = y("ActionItem", I1), B1 = v(go)`
${$o}
&& {
box-shadow: none;
}
`, z1 = v(go.Item)`
${Vo}
&& {
overflow: hidden;
padding: 0;
box-shadow: none;
flex-direction: column;
align-items: initial;
}
&.rs-list-item-helper {
outline: 2px solid var(--rs-btn-primary-bg);
}
`;
function V1({ data: t, index: e, onRemove: n }) {
const o = h(() => n(e), [e, n]);
return /* @__PURE__ */ i(z1, { index: e, children: /* @__PURE__ */ i(N1, { data: t, onRemove: o }) });
}
const $1 = (t) => {
var a;
const e = t.annotation.key, n = (a = t.componentData.store.events) == null ? void 0 : a[e], o = h((s) => n == null ? void 0 : n.splice(s, 1), [n]), r = h((s) => {
if (!n || !(s != null && s.oldIndex || s != null && s.newIndex))
return;
const l = n[s.oldIndex];
n.splice(s.oldIndex, 1), n.splice(s.newIndex, 0, l);
}, [n]);
return n != null && n.length ? /* @__PURE__ */ i(B1, { sortable: !0, onSort: r, children: n.map((s, l) => /* @__PURE__ */ i(V1, { index: l, data: s, onRemove: o }, s[Mi])) }) : null;
}, H1 = y("ActionList", $1), O1 = ({ onSelect: t, annotation: e }) => {
var u;
const n = H(), o = k(), r = (u = o.oneSelected) == null ? void 0 : u.store, a = e.key, s = n.form.actionNames, l = P("actions"), c = () => {
t(), r && o.addCodeAction((m) => {
Ze.addEventHandler(r, a, { name: m.name, type: "code" });
});
}, d = (m) => /* @__PURE__ */ i(
V.Item,
{
onClick: () => t({ name: m, type: "code" }),
style: { position: "relative", display: "flex", justifyContent: "space-between" },
children: /* @__PURE__ */ i("span", { style: { whiteSpace: "break-spaces" }, children: m })
},
m
);
return /* @__PURE__ */ p(V.Menu, { title: l("code"), children: [
s == null ? void 0 : s.map(d),
!!(s != null && s.length) && /* @__PURE__ */ i(V.Item, { disabled: !0, children: /* @__PURE__ */ i(La, { style: { marginTop: 0, marginBottom: 0 } }) }),
/* @__PURE__ */ i(V.Item, { children: l("addCodeAction"), icon: /* @__PURE__ */ i(tt, {}), onClick: c })
] });
}, j1 = y("CodeActionsList", O1), W1 = ({ onSelect: t }) => {
const e = H(), n = P("actions"), o = Object.keys(e.commonActions).map(
(r) => /* @__PURE__ */ i(V.Item, { children: r, onClick: () => t({ name: r, type: "common" }) }, r)
);
return /* @__PURE__ */ i(V.Menu, { title: n("common"), children: o });
}, _1 = ({ onSelect: t }) => {
const e = H(), n = P("actions"), o = e.formViewerPropsStore.actions;
if (!o)
return null;
const r = Object.keys(o).map(
(a) => /* @__PURE__ */ i(V.Item, { children: a, onClick: () => t({ name: a, type: "custom" }) }, a)
);
return /* @__PURE__ */ i(V.Menu, { title: n("custom"), children: r });
}, K1 = Ae(({ onSelect: t, annotation: e, ...n }, o) => /* @__PURE__ */ i(en, { ref: o, ...n, full: !0, children: /* @__PURE__ */ p(V.Menu, { children: [
/* @__PURE__ */ i(W1, { onSelect: t, annotation: e }),
/* @__PURE__ */ i(j1, { onSelect: t, annotation: e }),
/* @__PURE__ */ i(_1, { onSelect: t, annotation: e })
] }) })), U1 = (t) => {
const e = P("actions"), { componentData: n, annotation: o } = t, r = n.store, a = o.key, s = G(null), l = h((c) => {
var d;
(d = s.current) == null || d.close(), c && Ze.addEventHandler(r, a, c);
}, [s, r, a]);
return /* @__PURE__ */ i(
ve,
{
placement: "leftStart",
ref: s,
trigger: "click",
speaker: /* @__PURE__ */ i(K1, { onSelect: l, annotation: o }),
children: /* @__PURE__ */ i(X, { icon: /* @__PURE__ */ i(tt, {}), size: "sm", children: e("addAction") })
}
);
}, Z1 = y("AddActionButton", U1), J1 = v.div`
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
`, G1 = v.h6`
margin-left: 10px;
`, q1 = (t) => {
const e = t.annotation.key;
return /* @__PURE__ */ p(J1, { children: [
/* @__PURE__ */ i(G1, { children: e }),
/* @__PURE__ */ i(H1, { ...t }),
/* @__PURE__ */ i(Z1, { ...t })
] });
}, Y1 = (t) => {
const e = H(), { id: n, value: o, onChange: r, showError: a } = t, [s, l] = T(!1), [c, d] = T(o), u = P("propertiesEditor");
A(() => {
d(o), l(!1);
}, [o]);
const m = h((S) => e.reduceScreen((x, D) => D.key === S ? x + 1 : x, 0) === 0 && S.length > 0, [e]), g = h((S) => {
const x = m(S);
let D;
if (!x && S !== o) {
const z = S.length > 0 ? "keyMustBeUnique" : "keyMustNotBeEmpty";
D = u(z);
}
a == null || a(D), l(x), d(S);
}, [o, u, a, m]), C = h(() => {
s && (r(c), l(!1));
}, [s, r, c]), f = h((S) => {
S.key === "Enter" && s && C();
}, [s, C]), w = L(() => u("applyKey"), [u]);
return /* @__PURE__ */ p(te, { size: "xs", children: [
/* @__PURE__ */ i(ce, { id: n, value: c, onChange: g, onKeyDown: f }),
/* @__PURE__ */ i(le, { hint: w, children: /* @__PURE__ */ i(te.Button, { disabled: !s, onClick: C, children: /* @__PURE__ */ i(
W,
{
icon: ms,
color: s ? "green" : void 0
}
) }) })
] });
}, X1 = (t) => /* @__PURE__ */ i(j, { ...t, children: /* @__PURE__ */ i(Y1, { ...t }) }), Q1 = y("KeyInput", X1), ec = v(Ea)`
width: 100%;
`, tc = ({ data: t }, e) => {
const n = t.map((o) => ({
value: o.value,
label: o.label
}));
return e.forEach((o) => {
n.find((r) => r.value === o) || n.push({ value: o, label: yo(o) });
}), n;
}, nc = (t) => {
const { value: e, onChange: n, annotation: o, onClean: r } = t, a = tc(o, e);
return /* @__PURE__ */ i(j, { ...t, children: /* @__PURE__ */ i(
ec,
{
value: e ?? [],
data: a,
onChange: n,
onClean: r,
cleanable: !0,
creatable: !0,
size: "xs",
placement: "auto"
}
) });
};
function Cn(t, e) {
const o = e.store.props[t.key];
return qe(t) ? t.getNodeEditorType(o) : "node";
}
const oc = (t, e) => {
const { annotation: n, componentData: o } = t, { label: r } = dn(n, o.model.type), s = P("annotation.useDropzone")("hint").replace("{{propertyName}}", r), c = (qe(n) ? n.defaultEditor : void 0) ?? "string";
return L(() => {
const d = ro.calculable(!1).default(c === "node").hinted(s).build("useDropzone");
return {
...t,
value: e === "node",
annotation: