@multiplatform.one/backoffice 7.34.4 → 7.35.0

package/dist/jsx/formBuilder/DoctypePicker.mjs

@@ -0,0 +1,64 @@
+import { AsyncBoundary, AsyncSkeleton, Button, EmptyState, Heading, YStack } from "@multiplatform.one/components";
+import { Combobox, Input } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAwesomebarCatalog } from "../chrome/awesomebar-data.mjs";
+import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider.mjs";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DoctypePicker() {
+  const {
+    t
+  } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const {
+    catalog,
+    error
+  } = useAwesomebarCatalog();
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const [name, setName] = useState("");
+  const open = doctype => {
+    if (doctype.trim()) navigator.navigate(paths.formBuilder(doctype.trim()));
+  };
+  return /* @__PURE__ */jsxs(YStack, {
+    ...knobProps.panelPadding,
+    ...knobProps.gap,
+    minWidth: 0,
+    testID: "form-builder-picker",
+    children: [/* @__PURE__ */jsx(Heading, {
+      ...knobProps.pageTitle,
+      ...knobProps.heading,
+      children: t("formBuilder.title", "Customize Form")
+    }), /* @__PURE__ */jsx(AsyncBoundary, {
+      loading: !catalog && !error ? /* @__PURE__ */jsx(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__ */jsx(EmptyState, {
+        title: t("formBuilder.noDoctypes", "No DocTypes available")
+      }) : false,
+      children: catalog?.doctypes.length ? /* @__PURE__ */jsx(Combobox, {
+        label: t("formBuilder.doctype", "DocType"),
+        options: catalog.doctypes.map(doctype => ({
+          value: doctype,
+          label: doctype
+        })),
+        value: "",
+        onChange: value => open(String(value))
+      }) : null
+    }), /* @__PURE__ */jsx(Input, {
+      label: t("formBuilder.typedDoctype", "DocType name"),
+      value: name,
+      onChangeText: setName
+    }), /* @__PURE__ */jsx(Button, {
+      onPress: () => open(name),
+      children: t("formBuilder.open", "Open form builder")
+    })]
+  });
+}
+export { DoctypePicker };
+//# sourceMappingURL=DoctypePicker.mjs.map

