@multiplatform.one/backoffice 7.34.4 → 7.36.0

package/dist/cjs/formBuilder/DoctypePicker.native.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var DoctypePicker_exports = {};
+__export(DoctypePicker_exports, {
+  DoctypePicker: () => DoctypePicker
+});
+module.exports = __toCommonJS(DoctypePicker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_react_i18next = require("react-i18next");
+var import_awesomebar_data = require("../chrome/awesomebar-data.native.js");
+var import_BackofficeProvider = require("../config/BackofficeProvider.native.js");
+var import_i18n = require("../i18n/index.native.js");
+function DoctypePicker() {
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var {
+    catalog,
+    error
+  } = (0, import_awesomebar_data.useAwesomebarCatalog)();
+  var navigator = (0, import_BackofficeProvider.useBackofficeNavigator)();
+  var paths = (0, import_BackofficeProvider.useBackofficePaths)();
+  var [name, setName] = (0, import_react.useState)("");
+  var open = function open2(doctype) {
+    if (doctype.trim()) navigator.navigate(paths.formBuilder(doctype.trim()));
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.panelPadding,
+    ...knobProps.gap,
+    minWidth: 0,
+    testID: "form-builder-picker",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Heading, {
+      ...knobProps.pageTitle,
+      ...knobProps.heading,
+      children: t("formBuilder.title", "Customize Form")
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncBoundary, {
+      loading: !catalog && !error ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncSkeleton, {
+        layout: "generic"
+      }) : false,
+      error: error ? t("formBuilder.catalogError", "The DocType catalog could not be loaded. Enter a name below.") : void 0,
+      empty: catalog && !catalog.doctypes.length ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+        title: t("formBuilder.noDoctypes", "No DocTypes available")
+      }) : false,
+      children: (catalog === null || catalog === void 0 ? void 0 : catalog.doctypes.length) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Combobox, {
+        label: t("formBuilder.doctype", "DocType"),
+        options: catalog.doctypes.map(function (doctype) {
+          return {
+            value: doctype,
+            label: doctype
+          };
+        }),
+        value: "",
+        onChange: function onChange(value) {
+          return open(String(value));
+        }
+      }) : null
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+      label: t("formBuilder.typedDoctype", "DocType name"),
+      value: name,
+      onChangeText: setName
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+      onPress: function onPress() {
+        return open(name);
+      },
+      children: t("formBuilder.open", "Open form builder")
+    })]
+  });
+}
+//# sourceMappingURL=DoctypePicker.native.js.map

package/dist/cjs/formBuilder/DoctypePicker.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DoctypePicker_exports","__export","DoctypePicker","module","exports","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react","import_react_i18next","import_awesomebar_data","import_BackofficeProvider","import_i18n","t","useTranslation","BACKOFFICE_I18N_NAMESPACE","knobProps","useResolvedKnobs","catalog","error","useAwesomebarCatalog","navigator","useBackofficeNavigator","paths","useBackofficePaths","name","setName","useState","open","open2","doctype","trim","navigate","formBuilder","jsxs","YStack","panelPadding","gap","minWidth","testID","children","jsx","Heading","pageTitle","heading","AsyncBoundary","loading","AsyncSkeleton","layout","empty","doctypes","length","EmptyState","title","Combobox","label","options","map","onChange","String","Input","onChangeText","Button","onPress"],"sources":["../../../src/formBuilder/DoctypePicker.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/formBuilder/FieldPalette.cjs

