@react-form-builder/designer/dist/index.js

React Form Library Drag and Drop.

import { jsx as i, jsxs as g, Fragment as R } from "@emotion/react/jsx-runtime";
import y from "@emotion/styled";
import { createNonNullableContext as xe, upperFirst as Di, NoopLocalizationEngine as Ii, forwardRef as ke, coreComponentsDescriptions as Cn, isProperty as lt, isEqual as Ni, namedObserver as S, useStore as z, isObject as ct, toLabeledValues as Wt, isUndefined as q, useComponentData as O, isEmpty as to, KeySymbol as zi, ComponentStore as Oe, isTemplateType as Dt, getTemplateName as no, ActionEventArgsDeclaration as Bi, IFormDataDeclaration as Vi, isPromise as $i, DataValidator as Hi, isValidatorPropertyBlockType as Tt, createAnnotation as pt, useTooltipType as _t, cfDisableActionEditors as Oi, ComponentDataProvider as Le, key as ji, cfDisableMainComponentProperties as Wi, cfDisableStyleProperties as _i, cfDisableTooltipProperties as Ki, cfDisableAdditionalProperties as Ui, className as Zi, cfDisableStyles as De, cfDisableWrapperStyles as gt, cfDisableStylesForClassNameEditor as Ji, cfEnableInlineStylesEditor as Gi, useModalType as oo, useModalComponentData as qi, startCase as Ct, isContainer as _e, boolean as ro, timeFormat as Pt, createProperty as Yi, getValidatorPropertyBlockType as fn, globalDefaultLanguage as Kt, Language as re, BiDi as fe, findLanguage as Xi, merge as Qi, definePreset as ea, getKey as ta, ComponentData as na, nameObservable as Ke, BuilderView as io, ActionDefinition as ao, treeForEach as Ft, cfComponentIsPreset as He, embeddedFormModel as oa, cfDisableComponentRemove as so, PersistedFormVersion as ra, screenModel as bn, cfHideFromComponentPalette as ia, debounce as aa, isNull as Ut, isNumber as sa, CalculableResult as ie, generateUniqueName as la, AsyncFunction as Zt, calculatePropertyValue as ca, toUpper as lo, getEditableFormData as da, nameAutorun as Ae, checkSlotCondition as vn, groupBy as ua, ComponentTree as je, TemplateField as ma, slotModel as ha, node as pa, toArray as ga, DefaultWrapper as Ca, findTreeElementDepth as fa, isEqualWith as ba, emotionCache as yn, loadResource as co, unloadResource as va, useDisposable as ya, Store as wa, FormViewerPropsStore as Sa, ComponentState as xa, ViewerPropsProvider as ka, StoreProvider as La, getChildren as Ea, useViewerProps as Ma, BuilderModeProvider as Aa, BuilderThemeProvider as Ta, FormViewer as Pa, oneOf as uo, useErrorModel as Fa, tooltipType as Ra, useMobxConfig as Da, FluentLocalizationEngine as Ia, SuppressResizeObserverErrors as Na } from "@react-form-builder/core";
import { BuilderView as h3 } from "@react-form-builder/core";
import * as v from "react";
import { useState as P, useEffect as M, useCallback as u, useMemo as b, cloneElement as mo, useRef as U, useReducer as za, createElement as Ba, Component as Va, useImperativeHandle as $a, Suspense as Ha } from "react";
import { useToaster as Oa, Message as ft, Table as bt, Checkbox as Jt, InputNumber as vt, Input as se, InputPicker as Ue, IconButton as G, Form as J, Button as I, Tooltip as Ze, Whisper as be, InputGroup as Y, TagInput as ja, Popover as Gt, DatePicker as ho, SelectPicker as Wa, Animation as po, ButtonGroup as ue, List as go, Dropdown as B, Divider as _a, RadioGroup as Ka, Radio as Ua, TagPicker as Za, Schema as dt, CustomProvider as Ja, Modal as oe, Nav as Co, Loader as Ga } from "rsuite";
import { cx as W, css as Ie } from "@emotion/css";
import { observer as qa } from "mobx-react";
import { useTranslation as D, initReactI18next as Ya } from "react-i18next";
import { computed as Xa, makeAutoObservable as Je, runInAction as wn, observable as Fe, action as We, reaction as qt, autorun as Te, makeObservable as Qa } from "mobx";
import { useDrag as es, useDrop as fo, useDragLayer as Ge, DndProvider as ts } from "react-dnd";
import { getEmptyImage as ns, HTML5Backend as os } from "react-dnd-html5-backend";
import * as bo from "@fortawesome/free-solid-svg-icons/faCode.js";
import * as rs from "@fortawesome/free-solid-svg-icons/faGlobe.js";
import * as et from "@fortawesome/free-solid-svg-icons/faMarker.js";
import { css as Ne, CacheProvider as is } from "@emotion/react";
import { Plus as Ee, Close as de, Icon as yt, Code as vo, Check as as, Copy as ss, ArrowUpLine as yo, ArrowDownLine as wt, RemindFill as ls, SortUp as cs, SortDown as ds, ArrowRightLine as us, FileDownload as ms, FileUpload as hs, Export as ps, Import as gs, Search as Cs, ExpandOutline as fs, CollaspedOutline as bs } from "@rsuite/icons";
import { RgbaColorPicker as vs } from "react-colorful";
import { faMarker as ys, faGlobe as ws, faSitemap as Ss, faBars as xs } from "@fortawesome/free-solid-svg-icons";
import * as ks from "@fortawesome/free-solid-svg-icons/faCheck.js";
import { constrainedEditor as Ls } from "constrained-editor-plugin";
import Es, { loader as Ms } from "@monaco-editor/react";
import "monaco-editor";
import { format as wo, parse as As } from "date-fns";
import Sn, { t as Ts } from "i18next";
import Ps from "i18next-browser-languagedetector";
import Fs from "i18next-resources-to-backend";
import Rs from "date-fns/locale/ar-EG/index.js";
import Ds from "date-fns/locale/de/index.js";
import Is from "date-fns/locale/en-US/index.js";
import Ns from "date-fns/locale/es/index.js";
import zs from "date-fns/locale/fa-IR/index.js";
import Bs from "date-fns/locale/fr/index.js";
import So from "date-fns/locale/hi/index.js";
import Vs from "date-fns/locale/it/index.js";
import $s from "date-fns/locale/ja/index.js";
import Hs from "date-fns/locale/ko/index.js";
import xo from "date-fns/locale/sr/index.js";
import Os from "date-fns/locale/zh-CN/index.js";
import { zhCN as js, koKR as Ws, jaJP as _s, esES as Ks, frFR as Us, faIR as Zs, itIT as Js, enUS as ko, deDE as Gs, arEG as qs } from "rsuite/esm/locales/index.js";
import * as Ys from "@fortawesome/free-solid-svg-icons/faBookmark.js";
import { createPortal as Xs } from "react-dom";
import * as Qs from "@fortawesome/free-regular-svg-icons/faClone.js";
import * as el from "@fortawesome/free-regular-svg-icons/faTrashAlt.js";
import Lo from "scroll-into-view-if-needed";
import * as tl from "@fortawesome/free-regular-svg-icons/faBookmark.js";
import * as nl from "@fortawesome/free-solid-svg-icons/faRedo.js";
import * as It from "@fortawesome/free-solid-svg-icons/faSave.js";
import * as ol from "@fortawesome/free-solid-svg-icons/faUndo.js";
import * as rl from "@fortawesome/free-solid-svg-icons/faTrash.js";
import { saveAs as il } from "file-saver";
import Eo from "jszip";
import * as Mo from "@fortawesome/free-solid-svg-icons/faPaintBrush.js";
import * as Ao from "@fortawesome/free-solid-svg-icons/faPlay.js";
import * as al from "@fortawesome/free-solid-svg-icons/faMoon.js";
import * as sl from "@fortawesome/free-solid-svg-icons/faSun.js";
import * as ll from "@fortawesome/free-solid-svg-icons/faDesktop.js";
import * as cl from "@fortawesome/free-solid-svg-icons/faMobile.js";
import * as dl from "@fortawesome/free-solid-svg-icons/faTablet.js";
import * as To from "@fortawesome/free-solid-svg-icons/faSpellCheck.js";
import * as ul from "@fortawesome/free-solid-svg-icons/faList.js";
import * as ml from "@fortawesome/free-solid-svg-icons/faPlusCircle.js";
import * as hl from "@fortawesome/free-solid-svg-icons/faSitemap.js";
import * as pl from "@fortawesome/free-solid-svg-icons/faSlidersH.js";
import * as gl from "@fortawesome/free-solid-svg-icons/faBolt.js";
import * as Cl from "@fortawesome/free-solid-svg-icons/faCircle.js";
import { Resizable as fl } from "re-resizable";
const [
  /**
   * **Internal use only.**
   */
  x,
  /**
   * **Internal use only.**
   */
  bl
] = xe("BuildStoreContext"), le = (e, t) => {
  t.displayName = e;
  const n = t, o = `FE_${e}`;
  return function(a) {
    const l = x().props.customization?.[e];
    if (!l) return /* @__PURE__ */ i(n, { ...a, className: W(o, a.className) });
    if (l.hidden) return null;
    const { style: c, customRenderer: d } = l, m = W(o, a?.className, l.className, Ie`${c}`, e), h = /* @__PURE__ */ i(n, { ...a, className: m });
    return d ? d(h, t, a) : h;
  };
}, Z = (e, t) => le(e, qa(t)), qe = () => {
  const [e, t] = P(), n = Oa();
  return M(() => {
    if (!e) return;
    const o = e.placement || "bottomEnd", r = e.type || "info";
    n.push(/* @__PURE__ */ i(ft, { type: r, title: e.title, children: e.message }), {
      placement: o
    }), t(void 0);
  }, [e, n]), t;
}, Yt = () => {
  const e = x(), { t } = D(), n = qe();
  return (o) => {
    e.save(o).then(() => n({ type: "success", message: t("leftMenu.formSaved") })).catch((r) => {
      console.error(r), n({ type: "error", message: t("leftMenu.formSaveError") });
    });
  };
}, vl = (e) => {
  e.preventDefault(), e.stopPropagation();
}, yl = {
  default: [
    [{ key: "Delete" }, "deleteSelectedAction"],
    [{ key: "d", ctrl: !0 }, "cloneOneSelectedAction"],
    [{ key: "s", ctrl: !0 }, "saveFormAction"],
    [{ key: "z", ctrl: !0 }, "undoAction"],
    [{ key: "z", ctrl: !0, shift: !0 }, "redoAction"],
    [{ key: "y", ctrl: !0 }, "redoAction"]
  ],
  macos: [
    [{ key: "Delete" }, "deleteSelectedAction"],
    [{ key: "d", meta: !0 }, "cloneOneSelectedAction"],
    [{ key: "s", meta: !0 }, "saveFormAction"],
    [{ key: "z", meta: !0, shift: !0 }, "redoAction"],
    [{ key: "z", meta: !0 }, "undoAction"]
  ]
}, wl = () => navigator.userAgent.indexOf("Mac") === -1 ? "default" : "macos", Sl = (e) => {
  const t = wl();
  return yl[t].find(([r]) => !(r.key.toLowerCase() !== e.key.toLowerCase() || !!r.alt !== e.altKey || !!r.shift !== e.shiftKey || !!r.ctrl !== e.ctrlKey || !!r.meta !== e.metaKey))?.[1];
}, xl = () => {
  const e = x(), t = Yt();
  return b(() => ({
    deleteSelectedAction: () => {
      e.deleteSelectedComponents();
    },
    cloneOneSelectedAction: () => {
      const n = e.oneSelected;
      n && e.clone(n);
    },
    saveFormAction: () => {
      t();
    },
    undoAction: () => {
      e.undoer.undo();
    },
    redoAction: () => {
      e.undoer.redo();
    }
  }), [e, t]);
}, kl = () => {
  const e = xl();
  return u((t) => {
    if (document.activeElement !== document.body) return;
    const n = Sl(t);
    if (n) {
      const o = e[n];
      o && (vl(t), o());
    }
  }, [e]);
}, [
  Po,
  Ll
] = xe("LicenseContext"), { Cell: El } = bt, St = y(El)`
  padding: 0;

  & .rs-table-cell-content {
    padding: 9px 3px;
  }
`, Ml = y(Jt)`
  & .rs-checkbox-wrapper {
    inset-inline-start: 4px;
    top: 6px;
  }
`, Al = ({ rowData: e, dataKey: t, rowIndex: n, onChange: o, type: r, ...a }) => {
  const s = e[t] ?? "", l = r === "number" ? vt : se, c = u((d) => {
    e[t] = d, o?.(d, t, n);
  }, [t, o, e, n]);
  return /* @__PURE__ */ i(St, { ...a, children: /* @__PURE__ */ i(l, { value: s, onChange: c, size: "sm" }) });
}, s3 = ({ rowData: e, dataKey: t, rowIndex: n, onChange: o, ...r }) => {
  const a = e[t] ?? !1, s = u((l, c) => {
    e[t] = c, o?.(c, t, n);
  }, [t, o, e, n]);
  return /* @__PURE__ */ i(St, { ...r, children: /* @__PURE__ */ i(Ml, { inline: !0, checked: a, onChange: s }) });
}, Tl = ({ rowData: e, dataKey: t, rowIndex: n, options: o, onChange: r, ...a }) => {
  const s = e[t] ?? "", l = u((c) => {
    e[t] = c, r?.(c, t, n);
  }, [t, r, e, n]);
  return /* @__PURE__ */ i(St, { ...a, children: /* @__PURE__ */ i(
    Ue,
    {
      value: s,
      data: o,
      onChange: l,
      cleanable: !1,
      creatable: !0,
      block: !0,
      size: "sm",
      placement: "auto"
    }
  ) });
}, Pl = ({ rowData: e, rowIndex: t, onAction: n, icon: o, ...r }) => {
  const a = u(() => n(t), [n, t]);
  return /* @__PURE__ */ i(St, { ...r, children: /* @__PURE__ */ i(
    G,
    {
      appearance: "subtle",
      size: "sm",
      onClick: a,
      icon: o
    }
  ) });
}, { ErrorMessage: Fl } = J, { Column: Rl, HeaderCell: Dl } = bt, Il = { marginTop: 10 }, Nl = y(bt)`
  .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;
    }
  }
`, zl = /* @__PURE__ */ i(de, {}), Fo = (e) => {
  const [t, n] = P({}), [o, r] = P(!1), {
    // eslint-disable-next-line react-perf/jsx-no-new-array-as-prop
    data: a = [],
    onChange: s,
    columns: l,
    label: c,
    errorMessage: d,
    autoAdd: m,
    hideHeader: h,
    onAdd: p,
    onRemove: f,
    ...C
  } = e, { autoHeight: w, maxHeight: k } = t, T = h ? 0 : e.headerHeight ?? 40, E = e.rowHeight ?? 46, L = e.maxRows ?? 5, F = a.length <= L, Q = e.renderEmpty ? T + E : 0, me = T + E * L, Qe = a.length > L ? me : Q, he = u((ee) => {
    if (m) {
      const gn = ee[ee.length - 1];
      (!gn || Object.values(gn).some((Ri) => Ri)) && ee.push({});
    }
    s?.(ee);
  }, [m, s]), pe = u(() => {
    n({
      autoHeight: F,
      maxHeight: Qe
    });
  }, [Qe, F]), _ = u(() => {
    he?.([...a, {}]), r(!0), pe(), p?.(a.length);
  }, [a, he, pe, p]), K = u((ee) => {
    a.splice(ee, 1), he?.(a), pe(), f?.(ee);
  }, [a, he, pe, f]), ge = u(() => he?.([...a]), [he, a]), Pi = u(() => l?.map(
    (ee) => mo(ee, { onChange: ge })
  ), [l, ge]), Fi = u(() => {
    const ee = {};
    return o && (ee.y = Number.MAX_SAFE_INTEGER, r(!1)), ee;
  }, [o]);
  return M(pe, []), /* @__PURE__ */ g("div", { children: [
    !!c && /* @__PURE__ */ i("label", { children: c }),
    /* @__PURE__ */ g(
      Nl,
      {
        data: a,
        headerHeight: T,
        rowHeight: E,
        height: k,
        autoHeight: w,
        shouldUpdateScroll: Fi,
        className: W({ hideHeader: h }),
        ...C,
        children: [
          Pi(),
          /* @__PURE__ */ g(Rl, { width: 34, children: [
            /* @__PURE__ */ i(Dl, { children: /* @__PURE__ */ i("div", {}) }),
            /* @__PURE__ */ i(Pl, { onAction: K, icon: zl })
          ] })
        ]
      }
    ),
    !!d && /* @__PURE__ */ i(Fl, { show: !!d, placement: "bottomStart", children: d }),
    !m && /* @__PURE__ */ i(I, { appearance: "default", size: "sm", onClick: _, style: Il, block: !0, children: /* @__PURE__ */ i(Ee, {}) })
  ] });
}, { Column: Bl, HeaderCell: Vl } = bt, Ro = (e) => e.map(({ name: t, input: n, title: o, inputProps: r = {} }) => {
  const a = n ?? Al;
  return /* @__PURE__ */ g(Bl, { flexGrow: 1, children: [
    /* @__PURE__ */ i(Vl, { children: o ?? Di(t) }),
    /* @__PURE__ */ i(a, { dataKey: t, ...r })
  ] }, t);
});
let $l = 0;
function Hl(e) {
  const t = ++$l;
  return e ? `${e}${t}` : `${t}`;
}
function Do(e) {
  const t = U(null);
  return t.current || (t.current = Hl(e)), t.current;
}
const Xt = (e) => !(e.viewer.form.localization.engine instanceof Ii), [
  /**
   * **Internal use only.**
   */
  Ol,
  /**
   * **Internal use only.**
   */
  Qt
] = xe("TooltipPlacementContext"), xn = y.label`
  min-width: 80px;
  cursor: pointer;
  user-select: none;

  ${({ hinted: e }) => e && `
    :hover {
      text-decoration: underline;
      text-decoration-style: dotted;
    }
  `};

  &.required:after {
    padding-inline-start: 3px;
    content: "*";
    color: red;
  }
`, ae = ({ hint: e, children: t, ...n }) => {
  const o = Ol(), r = n.placement ?? o, a = b(() => /* @__PURE__ */ i(Ze, { children: e }), [e]);
  return e ? /* @__PURE__ */ i(be, { speaker: a, placement: r, trigger: "hover", children: t }) : /* @__PURE__ */ i(R, { children: t });
}, xt = ({ hint: e, children: t, ...n }) => e ? /* @__PURE__ */ i(ae, { hint: e, children: /* @__PURE__ */ i(xn, { ...n, hinted: !0, children: t }) }) : /* @__PURE__ */ i(xn, { ...n, children: t }), kt = ({ hint: e, hintPlacement: t, ...n }) => /* @__PURE__ */ i(ae, { hint: e, placement: t ?? "bottom", children: /* @__PURE__ */ i(G, { ...n, size: "xs" }) }), A = (e) => {
  const [t, { exists: n }] = D();
  return (o) => {
    const r = `${e}.${o}`;
    return n(r) ? t(r) : "";
  };
}, en = 5, $ = y.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: ${({ gap: e }) => e ?? en}px;
`, X = y.div`
  display: flex;
  gap: ${({ gap: e }) => e ?? en}px;
  ${({ stretchElements: e }) => e && "& > * { flex: 1; }"};
  ${({ spaceBetween: e }) => e && "justify-content: space-between"};
