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

  & .rs-table-cell-content {
    padding: 9px 3px;
  }
`, Fl = y(Gt)`
  & .rs-checkbox-wrapper {
    inset-inline-start: 4px;
    top: 6px;
  }
`, Ro = ({ rowData: e, dataKey: t, rowIndex: n, onChange: o, type: r, ...a }) => {
  const s = e[t] ?? "", l = r === "number" ? xt : le, c = u((d) => {
    e[t] = d, o?.(d, t, n);
  }, [t, o, e, n]);
  return /* @__PURE__ */ i(Et, { ...a, children: /* @__PURE__ */ i(l, { value: s, onChange: c, size: "sm" }) });
}, Rl = ({ 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(Et, { ...r, children: /* @__PURE__ */ i(Fl, { inline: !0, checked: a, onChange: s }) });
}, Do = ({ 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(Et, { ...a, children: /* @__PURE__ */ i(
    Ze,
    {
      value: s,
      data: o,
      onChange: l,
      cleanable: !1,
      creatable: !0,
      block: !0,
      size: "sm",
      placement: "auto"
    }
  ) });
}, Io = ({ rowData: e, rowIndex: t, onAction: n, icon: o, ...r }) => {
  const a = u(() => n(t), [n, t]);
  return /* @__PURE__ */ i(Et, { ...r, children: /* @__PURE__ */ i(
    G,
    {
      appearance: "subtle",
      size: "sm",
      onClick: a,
      icon: o
    }
  ) });
}, { ErrorMessage: Dl } = J, { Column: Il, HeaderCell: Nl } = St, zl = { marginTop: 10 }, Bl = y(St)`
  .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;
    }
  }
`, Vl = /* @__PURE__ */ i(ue, {}), No = (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, he = T + E * L, et = a.length > L ? he : Q, pe = u((ee) => {
    if (m) {
      const fn = ee[ee.length - 1];
      (!fn || Object.values(fn).some((zi) => zi)) && ee.push({});
    }
    s?.(ee);
  }, [m, s]), ge = u(() => {
    n({
      autoHeight: F,
      maxHeight: et
    });
  }, [et, F]), _ = u(() => {
    pe?.([...a, {}]), r(!0), ge(), p?.(a.length);
  }, [a, pe, ge, p]), K = u((ee) => {
    a.splice(ee, 1), pe?.(a), ge(), f?.(ee);
  }, [a, pe, ge, f]), Ce = u(() => pe?.([...a]), [pe, a]), Ii = u(() => l?.map(
    (ee) => ho(ee, { onChange: Ce })
  ), [l, Ce]), Ni = u(() => {
    const ee = {};
    return o && (ee.y = Number.MAX_SAFE_INTEGER, r(!1)), ee;
  }, [o]);
  return M(ge, []), /* @__PURE__ */ g("div", { children: [
    !!c && /* @__PURE__ */ i("label", { children: c }),
    /* @__PURE__ */ g(
      Bl,
      {
        data: a,
        headerHeight: T,
        rowHeight: E,
        height: k,
        autoHeight: w,
        shouldUpdateScroll: Ni,
        className: W({ hideHeader: h }),
        ...C,
        children: [
          Ii(),
          /* @__PURE__ */ g(Il, { width: 34, children: [
            /* @__PURE__ */ i(Nl, { children: /* @__PURE__ */ i("div", {}) }),
            /* @__PURE__ */ i(Io, { onAction: K, icon: Vl })
          ] })
        ]
      }
    ),
    !!d && /* @__PURE__ */ i(Dl, { show: !!d, placement: "bottomStart", children: d }),
    !m && /* @__PURE__ */ i(N, { appearance: "default", size: "sm", onClick: _, style: zl, block: !0, children: /* @__PURE__ */ i(Ae, {}) })
  ] });
}, { Column: $l, HeaderCell: Hl } = St, Ol = { InputCell: Ro, CheckCell: Rl, SelectCell: Do, ActionCell: Io }, jl = (e) => e ? Ol[e] : void 0, zo = (e) => e.map(({ name: t, input: n, inputName: o, title: r, inputProps: a = {} }) => {
  const s = n ?? jl(o) ?? Ro;
  return /* @__PURE__ */ g($l, { flexGrow: 1, children: [
    /* @__PURE__ */ i(Hl, { children: r ?? Bi(t) }),
    /* @__PURE__ */ i(s, { dataKey: t, ...a })
  ] }, t);
});
let Wl = 0;
function _l(e) {
  const t = ++Wl;
  return e ? `${e}${t}` : `${t}`;
}
function Bo(e) {
  const t = U(null);
  return t.current || (t.current = _l(e)), t.current;
}
const Qt = (e) => !(e.viewer.form.localization.engine instanceof Vi), [
  /**
   * **Internal use only.**
   */
  Kl,
  /**
   * **Internal use only.**
   */
  en
] = ke("TooltipPlacementContext"), Ln = 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;
  }
`, se = ({ hint: e, children: t, ...n }) => {
  const o = Kl(), r = n.placement ?? o, a = b(() => /* @__PURE__ */ i(Je, { children: e }), [e]);
  return e ? /* @__PURE__ */ i(ve, { speaker: a, placement: r, trigger: "hover", children: t }) : /* @__PURE__ */ i(R, { children: t });
}, At = ({ hint: e, children: t, ...n }) => e ? /* @__PURE__ */ i(se, { hint: e, children: /* @__PURE__ */ i(Ln, { ...n, hinted: !0, children: t }) }) : /* @__PURE__ */ i(Ln, { ...n, children: t }), Mt = ({ hint: e, hintPlacement: t, ...n }) => /* @__PURE__ */ i(se, { 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) : "";
  };
}, tn = 5, $ = y.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: ${({ gap: e }) => e ?? tn}px;
`, X = y.div`
  display: flex;
  gap: ${({ gap: e }) => e ?? tn}px;
  ${({ stretchElements: e }) => e && "& > * { flex: 1; }"};
  ${({ spaceBetween: e }) => e && "justify-content: space-between"};
