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

React hook form alternative.

var bo = Object.defineProperty;
var Co = (r, e, t) => e in r ? bo(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
var a = (r, e, t) => (Co(r, typeof e != "symbol" ? e + "" : e, t), t), vt = (r, e, t) => {
  if (!e.has(r))
    throw TypeError("Cannot " + t);
};
var y = (r, e, t) => (vt(r, e, "read from private field"), t ? t.call(r) : e.get(r)), C = (r, e, t) => {
  if (e.has(r))
    throw TypeError("Cannot add the same private member more than once");
  e instanceof WeakSet ? e.add(r) : e.set(r, t);
}, R = (r, e, t, n) => (vt(r, e, "write to private field"), n ? n.call(r, t) : e.set(r, t), t);
var D = (r, e, t) => (vt(r, e, "access private method"), t);
import { jsx as m, Fragment as Ke, jsxs as ht } from "@emotion/react/jsx-runtime";
import { css as Ee, cx as Ve } from "@emotion/css";
import * as Eo from "react";
import { createContext as Vo, useContext as $r, useMemo as K, useEffect as Z, useState as zt, useCallback as $t, createElement as jt, Fragment as So, useRef as Po, useImperativeHandle as Do, forwardRef as Fo } from "react";
import { assign as ee, merge as lr, camelCase as To, isEmpty as jr, isArray as Oo, clone as wt, startCase as Mr, reduce as ko, isUndefined as Lr, debounce as Ao, isNull as Ro, isObject as Ft, upperFirst as xo } from "lodash-es";
import { makeAutoObservable as Q, reaction as Mt, makeObservable as Ir, observable as k, autorun as Br, runInAction as Wr, configure as No } from "mobx";
import { observer as Kr } from "mobx-react";
import { CacheProvider as zo } from "@emotion/react";
import cr from "@emotion/cache";
import $o from "stylis-plugin-rtl";
import { FluentResource as Jr, FluentBundle as qr } from "@fluent/bundle";
import { z as L } from "zod";
const ul = () => (Math.random() * 1e18).toString(36).slice(0, 5).toUpperCase() + "";
function jo(r, e) {
  return r.reduce((t, n, o, i) => {
    var s;
    return (t[s = e(n, o, i)] || (t[s] = [])).push(n), t;
  }, {});
}
const Hr = ".", Lt = "__DOT__";
function Ur(r) {
  return r.replace(new RegExp(`\\${Lt}`, "g"), Hr);
}
function _r(r) {
  return r.replace(new RegExp(`\\${Hr}`, "g"), Lt);
}
const T = (r) => r.replace(new RegExp(" ", "g"), "_"), Mo = (r) => typeof r == "string" || typeof r == "number" || r instanceof Date ? !0 : typeof (r == null ? void 0 : r.value) < "u", Zr = (r, e = "") => {
  const t = {};
  for (const [n, o] of Object.entries(r)) {
    const i = e ? `${e}${Lt}${n}` : n;
    Mo(o) ? t[T(i)] = o : typeof o == "boolean" ? t[T(i)] = o ? "true" : "false" : typeof o == "object" && o !== null && Object.assign(t, Zr(o, i));
  }
  return t;
}, ur = Symbol("key");
function Gr(r, e, t, n = {}) {
  const o = Object.keys(n).map((i) => `${i}=${n[i]}`).join("_");
  return `${r}_${e}_${t ? `${t}_` : ""}${o}`;
}
function Qr(r, e, t = {}) {
  return Gr("autorun", r, e, t);
}
function I(r, e = {}) {
  return Gr("observable", r, void 0, e);
}
let dr = 0;
function Xr(r) {
  r[ur] || (++dr, r[ur] = `actionData_${dr}`);
}
function Yr(r) {
  var t;
  const e = r.events;
  e && Object.values(e).forEach((n) => n.forEach(Xr)), (t = r.children) == null || t.forEach(Yr);
}
function Se(r) {
  return (r == null ? void 0 : r.computeType) === "function";
}
function It(r) {
  return (r == null ? void 0 : r.computeType) === "localization";
}
function en(r) {
  return Se(r) || It(r);
}
function re(r) {
  return r.dataKey ?? r.key;
}
class $ {
  /**
   * Creates the component settings.
   * @param key the React component key.
   * @param type the component type of the form viewer.
   */
  constructor(e, t) {
    /**
     * The React component key.
     */
    a(this, "key", "");
    /**
     * The component data key.
     */
    a(this, "dataKey");
    /**
     * The component type of the form viewer.
     */
    a(this, "type", "");
    /**
     * The component properties.
     */
    a(this, "props", {});
    /**
     * The component CSS styles.
     */
    a(this, "css");
    /**
     * The component wrapper CSS styles.
     */
    a(this, "wrapperCss");
    /**
     * The component styles for the `style` attribute.
     */
    a(this, "style");
    /**
     * The component wrapper styles for the `style` attribute.
     */
    a(this, "wrapperStyle");
    /**
     * The set of event handlers.
     */
    a(this, "events");
    /**
     * The array of child components.
     */
    a(this, "children");
    /**
     * The component value validation settings.
     */
    a(this, "schema");
    /**
     * The set of arbitrary HTML attributes added to the component.
     */
    a(this, "htmlAttributes");
    /**
     * The tooltip settings.
     */
    a(this, "tooltipProps");
    /**
     * The name of the occupied component property in the parent component.
     */
    a(this, "slot");
    /**
     * The condition for binding a child element to a parent element.
     */
    a(this, "slotCondition");
    /**
     * The expression or function to conditionally render a component.
     */
    a(this, "renderWhen");
    /**
     * Disables data binding for the component.
     */
    a(this, "disableDataBinding");
    this.key = e, this.type = t, Q(this, void 0, { name: I("ComponentStore", { key: e }) });
  }
  /**
   * Correctly creates the {@link ComponentStore} from deserialized data.
   * @param value the deserialized data.
   * @returns the component Store.
   */
  static createFromObject(e) {
    const t = ee(new $(e.key, e.type), e);
    return Yr(t), t;
  }
  /**
   * Adds the event handler for component.
   * @param store the target {@link ComponentStore}.
   * @param eventName the target event name.
   * @param data the {@link ActionData}.
   */
  static addEventHandler(e, t, n) {
    var o;
    Xr(n), e.events ?? (e.events = {}), (o = e.events)[t] ?? (o[t] = []), e.events[t].push(n);
  }
}
const Lo = {
  /**
   * @inheritDoc
   */
  get get() {
    return {};
  },
  /**
   * @inheritDoc
   */
  get wrapperClassName() {
    return "";
  },
  /**
   * @inheritDoc
   */
  get wrapperStyle() {
  },
  /**
   * @inheritDoc
   */
  get propsWithoutChildren() {
    return {};
  },
  /**
   * @inheritDoc
   */
  get ownProps() {
    return {};
  },
  /**
   * @inheritDoc
   */
  onDidMount() {
  },
  /**
   * @inheritDoc
   */
  onWillUnmount() {
  },
  /**
   * @inheritDoc
   */
  get isReadOnly() {
    return !1;
  },
  /**
   * @inheritDoc
   */
  get isDisabled() {
    return !1;
  }
};
function Io(r) {
  return () => {
    const e = $r(r);
    if (!e)
      throw new Error(`The context ${r.displayName} was not found!`);
    return e;
  };
}
function Bo(r) {
  return r.Provider;
}
function Pe(r, e = null) {
  const t = Vo(e);
  t.displayName = r;
  const n = Io(t), o = Bo(t);
  return [n, o, t];
}
class hr {
  constructor() {
    a(this, "handlers", []);
  }
  /**
   * Adds a handler to the list of subscribers.
   * @param handler the handler function to be added.
   */
  subscribe(e) {
    this.handlers.push(e);
  }
  /**
   * Removes the specified event handler from the list of handlers.
   * @param handler the event handler to remove.
   */
  unsubscribe(e) {
    this.handlers = this.handlers.filter((t) => t !== e);
  }
  /**
   * Returns true if the object has subscribers, false otherwise.
   * @returns true if the object has handlers registered for events, otherwise returns false.
   */
  get isSubscribed() {
    return this.handlers.length > 0;
  }
  /**
   * Invokes the event by calling all registered event handlers.
   * @param sender the sender of the event.
   * @param eventArgs the event arguments.
   */
  invoke(e, t) {
    this.handlers.slice().forEach((n) => n(e, t));
  }
  /**
   * Dispose method to release all handlers.
   */
  dispose() {
    this.handlers = [];
  }
}
function Qe(r, e) {
  var t;
  e(r), (t = r.children) == null || t.forEach((n) => Qe(n, e));
}
function Wo(r, e, t = 0) {
  if (r === e)
    return t;
  if (r.children) {
    t = t + 1;
    for (const n of r.children) {
      const o = Wo(n, e, t);
      if (o)
        return o;
    }
  }
}
let Ko = 0;
function Jo(r) {
  return `${r}_${++Ko}`;
}
function pr(r, e) {
  let t = 1;
  const n = To(r.type), o = () => `${n}${t}`;
  for (; e.has(o()); )
    t++;
  return r.key = o(), r.key;
}
class qo {
  /**
   * Constructs a new instance of the ComponentKeyChangedEventArgs class.
   * @param oldKey the old key.
   * @param newKey the new key.
   */
  constructor(e, t) {
    this.oldKey = e, this.newKey = t;
  }
}
class Ho {
  constructor() {
    /**
     * An event that occurs after a component key change.
     */
    a(this, "onAfterKeyChanged", new hr());
    /**
     * An event that occurs before a component is removed from the component tree.
     */
    a(this, "onBeforeDelete", new hr());
  }
  /**
   * Unsubscribe from all events.
   */
  dispose() {
    this.onAfterKeyChanged.dispose(), this.onBeforeDelete.dispose();
  }
}
const Uo = (r) => {
  const e = {};
  return r.allComponentFields.forEach(({ dataKey: t }) => {
    e[t] = r.data[t] ?? "";
  }), e;
};
var Ae, B, ue;
class _o {
  /**
   * Constructor.
   * @param componentStore the component settings.
   * @param model the component metadata for the form viewer.
   * @param childFactory the factory function that creates {@link ComponentData} instance.
   * @param getFormValidationResult the function that returns a form validation results.
   */
  constructor(e, t, n, o) {
    C(this, Ae, void 0);
    C(this, B, void 0);
    C(this, ue, void 0);
    a(this, "_state", {});
    /**
     * The unique identifier.
     */
    a(this, "id");
    /**
     * The component settings.
     */
    a(this, "store");
    /**
     * The component metadata.
     */
    a(this, "model");
    /**
     * The field with the form data.
     */
    a(this, "field");
    /**
     * The parent node in the component data tree.
     */
    a(this, "parent");
    /**
     * The child nodes in the component data tree.
     */
    a(this, "children", []);
    /**
     * User defined properties of the React component.
     */
    a(this, "userDefinedProps");
    /**
     * If true, then validation is in progress.
     */
    a(this, "validating", !1);
    /**
     * Specifies the root component for the data in the component tree. **Internal use only.**
     */
    a(this, "dataRootProvider");
    /**
     * Specifies the index in the array if the component is in the component array.
     * This is not an index in a parent-child structure.
     */
    a(this, "index");
    /**
     * The state of the component. **Internal use only.
     */
    a(this, "componentState", Lo);
    /**
     * The function for getting initial data.
     */
    a(this, "getInitialData");
    var s;
    this.store = e, this.model = t, this.id = Jo(this.model.type), R(this, ue, o), (s = e.children) == null || s.forEach((l) => {
      n(l).setParent(this);
    }), Q(this, void 0, { name: I("ComponentData", { key: e.key }) }), R(this, Ae, [(() => Mt(() => this.key, (l, c) => {
      this.invokeOnAfterKeyChanged(this, new qo(c, l));
    }))()]);
  }
  /**
   * Sets the new parent for this node.
   * @param newParent the new parent.
   */
  setParent(e) {
    var t;
    (t = this.parent) == null || t.removeChild(this), e.addChild(this), this.parent = e;
  }
  /**
   * Inserts the given node after this node.
   * @param inserted the node to insert.
   */
  insertAfterMe(e) {
    this.insert(e, "after");
  }
  /**
   * Inserts the given node before this node.
   * @param inserted the node to insert.
   */
  insertBeforeMe(e) {
    this.insert(e, "before");
  }
  /**
   * @inheritDoc
   */
  get state() {
    return this._state;
  }
  /**
   * @returns the root component for the data in the component tree.
   */
  get dataRoot() {
    var e, t;
    return ((e = this.dataRootProvider) == null ? void 0 : e.dataRoot) ?? ((t = this.parent) == null ? void 0 : t.dataRoot) ?? this;
  }
  /**
   * @returns the initial data.
   */
  get initialData() {
    var e, t;
    return (t = (e = this.dataRoot).getInitialData) == null ? void 0 : t.call(e);
  }
  /**
   * @returns the key of this node (same as the key of the ComponentStore).
   */
  get key() {
    return this.store.key;
  }
  /**
   * @returns the ComponentDataEvents object.
   */
  get events() {
    return y(this, B) || R(this, B, new Ho()), y(this, B);
  }
  /**
   * Find the node with the given key.
   * @param key the key to find.
   * @returns the node or undefined if not found.
   */
  findByKey(e) {
    if (this.key === e)
      return this;
    for (let t = 0; t < this.children.length; t++) {
      const o = this.children[t].findByKey(e);
      if (o)
        return o;
    }
  }
  /**
   * Assigns unique keys to the items in the tree.
   * @param root the root of the tree to unify keys. Defaults to the root of this tree.
   * @returns the map of new keys to old keys.
   */
  unifyKeys(e) {
    const t = /* @__PURE__ */ new Map(), n = [];
    return Qe(e, ({ key: o }) => {
      n.push(o);
    }), Qe(this, (o) => {
      const i = pr(o.store, new Set(n));
      t.set(i, o.key), n.push(i);
    }), t;
  }
  /**
   * Assigns unique keys to the items in the tree.
   */
  unifyTree() {
    const e = /* @__PURE__ */ new Map();
    Qe(this, ({ key: o, store: i }) => {
      const s = e.get(o) ?? /* @__PURE__ */ new Set();
      s.add(i), e.set(o, s);
    });
    const n = new Set(e.keys());
    e.forEach((o, i) => {
      if (o.size <= 1)
        return;
      Array.from(o).slice(1).forEach((l) => {
        const c = pr(l, n);
        n.add(c);
      });
    });
  }
  /**
   * @returns all the fields in the tree as a map. Starts from this node.
   */
  get fields() {
    const e = this.collectAllFields(/* @__PURE__ */ new Map()), t = /* @__PURE__ */ new Map();
    return e.forEach((n, o) => {
      t.set(re(o.store), n);
    }), t;
  }
  /**
   * @returns an array of all component fields, including non-unique data keys.
   */
  get allComponentFields() {
    const e = this.collectAllFields(/* @__PURE__ */ new Map()), t = [];
    return e.forEach((n, o) => {
      t.push({
        dataKey: re(o.store),
        field: n
      });
    }), t;
  }
  /**
   * @returns an array of all fields, including non-unique data keys.
   */
  get allFields() {
    return this.allComponentFields.map((e) => e.field);
  }
  /**
   * @returns an array of all children components.
   */
  get allChildren() {
    return this.collectAllChildren([]);
  }
  /**
   * Deletes this node from the tree.
   */
  delete() {
    var t;
    (t = this.parent) == null || t.removeChild(this);
    const e = this.collectAllNodesAsArray([]);
    this.invokeOnBeforeDeleted(e), this.disposeNodes(e);
  }
  /**
   * @inheritDoc
   */
  get data() {
    const e = {};
    for (const { dataKey: t, field: n } of this.allComponentFields)
      if (n.storeDataInParentForm) {
        const o = n.value || {};
        Object.keys(o).forEach((i) => e[i] = o[i]);
      } else
        e[t] = n.value;
    return e;
  }
  /**
   * @returns the object to read and modify parent data (available for array elements).
   */
  get parentData() {
    var t;
    if (typeof this.nearestIndex == "number")
      return ((t = this.parent) == null ? void 0 : t.data) ?? this.rootData;
  }
  /**
   * @returns the object to read and modify root form data.
   */
  get rootData() {
    return this.root.data;
  }
  /**
   * @returns all the form data that is of the FluentVariable type.
   * Additionally, the keys of the returned object are converted to the snake case.
   */
  get fluentData() {
    const e = Uo(this);
    return Zr(e);
  }
  /**
   * @inheritDoc
   */
  get errors() {
    const e = {};
    for (const { dataKey: t, field: n } of this.allComponentFields) {
      n.error && (e[t] = n.error);
      const o = n.errors;
      o && (Array.isArray(o) ? e[t] = o : (n.storeDataInParentForm && Object.keys(o).forEach((i) => e[i] = o[i]), !n.storeDataInParentForm && Object.keys(o).length > 0 && (e[t] = o)));
    }
    return e;
  }
  /**
   * @inheritDoc
   */
  set errors(e) {
    this.allComponentFields.forEach((t) => {
      const n = e[t.dataKey];
      t.field.setError(n);
    });
  }
  /**
   * @inheritDoc
   */
  get hasErrors() {
    return Object.keys(this.errors).length > 0;
  }
  /**
   * @inheritDoc
   */
  setAllErrors(e) {
    this.allFields.forEach((t) => t.error = e);
  }
  /**
   * @inheritDoc
   */
  async validate() {
    return await this.validateForm(), this.errors;
  }
  /**
   * @inheritDoc
   */
  async getValidationResult() {
    var o;
    let e;
    const t = async ({ dataKey: i, field: s }) => {
      const l = await s.getValidationResult();
      if (jr(l))
        return;
      e ?? (e = {});
      let c = e;
      if (!s.storeDataInParentForm) {
        const u = Oo(l) ? [] : {};
        e[i] ?? (e[i] = u), c = e[i];
      }
      lr(c, l);
    };
    await Promise.allSettled(this.allComponentFields.map(t));
    const n = await ((o = y(this, ue)) == null ? void 0 : o.call(this));
    return n == null || n.forEach((i) => {
      e ?? (e = {}), lr(e, i);
    }), e;
  }
  /**
   * @inheritDoc
   */
  get isValidating() {
    return this.validating;
  }
  /**
   * @inheritDoc
   */
  reset() {
    this.allFields.forEach((e) => e.reset());
  }
  /**
   * @inheritDoc
   */
  clear() {
    this.allFields.forEach((e) => e.clear());
  }
  /**
   * Dispose method that releases resources used by the object.
   * It disposes the field and all the children objects.
   */
  dispose() {
    const e = this.collectAllNodesAsArray([]);
    this.disposeNodes(e);
  }
  /**
   * @returns true if it has no parent {@link ComponentData}, false otherwise.
   */
  get isRoot() {
    return !this.parent;
  }
  /**
   * @returns the root of the component tree.
   */
  get root() {
    return this.parent ? this.parent.root : this;
  }
  /**
   * @returns the index in the array if the component is in the component array
   * (looks for the nearest index in the component hierarchy).
   */
  get nearestIndex() {
    var e;
    return typeof this.index < "u" ? this.index : (e = this.parent) == null ? void 0 : e.nearestIndex;
  }
  async validateForm() {
    var e;
    this.validating = !0;
    try {
      await Promise.allSettled([...this.allFields].map((o) => o.validate()));
      const t = await ((e = y(this, ue)) == null ? void 0 : e.call(this));
      if (!(t != null && t.length))
        return;
      const n = this.allComponentFields;
      t.forEach((o) => {
        o && n.forEach(({ field: i, dataKey: s }) => {
          if (o[s])
            return i.setError(o[s]);
          if (i.storeDataInParentForm)
            return i.setError(o);
        });
      });
    } finally {
      this.validating = !1;
    }
  }
  insert(e, t) {
    var c, u;
    const n = t === "before" ? 0 : 1;
    if (!this.parent)
      throw new Error(`Cannot insert without parent. Key = ${this.key}`);
    (c = e.parent) == null || c.removeChild(e), e.parent = this.parent;
    const o = this.parent.children, i = o.indexOf(this);
    if (i < 0)
      throw new Error(`Cannot insert not existing element into ComponentData. Key = ${this.key}`);
    o.splice(i + n, 0, e), (u = this.parent.store).children ?? (u.children = []);
    const s = this.parent.store.children, l = s.indexOf(this.store);
    if (l < 0)
      throw new Error(`Cannot insert not existing element into ComponentStore. Key = ${this.key}`);
    s.splice(l + n, 0, e.store), e.store.slot = this.store.slot, e.store.slotCondition = this.store.slotCondition;
  }
  /**
   * Disposes the nodes by calling the disposers, disposing the field,
   * and resetting the parent and children properties to undefined and an empty array, respectively.
   * @param nodes the array of ComponentData objects representing the nodes to dispose.
   */
  disposeNodes(e) {
    e.forEach((t) => {
      var n, o;
      (n = y(t, B)) == null || n.dispose(), y(t, Ae).forEach((i) => i()), (o = t.field) == null || o.dispose(), t.parent = void 0, t.children = [];
    });
  }
  collectAllNodesAsArray(e) {
    e.push(this);
    for (let t = 0; t < this.children.length; t++)
      this.children[t].collectAllNodesAsArray(e);
    return e;
  }
  collectAllFields(e) {
    var t;
    if (this.field && e.set(this, this.field), ((t = this.field) == null ? void 0 : t.fieldType) === "repeater")
      return e;
    for (let n = 0; n < this.children.length; n++)
      this.children[n].collectAllFields(e);
    return e;
  }
  collectAllChildren(e) {
    e.push(this);
    for (let t = 0; t < this.children.length; t++)
      this.children[t].collectAllChildren(e);
    return e;
  }
  addChild(e) {
    var t;
    this.children.indexOf(e) < 0 && this.children.push(e), (t = this.store).children ?? (t.children = []), this.store.children.indexOf(e.store) < 0 && this.store.children.push(e.store);
  }
  removeChild(e) {
    var o;
    const t = this.children.indexOf(e);
    t > -1 && this.children.splice(t, 1), (o = this.store).children ?? (o.children = []);
    const n = this.store.children.indexOf(e.store);
    n > -1 && this.store.children.splice(n, 1);
  }
  invokeOnAfterKeyChanged(e, t) {
    var n, o;
    (n = y(this, B)) != null && n.onAfterKeyChanged.isSubscribed && y(this, B).onAfterKeyChanged.invoke(e, t), (o = this.parent) == null || o.invokeOnAfterKeyChanged(e, t);
  }
  invokeOnBeforeDeleted(e) {
    var t, n;
    (t = y(this, B)) != null && t.onBeforeDelete.isSubscribed && e.forEach((o) => {
      var i;
      return (i = y(this, B)) == null ? void 0 : i.onBeforeDelete.invoke(o, void 0);
    }), (n = this.parent) == null || n.invokeOnBeforeDeleted(e);
  }
}
Ae = new WeakMap(), B = new WeakMap(), ue = new WeakMap();
const [
  /**
   * @returns the instance of the ComponentData of the currently rendered component.
   */
  X,
  /**
   * Context provider for the useComponentData hook. **Internal use only.**
   */
  tn
] = Pe("ComponentDataContext"), Zo = (r) => {
  const { id: e } = X();
  return K(() => {
    const t = {};
    return r.labeled && (t["aria-labelledby"] = `${e}-label`), t["aria-errormessage"] = `${e}-error`, t;
  }, [e, r.labeled]);
}, Go = () => {
  const { id: r } = X();
  return K(() => ({
    "aria-errormessage": `${r}-error`
  }), [r]);
}, Qo = () => {
  const { field: r } = X(), e = !!(r != null && r.error);
  return K(() => ({ "aria-invalid": e }), [e]);
}, dl = (r) => {
  const e = Qo(), t = Zo(r);
  return K(() => ({
    ...t,
    ...e
  }), [t, e]);
}, Tt = {};
function rn(r) {
  const e = r.name;
  if (Tt[e])
    throw new Error(`Component feature ${e} is already registered`);
  Tt[e] = r;
}
function oe(r) {
  rn({
    name: r,
    allowMultiple: !1
  });
}
function nn(r) {
  const e = Tt[r];
  if (!e)
    throw new Error(`ComponentFeature ${r} is not registered`);
  return e;
}
function Bt(r, e, t) {
  const n = nn(e), o = { ...r }, i = o[e];
  return o[e] = n.allowMultiple ? i ? [...i, t] : [t] : t, o;
}
function Xo(r, ...e) {
  let t = r ?? {};
  return e.forEach((n) => {
    t = Bt(t, n.name, n.value);
  }), t;
}
const on = "component-is-preset";
oe(on);
const pt = "component-role";
rn({
  name: pt,
  allowMultiple: !0
});
const sn = "disable-main-component-properties";
oe(sn);
const an = "disable-tooltip-properties";
oe(an);
const ln = "disable-style-properties";
oe(ln);
const cn = "disable-additional-properties";
oe(cn);
const un = "disable-styles-for-classname-editor";
oe(un);
const dn = "enable-inline-styles-editor";
oe(dn);
var Re;
class J {
  /**
   * Creates component metadata for the form viewer.
   * @param component the React component.
   * @param name the component name.
   * @param actionsInitializer the function to initialize actions in the component.
   * @param valued the name of the component property where the component value is stored.
   * @param valueType the type of the component value.
   * @param defaultProps the component's default property values.
   * @param css the component's CSS values.
   * @param wrapperCss the component's wrapper CSS values.
   * @param typeName the component type name.
   * @param kind the component kind.
   * @param readOnly the name of the component property that stores the read-only flag.
   * @param propsBindingTypes the component property binding types.
   * @param uncontrolledValue the value for the uncontrolled (undefined) state.
   * @param disabled the name of the component property that stores the disabled flag.
   * @param dataBindingType the type of component data binding.
   * @param features the component features that provide additional information about component's characteristic.
   * @template T the type of React component properties.
   */
  constructor(e, t, n, o, i, s, l, c, u, h = "component", g, p = {}, S, E, ae = "none", te = {}) {
    C(this, Re, void 0);
    /**
     * The React component.
     */
    a(this, "component");
    this.actionsInitializer = n, this.valued = o, this.valueType = i, this.defaultProps = s, this.css = l, this.wrapperCss = c, this.typeName = u, this.kind = h, this.readOnly = g, this.propsBindingTypes = p, this.uncontrolledValue = S, this.disabled = E, this.dataBindingType = ae, this.features = te, this.valued && this.dataBindingType === "none" && (this.dataBindingType = "twoWay"), this.component = Kr(e), this.component.displayName = e.displayName || e.name, R(this, Re, t);
  }
  /**
   * @returns the component name, or type if there is no component name.
   */
  get name() {
    return y(this, Re) ?? this.type;
  }
  /**
   * @returns the component type name.
   */
  get type() {
    return this.typeName || this.component.displayName || this.component.name;
  }
  /**
   * Returns true if feature is present in the component feature set and equals value, false otherwise.
   * @param name the feature name.
   * @param value the feature value.
   * @returns true if feature is present in the component feature set and equals value, false otherwise.
   */
  hasFeatureValue(e, t) {
    const n = this.features[e];
    return n ? nn(e).allowMultiple ? Array.isArray(n) ? n.indexOf(t) >= 0 : !1 : n === t : !1;
  }
  /**
   * Returns true if feature is present in the component feature set and equals `true`, false otherwise.
   * @param name the feature name.
   * @returns true if feature is present in the component feature set and equals `true`, false otherwise.
   */
  isFeatureEnabled(e) {
    return this.features[e] === !0;
  }
  /**
   * Returns true if the role is defined in the component's roles, false otherwise.
   * @param value the component role.
   * @returns true if the role is defined in the component's roles, false otherwise.
   */
  hasComponentRole(e) {
    return this.hasFeatureValue(pt, e);
  }
}
Re = new WeakMap();
var ne = /* @__PURE__ */ ((r) => (r.LTR = "ltr", r.RTL = "rtl", r))(ne || {});
const [
  /**
   * **Internal use only.**
   */
  Yo,
  /**
   * **Internal use only.**
   */
  ei
] = Pe("RepeaterPropsContext"), Wt = (r) => {
  const { className: e } = Yo();
  return /* @__PURE__ */ m("div", { className: e, children: r.children });
};
Wt.displayName = "RepeaterItem";
const ti = new J(Wt, "RepeaterItem"), [
  /**
   * @returns the {@link BuilderMode} builder mode value.
   */
  ri,
  /**
   * The BuilderMode context provider.
   */
  hl
] = Pe("BuilderModeContext", "viewer"), [
  /**
   * **Internal use only.**
   */
  H,
  /**
   * **Internal use only.**
   */
  Kt,
  /**
   * **Internal use only.**
   */
  ni
] = Pe("StoreContext");
class Je {
  /**
   * Creates metadata for a React component property.
   * @param key the property name.
   * @param name the human-readable property name.
   */
  constructor(e, t) {
    /**
     * The component property key.
     */
    a(this, "key");
    /**
     * The component property name.
     */
    a(this, "name");
    /**
     * The name of the component's property editor.
     */
    a(this, "editor");
    /**
     * The hint for the component property.
     */
    a(this, "hint");
    /**
     * True if the property value can be localized, false otherwise.
     */
    a(this, "localizable", !1);
    /**
     * True if the property value is bound to form data, false otherwise.
     */
    a(this, "valued", !1);
    /**
     * The type of component data binding.
     */
    a(this, "dataBindingType", "none");
    /**
     * True if the property value controls a read-only flag, false otherwise.
     */
    a(this, "readOnly", !1);
    /**
     * True if the property value controls a disabled flag, false otherwise.
     */
    a(this, "disabled", !1);
    /**
     * Additional properties for the component property editor.
     */
    a(this, "editorProps");
    /**
     * The default property value.
     */
    a(this, "default");
    /**
     * The property value for the uncontrolled state.
     */
    a(this, "uncontrolledValue");
    /**
     * The data type for the value of the property.
     */
    a(this, "type");
    /**
     * True if the component property is required, false otherwise.
     */
    a(this, "required", !1);
    /**
     * The function for validating the property value.
     */
    a(this, "validator");
    /**
     * Message and/or error code for the validation function.
     */
    a(this, "errorMap");
    /**
     * True if the property value can be a calculated property, false otherwise.
     */
    a(this, "calculable", !0);
    /**
     * A function that returns a string containing the source code of the function to bind child components.
     * @param props the properties of the component, which are available only inside Form Builder Designer.
     */
    a(this, "slotConditionBuilder");
    /**
     *  The component property binding type.
     */
    a(this, "bindingType");
    this.key = e, this.name = t;
  }
  /**
   * @returns the metadata clone.
   */
  clone() {
    return Object.create(Object.getPrototypeOf(this), Object.getOwnPropertyDescriptors(this));
  }
}
class hn extends Je {
  constructor() {
    super(...arguments);
    /**
     * The function that checks whether a child component can be inserted into a parent component.
     */
    a(this, "insertPredicate");
    /**
     * The default editor.
     */
    a(this, "defaultEditor");
  }
  /**
   * Returns the node editor type for the component property.
   * @param componentProperty the component property.
   * @returns the node editor type for the component property.
   */
  getNodeEditorType(t) {
    return (t == null ? void 0 : t.editorType) ?? this.defaultEditor ?? "node";
  }
}
class oi extends Je {
}
class ii extends Je {
}
class pn extends Je {
  constructor() {
    super(...arguments);
    /**
     * Possible values for the property.
     */
    a(this, "data");
  }
}
const pl = (r) => r instanceof pn;
class si extends Je {
}
const fl = "HH:mm:ss", ai = {
  Property: pn,
  Container: hn,
  Event: oi,
  Module: ii,
  Style: si
};
class li {
  constructor() {
    /**
     * Type of component property description in the form builder.
     */
    a(this, "annotationType", "Module");
    /**
     * Flag if true, the property name will be automatically converted in the designer from a camel case string to a human-readable string.
     */
    a(this, "autoName", !0);
  }
}
class fn {
  constructor() {
    /**
     * Partial metadata for a component property.
     */
    a(this, "annotation");
    /**
     * Options for building an annotation.
     */
    a(this, "options", new li());
  }
  /**
   * @returns the main component property that is used as form data and for validation rules.
   */
  get valued() {
    return this.setup({ valued: !0, dataBindingType: "twoWay" });
  }
  /**
   * @returns the main property of the component that uses the form data as data (one-way data binding).
   */
  get dataBound() {
    return this.setup({ valued: !0, dataBindingType: "oneWay" });
  }
  /**
   * Sets the value for the property that prevents uncontrolled state.
   * @param uncontrolledValue the value for the uncontrolled state.
   * @returns the modified instance of the builder.
   */
  uncontrolledValue(e) {
    return this.setup({ uncontrolledValue: e });
  }
  /**
   * @returns the component property that can be localized.
   */
  get localize() {
    return this.setup({ localizable: !0 });
  }
  /**
   * @returns the non-localizable component property.
   */
  get notLocalize() {
    return this.setup({ localizable: !1 });
  }
  /**
   * Specifies the name of the component property.
   * @param name the property name.
   * @returns the modified instance of the builder.
   */
  named(e) {
    return this.setup({ name: e });
  }
  /**
   * Adds the hint to the property name of the component.
   * @param hint the hint.
   * @returns the modified instance of the builder.
   */
  hinted(e) {
    return this.setup({ hint: e });
  }
  /**
   * Marks the component property as calculable.
   * @param calculable true if the property is calculable.
   * @returns the modified instance of the builder.
   */
  calculable(e) {
    return this.setup({ calculable: e });
  }
  /**
   * Modifies the component property metadata builder with custom options.
   * @param options the custom options.
   * @returns the modified instance of the builder.
   */
  setup(e) {
    const { annotationType: t, autoName: n, ...o } = e, i = this.clone();
    return i.options.annotationType = t ?? i.options.annotationType, i.options.autoName = n ?? i.options.autoName, ee(i.annotation, o), i;
  }
  /**
   * Clones the instance of the builder.
   * @returns the cloned instance of the builder.
   */
  clone() {
    const e = wt(this);
    return e.options = wt(this.options), e.annotation = wt(this.annotation), e.annotation ?? (e.annotation = {}), e;
  }
  /**
   * Creates component property metadata for the form builder.
   * @param key the unique key of the component property.
   * @returns the instance of the component property metadata for the form builder.
   */
  build(e) {
    const t = this.getName(e), n = new ai[this.options.annotationType](e, t);
    return ee(n, this.annotation), n;
  }
  /**
   * Sets custom properties for the component's property editor.
   * @param props the custom properties
   * @returns the modified instance of the builder.
   */
  withEditorProps(e) {
    const t = this.clone();
    return ee(t.annotation, { editorProps: e }), t;
  }
  /**
   * Hides the component property editor.
   * @returns the modified instance of the builder.
   */
  hideEditor() {
    const e = this.clone();
    return ee(e.annotation, { editor: void 0 }), e;
  }
  /**
   * Returns the annotation name.
   * @param key the property name
   * @returns the annotation name.
   */
  getName(e) {
    return this.annotation.name ?? (this.options.autoName ? Mr(e) : e);
  }
}
class Jt extends fn {
  /**
   * Marks the component property as required.
   * @returns the modified instance of the builder.
   */
  get required() {
    return this.setup({ required: !0 });
  }
  /**
   * Sets the default value for the component property.
   * @param value the default value.
   * @returns the modified instance of the builder.
   */
  default(e) {
    return this.setup({ default: e });
  }
  /**
   * Modifies the component property metadata builder with validation properties.
   * @param validator the validation function.
   * @param errorMap the validation error settings.
   * @returns the modified instance of the builder.
   */
  validated(e, t) {
    return this.setup({ validator: e, errorMap: t });
  }
}
class et extends Jt {
  constructor() {
    super(...arguments);
    a(this, "subType");
  }
  /**
   * Sets the component's value type to an array of strings.
   * @returns the modified instance of the builder.
   */
  get ofString() {
    const t = new et().setup({ ...this.options, ...this.annotation, type: "array", editor: "arrayOfString" });
    return t.subType = "string", t;
  }
  /**
   * Sets the component's value type to an array of objects.
   * @returns the modified instance of the builder.
   */
  get ofObject() {
    const t = new et().setup({ ...this.options, ...this.annotation, type: "array" });
    return t.subType = "object", t;
  }
}
class mn extends Jt {
  constructor() {
    super(...arguments);
    /**
     * Possible values for the property.
     */
    a(this, "values");
    /**
     * Labels for the possible values of the property.
     */
    a(this, "labels");
  }
  /**
   * Marks the component property as required.
   * @returns the modified instance of the builder.
   */
  get required() {
    return super.required;
  }
  /**
   * Sets the labels for predefined values.
   * @param labels the labels.
   * @returns the modified instance of the builder.
   */
  labeled(...t) {
    const n = this.clone();
    return n.labels = t, n;
  }
  /**
   * Creates component property metadata for the form builder.
   * @param key the unique key of the component property.
   * @returns the instance of the component property metadata for the form builder.
   */
  build(t) {
    const n = super.build(t);
    return n.data = this.values.map((o, i) => {
      var l;
      return { label: ((l = this.labels) == null ? void 0 : l[i]) ?? Mr(o.toString()), value: o };
    }), n;
  }
  /**
   * Sets the default value for the component property.
   * @param value the default value, can be an array of values.
   * @returns the modified instance of the builder.
   */
  default(t) {
    return this.setup({ default: t });
  }
}
class ci extends mn {
  /**
   * Sets the radio buttons as the component's property editor.
   * @returns the modified instance of the builder.
   */
  radio() {
    return this.setup({ editor: "radio" });
  }
  /**
   * Sets the default value for the component property.
   * @param value the default value.
   * @returns the modified instance of the builder.
   */
  default(e) {
    return super.default(e);
  }
}
class ui extends mn {
  /**
   * Sets the default value for the component property.
   * @param value the default value.
   * @returns the modified instance of the builder.
   */
  default(e) {
    return super.default(e);
  }
}
const at = class at extends fn {
  /**
   * Creates a component property metadata builder.
   * @param editor the property editor type.
   * @template T the property type.
   */
  constructor(e) {
    super(), this.annotation = { editor: e };
  }
  /**
   * Sets the property as a "array" property.
   * @returns the instance of the metadata property builder.
   */
  get array() {
    return new et().setup({ ...this.options, ...this.annotation, type: "array" });
  }
  /**
   * Sets the field type for the component property.
   * @param type the field type.
   * @returns the instance of the metadata property builder.
   */
  typed(e) {
    return new Jt().setup({ ...this.options, ...this.annotation, type: e });
  }
  /**
   * Sets the property as a "single select" property.
   * @param values the possible values for the property.
   * @returns the instance of the metadata property builder.
   */
  oneOf(...e) {
    const t = new ci().setup({ ...this.options, ...this.annotation, type: "enum" });
    return t.values = e, t;
  }
  /**
   * Sets the property as a "multiple select" property.
   * @param values the possible values for the property.
   * @returns the instance of the metadata property builder.
   */
  someOf(...e) {
    const t = new ui().setup({ ...this.options, ...this.annotation, type: "enum" });
    return t.values = e, t;
  }
};
/**
 * Creates a component property metadata builder.
 * @param editor the property editor type.
 * @template T the property type.
 * @returns the component property metadata builder.
 */
a(at, "create", (e) => new at(e));
let tt = at;
const ml = (r) => r instanceof hn, U = tt.create;
function A(r) {
  return U(r).setup({ annotationType: "Property" });
}
function yn(r) {
  return r.reduce((e, t) => (e[t.key] = t.default, e), {});
}
function we(r) {
  return {
    any: {
      object: yn(r)
    }
  };
}
class di extends tt {
  /**
   * Creates a component property metadata builder.
   * @param editor the property editor type.
   * @template T the property type.
   */
  constructor(t) {
    super(t);
    /**
     * The function that checks whether a child component can be inserted into a parent component.
     */
    a(this, "insertPredicate");
    /**
     * The default editor.
     */
    a(this, "defaultEditor");
  }
  /**
   * Specifies a function that will create conditions that check if a child component can be bound to a parent slot.
   * @param slotConditionBuilder the function that returns a string containing the source code of the function to bind child components.
   * @returns the instance of the metadata property builder.
   */
  withSlotConditionBuilder(t) {
    return this.setup({ slotConditionBuilder: t });
  }
  /**
   * @inheritDoc
   */
  build(t) {
    const n = super.build(t);
    return n.insertPredicate = this.insertPredicate, n.defaultEditor = this.defaultEditor, n;
  }
  /**
   * Specifies a function that checks whether a child component can be inserted into a parent component.
   * @param predicate the function that returns a boolean value.
   * @returns the modified instance of the builder.
   */
  withInsertRestriction(t) {
    const n = this.clone();
    return n.insertPredicate = t, n;
  }
  /**
   * Specifies the default editor for the property.
   * @param defaultEditor the default editor.
   * @returns the modified instance of the builder.
   */
  withDefaultEditor(t) {
    const n = this.clone();
    return n.defaultEditor = t, n;
  }
}
function qt(r) {
  return new di(r);
}
const hi = (r, e) => e.reduceScreen((t, n) => n.key === r ? t + 1 : t, 0) === 1, yl = U("key").typed("string").required.hinted("Unique component key").calculable(!1).validated(hi, { code: "unique_key", message: "The key must be unique!" }).build("key"), pi = U("htmlAttributes"), fi = U("validation"), qe = A("string").typed("string").localize, mi = A("object").typed("object"), Ht = A("boolean").typed("boolean"), gn = Ht.setup({ readOnly: !0 }), vn = Ht.setup({ disabled: !0 }), gl = A("number").typed("number"), yi = A("size").typed("string"), vl = A("date").typed("date"), wl = A("time").typed("time"), gi = A("array").array, bl = A("color").typed("string"), Cl = U("tooltipType").typed("string"), ce = U("size").setup({ calculable: !1 }), fr = U("color").setup({ calculable: !1 }), El = A("string").calculable(!0).build("className"), mr = U("event").setup({ annotationType: "Event" }), wn = qt("node").setup({ annotationType: "Container" }), Vl = qt("node").setup({ annotationType: "Container" }).withDefaultEditor("string"), Sl = qt("nodeArray").setup({ annotationType: "Container", bindingType: "array" }), _e = A("oneOf").oneOf.bind(A("oneOf")), Pl = A("someOf").someOf.bind(A("someOf")), vi = U("tooltipProps"), wi = U("renderWhen").typed("boolean"), Dl = (r, e = "}") => A("function").typed("string").calculable(!1).withEditorProps({
  beginContextLine: r,
  endContextLine: e
}), ft = {
  width: ce.setup({ default: "100%" }),
  height: ce,
  marginTop: ce,
  marginRight: ce,
  marginBottom: ce,
  marginLeft: ce,
  color: fr,
  backgroundColor: fr
}, Ut = {
  flexDirection: _e("column", "row", "column-reverse", "row-reverse"),
  gap: yi,
  alignItems: _e("start", "center", "baseline", "end", "stretch"),
  justifyContent: _e(
    "flex-start",
    "flex-end",
    "center",
    "space-between",
    "space-around",
    "space-evenly",
    "start",
    "end",
    "left",
    "right"
  ),
  flexWrap: _e("wrap", "nowrap", "wrap-reverse")
};
function De(r, e = {}) {
  return ko(r, (t, n, o) => {
    var i;
    return t.push(((i = n == null ? void 0 : n.setup(e)) == null ? void 0 : i.build(o)) ?? qe.setup(e).build(o)), t;
  }, []);
}
function be(r) {
  return De(r, { annotationType: "Style", calculable: !1 });
}
const bi = (r) => {
  const e = ri() === "viewer", n = H().parentStore;
  return e && !r.children ? null : /* @__PURE__ */ m("div", { className: r.wrapperClassName, children: e || n ? r.children : /* @__PURE__ */ m(Wt, { children: r.children }) });
}, bn = (r) => /* @__PURE__ */ m(ei, { value: r, children: /* @__PURE__ */ m(bi, { wrapperClassName: r.wrapperClassName, children: r.children }) });
bn.displayName = "Repeater";
const Cn = gi.valued.setup({ editor: "arrayOfObject" }), En = De({
  itemRenderWhen: qe.notLocalize.hinted("The expression or function to conditionally render a repeater item."),
  value: Cn,
  children: wn
}), { flexDirection: Vn, gap: Sn } = Ut, Pn = be({
  display: qe.default("flex").hideEditor(),
  flexDirection: Vn.default("column").named("Item direction").hinted("Item direction"),
  gap: Sn.default("20px").named("Item gap").hinted("Item gap")
}), Ci = we(Pn), Dn = be({
  display: qe.default("flex").hideEditor(),
  flexDirection: Vn.default("column").hinted("Repeater direction"),
  gap: Sn.default("20px").hinted("Repeater gap")
}), Ei = we(Dn), Vi = En.filter((r) => typeof r.default < "u").reduce((r, e) => (r[e.key] = e.default, r), {}), rt = new J(
  bn,
  "Repeater",
  void 0,
  "value",
  "array",
  Vi,
  Ci,
  Ei,
  "Repeater",
  "repeater"
), _t = (async function() {
}).constructor;
class x {
  /**
   * Creates a new instance of the ActionDefinition class.
   * @param func the function of an action.
   * @param body the source code of the Action.
   * @param params the parameters of the Action.
   */
  constructor(e, t, n = {}) {
    this.func = e, this.body = t, this.params = n;
  }
  /**
   * Creates an action from the function.
   * @param func the function of an action.
   * @param params the parameters of the Action.
   * @returns the new instance of the ActionDefinition class.
   */
  static functionalAction(e, t = {}) {
    return new x(e, void 0, t);
  }
  /**
   * Creates an action from the source code.
   * @param body the source code of the Action.
   * @param params the parameters of the Action.
   * @returns the new instance of the ActionDefinition class.
   */
  static sourceAction(e, t = {}) {
    const n = _t("e, args", e);
    return new x(n, e, t);
  }
  /**
   * Correctly creates the {@link ActionDefinition} from deserialized data.
   * @param value the deserialized data.
   * @returns the ActionDefinition instance.
   */
  static createFromObject(e) {
    return x.sourceAction(e.body, e.params);
  }
}
const Si = (r) => {
  const e = {};
  return r && Object.keys(r).forEach((t) => {
    const n = r[t];
    e[t] = x.createFromObject(n);
  }), e;
}, Zt = "onDidMount", Gt = "onWillUnmount";
function bt(r) {
  return new Proxy(r, {
    get(e, t) {
      return t === "toJSON" ? () => e.data : e.data[t];
    },
    set(e, t, n) {
      return e.allComponentFields.filter(({ dataKey: o }) => o === t).forEach(({ field: o }) => {
        o.setValue(n);
      }), !0;
    }
  });
}
var xe, Ne, ze, $e, lt;
class Qt {
  /**
   * Creates arguments for the event handler.
   * @param type the event type.
   * @param sender the component that triggered the event.
   * @param store the form viewer settings.
   * @param args the event arguments.
   * @param renderedProps the component properties that were used to render the sender component.
   */
  constructor(e, t, n, o, i) {
    C(this, xe, void 0);
    C(this, Ne, void 0);
    C(this, ze, void 0);
    /**
     * The index of the component in the array, if the component is in the array.
     */
    a(this, "index");
    /**
     * Sets user-defined properties for the React component that override other properties of the component.
     * @param props the component properties.
     */
    a(this, "setUserDefinedProps", (e) => {
      this.sender.userDefinedProps = e;
    });
    C(this, $e, (e) => !!(e && e.target && e.type && e.preventDefault));
    C(this, lt, (e) => !y(this, $e).call(this, e));
    var c;
    this.type = e, this.sender = t, this.store = n, this.args = o, this.renderedProps = i, this.index = t.nearestIndex;
    const s = typeof this.index == "number", l = t.dataRoot;
    if (R(this, xe, bt(l)), s) {
      const u = ((c = l.parent) == null ? void 0 : c.dataRoot) ?? this.store.formData;
      R(this, Ne, bt(u));
    }
    R(this, ze, bt(this.store.formData));
  }
  /**
   * @returns the event handled by the event handler.
   */
  get event() {
    return this.args.find(y(this, $e));
  }
  /**
   * @returns the first element of the event argument array, which is treated as a value.
   */
  get value() {
    return this.args.filter((e) => typeof e < "u").find(y(this, lt));
  }
  /**
   * @returns the object for reading and changing form data.
   */
  get data() {
    return y(this, xe);
  }
  /**
   * @returns the object to read and modify parent data (available for array elements).
   */
  get parentData() {
    return y(this, Ne);
  }
  /**
   * @returns the object to read and modify root form data.
   */
  get rootData() {
    return y(this, ze);
  }
}
xe = new WeakMap(), Ne = new WeakMap(), ze = new WeakMap(), $e = new WeakMap(), lt = new WeakMap();
const Fl = `
/**
 * Arguments passed to the event handler.
 */
declare class ActionEventArgs {

  /**
   * The event type.
   */
  readonly type: string

  /**
   * The component that triggered the event.
   */
  readonly sender: ComponentData
  
  /**
   * The component properties that were used to render the sender component.
   */
  readonly renderedProps: Record<string, any>

  /**
   * The index of the component in the array, if the component is in the array.
   */
  readonly index?: number

  /**
   * Sets current props of component.
   */
  readonly setUserDefinedProps: (props: Record<string, any>) => void

  /**
   * The form viewer settings.
   */
  readonly store: Store

  /**
   * The event arguments.
   */
  readonly args: any[]

  /**
   * @returns the event handled by the event handler.
   */
  get event(): SyntheticEvent | null

  /**
   * @returns the first element of the event argument array, which is treated as a value.
   */
  get value(): any
  
  /**
   * @returns the object for reading and changing form data.
   */
  get data(