`, Io = y.div`
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;

  & > label {
    width: 100px;
    min-width: 80px;
  }
`, No = Ne`
  background-color: var(--rs-btn-default-bg);
  border-radius: 10px;
  padding: 8px;
`, zo = Ne`
  && {
    display: flex;
    position: relative;
    ${No};
    padding-inline-start: 12px;
    align-items: center;
    user-select: none;
    justify-content: space-between;
  }
`, Bo = Ne`
  && {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: ${en}px;
    overflow-y: auto;
  }
`, jl = Ne`
  && > * {
    cursor: pointer;

    :hover {
      background-color: var(--rs-btn-default-hover-bg);
    }
  }
`, Lt = y.div`
  ${zo}
`, tn = y.div`
  ${Bo}
  ${({ clickable: e = !1 }) => e && jl}
`, Wl = (e) => {
  if (e?.icon) {
    const [t, n, , , o] = e.icon;
    return { width: t, height: n, svgPathData: o };
  }
  return e;
}, _l = ke(({ faIcon: e, size: t, ...n }, o) => {
  const { width: r, height: a, svgPathData: s } = Wl(e);
  return /* @__PURE__ */ i(
    "svg",
    {
      viewBox: `0 0 ${r} ${a}`,
      width: `${t ?? 1}em`,
      height: `${t ?? 1}em`,
      fill: "currentColor",
      ...n,
      ref: o,
      children: /* @__PURE__ */ i("path", { d: s })
    }
  );
}), H = ke(({ icon: e, size: t, ...n }, o) => /* @__PURE__ */ i(yt, { as: _l, ref: o, faIcon: e, size: t, ...n })), nn = () => {
  const { i18n: e } = D(), t = e.language, { view: n, defaultLanguage: o } = x(), { i18nDescriptions: r } = n, a = o.fullCode;
  return u((s) => {
    if (r) {
      for (let l = 0; l < r.length; l++) {
        const c = r[l], d = s(c[t]) ?? s(c[a]);
        if (d) return d;
      }
      return s(Cn[t]) ?? s(Cn[a]);
    }
  }, [t, a, r]);
}, Kl = (e, t) => {
  const n = t.key, o = nn(), r = b(() => lt(t) ? o((l) => l?.components?.[e]?.props?.[n]?.name) ?? o((l) => l?.commonProperties?.[n]?.name) : void 0, [t, e, o, n]), a = b(() => lt(t) ? o((l) => l?.components?.[e]?.props?.[n]?.description) ?? o((l) => l?.commonProperties?.[n]?.description) : void 0, [t, e, o, n]);
  return b(() => ({ name: r, description: a }), [a, r]);
}, on = (e, t) => {
  const n = A(`annotation.${e.key}`), o = A(`${t}.${e.key}`), r = Kl(t, e), a = u((c) => o(c) || n(c), [n, o]), s = b(() => r?.description ?? e.hint ?? a("hint"), [e.hint, a, r?.description]), l = b(() => r?.name || a("name") || e.name, [e.name, a, r?.name]);
  return b(() => ({
    hint: s,
    label: l
  }), [s, l]);
}, Ul = y(G)`
  min-width: 24px;
  margin-inline-end: -6px;