`, Vo = y.div`
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;

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

    :hover {
      background-color: var(--rs-btn-default-hover-bg);
    }
  }
`, Tt = y.div`
  ${Ho}
`, nn = y.div`
  ${Oo}
  ${({ clickable: e = !1 }) => e && Ul}
`, Zl = (e) => {
  if (e?.icon) {
    const [t, n, , , o] = e.icon;
    return { width: t, height: n, svgPathData: o };
  }
  return e;
}, Jl = Le(({ faIcon: e, size: t, ...n }, o) => {
  const { width: r, height: a, svgPathData: s } = Zl(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 })
    }
  );
}), O = Le(({ icon: e, size: t, ...n }, o) => /* @__PURE__ */ i(kt, { as: Jl, ref: o, faIcon: e, size: t, ...n })), on = () => {
  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(bn[t]) ?? s(bn[a]);
    }
  }, [t, a, r]);
}, Gl = (e, t) => {
  const n = t.key, o = on(), r = b(() => dt(t) ? o((l) => l?.components?.[e]?.props?.[n]?.name) ?? o((l) => l?.commonProperties?.[n]?.name) : void 0, [t, e, o, n]), a = b(() => dt(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]);
}, rn = (e, t) => {
  const n = A(`annotation.${e.key}`), o = A(`${t}.${e.key}`), r = Gl(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]);
}, ql = y(G)`
  min-width: 24px;
  margin-inline-end: -6px;
`, Yl = { alignItems: "center" }, Xl = {
  disabled: {
    hint: "neitherCalculableNorLocalizable",
    icon: tt,
    color: "var(--rs-btn-default-disabled-bg)"
  },
  calculation: {
    hint: "editCalculable",
    color: "var(--rs-btn-primary-bg)",
    icon: vo
  },
  localization: {
    hint: "editLocalizable",
    color: "var(--rs-btn-primary-bg)",
    icon: ls
  },
  calculable: {
    hint: "hintCalculable",
    icon: tt
  },
  localizable: {
    hint: "hintLocalizable",
    icon: tt
  },
  calculableAndLocalizable: {
    hint: "hintCalculableAndLocalizable",
    icon: tt
  }
}, Ql = (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 = Qt(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 } = Xl[p];
    return { icon: T, color: E, hint: m(k) };
  }, [p, m]), C = u(() => c.currentEditable = new ni(
    r,
    o,
    n,
    a,
    s,
    t,
    l.key
  ), [t, l.key, r, n, a, s, o, c]), w = b(() => /* @__PURE__ */ i(O, { icon: f.icon, color: f.color }), [f.icon, f.color]);
  return /* @__PURE__ */ i(se, { hint: f.hint, children: /* @__PURE__ */ i(
    ql,
    {
      onClick: C,
      disabled: d,
      icon: w,
      size: "xs",
      appearance: "subtle"
    }
  ) });
}, ec = Z("PropertyCodeButton", Ql), tc = re("PropertyLabel", At), nc = { width: "100%" }, oc = (e) => /* @__PURE__ */ i("div", { style: nc, ...e }), rc = re("PropertyInput", oc), ic = y.div`
  min-width: 18px;