@@ -0,0 +1,148 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FieldPalette_exports = {};
+__export(FieldPalette_exports, {
+  FieldPalette: () => FieldPalette
+});
+module.exports = __toCommonJS(FieldPalette_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n/index.cjs");
+var import_fieldtypes = require("./fieldtypes.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FieldPalette({
+  onAdd,
+  onPointerDown
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const iconSize = Number(knobProps.controlIcon.width);
+  const [search, setSearch] = (0, import_react2.useState)("");
+  const [group, setGroup] = (0, import_react2.useState)("all");
+  const groupOptions = [{
+    value: "all",
+    label: t("formBuilder.groups.all", "All")
+  }, {
+    value: "standard",
+    label: t("formBuilder.groups.standard", "Standard")
+  }, {
+    value: "layout",
+    label: t("formBuilder.groups.layout", "Layout")
+  }, {
+    value: "advanced",
+    label: t("formBuilder.groups.advanced", "Advanced")
+  }];
+  const entries = import_fieldtypes.fieldtypeCatalog.filter(entry => (group === "all" || entry.group === group) && `${t(entry.labelKey, entry.label)} ${t(entry.descriptionKey, entry.description)}`.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.gap,
+    minWidth: 0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      ...knobProps.gapSm,
+      alignItems: "center",
+      minWidth: 0,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+        ...knobProps.heading,
+        flex: 1,
+        children: t("formBuilder.fieldTypes", "Field types")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+        size: "$2",
+        children: t("formBuilder.typeCount", "{{count}} types", {
+          count: entries.length
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
+      label: t("formBuilder.search", "Search field types"),
+      value: search,
+      onChange: setSearch
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      ...knobProps.gapSm,
+      role: "group",
+      "aria-label": t("formBuilder.group", "Field group"),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+        ...knobProps.label,
+        children: t("formBuilder.group", "Field group")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        ...knobProps.gapSm,
+        flexWrap: "wrap",
+        minWidth: 0,
+        children: groupOptions.map(option => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Chip, {
+          size: "$3",
+          variant: "outline",
+          selected: group === option.value,
+          onPress: () => setGroup(option.value),
+          children: option.label
+        }, option.value))
+      })]
+    }), entries.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+      size: "$2",
+      title: t("formBuilder.noTypes", "No matching field types")
+    }) : null, Array.from({
+      length: Math.ceil(entries.length / 2)
+    }, (_, row) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      ...knobProps.gapSm,
+      minWidth: 0,
+      children: entries.slice(row * 2, row * 2 + 2).map(entry => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Card, {
+        tier: "elevated",
+        flex: 1,
+        minWidth: 0,
+        alignItems: "flex-start",
+        "data-fb-palette": entry.fieldtype,
+        onPress: event => {
+          const target = event.target;
+          if (target.closest?.("button, [role=button]")) return;
+          onAdd(entry.fieldtype);
+        },
+        ...{
+          onPointerDown: event => onPointerDown(entry.fieldtype, event)
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: "$2",
+          chromeless: true,
+          maxWidth: "100%",
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+            size: iconSize
+          }),
+          "aria-label": t("formBuilder.addType", "Add {{type}} field", {
+            type: t(entry.labelKey, entry.label)
+          }),
+          onPress: () => onAdd(entry.fieldtype),
+          children: t(entry.labelKey, entry.label)
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Paragraph, {
+          ...knobProps.body,
+          color: "$color11",
+          numberOfLines: 2,
+          maxWidth: "100%",
+          children: t(entry.descriptionKey, entry.description)
+        })]
+      }, entry.fieldtype))
+    }, row))]
+  });
+}