`, Zl = { alignItems: "center" }, Jl = {
  disabled: {
    hint: "neitherCalculableNorLocalizable",
    icon: et,
    color: "var(--rs-btn-default-disabled-bg)"
  },
  calculation: {
    hint: "editCalculable",
    color: "var(--rs-btn-primary-bg)",
    icon: bo
  },
  localization: {
    hint: "editLocalizable",
    color: "var(--rs-btn-primary-bg)",
    icon: rs
  },
  calculable: {
    hint: "hintCalculable",
    icon: et
  },
  localizable: {
    hint: "hintLocalizable",
    icon: et
  },
  calculableAndLocalizable: {
    hint: "hintCalculableAndLocalizable",
    icon: et
  }
}, Gl = (e) => {
  const { annotation: t, getComputeCode: n, setComputeCode: o, disableCompute: r, getComputeType: a, hasComputeCode: s, componentData: l } = e, c = x(), d = !t.calculable && !t.localizable, m = A("propertiesEditor.codeButton"), h = a(), p = b(() => {
    const k = h === "function" && s("function"), T = Xt(c), E = T && h === "localization" && s("localization");
    return d ? "disabled" : k ? "calculation" : E ? "localization" : t.calculable && T && t.localizable ? "calculableAndLocalizable" : t.calculable ? "calculable" : t.localizable ? "localizable" : "disabled";
  }, [h, s, c, d, t.calculable, t.localizable]), f = b(() => {
    const { hint: k, icon: T, color: E } = Jl[p];
    return { icon: T, color: E, hint: m(k) };
  }, [p, m]), C = u(() => c.currentEditable = new Xr(
    r,
    o,
    n,
    a,
    s,
    t,
    l.key
  ), [t, l.key, r, n, a, s, o, c]), w = b(() => /* @__PURE__ */ i(H, { icon: f.icon, color: f.color }), [f.icon, f.color]);
  return /* @__PURE__ */ i(ae, { hint: f.hint, children: /* @__PURE__ */ i(
    Ul,
    {
      onClick: C,
      disabled: d,
      icon: w,
      size: "xs",
      appearance: "subtle"
    }
  ) });
}, ql = Z("PropertyCodeButton", Gl), Yl = le("PropertyLabel", xt), Xl = { width: "100%" }, Ql = (e) => /* @__PURE__ */ i("div", { style: Xl, ...e }), ec = le("PropertyInput", Ql), tc = y.div`
  min-width: 18px;