`, an = (e) => {
  const { children: t, className: n, style: o, label: r, hint: a, required: s, leftButton: l, dataTestId: c, inputTestId: d } = e, m = Bo("id-"), h = W({ required: s });
  return /* @__PURE__ */ g(Vo, { style: o, className: n, "data-testid": c, children: [
    /* @__PURE__ */ g(X, { gap: 10, style: Yl, children: [
      l ?? /* @__PURE__ */ i(ic, {}),
      /* @__PURE__ */ i(tc, { htmlFor: m, hint: a, className: h, children: /* @__PURE__ */ i(R, { children: r }) })
    ] }),
    !!t && /* @__PURE__ */ i(rc, { children: ho(t, { id: m, "data-testid": d }) })
  ] });
}, ac = (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(ec, { ...s }) : void 0, [t.calculable, t.localizable, s]), { hint: d, label: m } = rn(t, l), h = !$i(r, t.default), p = [a, h ? "valueModified" : ""].filter((f) => !!f).join(" ");
  return /* @__PURE__ */ i(
    an,
    {
      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
    }
  );
}, I = re("LabeledProperty", ac), sc = [{ name: "value" }, { name: "label" }], lc = (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(() => zo(l ?? sc), [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(I, { ...e }),
    /* @__PURE__ */ i(
      No,
      {
        data: t,
        onChange: n,
        columns: m,
        onRemove: p,
        onAdd: h,
        ...f
      }
    )
  ] });
}, cc = S("ArrayInput", lc), jo = (e) => {
  const { onClick: t, hint: n, className: o } = e, r = b(() => W(["rs-picker-clean", "rs-btn-close", o]), [o]);
  return /* @__PURE__ */ i(se, { hint: n, children: /* @__PURE__ */ i("button", { className: r, onClick: t, children: /* @__PURE__ */ i(ue, {}) }) });
}, sn = (e) => {
  const { onClick: t, className: n } = e, o = A("propertiesEditor"), r = b(() => o("clean"), [o]);
  return /* @__PURE__ */ i(jo, { hint: r, onClick: t, className: n });
}, En = (e, t) => {
  try {
    return JSON.stringify(e, null, t);
  } catch {
    return;
  }
}, dc = (e) => {
  const { value: t, onChange: n, onClean: o, onValidate: r, editorKey: a, editorTitle: s } = e, l = x(), c = b(() => (ut(t) ? En(t, 2) : t) ?? "", [t]), d = b(() => t ? En(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(le, { value: d, onClick: m, readOnly: !0, color: "var(--rs-btn-ghost-text)" }),
    /* @__PURE__ */ i(Y.Button, { onClick: t ? o : m, children: t ? /* @__PURE__ */ i(ue, {}) : /* @__PURE__ */ i(yo, {}) })
  ] });
}, uc = y($)`
  overflow-y: auto;
  max-height: 160px;
`, mc = y.div`
  display: flex;
  margin-inline-start: 4px;
  margin-bottom: 4px;
  margin-top: 4px;
`, hc = y.div`
  display: flex;
  justify-content: end;
`, An = ze`
  color: var(--rs-text-primary);