package/dist/cjs/formBuilder/FieldPalette.native.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FieldPalette_exports = {};
+__export(FieldPalette_exports, {
+  FieldPalette: () => FieldPalette
+});
+module.exports = __toCommonJS(FieldPalette_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n/index.native.js");
+var import_fieldtypes = require("./fieldtypes.native.js");
+function FieldPalette(param) {
+  var {
+    onAdd,
+    onPointerDown
+  } = param;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var iconSize = Number(knobProps.controlIcon.width);
+  var [search, setSearch] = (0, import_react2.useState)("");
+  var [group, setGroup] = (0, import_react2.useState)("all");
+  var groupOptions = [{
+    value: "all",
+    label: t("formBuilder.groups.all", "All")
+  }, {
+    value: "standard",
+    label: t("formBuilder.groups.standard", "Standard")
+  }, {
+    value: "layout",
+    label: t("formBuilder.groups.layout", "Layout")
+  }, {
+    value: "advanced",
+    label: t("formBuilder.groups.advanced", "Advanced")
+  }];
+  var entries = import_fieldtypes.fieldtypeCatalog.filter(function (entry) {
+    return (group === "all" || entry.group === group) && `${t(entry.labelKey, entry.label)} ${t(entry.descriptionKey, entry.description)}`.toLowerCase().includes(search.toLowerCase());
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.gap,
+    minWidth: 0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      ...knobProps.gapSm,
+      alignItems: "center",
+      minWidth: 0,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+        ...knobProps.heading,
+        flex: 1,
+        children: t("formBuilder.fieldTypes", "Field types")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+        size: "$2",
+        children: t("formBuilder.typeCount", "{{count}} types", {
+          count: entries.length
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
+      label: t("formBuilder.search", "Search field types"),
+      value: search,
+      onChange: setSearch
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      ...knobProps.gapSm,
+      role: "group",
+      "aria-label": t("formBuilder.group", "Field group"),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+        ...knobProps.label,
+        children: t("formBuilder.group", "Field group")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        ...knobProps.gapSm,
+        flexWrap: "wrap",
+        minWidth: 0,
+        children: groupOptions.map(function (option) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Chip, {
+            size: "$3",
+            variant: "outline",
+            selected: group === option.value,
+            onPress: function onPress() {
+              return setGroup(option.value);
+            },
+            children: option.label
+          }, option.value);
+        })
+      })]
+    }), entries.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+      size: "$2",
+      title: t("formBuilder.noTypes", "No matching field types")
+    }) : null, Array.from({
+      length: Math.ceil(entries.length / 2)
+    }, function (_, row) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        ...knobProps.gapSm,
+        minWidth: 0,
+        children: entries.slice(row * 2, row * 2 + 2).map(function (entry) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Card, {
+            tier: "elevated",
+            flex: 1,
+            minWidth: 0,
+            alignItems: "flex-start",
+            "data-fb-palette": entry.fieldtype,
+            onPress: function onPress(event) {
+              var _target_closest;
+              var target = event.target;
+              if ((_target_closest = target.closest) === null || _target_closest === void 0 ? void 0 : _target_closest.call(target, "button, [role=button]")) return;
+              onAdd(entry.fieldtype);
+            },
+            onPointerDown: function onPointerDown1(event) {
+              return onPointerDown(entry.fieldtype, event);
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              size: "$2",
+              chromeless: true,
+              maxWidth: "100%",
+              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+                size: iconSize
+              }),
+              "aria-label": t("formBuilder.addType", "Add {{type}} field", {
+                type: t(entry.labelKey, entry.label)
+              }),
+              onPress: function onPress() {
+                return onAdd(entry.fieldtype);
+              },
+              children: t(entry.labelKey, entry.label)
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Paragraph, {
+              ...knobProps.body,
+              color: "$color11",
+              numberOfLines: 2,
+              maxWidth: "100%",
+              children: t(entry.descriptionKey, entry.description)
+            })]
+          }, entry.fieldtype);
+        })
+      }, row);
+    })]
+  });
+}
+//# sourceMappingURL=FieldPalette.native.js.map

package/dist/cjs/formBuilder/FieldPalette.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","FieldPalette_exports","__export","FieldPalette","module","exports","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react","import_react2","import_react_i18next","import_i18n","import_fieldtypes","param","onAdd","onPointerDown","t","useTranslation","BACKOFFICE_I18N_NAMESPACE","knobProps","useResolvedKnobs","iconSize","Number","controlIcon","width","search","setSearch","useState","group","setGroup","groupOptions","label","entries","fieldtypeCatalog","filter","entry","labelKey","descriptionKey","description","toLowerCase","includes","jsxs","YStack","gap","minWidth","children","XStack","gapSm","alignItems","jsx","SizableText","heading","flex","Chip","size","count","length","SearchInput","onChange","role","flexWrap","map","option","variant","selected","onPress","EmptyState"],"sources":["../../../src/formBuilder/FieldPalette.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/formBuilder/FieldPropertiesPanel.cjs