`, rn = (e) => {
  const { children: t, className: n, style: o, label: r, hint: a, required: s, leftButton: l, dataTestId: c, inputTestId: d } = e, m = Do("id-"), h = W({ required: s });
  return /* @__PURE__ */ g(Io, { style: o, className: n, "data-testid": c, children: [
    /* @__PURE__ */ g(X, { gap: 10, style: Zl, children: [
      l ?? /* @__PURE__ */ i(tc, {}),
      /* @__PURE__ */ i(Yl, { htmlFor: m, hint: a, className: h, children: /* @__PURE__ */ i(R, { children: r }) })
    ] }),
    !!t && /* @__PURE__ */ i(ec, { children: mo(t, { id: m, "data-testid": d }) })
  ] });
}, nc = (e) => {
  const { annotation: t, children: n, style: o, value: r } = e, { className: a, ...s } = e, l = e.componentData.model.type, c = b(() => t.calculable || t.localizable ? /* @__PURE__ */ i(ql, { ...s }) : void 0, [t.calculable, t.localizable, s]), { hint: d, label: m } = on(t, l), h = !Ni(r, t.default), p = [a, h ? "valueModified" : ""].filter((f) => !!f).join(" ");
  return /* @__PURE__ */ i(
    rn,
    {
      style: o,
      className: p,
      required: t.required,
      hint: d,
      label: m,
      leftButton: c,
      dataTestId: `${t.key}-labeled-wrapper`,
      inputTestId: `${t.key}-property-input`,
      children: n
    }
  );
}, N = le("LabeledProperty", nc), oc = [{ name: "value" }, { name: "label" }], rc = (e) => {
  const { value: t, onChange: n, annotation: o, componentData: r } = e, { onAdd: a, onRemove: s, columns: l, calculateEditorProps: c } = o.editorProps ?? {}, d = z(), m = b(() => Ro(l ?? oc), [l]), h = u((C) => {
    a?.(C, r, d);
  }, [d, r, a]), p = u((C) => {
    s?.(C, r, d);
  }, [d, r, s]), f = c?.(r, n) ?? {};
  return /* @__PURE__ */ g(R, { children: [
    /* @__PURE__ */ i(N, { ...e }),
    /* @__PURE__ */ i(
      Fo,
      {
        data: t,
        onChange: n,
        columns: m,
        onRemove: p,
        onAdd: h,
        ...f
      }
    )
  ] });
}, ic = S("ArrayInput", rc), Vo = (e) => {
  const { onClick: t, hint: n, className: o } = e, r = b(() => W(["rs-picker-clean", "rs-btn-close", o]), [o]);
  return /* @__PURE__ */ i(ae, { hint: n, children: /* @__PURE__ */ i("button", { className: r, onClick: t, children: /* @__PURE__ */ i(de, {}) }) });
}, an = (e) => {
  const { onClick: t, className: n } = e, o = A("propertiesEditor"), r = b(() => o("clean"), [o]);
  return /* @__PURE__ */ i(Vo, { hint: r, onClick: t, className: n });
}, kn = (e, t) => {
  try {
    return JSON.stringify(e, null, t);
  } catch {
    return;
  }
}, ac = (e) => {
  const { value: t, onChange: n, onClean: o, onValidate: r, editorKey: a, editorTitle: s } = e, l = x(), c = b(() => (ct(t) ? kn(t, 2) : t) ?? "", [t]), d = b(() => t ? kn(t)?.substring(0, 50) ?? "Error" : "", [t]), m = u(() => {
    l.editJsonCode(a, s, c, n, r);
  }, [l, a, s, n, c, r]);
  return /* @__PURE__ */ g(Y, { inside: !0, size: "xs", children: [
    /* @__PURE__ */ i(se, { value: d, onClick: m, readOnly: !0, color: "var(--rs-btn-ghost-text)" }),
    /* @__PURE__ */ i(Y.Button, { onClick: t ? o : m, children: t ? /* @__PURE__ */ i(de, {}) : /* @__PURE__ */ i(vo, {}) })
  ] });
}, sc = y($)`
  overflow-y: auto;
  max-height: 160px;