`, pc = (e) => {
  const t = JSON.parse(e);
  if (typeof t != "object" || Array.isArray(t))
    throw new Error("The value must be an object");
}, gc = { marginTop: 10 }, Cc = {
  marginInlineStart: 4,
  marginBottom: 4,
  marginTop: 4
}, fc = (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(mc, { style: Cc, children: [
      /* @__PURE__ */ i(
        dc,
        {
          editorKey: k,
          editorTitle: k,
          value: C,
          onChange: m[w],
          onClean: h[w],
          onValidate: pc
        }
      ),
      /* @__PURE__ */ i(jo, { onClick: p[w], hint: a("removeRow"), className: An })
    ] }, k);
  });
  return /* @__PURE__ */ g(R, { children: [
    /* @__PURE__ */ i(I, { ...e, children: /* @__PURE__ */ i(hc, { children: /* @__PURE__ */ i(sn, { onClick: o, className: An }) }) }),
    /* @__PURE__ */ i(uc, { gap: 0, children: f }),
    /* @__PURE__ */ i(N, { appearance: "default", size: "sm", onClick: c, style: gc, block: !0, children: /* @__PURE__ */ i(Ae, {}) })
  ] });
}, bc = { width: "100%" }, vc = (e) => {
  const { value: t, onChange: n, onClean: o } = e, r = A("propertiesEditor");
  return /* @__PURE__ */ i(I, { ...e, children: /* @__PURE__ */ i(
    Ua,
    {
      value: t ?? "",
      onChange: n,
      onClean: o,
      block: !0,
      size: "xs",
      style: bc,
      placeholder: r("setInputHint")
    }
  ) });
}, yc = [
  "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"
], wc = zo([
  {
    name: "name",
    input: Do,
    inputProps: { options: _t(yc, !1) }
  },
  { name: "value" }
]), Sc = /* @__PURE__ */ i(ds, {}), xc = ({ confirm: e }) => {
  const t = A("common");
  return /* @__PURE__ */ i(G, { icon: Sc, onClick: e, color: "green", appearance: "primary", size: "xs", children: t("apply") });
}, kc = (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(I, { ...e, children: s && /* @__PURE__ */ i(xc, { confirm: m }) }),
    !n && /* @__PURE__ */ i(No, { data: c, onChange: d, columns: wc })
  ] });
}, Lc = S("RawAttributesInput", kc), Pt = y(Gt)`
  && {
    height: 23px;
    display: flex;
    align-items: center;
    width: 100%;

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

  .rs-picker-clean.rs-btn-close {
    color: var(--rs-text-secondary);
  }
`, Ac = (e) => {
  const { id: t, value: n, onChange: o, onClean: r } = e, a = u((s, l) => {
    o(l);
  }, [o]);
  return /* @__PURE__ */ g(Ec, { children: [
    /* @__PURE__ */ i(Pt, { id: t, checked: !!n, onChange: a }),
    /* @__PURE__ */ i(sn, { onClick: r })
  ] });
}, ht = (e) => /* @__PURE__ */ i(I, { ...e, children: /* @__PURE__ */ i(Ac, { ...e }) }), Mc = y(le)`
  && {
    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)"};
  }
`, Tc = 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 Pc(e) {
  const { r: t, g: n, b: o, a: r } = e;
  return `rgba(${t}, ${n}, ${o}, ${r})`;
}
function Fc(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 Rc = { width: "100%" }, Dc = (e) => {
  const { value: t, onChange: n, onClean: o } = e, r = b(() => Fc(t ?? "rgba(255, 255, 255, 0)"), [t]), a = u((l) => n(Pc(l)), [n]), s = b(() => /* @__PURE__ */ i(qt, { children: /* @__PURE__ */ i(xs, { color: r, onChange: a }) }), [r, a]);
  return /* @__PURE__ */ i(I, { ...e, children: /* @__PURE__ */ g(Y, { inside: !0, style: Rc, size: "xs", children: [
    /* @__PURE__ */ i(ve, { placement: "auto", trigger: "hover", speaker: s, enterable: !0, children: /* @__PURE__ */ i(Mc, { color: t, readOnly: !0 }) }),
    /* @__PURE__ */ i(Tc, { onClick: o, children: /* @__PURE__ */ i(ue, {}) })
  ] }) });
}, Me = y(Ze)`
  width: 100%;