package/dist/jsx/formBuilder/DoctypePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["AsyncBoundary","AsyncSkeleton","Button","EmptyState","Heading","YStack","Combobox","Input","useResolvedKnobs","useState","useTranslation","useAwesomebarCatalog","useBackofficeNavigator","useBackofficePaths","BACKOFFICE_I18N_NAMESPACE","jsx","jsxs","DoctypePicker","t","knobProps","catalog","error","navigator","paths","name","setName","open","doctype","trim","navigate","formBuilder","panelPadding","gap","minWidth","testID","children","pageTitle","heading","loading","layout","empty","doctypes","length","title","label","options","map","value","onChange","String","onChangeText","onPress"],"sources":["../../../src/formBuilder/DoctypePicker.tsx"],"sourcesContent":[null],"mappings":"AAAA,SACEA,aAAA,EACAC,aAAA,EACAC,MAAA,EACAC,UAAA,EACAC,OAAA,EACAC,MAAA,QACK;AACP,SAASC,QAAA,EAAUC,KAAA,QAAa;AAChC,SAASC,gBAAA,QAAwB;AACjC,SAASC,QAAA,QAAgB;AACzB,SAASC,cAAA,QAAsB;AAC/B,SAASC,oBAAA,QAA4B;AACrC,SAASC,sBAAA,EAAwBC,kBAAA,QAA0B;AAC3D,SAASC,yBAAA,QAAiC;AAatC,SAMEC,GAAA,EANFC,IAAA;AAXG,SAASC,cAAA,EAAgB;EAC9B,MAAM;IAAEC;EAAE,IAAIR,cAAA,CAAeI,yBAAyB;EACtD,MAAM;IAAEK;EAAU,IAAIX,gBAAA,CAAiB;EACvC,MAAM;IAAEY,OAAA;IAASC;EAAM,IAAIV,oBAAA,CAAqB;EAChD,MAAMW,SAAA,GAAYV,sBAAA,CAAuB;EACzC,MAAMW,KAAA,GAAQV,kBAAA,CAAmB;EACjC,MAAM,CAACW,IAAA,EAAMC,OAAO,IAAIhB,QAAA,CAAS,EAAE;EACnC,MAAMiB,IAAA,GAAQC,OAAA,IAAoB;IAChC,IAAIA,OAAA,CAAQC,IAAA,CAAK,GAAGN,SAAA,CAAUO,QAAA,CAASN,KAAA,CAAMO,WAAA,CAAYH,OAAA,CAAQC,IAAA,CAAK,CAAC,CAAC;EAC1E;EACA,OACE,eAAAZ,IAAA,CAACX,MAAA;IACE,GAAGc,SAAA,CAAUY,YAAA;IACb,GAAGZ,SAAA,CAAUa,GAAA;IACdC,QAAA,EAAU;IACVC,MAAA,EAAO;IAEPC,QAAA,kBAAApB,GAAA,CAACX,OAAA;MAAS,GAAGe,SAAA,CAAUiB,SAAA;MAAY,GAAGjB,SAAA,CAAUkB,OAAA;MAC7CF,QAAA,EAAAjB,CAAA,CAAE,qBAAqB,gBAAgB;IAAA,CAC1C,GACA,eAAAH,GAAA,CAACf,aAAA;MACCsC,OAAA,EAAS,CAAClB,OAAA,IAAW,CAACC,KAAA,GAAQ,eAAAN,GAAA,CAACd,aAAA;QAAcsC,MAAA,EAAO;MAAA,CAAU,IAAK;MACnElB,KAAA,EACEA,KAAA,GACIH,CAAA,CACE,4BACA,8DACF,IACA;MAENsB,KAAA,EACEpB,OAAA,IAAW,CAACA,OAAA,CAAQqB,QAAA,CAASC,MAAA,GAC3B,eAAA3B,GAAA,CAACZ,UAAA;QAAWwC,KAAA,EAAOzB,CAAA,CAAE,0BAA0B,uBAAuB;MAAA,CAAG,IAEzE;MAIHiB,QAAA,EAAAf,OAAA,EAASqB,QAAA,CAASC,MAAA,GACjB,eAAA3B,GAAA,CAACT,QAAA;QACCsC,KAAA,EAAO1B,CAAA,CAAE,uBAAuB,SAAS;QACzC2B,OAAA,EAASzB,OAAA,CAAQqB,QAAA,CAASK,GAAA,CAAKnB,OAAA,KAAa;UAAEoB,KAAA,EAAOpB,OAAA;UAASiB,KAAA,EAAOjB;QAAQ,EAAE;QAC/EoB,KAAA,EAAM;QACNC,QAAA,EAAWD,KAAA,IAAUrB,IAAA,CAAKuB,MAAA,CAAOF,KAAK,CAAC;MAAA,CACzC,IACE;IAAA,CACN,GACA,eAAAhC,GAAA,CAACR,KAAA;MACCqC,KAAA,EAAO1B,CAAA,CAAE,4BAA4B,cAAc;MACnD6B,KAAA,EAAOvB,IAAA;MACP0B,YAAA,EAAczB;IAAA,CAChB,GACA,eAAAV,GAAA,CAACb,MAAA;MAAOiD,OAAA,EAASA,CAAA,KAAMzB,IAAA,CAAKF,IAAI;MAAIW,QAAA,EAAAjB,CAAA,CAAE,oBAAoB,mBAAmB;IAAA,CAAE;EAAA,CACjF;AAEJ","ignoreList":[]}

package/dist/jsx/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/jsx/formBuilder/DoctypePicker.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","DoctypePicker_exports","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","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"],"sources":["../../../src/formBuilder/DoctypePicker.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/formBuilder/FieldPalette.mjs