`, lc = y.div`
  display: flex;
  margin-inline-start: 4px;
  margin-bottom: 4px;
  margin-top: 4px;
`, cc = y.div`
  display: flex;
  justify-content: end;
`, Ln = Ie`
  color: var(--rs-text-primary);
`, dc = (e) => {
  const t = JSON.parse(e);
  if (typeof t != "object" || Array.isArray(t))
    throw new Error("The value must be an object");
}, uc = { marginTop: 10 }, mc = {
  marginInlineStart: 4,
  marginBottom: 4,
  marginTop: 4
}, hc = (e) => {
  const { value: t, onChange: n, onClean: o, annotation: r } = e, a = A("propertiesEditor"), s = b(() => t ?? [], [t]), l = u((C, w) => {
    const k = [...s];
    k[w] = C, n(k);
  }, [n, s]), c = u(() => {
    n?.([...s, {}]);
  }, [n, s]), d = u((C) => {
    s.splice(C, 1), n?.([...s]);
  }, [n, s]), m = b(() => s.map((C, w) => (k) => l(k, w)), [s, l]), h = b(() => s.map((C, w) => () => l({}, w)), [s, l]), p = b(() => s.map((C, w) => () => d(w)), [s, d]), f = s.map((C, w) => {
    const k = `${e.componentData.key}.${r.name}[${w}]`;
    return /* @__PURE__ */ g(lc, { style: mc, children: [
      /* @__PURE__ */ i(
        ac,
        {
          editorKey: k,
          editorTitle: k,
          value: C,
          onChange: m[w],
          onClean: h[w],
          onValidate: dc
        }
      ),
      /* @__PURE__ */ i(Vo, { onClick: p[w], hint: a("removeRow"), className: Ln })
    ] }, k);
  });
  return /* @__PURE__ */ g(R, { children: [
    /* @__PURE__ */ i(N, { ...e, children: /* @__PURE__ */ i(cc, { children: /* @__PURE__ */ i(an, { onClick: o, className: Ln }) }) }),
    /* @__PURE__ */ i(sc, { gap: 0, children: f }),
    /* @__PURE__ */ i(I, { appearance: "default", size: "sm", onClick: c, style: uc, block: !0, children: /* @__PURE__ */ i(Ee, {}) })
  ] });
}, pc = { width: "100%" }, gc = (e) => {
  const { value: t, onChange: n, onClean: o } = e, r = A("propertiesEditor");
  return /* @__PURE__ */ i(N, { ...e, children: /* @__PURE__ */ i(
    ja,
    {
      value: t ?? "",
      onChange: n,
      onClean: o,
      block: !0,
      size: "xs",
      style: pc,
      placeholder: r("setInputHint")
    }
  ) });
}, Cc = [
  "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"
], fc = Ro([
  {
    name: "name",
    input: Tl,
    inputProps: { options: Wt(Cc, !1) }
  },
  { name: "value" }
]), bc = /* @__PURE__ */ i(as, {}), vc = ({ confirm: e }) => {
  const t = A("common");
  return /* @__PURE__ */ i(G, { icon: bc, onClick: e, color: "green", appearance: "primary", size: "xs", children: t("apply") });
}, yc = (e) => {
  const { store: t } = e.componentData, n = !!e.getComputeType(), o = b(
    () => t.htmlAttributes ? [...t.htmlAttributes] : t.htmlAttributes,
    [t]
  ), [r, a] = P(o), [s, l] = P(!1), c = r ?? [], d = u((h) => {
    a(h), l(!0);
  }, []), m = u(() => {
    t.htmlAttributes = r, l(!1);
  }, [t, r]);
  return M(() => {
    a(o), l(!1);
  }, [o, t]), /* @__PURE__ */ g(R, { children: [
    /* @__PURE__ */ i(N, { ...e, children: s && /* @__PURE__ */ i(vc, { confirm: m }) }),
    !n && /* @__PURE__ */ i(Fo, { data: c, onChange: d, columns: fc })
  ] });
}, wc = S("RawAttributesInput", yc), Et = y(Jt)`
  && {
    height: 23px;
    display: flex;
    align-items: center;
    width: 100%;

    .rs-checkbox-checker {
      padding-inline-start: 0;
      margin-inline-start: -10px;
    }
  }