`, Ic = (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(I, { ...e, children: /* @__PURE__ */ i(
    Me,
    {
      value: n ?? r.default ?? "",
      data: c,
      onChange: o,
      onClean: a,
      block: !0,
      cleanable: !0,
      size: "xs",
      ...l,
      placement: "autoVerticalEnd"
    }
  ) });
}, Nc = 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;
  }
`, Wo = (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(Nc, { ref: l, "data-testid": n, children: [
    /* @__PURE__ */ i(
      le,
      {
        ref: s,
        rows: 1,
        name: o.key,
        value: t,
        onChange: r,
        size: "xs",
        as: "textarea",
        ...e.annotation.editorProps
      }
    ),
    /* @__PURE__ */ i(sn, { onClick: a })
  ] });
}, _o = (e) => /* @__PURE__ */ i(I, { ...e, children: /* @__PURE__ */ i(Wo, { ...e }) }), zc = (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(_o, { ...e, value: n, onChange: o, onClean: r });
}, Bc = (e) => {
  const { onChange: t, onClean: n } = e;
  let { value: o } = e;
  return typeof o == "string" && (o = new Date(o)), /* @__PURE__ */ i(I, { ...e, children: /* @__PURE__ */ i(
    po,
    {
      editable: !1,
      cleanable: !0,
      placement: "auto",
      value: o ?? null,
      onChange: t,
      onClean: n,
      size: "xs"
    }
  ) });
}, Vc = (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(ht, { ...e, value: n, onChange: o, onClean: r });
}, $c = /* @__PURE__ */ i(O, { icon: ks }), ln = (e) => {
  const t = A("common");
  return /* @__PURE__ */ i(Mt, { hint: t("edit"), icon: $c, ...e });
}, Hc = /* @__PURE__ */ i(us, {}), Oc = (e) => {
  const t = A("common");
  return /* @__PURE__ */ i(Mt, { hint: t("clone"), icon: Hc, ...e });
}, jc = /* @__PURE__ */ i(ue, {}), ye = (e) => {
  const t = A("common");
  return /* @__PURE__ */ i(Mt, { hint: t("remove"), icon: jc, ...e });
};
function Ko(e) {
  return b(() => ns(e), [e]).get();
}
const [
  /**
   * **Internal use only.**
   */
  Te,
  /**
   * **Internal use only.**
   */
  Wc
] = ke("ActionDataContext"), cn = ({ width: e, ...t }) => {
  const n = b(() => ({ width: e }), [e]);
  return /* @__PURE__ */ i(Za, { ...t, style: n });
}, _c = [
  { label: "True", value: !0 },
  { label: "False", value: !1 }
], Kc = ({ name: e }) => {
  const t = Te(), 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(
    cn,
    {
      onClean: o,
      data: _c,
      searchable: !1,
      value: t.args?.[e] ?? "",
      onSelect: n,
      size: "sm",
      width: "100%"
    }
  );
}, Uc = S("InputBoolean", Kc);
class dn {
  /**
   * 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.**
   */
  Zc,
  /**
   * **Internal use only.**
   */
  Jc
] = ke("EventHandlerItemContext"), Gc = { borderStyle: "dashed" }, Uo = `/**
 * @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) {`, Zo = "}", qc = (e) => `${Uo}${e}${Zo}`, Yc = (e) => {
  const t = Te(), 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]);
}, Xc = ({ name: e }) => {
  const t = x(), [n, o] = Yc(e), { t: r } = D(), a = H(), s = Te(), l = Zc(), 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 = qc(C);
      return { error: !1, result: new Function("e", "args", w)() };
    } catch (w) {
      return { error: !0, exceptions: [w] };
    }
  }, []), f = u(() => {
    const C = new dn(
      d,
      o,
      h,
      p,
      n || "",
      Uo,
      Zo
    );
    t.editFunction(C);
  }, [t, h, p, o, d, n]);
  return /* @__PURE__ */ g(X, { children: [
    /* @__PURE__ */ i(N, { onClick: f, size: "xs", appearance: "ghost", block: !0, style: Gc, children: r("annotation.code.hint") }),
    !!n && /* @__PURE__ */ i(ye, { onClick: m })
  ] });
}, Qc = S("InputFunction", Xc), e1 = ({ name: e }) => {
  const t = Te(), 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(xt, { value: n, onChange: o, onReset: r, size: "sm" }),
    /* @__PURE__ */ i(Y.Button, { onClick: r, children: /* @__PURE__ */ i(ue, {}) })
  ] });
}, t1 = S("InputNumber", e1), n1 = ({ name: e }) => {
  const t = Te(), 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(le, { value: n, onChange: o }) });
}, o1 = S("InputString", n1), r1 = (e) => {
  switch (e) {
    case "string":
      return o1;
    case "number":
      return t1;
    case "boolean":
      return Uc;
    case "function":
      return Qc;
  }
}, i1 = ({ data: e }) => {
  const [t, n] = e, o = r1(n);
  return /* @__PURE__ */ g($, { children: [
    /* @__PURE__ */ i("label", { children: t }),
    /* @__PURE__ */ i(o, { name: t })
  ] });
}, a1 = S("ArgumentItem", i1), s1 = y(N)`
  padding: 5px !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: var(--rs-btn-subtle-text) !important;

  &:focus {
    box-shadow: none;
    background-color: initial;
  }
`, l1 = () => {
  const e = Te();
  M(() => () => {
    oo(e.args) && delete e.args;
  }, [e.args]);
}, c1 = { marginBlock: 8, paddingInline: 10 }, d1 = { marginTop: -2 }, u1 = () => {
  const e = z(), t = Te(), n = u(() => e.findAction(t), [t, e]), o = Ko(n), [r, a] = Ha((c) => !c, !1), s = r ? wo : Lt, l = u((c) => c.stopPropagation(), []);
  return l1(), Object.keys(o.params).length ? /* @__PURE__ */ g("div", { onMouseDown: l, children: [
    /* @__PURE__ */ i(go.Collapse, { in: r, unmountOnExit: !0, children: /* @__PURE__ */ i($, { gap: 1, style: c1, children: Object.entries(o.params).map((c, d) => /* @__PURE__ */ i(a1, { data: c }, d)) }) }),
    /* @__PURE__ */ i(s1, { block: !0, onClick: a, children: /* @__PURE__ */ g(R, { children: [
      Ds("actions.arguments"),
      /* @__PURE__ */ i(s, { style: d1 })
    ] }) })
  ] }) : null;
}, m1 = S("ArgumentList", u1), h1 = { justifyContent: "space-between", padding: 8 }, p1 = { color: "violet", marginLeft: 5 }, g1 = ({ 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(Wc, { value: e, children: [
    /* @__PURE__ */ g(X, { style: h1, children: [
      /* @__PURE__ */ i("b", { style: p1, children: `${r || "Action"}` }),
      /* @__PURE__ */ g(me, { size: "xs", children: [
        s && /* @__PURE__ */ i(ln, { onClick: l }),
        /* @__PURE__ */ i(ye, { onClick: t })
      ] })
    ] }),
    /* @__PURE__ */ i(m1, {})
  ] });
}, C1 = S("ActionItem", g1), f1 = y(Co)`
  ${Oo}
  && {
    box-shadow: none;
  }
`, b1 = y(Co.Item)`
  ${Ho}
  && {
    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);
  }
`, v1 = ({ 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(Jc, { value: a, children: /* @__PURE__ */ i(b1, { index: t, children: /* @__PURE__ */ i(C1, { action: e, onRemove: r }) }) });
}, y1 = S("ActionListItem", v1), w1 = (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(f1, { sortable: !0, onSort: r, children: n.map((a, s) => /* @__PURE__ */ i(y1, { index: s, action: a, onRemove: o, eventName: t }, a[Hi])) }) : null;
}, S1 = S("ActionList", w1), x1 = { position: "relative", display: "flex", justifyContent: "space-between" }, k1 = { whiteSpace: "break-spaces" }, L1 = { marginTop: 0, marginBottom: 0 }, E1 = /* @__PURE__ */ i(Ae, {}), A1 = ({ 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) => {
      ce.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: x1, children: /* @__PURE__ */ i("span", { style: k1, 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(Ja, { style: L1 }) }),
    /* @__PURE__ */ i(B.Item, { icon: E1, onClick: c, children: l("addCodeAction") })
  ] });
}, M1 = S("CodeActionsList", A1), T1 = ({ 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 });
}, P1 = ({ 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;
}, F1 = Le(({ onSelect: e, annotation: t, ...n }