@@ -0,0 +1,123 @@
+import { Card, Chip, EmptyState, Paragraph, SizableText, XStack, YStack } from "@multiplatform.one/components";
+import { Button, Chip as FilterChip, SearchInput } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PlusIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n/index.mjs";
+import { fieldtypeCatalog } from "./fieldtypes.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FieldPalette({
+  onAdd,
+  onPointerDown
+}) {
+  const {
+    t
+  } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon.width);
+  const [search, setSearch] = useState("");
+  const [group, setGroup] = 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 = fieldtypeCatalog.filter(entry => (group === "all" || entry.group === group) && `${t(entry.labelKey, entry.label)} ${t(entry.descriptionKey, entry.description)}`.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */jsxs(YStack, {
+    ...knobProps.gap,
+    minWidth: 0,
+    children: [/* @__PURE__ */jsxs(XStack, {
+      ...knobProps.gapSm,
+      alignItems: "center",
+      minWidth: 0,
+      children: [/* @__PURE__ */jsx(SizableText, {
+        ...knobProps.heading,
+        flex: 1,
+        children: t("formBuilder.fieldTypes", "Field types")
+      }), /* @__PURE__ */jsx(Chip, {
+        size: "$2",
+        children: t("formBuilder.typeCount", "{{count}} types", {
+          count: entries.length
+        })
+      })]
+    }), /* @__PURE__ */jsx(SearchInput, {
+      label: t("formBuilder.search", "Search field types"),
+      value: search,
+      onChange: setSearch
+    }), /* @__PURE__ */jsxs(YStack, {
+      ...knobProps.gapSm,
+      role: "group",
+      "aria-label": t("formBuilder.group", "Field group"),
+      children: [/* @__PURE__ */jsx(SizableText, {
+        ...knobProps.label,
+        children: t("formBuilder.group", "Field group")
+      }), /* @__PURE__ */jsx(XStack, {
+        ...knobProps.gapSm,
+        flexWrap: "wrap",
+        minWidth: 0,
+        children: groupOptions.map(option => /* @__PURE__ */jsx(FilterChip, {
+          size: "$3",
+          variant: "outline",
+          selected: group === option.value,
+          onPress: () => setGroup(option.value),
+          children: option.label
+        }, option.value))
+      })]
+    }), entries.length === 0 ? /* @__PURE__ */jsx(EmptyState, {
+      size: "$2",
+      title: t("formBuilder.noTypes", "No matching field types")
+    }) : null, Array.from({
+      length: Math.ceil(entries.length / 2)
+    }, (_, row) => /* @__PURE__ */jsx(XStack, {
+      ...knobProps.gapSm,
+      minWidth: 0,
+      children: entries.slice(row * 2, row * 2 + 2).map(entry => /* @__PURE__ */jsxs(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__ */jsx(Button, {
+          size: "$2",
+          chromeless: true,
+          maxWidth: "100%",
+          icon: /* @__PURE__ */jsx(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__ */jsx(Paragraph, {
+          ...knobProps.body,
+          color: "$color11",
+          numberOfLines: 2,
+          maxWidth: "100%",
+          children: t(entry.descriptionKey, entry.description)
+        })]
+      }, entry.fieldtype))
+    }, row))]
+  });
+}
+export { FieldPalette };
+//# sourceMappingURL=FieldPalette.mjs.map

package/dist/jsx/formBuilder/FieldPalette.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Card","Chip","EmptyState","Paragraph","SizableText","XStack","YStack","Button","FilterChip","SearchInput","useResolvedKnobs","PlusIcon","useState","useTranslation","BACKOFFICE_I18N_NAMESPACE","fieldtypeCatalog","jsx","jsxs","FieldPalette","onAdd","onPointerDown","t","knobProps","iconSize","Number","controlIcon","width","search","setSearch","group","setGroup","groupOptions","value","label","entries","filter","entry","labelKey","descriptionKey","description","toLowerCase","includes","gap","minWidth","children","gapSm","alignItems","heading","flex","size","count","length","onChange","role","flexWrap","map","option","variant","selected","onPress","title","Array","from","Math","ceil","_","row","slice","tier","fieldtype","event","target","closest","chromeless","maxWidth","icon","type","body","color","numberOfLines"],"sources":["../../../src/formBuilder/FieldPalette.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/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/jsx/formBuilder/FieldPalette.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","FieldPalette_exports","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"],"sources":["../../../src/formBuilder/FieldPalette.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/formBuilder/FieldPropertiesPanel.mjs

@@ -0,0 +1,161 @@
+import { ConfirmDialog, EmptyState, SizableText, Text, YStack } from "@multiplatform.one/components";
+import { Button, Checkbox, Input, Select, TextArea } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n/index.mjs";
+import { fieldtypeCatalog, holdsValue, optionsHint } from "./fieldtypes.mjs";
+import { canDeleteField, findField, removeColumn, removeField, removeSection, removeTab, updateBreak, updateField } from "./model.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function FieldPropertiesPanel({
+  layout,
+  selection,
+  mode,
+  errors,
+  onChange
+}) {
+  const {
+    t
+  } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const [confirm, setConfirm] = useState(false);
+  const field = selection ? 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__ */jsx(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 ? updateField(layout, node.key, patch) : updateBreak(layout, node.key, patch));
+  const remove = () => onChange(field ? removeField(layout, node.key) : tab ? removeTab(layout, node.key) : section ? removeSection(layout, node.key) : removeColumn(layout, node.key));
+  const deletable = !field || 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 ? optionsHint(df.fieldtype) : void 0;
+  return /* @__PURE__ */jsxs(YStack, {
+    ...knobProps.gap,
+    minWidth: 0,
+    testID: "form-builder-properties",
+    children: [/* @__PURE__ */jsx(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__ */jsxs(YStack, {
+      ...knobProps.gapSm,
+      minWidth: 0,
+      children: [/* @__PURE__ */jsx(Text, {
+        ...knobProps.label,
+        numberOfLines: 1,
+        children: field.df.label || field.df.fieldname
+      }), /* @__PURE__ */jsx(Text, {
+        ...knobProps.body,
+        color: "$color11",
+        numberOfLines: 1,
+        children: field.df.fieldname
+      })]
+    }) : null, /* @__PURE__ */jsx(Input, {
+      label: t("formBuilder.label", "Label"),
+      value: df?.label ?? "",
+      onChangeText: label => update({
+        label
+      }),
+      error: error.label ?? (!field ? error.fieldname : void 0)
+    }), field ? /* @__PURE__ */jsxs(Fragment, {
+      children: [/* @__PURE__ */jsx(Input, {
+        label: t("formBuilder.fieldname", "Fieldname"),
+        value: field.df.fieldname,
+        readOnly: !field.isNew,
+        onChangeText: fieldname => update({
+          fieldname
+        }),
+        error: error.fieldname
+      }), /* @__PURE__ */jsx(Select, {
+        label: t("formBuilder.fieldType", "Field Type"),
+        value: field.df.fieldtype,
+        options: fieldtypeCatalog.map(entry => ({
+          value: entry.fieldtype,
+          label: t(entry.labelKey, entry.label)
+        })),
+        onChange: value => update({
+          fieldtype: String(value)
+        }),
+        error: error.fieldtype
+      }), hint ? /* @__PURE__ */jsx(TextArea, {
+        label: t("formBuilder.optionsLabel", "Options"),
+        helperText: t(hint.key, hint.default),
+        value: String(df?.options ?? ""),
+        onChange: options => update({
+          options
+        }),
+        error: error.options
+      }) : null, holdsValue(field.df.fieldtype) ? /* @__PURE__ */jsx(Input, {
+        label: t("formBuilder.default", "Default"),
+        value: String(df?.default ?? ""),
+        onChangeText: value => update({
+          default: value
+        }),
+        error: error.default
+      }) : null, /* @__PURE__ */jsx(TextArea, {
+        label: t("formBuilder.description", "Description"),
+        value: String(df?.description ?? ""),
+        onChange: description => update({
+          description
+        }),
+        error: error.description
+      }), /* @__PURE__ */jsxs(YStack, {
+        ...knobProps.gapSm,
+        children: [/* @__PURE__ */jsx(SizableText, {
+          ...knobProps.label,
+          children: t("formBuilder.behaviour", "Behaviour")
+        }), holdsValue(field.df.fieldtype) ? /* @__PURE__ */jsxs(Fragment, {
+          children: [/* @__PURE__ */jsx(Checkbox, {
+            label: t("formBuilder.mandatory", "Mandatory"),
+            checked: !!df?.reqd,
+            onChange: value => update({
+              reqd: value ? 1 : 0
+            })
+          }), /* @__PURE__ */jsx(Checkbox, {
+            label: t("formBuilder.readOnly", "Read Only"),
+            checked: !!df?.read_only,
+            onChange: value => update({
+              read_only: value ? 1 : 0
+            })
+          }), /* @__PURE__ */jsx(Checkbox, {
+            label: t("formBuilder.inListView", "In List View"),
+            checked: !!df?.in_list_view,
+            onChange: value => update({
+              in_list_view: value ? 1 : 0
+            })
+          })]
+        }) : null, /* @__PURE__ */jsx(Checkbox, {
+          label: t("formBuilder.hidden", "Hidden"),
+          checked: !!df?.hidden,
+          onChange: value => update({
+            hidden: value ? 1 : 0
+          })
+        })]
+      })]
+    }) : null, removable ? /* @__PURE__ */jsx(Button, {
+      error: deletable,
+      outlined: true,
+      onPress: () => deletable ? setConfirm(true) : update({
+        hidden: 1
+      }),
+      children: deletable ? t("formBuilder.delete", "Delete") : t("formBuilder.hide", "Hide")
+    }) : null, /* @__PURE__ */jsx(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
+    })]
+  });
+}
+export { FieldPropertiesPanel };
+//# sourceMappingURL=FieldPropertiesPanel.mjs.map