`, Sc = y.div`
  display: flex;

  .rs-picker-clean.rs-btn-close {
    color: var(--rs-text-secondary);
  }
`, xc = (e) => {
  const { id: t, value: n, onChange: o, onClean: r } = e, a = u((s, l) => {
    o(l);
  }, [o]);
  return /* @__PURE__ */ g(Sc, { children: [
    /* @__PURE__ */ i(Et, { id: t, checked: !!n, onChange: a }),
    /* @__PURE__ */ i(an, { onClick: r })
  ] });
}, Nt = (e) => /* @__PURE__ */ i(N, { ...e, children: /* @__PURE__ */ i(xc, { ...e }) }), kc = y(se)`
  && {
    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: e }) => e ?? "var(--rs-btn-default-bg)"};
  }
`, Lc = y(Y.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 Ec(e) {
  const { r: t, g: n, b: o, a: r } = e;
  return `rgba(${t}, ${n}, ${o}, ${r})`;
}
function Mc(e) {
  const t = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/, [, n, o, r, a] = t.exec(e) || [];
  return { r: Number(n), g: Number(o), b: Number(r), a: Number(a) };
}
const Ac = { width: "100%" }, Tc = (e) => {
  const { value: t, onChange: n, onClean: o } = e, r = b(() => Mc(t ?? "rgba(255, 255, 255, 0)"), [t]), a = u((l) => n(Ec(l)), [n]), s = b(() => /* @__PURE__ */ i(Gt, { children: /* @__PURE__ */ i(vs, { color: r, onChange: a }) }), [r, a]);
  return /* @__PURE__ */ i(N, { ...e, children: /* @__PURE__ */ g(Y, { inside: !0, style: Ac, size: "xs", children: [
    /* @__PURE__ */ i(be, { placement: "auto", trigger: "hover", speaker: s, enterable: !0, children: /* @__PURE__ */ i(kc, { color: t, readOnly: !0 }) }),
    /* @__PURE__ */ i(Lc, { onClick: o, children: /* @__PURE__ */ i(de, {}) })
  ] }) });
}, ze = y(Ue)`
  width: 100%;