@@ -0,0 +1,186 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FieldPropertiesPanel_exports = {};
+__export(FieldPropertiesPanel_exports, {
+  FieldPropertiesPanel: () => FieldPropertiesPanel
+});
+module.exports = __toCommonJS(FieldPropertiesPanel_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n/index.cjs");
+var import_fieldtypes = require("./fieldtypes.cjs");
+var import_model = require("./model.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FieldPropertiesPanel({
+  layout,
+  selection,
+  mode,
+  errors,
+  onChange
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [confirm, setConfirm] = (0, import_react.useState)(false);
+  const field = selection ? (0, import_model.findField)(layout, selection) : void 0;
+  const tab = layout.tabs.find(node2 => node2.key === selection);
+  const section = layout.tabs.flatMap(node2 => node2.sections).find(node2 => node2.key === selection);
+  const column = layout.tabs.flatMap(node2 => node2.sections.flatMap(s => s.columns)).find(node2 => node2.key === selection);
+  const node = field ?? tab ?? section ?? column;
+  if (!node) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+    size: "$2",
+    title: t("formBuilder.selectField", "Select a field to edit its properties")
+  });
+  const df = node.df;
+  const error = errors[node.key] ?? {};
+  const update = patch => onChange(field ? (0, import_model.updateField)(layout, node.key, patch) : (0, import_model.updateBreak)(layout, node.key, patch));
+  const remove = () => onChange(field ? (0, import_model.removeField)(layout, node.key) : tab ? (0, import_model.removeTab)(layout, node.key) : section ? (0, import_model.removeSection)(layout, node.key) : (0, import_model.removeColumn)(layout, node.key));
+  const deletable = !field || (0, import_model.canDeleteField)(field, mode);
+  const removable = field || (tab ? layout.tabs.length > 1 : section ? layout.tabs.length > 1 || layout.tabs[0].sections.length > 1 : layout.tabs.some(t2 => t2.sections.some(s => s.columns.length > 1 && s.columns.some(c => c.key === selection))));
+  const hint = df ? (0, import_fieldtypes.optionsHint)(df.fieldtype) : void 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.gap,
+    minWidth: 0,
+    testID: "form-builder-properties",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+      ...knobProps.heading,
+      children: field ? t("formBuilder.properties", "Field properties") : tab ? t("formBuilder.tabProperties", "Tab properties") : section ? t("formBuilder.sectionProperties", "Section properties") : t("formBuilder.columnProperties", "Column properties")
+    }), field ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      ...knobProps.gapSm,
+      minWidth: 0,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...knobProps.label,
+        numberOfLines: 1,
+        children: field.df.label || field.df.fieldname
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...knobProps.body,
+        color: "$color11",
+        numberOfLines: 1,
+        children: field.df.fieldname
+      })]
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+      label: t("formBuilder.label", "Label"),
+      value: df?.label ?? "",
+      onChangeText: label => update({
+        label
+      }),
+      error: error.label ?? (!field ? error.fieldname : void 0)
+    }), field ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+        label: t("formBuilder.fieldname", "Fieldname"),
+        value: field.df.fieldname,
+        readOnly: !field.isNew,
+        onChangeText: fieldname => update({
+          fieldname
+        }),
+        error: error.fieldname
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+        label: t("formBuilder.fieldType", "Field Type"),
+        value: field.df.fieldtype,
+        options: import_fieldtypes.fieldtypeCatalog.map(entry => ({
+          value: entry.fieldtype,
+          label: t(entry.labelKey, entry.label)
+        })),
+        onChange: value => update({
+          fieldtype: String(value)
+        }),
+        error: error.fieldtype
+      }), hint ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
+        label: t("formBuilder.optionsLabel", "Options"),
+        helperText: t(hint.key, hint.default),
+        value: String(df?.options ?? ""),
+        onChange: options => update({
+          options
+        }),
+        error: error.options
+      }) : null, (0, import_fieldtypes.holdsValue)(field.df.fieldtype) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+        label: t("formBuilder.default", "Default"),
+        value: String(df?.default ?? ""),
+        onChangeText: value => update({
+          default: value
+        }),
+        error: error.default
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
+        label: t("formBuilder.description", "Description"),
+        value: String(df?.description ?? ""),
+        onChange: description => update({
+          description
+        }),
+        error: error.description
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        ...knobProps.gapSm,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+          ...knobProps.label,
+          children: t("formBuilder.behaviour", "Behaviour")
+        }), (0, import_fieldtypes.holdsValue)(field.df.fieldtype) ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+            label: t("formBuilder.mandatory", "Mandatory"),
+            checked: !!df?.reqd,
+            onChange: value => update({
+              reqd: value ? 1 : 0
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+            label: t("formBuilder.readOnly", "Read Only"),
+            checked: !!df?.read_only,
+            onChange: value => update({
+              read_only: value ? 1 : 0
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+            label: t("formBuilder.inListView", "In List View"),
+            checked: !!df?.in_list_view,
+            onChange: value => update({
+              in_list_view: value ? 1 : 0
+            })
+          })]
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
+          label: t("formBuilder.hidden", "Hidden"),
+          checked: !!df?.hidden,
+          onChange: value => update({
+            hidden: value ? 1 : 0
+          })
+        })]
+      })]
+    }) : null, removable ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      error: deletable,
+      outlined: true,
+      onPress: () => deletable ? setConfirm(true) : update({
+        hidden: 1
+      }),
+      children: deletable ? t("formBuilder.delete", "Delete") : t("formBuilder.hide", "Hide")
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ConfirmDialog, {
+      open: confirm,
+      onOpenChange: setConfirm,
+      title: t("formBuilder.deleteTitle", "Remove this form item?"),
+      body: field ? t("formBuilder.deleteFieldBody", "This field will be removed when you save.") : t("formBuilder.deleteBreakBody", "Fields will move into the neighbouring layout."),
+      confirmLabel: t("formBuilder.delete", "Delete"),
+      destructive: true,
+      onConfirm: remove
+    })]
+  });
+}