`, Pc = (e) => {
  const { availableComponents: t } = x(), { value: n, onChange: o, annotation: r, onClean: a } = e, { filter: s = void 0, ...l } = { ...e.annotation.editorProps }, c = b(() => Object.values(t).flatMap((d) => d).filter((d) => s?.(d) ?? !0).map((d) => ({ value: d.model.type, label: d.model.name })), [t, s]);
  return /* @__PURE__ */ i(N, { ...e, children: /* @__PURE__ */ i(
    ze,
    {
      value: n ?? r.default ?? "",
      data: c,
      onChange: o,
      onClean: a,
      block: !0,
      cleanable: !0,
      size: "xs",
      ...l,
      placement: "autoVerticalEnd"
    }
  ) });
}, Fc = y.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;
    inset-inline-end: 14px;
    color: var(--rs-text-secondary);
    width: 12px;
    height: 12px;
  }
`, $o = (e) => {
  const { value: t = "", ["data-testid"]: n, annotation: o, onChange: r, onClean: a } = e, s = U(null), l = U(null);
  return M(() => {
    const c = l.current;
    c && (c.dataset.contents = t);
  }, [t]), M(() => {
    const c = s.current, d = l.current;
    if (c && d) {
      const m = globalThis.getComputedStyle(c);
      d.style.lineHeight = m.lineHeight, d.style.fontSize = m.fontSize;
    }
  }, []), /* @__PURE__ */ g(Fc, { ref: l, "data-testid": n, children: [
    /* @__PURE__ */ i(
      se,
      {
        ref: s,
        rows: 1,
        name: o.key,
        value: t,
        onChange: r,
        size: "xs",
        as: "textarea",
        ...e.annotation.editorProps
      }
    ),
    /* @__PURE__ */ i(an, { onClick: a })
  ] });
}, Ho = (e) => /* @__PURE__ */ i(N, { ...e, children: /* @__PURE__ */ i($o, { ...e }) }), Rc = (e) => {
  const { componentData: t } = e, n = t.store.dataKey, o = u((a) => {
    t.store.dataKey = a;
  }, [t]), r = u(() => {
    t.store.dataKey = void 0;
  }, [t]);
  return /* @__PURE__ */ i(Ho, { ...e, value: n, onChange: o, onClean: r });
}, Dc = (e) => {
  const { onChange: t, onClean: n } = e;
  let { value: o } = e;
  return typeof o == "string" && (o = new Date(o)), /* @__PURE__ */ i(N, { ...e, children: /* @__PURE__ */ i(
    ho,
    {
      editable: !1,
      cleanable: !0,
      placement: "auto",
      value: o ?? null,
      onChange: t,
      onClean: n,
      size: "xs"
    }
  ) });
}, Ic = (e) => {
  const { store: t } = e.componentData, n = t.disableDataBinding?.value, o = u((a) => {
    t.disableDataBinding = { value: a };
  }, [t]), r = u(() => {
    t.disableDataBinding = void 0;
  }, [t]);
  return /* @__PURE__ */ i(Nt, { ...e, value: n, onChange: o, onClean: r });
}, Nc = /* @__PURE__ */ i(H, { icon: ys }), sn = (e) => {
  const t = A("common");
  return /* @__PURE__ */ i(kt, { hint: t("edit"), icon: Nc, ...e });
}, zc = /* @__PURE__ */ i(ss, {}), Bc = (e) => {
  const t = A("common");
  return /* @__PURE__ */ i(kt, { hint: t("clone"), icon: zc, ...e });
}, Vc = /* @__PURE__ */ i(de, {}), ve = (e) => {
  const t = A("common");
  return /* @__PURE__ */ i(kt, { hint: t("remove"), icon: Vc, ...e });
};
function Oo(e) {
  return b(() => Xa(e), [e]).get();
}
const [
  /**
   * **Internal use only.**
   */
  Me,
  /**
   * **Internal use only.**
   */
  $c
] = xe("ActionDataContext"), ln = ({ width: e, ...t }) => {
  const n = b(() => ({ width: e }), [e]);
  return /* @__PURE__ */ i(Wa, { ...t, style: n });
}, Hc = [
  { label: "True", value: !0 },
  { label: "False", value: !1 }
], Oc = ({ name: e }) => {
  const t = Me(), n = u((r) => {
    const a = Object.assign({}, t.args);
    delete a[e], q(r) || (a[e] = r), t.args = a;
  }, [t, e]), o = u(() => {
    n(void 0);
  }, [n]);
  return /* @__PURE__ */ i(
    ln,
    {
      onClean: o,
      data: Hc,
      searchable: !1,
      value: t.args?.[e] ?? "",
      onSelect: n,
      size: "sm",
      width: "100%"
    }
  );
}, jc = S("InputBoolean", Oc);
class cn {
  /**
   * 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(t, n, o, r, a, s, l) {
    this.header = t, this.onSave = n, this.onClose = o, this.onCompile = r, this.source = a, this.beginContextLine = s, this.endContextLine = l;
  }
}
const [
  /**
   * **Internal use only.**
   */
  Wc,
  /**
   * **Internal use only.**
   */
  _c
] = xe("EventHandlerItemContext"), Kc = { borderStyle: "dashed" }, jo = `/**
 * @param {ActionEventArgs} e the action arguments.
 * @param {} args the action parameters arguments.
 * @param {Array} userArgs the rest parameters passed to the function from the user code.
 */
async function ArgumentCallback(e, args, ...userArgs) {`, Wo = "}", Uc = (e) => `${jo}${e}${Wo}`, Zc = (e) => {
  const t = Me(), o = t?.args?.[e]?.body, r = u((a) => {
    t.args ??= {}, t.args[e] = { type: "fn", body: a };
  }, [t, e]);
  return b(() => [o, r], [r, o]);
}, Jc = ({ name: e }) => {
  const t = x(), [n, o] = Zc(e), { t: r } = D(), a = O(), s = Me(), l = Wc(), c = `${l.eventName}[${l.index}]`, d = `${r("bottomPanel.editCodeAction")}: ${a.key}.${c} ${s.name}:${e}`, m = u(() => o(void 0), [o]), h = u(() => {
    t.currentEditable = void 0;
  }, [t]), p = u((C) => {
    try {
      const w = Uc(C);
      return { error: !1, result: new Function("e", "args", w)() };
    } catch (w) {
      return { error: !0, exceptions: [w] };
    }
  }, []), f = u(() => {
    const C = new cn(
      d,
      o,
      h,
      p,
      n || "",
      jo,
      Wo
    );
    t.editFunction(C);
  }, [t, h, p, o, d, n]);
  return /* @__PURE__ */ g(X, { children: [
    /* @__PURE__ */ i(I, { onClick: f, size: "xs", appearance: "ghost", block: !0, style: Kc, children: r("annotation.code.hint") }),
    !!n && /* @__PURE__ */ i(ve, { onClick: m })
  ] });
}, Gc = S("InputFunction", Jc), qc = ({ name: e }) => {
  const t = Me(), n = q(t.args?.[e]) ? "" : Number(t.args[e]), o = u((a) => {
    const s = Object.assign({}, t.args);
    delete s[e], (typeof a == "string" || typeof a == "number") && (s[e] = Number(a)), t.args = s;
  }, [t, e]), r = u(() => {
    o(null);
  }, [o]);
  return /* @__PURE__ */ g(Y, { size: "sm", children: [
    /* @__PURE__ */ i(vt, { value: n, onChange: o, onReset: r, size: "sm" }),
    /* @__PURE__ */ i(Y.Button, { onClick: r, children: /* @__PURE__ */ i(de, {}) })
  ] });
}, Yc = S("InputNumber", qc), Xc = ({ name: e }) => {
  const t = Me(), n = t.args?.[e]?.toString() ?? "", o = u((r) => {
    const a = Object.assign({}, t.args);
    return a[e] = r, t.args = a;
  }, [t, e]);
  return /* @__PURE__ */ i(Y, { size: "sm", children: /* @__PURE__ */ i(se, { value: n, onChange: o }) });
}, Qc = S("InputString", Xc), e1 = (e) => {
  switch (e) {
    case "string":
      return Qc;
    case "number":
      return Yc;
    case "boolean":
      return jc;
    case "function":
      return Gc;
  }
}, t1 = ({ data: e }) => {
  const [t, n] = e, o = e1(n);
  return /* @__PURE__ */ g($, { children: [
    /* @__PURE__ */ i("label", { children: t }),
    /* @__PURE__ */ i(o, { name: t })
  ] });
}, n1 = S("ArgumentItem", t1), o1 = y(I)`
  padding: 5px !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: var(--rs-btn-subtle-text) !important;

  &:focus {
    box-shadow: none;
    background-color: initial;
  }
`, r1 = () => {
  const e = Me();
  M(() => () => {
    to(e.args) && delete e.args;
  }, [e.args]);
}, i1 = { marginBlock: 8, paddingInline: 10 }, a1 = { marginTop: -2 }, s1 = () => {
  const e = z(), t = Me(), n = u(() => e.findAction(t), [t, e]), o = Oo(n), [r, a] = za((c) => !c, !1), s = r ? yo : wt, l = u((c) => c.stopPropagation(), []);
  return r1(), Object.keys(o.params).length ? /* @__PURE__ */ g("div", { onMouseDown: l, children: [
    /* @__PURE__ */ i(po.Collapse, { in: r, unmountOnExit: !0, children: /* @__PURE__ */ i($, { gap: 1, style: i1, children: Object.entries(o.params).map((c, d) => /* @__PURE__ */ i(n1, { data: c }, d)) }) }),
    /* @__PURE__ */ i(o1, { block: !0, onClick: a, children: /* @__PURE__ */ g(R, { children: [
      Ts("actions.arguments"),
      /* @__PURE__ */ i(s, { style: a1 })
    ] }) })
  ] }) : null;
}, l1 = S("ArgumentList", s1), c1 = { justifyContent: "space-between", padding: 8 }, d1 = { color: "violet", marginLeft: 5 }, u1 = ({ action: e, onRemove: t }) => {
  const n = x(), o = z(), { name: r, type: a } = e, s = a === "code", l = u(() => {
    const c = o.form.actions[r];
    if (!c) {
      console.error(`Cannot find custom action: '${r}'`);
      return;
    }
    const d = { name: r, actionDefinition: c };
    n.editCodeAction(d);
  }, [n, r, o.form.actions]);
  return /* @__PURE__ */ g($c, { value: e, children: [
    /* @__PURE__ */ g(X, { style: c1, children: [
      /* @__PURE__ */ i("b", { style: d1, children: `${r || "Action"}` }),
      /* @__PURE__ */ g(ue, { size: "xs", children: [
        s && /* @__PURE__ */ i(sn, { onClick: l }),
        /* @__PURE__ */ i(ve, { onClick: t })
      ] })
    ] }),
    /* @__PURE__ */ i(l1, {})
  ] });
}, m1 = S("ActionItem", u1), h1 = y(go)`
  ${Bo}
  && {
    box-shadow: none;
  }
`, p1 = y(go.Item)`
  ${zo}
  && {
    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);
  }
`, g1 = ({ action: e, index: t, onRemove: n, eventName: o }) => {
  const r = u(() => n(t), [t, n]), a = b(() => ({
    index: t,
    eventName: o
  }), [o, t]);
  return /* @__PURE__ */ i(_c, { value: a, children: /* @__PURE__ */ i(p1, { index: t, children: /* @__PURE__ */ i(m1, { action: e, onRemove: r }) }) });
}, C1 = S("ActionListItem", g1), f1 = (e) => {
  const t = e.annotation.key, n = e.componentData.store.events?.[t], o = u((a) => n?.splice(a, 1), [n]), r = u((a) => {
    if (!n || !(a?.oldIndex || a?.newIndex)) return;
    const s = n[a.oldIndex];
    n.splice(a.oldIndex, 1), n.splice(a.newIndex, 0, s);
  }, [n]);
  return n?.length ? /* @__PURE__ */ i(h1, { sortable: !0, onSort: r, children: n.map((a, s) => /* @__PURE__ */ i(C1, { index: s, action: a, onRemove: o, eventName: t }, a[zi])) }) : null;
}, b1 = S("ActionList", f1), v1 = { position: "relative", display: "flex", justifyContent: "space-between" }, y1 = { whiteSpace: "break-spaces" }, w1 = { marginTop: 0, marginBottom: 0 }, S1 = /* @__PURE__ */ i(Ee, {}), x1 = ({ onSelect: e, annotation: t }) => {
  const n = z(), o = x(), r = o.oneSelected?.store, a = t.key, s = n.form.actionNames, l = A("actions"), c = u(() => {
    e(), r && o.addCodeAction((h) => {
      Oe.addEventHandler(r, a, { name: h.name, type: "code" });
    });
  }, [e, r, o, a]), d = u((h) => () => e({ name: h, type: "code" }), [e]), m = u((h) => /* @__PURE__ */ i(B.Item, { onClick: d(h), style: v1, children: /* @__PURE__ */ i("span", { style: y1, children: h }) }, h), [d]);
  return /* @__PURE__ */ g(B.Menu, { title: l("code"), eventKey: "code", children: [
    s?.map(m),
    !!s?.length && /* @__PURE__ */ i(B.Item, { disabled: !0, children: /* @__PURE__ */ i(_a, { style: w1 }) }),
    /* @__PURE__ */ i(B.Item, { icon: S1, onClick: c, children: l("addCodeAction") })
  ] });
}, k1 = S("CodeActionsList", x1), L1 = ({ onSelect: e }) => {
  const t = z(), n = A("actions"), o = u((a) => () => e({ name: a, type: "common" }), [e]), r = b(() => Object.keys(t.commonActions).map((a) => /* @__PURE__ */ i(B.Item, { onClick: o(a), children: a }, a)), [o, t.commonActions]);
  return /* @__PURE__ */ i(B.Menu, { title: n("common"), eventKey: "common", children: r });
}, E1 = ({ onSelect: e }) => {
  const t = z(), n = A("actions"), { actions: o } = t.formViewerPropsStore, r = u((s) => () => e({ name: s, type: "custom" }), [e]), a = b(() => Object.keys(o ?? []).map((s) => /* @__PURE__ */ i(B.Item, { eventKey: `custom-${s}`, onClick: r(s), children: s }, s)), [o, r]);
  return o ? /* @__PURE__ */ i(B.Menu, { title: n("custom"), eventKey: "custom", children: a }) : null;
}, M1 = ke(({ onSelect: e, annotation: t, ...n }, o) => /* @__PURE__ */ i(Gt, { ref: o, ...n, full: !0, children: /* @__PURE__ */ g(B.Menu, { children: [
  /* @__PURE__ */ i(L1, { onSelect: e, ann